/* Kampüs - 1. sınıf Türkçe (İlk Okuma Yazma): harf kartı, yazma tahtası, hece renkli okuma
 * TTKB Dik Temel Abece: 1. sınıf içeriğinde (.oonda-s1) HER ZAMAN kullanılır; "İlkokul yazı tipi" ayarından bağımsızdır.
 * © Namık Kemal Sarıkavak. Font dosyaları HİÇBİR DEĞİŞİKLİK YAPILMADAN kullanılır (bkz. fonts/TTKB-Dik-Temel-Abece-LISANS.txt).
 * Kesme işareti ve tırnaklar fontta zayıf olduğu için yalnızca bu işaretler Nunito'dan çizilir (da-font.css ile aynı kural). */
@font-face { font-family: 'TTKB Dik Temel Abece'; font-style: normal; font-weight: 100 650; font-display: swap; src: url('fonts/TTKBDikTemelAbeceBody.ttf') format('truetype'); }
@font-face { font-family: 'TTKB Dik Temel Abece'; font-style: normal; font-weight: 651 900; font-display: swap; src: url('fonts/TTKBDikTemelAbece-Bold.ttf') format('truetype'); }
@font-face { font-family: 'TTKB Dik Temel Abece'; font-style: normal; font-weight: 100 650; font-display: swap; src: url('fonts/nunito-latin-600.woff2') format('woff2'); unicode-range: U+0022, U+0027, U+2018-2019, U+201C-201D, U+2039-203A; }
@font-face { font-family: 'TTKB Dik Temel Abece'; font-style: normal; font-weight: 651 900; font-display: swap; src: url('fonts/nunito-latin-800.woff2') format('woff2'); unicode-range: U+0022, U+0027, U+2018-2019, U+201C-201D, U+2039-203A; }

.oonda.oonda-s1 {
	--ttkb: 'TTKB Dik Temel Abece', 'Nunito', 'Segoe UI', system-ui, -apple-system, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
	--yazi-ilkokul: var(--ttkb);
	--yazi-baslik: var(--ttkb) !important;
	font-family: var(--ttkb) !important;
}
.oonda.oonda-s1 button, .oonda.oonda-s1 input, .oonda.oonda-s1 select, .oonda.oonda-s1 textarea, .oonda.oonda-s1 summary,
.oonda.oonda-s1 .oonda-sema-svg .sema-yazi, .oonda.oonda-s1 .oonda-sema-svg .sema-koyu { font-family: var(--ttkb) !important; }

/* ---------- HARF KARTI ---------- */
.oonda .oonda-hf-kartlar { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em; margin: 0.4em 0 1em; }
.oonda .oonda-hf-kart {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-width: 6.2em; padding: 0.3em 0.9em 0.45em;
	background: #fff; border: 3px solid var(--ucs, #bfdbfe); border-radius: 26px;
	box-shadow: 0 6px 0 var(--ucs, #bfdbfe);
}
.oonda .oonda-hf-harf { font-family: 'TTKB Dik Temel Abece', 'Nunito', sans-serif; font-weight: 700; font-size: 6.4em; line-height: 1.12; color: var(--ucd, #1e3a8a); }
.oonda .oonda-hf-buyuk .oonda-hf-harf { color: var(--ucd, #b91c1c); }
.oonda .oonda-hf-etiket { font-size: 0.9em; font-weight: 800; color: var(--oo-soluk, #475569); }
.oonda .oonda-hf-ses { font-size: 1.15em; text-align: center; }
.oonda .oonda-hf-ornekler { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr)); gap: 0.8em; margin: 0.5em 0 1em; }
.oonda .oonda-hf-ornek {
	display: flex; flex-direction: column; align-items: center; gap: 0.2em; cursor: pointer;
	background: #fff; border: 3px solid var(--ucs, #e2e8f0); border-radius: 22px; padding: 0.55em 0.4em 0.6em;
	box-shadow: 0 5px 0 var(--ucs, #e2e8f0); font-size: 1em; font-weight: 700; color: var(--oo-yazi, #0f172a);
}
.oonda .oonda-hf-ornek .oonda-orn-emoji { font-size: 2.6em; line-height: 1.1; }
.oonda .oonda-hf-sozcuk { font-size: 1.55em; font-weight: 700; letter-spacing: 0.04em; }
.oonda .oonda-hf-vurgu { background: #fde68a; color: #7c2d12; border-radius: 0.2em; padding: 0 0.08em; }
.oonda .oonda-hf-konum { font-size: 0.75em; font-weight: 800; color: var(--oo-soluk, #475569); }
.oonda .oonda-hf-secili { border-color: var(--ucd, #1d4ed8); background: var(--ucl, #eff6ff); transform: translateY(-3px); }
.oonda .oonda-hf-not { text-align: center; }

/* ---------- YAZMA TAHTASI ---------- */
.oonda .oonda-yt-ust { display: flex; flex-wrap: wrap; gap: 1.2em; align-items: center; justify-content: center; margin: 0.4em 0 0.6em; }
.oonda .oonda-yt-model {
	position: relative; width: 11em; height: 11em; flex: 0 0 auto;
	background: #fff; border: 3px solid var(--ucs, #bfdbfe); border-radius: 26px; box-shadow: 0 6px 0 var(--ucs, #bfdbfe);
}
/* Model harfin ölçüleri (yazılış yönü çizgileri bu ölçüye göre hesaplanır, bkz. yapıcı tr1.py): kutu 11em, harf 9em, satır yüksekliği 1 */
.oonda .oonda-yt-model-harf {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: pre;
	font-family: 'TTKB Dik Temel Abece', 'Nunito', sans-serif; font-weight: 400; font-size: 9em; line-height: 1; color: #cbd5e1; user-select: none;
}
.oonda .oonda-yt-model-yuksek .oonda-yt-model-harf { padding-top: 0.289em; } /* noktalı büyük harf (İ) kutuya sığsın: harf 1,3 kutu-em aşağı kayar (tr1_harf.py YUKSEK_KAYMA) */
.oonda .oonda-yt-yon { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.oonda .oonda-yt-yol { stroke: #ef4444; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; fill: none; }
.oonda .oonda-yt-no circle { fill: #ef4444; stroke: #fff; stroke-width: 0.8; }
.oonda .oonda-yt-no text { fill: #fff; font-size: 5.6px; font-weight: 800; font-family: 'TTKB Dik Temel Abece', 'Nunito', sans-serif; }
.oonda .oonda-yt-yonerge { max-width: 22em; font-size: 1.05em; }
.oonda .oonda-yt-adimlar { margin: 0.3em 0 0; padding-left: 1.4em; }
.oonda .oonda-yt-araclar { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: center; justify-content: center; margin: 0.6em 0; }
.oonda .oonda-yt-renk { width: 2.4em; height: 2.4em; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #94a3b8; padding: 0; cursor: pointer; }
.oonda .oonda-yt-renk.oonda-secili { box-shadow: 0 0 0 4px #f59e0b; transform: scale(1.12); }
.oonda .oonda-yt-kagit { display: flex; flex-direction: column; gap: 0.7em; margin: 0.6em 0 0.8em; }
/* Yazma satırı: harf boyu F = 4.2em. Bu satırda 1em = F. Çizgiler (üstten): yükselti 0.15, x yüksekliği 0.47, taban 0.87, alt uzantı 1.19.
   TTKB yazı tipi ölçüleri: taban = üstten 0.69F, x yüksekliği 0.40F, büyük harf / yükselti 0.72F, alt uzantı 0.32F. */
.oonda .oonda-yt-satir {
	position: relative; font-size: 4.2em; line-height: 1; height: calc(1.43em + var(--yt-kay, 0em)); overflow: hidden; border: 2px solid #94a3b8; border-radius: 12px; background-color: #fff;
	background-image:
		linear-gradient(to bottom, transparent calc(0.15em + var(--yt-kay, 0em) - 1px), #e2e8f0 calc(0.15em + var(--yt-kay, 0em) - 1px), #e2e8f0 calc(0.15em + var(--yt-kay, 0em) + 1px), transparent calc(0.15em + var(--yt-kay, 0em) + 1px)),
		linear-gradient(to bottom, transparent calc(0.47em + var(--yt-kay, 0em) - 1px), #bfdbfe calc(0.47em + var(--yt-kay, 0em) - 1px), #bfdbfe calc(0.47em + var(--yt-kay, 0em) + 1px), transparent calc(0.47em + var(--yt-kay, 0em) + 1px)),
		linear-gradient(to bottom, transparent calc(0.87em + var(--yt-kay, 0em) - 1.5px), #f87171 calc(0.87em + var(--yt-kay, 0em) - 1.5px), #f87171 calc(0.87em + var(--yt-kay, 0em) + 1.5px), transparent calc(0.87em + var(--yt-kay, 0em) + 1.5px)),
		linear-gradient(to bottom, transparent calc(1.19em + var(--yt-kay, 0em) - 1px), #e2e8f0 calc(1.19em + var(--yt-kay, 0em) - 1px), #e2e8f0 calc(1.19em + var(--yt-kay, 0em) + 1px), transparent calc(1.19em + var(--yt-kay, 0em) + 1px));
}
.oonda .oonda-yt-satir-yuksek { --yt-kay: 0.2em; }
.oonda .oonda-yt-satir-yuksek .oonda-yt-kilavuz { padding-top: var(--yt-kay); } /* kılavuz kutusu üstten kırpar; nokta bu boşluğa girer */ /* İ, Ö, Ü, Ğ: noktalar / ünlemler satıra sığsın */
.oonda .oonda-yt-kilavuz {
	position: absolute; left: 0.12em; top: 0.18em; display: block; white-space: pre; overflow: hidden; max-width: calc(100% - 0.2em);
	font-family: 'TTKB Dik Temel Abece', 'Nunito', sans-serif; font-weight: 400; font-size: 1em; line-height: 1; letter-spacing: 0.25em; color: #b9c6d8; user-select: none; pointer-events: none;
}
.oonda .oonda-yt-tuval { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.oonda .oonda-yt-desen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.oonda .oonda-yt-desen path { stroke: #94a3b8; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 9; vector-effect: non-scaling-stroke; }
.oonda .oonda-yt-satir-desen { font-size: 1em; height: 5.2em; background-image: none; }
.oonda .oonda-yt-desen-ad { text-align: center; font-weight: 800; margin: 0.2em 0; }

/* ---------- HECE RENKLİ OKUMA ---------- */
.oonda .oonda-ok-liste { display: flex; flex-direction: column; gap: 0.7em; margin: 0.5em 0 0.8em; }
.oonda .oonda-ok-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9em; background: #fff; border: 3px solid var(--ucs, #e2e8f0); border-radius: 22px; padding: 0.45em 0.9em; box-shadow: 0 4px 0 var(--ucs, #e2e8f0); }
.oonda .oonda-ok-emoji { font-size: 2.6em; }
.oonda .oonda-ok-yazi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.12em; }
.oonda .oonda-ok-sozcuk { gap: 0.04em; }
.oonda .oonda-ok-parca {
	font-family: 'TTKB Dik Temel Abece', 'Nunito', sans-serif; font-weight: 700; font-size: 3.8em; line-height: 1.2;
	background: transparent; border: 0; border-radius: 0.3em; padding: 0.02em 0.14em; cursor: pointer;
}
.oonda .oonda-ok-r0 { color: #1d4ed8; }
.oonda .oonda-ok-r1 { color: #dc2626; }
.oonda .oonda-ok-r2 { color: #15803d; }
.oonda .oonda-ok-renksiz .oonda-ok-parca { color: #0f172a; }
.oonda .oonda-ok-simdi { background: #fde68a; box-shadow: 0 0 0 3px #f59e0b; }

@media (max-width: 720px) {
	.oonda .oonda-hf-harf { font-size: 5.2em; }
	.oonda .oonda-ok-parca { font-size: 3em; }
	.oonda .oonda-yt-satir { font-size: 3.1em; }
	.oonda .oonda-yt-satir-desen { font-size: 1em; }
	.oonda .oonda-yt-model { width: 8.8em; height: 8.8em; }
	.oonda .oonda-yt-model-harf { font-size: 7.2em; }
}