/* Yazı Stilleri Aracı — premium görünüm */
.ysa-tool {
	--ysa-accent: #1e9e57;
	--ysa-accent-dark: #167544;
	--ysa-border: #e6ebe7;
	--ysa-bg: #ffffff;
	--ysa-soft: #f4f8f5;
	--ysa-text: #172119;
	--ysa-muted: #6f7d74;
	--ysa-radius: 16px;
	--ysa-shadow: 0 1px 2px rgba(12, 25, 16, .04), 0 6px 20px rgba(12, 25, 16, .05);
	--ysa-shadow-hover: 0 2px 4px rgba(12, 25, 16, .05), 0 12px 32px rgba(12, 25, 16, .10);
	/* Çip şeridinin tepeden ne kadar aşağıda duracağı. Temanın sabit üst
	   menüsü varsa tool.js bunu menü yüksekliği kadar günceller. */
	--ysa-sticky-top: 0px;
	font-size: 16px;
	color: var(--ysa-text);
	margin: 0 0 2.5rem;
	-webkit-font-smoothing: antialiased;
}

/* Giriş kutusu */
.ysa-inputwrap {
	display: flex;
	align-items: center;
	background: var(--ysa-bg);
	border: 1.5px solid var(--ysa-border);
	border-radius: var(--ysa-radius);
	box-shadow: var(--ysa-shadow);
	margin-bottom: 1rem;
	transition: border-color .2s, box-shadow .2s;
}
.ysa-inputwrap:focus-within {
	border-color: var(--ysa-accent);
	box-shadow: 0 0 0 4px rgba(30, 158, 87, .08), var(--ysa-shadow);
}
.ysa-input {
	flex: 1;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 1.2rem;
	font-weight: 500;
	padding: 1.05rem 1.2rem;
	color: var(--ysa-text);
	min-width: 0;
}
.ysa-input::placeholder { color: var(--ysa-muted); font-weight: 400; }
.ysa-clear {
	border: 0;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0 1rem;
	color: var(--ysa-muted);
	cursor: pointer;
	transition: color .15s;
}
.ysa-clear:hover { color: var(--ysa-text); }

/* Çip şeridi (kategoriler arası hızlı atlama) — kaydırırken tepede kalır */
.ysa-chips {
	position: sticky;
	top: var(--ysa-sticky-top, 0px);
	/* z-index bilerek düşük tutuldu: temanın sabit başlığı varsa o üstte kalsın */
	z-index: 5;
	display: flex;
	gap: .45rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding: .65rem .15rem;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--ysa-border);
	margin-bottom: 1rem;
}
.ysa-chips::-webkit-scrollbar { display: none; }
.ysa-chip {
	flex: 0 0 auto;
	border: 1px solid var(--ysa-border);
	background: var(--ysa-bg);
	color: var(--ysa-text);
	border-radius: 999px;
	padding: .45rem 1rem;
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	white-space: nowrap;
	transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.ysa-chip:hover {
	border-color: var(--ysa-accent);
	box-shadow: 0 2px 8px rgba(30, 158, 87, .12);
}
.ysa-chip.is-active {
	background: linear-gradient(135deg, var(--ysa-accent), var(--ysa-accent-dark));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 3px 10px rgba(30, 158, 87, .3);
}
.ysa-chip:focus-visible,
.ysa-copy:focus-visible,
.ysa-clear:focus-visible {
	outline: 2px solid var(--ysa-accent);
	outline-offset: 2px;
}

/* Bölümler */
.ysa-section {
	scroll-margin-top: 4rem;
	margin-bottom: 2.2rem;
}
.ysa-sec-title {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-size: .8rem;
	font-weight: 700;
	color: var(--ysa-muted);
	text-transform: uppercase;
	letter-spacing: .1em;
	padding: .4rem .1rem .85rem;
}
.ysa-sec-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--ysa-border), transparent);
}

/* Kartlar */
.ysa-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: .9rem;
}
@media (min-width: 640px) {
	.ysa-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
.ysa-card {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "label label" "out copy";
	align-items: center;
	gap: .5rem 1rem;
	background: var(--ysa-bg);
	border: 1px solid var(--ysa-border);
	border-radius: var(--ysa-radius);
	padding: 1rem 1.15rem 1.05rem;
	box-shadow: var(--ysa-shadow);
	transition: border-color .2s, box-shadow .2s;
}
.ysa-card:hover {
	border-color: var(--ysa-border);
	box-shadow: var(--ysa-shadow-hover);
}
.ysa-label {
	grid-area: label;
	font-size: .74rem;
	font-weight: 600;
	color: var(--ysa-muted);
	text-transform: uppercase;
	letter-spacing: .07em;
}
.ysa-badge {
	display: inline-block;
	margin-left: .45rem;
	padding: .08rem .38rem;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--ysa-accent-dark);
	background: rgba(30, 158, 87, .1);
	border-radius: 5px;
	vertical-align: 1px;
}
.ysa-out {
	grid-area: out;
	font-size: 1.3rem;
	line-height: 1.65;
	word-break: break-word;
	overflow-wrap: anywhere;
}
.ysa-copy {
	grid-area: copy;
	border: 1px solid var(--ysa-border);
	background: var(--ysa-soft);
	color: var(--ysa-text);
	border-radius: 10px;
	padding: .5rem .95rem;
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
	white-space: nowrap;
}
.ysa-copy:hover {
	background: linear-gradient(135deg, var(--ysa-accent), var(--ysa-accent-dark));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 3px 10px rgba(30, 158, 87, .28);
}
.ysa-copy.is-done {
	background: #0d5c34;
	border-color: transparent;
	color: #fff;
	box-shadow: 0 3px 10px rgba(13, 92, 52, .28);
}

/* Bildirim */
.ysa-toast {
	position: fixed;
	left: 50%;
	bottom: 1.6rem;
	transform: translateX(-50%);
	background: rgba(20, 20, 22, .94);
	backdrop-filter: blur(6px);
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .01em;
	padding: .65rem 1.35rem;
	border-radius: 999px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
	z-index: 9999;
	animation: ysa-pop .2s cubic-bezier(.2, .8, .3, 1.1);
}
@keyframes ysa-pop {
	from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.96); }
	to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.ysa-chips { transition: none; }
	.ysa-toast { animation: none; }
	.ysa-chip, .ysa-card, .ysa-copy, .ysa-inputwrap { transition: none; }
	.ysa-card:hover { transform: none; }
}

/* =========================================================================
   Türkçe karakter desteği tablosu — [yazi_stilleri_turkce_tablo]
   ========================================================================= */
.ysa-trtable {
	--ysa-accent: #1e9e57;
	--ysa-border: #e6ebe7;
	--ysa-soft: #f4f8f5;
	--ysa-text: #172119;
	--ysa-muted: #6f7d74;
	color: var(--ysa-text);
	margin: 0 0 2.5rem;
	font-size: 16px;
}

.ysa-trtable-intro,
.ysa-trtable-note {
	line-height: 1.65;
	margin: 0 0 1rem;
}

.ysa-trtable-summary {
	background: var(--ysa-soft);
	border-left: 4px solid var(--ysa-accent);
	border-radius: 0 10px 10px 0;
	padding: .85rem 1rem;
	margin: 0 0 1.25rem;
	line-height: 1.6;
}

.ysa-trtable-note {
	font-size: .93em;
	color: var(--ysa-muted);
	margin-top: 1rem;
}

.ysa-trtable-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--ysa-border);
	border-radius: 14px;
}

table.ysa-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: .96em;
}

table.ysa-table caption {
	caption-side: top;
	text-align: left;
	padding: .9rem 1rem;
	font-weight: 600;
	color: var(--ysa-muted);
	font-size: .9em;
	border-bottom: 1px solid var(--ysa-border);
}

table.ysa-table caption code {
	background: var(--ysa-soft);
	padding: .1em .45em;
	border-radius: 5px;
	font-size: .95em;
}

table.ysa-table th,
table.ysa-table td {
	padding: .7rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--ysa-border);
	vertical-align: middle;
}

table.ysa-table thead th {
	background: var(--ysa-soft);
	font-weight: 600;
	white-space: nowrap;
}

table.ysa-table tbody th {
	font-weight: 600;
	white-space: nowrap;
}

table.ysa-table tbody tr:last-child th,
table.ysa-table tbody tr:last-child td {
	border-bottom: 0;
}

table.ysa-table tbody tr:hover {
	background: rgba(30, 158, 87, .04);
}

.ysa-yes { color: #157a42; font-weight: 600; white-space: nowrap; }
.ysa-no  { color: #8a6d1f; font-weight: 600; white-space: nowrap; }

.ysa-out-cell {
	font-size: 1.15em;
	line-height: 1.9;
	overflow-wrap: anywhere;
}

.ysa-row-kismi .ysa-out-cell { opacity: .92; }

@media (max-width: 560px) {
	table.ysa-table th,
	table.ysa-table td { padding: .6rem .7rem; }
	table.ysa-table { font-size: .9em; }
}

@media (prefers-color-scheme: dark) {
	.ysa-trtable {
		--ysa-border: #2c3630;
		--ysa-soft: #1c2621;
		--ysa-text: #e7efe9;
		--ysa-muted: #9db0a5;
	}
	table.ysa-table tbody tr:hover { background: rgba(30, 158, 87, .10); }
	.ysa-yes { color: #4fd189; }
	.ysa-no  { color: #d9b45f; }
}

/* =========================================================================
   Koyu görünüm — [yazi_stilleri gorunum="koyu"]
   Panel rengi --ysa-panel ile, ikon --ysa-icon ile değiştirilebilir.
   ========================================================================= */
.ysa-skin-koyu {
	--ysa-panel: #035e63;
	--ysa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23035e63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3Cpath d='m15 5 4 4'/%3E%3C/svg%3E");
}

.ysa-skin-koyu .ysa-inputwrap {
	position: relative;
	background: var(--ysa-panel);
	border: 0;
	border-radius: 18px;
	box-shadow: none;
	padding: 14px;
}

.ysa-skin-koyu .ysa-inputwrap:focus-within {
	border: 0;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .25) inset;
}

.ysa-skin-koyu .ysa-input {
	background: #fff var(--ysa-icon) no-repeat 15px center;
	background-size: 24px 24px;
	border-radius: 999px;
	padding: 14px 46px 14px 51px;
	font-size: 17px;
	font-weight: 400;
	color: #172119;
	-webkit-appearance: none;
	appearance: none;
}

.ysa-skin-koyu .ysa-input::placeholder {
	color: #8a9691;
	font-weight: 400;
}

.ysa-skin-koyu .ysa-clear {
	position: absolute;
	right: 28px;
	top: 50%;
	transform: translateY(-50%);
	padding: 0 6px;
	color: #8a9691;
}

.ysa-skin-koyu .ysa-clear:hover { color: #172119; }

@media (max-width: 480px) {
	.ysa-skin-koyu .ysa-inputwrap { padding: 10px; border-radius: 14px; }
	.ysa-skin-koyu .ysa-input     { padding: 12px 42px 12px 47px; font-size: 16px; }
	.ysa-skin-koyu .ysa-clear     { right: 22px; }
}