@font-face {
            font-family: 'arakom';
            src: url('../arakom.ttf') format('truetype');
            font-weight: normal; font-style: normal;
        }

        :root {
            --primary: #1e293b;
            --accent: #f59e0b;
            --success: #10b981;
            --danger: #ef4444;
            --p1-bg: #e0f2fe;
            --p2-bg: #f0fdf4;
            --bg-glass: rgba(255, 255, 255, 0.85);
            --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body { 
            font-family: 'arakom', sans-serif; 
            height: 100vh; width: 100vw;
            background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
            display: flex; align-items: center; justify-content: center;
            overflow: hidden;
        }

        /* Dış çerçeve kaldırıldı: uygulama ekranı tamamen kaplıyor. */
        .main-app {
            position: relative;
            width: 100vw; height: 100vh;
            background: var(--bg-glass);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 0;
            display: flex; flex-direction: column;
            box-shadow: none;
            border: none;
        }

         /* --- PROFESYONEL SAYAÇ ANİMASYONLARI --- */
        .pro-countdown {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 140px; height: 140px; display: none; z-index: 100;
        }
        .pro-countdown svg {
            width: 100%; height: 100%; transform: rotate(-90deg);
            filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.6));
        }
        .pro-countdown .track {
            fill: rgba(30, 41, 59, 0.95);
            stroke: rgba(255, 255, 255, 0.05); stroke-width: 8;
        }
        .pro-countdown .progress {
            fill: none; stroke: var(--accent); stroke-width: 8;
            stroke-linecap: round; /* Çizginin uçlarını yumuşatır */
            stroke-dasharray: 264; /* 2 * PI * r(42) */
            stroke-dashoffset: 0;
        }
        .glow-core {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 60px; height: 60px; border-radius: 50%;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.9) 0%, transparent 70%);
            animation: pulseCore 0.6s infinite alternate ease-in-out;
        }
        @keyframes pulseCore {
            from { transform: translate(-50%, -50%) scale(0.7); opacity: 0.5; }
            to { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
        }
        .pop-out { animation: popOutAnim 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
        @keyframes popOutAnim {
            0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
            40% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
            100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
        }


        /* Sekmeler */
        /* --- SEKME ŞERİDİ: artık YÜZEN KUMANDANIN İÇİNDE ve DİKEY ---------
           Sayfanın üstüne yapışmıyor; kumandayla birlikte sürüklenip ekranda
           istenen yere konuyor. Açıkken de kapalıyken de yüzer. */
        .nav-tabs {
            display: flex; flex-direction: column; direction: ltr;
            background: transparent; padding: 2px 0 0; gap: 8px;
            border-radius: 12px; position: relative;
            max-height: min(62vh, 560px); overflow-y: auto; overflow-x: hidden;
            scrollbar-width: thin;
        }
        .nav-tabs::-webkit-scrollbar { width: 6px; }
        .nav-tabs::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 3px; }

        /* --- BÖLÜMLER: "Alfabe" ve "Ölçme & Etkinlik" alt alta --- */
        .tab-grup { display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 0; }
        .tab-grup + .tab-grup {
            border-top: 1px dashed rgba(255, 255, 255, .32); padding-top: 7px; margin-top: 3px;
        }
        .tab-grup-ad {
            font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
            color: rgba(255, 255, 255, .6); font-family: 'arakom', inherit; white-space: nowrap;
            padding: 0 4px 1px;
        }
        .tab-grup-sira { display: flex; flex-direction: column; gap: 3px; }
        /* --- SEKMELER: normalde YALNIZ SİMGE, seçili olanda isim de açılır ---
           Şerit böylece az yer kaplar; öğretmen hangi sekmede olduğunu yazıdan,
           diğerlerini simgeden görür (isim ayrıca title ile de çıkar).
           Şerit rtl olduğu için düğme içi ltr yapılır: simge solda, isim sağda. */
        /* Dikey listede sekme: solda simge, sağda başlığı — tek satır. */
        .tab-trigger {
            direction: ltr; display: flex; flex-direction: row; align-items: center; gap: 11px;
            /* Zemin AÇIK değil KOYU translucent: kumandanın kendisi yarı
               saydam olduğu için açık gri hap beyaz yazıyı okunmaz hâle
               getiriyordu. Koyu hap kontrastı 4.6:1'e çıkarıyor, arkası
               yine görünüyor. */
            padding: 6px 14px 6px 8px; border: none; background: rgba(6, 62, 51, .62);
            color: #fff; cursor: pointer; font-family: 'arakom'; font-size: 1.05rem;
            border-radius: 12px; width: 100%; text-align: left;
            transition: background .2s, color .2s, transform .14s;
        }
        .tab-ikon {
            width: 38px; height: 38px; flex: none; display: block;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22));
        }
        .tab-ad { font-size: 1rem; line-height: 1.1; white-space: nowrap; }
        .tab-trigger:hover { background: rgba(6, 62, 51, .82); color: #fff; }

        /* --- ŞERİT GİZLİ KİPİ: tam ekran ---------------------------------
           Sekme seçilince .main-app'e "nav-gizli" eklenir: şerit kalkar,
           yerine sol üstte küçük bir simge kalır. İçerik alanı büyür. */
        .main-app.nav-gizli .nav-tabs { display: none; }
        /* Şerit kumandanın içinde: sayfanın tepesinde hiç yer kaplamıyor. */
        .nav-mini .nav-tabs { width: 100%; }
        /* Simge KÜÇÜK ve SÖNÜK durur ki altındaki içeriği rahatsız etmesin;
           üstüne gelince belirginleşir ve hangi sekmede olduğumuzu yazar. */
        /* --- KUMANDA: HER AÇILIŞTA SOL ÜST KÖŞE --------------------------
           Üstte tutamaç + aktif sekmenin adı, ortada Ana Sayfa ile şerit
           aç/kapa, altta Harf Tanıtımı araç şeridi. İstenirse sürüklenip
           taşınır ama yeri kaydedilmez: her açılışta yine sol üstte. */
        /* ŞERİT AÇIKKEN DE ARKASI GÖRÜNÜR — GERÇEKTEN SAYDAM.
           Pano neredeyse cam gibi (%32) ve arkası BULANIKLAŞTIRILMIYOR;
           blur, saydamlığı görünmez kılıyordu. Okunurluk panodan değil,
           yazıyı taşıyan koyu haplardan geliyor: her sekme, tutamaç ve
           bölüm başlığı kendi koyu-yeşil hapının üstünde durur, böylece
           arkada ne olursa olsun beyaz yazı net kalır (>=4.5:1).
           NOT: saydamlık opacity ile DEĞİL zemin alfasıyla veriliyor;
           opacity yazıyı da soldururdu. */
        .nav-mini {
            display: inline-flex; flex-direction: column; align-items: stretch;
            /* Sol üst KÖŞEDE değil, biraz aşağıda: gömülü sayfaların
               (örn. Dinle ve Yaz) kendi düğmeleri köşede olabiliyor. */
            position: absolute; top: 100px; left: 10px; z-index: 60;
            gap: 5px; padding: 5px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(22, 160, 133, .32) 0%, rgba(17, 122, 101, .32) 100%);
            border: 1px solid rgba(255, 255, 255, .3);
            color: #fff; font-family: 'arakom', inherit; font-size: .95rem;
            box-shadow: 0 6px 18px rgba(17, 122, 101, .22);
            user-select: none; -webkit-user-select: none;
        }
        /* Yazılar saydam zeminde de net dursun */
        .nav-mini .tab-ad,
        .nav-mini .tab-grup-ad,
        .nav-mini .nav-mini-ad { text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
        .nav-mini .tab-trigger.active .tab-ad { text-shadow: none; }
        /* Bölüm başlığı da kendi hapının üstünde: cam panoda beyaz yazı
           tek başına okunmuyordu. */
        .nav-mini .tab-grup-ad {
            color: #fff; align-self: flex-start;
            background: rgba(6, 62, 51, .58); padding: 2px 9px; border-radius: 7px;
        }
        /* Tutamaç ve simge düğmeleri de koyu hap olur (ikonlar beyaz). */
        .nav-mini .nav-mini-tut { background: rgba(6, 62, 51, .55); }
        .nav-mini.nm-tasiniyor .nav-mini-tut { background: rgba(6, 62, 51, .85); }
        .nav-mini.nm-tasiniyor { box-shadow: 0 14px 34px rgba(17, 122, 101, .5); }
        .nav-mini .nav-mini-t { background: rgba(6, 62, 51, .5); }
        .nav-mini .nav-mini-t:hover { background: rgba(6, 62, 51, .8); }
        .nav-mini .nav-mini-ayirac { background: rgba(255, 255, 255, .5); }

        /* --- ŞERİT KAPALIYKEN KUMANDA SAYDAM ---------------------------
           Küçülen kumanda içeriğin üstünde durduğu için arkasını kapatıyordu.
           Kapalıyken yarı saydam olur, altındaki harf/kart görünür; üstüne
           gelince, dokununca ya da klavye odağı geldiğinde tam görünür.
           ("Cin" uçuşu ve ona bağlı parlama kaldırıldı; yön okunu ekledik.) */
        /* SOLMA KUMANDANIN TAMAMINA DEĞİL, PARÇALARINA UYGULANIR.
           Ana kaba opacity verilseydi Harf Tanıtımı araç şeridi (animasyon ·
           gruplama · ses · tam ekran) da solar, beyaz zemini kaybolurdu —
           oysa orası kapalıyken de sık kullanılıyor. Bu yüzden kabın kendi
           zemini kaldırılır, yalnız tutamaç ve simge sırası soldurulur;
           araç şeridi tam görünür kalır. */
        .main-app.nav-gizli .nav-mini {
            background: none; border-color: transparent; box-shadow: none;
        }
        .main-app.nav-gizli .nav-mini > .nav-mini-tut,
        .main-app.nav-gizli .nav-mini > .nav-mini-sira {
            opacity: .18; transition: opacity .22s ease;
        }
        .main-app.nav-gizli .nav-mini:hover > .nav-mini-tut,
        .main-app.nav-gizli .nav-mini:hover > .nav-mini-sira,
        .main-app.nav-gizli .nav-mini:focus-within > .nav-mini-tut,
        .main-app.nav-gizli .nav-mini:focus-within > .nav-mini-sira,
        .main-app.nav-gizli .nav-mini.nm-tasiniyor > .nav-mini-tut,
        .main-app.nav-gizli .nav-mini.nm-tasiniyor > .nav-mini-sira { opacity: 1; }
        /* KATLANIR KATLANMAZ SAYDAM: kapatma düğmesine basıldığında imleç
           hâlâ kumandanın üstünde olduğu için :hover onu opak tutuyordu,
           saydamlaşması için fareyi başka yere götürmek gerekiyordu.
           navKapat() bu sınıfı ekler, imleç ilk oynatıldığında kalkar. */
        .main-app.nav-gizli .nav-mini.nm-donuk > .nav-mini-tut,
        .main-app.nav-gizli .nav-mini.nm-donuk > .nav-mini-sira,
        .main-app.nav-gizli .nav-mini.nm-donuk:hover > .nav-mini-tut,
        .main-app.nav-gizli .nav-mini.nm-donuk:hover > .nav-mini-sira,
        .main-app.nav-gizli .nav-mini.nm-donuk:focus-within > .nav-mini-tut,
        .main-app.nav-gizli .nav-mini.nm-donuk:focus-within > .nav-mini-sira { opacity: .18; }
        @media (hover: none) {
            /* Dokunmatikte hover yok: parmakla bulunabilsin diye biraz daha
               belirgin, basılı tutunca tamamen açılır. */
            .main-app.nav-gizli .nav-mini > .nav-mini-tut,
            .main-app.nav-gizli .nav-mini > .nav-mini-sira { opacity: .3; }
            .main-app.nav-gizli .nav-mini:active > .nav-mini-tut,
            .main-app.nav-gizli .nav-mini:active > .nav-mini-sira { opacity: 1; }
            .main-app.nav-gizli .nav-mini.nm-donuk > .nav-mini-tut,
            .main-app.nav-gizli .nav-mini.nm-donuk > .nav-mini-sira,
            .main-app.nav-gizli .nav-mini.nm-donuk:hover > .nav-mini-tut,
            .main-app.nav-gizli .nav-mini.nm-donuk:hover > .nav-mini-sira { opacity: .3; }
        }

        /* --- LİSTE DÜĞMESİ: YÖN OKU ------------------------------------
           Kalıcı bir vurgu (beyaz hap / nabız) YOK — dikkat dağıtıyordu.
           Onun yerine liste simgesinin yanındaki ok durumu anlatıyor:
           şerit AÇIKKEN yukarı (katla), KAPALIYKEN aşağı (aç).
           DİKKAT: .nav-mini-t bu bloktan SONRA tanımlı; eşit özgüllükte
           kalırsa onun kuralları bunları eziyor. Seçiciler bu yüzden
           .nav-mini ile bir basamak yukarıda. */
        .nav-mini .nm-menu { gap: 3px; padding: 7px 9px; }
        .nav-mini .nm-yon {
            width: 15px; height: 15px; opacity: .95;
            transform: rotate(-90deg);        /* açık: yukarı ok */
            transition: transform .2s;
        }
        .main-app.nav-gizli .nav-mini .nm-yon { transform: rotate(90deg); }  /* kapalı: aşağı */
        @media (prefers-reduced-motion: reduce) {
            .nav-mini .nm-yon { transition: none; }
            .main-app.nav-gizli .nav-mini > .nav-mini-tut,
            .main-app.nav-gizli .nav-mini > .nav-mini-sira { transition: none; }
        }

        /* tutamaç: buradan tutulup sürüklenir (yeri kaydedilmez) */
        .nav-mini-tut {
            display: flex; align-items: center; gap: 6px;
            padding: 4px 10px 4px 4px; border-radius: 11px;
            background: rgba(255, 255, 255, .16);
            cursor: grab; touch-action: none;
        }
        .nav-mini.nm-tasiniyor .nav-mini-tut { cursor: grabbing; }
        .nm-tutamac { width: 20px; height: 20px; flex: none; fill: rgba(255, 255, 255, .85); }
        .nav-mini-ad {
            font-weight: 700; white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; max-width: 220px;
        }

        .nav-mini-sira { display: flex; align-items: center; justify-content: center; gap: 3px; }
        .nav-mini-t {
            display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
            border: 0; background: transparent; color: inherit; text-decoration: none;
            padding: 7px 12px; border-radius: 10px; font-family: inherit; font-size: inherit;
            transition: background .16s;
        }
        .nav-mini-t:hover { background: rgba(255, 255, 255, .24); }
        .nav-mini-t svg { width: 21px; height: 21px; flex: none; }
        .nav-mini-ayirac { width: 1px; height: 20px; background: rgba(255, 255, 255, .35); }

        /* Harf Tanıtımı araç şeridi kumandanın İÇİNDE, en altta durur. */
        /* Araç şeridi (animasyon · gruplama · ses · tam ekran) SAYDAM DEĞİL:
           kumandanın cam zemini bu düğmeleri de soluklaştırıyordu, oysa
           burası sık kullanılan bir alan. Kendi opak zeminini taşır. */
        .nav-mini .hdr-switch {
            position: static !important; inset: auto !important;
            margin: 0; align-self: center;
            background: #fff !important;
            border: 1px solid rgba(255, 255, 255, .9) !important;
            box-shadow: 0 3px 10px rgba(0, 0, 0, .22) !important;
        }
        /* Şerit kapalıyken içerik kenardan biraz daha yaklaşsın */
        .main-app.nav-gizli .content-area { padding: 6px; }
        /* Sınav'ın soru sayacı sol üstte durduğu için orada yer bırakılır.
           Harf Tanıtımı'nda pay YOK: yüzen kumanda sürüklenebiliyor ve
           tablo üstünde gereksiz boşluk kalmasın. */
        .main-app.nav-gizli #p6 .as-sar { padding-top: 46px; }
        /* Etkin sekme neredeyse opak: koyu yazısının okunurluğu buna bağlı. */
        .tab-trigger.active { background: rgba(255, 255, 255, .94); color: #0E6655; font-weight: bold; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); }
        .tab-trigger:hover:not(.active) { background: rgba(6, 62, 51, .82); transform: translateX(2px); }

        /* Yeni Anasayfa Butonu Tasarımı */
        .home-link { 
            position: absolute; left: 15px; bottom: 8px; /* En sola sabitlendi */
            display: flex; align-items: center; justify-content: center; 
            text-decoration: none; color: rgba(255,255,255,0.85); 
            background: rgba(255,255,255,0.14); 
            width: 42px; height: 42px; border-radius: 12px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 10;
        }
        .home-link:hover { 
            transform: translateY(-3px); 
            background: #F39C12; 
            color: white;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
        }
        .home-link svg {
            width: 22px; height: 22px; 
            stroke: currentColor; stroke-width: 2; fill: none;
            stroke-linecap: round; stroke-linejoin: round;
        }

        /* Dar masaüstü/tablet: sekmeler ortada kalsın ama switch'e değmesin */
        @media (min-width: 769px) and (max-width: 1080px) {
            /* eski yatay şerit dolgusu geçersiz (şerit dikey) */
            .tab-ikon { width: 42px; height: 42px; }
            .tab-ad { font-size: 1.06rem; }
        }

        .content-area { flex: 1; padding: 8px; overflow: hidden; background: transparent; position: relative; }
        .panel { display: none; height: 100%; width: 100%; animation: fadeIn 0.4s ease; position: relative; }
        .panel.active { display: block; }
        
        /* Flex paneller için display ayarları (Sekme hatasını çözen kısım) */
        #p3.active { display: flex; flex-direction: column; }
        #p4.active { display: flex; flex-direction: column; position: relative; height: 100%; width: 100%; }

        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Harf Tanıtımı — Word'deki tablo mantığı: 7 sütun x 4 satırlık gerçek bir tablo,
           her hücrenin içinde bir harf kutusu. Çizgiler hücre kenarlarıdır (ortada değil),
           border-collapse ile tek çizgi olarak birleşirler.
           Dizilim sağdan başlar: 1. satır sağdan sola 1..7, 2. satır soldan sağa 8..14, ...
           (yılan dizilim: 8 → 7'nin altında, 15 → 14'ün altında; giriş elif, çıkış ye) */
        /* Harf Tanıtımı düzeni:
             üst kısım  -> solda 7x4 harf tablosu, sağda "birleşmeyen harfler" paneli
             alt şerit  -> sağdan sola: harekeler | cezim-şedde | uzatma harfleri | tâ-i merbûta */
        .p1-duzen { display: flex; flex-direction: column; height: 100%; gap: 10px; }
        .p1-ust   { flex: 1; display: flex; gap: 10px; min-height: 0; }
        .tablo-sar { flex: 1; height: 100%; min-width: 0; }

        /* --- SAĞ PANEL: kendinden sonrakiyle birleşmeyen harfler ---
           Başlık + harfler TEK parça olarak kalın gri bir kutunun içinde durur.
           Hücrelerin kendi çerçevesi/zemini yok; kutu bir tane, en dışta. */
        .yan-panel {
            flex: 0 0 clamp(126px, 11.6vw, 186px); min-width: 0;
            background: #fff; border: 3px solid #cfd8e3; border-radius: 16px;
            box-shadow: var(--shadow-sm);
            padding: 4px 2px 6px; overflow: hidden;
            display: flex; flex-direction: column; gap: 4px;
        }
        /* Başlığın altındaki ayırıcı çizgi kaldırıldı: kutunun kendi çerçevesi
           zaten bölümü sınırlıyor, ikinci bir çizgi kalabalık yapıyordu. */
        .yp-baslik {
            background: transparent; color: #117A65; text-align: center;
            padding: 0 2px 3px; line-height: 1.2;
            font-size: clamp(1.1rem, 1.5vw, 1.72rem);
            border-bottom: 0;
        }
        /* direction: rtl -> ilk hücre sağda: sağ sütun ـا (✓ →), sol sütun ا (← ✗)
           Sütunlar "auto": her sütun kendi içeriği kadar yer kaplar ve ızgara
           ortalanır — böylece aynı harfin iki biçimi yan yana, birbirine YAKIN
           durur; eskiden 1fr sütunlar harfleri panelin iki ucuna savuruyordu. */
        .yp-tablo {
            /* overflow: hücrelerden değil ızgaradan kırpılır — satır çizgileri
               hücre sınırını aşıp panelin iki ucuna kadar uzayabilsin. */
            overflow: hidden;
            flex: 1; min-height: 0; direction: rtl; display: grid;
            grid-template-columns: auto auto; justify-content: center;
            grid-template-rows: auto repeat(6, minmax(0, 1fr));
            column-gap: clamp(5px, 0.8vw, 13px); row-gap: 2px;
        }
        /* İşaret üstte, özel SVG ok altta: ok, işaret ile ilk harf (elif)
           satırı arasındaki ~50px boşluğu doldurur. */
        .yp-th {
            display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px;
            direction: ltr; background: transparent; line-height: 1;
            font-size: clamp(1.3rem, 1.7vw, 1.95rem);
            margin-bottom: 11px;
        }
        /* Yeşil/kırmızı, tablodaki harflerde kullanılan canlı site renkleriyle
           birebir aynı: giriş/çıkış kartlarının kenarlığı, sıra numarası rozeti
           ve labirent okları da bu ikiliyi kullanıyor. */
        .yp-ok { color: #16A085; }
        .yp-no { color: #EF5350; }
        /* --- özel animasyonlu ok: harften kalkar, yukarıda işarete doğru kıvrılır --- */
        .yp-yon {
            width: clamp(32px, 3vw, 42px); height: clamp(32px, 2.8vw, 39px);
            display: block; overflow: visible;
        }
        .yp-yon path {
            fill: none; stroke: currentColor; stroke-width: 3.1;
            stroke-linecap: round; stroke-linejoin: round;
        }
        .yp-ok-govde { stroke-dasharray: 58; animation: ypOkCiz 3.4s ease-in-out infinite; }
        .yp-ok-uc { animation: ypOkUc 3.4s ease-in-out infinite; }
        .yp-no .yp-ok-govde { animation-delay: .5s; }
        .yp-no .yp-ok-uc { animation-delay: .5s; }
        @keyframes ypOkCiz {
            0% { stroke-dashoffset: 58; opacity: .35; }
            40%, 82% { stroke-dashoffset: 0; opacity: 1; }
            100% { stroke-dashoffset: 0; opacity: .35; }
        }
        @keyframes ypOkUc {
            0%, 30% { opacity: 0; }
            48%, 82% { opacity: 1; }
            100% { opacity: 0; }
        }

        /* ================= ✓ / ✗ İŞARETLERİ (SVG) =================
           İkisi de ok animasyonu BİTTİKTEN sonra belirir: ok döngüsü 3.4s ve
           ucu %48'de tamamlanıyor, işaretler bu yüzden %47'ye kadar görünmez.
             TİK  -> soldan sağa çizilir, aynı anda aşağıdan yukarı süzülür.
             ÇARPI-> iki kol sırayla çizilir; sarsıntı/çatlama yok, sakin durur.
           =========================================================== */
        .yp-im {
            width: clamp(24px, 2.3vw, 32px); height: clamp(24px, 2.3vw, 32px);
            display: block; overflow: visible;
        }
        .yp-im path {
            fill: none; stroke: currentColor;
            stroke-linecap: round; stroke-linejoin: round;
        }
        .yp-im .yi-tik { stroke-width: 3.7; stroke-dasharray: 34; stroke-dashoffset: 34; }
        .yp-im .yi-x path { stroke-width: 3.7; stroke-dasharray: 25; stroke-dashoffset: 25; }

        /* --- TİK: soldan sağa çiz + aşağıdan yukarı belir --- */
        .yp-ok .yp-im-ok { animation: ypTikGel 3.4s ease-out infinite; }
        .yp-ok .yp-im-ok .yi-tik { animation: ypTikCiz 3.4s ease-out infinite; }
        @keyframes ypTikGel {
            0%, 47%  { opacity: 0; transform: translateY(6px); }
            58%      { opacity: 1; }
            74%, 92% { opacity: 1; transform: translateY(0); }
            100%     { opacity: 0; transform: translateY(6px); }
        }
        @keyframes ypTikCiz {
            0%, 48%  { stroke-dashoffset: 34; }
            76%, 92% { stroke-dashoffset: 0; }
            100%     { stroke-dashoffset: 34; }
        }

        /* --- ÇARPI: yalnızca belirir ve iki kolu sırayla çizilir. Sol sütunun
               oku .5s gecikmeli başladığı için işaret de aynı gecikmeyi alır.
               (Eskiden burada bir sarsıntı + çatlama animasyonu vardı,
               dikkat dağıttığı için kaldırıldı.) --- */
        .yp-no .yp-im-no { animation: ypCarpiGel 3.4s ease-out infinite .5s; }
        .yp-no .yp-im-no .yi-x1 { animation: ypXCiz1 3.4s ease-out infinite .5s; }
        .yp-no .yp-im-no .yi-x2 { animation: ypXCiz2 3.4s ease-out infinite .5s; }
        @keyframes ypCarpiGel {
            0%, 46%  { opacity: 0; transform: scale(.82); }
            56%      { opacity: 1; transform: scale(1.08); }
            63%, 92% { opacity: 1; transform: scale(1); }
            100%     { opacity: 0; transform: scale(.82); }
        }
        @keyframes ypXCiz1 {
            0%, 47%  { stroke-dashoffset: 25; }
            58%, 92% { stroke-dashoffset: 0; }
            100%     { stroke-dashoffset: 25; }
        }
        @keyframes ypXCiz2 {
            0%, 52%  { stroke-dashoffset: 25; }
            64%, 92% { stroke-dashoffset: 0; }
            100%     { stroke-dashoffset: 25; }
        }
        .yp-hucre {
            display: flex; align-items: center; justify-content: center; overflow: visible;
            border: 0; background: transparent;
        }
        .yp-harf { font-size: clamp(2.4rem, 6.6vh, 4.8rem); line-height: 1.3; }
        .yp-c-ok .yp-harf { color: #16A085; }
        .yp-c-no .yp-harf { color: #EF5350; }
        /* Harf, arakom hattının dış hattından SVG olarak çizilir: kartlardaki
           harflerle birebir aynı biçim. Yükseklik ortak, taban çizgisi ortak. */
        .yp-harf-svg { display: flex; align-items: center; justify-content: center; max-width: 100%; position: relative; }
        .yp-svg { height: clamp(3.2rem, 9.4vh, 6.4rem); width: auto; max-width: 100%; display: block; overflow: visible; position: relative; z-index: 1; }
        /* SATIR (referans) ÇİZGİSİ — kartlardaki ile aynı mantık: harflerin
           taban çizgisi SVG'nin altından %43.84 yukarıda (viewBox 730, taban 410).
           Böylece dal/ra/vav gibi harflerin kuyruğunun çizginin ALTINA indiği
           görülür. Çizgi satırın tamamına uzasın diye hücre sınırını aşar; ızgara
           overflow: hidden olduğu için panelin kenarında biter. Yalnız ✓ sütunu
           çiziyor: iki sütun da çizse alfa üst üste binip koyulaşıyordu. */
        .yp-c-ok .yp-harf-svg::before {
            content: ""; position: absolute; z-index: 0;
            left: -400px; right: -400px; bottom: 43.84%;
            height: 2px; background-color: rgba(0, 0, 0, 0.22);
        }
        .yp-svg path { fill: currentColor; stroke: none; }
        /* harfin metni ekran okuyucu/testler için durur, görünmez */
        .yp-gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

        /* --- ALT ŞERİT ---
           İşaretler harfsiz: tek parça uzatma çizgisi (tatvil ــــ) üzerinde
           gösteriliyor, çizgi hepsinde aynı. Ögeler TEK SATIRDA sağdan sola
           dizilir; Türkçe adlar ekranda yazılmaz (title ipucunda). */
        /* Kutu yüksekliği içeriğe göre kısaldı: etiket üstte ince bir boşlukla
           duruyor, altında da yalnız harfin kendi payı kalıyor. Eskiden şerit
           140px'ti ve içerik ortalandığı için etiketin üstünde 26-38px ölü
           boşluk oluşuyordu. */
        /* Yükseklik neden 84 -> 98px: harekelerin bir kısmı (esre ـِ, kesratan ـٍ)
           çizginin ALTINA iner. Etiket yukarıya yapışık durduğu için (justify-content
           flex-start) fazladan yükseklik tamamen alta eklenir; böylece esrenin altında
           ~14px nefes payı kalır ve harf kutunun kenarına değmez. Etiketle harf arası
           bundan etkilenmez. Masaüstünde harf boyu genişlikle sınırlı olduğundan
           tablodan çalınan bu 14px harfleri küçültmüyor. */
        /* +10px daha (98 -> 108): aşağıdaki garantili etiket-harf boşluğu (as-liste
           margin-top) alttaki esre payından çalmasın diye şerit bir tık daha
           yükseldi. Masaüstünde harf boyu genişlikle sınırlı olduğu için bu da
           tablodaki harfleri küçültmüyor (ölçüldü). */
        .alt-serit {
            flex: 0 0 auto; height: clamp(108px, 12.4vh, 126px);
            direction: rtl; display: flex; gap: 10px; align-items: stretch;
        }
        .as-kutu {
            flex: 1; min-width: 0; overflow: hidden;
            background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
            box-shadow: var(--shadow-sm); padding: 4px 8px 2px;
            display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0;
        }
        /* Etiket asla ezilmesin/küçülmesin: sütun ekseninde flex-shrink kapalı.
           Aksi halde kutu daralınca etiketin satır kutusu kısalır ve mürekkebi
           altındaki harfin üstüne taşabilir. */
        .as-baslik {
            flex: 0 0 auto;
            font-size: clamp(0.72rem, 0.92vw, 1.06rem); color: #117A65;
            background: #E6FAF5; border-radius: 999px; padding: 2px 11px; white-space: nowrap;
            line-height: 1.35;
        }
        /* margin-top: etiket ile harf arasındaki AYIRMA boşluğu. Daha önce bu
           boşluk yalnızca yazı tipinin satır-içi payına (half-leading) bırakılmıştı;
           o pay tarayıcı/font metriğine göre değiştiği için cezim–şedde gibi
           çizginin ÜSTÜNE binen işaretler etikete değebiliyordu. Artık boşluk
           metrikten bağımsız ve garanti. Şerit 10px yükseltildiği için alttaki
           esre payı bundan etkilenmiyor. */
        .as-liste {
            direction: rtl; display: flex; flex-direction: row; flex-wrap: nowrap;
            align-items: center; justify-content: center; flex: 0 0 auto;
            margin-top: clamp(6px, 0.85vh, 11px);
            gap: clamp(9px, 1.4vw, 26px); min-height: 0; min-width: 0;
        }
        /* üç ögeli kutular (harekeler / tenvin) tek satırda rahat sığsın */
        .as-kutu.as-genis { flex: 1.5; }
        .as-kutu.as-genis .as-liste { gap: clamp(16px, 2vw, 40px); }
        .as-oge { display: flex; align-items: center; justify-content: center; min-width: 0; }
        /* line-height 1.3 -> 1.15: satır kutusunun harfin üstünde bıraktığı yarım
           satır boşluğu (half-leading) sıfırlanır, böylece etiket ile harf arası
           birkaç piksel daralır. Daha da kısaltmak "uzatma harfleri" kutusundaki
           uzun elif/vav'ı etikete yapıştırıyordu, o yüzden 1.15'te durdu. */
        .as-harf { font-size: clamp(1.6rem, 5.2vh, 3.3rem); line-height: 1.15; color: #2c3e50; }

        /* TENVİN: yalnız kelime sonuna gelir. İşaretli çizginin sağında
           (kelimenin devamı yönünde) aralıklı çizgi durur; soluk renkte,
           işaretin oturduğu çizgiyle aynı hizada. */
        /* tenvin kutusu daha geniş + ögeler arası boşluk büyük: her öge
           (aralıklı çizgi + işaretli çizgi) tek bir bütün olarak okunsun,
           yandaki ögeyle tek bir uzun çizgiye karışmasın. */
        .as-kutu.as-tenvin { flex: 2.1; }
        .as-kutu.as-tenvin .as-liste { gap: clamp(18px, 2.4vw, 48px); }
        .as-oge-kesik { align-items: baseline; gap: clamp(2px, 0.35vw, 7px); }
        .as-kesik {
            font-size: clamp(1.6rem, 5.2vh, 3.3rem); line-height: 1.15;
            color: #9aabbb; letter-spacing: 0.06em; white-space: nowrap;
            user-select: none;
        }
        /* uzatma harflerinden elif ve vav kırmızı */
        .as-oge.as-kirmizi .as-harf { color: #EF5350; }
        /* tâ-i merbûta pembe */
        .as-kutu.as-pembe .as-harf { color: #EC407A; }
        .as-kutu.as-pembe .as-baslik { color: #C2185B; background: #FDE8F0; }

        .harf-tablo {
            --ht-line: #16A085;      /* çizgi rengi — site yeşili */
            --ht-w: 5px;             /* çizgi kalınlığı ("biraz kalın", şık duvar) */
            --ht-kalin: 8px;         /* "kalin" durumu: daha da kalın */
            --ht-vurgu: #E67E22;     /* "vurgu" durumu: site turuncusu */
            --ht-pad: clamp(3px, 0.5vw, 8px);   /* hücre içi boşluk: kutu ile çizgi arası */

            width: 100%; height: 100%;
            table-layout: fixed; border-collapse: collapse;
            direction: rtl;   /* ilk hücre en sağda: elif sağ üstte */
        }
        /* Her kenarın tek bir sahibi var: hücre kendi ÜST ve SAĞ çizgisini çizer,
           en alt satır ayrıca ALT, en sol sütun ayrıca SOL çizgiyi çizer.
           Böylece iki hücre aynı çizgiyi paylaşmaz ve tek tek ayarlanabilir.
           VARSAYILAN: her kenarın yeri ayrılmıştır ama çizgi görünmez (transparent).
           Hangi çizgi görünecekse JS'teki TABLO_KENAR listesinde yazılıdır; böylece
           çizgi açıp kapatmak tabloyu hiç oynatmaz (kalınlık her zaman ayrılmış). */
        .ht-cell {
            width: calc(100% / 7); height: 25%;
            padding: var(--ht-pad); vertical-align: middle;
            border-top: var(--ht-w) solid transparent;
            border-right: var(--ht-w) solid transparent;
            position: relative;
            transition: border-color .45s ease;
        }
        .ht-cell.ht-son-satir { border-bottom: var(--ht-w) solid transparent; }
        .ht-cell.ht-son-sutun { border-left: var(--ht-w) solid transparent; }
        .ht-cell > .char-card { width: 100%; height: 100%; }

        /* Kenar ayar sınıfları — JS'teki TABLO_KENAR listesinden gelir.
           cizgi: çizgiyi göster | yok: gizle | kalin: kalınlaştır | vurgu: turuncuya boya */
        .ht-cell.k-ust-cizgi { border-top-color: var(--ht-line); }
        .ht-cell.k-sag-cizgi { border-right-color: var(--ht-line); }
        .ht-cell.k-alt-cizgi { border-bottom-color: var(--ht-line); }
        .ht-cell.k-sol-cizgi { border-left-color: var(--ht-line); }
        .ht-cell.k-ust-kalin { border-top-width: var(--ht-kalin); }
        .ht-cell.k-sag-kalin { border-right-width: var(--ht-kalin); }
        .ht-cell.k-alt-kalin { border-bottom-width: var(--ht-kalin); }
        .ht-cell.k-sol-kalin { border-left-width: var(--ht-kalin); }
        .ht-cell.k-ust-vurgu { border-top-color: var(--ht-vurgu); }
        .ht-cell.k-sag-vurgu { border-right-color: var(--ht-vurgu); }
        .ht-cell.k-alt-vurgu { border-bottom-color: var(--ht-vurgu); }
        .ht-cell.k-sol-vurgu { border-left-color: var(--ht-vurgu); }
        /* "yok" en sonda: daha önce açılmış bir çizgiyi kapatabilsin */
        .ht-cell.k-ust-yok   { border-top-color: transparent; }
        .ht-cell.k-sag-yok   { border-right-color: transparent; }
        .ht-cell.k-alt-yok   { border-bottom-color: transparent; }
        .ht-cell.k-sol-yok   { border-left-color: transparent; }

        .harf-tablo:not(.dizili) .char-card.maze-start { border-color: #16A085 !important; box-shadow: 0 0 0 2px rgba(22,160,133,0.30), var(--shadow-sm); }
        .harf-tablo:not(.dizili) .char-card.maze-end   { border-color: #EF5350 !important; box-shadow: 0 0 0 2px rgba(239,83,80,0.30), var(--shadow-sm); }

        /* ============================================================
           DİZİLİŞ MODU — aileler yan yana
           ------------------------------------------------------------
           Alfabetik görünümde tablo bir labirenttir: duvarlar ve 1→28
           yolu harflerin sırasını anlatır. Diziliş moduna geçilince o
           anlatım geçerliliğini yitirdiği için duvarlar ve giriş/çıkış
           okları yumuşakça söner; yerine aynı aileden harfleri kucaklayan
           yuvarlak köşeli birer kuşak gelir. Kuşağın rengi ailenin kendi
           kart rengiyle aynı ailedendir, böylece göz aynı işareti iki kez
           öğrenmek zorunda kalmaz.
           ============================================================ */
        .harf-tablo.dizili .ht-cell { border-color: transparent !important; }

        .char-card .mz-ok { transition: opacity .35s ease; }
        .harf-tablo.dizili .char-card .mz-ok { opacity: 0; }

        /* Aile kuşağı: hücrenin arkasına çizilen şerit. border-collapse
           yüzünden komşu hücrelerin dolgu kutuları arasında var(--ht-w)
           kadar boşluk kalır; şerit iki yandan o kadar taşırılarak
           kesintisiz görünür. Uçlarda taşma kırpılır ve köşe yuvarlanır. */
        .ht-cell.dz-g::before {
            content: ''; position: absolute; z-index: 0; pointer-events: none;
            top: 1px; bottom: 1px;
            left: calc(-1 * var(--ht-w)); right: calc(-1 * var(--ht-w));
            border-top: 2px solid var(--dz-renk, #cfd8e3);
            border-bottom: 2px solid var(--dz-renk, #cfd8e3);
            background: color-mix(in srgb, var(--dz-renk, #cfd8e3) 11%, transparent);
            opacity: 0; transition: opacity .4s ease .18s;
        }
        .ht-cell.dz-bas::before {
            right: 1px; border-right: 2px solid var(--dz-renk, #cfd8e3);
            border-top-right-radius: 13px; border-bottom-right-radius: 13px;
        }
        .ht-cell.dz-son::before {
            left: 1px; border-left: 2px solid var(--dz-renk, #cfd8e3);
            border-top-left-radius: 13px; border-bottom-left-radius: 13px;
        }
        .harf-tablo.dizili .ht-cell.dz-g::before { opacity: 1; }
        .ht-cell > .char-card { position: relative; z-index: 1; }

        /* GİRİŞ / ÇIKIŞ: yazı yerine animasyonlu ok SVG'si.
           Giriş oku kapıya doğru girer (yeşil), çıkış oku kapıdan dışarı çıkar (kırmızı).
           Renkler koyu değil: harf panelindeki yeşil/kırmızı ile aynı aile. */
        .char-card .mz-ok {
            position: absolute; top: 4px; right: 5px;
            width: clamp(20px, 2vw, 27px); height: clamp(20px, 2vw, 27px);
            overflow: visible; pointer-events: none; user-select: none;
        }
        .mz-ok path { fill: none; stroke: currentColor; stroke-width: 3.1; stroke-linecap: round; stroke-linejoin: round; }
        .mz-ok-giris { color: #16A085; }
        .mz-ok-cikis { color: #EF5350; }
        .mz-kapi { opacity: .55; }
        /* Ok her an "ok" olarak okunur: gövde hiç kaybolmaz, sadece kapıya doğru
           (giriş) veya kapıdan dışarı (çıkış) süzülür; ucu hafifçe öne atar. */
        .mz-ok-giris .mz-govde,
        .mz-ok-giris .mz-uc { animation: mzGir 2.4s ease-in-out infinite; }
        .mz-ok-giris .mz-uc { animation-delay: .08s; }
        .mz-ok-cikis .mz-govde,
        .mz-ok-cikis .mz-uc { animation: mzCik 2.4s ease-in-out infinite; }
        .mz-ok-cikis .mz-uc { animation-delay: .08s; }
        /* GİRİŞ oku SOLA bakar: alfabe sırası sağ üstten başlayıp sola doğru
           ilerlediği için giriş yönü de soldur. Ok sağdan gelip kapıya (solda)
           doğru süzülür. */
        @keyframes mzGir {
            0%   { transform: translateX(4.5px);  opacity: .45; }
            38%  { transform: translateX(0);      opacity: 1; }
            70%  { transform: translateX(-2px);   opacity: 1; }
            88%  { transform: translateX(4.5px);  opacity: .45; }
            100% { transform: translateX(4.5px);  opacity: .45; }
        }
        @keyframes mzCik {
            0%   { transform: translateX(-3.5px); opacity: .5; }
            38%  { transform: translateX(0);      opacity: 1; }
            70%  { transform: translateX(3.5px);  opacity: 1; }
            88%  { transform: translateX(-3.5px); opacity: .5; }
            100% { transform: translateX(-3.5px); opacity: .5; }
        }
        .char-card { background: white; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3px; box-shadow: var(--shadow-sm); }
        /* Kart içeriği asla sütunu genişletmesin: 1fr sütunlar gerçekten eşit kalsın,
           yoksa mini SVG'lerin genişliği ızgarayı panelden taşırıyor. */
        /* Kart içeriği hücreyi genişletmesin: tablo table-layout:fixed olduğu için
           sütunlar zaten eşit, taşan içerik gizlenir. */
        .ht-cell .char-card { min-width: 0; min-height: 0; overflow: hidden; }
        .ht-cell .char-card > .arabic-seq { max-width: 100%; overflow: hidden; }
        .arabic-seq { font-size: 2.2rem; display: flex; gap: 12px; position: relative; z-index: 1; }
        /* Satır (referans) çizgisi biraz kalınlaştırıldı: harfin kuyruğunun
           çizginin altına inip inmediği daha net okunsun. */
        .arabic-seq::before { content: ""; position: absolute; left: 0; right: 0; top: 65%; height: 3px; background-color: rgba(0, 0, 0, 0.25); z-index: -1; }
        .b-green { color: #16a34a !important; }
        .o-blue  { color: #2563eb !important; }
        .s-purple { color: #9333ea !important; }
        .n-black { color: #000 !important; }
        .nobind span { color: var(--danger) !important; font-weight: bold; }
        .nobind .arabic-seq::before { background-color: rgba(239, 68, 68, 0.3); }
        .tr-label { font-size: 1.05rem; color: #64748b; font-weight: bold; margin-top: 2px; line-height: 1.15; }


        /* Izgarada canlı yazım mini kutuları */
        .arabic-seq.hg-live { align-items: flex-end; gap: 9px; justify-content: center; padding: 0 !important; }
        /* Sütun/satır sayısı artık her masaüstü genişliğinde sabit: 7 x 4.
           Yer yetmediğinde harfler harfGrid.layout() ile küçülür. */
        /* Satır (referans) çizgisi: canlı yazım kutularında da görünsün.
           Harflerin taban çizgisi mini SVG'nin altından %43.84 yukarıda (410/730). */
        .arabic-seq.hg-live::before { display: block; top: auto; bottom: 43.84%; }
        .hg-svg { display: block; }
        .hg-ghost { fill: #edf1f6; }
        /* Harf kartları tıklanabilir */
        .char-card { cursor: pointer; position: relative; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }

        /* Kart numarası (1-28): labirentteki adım numarası — dolu turkuaz jeton.
           Jeton küçültüldü: harfe yer açsın, sıra bilgisi göze batmadan okunsun. */
        .char-card .card-num {
            position: absolute; top: 5px; left: 6px;
            display: flex; align-items: center; justify-content: center;
            min-width: 21px; height: 21px; padding: 0 5px;
            font-size: 0.8rem; font-weight: normal !important; line-height: 1;
            color: #fff !important; background: #16A085;
            border: 2px solid #fff; border-radius: 999px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.20);
            pointer-events: none; user-select: none;
        }
        .harf-tablo:not(.dizili) .char-card.maze-end .card-num { background: #EF5350; }
        .char-card:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-md); border-color: var(--accent); }
        /* Harf ızgarasında kart hover'da YÜKSELMEZ. Kart, hücrenin kenarlığından
           sonra boyandığı için yükselip büyüyen kart aile çizgisinin (yeşil
           duvarın) üstünü kapatıyordu — özellikle boşluğun 2px'e indiği odak
           modunda çizgi tamamen kayboluyordu. Yükselme yerine yeşil bir halka:
           vurgu aynı derecede belli, çizgiler hiç bozulmuyor. */
        .ht-cell .char-card:hover {
            transform: none;
            box-shadow: 0 0 0 3px rgba(22, 160, 133, 0.34), var(--shadow-md);
        }

        /* Benzer YAZILAN harf aileleri: açık pastel arka planlar */
        .mod-yazi .char-card.fam-be   { background: #E8F2FD; border-color: #CFE3F7; }
        .mod-yazi .char-card.fam-cim  { background: #E8F6EA; border-color: #CFE8D5; }
        .mod-yazi .char-card.fam-dal  { background: #FDF6E0; border-color: #F1E5BE; }
        .mod-yazi .char-card.fam-ra   { background: #E2F3F1; border-color: #C6E5E1; }
        .mod-yazi .char-card.fam-sin  { background: #F3E9F8; border-color: #E3D3EC; }
        .mod-yazi .char-card.fam-sad  { background: #FCE8EF; border-color: #F2D2DD; }
        .mod-yazi .char-card.fam-ta   { background: #FDF0DE; border-color: #F3DDBE; }
        .mod-yazi .char-card.fam-ayn  { background: #F4F7DE; border-color: #E4EBBD; }
        .mod-yazi .char-card.fam-fe   { background: #EAEBF8; border-color: #D6D8EE; }
        .mod-yazi .char-card.fam-tek  { background: #EDF2F8; border-color: #DCE5F0; }

        /* Benzer OKUNAN harf grupları (mahreç/ses yakınlığı) */
        .mod-ses .char-card.ses-s    { background: #FFEAD1; border-color: #F6D5AA; }
        .mod-ses .char-card.ses-z    { background: #DDF0FE; border-color: #B9DFF7; }
        .mod-ses .char-card.ses-t    { background: #E7F7DA; border-color: #CCEBB5; }
        .mod-ses .char-card.ses-d    { background: #F4E4FD; border-color: #E2CAF4; }
        .mod-ses .char-card.ses-h    { background: #FFE0E2; border-color: #F7C2C4; }
        .mod-ses .char-card.ses-k    { background: #D8F3EC; border-color: #B4E4D8; }
        .mod-ses .char-card.ses-ayn  { background: #FFF5BE; border-color: #F0E28C; }
        .mod-ses .char-card.ses-tek  { background: #EDF2F8; border-color: #DCE5F0; }

        /* Pastel zeminde okunurluk: hayalet harf ve referans çizgisi */
        .hg-ghost { fill: rgba(15, 23, 42, 0.07); }
        .arabic-seq::before { background-color: rgba(0, 0, 0, 0.22); }

        /* --- HARF DETAY (BÜYÜTEÇ) OVERLAY --- */
        #hd-overlay {
            position: fixed; inset: 0; z-index: 5000; display: none;
            align-items: center; justify-content: center;
            background: rgba(30, 41, 59, 0.45);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
        }
        #hd-card {
            background: var(--bg-glass); border: 1px solid rgba(255,255,255,0.4);
            border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
            width: min(1050px, 95vw); max-height: 94vh; overflow-y: auto;
            padding: 25px 30px; position: relative;
            transform: scale(0.6); opacity: 0; transition: transform 0.28s cubic-bezier(.34,1.4,.64,1), opacity 0.22s ease;
            display: flex; flex-direction: column; gap: 18px;
        }
        #hd-overlay.hd-open #hd-card { transform: scale(1); opacity: 1; }
        #hd-close {
            position: absolute; top: 14px; right: 14px; width: 42px; height: 42px;
            border: none; border-radius: 50%; background: var(--danger); color: white;
            font-size: 1.6rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm);
            display: flex; align-items: center; justify-content: center; z-index: 5;
        }
        /* Sol üstte harfin sıra numarası (karttaki jetonun büyüğü).
           Renk koyu değil: panel harflerindeki yeşil ile aynı aile. */
        #hd-no {
            position: absolute; top: 14px; left: 14px;
            min-width: 52px; height: 52px; padding: 0 12px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.7rem; line-height: 1;
            color: #117A65; background: #E6FAF5;
            border: 2px solid #16A085; border-radius: 999px;
            box-shadow: 0 4px 10px rgba(22,160,133,0.20);
            pointer-events: none; user-select: none; z-index: 5;
        }
        #hd-name { font-size: 2.6rem; font-weight: bold; color: #117A65; text-align: center; padding: 0 62px; }

        /* 4 sütun: başta / ortada / sonda / yalın */
        #hd-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .hd-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .hd-col-label { font-size: 1.35rem; font-weight: bold; }
        .hd-col-box {
            width: 100%; height: min(38vh, 320px); background: white; border-radius: 16px;
            box-shadow: var(--shadow-sm); border: 2px solid #eef2f7;
            display: flex; align-items: center; justify-content: center;
            padding: 10px; cursor: pointer; transition: border-color 0.2s, transform 0.2s;
        }
        .hd-col-box:hover { border-color: var(--accent); transform: translateY(-3px); }
        .hd-yaz-svg { width: 100%; height: 100%; }
        /* Büyüteç kutusunda da satır çizgisi: harfin çizginin neresine oturduğu,
           kuyruğun altına inip inmediği burada da görünsün. Çizgi harfin
           viewBox'ında y=410 (taban) hizasında durur; iki yana taşırılıp SVG
           görüntü alanında kırpıldığı için kutuyu baştan sona keser.
           vector-effect sayesinde harf ne kadar büyütülürse büyütülsün
           çizginin kalınlığı sabit kalır. */
        .hd-satir { stroke: rgba(0, 0, 0, 0.22); stroke-width: 3; vector-effect: non-scaling-stroke; }

        /* Kalem animasyonu katmanları */
        .hd-ghost { fill: #eef2f7; }
        .hd-nib circle { transition: none; }

        #hd-replay {
            border: none; background: var(--accent); color: white; font-family: 'arakom';
            font-size: 1.05rem; padding: 6px 18px; border-radius: 10px; cursor: pointer;
            box-shadow: 0 4px 10px -3px rgba(245, 158, 11, 0.55); transition: transform 0.15s;
            margin-left: 12px; vertical-align: middle;
        }
        #hd-replay:active { transform: scale(0.94); }

        .hd-sec { background: white; border-radius: 18px; padding: 16px 22px; box-shadow: var(--shadow-sm); border-left: 6px solid var(--accent); }
        .hd-sec-mahrec { border-left-color: var(--success); }
        .hd-sec-title { font-size: 1.4rem; font-weight: bold; color: var(--primary); margin-bottom: 6px; }
        .hd-sec-sub { font-size: 1rem; color: #94a3b8; font-weight: normal; }
        .hd-sec-text { font-size: 1.3rem; color: #334155; line-height: 1.5; }
        @media (max-width: 768px) {
            #hd-cols { grid-template-columns: repeat(2, 1fr); }
            #hd-card { padding: 18px; gap: 12px; }
            #hd-no { top: 10px; left: 10px; min-width: 38px; height: 38px; padding: 0 9px; font-size: 1.2rem; border-width: 1.5px; }
            #hd-name { font-size: 1.9rem; padding: 0 46px; }
            .hd-sec-text { font-size: 1.1rem; }
            .hd-col-label { font-size: 1.1rem; }
            .hd-col-box { height: min(26vh, 220px); }
        }

        /* Kartlar (Flip) */
        .grid-flip { display: grid; gap: 12px; height: 100%; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(4, 1fr); direction: rtl; }
        .flip-box { perspective: 1000px; cursor: pointer; height: 100%; }
        .flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; }
        .flip-box:hover .flip-inner { transform: translateY(-5px); }
        .flip-box.is-flipped .flip-inner { transform: rotateY(180deg); }
        .face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; border: 2px solid transparent; background: white; box-shadow: var(--shadow-md); }
        .face-back { background: linear-gradient(135deg, #f59e0b, #ea580c); color: white; transform: rotateY(180deg); font-size: 2rem; }

        /* --- HAFIZA OYUNU ÖZEL --- */
        /* Panel: sitenin kareli kağıt dokusu + yumuşak kart zemini */
        #p3.active {
            display: flex; flex-direction: column; min-height: 0;
            padding: 10px; border-radius: 16px;
            background-color: rgba(255, 255, 255, 0.45);
            background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 .5H40M.5 0V40' stroke='%234D96FF' stroke-opacity='0.07' fill='none'/%3E%3C/svg%3E");
            border: 1px solid #E9EEF5;
        }
        .memory-controls { display: flex; justify-content: center; align-items: center; gap: 18px; margin-bottom: 12px; flex: 0 0 auto; }

        .switch-wrapper { display: flex; align-items: center; background: white; padding: 6px 14px; border-radius: 50px; border: 1px solid #E9EEF5; gap: 10px; box-shadow: 0 6px 12px rgba(0,0,0,0.08); }
        .switch { position: relative; display: inline-block; width: 44px; height: 24px; }
        .switch input { opacity: 0; width: 0; height: 0; }
        .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #16A085; transition: .4s; border-radius: 34px; }
        .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
        input:checked + .slider { background-color: #F39C12; }
        input:checked + .slider:before { transform: translateX(20px); }
        /* Harf Tanıtımı switch'i rtl akışta duruyor: kalem ikonu SAĞDA, ses ikonu
           SOLDA. Topuz da o yöne baksın ki "hangi taraftaysa o taraftaki ikon
           vurgulu" olsun: yazı modunda topuz sağda (kalemin yanında), ses
           modunda sola kayar (hoparlörün yanına). */
        #p1-switch .slider:before { left: auto; right: 3px; }
        #p1-switch input:checked + .slider:before { transform: translateX(-20px); }

        /* --- MOD İKONLARI (emoji yerine animasyonlu SVG) --- */
        .mode-ico {
            display: inline-flex; align-items: center; justify-content: center;
            width: 36px; height: 36px; padding: 3px; border-radius: 50%;
            cursor: pointer; user-select: none; background: transparent;
            transition: background .25s ease, transform .2s ease;
        }
        .mode-ico--lg { width: 66px; height: 66px; padding: 6px; }
        .mode-ico svg { width: 100%; height: 100%; overflow: visible; display: block; }
        .mode-ico svg circle, .mode-ico svg path, .mode-ico svg line {
            fill: none; stroke: #A9B7C3; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
            transition: stroke .3s ease;
        }
        .mode-ico:hover { transform: translateY(-2px); }
        .mode-ico--single:hover { background: rgba(22,160,133,.10); }
        .mode-ico--multi:hover  { background: rgba(243,156,18,.12); }
        .mode-ico--single.on { background: rgba(22,160,133,.14); }
        .mode-ico--multi.on  { background: rgba(243,156,18,.16); }
        .mode-ico--single.on svg circle, .mode-ico--single.on svg path { stroke: #16A085; }
        .mode-ico--multi.on  svg circle, .mode-ico--multi.on  svg path { stroke: #E67E22; }

        /* Tek oyuncu: nefes alan gövde + dışa açılan halka */
        .mode-ico--single .mi-ring { opacity: 0; stroke-dasharray: 4 7; stroke-width: 2.4; }
        .mode-ico--single.on .mi-ring { animation: miPulse 2.6s ease-in-out infinite; transform-origin: 24px 24px; }
        .mode-ico--single.on .mi-body { animation: miBreathe 2.6s ease-in-out infinite; transform-origin: 24px 38px; }
        @keyframes miBreathe { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.07) translateY(-1px); } }
        @keyframes miPulse { 0% { opacity: .6; transform: scale(.82); } 65% { opacity: 0; transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.08); } }

        /* İki oyuncu: sırayla zıplayan iki figür + parlayan yıldız */
        .mode-ico--multi .mi-spark { opacity: 0; }
        .mode-ico--multi .mi-spark path { stroke-width: 2; }
        .mode-ico--multi.on .mi-spark { animation: miSpark 1.7s ease-in-out infinite; transform-origin: 24px 8px; }
        .mode-ico--multi.on .mi-spark path { stroke: #F39C12; fill: #FFC107; }
        .mode-ico--multi.on .mi-p1 { animation: miBob 1.7s ease-in-out infinite; transform-origin: 16px 40px; }
        .mode-ico--multi.on .mi-p2 { animation: miBob 1.7s ease-in-out infinite .85s; transform-origin: 32px 40px; }
        @keyframes miBob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2.5px) scale(1.05); } }
        @keyframes miSpark { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(90deg); } }

        /* --- HARF TANITIMI: gruplama switch'i (header) --- */
        /* Araç şeridi artık YÜZEN KUMANDANIN içinde (en altta) yaşıyor:
           kendi konumunu belirlemez, kumandayla birlikte taşınır. */
        .hdr-switch { position: static; padding: 4px 11px; gap: 7px; }
        .hdr-switch.gizli { display: none; }
        .grp-ico { width: 34px; height: 34px; padding: 3px; }
        .grp-ico--yazi:hover { background: rgba(22,160,133,.10); }
        .grp-ico--ses:hover  { background: rgba(243,156,18,.12); }
        .grp-ico--yazi.on { background: rgba(22,160,133,.14); }
        .grp-ico--ses.on  { background: rgba(243,156,18,.16); }
        .grp-ico--yazi.on svg path, .grp-ico--yazi.on svg circle { stroke: #16A085; }
        .grp-ico--ses.on  svg path, .grp-ico--ses.on  svg circle { stroke: #E67E22; }

        /* ================= ODAK / TAM EKRAN =================
           Switch'in yanındaki ince ayıraç ve dört köşeli odak düğmesi.
           Kapalıyken köşeler dışa doğru nefes alır (genişleme), açıkken içe
           doğru toplanır (küçülme). İki grup asla birlikte görünmez.
           ==================================================== */
        .hdr-ayirac {
            width: 1px; align-self: stretch; margin: 3px 1px;
            background: #E9EEF5; flex: 0 0 1px;
        }
        .grp-ico--tam .gt-kapa { display: none; }
        body.harf-tam .grp-ico--tam .gt-ac   { display: none; }
        body.harf-tam .grp-ico--tam .gt-kapa { display: block; }
        .grp-ico--tam:hover { background: rgba(22,160,133,.10); }
        .grp-ico--tam svg path { stroke: #16A085; stroke-width: 3.4; }
        body.harf-tam .grp-ico--tam { background: rgba(243,156,18,.16); }
        body.harf-tam .grp-ico--tam svg path { stroke: #E67E22; }
        .grp-ico--tam .gt-a1 { animation: gtAc1 2.4s ease-in-out infinite; }
        .grp-ico--tam .gt-a2 { animation: gtAc2 2.4s ease-in-out infinite; }
        .grp-ico--tam .gt-a3 { animation: gtAc3 2.4s ease-in-out infinite; }
        .grp-ico--tam .gt-a4 { animation: gtAc4 2.4s ease-in-out infinite; }
        @keyframes gtAc1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2.6px, -2.6px); } }
        @keyframes gtAc2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2.6px, -2.6px); } }
        @keyframes gtAc3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2.6px, 2.6px); } }
        @keyframes gtAc4 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2.6px, 2.6px); } }
        /* açıkken aynı köşeler ters yöne, içe doğru toplanır */
        /* İçe toplanan köşeler zaten merkeze yakın: 2.6px'te ortada birleşip artı
           işaretine benziyorlardı. Bu yüzden açık durumda genlik 1.3px. */
        body.harf-tam .grp-ico--tam .gt-i1 { animation: gtKapa3 2.4s ease-in-out infinite; }
        body.harf-tam .grp-ico--tam .gt-i2 { animation: gtKapa4 2.4s ease-in-out infinite; }
        body.harf-tam .grp-ico--tam .gt-i3 { animation: gtKapa1 2.4s ease-in-out infinite; }
        body.harf-tam .grp-ico--tam .gt-i4 { animation: gtKapa2 2.4s ease-in-out infinite; }
        @keyframes gtKapa1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1.3px, -1.3px); } }
        @keyframes gtKapa2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.3px, -1.3px); } }
        @keyframes gtKapa3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.3px, 1.3px); } }
        @keyframes gtKapa4 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1.3px, 1.3px); } }

        /* --- ODAK MODU: sayfada sadece harf tablosu (+ kumanda) kalır ---
           SEKME DÜĞMELERİ ARTIK ODAKTA DA DURUYOR. Önce gizleniyorlardı;
           o zaman şerit açık kalsa bile yalnız "Alfabe" ve "Ölçme &
           Etkinlik" başlıkları görünüyor, altları boş kalıyordu. Oysa
           odaktan çıkıp menüyü bulup başka etkinliğe geçmek sınıfta üç
           işlem demek. Şimdi yedi sekme de yerinde: birine dokunmak odağı
           kendiliğinden kapatıp o etkinliğe götürüyor (bkz. ui.tab).
           Şerit yer kaplasın istemeyen, kumandadaki liste düğmesiyle
           katlar; harfe dokunmak da katlıyor (dışarı dokunma kuralı). */
        body.harf-tam .site-header,
        body.harf-tam .home-link,
        body.harf-tam #g1yan,
        body.harf-tam #g1alt { display: none !important; }
        body.harf-tam .nav-tabs {
            min-height: 54px; box-shadow: none; background: transparent;
            border: 0; padding: 0; margin: 0;
        }
        /* Normalde switch header'ın ALT kenarına yapışıktır (bottom: 8px). Odakta
           header gizlenip şerit 54px'e indiğinden bu hesap switch'i ekranın
           üstünden 4px taşırıyordu: tepesi kesiliyordu. Odakta üstten hizalanır. */
        body.harf-tam .hdr-switch { top: 5px; bottom: auto; right: 12px; }
        body.harf-tam .content-area { padding: 4px 3px 5px; }
        body.harf-tam .p1-duzen { gap: 0; }
        /* Odakta kartlar tüm yüksekliği kullanır: harfler mümkün olan en büyük
           boyuta çıksın diye kart içi boşluklar da biraz açılır. */
        /* Odakta her piksel harfe gitsin: hücre ve kart iç boşlukları kısılır,
           böylece kartın genişliği (harf boyunu belirleyen ölçü) büyür. */
        body.harf-tam .harf-tablo { --ht-pad: 2px; }
        body.harf-tam .char-card { padding: 5px 2px; }
        /* Kartlardaki harfler yazı değil SVG: boyutlarını harfGrid.layout() ölçüp
           veriyor. Bu yüzden odak modunda font-size ile büyütmeye çalışmak işe
           yaramıyor — tamEkran.ac() sınıfı ekledikten sonra layout()'u yeniden
           çağırır, harfler yeni kart ölçüsüne göre kendiliğinden büyür. */
        body.harf-tam .tr-label { font-size: clamp(1.05rem, 2.1vh, 1.5rem); margin-top: 4px; }
        body.harf-tam .char-card .card-num { min-width: 25px; height: 25px; font-size: 0.94rem; }
        body.harf-tam .char-card .mz-ok { width: clamp(24px, 2.6vw, 34px); height: clamp(24px, 2.6vw, 34px); }

        /* YAZI ikonu = KALEM: kalem kendini çizer, sonra yazarken sağa kayar,
           altındaki iki satır soldan sağa doğru "yazılır". */
        .grp-ico .gk-govde { stroke-dasharray: 96; stroke-width: 2.7; }
        .grp-ico .gk-bilezik { stroke-dasharray: 13; }
        .grp-ico .gk-cizgi { stroke-width: 2.7; }
        .grp-ico .gk-c1 { stroke-dasharray: 18; }
        .grp-ico .gk-c2 { stroke-dasharray: 15; }
        .grp-ico--yazi.on .gk-el { animation: gkKay 3.4s ease-in-out infinite; }
        .grp-ico--yazi.on .gk-govde { animation: gkCiz 3.4s ease-in-out infinite; }
        .grp-ico--yazi.on .gk-bilezik { animation: gkCizKisa 3.4s ease-in-out infinite .25s; }
        .grp-ico--yazi.on .gk-uc { animation: gkUc 3.4s ease-in-out infinite .3s; }
        .grp-ico--yazi.on .gk-c1 { animation: gkSatir1 3.4s ease-in-out infinite; }
        .grp-ico--yazi.on .gk-c2 { animation: gkSatir2 3.4s ease-in-out infinite; }
        @keyframes gkCiz { 0% { stroke-dashoffset: 96; } 26%, 100% { stroke-dashoffset: 0; } }
        @keyframes gkCizKisa { 0% { stroke-dashoffset: 13; } 26%, 100% { stroke-dashoffset: 0; } }
        @keyframes gkUc { 0%, 8% { opacity: 0; } 26%, 100% { opacity: 1; } }
        @keyframes gkKay { 0%, 30% { transform: translateX(-9px); } 62% { transform: translateX(0); } 78%, 100% { transform: translateX(-9px); } }
        @keyframes gkSatir1 { 0%, 30% { stroke-dashoffset: 18; } 58%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 18; } }
        @keyframes gkSatir2 { 0%, 46% { stroke-dashoffset: 15; } 66%, 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 15; } }

        /* SES ikonu: hoparlörden sırayla yayılan üç ses dalgası */
        .grp-ico--ses.on .gs-hoparlor { fill: rgba(243,156,18,.20); animation: gsHop 1.9s ease-in-out infinite; transform-origin: 12px 24px; }
        .grp-ico .gs-dalga { stroke-width: 2.8; }
        .grp-ico--ses.on .gs-d1 { animation: gsDalga 1.9s ease-in-out infinite; transform-origin: 26px 24px; }
        .grp-ico--ses.on .gs-d2 { animation: gsDalga 1.9s ease-in-out infinite .22s; transform-origin: 26px 24px; }
        .grp-ico--ses.on .gs-d3 { animation: gsDalga 1.9s ease-in-out infinite .44s; transform-origin: 26px 24px; }
        @keyframes gsHop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
        @keyframes gsDalga { 0% { opacity: .18; transform: scale(.78); } 45% { opacity: 1; transform: scale(1); } 100% { opacity: .18; transform: scale(.78); } }

        /* DİZİLİŞ ikonu: kapalıyken yedi çubuk eşit aralıklı durur ve altlarında
           tek bir uzun yol (labirent) uzanır; açıkken çubuklar 3+2+2 diye kümelenir,
           uzun yol silinir ve her kümenin altına kendi kancası çizilir. */
        .grp-ico--diz:hover { background: rgba(243,156,18,.12); }
        .grp-ico--diz.on { background: rgba(243,156,18,.16); }
        .grp-ico--diz .gd-n {
            fill: #A9B7C3; stroke: none;
            transition: transform .5s cubic-bezier(.22,.9,.24,1.25), fill .3s ease;
        }
        .grp-ico--diz.on .gd-n { fill: #E67E22; }
        .grp-ico--diz.on .gd-n2 { transform: translateX(-1.83px); }
        .grp-ico--diz.on .gd-n3 { transform: translateX(-3.67px); }
        .grp-ico--diz.on .gd-n4 { transform: translateX(-0.3px); }
        .grp-ico--diz.on .gd-n5 { transform: translateX(-2.13px); }
        .grp-ico--diz.on .gd-n6 { transform: translateX(1.83px); }
        .grp-ico--diz .gd-yol {
            stroke: #A9B7C3; stroke-dasharray: 44; stroke-dashoffset: 0; stroke-width: 2.6;
            transition: stroke-dashoffset .45s ease;
        }
        .grp-ico--diz.on .gd-yol { stroke-dashoffset: 44; }
        .grp-ico--diz .gd-kume {
            stroke: #E67E22; stroke-dasharray: 22; stroke-dashoffset: 22; stroke-width: 2.6;
            transition: stroke-dashoffset .45s ease .12s;
        }
        .grp-ico--diz.on .gd-kume { stroke-dashoffset: 0; }

        /* ============ YAZILIŞ ANİMASYONU DÜĞMESİ ============
           İkondaki harf uydurma bir kavis değil, DAD (ض) harfinin kendisi:
           yol verisi tablodaki gerçek darbelerden üretildi. Dad'ı seçtik çünkü
           yatayda geniş bir harf, dar başlık şeridinde bile okunuyor — bu
           yüzden düğme kutusu da diğerleri gibi kare değil, harfin oranına
           (64/44) yakın tutuldu. Kapalıyken harf tamamlanmış ve gri durur;
           açıkken turuncuya döner, kalem harfin üstünde yürürken harf kendini
           tekrar tekrar yazar, en sonda da noktası yerine oturur. */
        .grp-ico--yaz { width: 47px; }
        .grp-ico--yaz:hover { background: rgba(243,156,18,.12); }
        .grp-ico--yaz.on { background: rgba(243,156,18,.16); }
        .grp-ico--yaz svg { overflow: visible; }
        /* İz: harfin soluk hayaleti — animasyon sırasında nereye yazıldığı belli olsun */
        .grp-ico--yaz .gy-iz {
            stroke: #A9B7C3; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none;
            opacity: 0; transition: opacity .3s ease;
        }
        .grp-ico--yaz.on .gy-iz { opacity: .26; }
        /* stroke-dasharray = yolun gerçek uzunluğu (tarayıcıda ölçüldü) */
        .grp-ico--yaz .gy-harf {
            stroke: #A9B7C3; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none;
            stroke-dasharray: 118; stroke-dashoffset: 0;
            transition: stroke .3s ease;
        }
        .grp-ico--yaz.on .gy-harf { stroke: #E67E22; animation: gyYaz 3s ease-in-out infinite; }
        /* Dad'ı sad'dan ayıran nokta: harfin kendi noktası, aynı veriden */
        .grp-ico--yaz .gy-nokta {
            fill: #A9B7C3; stroke: none; transition: fill .3s ease;
            transform-box: fill-box; transform-origin: center;
        }
        .grp-ico--yaz.on .gy-nokta { fill: #E67E22; animation: gyNokta 3s ease-in-out infinite; }
        /* Kalem: ucu (0,0) harfin çizgisini takip eder (CSS hareket yolu).
           Buradaki yol dizesi HTML'deki .gy-harf ile birebir aynı olmalı. */
        .grp-ico--yaz .gy-uc {
            opacity: 0;
            offset-path: path('M39.87 24.07 C39.96 23.61 39.77 22.97 40.33 22.14 C40.88 21.31 41.98 19.93 42.9 18.92 C43.82 17.91 44.93 16.89 45.94 16.16 C46.95 15.42 47.78 14.87 48.79 14.41 C49.8 13.95 50.91 13.67 51.92 13.49 C52.93 13.31 54.13 13.03 54.95 13.12 C55.78 13.21 56.33 13.77 56.89 14.23 C57.44 14.69 57.99 15.05 58.08 15.88 C58.17 16.71 57.81 18.27 57.62 19.01 C57.44 19.75 57.35 19.65 56.98 20.02 C56.61 20.39 55.78 20.94 55.6 21.13 C54.86 21.49 53.02 22.6 51.73 23.06 C50.45 23.52 49.16 23.89 47.78 24.16 C46.4 24.44 45.02 24.71 43.73 24.81 C42.44 24.9 40.6 25.08 39.96 24.99 C38.3 24.99 32.23 25.27 30.21 24.9 C28.18 24.53 28.18 23.61 27.81 22.69 C27.45 21.77 27.91 19.84 27.91 19.29 C28 21.59 28.83 24.16 29.38 25.45 C29.29 26.28 29.47 27.66 29.38 28.95 C29.29 30.23 29.1 32.07 28.92 33.09 C28.73 34.1 28.55 34.47 28.27 35.02 C28 35.57 27.81 36.03 27.17 36.67 C26.53 37.32 25.61 38.15 24.69 38.7 C23.77 39.25 22.85 39.71 21.83 40.08 C20.82 40.45 19.99 40.63 18.89 40.81 C17.79 41 16.41 41.18 15.3 41.18 C14.2 41.18 13.09 41 12.17 40.81 C11.25 40.63 10.52 40.35 9.78 39.89 C9.05 39.43 8.31 38.97 7.76 38.33 C7.21 37.69 6.47 36.67 6.19 35.85 C5.92 35.02 6.01 34.37 6.01 33.64 C6.01 32.9 6.1 32.35 6.29 31.52 C6.47 30.69 6.93 29.5 7.39 28.49 C7.85 27.47 8.86 26.09 9.14 25.63');
            offset-rotate: 0deg; offset-distance: 0%;
        }
        .grp-ico--yaz .gy-uc path { stroke-linecap: round; fill: none; }
        /* uç açık turuncu (harfle aynı), gövde koyu: kalem harfin çizgisine
           karışmasın, ikisi tek bir leke gibi görünmesin */
        .grp-ico--yaz .gy-uc-ucu   { stroke: #E67E22; stroke-width: 2.4; }
        .grp-ico--yaz .gy-uc-govde { stroke: #D35400; stroke-width: 5; }
        .grp-ico--yaz.on .gy-uc { animation: gyUc 3s ease-in-out infinite; }

        @keyframes gyYaz {
            0%   { stroke-dashoffset: 118; }
            66%  { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: 0; }
        }
        @keyframes gyNokta {
            0%, 70%  { opacity: 0; transform: scale(.4); }
            79%, 100% { opacity: 1; transform: scale(1); }
        }
        @keyframes gyUc {
            0%   { opacity: 1; offset-distance: 0%; }
            66%  { opacity: 1; offset-distance: 100%; }
            74%  { opacity: 0; offset-distance: 100%; }
            100% { opacity: 0; offset-distance: 100%; }
        }

        .select-pair { font-family: 'arakom'; font-size: 1.15rem; padding: 7px 12px; border-radius: 12px; border: 1px solid #E9EEF5; outline: none; cursor: pointer; background: #fff; color: #117A65; box-shadow: 0 6px 12px rgba(0,0,0,0.08); }
        .select-pair:focus { border-color: #16A085; }

        .score-board { display: flex; align-items: stretch; justify-content: space-between; gap: 14px; flex: 1 1 auto; min-height: 0; height: auto; position: relative; }
        .player-box { flex: 0 0 128px; display: none; flex-direction: column; align-items: center; justify-content: center; align-self: center; max-height: 190px; background: #fff; border-radius: 15px; box-shadow: 0 6px 12px rgba(0,0,0,0.08); transition: all 0.4s ease; border: 3px solid #E9EEF5; margin: 6px 0; padding: 14px 6px; }
        /* skor kartında sitenin kareli dokusu */
        .player-box { background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 .5H22M.5 0V22' stroke='%234D96FF' stroke-opacity='0.06' fill='none'/%3E%3C/svg%3E"); }
        #p1-box { color: #117A65; }
        #p2-box { color: #E67E22; }
        .p-label { font-size: 1.02rem; font-weight: bold; opacity: 0.85; text-align: center; white-space: nowrap; }
        .p-score { font-size: 2.8rem; font-weight: bold; margin-top: 5px; }
        #p1-box.active-p { background: #E6FAF5; }
        #p2-box.active-p { background: #FFF3E0; }
        .active-p { transform: scale(1.04); box-shadow: 0 10px 22px rgba(0,0,0,0.13); border-color: currentColor; }

        .grid-memory { display: grid; gap: 12px; flex: 1 1 auto; grid-auto-rows: 1fr; min-height: 0; direction: rtl; }

        /* Kart: gerçek 3D çevirme — arkası site turuncusu, önü beyaz/turkuaz */
        .mem-item {
            perspective: 900px; cursor: pointer; background: none; border: none;
            box-shadow: none; min-height: 0;
            transition: transform .5s ease, opacity .5s ease;
        }
        .mem-inner {
            position: relative; width: 100%; height: 100%;
            transform-style: preserve-3d;
            transition: transform .55s cubic-bezier(.4,.15,.2,1);
        }
        .mem-item:not(.show):not(.matched):hover .mem-inner { transform: translateY(-4px); }
        .mem-item.show .mem-inner { transform: rotateY(180deg); }
        .mem-face {
            display: flex; align-items: center; justify-content: center;
            border-radius: 14px; overflow: hidden;
            backface-visibility: hidden; -webkit-backface-visibility: hidden;
        }
        /* ön yüz akışta kalır: mobilde satır yüksekliğini o belirler */
        .mem-front {
            position: relative; width: 100%; height: 100%; min-height: 56px;
            background: #fff; border: 2px solid #16A085; color: #117A65;
            transform: rotateY(180deg);
            box-shadow: 0 6px 12px rgba(0,0,0,0.10);
            transition: background .3s ease, border-color .3s ease, color .3s ease;
        }
        .mem-back {
            position: absolute; inset: 0;
            background: linear-gradient(135deg, #FFC107 0%, #F39C12 52%, #E67E22 100%);
            border: 2px solid #E67E22;
            box-shadow: 0 6px 14px rgba(230,126,34,0.30);
        }
        /* sitenin kareli kağıt dokusu (kart arkasında beyaz çizgiler) */
        .mem-back::before {
            content: ""; position: absolute; inset: 0; pointer-events: none;
            background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 .5H22M.5 0V22' stroke='%23ffffff' stroke-opacity='0.22' fill='none'/%3E%3C/svg%3E");
        }
        /* el yazması tarzı iç çerçeve */
        .mem-back::after {
            content: ""; position: absolute; inset: 5px; pointer-events: none;
            border: 1.5px dashed rgba(255,255,255,0.55); border-radius: 9px;
        }
        .mem-orn { position: relative; width: 62%; height: 62%; max-height: 62%; }
        .mem-orn circle, .mem-orn rect { fill: none; stroke: #fff; stroke-width: 2.2; opacity: .55; }
        .mem-orn .mo-dot { stroke-dasharray: 1.6 7; stroke-width: 2.8; opacity: .75; }
        .mem-item:not(.show):not(.matched) .mem-orn .mo-dot { animation: memSpin 16s linear infinite; transform-origin: 50px 50px; }
        @keyframes memSpin { to { transform: rotate(360deg); } }

        .mem-txt { font-size: 2.3rem; line-height: 1; }
        .mem-item.mem-tr .mem-txt { font-size: 1.3rem; }
        .mem-item.matched { opacity: 0 !important; pointer-events: none !important; transform: scale(0.85) !important; }
        .mem-item.p1-turn .mem-front { background: #E6FAF5 !important; color: #117A65 !important; border-color: #16A085 !important; }
        .mem-item.p2-turn .mem-front { background: #FFF3E0 !important; color: #E67E22 !important; border-color: #F39C12 !important; }

        .reset-area { text-align: center; margin-top: 10px; flex: 0 0 auto; display: none; }
        .reset-btn { font-size: 1.2rem; font-family: 'arakom'; cursor: pointer; background: linear-gradient(90deg, #F39C12, #E67E22); color: white; padding: 10px 22px; border-radius: 12px; border: none; transition: 0.3s; box-shadow: 0 6px 14px rgba(230,126,34,0.30); }
        .reset-btn:hover { background: linear-gradient(90deg, #E67E22, #D35400); transform: scale(1.05); }

        /* --- YARIŞMA (TEST) --- */
        #duel-stage-container { display: none; flex-direction: column; flex: 1; height: 100%; width: 100%; }
        .duel-stage { display: flex; flex: 1; margin-bottom: 10px; gap: 15px; }
        .player-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 25px; position: relative; border-radius: 20px; box-shadow: var(--shadow-sm); transition: background-color 0.4s; }
        #z1 { background-color: var(--p1-bg); border: 2px solid #bae6fd; }
        #z2 { background-color: var(--p2-bg); border: 2px solid #bbf7d0; }
        .q-display { font-size: 9rem; font-weight: bold; color: var(--primary); text-shadow: 2px 4px 10px rgba(0,0,0,0.1); }
        .ans-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; width: 100%; height: 35%; }
        .btn-ans { border: none; background: white; border-radius: 12px; font-family: 'arakom'; font-size: 2rem; cursor: pointer; box-shadow: 0 4px 0 #cbd5e1; transition: all 0.1s; color: var(--primary); }
        .btn-ans:active { transform: translateY(4px); box-shadow: 0 0 0 #cbd5e1; }
        .btn-ans.selected { background: #94a3b8; color: white; box-shadow: 0 0 0 #cbd5e1; transform: translateY(4px); }
        
        .zone-correct { background-color: var(--success) !important; color: white !important; border-color: var(--success) !important; }
        .zone-wrong { background-color: var(--danger) !important; color: white !important; border-color: var(--danger) !important; animation: shake 0.4s; }
        .zone-correct .q-display, .zone-wrong .q-display { color: white; }

        .puan-popup { position: absolute; font-size: 3rem; font-weight: bold; color: #fbbf24; z-index: 100; animation: floatUp 1s forwards; }
        @keyframes floatUp { 0% { transform: translateY(0) scale(0.5); opacity: 0; } 20% { transform: translateY(-20px) scale(1.2); opacity: 1; } 100% { transform: translateY(-120px) scale(1); opacity: 0; } }
        @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
        
        .next-btn { height: 60px; width: 100%; background: var(--primary); color: white; font-family: 'arakom'; font-size: 1.8rem; border: none; border-radius: 15px; cursor: pointer; display: none; margin-top: 10px; }

        /* Yarışma Başlatma Ekranı */
        #startInfo {
            display: flex; align-items: center; justify-content: center; flex: 1; height: 100%; width: 100%;
        }

        /* Mobil Optimizasyon */
        @media (max-width: 768px) {
            /* Şerit artık kumandanın içinde DİKEY; eski yatay kaydırma
               kuralları geçersiz kaldı. */

             .home-link {
                position: fixed !important; /* Sekme şeridi kayarken buton sol üstte sabit kalır */
                left: 8px; top: 7px; bottom: auto; z-index: 30;
                width: 36px; height: 36px; border-radius: 10px;
            }
            .home-link svg { width: 19px; height: 19px; } 
            .nav-tabs.sw-yok { border-right-width: 12px; } /* switch yoksa rezerv boşluk gerekmez */
            .nav-tabs::-webkit-scrollbar { display: none; }
            .tab-grup-ad { font-size: .62rem; letter-spacing: .06em; }
            .km-hap { padding: 7px 15px; font-size: .88rem; }
            .ys-cip { min-width: 62px; padding: 6px 10px; }
            .ys-cip b { font-size: 1.5rem; }
            .tab-trigger { padding: 5px 12px 5px 6px; gap: 8px; }
            .tab-ikon { width: 32px; height: 32px; }
            .tab-ad { font-size: .9rem; }
            .nav-tabs { max-height: min(56vh, 420px); }
            /* Mobilde simge daha küçük ve yalnız ikon */
            .nav-mini { top: 100px; left: 7px; padding: 4px; gap: 4px; }
            .nav-mini-t { padding: 6px 10px; }
            .nav-mini-ad { max-width: 150px; font-size: .85rem; }
            .nav-mini-ad { display: none; }
            .nav-mini .nm-menu { padding: 6px 8px; gap: 2px; }
            .nav-mini .nm-menu svg:first-child { width: 18px; height: 18px; }
            .nav-mini .nm-yon { width: 13px; height: 13px; }
            .hdr-switch {
                position: fixed !important; /* Sekme şeridi kayarken switch sağ üstte sabit kalır */
                top: 7px; right: 8px; bottom: auto; z-index: 30;
                padding: 3px 7px; gap: 4px;
            }
            .grp-ico { width: 26px; height: 26px; padding: 2px; }
            .content-area { overflow-y: auto !important; }
            #p1 { overflow-x: hidden !important; overflow-y: auto !important; }
            #p1.active { display: block !important; }
            /* Mobilde düzen alt alta: harf tablosu, sağ panel, alt şerit */
            .p1-duzen { display: block; height: auto; gap: 0; }
            .p1-ust   { display: block; }
            /* Tablo mobilde de 7x4 kalır: yatay kaydırılır, dizilim ve çizgiler bozulmaz.
               direction: rtl -> kaydırma sağdan başlar, ilk görünen kart elif (giriş) olur.
               Yatay kaydırma artık sadece tabloya ait; panel ve şerit ekran genişliğinde kalır. */
            .tablo-sar { height: auto; padding-bottom: 12px; overflow-x: auto; direction: rtl; }
            .yan-panel { flex: none; width: 100%; margin-top: 4px; }
            .yp-tablo { grid-template-rows: auto repeat(6, 62px); column-gap: 16px; }
            .yp-th { font-size: 1.5rem; margin-bottom: 6px; }
            .yp-yon { width: 30px; height: 25px; }
            .yp-im { width: 26px; height: 26px; }
            .yp-harf { font-size: 2.5rem; }
            .yp-svg { height: 56px; }
            .yp-baslik { font-size: 1.22rem; }
            .alt-serit { height: auto; flex-wrap: wrap; margin-top: 10px; padding-bottom: 10px; }
            /* 84 -> 92px: etiket-harf ayırma boşluğu (as-liste margin-top) alttaki
               esre/kesratan payından çalmasın. */
            .as-kutu { flex: 1 1 45%; min-height: 92px; } /* esre/kesratan alta iniyor: alt pay */
            .as-liste { margin-top: 5px; }
            .as-kutu.as-genis { flex: 1 1 100%; }
            .as-kutu.as-genis .as-liste { gap: 13px; }
            .as-kutu.as-tenvin .as-liste { gap: 22px; }
            .as-harf { font-size: 1.95rem; }
            .as-kesik { font-size: 1.95rem; }
            .as-baslik { font-size: 0.78rem; }
            .harf-tablo { height: auto; min-width: 900px; --ht-pad: 3px; --ht-w: 3px; --ht-kalin: 6px; }
            .ht-cell { height: auto; }
            .ht-cell > .char-card { min-height: 88px; }

            /* --- ODAK MODU (mobil) ---
               Mobilde sayfa normalde dikey kayar ve tablo içeriğe göre uzar.
               Odakta ise kaydırma kapanır, tablo görünür yüksekliğin tamamını
               kaplar; satırlar %25'e bölünür, böylece harfler ekranı doldurur.
               Yatay kaydırma korunur: tablo 7 sütun kalsın diye min-width duruyor. */
            body.harf-tam { overflow: hidden; }
            body.harf-tam .nav-tabs { min-height: 44px; border-right-width: 192px; }
            body.harf-tam .content-area { overflow: hidden !important; padding: 2px 4px 4px; }
            body.harf-tam #p1 { overflow-y: hidden !important; height: 100%; padding: 0 !important; }
            body.harf-tam .p1-duzen { display: flex; height: 100%; }
            body.harf-tam .p1-ust { display: flex; height: 100%; min-height: 0; }
            body.harf-tam .tablo-sar { height: 100%; padding-bottom: 0; }
            /* Mobilde tablo zaten yatay kaydırılıyor (min-width 900px). Odakta
               kaydırma alanını genişletiriz: hücre genişliği artar, harfler de
               boyca büyür — dikey yerin tamamı kullanılabilir hale gelir. */
            body.harf-tam .harf-tablo { height: 100%; min-width: 1400px; --ht-pad: 2px; }
            body.harf-tam .ht-cell { height: 25%; }
            body.harf-tam .ht-cell > .char-card { min-height: 0; }
            .grid-flip { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(7, 1fr); }
            /* Mobilde kartlar küçük: jeton harfin üstüne binmesin */
            .char-card .card-num { min-width: 18px; height: 18px; padding: 0 4px; font-size: 0.68rem; border-width: 1.5px; top: 3px; left: 4px; }
            .char-card.maze-start::after, .char-card.maze-end::after { font-size: 0.48rem; padding: 2px 5px; top: 3px; right: 4px; }
            
            .score-board { flex-direction: column; align-items: center; }
            .player-box { flex-direction: row; flex: none; width: 90%; height: 50px; max-height: none; gap: 10px; margin: 15px 0 5px 0; padding: 5px; }
            .p-score { font-size: 1.8rem; margin-top: 0; }
            .p-label { font-size: 0.9rem; margin-top: 0; }
            
            #p3.active { padding: 8px; }
            .grid-memory { height: auto !important; grid-auto-rows: auto !important; padding-bottom: 10px; }
            .mem-txt { font-size: 1.7rem !important; }
            .mem-item.mem-tr .mem-txt { font-size: 1.1rem !important; }
            .mem-front { min-height: 62px; }
            .mode-ico { width: 32px; height: 32px; }
            .mode-ico--lg { width: 54px; height: 54px; }
            .duel-stage { flex-direction: column; }
            .q-display { font-size: 5rem !important; }
            .btn-ans { font-size: 1.4rem !important; }
            /* cümlelik soru ve harf şıkları yukarıdaki !important'ları aşar */
            .q-display.q-cumle { font-size: clamp(1.05rem, 4.2vw, 1.6rem) !important; }
            .btn-ans.btn-harf { font-size: 2.3rem !important; }
            /* NOT: kart modu şeridinin dar ekran kuralları dosyanın SONUNDA;
               .kart-mod / .km-* tanımları buradan SONRA geldiği için burada
               yazılsalar eziliyorlardı. */
        }

/* Diziliş düğmesi eklenince başlıktaki switch dörde çıktı; dar ekranlarda
   sekme şeridinin üstüne binmesin diye ikonlar ve aralıklar biraz kısılır.
   Böylece switch genişliği düğme eklenmeden önceki değere geri döner. */
        @media (max-width: 900px) {
            /* Beş ikon + topuz dar şeride ancak sığıyor: boşluk ve iç payı
               1'er px kısıp kazandığımız 8px'i dad ikonuna veriyoruz. */
            .hdr-switch { padding: 3px 5px; gap: 2px; }
            .hdr-switch .grp-ico { width: 23px; height: 23px; padding: 1px; }
            /* Dad yatay bir harf: kutusu burada da kare değil, geniş kalır */
            .hdr-switch .grp-ico--yaz { width: 31px; }
            .hdr-switch .hdr-ayirac { margin: 0; }
            /* Dar şeritte ikonlar birbirine çok yakın: üzerine gelince
               2px yukarı zıplama titremeye yol açıyor, burada kapalı. */
            .hdr-switch .mode-ico:hover { transform: none; }
            /* Beş ikon dar ekrana sığsın diye yazı/ses topuzu da küçülür */
            .hdr-switch .switch { width: 34px; height: 20px; }
            .hdr-switch .slider:before { height: 14px; width: 14px; bottom: 3px; }
            #p1-switch.hdr-switch input:checked + .slider:before { transform: translateX(-14px); }
        }

/* Büyük Switch Tasarımı (Yarışma Modu İçin) */
        .switch-large { width: 80px !important; height: 40px !important; }
        .switch-large .slider { border-radius: 40px !important; }
        .switch-large .slider:before { height: 32px !important; width: 32px !important; left: 4px !important; bottom: 4px !important; }
        .switch-large input:checked + .slider:before { transform: translateX(40px) !important; }
/* ============================================================
   HARF BİRLEŞTİRME SEKMESİ (p5)  —  alfabe_birlestir.js
   ------------------------------------------------------------
   Bu sekme bir CEVAP SLAYTI'dır: öğrencinin PDF'ini tamamlaması
   için tahtaya yansıtılır. Yazma alanı, yazdırma ve toplu
   ilerletme yoktur; ekranda AYNI ANDA EN FAZLA 4 örnek durur.

   ÖLÇÜ KURALI: kelimeler BÜYÜTÜLMÜŞ bir A4 sayfası gibi SABİT
   puntodadır — ekrana sığsın diye küçülmez. Sığmazsa kâğıt
   kaydırılır (.ab-kagitlik). Böylece sınıfın arkasından da,
   ekranın boyu ne olursa olsun, aynı büyüklükte okunur.

   SATIR DİZİLİMİ: [sıra no] [birleşen kelime] [ayrı harfler SAĞDA]
   ============================================================ */
        #p5 { height: 100%; }
        /* SAR: solda harf tablosu, sağda soru listesi */
        .ab-sar {
            /* TEK PUNTO KAYNAĞI: hem soldaki tablo hem sağdaki liste bunu
               kullanır, böylece harfler iki tarafta da AYNI büyüklükte. */
            --ab-punto: 5.8rem;
            height: 100%; overflow: hidden;
            display: flex; flex-direction: row; align-items: stretch; gap: 10px;
            padding: 10px 12px 12px;
            background: linear-gradient(180deg, #eef2f6, #e2e8f0);
            border-radius: 12px;
        }
        .ab-ana {
            flex: 1 1 auto; min-width: 0; min-height: 0;
            display: flex; flex-direction: column; gap: 10px;
        }

/* ---- SOLDAKİ 4 SÜTUNLU HARF TABLOSU -------------------------------
   Sütunlar SAĞDAN SOLA: başta(yeşil) · ortada(mavi) · sonda(mor) ·
   yalın(siyah). Bunu direction:rtl değil, DOM sırası yapıyor: hücreler
   n,s,o,b sırasında yazılır, yani soldan sağa yalın→başta.
   Kendinden sonrakiyle birleşmeyen harflerin bütün hücreleri KIRMIZI.
   Tablo dikey kaydırılır; satıra dokununca harfDetay büyüteci açılır. */
        .ab-tablo {
            flex: 0 0 50%; min-width: 0; min-height: 0;   /* yatayın YARISI */
            display: flex; flex-direction: column;
            background: #fff; border: 1px solid #d7dee6; border-radius: 14px;
            box-shadow: 0 10px 26px rgba(15, 23, 42, .12); overflow: hidden;
        }
        /* SİMGE DÜĞMESİ + SÜTUN BAŞLIKLARI AYNI SATIRDA.
           Düğme, ızgaranın ilk hücresinde (harf adı sütunu) durur; dört
           başlık kendi sütunlarının tam üstünde kalır. */
        .ab-tb-ust {
            cursor: pointer; display: flex; align-items: center; gap: 4px;
            padding: 2px 4px; color: #0E6655; font-family: inherit;
            background: transparent; border: 0; border-radius: 10px;
            transition: background .15s;
        }
        .ab-tb-ust:hover { background: #e6f7f1; }
        .ab-tb-svg { width: 76px; height: 61px; flex: none; display: block; }
        /* Simgedeki harfler: dört renk sırayla belirir — "burada harflerin
           dört yazılışını gösteren bir tablo var" der. */
        .ab-tb-svg text {
            font-family: 'ArapcaKom', 'Traditional Arabic', 'arakom', serif;
            font-size: 15px; text-anchor: middle; font-synthesis: none;
        }
        .ab-tb-svg .tbs-h {
            transform-box: fill-box; transform-origin: center bottom;
            animation: tbsGel 4s ease-in-out infinite;
        }
        .ab-tb-svg .tbs-1 { animation-delay: 0s; }
        .ab-tb-svg .tbs-2 { animation-delay: .28s; }
        .ab-tb-svg .tbs-3 { animation-delay: .56s; }
        .ab-tb-svg .tbs-4 { animation-delay: .84s; }
        @keyframes tbsGel {
            0%, 6%    { opacity: .12; transform: translateY(4px) scale(.8); }
            16%, 66%  { opacity: 1;   transform: none; }
            80%, 100% { opacity: .12; transform: translateY(4px) scale(.8); }
        }
        @media (prefers-reduced-motion: reduce) {
            .ab-tb-svg .tbs-h { animation: none; opacity: 1; }
        }
        .ab-tb-ok {
            flex: none; width: 0; height: 0; border-style: solid;
            border-width: 8px 6px 0 6px; border-color: #16A085 transparent transparent transparent;
            transition: transform .2s;
        }
        .ab-tb-ic { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
        /* KAPALI: aside ince bir şeride iner, liste tüm genişliği alır */
        /* Kapalıyken yalnız başlık düğmesi kadar yer kaplar: boyu da
           içeriğe iner, uzun boş beyaz şerit kalmaz. */
        /* KAPALI: yalnız simge kalır, başlıklar gizlenir */
        .ab-sar.ab-tablo-kapali .ab-tablo { flex: 0 0 auto; align-self: flex-start; }
        .ab-sar.ab-tablo-kapali .ab-tb-ic { display: none; }
        .ab-sar.ab-tablo-kapali .ab-tb-bs { display: none; }

        /* KATLANMA GEÇİŞİ — tablo birden kaybolmasın, kayarak kapansın.
           Ölçüler JS'te ölçülüp inline veriliyor (bkz. alfabe_birlestir.js
           → tabloKatla); burada yalnız geçiş sırasında geçerli kurallar
           var. Geçiş boyunca içerik BİR AN DAHA çizili kalır ve açık
           ölçüsüne sabitlenir: kutu daralırken içerik ezilmez, kırpılır.
           Böylece panel gerçekten kayarak kapanmış gibi görünür. */
        .ab-sar.ab-katlaniyor .ab-tablo { overflow: hidden; pointer-events: none; }
        .ab-sar.ab-tablo-kapali.ab-katlaniyor .ab-tb-ic { display: flex; }
        .ab-sar.ab-tablo-kapali.ab-katlaniyor .ab-tb-bs { display: block; }
        .ab-sar.ab-tablo-kapali.ab-katlaniyor .ab-tb-baslik {
            grid-template-columns: 96px repeat(4, minmax(0, 1fr));
            padding: 4px 8px; background: #f8fafc; border-bottom: 1px solid #e2e8f0;
        }
        .ab-sar.ab-tablo-kapali.ab-katlaniyor .ab-tb-ok { transform: none; }
        .ab-sar.ab-tablo-kapali .ab-tb-baslik {
            grid-template-columns: auto; padding: 4px; background: #fff; border-bottom: 0;
        }
        .ab-sar.ab-tablo-kapali .ab-tb-ok { transform: rotate(-90deg); }
        .ab-tb-baslik, .ab-tb-satir {
            display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr));
            align-items: center; gap: 2px;
        }
        .ab-tb-baslik {
            flex: none; padding: 4px 8px; background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            /* BAŞLIKLAR ÇOK DAHA BÜYÜK: tahtadan da okunsun */
            font-size: 1.45rem; font-weight: 800; text-transform: uppercase;
            letter-spacing: .03em; text-align: center; line-height: 1.15;
        }
        .ab-tb-kaydir {
            flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        .ab-tb-kaydir::-webkit-scrollbar { width: 8px; }
        .ab-tb-kaydir::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
        .ab-tb-satir {
            width: 100%; border: 0; background: transparent; cursor: pointer;
            font-family: inherit; padding: 3px 8px;
            border-bottom: 1px solid #f1f5f9; transition: background .14s;
        }
        .ab-tb-satir:hover { background: #eefaf6; }
        .ab-tb-satir:active { background: #d7f2ea; }
        .ab-tb-ad {
            display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15;
            font-size: 1.55rem; font-weight: 700; color: #64748b; text-align: left;
        }
        .ab-tb-ad b { font-size: 1.3rem; color: #b6c2cf; }
        /* SATIRIN font ölçüsü = harf ölçüsü. Çizgi konumu em ile
           yazıldığı için (aşağıya bak) bu şart. */
        .ab-tb-satir { font-size: var(--ab-punto); }
        /* YAZILIŞ ANİMASYONU KATMANI (tablo açılınca kelimenin harfleri).
           Hizalama: kalem verisinin viewBox'ı [0 0 G 730] ve harfin taban
           çizgisi orada y=410'dur → taban, kutunun altından 320/730 =
           .4384 yukarıdadır. Satır çizgisi de hücrenin altından .47em
           yukarıda (bkz. .ab-tb-satir::after). İkisi çakışsın diye:
           bottom = .47em − .4384 × yükseklik. Yükseklik 1.27em seçildi;
           böylece 730 birimlik kutu, metin harfiyle aynı boyda çıkar.
           width:auto — en/boy oranı viewBox'tan gelir, harf ezilmez. */
        .ab-tb-h { position: relative; }
        .ab-tb-yaz {
            position: absolute; left: 50%; transform: translateX(-50%);
            height: 1.27em; width: auto; bottom: -.087em;
            overflow: visible; pointer-events: none;
        }
        .ab-tb-yaz .hd-satir { display: none; }   /* satırın kendi çizgisi zaten var */
        .ab-tb-h.ab-yaziliyor { color: transparent; }   /* metin harfi çizime yer açar */
        .ab-tb-h {
            font-family: 'ArapcaKom', 'Traditional Arabic', 'arakom', serif;
            font-size: 1em; line-height: 1.5; font-weight: 400; text-align: center;
            /* sentetik kalınlaştırma kapalı — bkz. .ab-p açıklaması */
            font-synthesis: none; -webkit-font-synthesis: none;
            font-synthesis-weight: none; -webkit-text-stroke: 0;
        }
        /* YAZI ÇİZGİSİ TAM TABAN ÇİZGİSİNDE.
           Ölçüm: bu yazı tipinde taban çizgisi, harf kutusunun altından
           .266em yukarıda; line-height 1.5 olduğu için kutunun altında
           .25em yarım satır boşluğu var. Yani taban = alt kenardan
           (.25 + .266) = .516em. Çizgiyi biraz DAHA AŞAĞIYA, .47em'e
           koyuyoruz ki harfin gövdesi çizgiye otursun ve KUYRUĞU
           çizginin altında açıkça görünsün (en derin kuyruk .44em). */
        .ab-tb-satir { position: relative; }
        .ab-tb-satir::after {
            content: ""; position: absolute; left: 102px; right: 10px;
            bottom: calc(3px + .47em);
            height: 2px; background: rgba(15, 23, 42, .16); pointer-events: none;
        }
        .ab-tb-satir.ab-tb-kirmizi::after { background: rgba(220, 38, 38, .26); }

        /* ETKİN KELİMENİN HARFLERİ — tablonun en üstünde, vurgulu.
           Sıralama animasyonu FLIP ile JS'te yapılıyor (bkz.
           alfabe_birlestir.js → tabloSirala); burada yalnız görünüm var. */
        .ab-tb-satir.ab-tb-odak {
            background: #eefaf6;
            box-shadow: inset 4px 0 0 #16A085;
        }
        .ab-tb-satir.ab-tb-odak .ab-tb-ad { color: #0E6655; }
        .ab-tb-satir.ab-tb-odak .ab-tb-ad b { color: #16A085; }
        /* Satırlar kayarken üstteki satırın altındakini örtmesi için */
        .ab-tb-govde.ab-tb-kayiyor { pointer-events: none; }
        .ab-tb-govde.ab-tb-kayiyor .ab-tb-satir { position: relative; z-index: 1; }
        .ab-tb-govde.ab-tb-kayiyor .ab-tb-satir.ab-tb-odak { z-index: 2; background: #e6f7f1; }

        /* --- renk anahtarı: renk ADI değil, o renkte İÇİ DOLU daire --- */
        .ab-anahtar {
            flex: none; margin: 0 auto; display: flex; flex-wrap: wrap;
            /* "Sonrakiyle Birleşmeyen" uzun bir etiket: 22px boşlukla
               anahtar kabına ancak 2px payla sığıyordu. 16px'e indirildi,
               pay 32px oldu — tablo katlıyken (olağan durum) anahtar
               1280'den 1600'e kadar TEK satırda kalır. Tablo açıkken
               sağdaki sütun yarıya indiği için iki satıra sarar. */
            align-items: center; justify-content: center; gap: 6px 16px;
            font-size: 1.35rem; font-weight: 700;
            background: #fff; border: 1px solid #dbe3ea; border-radius: 12px;
            padding: 9px 16px; box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
        }
        .ab-anahtar > b { color: #475569; font-weight: 800; }
        .ab-et { display: inline-flex; align-items: center; gap: 7px; }
        /* daire currentColor ile boyanır: ab-c-* sınıfı yetiyor */
        .ab-daire {
            width: 1.05em; height: 1.05em; flex: none; border-radius: 50%;
            background: currentColor; box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
        }
        .ab-et-yazi { color: #475569; font-weight: 700; }

        /* --- kâğıtlık: soruların TAMAMI burada, dikey kaydırılır --- */
        .ab-kagitlik {
            flex: 1 1 auto; min-height: 0; overflow: auto;
            -webkit-overflow-scrolling: touch; padding: 4px 0 8px;
        }
        .ab-liste {
            width: 100%; margin: 0 auto;
            background: #fff; border: 1px solid #d7dee6; border-radius: 14px;
            box-shadow: 0 10px 26px rgba(15, 23, 42, .13);
            padding: 6px 18px 14px;
        }

        /* SATIR: [adım tahtası] [ayrık harfler] [sıra no] — numara SAĞDA */
        .ab-satir {
            display: grid; align-items: stretch;
            grid-template-columns: minmax(0, 1fr) auto auto;
            gap: 0 18px; min-height: 132px; padding: 8px 0;
            border-bottom: 2px dashed #eef2f6;
            transition: background .25s;
        }
        .ab-satir:last-child { border-bottom: 0; }
        .ab-satir.ab-aktif { background: linear-gradient(180deg, #f6fdfb, #eefaf6); border-radius: 12px; }
        .ab-satir.ab-gecmis { opacity: .72; }
        .ab-satir.ab-gir { animation: abKay .42s cubic-bezier(.22,.9,.3,1) both; }
        @keyframes abKay {
            from { opacity: 0; transform: translateY(26px); }
            to   { opacity: 1; transform: none; }
        }

        /* sıra numarası + anlam — SAĞDA */
        .ab-sag {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 6px; padding-left: 16px; border-left: 2px dashed #e2e8f0; min-width: 96px;
        }
        .ab-no {
            width: 44px; height: 44px; flex: none; border-radius: 50%;
            background: #16A085; color: #fff; font-weight: 800; font-size: 1.2rem;
            display: flex; align-items: center; justify-content: center;
        }
        .ab-satir.ab-aktif .ab-no { background: #0E6655; box-shadow: 0 0 0 5px rgba(22, 160, 133, .18); }

        /* İKİ ALAN DA YAZI ÇİZGİSİ ÜSTÜNDE ve AYNI PUNTODA.
           Harfler çizginin üstüne oturur (align-items: flex-end),
           "İleri" bastıkça yenisi çizginin üstünde belirir. */
        /* İKİ ALAN DA aynı ölçüde: kabın font ölçüsü = harf ölçüsü, böylece
           çizgi em ile taban çizgisine oturtulabiliyor.
           Taban çizgisi harf kutusunun altından .266em yukarıda; kutunun
           altında .30em iç boşluk var → taban, kabın altından .566em.
           Çizgiyi .50em'e, yani tabanın biraz ALTINA koyuyoruz: gövde
           çizgiye oturur, KUYRUK (en derini .44em) çizginin altında
           tamamen görünür. */
        .ab-cizgili {
            position: relative; direction: rtl; font-size: var(--ab-punto);
            display: flex; align-items: flex-end; min-height: 1.52em;
            padding: 0 .12em .30em;
        }
        .ab-cizgili::before {
            content: ""; position: absolute; left: .06em; right: .06em; bottom: .50em;
            height: 3px; background: rgba(15, 23, 42, .3); border-radius: 2px;
        }
        /* Kelime tahtanın ORTASINDA kurulur: sağa yaslı dururken sayfa
           dengesiz görünüyordu. */
        .ab-tahta { justify-content: center; flex: 1 1 auto; min-width: 0; border-radius: 10px; }
        .ab-satir.ab-aktif .ab-tahta { cursor: pointer; }
        .ab-kaynak { justify-content: flex-end; gap: .2em; flex: none; }
        .ab-kaynak::before { background: rgba(15, 23, 42, .14); }

        /* line-height:1 ŞART: son adımda dizi blok akışına geçiyor ve
           kalıtılan satır yüksekliği kutuyu büyütüp ÇİZGİYİ KAYDIRIYORDU.
           1 yapınca iki adımda da kutu tam 1em kalıyor, çizgi sabit. */
        .ab-dizi { display: flex; align-items: flex-end; gap: .2em; direction: rtl; line-height: 1; }
        .ab-dizi.ab-bitisik { gap: 0; display: block; white-space: nowrap; line-height: 1; }
        .ab-bos-dizi { min-height: 1em; }
        /* AYNI PUNTO: ayrık harfler de birleşen kelime de bu ölçüde */
        /* AYNI PUNTO: harfler kabın ölçüsünü aynen alır (1em)
           KALINLIK: 700 isteniyordu ama Arapça yazı tipinin gerçek bir
           "bold" kesimi yok; tarayıcı SENTETİK kalınlaştırma (faux bold)
           uygulayıp harfleri bazı cihazlarda hamurlaştırıyordu. Ağırlık
           normale çekildi ve font-synthesis kapatıldı: tarayıcı kendiliğinden
           kalınlaştıramaz, harf her cihazda tipin kendi çizgisiyle çıkar. */
        .ab-p, .ab-kh {
            display: inline-block; line-height: 1; font-weight: 400;
            font-size: 1em;
            font-synthesis: none; -webkit-font-synthesis: none;
            font-synthesis-weight: none;
            -webkit-text-stroke: 0;
            paint-order: stroke fill;
        }
        /* Birleşik adımda parçalar SATIR İÇİ kalır ki tarayıcı harfleri
           gerçek kelime gibi birbirine bağlasın. */
        .ab-bitisik .ab-p { display: inline; }
        /* İLK BELİRME: harf ekrana yeni geliyor → yumuşakça belirir. */
        .ab-yeni { animation: abGel .34s ease-out both; }
        @keyframes abGel {
            from { opacity: 0; transform: translateY(-9px) scale(.72); }
            to   { opacity: 1; transform: none; }
        }
        /* BİÇİM DEĞİŞİMİ (س → سـ): harf zaten ekranda, KAYBOLMAZ.
           Opaklığa hiç dokunulmaz; yalnız kısa bir esneme ile "değiştim"
           der. Böylece göz harfi takip etmeye devam eder. */
        .ab-donusum { animation: abDonus .3s cubic-bezier(.34, 1.42, .5, 1) both; }
        @keyframes abDonus {
            0%   { transform: scale(1); }
            42%  { transform: scale(1.11); }
            100% { transform: scale(1); }
        }
        @media (prefers-reduced-motion: reduce) {
            .ab-yeni, .ab-donusum { animation: none; }
        }

        /* .ab-anlam kaldırıldı: kelime tamamlanınca Türkçe anlamı artık
           gösterilmiyor (bkz. alfabe_birlestir.js → satirHtml). */

        /* --- alt kumanda şeridi --- */
        /* KUMANDA EN SAĞDA: öğretmen tahtanın başındayken slaytı sağ alt
           köşeden çevirir; ekranın ortasına uzanmak zorunda kalmaz. İleri
           düğmesi en dışta durur, yani en kolay ulaşılan yerde. Sayaç
           düğmelerin solunda kalır. */
        .ab-serit {
            flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 14px;
            background: var(--bg-glass); border: 1px solid #cbd5e1; border-radius: 12px;
            padding: 8px 14px; box-shadow: var(--shadow-sm);
        }
        .ab-nav {
            font-family: inherit; font-size: 1.02rem; cursor: pointer;
            color: #fff; border: 0; border-radius: 10px; padding: 9px 20px; background: #16A085;
            box-shadow: 0 2px 8px rgba(22, 160, 133, .32); transition: .16s;
        }
        .ab-nav:hover:not(:disabled) { background: #117A65; transform: translateY(-1px); }
        .ab-nav.ab-geri { background: #94a3b8; box-shadow: none; }
        .ab-nav:disabled { opacity: .35; cursor: default; transform: none; }
        .ab-durum {
            display: flex; flex-direction: column; align-items: center; line-height: 1.25;
            min-width: 112px; color: #475569;
        }
        .ab-d-ornek { font-size: 1.2rem; color: #0E6655; }
        .ab-d-adim  { font-size: .82rem; color: #94a3b8; }

        /* Oklar CSS ile çizilir: ▶ karakteri bazı cihazlarda emoji
           olarak çıkıp düğmenin rengini bozuyordu. */
        .ab-ok { display: inline-block; width: 0; height: 0; border-style: solid; vertical-align: middle; }
        .ab-ok-sag { border-width: 6px 0 6px 9px; border-color: transparent transparent transparent currentColor; }
        .ab-ok-sol { border-width: 6px 9px 6px 0; border-color: transparent currentColor transparent transparent; }

        /* --- 5 RENK: harfin nasıl yazılacağını çocuğa renk söyler --- */
        .ab-c-yesil   { color: #16a34a; }
        .ab-c-mavi    { color: #2563eb; }
        .ab-c-mor     { color: #9333ea; }
        .ab-c-siyah   { color: #111827; }
        .ab-c-kirmizi { color: #dc2626; }

        /* --- orta ekran: punto biraz iner --- */
        @media (max-width: 1400px) {
            .ab-sar { --ab-punto: 4.3rem; }
            .ab-satir { min-height: 116px; gap: 0 12px; }
        }
        @media (max-width: 1100px) {
            .ab-sar { --ab-punto: 3.3rem; }
            .ab-satir { min-height: 98px; }
            .ab-liste { padding: 6px 12px; }
            .ab-tb-baslik, .ab-tb-satir { grid-template-columns: 70px repeat(4, minmax(0, 1fr)); }
            .ab-sar.ab-tablo-kapali.ab-katlaniyor .ab-tb-baslik {
                grid-template-columns: 70px repeat(4, minmax(0, 1fr));
            }
            .ab-tb-satir::after { left: 76px; }
            .ab-tb-ad { font-size: 1.15rem; }
            .ab-tb-ad b { font-size: 1rem; }
            .ab-tb-baslik { font-size: 1.05rem; }
            .ab-tb-svg { width: 60px; height: 48px; }
        }
        /* --- dar ekran: tablo üstte yatay bir şeride iner --- */
        @media (max-width: 860px) {
            .ab-sar { flex-direction: column; padding: 8px 8px 10px; }
            .ab-tablo { flex: 0 0 auto; max-height: 38vh; }
            .ab-tb-svg { width: 58px; height: 46px; }
            .ab-anahtar { font-size: 1rem; gap: 4px 12px; padding: 7px 10px; }
            .ab-liste { padding: 4px 10px; }
            .ab-satir {
                grid-template-columns: minmax(0, 1fr) auto;
                grid-template-areas: "tahta sag" "kaynak sag";
                min-height: 120px; gap: 4px 10px;
            }
            .ab-tahta  { grid-area: tahta; }
            .ab-kaynak { grid-area: kaynak; justify-content: flex-end; gap: 10px; }
            .ab-sag    { grid-area: sag; min-width: 62px; padding-left: 8px; }
            .ab-no { width: 34px; height: 34px; font-size: 1rem; }
            .ab-sar { --ab-punto: 2.55rem; }
            .ab-nav { font-size: .9rem; padding: 8px 14px; }
        }

        /* --- YAZDIRMA: bu sekme slayttır, kâğıda basılmaz --- */
        @media print {
            .ab-serit, .ab-tablo { display: none !important; }
            .ab-satir { display: grid !important; }   /* çıktı alınırsa hepsi görünsün */
        }



/* ============================================================
   DİNLE VE YAZ SEKMESİ (p7)
   ------------------------------------------------------------
   Oyun kendi sayfasında (dinleveyaz.html) yaşar, burada yalnız
   çerçevelenir. Ayrı belge olduğu için iki sayfanın CSS'i
   birbirine hiç karışmaz; oyun tek yerden bakılıp güncellenir.
   ============================================================ */
        #p7 { height: 100%; }
        .dvy-cerceve {
            display: block; width: 100%; height: 100%; border: 0;
            border-radius: 12px; background: #fff;
        }

/* ============================================================
   KARTLAR SEKMESİ (p2) — iki mod
   ------------------------------------------------------------
   "Harf adı": önde harf, arkada adı.  "Yazılış yeri": önde ـك
   gibi bağlı biçim, arkada "Sonda" ve harfin adı. Renkler Harf
   Birleştirme'yle ORTAK: yeşil başta, mavi ortada, mor sonda.
   ============================================================ */
        /* DİKKAT: kimlik seçicisi .panel'den güçlüdür; burada display
           verilirse sekme kapalıyken de görünür. O yüzden YALNIZ .active
           durumunda tanımlanır. */
        #p2.active { display: flex; flex-direction: column; }
        /* .grid-flip'in height:100%'ü mod şeridini hesaba katmadığı için
           ızgara panelden taşıyor, alt sıra kırpılmış/ezilmiş görünüyordu.
           Burada kalan alanı kadar uzuyor. */
        #p2.active > .grid-flip { flex: 1 1 auto; height: auto; min-height: 0; }
        .kart-mod {
            flex: none; display: flex; justify-content: center; gap: 9px;
            flex-wrap: wrap; align-items: center;
            padding: 6px 0 10px;
        }
        .km-hap {
            padding: 9px 22px; border-radius: 999px; cursor: pointer;
            border: 1.5px solid #cfd8e3; background: #fff; color: #475569;
            font-family: inherit; font-weight: 700; font-size: 1rem;
            transition: background .16s, color .16s, border-color .16s, transform .12s;
        }
        .km-hap:hover { border-color: #16A085; color: #117A65; transform: translateY(-1px); }
        .km-hap.aktif {
            background: linear-gradient(135deg, #20C997, #16A085); color: #fff;
            border-color: transparent; box-shadow: 0 4px 12px rgba(22, 160, 133, .32);
        }
        /* TURLAR — "Yazılış yeri" modunda 72 kart çıkıyor; hepsi tek
           ızgaraya basılırsa satırlar dikeyde eziliyordu. Kartlar artık
           tura bölünüp oklarla geziliyor; tek tur varsa şerit gizli
           (JS inline display ile açar/kapar). */
        .km-tur {
            display: none; align-items: center; gap: 5px; margin-inline-start: 8px;
            background: #fff; border: 1.5px solid #cfd8e3; border-radius: 999px;
            padding: 3px 7px; box-shadow: 0 3px 9px rgba(23, 43, 77, .07);
        }
        .km-ok {
            width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
            background: #EAF6F2; color: #117A65; font-size: 1.3rem; font-weight: 900;
            line-height: 1; display: flex; align-items: center; justify-content: center;
            font-family: inherit; transition: background .15s, color .15s, transform .1s;
        }
        .km-ok:hover { background: #20C997; color: #fff; }
        .km-ok:active { transform: scale(.9); }
        .km-tur-yazi {
            font-size: .86rem; font-weight: 800; color: #475569;
            min-width: 76px; text-align: center; letter-spacing: .02em;
        }

        /* yazılış kartı: ön yüz bağlı biçim, arka yüz yer + harf adı */
        .face-yer { font-family: 'ArapcaKom', 'Traditional Arabic', serif; }
        .face-yer-arka { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1.15; }
        .face-yer-arka b { font-size: 1em; }
        .face-yer-arka span { font-size: .52em; opacity: .78; font-weight: 600; }

/* ============================================================
   YARIŞMA (p4) — soruda gösterilecek yazılış seçimi
   ============================================================ */
        .ys-bicim {
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            background: #fff; border: 1px solid #E9EEF5; border-radius: 18px;
            padding: 12px 20px; box-shadow: 0 6px 16px rgba(23, 43, 77, .07);
        }
        .ys-bas { font-size: .82rem; font-weight: 800; letter-spacing: .05em;
                  text-transform: uppercase; color: #94a3b8; }
        .ys-cipler { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
        .ys-cip {
            display: flex; flex-direction: column; align-items: center; gap: 1px;
            min-width: 76px; padding: 8px 14px; border-radius: 13px; cursor: pointer;
            border: 1.5px solid #cfd8e3; background: #fff; color: #475569;
            font-family: inherit; transition: .16s;
        }
        .ys-cip b { font-family: 'ArapcaKom', 'Traditional Arabic', serif; font-size: 1.9rem; line-height: 1.1; }
        .ys-cip span { font-size: .78rem; font-weight: 700; }
        .ys-cip:hover { border-color: #16A085; transform: translateY(-1px); }
        .ys-cip.acik {
            background: linear-gradient(135deg, #20C997, #16A085); color: #fff;
            border-color: transparent; box-shadow: 0 4px 12px rgba(22, 160, 133, .3);
        }
        /* "Yazılış yeri" seçilince açılan alt kutu. [hidden] display:flex'i
           yenemediği için ayrıca yazılıyor. */
        .ys-yer {
            display: flex; flex-direction: column; align-items: center; gap: 7px;
            width: 100%; margin-top: 3px; padding-top: 10px;
            border-top: 1px dashed #E2E8F0;
        }
        .ys-yer[hidden] { display: none; }

        /* Soru bir CÜMLE olduğunda (Şın harfinin baştaki yazılışı hangisidir?)
           9rem'lik harf puntosu taşar; cümle puntosu ekrana göre küçülür.
           Şıklar ise harf olduğu için TAM TERSİ: büyür. */
        .q-display.q-cumle {
            font-size: clamp(1.25rem, 2.4vw, 2.4rem); line-height: 1.28;
            font-weight: 800; max-width: 94%; text-align: center;
            text-shadow: none; word-break: break-word;
        }
        .btn-ans.btn-harf {
            font-family: 'ArapcaKom', 'Traditional Arabic', 'arakom', serif;
            font-size: clamp(2.4rem, 4.6vw, 4.4rem); line-height: 1.1;
            direction: rtl; padding: 4px 8px;
        }

        /* ==========================================================
           SINAV SEKMESİ (p6)
           ----------------------------------------------------------
           Dokuz soru tipi tek bir kart içinde döner: testler
           (.as-siklar), eşleştirme (.as-esalan) ve boşluk doldurma
           (.as-kelimekutu + uçan harf .as-ucan).
           Renk sınıfları (ab-c-yesil vb.) Harf Birleştirme
           sekmesiyle ORTAKTIR; çocuk iki sekmede aynı rengi görsün.
           ========================================================== */
        /* SINIF TAHTASI ÖLÇÜSÜ: soru kartı 720 px'e sıkışmıyor, ekranın
           tamamını kullanıyor. Genişlik tek yerden: --as-en. */
        #p6 { height: 100%; }
        .as-sar {
            --as-en: min(1560px, 96vw);
            height: 100%; overflow-y: auto; overflow-x: hidden;
            padding: 12px 10px 20px; box-sizing: border-box;
            -webkit-overflow-scrolling: touch;
            display: flex; flex-direction: column;
        }

        /* --- açılış kapağı --- */
        .as-kapak {
            max-width: 620px; margin: 8px auto; padding: 22px 20px 24px;
            background: #fff; border: 1px solid #E9EEF5; border-radius: 18px;
            box-shadow: 0 10px 26px rgba(23, 43, 77, .09); text-align: center;
        }
        .as-bas {
            margin: 0 0 6px; font-size: 1.5rem; color: #117A65; font-weight: 800;
        }
        .as-alt-bas { margin: 0 0 16px; color: #64748b; font-size: .92rem; line-height: 1.5; }
        /* Soru tipi / soru sayısı seçicileri KALDIRILDI: sınav artık sabit
           tur düzeninde ilerliyor (20 soru x 5 puan = 100). Kapakta yalnız
           kuralı anlatan not ve tipler listesi var. */
        .as-turnot {
            margin: 4px 0 14px; padding: 11px 14px; border-radius: 12px;
            background: #F2FBF8; border: 1px dashed #A9DFD3; color: #117A65;
            font-size: .88rem; line-height: 1.5;
        }
        .as-turliste {
            margin: 0 0 18px; padding: 0 0 0 22px; text-align: start;
            columns: 2; column-gap: 20px; color: #64748b; font-size: .84rem; line-height: 1.75;
        }
        .as-turliste li { break-inside: avoid; }
        @media (max-width: 560px) { .as-turliste { columns: 1; } }
        .as-t {
            padding: 10px 20px; border-radius: 12px; cursor: pointer; font-family: inherit;
            font-size: .98rem; font-weight: 700; border: 1.5px solid #16A085;
            background: #fff; color: #117A65;
            transition: background .16s, color .16s, transform .12s;
        }
        .as-t:hover { background: #16A085; color: #fff; transform: translateY(-1px); }
        .as-basla {
            margin-top: 20px; padding: 12px 34px; font-size: 1.05rem;
            background: #16A085; color: #fff;
            box-shadow: 0 6px 16px rgba(22, 160, 133, .3);
        }
        .as-basla:hover { background: #117A65; border-color: #117A65; }

        /* --- soru kartı --- */
        .as-bar {
            width: var(--as-en); margin: 0 auto 12px; height: 9px; border-radius: 99px;
            background: #E9EEF5; overflow: hidden;
        }
        .as-bar i {
            display: block; height: 100%; border-radius: 99px;
            background: linear-gradient(90deg, #16A085, #E67E22);
            transition: width .35s ease;
        }
        .as-ust {
            width: var(--as-en); margin: 0 auto 8px; display: flex;
            align-items: center; justify-content: space-between; gap: 10px;
        }
        .as-no { font-size: 1.3rem; font-weight: 800; color: #117A65; }
        .as-tipad {
            font-size: 1.05rem; color: #64748b; background: #EDF2F8;
            padding: 5px 14px; border-radius: 99px;
        }
        /* SORU CÜMLESİ — sınıfın en arkasından okunacak punto (~8rem).
           Cümleler bu yüzden alfabe_sinav.js'te KISA yazılmıştır. */
        .as-metin {
            width: var(--as-en); margin: 0 auto 14px; padding: 14px 22px;
            background: #fff; border: 1px solid #E9EEF5; border-radius: 18px;
            color: #1f2937; font-size: min(8rem, 6.4vw, 15vh); line-height: 1.14; font-weight: 700;
            text-align: center;
        }
        .as-metin b { color: #E67E22; }
        .as-ipucu {
            width: var(--as-en); margin: 0 auto 10px; font-size: 1.1rem;
            color: #64748b; text-align: center;
        }
        .as-ipucu b { color: #117A65; }

        /* --- 9. tip: kelime kutusu --- */
        .as-kelimekutu {
            position: relative; width: var(--as-en); margin: 0 auto 12px;
            padding: 14px 14px 10px; text-align: center;
            background: #E6FAF5; border: 1.5px dashed #16A085; border-radius: 16px;
        }
        .as-kelime {
            display: inline-block; direction: rtl; unicode-bidi: isolate;
            font-family: 'ArapcaKom', 'Traditional Arabic', serif;
            font-size: 6rem; line-height: 1.45;
        }
        .as-kelime .as-kp { display: inline-block; margin: 0 .06em; }
        .as-bitisik .as-kp { display: inline; margin: 0; }
        .as-kp-yeni { animation: asGel .5s ease; }
        @keyframes asGel {
            from { transform: scale(.5); opacity: 0; }
            to   { transform: scale(1);  opacity: 1; }
        }
        /* Boşluk: harfin oturacagi yer. Icindeki tatvil sadece genislik
           versin diye saydam birakilir; kutunun boyu sabittir. */
        .as-bosluk {
            display: inline-block; width: 1.05em; height: .58em;
            margin: 0 .05em; vertical-align: -.02em; overflow: hidden;
            color: transparent; line-height: 0;
            background: rgba(230, 126, 34, .13);
            border: 2px dashed #E67E22; border-radius: 8px;
            animation: asYanip 1.6s ease-in-out infinite;
        }
        @keyframes asYanip {
            0%, 100% { background: rgba(230, 126, 34, .13); }
            50%      { background: rgba(230, 126, 34, .28); }
        }
        .as-anlam {
            display: block; margin-top: 6px; direction: ltr;
            font-family: inherit; font-size: 1.2rem; color: #64748b;
        }
        .as-ucan {
            position: absolute; z-index: 5; pointer-events: none;
            display: flex; align-items: center; justify-content: center;
            font-family: 'ArapcaKom', 'Traditional Arabic', serif;
            font-size: 4.6rem; opacity: .95;
            transition: transform .9s cubic-bezier(.34, 1.3, .5, 1), opacity .3s ease;
        }

        /* --- test şıkları --- */
        .as-siklar {
            width: var(--as-en); margin: 0 auto; display: grid; gap: 14px;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            flex: 1 1 auto; align-content: center;
        }
        .as-sik {
            display: flex; align-items: center; gap: 10px; cursor: pointer;
            padding: 10px 18px; min-height: 118px; text-align: right;
            background: #fff; border: 1.5px solid #cfd8e3; border-radius: 14px;
            font-family: inherit; transition: border-color .16s, background .16s, transform .12s;
        }
        .as-sik:hover:not(:disabled) { border-color: #16A085; transform: translateY(-2px); }
        .as-sik:disabled { cursor: default; }
        .as-mark {
            flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            background: #EDF2F8; color: #64748b; font-size: 1.4rem; font-weight: 800;
        }
        .as-ic {
            flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
            flex-wrap: wrap; gap: 4px; direction: rtl;
        }
        .as-h {
            font-family: 'ArapcaKom', 'Traditional Arabic', serif;
            font-size: 4.6rem; line-height: 1.2; color: #1f2937;
        }
        .as-ayrac { color: #A9B7C3; font-family: inherit; font-size: 1.7rem; margin: 0 10px; }
        /* ÇİZGİDEKİ YAZILIŞLAR — çizgi ARTIK HER HARFİN ALTINDA DEĞİL,
           üçünün altından geçen TEK bir yazı çizgisi ve TAM TABAN
           ÇİZGİSİNDE. Eskiden çizgi kutu altındaydı; ج ح م gibi kuyruklu
           harflerde kuyruk çizginin altında kalmıyor, yazılış yanlış
           görünüyordu. Ölçüm (bkz. .ab-cizgili): taban, kutu altından
           .266em yukarıda; .30em iç boşlukla kabın altından .566em eder.
           Çizgi .50em'e, tabanın biraz altına konur → gövde çizgiye
           oturur, kuyruk çizginin ALTINDA görünür. */
        .as-uclu {
            position: relative; display: flex; gap: .18em; direction: rtl;
            align-items: flex-end; font-size: 3.8rem; line-height: 1;
            padding: 0 .12em .30em;
        }
        .as-uclu::before {
            content: ""; position: absolute; left: .04em; right: .04em; bottom: .50em;
            height: 3px; background: #cbd5e1; border-radius: 2px;
        }
        .as-bic {
            font-family: 'ArapcaKom', 'Traditional Arabic', serif;
            font-size: 3.8rem; line-height: 1.3; color: #1f2937;
            padding: 0 6px;
        }
        .as-uclu .as-bic {
            font-size: 1em; line-height: 1; padding: 0 .05em; display: inline-block;
        }
        /* ÇELDİRİCİ = ÇİZGİYE GÖRE KONUM HATASI. Harfin kendi çizimi
           doğrudur; yanlış olan çizgiye göre DURDUĞU YER. transform
           kullanılır: kutu yerinde kalır, satır düzeni bozulmaz.
           Yanlış şıkta ÜÇ biçim de aynı miktarda kayar (bkz.
           alfabe_sinav.js → KONUM_HATA); üçü birden kaydığı için işaret
           güçlüdür ve kaydırma az tutulur — harf çizginin aşırı altına
           ya da üstüne düşmez, yalnız çizgiye oturmadığı görülür. */
        .as-uclu .as-bic.as-havada { transform: translateY(-.17em); }  /* kuyruk çizgiye inmemiş */
        .as-uclu .as-bic.as-batik  { transform: translateY(.14em); }   /* gövde çizginin altında */
        .as-bic-b { font-size: 4.8rem; }
        /* SINAVDAKİ HARFLER KALIN DEĞİL. Arapça yazı tipinin gerçek bir
           kalın kesimi olmadığı için tarayıcı sentetik kalınlaştırma
           yapabiliyor ve harfler bazı cihazlarda hamurlaşıyordu; hem
           ağırlık normale sabitlendi hem sentez kapatıldı. */
        .as-h, .as-bic, .as-kelime, .as-es, .as-ucan, .as-harf, .as-kesik {
            font-weight: 400;
            font-synthesis: none; -webkit-font-synthesis: none;
            font-synthesis-weight: none; -webkit-text-stroke: 0;
        }

        .as-etiket {
            display: block; width: 100%; direction: ltr; text-align: center;
            font-family: inherit; font-size: 1.05rem; color: #94a3b8; margin-top: 2px;
        }
        .as-sik.as-dogru { border-color: #16A085; background: #E6FAF5; }
        .as-sik.as-dogru .as-mark { background: #16A085; color: #fff; }
        .as-sik.as-yanlis { border-color: #EF5350; background: #FDECEA; }
        .as-sik.as-yanlis .as-mark { background: #EF5350; color: #fff; }

        /* --- eşleştirme --- */
        .as-esalan {
            width: min(900px, 92vw); margin: 0 auto; display: grid; gap: 12px 44px;
            grid-template-columns: 1fr 1fr; flex: 1 1 auto; align-content: center;
        }
        .as-sutun { display: grid; gap: 10px; }
        .as-es {
            padding: 4px; cursor: pointer; background: #fff; min-height: 0;
            border: 1.5px solid #cfd8e3; border-radius: 14px;
            font-family: 'ArapcaKom', 'Traditional Arabic', serif;
            font-size: 4.4rem; line-height: 1.2; color: #1f2937;
            transition: border-color .16s, background .16s, transform .12s;
        }
        .as-es:hover { border-color: #16A085; transform: translateY(-2px); }
        .as-es.as-secili {
            border-color: #E67E22; background: #FFF3E0;
            box-shadow: 0 0 0 3px rgba(230, 126, 34, .18);
        }
        .as-es.as-dogru { border-color: #16A085; background: #E6FAF5; color: #117A65; }
        .as-es.as-kilit { cursor: default; pointer-events: none; }
        /* Eslesen ikiliye ayni numara ve ayni ton verilir ki cocuk
           hangisinin hangisiyle eslestigini sonradan da gorebilsin. */
        .as-es[data-cift] { position: relative; }
        .as-es[data-cift]::after {
            content: attr(data-cift); position: absolute; top: 4px; inset-inline-start: 6px;
            width: 18px; height: 18px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-family: inherit; font-size: .68rem; font-weight: 800; color: #fff;
        }
        .as-es[data-cift="1"] { background: #E6FAF5; border-color: #16A085; color: #117A65; }
        .as-es[data-cift="1"]::after { background: #16A085; }
        .as-es[data-cift="2"] { background: #EEF2FF; border-color: #6366F1; color: #4338CA; }
        .as-es[data-cift="2"]::after { background: #6366F1; }
        .as-es[data-cift="3"] { background: #FFF3E0; border-color: #E67E22; color: #B35309; }
        .as-es[data-cift="3"]::after { background: #E67E22; }
        .as-es[data-cift="4"] { background: #FDF2FA; border-color: #C026D3; color: #86198F; }
        .as-es[data-cift="4"]::after { background: #C026D3; }
        .as-es.as-titre { animation: asTitre .4s ease; border-color: #EF5350; background: #FDECEA; }
        @keyframes asTitre {
            0%, 100% { transform: translateX(0); }
            25%      { transform: translateX(-6px); }
            75%      { transform: translateX(6px); }
        }

        /* --- geri bildirim + alt düğmeler --- */
        .as-geri-bildirim {
            max-width: 720px; margin: 12px auto 0; min-height: 0;
            font-size: .92rem; line-height: 1.5; border-radius: 12px;
        }
        .as-geri-bildirim.as-iyi {
            padding: 10px 13px; background: #E6FAF5; color: #117A65;
            border: 1px solid #16A085;
        }
        .as-geri-bildirim.as-kotu {
            padding: 10px 13px; background: #FDECEA; color: #B03A2E;
            border: 1px solid #EF5350;
        }
        .as-geri-bildirim.as-orta {
            padding: 10px 13px; background: #FFF3E0; color: #B35309;
            border: 1px solid #E67E22;
        }
        .as-alt {
            max-width: 720px; margin: 14px auto 0; display: flex;
            gap: 10px; justify-content: center; flex-wrap: wrap;
        }
        .as-ileri { background: #E67E22; border-color: #E67E22; color: #fff; }
        .as-ileri:hover { background: #D35400; border-color: #D35400; }
        .as-ileri .ab-ok { border-left-color: #fff; }
        .as-sonraki { background: #16A085; border-color: #16A085; color: #fff; }
        .as-sonraki:hover { background: #117A65; border-color: #117A65; }
        .as-bitir { border-color: #cfd8e3; color: #94a3b8; }
        .as-bitir:hover { background: #94a3b8; border-color: #94a3b8; color: #fff; }

        /* --- sonuç kartı --- */
        .as-sonkart {
            max-width: 480px; margin: 18px auto; padding: 26px 20px 24px;
            background: #fff; border: 1px solid #E9EEF5; border-radius: 18px;
            box-shadow: 0 10px 26px rgba(23, 43, 77, .09); text-align: center;
        }
        .as-sonbas { font-size: 1.3rem; font-weight: 800; color: #117A65; margin-bottom: 16px; }
        .as-halka {
            width: 132px; height: 132px; margin: 0 auto 14px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: conic-gradient(#16A085 calc(var(--p) * 1%), #E9EEF5 0);
        }
        .as-halka span {
            width: 102px; height: 102px; border-radius: 50%; background: #fff;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; font-weight: 800; color: #117A65;
        }
        .as-sonsay { font-size: 1rem; font-weight: 700; color: #475569; }
        .as-sonsoz { margin-top: 8px; font-size: .9rem; color: #64748b; line-height: 1.55; }

        /* --- orta ekran: punto kademeli iner, düzen bozulmaz --- */
        @media (max-width: 1400px) {
            .as-metin { font-size: min(6rem, 5.7vw, 12.5vh); padding: 10px 16px; margin-bottom: 10px; }
            .as-h  { font-size: 3.6rem; }
            .as-uclu { font-size: 3rem; }
            .as-bic-b { font-size: 3.7rem; }
            .as-es { font-size: 3.2rem; }
            .as-kelime { font-size: 4.4rem; line-height: 1.35; }
            .as-kelimekutu { padding: 10px 12px 8px; margin-bottom: 10px; }
            .as-sik { min-height: 92px; }
            .as-esalan { gap: 9px 34px; }
        }
        @media (max-width: 1050px) {
            .as-metin { font-size: min(4rem, 7vw, 13vh); }
            .as-h  { font-size: 3rem; }
            .as-uclu { font-size: 2.5rem; }
            .as-bic-b { font-size: 3.1rem; }
            .as-es { font-size: 2.9rem; }
            .as-kelime { font-size: 4rem; }
            .as-sik { min-height: 86px; }
        }

        /* --- küçük ekran --- */
        @media (max-width: 640px) {
            .as-metin { font-size: 2.4rem; padding: 10px 14px; }
            .as-siklar { grid-template-columns: 1fr; }
            .as-kelime { font-size: 2.6rem; }
            .as-h { font-size: 2rem; }
            .as-bic { font-size: 1.7rem; }
            .as-bic-b { font-size: 2.1rem; }
            .as-es { font-size: 1.9rem; }
            .as-esalan { gap: 16px; }
            .as-kapak { padding: 18px 14px 20px; }
        }

/* ============================================================
   KART MODU ŞERİDİ — DAR EKRAN
   Bu blok DOSYANIN SONUNDA duruyor: .kart-mod / .km-* temel
   tanımları yukarıdaki 768px medya bloğundan SONRA geldiği için
   orada yazılan kurallar eziliyordu (medya sorgusu özgüllük
   eklemez, sırayı değiştirmez).
   ============================================================ */
        @media (max-width: 768px) {
            /* Yüzen kumanda varsayılan olarak sol üstte durur; "Harf adı"
               hapı onun altında kalıyordu. Şerit sağa kayar, sığmazsa
               alt satıra iner. */
            .kart-mod { padding-left: 104px; row-gap: 7px; }
            .km-tur { margin-inline-start: 0; padding: 2px 5px; }
            .km-ok { width: 26px; height: 26px; font-size: 1.1rem; }
            .km-tur-yazi { font-size: .74rem; min-width: 58px; }
        }