@charset "UTF-8";

/* =============================================================================
   aitercih.tr — tasarım sistemi ve arayüz stilleri
   -----------------------------------------------------------------------------
   YÖN: modern AI ürünü. Sıcak beyaz zemin, elektrik moru (indigo) vurgu, koyu
   mürekkep metin, katmanlı yumuşak gölgeler, karışık köşe yarıçapları.

   MOBİL ÖNCELİKLİ (bağlayıcı gereksinim): tüm temel kurallar 360-430px için
   yazılır; @media (min-width: …) blokları masaüstü GENİŞLETMESİDİR. Dokunulan
   her hedef en az --dokunma (44px) yüksekliktedir.

   İMZA: "sıra". Bu ürünün konusu 24 satırlık SIRALI bir listedir; numaralandırma
   burada süs değil, bilginin kendisidir. Bu yüzden (a) kahramanda 24 tercih hakkı
   bir şerit olarak çizilir, (b) tercih panelindeki liste CSS sayaçlarıyla iri,
   dairesel numaralar taşır, (c) sayfanın üç bölümü "1/2/3. Adım" rozetleriyle
   gerçek bir sıra olarak işaretlenir.

   BÖLÜMLER
     01 Token'lar            08 Filtreler + çoklu seçim
     02 Yazı tipi            09 Sonuç tablosu (mobil kart / masaüstü tablo)
     03 Temel + yardımcılar  10 YZ Etki rozeti
     04 Üst bar + düzen      11 Tercih paneli
     05 Kahraman             12 AI paneli (dialog)
     06 Bölüm + adım         13 Sohbet
     07 Kart, form, düğme    14 Dip + hareket azaltma
                             15 İkonlar + Task 10 bileşenleri (onay grupları,
                                sıralanabilir başlıklar, bildirim/toast)
   ========================================================================== */


/* ============================== 01 TOKEN'LAR ============================== */

:root {
    color-scheme: light;

    /* --- Yüzeyler --- */
    --renk-zemin:        oklch(98.5% 0.004 95);   /* sıcak beyaz (yön dokümanında sabit) */
    --renk-zemin-alt:    oklch(96.4% 0.007 95);
    --renk-yuzey:        oklch(100% 0 0);
    --renk-cizgi:        oklch(91.5% 0.008 275);
    --renk-cizgi-koyu:   oklch(85% 0.014 275);

    /* --- Metin ---
       Üç kademe de EN AÇIK yüzeyimizde (--renk-zemin-alt, %96.4) WCAG AA 4.5:1'i geçecek
       şekilde seçildi: 11-13px'lik ipucu/dipnot metinleri en açık kademeyi kullandığından
       burada "soluk gri" kaçamağı yapmak doğrudan okunabilirlik kaybı olurdu. Hiyerarşi
       açıklıktan feragat etmeden korunuyor (23% → 40% → 47%). */
    --renk-murekkep:     oklch(23% 0.028 275);    /* mora çalan koyu mürekkep */
    --renk-murekkep-2:   oklch(40% 0.024 275);
    --renk-murekkep-3:   oklch(47% 0.020 275);

    /* --- Vurgu (indigo / elektrik moru) --- */
    --renk-vurgu:        oklch(55% 0.22 275);     /* yön dokümanında sabit */
    --renk-vurgu-koyu:   oklch(45% 0.19 275);
    --renk-vurgu-acik:   oklch(72% 0.14 275);
    --renk-vurgu-fon:    oklch(96% 0.026 275);
    --renk-vurgu-fon-2:  oklch(91% 0.05 275);

    /* --- YZ Etki seviyeleri (Task 8B) — metin okunabilirliği için koyu tonlar --- */
    --renk-tehlike:      oklch(45% 0.17 27);      /* > %70 */
    --renk-tehlike-fon:  oklch(95.5% 0.032 27);
    --renk-uyari:        oklch(45% 0.11 68);      /* %50-70 */
    --renk-uyari-fon:    oklch(95.5% 0.05 82);
    --renk-guven:        oklch(43% 0.11 158);     /* < %50 */
    --renk-guven-fon:    oklch(95.5% 0.04 158);
    --renk-notr:         oklch(46% 0.012 275);    /* NULL → "—" */
    --renk-notr-fon:     oklch(96% 0.004 275);

    /* --- Yazı --- */
    --yazi-baslik: "aitercih Display", "Space Grotesk", "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
    --yazi-govde:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    --olcek-mikro: 0.6875rem;
    --olcek-kucuk: 0.8125rem;
    --olcek-metin: 0.9375rem;
    --olcek-orta:  1.0625rem;
    --olcek-h3:    clamp(1.05rem, 0.96rem + 0.45vw, 1.3rem);
    --olcek-h2:    clamp(1.5rem, 1.2rem + 1.5vw, 2.15rem);
    --olcek-h1:    clamp(2.15rem, 1.35rem + 3.7vw, 4rem);

    /* --- Boşluk --- */
    --bosluk-1: 0.25rem;
    --bosluk-2: 0.5rem;
    --bosluk-3: 0.75rem;
    --bosluk-4: 1rem;
    --bosluk-5: 1.5rem;
    --bosluk-6: 2rem;
    --bosluk-7: 3rem;
    --bosluk-bolum: clamp(2.75rem, 1.9rem + 3.6vw, 5.5rem);
    --kenar: clamp(1rem, 0.55rem + 2vw, 2.5rem);

    /* --- Köşe yarıçapı (bilinçli karışık: kart 18, kutu 14, girdi 10, çip tam) --- */
    --radius-kucuk: 10px;
    --radius-orta:  14px;
    --radius-buyuk: 18px;
    --radius-tam:   999px;

    /* --- Katmanlı gölgeler --- */
    --golge-1: 0 1px 2px oklch(30% 0.04 275 / 0.05);
    --golge-2: 0 1px 2px oklch(30% 0.04 275 / 0.05),
               0 4px 10px -3px oklch(30% 0.04 275 / 0.07),
               0 14px 30px -12px oklch(30% 0.04 275 / 0.11);
    --golge-3: 0 -1px 2px oklch(30% 0.04 275 / 0.04),
               0 -14px 44px -12px oklch(30% 0.05 275 / 0.22);
    --golge-vurgu: 0 5px 16px -6px oklch(55% 0.22 275 / 0.5);

    /* --- Geçiş --- */
    --gecis-hizli:  120ms;
    --gecis-normal: 220ms;
    --gecis-yavas:  420ms;
    --esneme: cubic-bezier(0.2, 0.85, 0.25, 1);
    --yumusak: cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Ölçüler --- */
    --dokunma: 44px;          /* en küçük dokunma hedefi */
    --ust-yukseklik: 56px;
    --panel-en: 340px;
    /* Sayfa gövdesinin tavanı. Tek sütunlu bantta 1400px; iki sütunlu bantta panel
       kadar BÜYÜR (bkz. iki sütun bloğundaki hesap) — böylece panel tabloya ayrılan
       genişliği kemirmez. --ust-ic ile aynı token'ı kullanır ki logo, içerikle hizalı
       kalsın. */
    --duzen-en: 1400px;
}


/* ============================== 02 YAZI TİPİ ==============================
   Başlık yüzü TEK bir self-host woff2 olarak beklenir (assets/fonts/display.woff2 —
   Space Grotesk ya da Sora latin subset). Dosya HENÜZ YOKSA bu @font-face zarifçe
   düşer: önce kullanıcının sisteminde kurulu bir kopya (local()) denenir, o da yoksa
   blok tamamen başarısız olur ve --yazi-baslik yığınındaki system-ui devreye girer.
   Başlıkların karakteri sadece yüzden değil, DİZGİDEN de gelir (sıkı harf aralığı,
   yüksek ağırlık, tablo rakamları) — yani font dosyası olmadan da tasarım ayakta kalır. */
@font-face {
    font-family: "aitercih Display";
    src: url("fonts/display.woff2") format("woff2"),
         local("Space Grotesk"), local("SpaceGrotesk-Regular"),
         local("Sora"), local("Sora-Regular");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF, U+2122;
}


/* ========================= 03 TEMEL + YARDIMCILAR ======================== */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` niteliği HER ZAMAN gizlesin (29 Tem, canlıda yaşandı: giriş penceresinde üç form
   AYNI ANDA görünüyordu — kullanıcı "Kayıt ol"a basmadan doğrulama kodu alanını görüyordu).
   NEDEN: `[hidden]`ın `display:none`'ı tarayıcının VARSAYILAN stil sayfasından gelir; yazar
   CSS'indeki herhangi bir `display` (ör. `.giris-form{display:grid}`, `.dugme{display:inline-flex}`)
   onu EZER ve öğe gizlenmez. Bu tuzağa proje daha önce üç yerde tek tek yama yapmıştı
   (.coklu-panel, .sohbet-pencere, .paylasim-sonuc); bu genel kural sınıfın tamamını kapatır ve
   yeni bir bileşende aynı hatanın tekrarını önler. `!important` gereklidir: kural, kendisinden
   SONRA gelen daha özgül `display` bildirimlerini de yenmelidir. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    /* `clip` (hidden DEĞİL): tek eksende kırpar ama SCROLL KAPSAYICISI OLUŞTURMAZ — böylece
       üst bardaki ve masaüstü tercih panelindeki `position: sticky` çalışmaya devam eder.
       Kahraman bölümündeki atmosfer parıltısı (.kahraman::before) kutusunun dışına taşar;
       bu kural o taşmanın sayfaya yatay kaydırma eklemesini engeller. */
    overflow-x: clip;
    padding-bottom: calc(var(--dokunma) + var(--bosluk-5) + env(safe-area-inset-bottom));
    background: var(--renk-zemin);
    color: var(--renk-murekkep);
    font-family: var(--yazi-govde);
    font-size: var(--olcek-metin);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 {
    font-family: var(--yazi-baslik);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

a { color: var(--renk-vurgu-koyu); }

svg { display: block; }

/* Odak halkası — her yerde aynı, belirgin ve zeminden bağımsız okunur. */
:focus-visible {
    outline: 3px solid var(--renk-vurgu);
    outline-offset: 2px;
    border-radius: var(--radius-kucuk);
}

.gizli-metin {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.atla {
    position: absolute;
    top: var(--bosluk-2);
    left: var(--bosluk-2);
    z-index: 100;
    padding: var(--bosluk-3) var(--bosluk-4);
    background: var(--renk-vurgu);
    color: #fff;
    border-radius: var(--radius-kucuk);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--gecis-normal) var(--esneme);
}
.atla:focus-visible { transform: translateY(0); }

.rozet {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-1);
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-tam);
    font-size: var(--olcek-mikro);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.rozet--veri {
    background: var(--renk-vurgu-fon);
    color: var(--renk-vurgu-koyu);
    box-shadow: inset 0 0 0 1px var(--renk-vurgu-fon-2);
}

.uyari-serit {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    margin: var(--bosluk-4) 0 0;
    padding: var(--bosluk-3) var(--bosluk-4);
    background: var(--renk-uyari-fon);
    color: var(--renk-uyari);
    border-radius: var(--radius-orta);
    font-weight: 600;
}


/* ========================== 04 ÜST BAR + DÜZEN ========================== */

.ust {
    position: sticky;
    top: 0;
    z-index: 30;
    background: oklch(98.5% 0.004 95 / 0.86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--renk-cizgi);
}

.ust-ic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-3);
    min-height: var(--ust-yukseklik);
    max-width: var(--duzen-en);
    margin-inline: auto;
    padding-inline: var(--kenar);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-2);
    min-height: var(--dokunma);   /* logo da bir bağlantı: dokunma hedefi 44px */
    color: var(--renk-murekkep);
    text-decoration: none;
}
.logo-im {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    border-radius: 9px;
    background: linear-gradient(150deg, var(--renk-vurgu), var(--renk-vurgu-koyu));
    color: #fff;
    box-shadow: var(--golge-vurgu);
}
.logo-im svg { width: 17px; height: 17px; fill: currentColor; }
.logo-ad {
    font-family: var(--yazi-baslik);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.logo-tr { color: var(--renk-vurgu); }

.duzen {
    max-width: var(--duzen-en);
    margin-inline: auto;
    padding-inline: var(--kenar);
}

.ana { min-width: 0; }


/* ============================= 05 KAHRAMAN =============================
   Asimetrik: başlık sola dayalı ve tek başına geniş; "24 hak" kartı gövde
   akışından SOLA taşarak ızgarayı kırar; adım şeridi altta yatay bir ray. */

.kahraman {
    position: relative;
    padding: var(--bosluk-7) 0 var(--bosluk-6);
    isolation: isolate;
}
/* Atmosfer: iki yumuşak parıltı. Kutu BİLEREK ebeveynin genişliğini AŞMAZ (yatay taşma =
   mobilde istenmeyen yan kaydırma); genişlik hissi kutuyu büyüterek değil, gradyan
   yarıçaplarını büyütüp merkezlerini kenara kaydırarak elde edilir. */
.kahraman::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -25% 0 auto 0;
    height: 135%;
    /* Yarıçaplar ve merkezler, gradyanların kutunun KENARINA ULAŞMADAN saydamlaştığı
       şekilde seçildi (ör. 30% merkez + %45 yarıçap → sağ uç ≈ %67). Aksi halde parıltı
       kutu sınırında keskin bir dikdörtgen kenarı olarak görünür. */
    background:
        radial-gradient(50% 45% at 30% 32%, oklch(55% 0.22 275 / 0.17), transparent 74%),
        radial-gradient(40% 36% at 70% 26%, oklch(70% 0.15 320 / 0.13), transparent 74%);
    pointer-events: none;
}

.goz-ustu {
    font-size: var(--olcek-mikro);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--renk-vurgu);
}

/* ==================== RİSK SKALASI (kahraman imza öğesi, 30 Tem) ====================
   Kahramanın sağındaki boşluk, ürünün TEZİNİ gösteren bir ölçüm rayıyla dolduruldu:
   bölümler gerçek gelecek riski yüzdelerinin yüksekliğine iğnelenir, üzerinden yavaş bir
   tarama geçer. Şablon bir "büyük sayı + gradyan" kartı yerine ürünün kendi verisi.

   TİP KARARI: yüzdeler ve eksen etiketleri TEK YERDE monospace kullanır — sayfanın geri
   kalanı gövde/başlık yüzlerinde kalır. "Ölçüm aleti okuması" hissini yeni bir yazı tipi
   dosyası indirmeden veren şey bu kısıtlı kullanımdır (performans bütçesi: webfont yok).

   KONUMLANDIRMA: satırlar yüzdelerine göre nth-child ile yerleştirilir (inline style YOK —
   projede yasak, bkz. tests/index.test.php). Satır sırası markup'ta SABİTTİR; satır
   eklenir/çıkarılırsa aşağıdaki bloklar da güncellenmelidir. */
.kahraman-duzen {
    display: grid;
    gap: var(--bosluk-5);
}
.risk-skala {
    position: relative;
    padding: var(--bosluk-4);
    background: linear-gradient(
        160deg,
        oklch(100% 0 0 / 0.86),
        oklch(97% 0.012 275 / 0.72)
    );
    border: 1px solid oklch(91.5% 0.008 275 / 0.9);
    border-radius: var(--radius-buyuk);
    box-shadow: 0 24px 60px -32px oklch(45% 0.19 275 / 0.35);
    /* Ölçüm kâğıdı dokusu: çok soluk yatay çizgiler. Dekor değil — rayın bir SKALA olduğunu
       söyleyen yapısal bir işaret. */
    background-image:
        linear-gradient(160deg, oklch(100% 0 0 / 0.86), oklch(97% 0.012 275 / 0.72)),
        repeating-linear-gradient(
            to bottom,
            oklch(55% 0.22 275 / 0.05) 0 1px,
            transparent 1px 34px
        );
}
.skala-goz-ustu {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: var(--olcek-mikro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--renk-vurgu);
}
.skala-baslik {
    margin-top: var(--bosluk-1);
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-h3);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.skala-govde {
    position: relative;
    height: 430px;
    margin-top: var(--bosluk-4);
    /* Sol pay eksen etiketlerini BARINDIRIR: etiketler rayın soluna taşırılır, pay yetersizse
       panelin kenarında kırpılırlar (30 Tem'de görüldü: "%100" yarım görünüyordu). */
    padding-left: calc(var(--bosluk-5) + 1.4rem);
}

/* Ray: yukarıdan aşağıya risk azalır — renk de öyle. Semantik renkler sistemden gelir
   (tehlike/uyari/guven), yeni bir palet UYDURULMAZ. */
.skala-ray {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    border-radius: var(--radius-tam);
    background: linear-gradient(
        to bottom,
        var(--renk-tehlike) 0%,
        var(--renk-uyari) 46%,
        var(--renk-guven) 100%
    );
    opacity: 0.85;
}

/* Tarama: rayda aşağı inen tek bir ışık çizgisi. TEK hareket öğesi (dağınık efekt yok);
   ölçüm aletinin süpürmesini taklit eder. */
.skala-tarama {
    position: absolute;
    left: -6px;
    right: 0;
    height: 2px;
    background: linear-gradient(
        to right,
        var(--renk-vurgu) 0,
        oklch(55% 0.22 275 / 0.28) 42%,
        transparent 92%
    );
    animation: skalaTarama 9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes skalaTarama {
    0%        { top: 0;    opacity: 0; }
    6%        { opacity: 1; }
    94%       { opacity: 1; }
    100%      { top: 100%; opacity: 0; }
}

.skala-liste {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.skala-satir {
    position: absolute;
    left: var(--bosluk-3);
    right: 0;
    /* Yüzde SOLDA (rayın hizasında), bölüm adı SAĞ UÇTA, aralarında noktalı kılavuz:
       içindekiler-listesi deseni. Panelin genişliğini DEKORLA değil YAPIYLA doldurur ve
       "bu değer bu yüksekliğe ait" bağını göz için tamamlar. */
    display: grid;
    grid-template-columns: auto minmax(var(--bosluk-4), 1fr) auto;
    align-items: baseline;
    gap: var(--bosluk-2);
    /* Satır, yüzdesinin TAM hizasında dursun: kendi yüksekliğinin yarısı kadar yukarı çekilir. */
    transform: translateY(-50%);
    /* Tarama satırın hizasından geçtiğinde satır bir an öne çıkar (aşağıdaki gecikmeler). */
    animation: skalaVurgu 9s linear infinite;
}
.skala-yuzde {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: var(--olcek-orta);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}
.skala-yuzde::after {
    content: "%";
    margin-left: 1px;
    font-size: 0.7em;
    opacity: 0.6;
}
.skala-kilavuz {
    align-self: center;
    height: 1px;
    /* Noktalı kılavuz: tekrarlı gradyan, `border-bottom: dotted`tan daha ince ve düzenli. */
    background: repeating-linear-gradient(
        to right,
        var(--renk-cizgi-koyu) 0 2px,
        transparent 2px 6px
    );
    opacity: 0.7;
}
.skala-ad {
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-murekkep-2);
    white-space: nowrap;
    text-align: right;
}
.skala-satir[data-seviye="yuksek"] .skala-yuzde { color: var(--renk-tehlike); }
.skala-satir[data-seviye="orta"]   .skala-yuzde { color: var(--renk-uyari); }
.skala-satir[data-seviye="dusuk"]  .skala-yuzde { color: var(--renk-guven); }

/* Konum = yüzde (yukarı = yüksek risk). Gecikme = taramanın o yüksekliğe varma anı:
   (100 - yüzde) / 100 × 9s. */
.skala-liste li:nth-child(1) { top: 12%;  animation-delay: 1.08s; }   /* 88 */
.skala-liste li:nth-child(2) { top: 24%;  animation-delay: 2.16s; }   /* 76 */
.skala-liste li:nth-child(3) { top: 32%;  animation-delay: 2.88s; }   /* 68 */
.skala-liste li:nth-child(4) { top: 40%;  animation-delay: 3.60s; }   /* 60 */
.skala-liste li:nth-child(5) { top: 52%;  animation-delay: 4.68s; }   /* 48 */
.skala-liste li:nth-child(6) { top: 65%;  animation-delay: 5.85s; }   /* 35 */
.skala-liste li:nth-child(7) { top: 72%;  animation-delay: 6.48s; }   /* 28 */
.skala-liste li:nth-child(8) { top: 80%;  animation-delay: 7.20s; }   /* 20 */

/* Tarama satırın hizasından geçerken kılavuz çizgisi bir an vurgu rengine döner ve
   bölüm adı koyulaşır — "şu an bu ölçülüyor" hissi. Konum/ölçek DEĞİŞMEZ: tam genişlikte
   bir satırı kaydırmak metni titretirdi. */
@keyframes skalaVurgu {
    0%, 3%, 100% { --skala-vurgu: 0; }
    1.5%         { --skala-vurgu: 1; }
}
@property --skala-vurgu {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
.skala-satir { --skala-vurgu: 0; }
.skala-satir .skala-kilavuz {
    opacity: calc(0.7 + var(--skala-vurgu) * 0.3);
    background: repeating-linear-gradient(
        to right,
        color-mix(in oklab, var(--renk-cizgi-koyu), var(--renk-vurgu) calc(var(--skala-vurgu) * 100%)) 0 2px,
        transparent 2px 6px
    );
}
.skala-satir .skala-ad {
    color: color-mix(in oklab, var(--renk-murekkep-2), var(--renk-murekkep) calc(var(--skala-vurgu) * 100%));
}

.skala-eksen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: var(--olcek-mikro);
    color: var(--renk-murekkep-3);
    /* Etiketler rayın SOLUNDA kalır ama panelin İÇİNDE: `padding-left` ile ayrılan payın
       tam ortasına oturur. Eskiden translateX ile dışa taşınıyordu ve panel kenarında
       kırpılıyordu (30 Tem). */
    /* `left: 0` mutlak konumda İÇ kenardan (padding'in başlangıcından) ölçülür — etiketler
       böylece padding boşluğunun içine, rayın soluna oturur. Ek bir transform GEREKMEZ;
       önceki deneme onları panel dışına taşırıp kırptırdı (30 Tem). */
    left: 0;
    width: calc(var(--bosluk-5) + 1.4rem);
    align-items: flex-end;
    padding-right: var(--bosluk-2);
}
.skala-not {
    margin-top: var(--bosluk-4);
    padding-top: var(--bosluk-3);
    border-top: 1px solid var(--renk-cizgi);
    font-size: var(--olcek-mikro);
    color: var(--renk-murekkep-3);
    text-wrap: pretty;
}

/* Masaüstü: kahraman iki kolon. Metin kolonu ölçüsünü korur, skala boşluğu doldurur. */
@media (min-width: 900px) {
    .kahraman-duzen {
        grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
        align-items: start;
        gap: var(--bosluk-6);
    }
    .risk-skala { padding: var(--bosluk-5); }
}

@media (max-width: 899px) {
    /* Dar ekranda 8 satır üst üste biner: ikincil satırlar gizlenir, ray kısalır. */
    .skala-satir--ikincil { display: none; }
    .skala-govde { height: 300px; }
    .skala-ad { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    /* Tarama tamamen kaldırılır (0.001ms'lik bir "atlama" da titreme gibi görünür). */
    .skala-tarama { display: none; }
    .skala-satir { animation: none; }
}

.kahraman-baslik {
    margin-top: var(--bosluk-3);
    max-width: 14ch;
    font-size: var(--olcek-h1);
    font-weight: 800;
    letter-spacing: -0.04em;
}
.kahraman-baslik em {
    font-style: normal;
    color: var(--renk-vurgu);
    /* Kalın ama harflere yapışık bir alt çizgi. `box-shadow: inset` YERİNE
       text-decoration: gölge satır-içi kutunun (glif değil) altına düşer ve başlık
       boyutunda harflerden kopuk bir şerit gibi görünür. */
    text-decoration: underline;
    text-decoration-color: var(--renk-vurgu-fon-2);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 0.08em;
    text-decoration-skip-ink: none;
}

.kahraman-alt {
    margin-top: var(--bosluk-4);
    max-width: 46ch;
    font-size: var(--olcek-orta);
    color: var(--renk-murekkep-2);
    text-wrap: pretty;
}

/* --- İmza: 24 tercih hakkı şeridi --- */
.hak-karti {
    margin-top: var(--bosluk-6);
    padding: var(--bosluk-4);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-buyuk);
    box-shadow: var(--golge-2);
}
.hak-serit {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;
}
.hak-slot {
    height: 26px;
    border-radius: 4px;
    background: var(--renk-zemin-alt);
    box-shadow: inset 0 0 0 1px var(--renk-cizgi);
}
.hak-slot--dolu {
    background: linear-gradient(170deg, var(--renk-vurgu-acik), var(--renk-vurgu));
    box-shadow: var(--golge-vurgu);
}
.hak-metin {
    margin-top: var(--bosluk-3);
    font-size: var(--olcek-kucuk);
    color: var(--renk-murekkep-2);
    text-wrap: pretty;
}
.hak-metin strong { color: var(--renk-murekkep); }

/* --- Adım rayı --- */
/* Sarmalanır, YATAY KAYDIRILMAZ: en dar telefonda (320px) üçüncü adımın yarısı ekran
   dışında kalırsa akışın üç adımdan oluştuğu görünmez olur — kaydırmayı keşfetmek
   gerekir. Alt satıra inmesi bu bilgiyi hep görünür tutar. */
.adimlar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bosluk-2);
    margin-top: var(--bosluk-5);
}
.adim {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-2);
    flex: 0 0 auto;
    padding: 0.4rem 0.85rem 0.4rem 0.4rem;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-tam);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    box-shadow: var(--golge-1);
}
.adim + .adim::before {
    content: "";
    width: 14px;
    height: 1px;
    margin-left: calc(var(--bosluk-2) * -1 - 14px);
    background: var(--renk-cizgi-koyu);
}
.adim-no {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: var(--radius-tam);
    background: var(--renk-vurgu-fon);
    color: var(--renk-vurgu-koyu);
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-kucuk);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


/* =========================== 06 BÖLÜM + ADIM =========================== */

.bolum { padding-top: var(--bosluk-bolum); }

.bolum-basi { margin-bottom: var(--bosluk-5); }

.adim-rozet {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-2);
    font-size: var(--olcek-mikro);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--renk-murekkep-3);
}
.adim-rozet-no {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: var(--radius-tam);
    background: var(--renk-vurgu);
    color: #fff;
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-kucuk);
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: var(--golge-vurgu);
}

.bolum-baslik {
    margin-top: var(--bosluk-2);
    font-size: var(--olcek-h2);
}
.bolum-alt {
    margin-top: var(--bosluk-2);
    max-width: 54ch;
    color: var(--renk-murekkep-2);
    text-wrap: pretty;
}


/* ========================= 07 KART, FORM, DÜĞME ========================= */

.kart {
    padding: var(--bosluk-4);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-buyuk);
    box-shadow: var(--golge-2);
}
.kart-baslik {
    font-size: var(--olcek-h3);
    margin-bottom: var(--bosluk-4);
}

.giris-yollari { display: grid; gap: var(--bosluk-4); }

.ayirac {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-murekkep-3);
}
.ayirac::before, .ayirac::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--renk-cizgi);
}

.alan { display: block; }
.alan + .alan { margin-top: var(--bosluk-4); }
.alan-ikili {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bosluk-3);
    margin-top: var(--bosluk-4);
}
.alan-ikili .alan + .alan { margin-top: 0; }

.etiket {
    display: block;
    margin-bottom: var(--bosluk-2);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-murekkep-2);
}

.girdi {
    display: block;
    width: 100%;
    min-height: var(--dokunma);
    padding: 0 var(--bosluk-3);
    background: var(--renk-zemin-alt);
    color: var(--renk-murekkep);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-kucuk);
    font: inherit;
    transition: border-color var(--gecis-hizli) var(--yumusak),
                background-color var(--gecis-hizli) var(--yumusak),
                box-shadow var(--gecis-hizli) var(--yumusak);
}
.girdi--sayi { font-variant-numeric: tabular-nums; }
.girdi:hover { border-color: var(--renk-cizgi-koyu); }
/* Kod incelemesi (2. tur, Important 3): AI eylemleri (belge yükleme, sohbet gönderimi) uçuş-içi
   korumalıyken ilgili girdi de `disabled` olur — burada görsel bir durum (soluk + not-allowed
   imleç) verilir, `.dugme[disabled]` ile TUTARLI. */
.girdi:disabled { opacity: 0.55; cursor: not-allowed; }
.girdi:focus {
    background: var(--renk-yuzey);
    border-color: var(--renk-vurgu);
    box-shadow: 0 0 0 3px var(--renk-vurgu-fon);
    outline: none;
}
.girdi:focus-visible { outline: none; }
/* `appearance: none` KOŞULSUZ: tarayıcının kendi açılır okunu kaldırır. Aksi halde UA oku
   ile aşağıdaki gradyan okumuz yan yana çizilir (çift ok). */
select.girdi {
    appearance: none;
    padding-right: var(--bosluk-6);
    background-image: linear-gradient(45deg, transparent 50%, var(--renk-murekkep-2) 50%),
                      linear-gradient(135deg, var(--renk-murekkep-2) 50%, transparent 50%);
    background-position: right 1.15rem center, right 0.85rem center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.ipucu {
    display: block;
    margin-top: var(--bosluk-1);
    font-size: var(--olcek-mikro);
    color: var(--renk-murekkep-3);
}

.ilgi-kutu { display: flex; gap: var(--bosluk-2); }
.ilgi-kutu .girdi { flex: 1 1 auto; min-width: 0; }

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bosluk-2);
    min-height: var(--dokunma);
    padding: 0 var(--bosluk-4);
    border: 1px solid transparent;
    border-radius: var(--radius-kucuk);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: transform var(--gecis-hizli) var(--esneme),
                background-color var(--gecis-hizli) var(--yumusak),
                box-shadow var(--gecis-hizli) var(--yumusak),
                border-color var(--gecis-hizli) var(--yumusak);
}
.dugme--genis { width: 100%; }
.dugme:active { transform: translateY(1px); }
.dugme[disabled] { opacity: 0.45; cursor: not-allowed; }
.dugme[disabled]:active { transform: none; }

.dugme--birincil {
    background: var(--renk-vurgu);
    color: #fff;
    box-shadow: var(--golge-vurgu);
}
.dugme--ikincil {
    background: var(--renk-vurgu-fon);
    color: var(--renk-vurgu-koyu);
    border-color: var(--renk-vurgu-fon-2);
}
.dugme--sade {
    background: var(--renk-yuzey);
    color: var(--renk-murekkep-2);
    border-color: var(--renk-cizgi);
}
.dugme--ekle {
    min-height: var(--dokunma);
    padding-inline: var(--bosluk-4);
    background: var(--renk-vurgu-fon);
    color: var(--renk-vurgu-koyu);
    border-color: var(--renk-vurgu-fon-2);
}

@media (hover: hover) {
    .dugme--birincil:hover { background: var(--renk-vurgu-koyu); box-shadow: 0 8px 22px -6px oklch(55% 0.22 275 / 0.6); }
    .dugme--ikincil:hover { background: var(--renk-vurgu-fon-2); }
    .dugme--sade:hover { border-color: var(--renk-cizgi-koyu); color: var(--renk-murekkep); }
    .dugme--ekle:hover { background: var(--renk-vurgu); color: #fff; border-color: transparent; }
}

/* --- Belge kartı --- */
/* `position: relative`: görsel olarak gizlenmiş dosya girdisi (aşağıda `position: absolute`)
   kartın içinde kalsın, sayfanın kapsayıcı bloğuna kaçmasın. */
.belge { position: relative; display: grid; gap: var(--bosluk-3); }
.belge-girdi {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.belge-alan {
    display: grid;
    justify-items: center;
    gap: var(--bosluk-2);
    padding: var(--bosluk-5) var(--bosluk-4);
    text-align: center;
    background:
        repeating-linear-gradient(135deg, var(--renk-vurgu-fon) 0 10px, transparent 10px 20px);
    background-color: var(--renk-zemin-alt);
    border: 2px dashed var(--renk-cizgi-koyu);
    border-radius: var(--radius-orta);
    cursor: pointer;
    transition: border-color var(--gecis-normal) var(--yumusak),
                background-color var(--gecis-normal) var(--yumusak);
}
.belge-ikon { color: var(--renk-vurgu); }
.belge-baslik { font-family: var(--yazi-baslik); font-size: var(--olcek-orta); font-weight: 700; letter-spacing: -0.02em; }
.belge-yardim { max-width: 34ch; font-size: var(--olcek-kucuk); color: var(--renk-murekkep-2); }
.belge-dugme {
    display: inline-flex;
    align-items: center;
    min-height: var(--dokunma);
    margin-top: var(--bosluk-1);
    padding: 0 var(--bosluk-5);
    background: var(--renk-vurgu);
    color: #fff;
    border-radius: var(--radius-kucuk);
    font-weight: 600;
    box-shadow: var(--golge-vurgu);
}
.belge-girdi:focus-visible + .belge-alan { outline: 3px solid var(--renk-vurgu); outline-offset: 2px; }
.belge-alan:hover, .belge.suruklenen .belge-alan {
    border-color: var(--renk-vurgu);
    background-color: var(--renk-vurgu-fon);
}
.belge-durum {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    padding: var(--bosluk-2) var(--bosluk-3);
    background: var(--renk-zemin-alt);
    border-radius: var(--radius-kucuk);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-murekkep-2);
}
.belge-not { font-size: var(--olcek-mikro); color: var(--renk-murekkep-3); }

/* --- Belge yükleme sonucu (Task 11) ---
   OCR yanıtı birden fazla puan türü döndürdüğünde kullanıcı bir çip seçer; her durumda (tek/çok
   puan türü) sıra aralığı önerisi AYRI bir düğmeyle (kullanıcı onayı, otomatik ezme yok). */
.belge-secim { display: grid; gap: var(--bosluk-2); margin-top: calc(-1 * var(--bosluk-1)); }
.belge-secim-liste { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }
.belge-secim-btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--dokunma);
    padding: 0 var(--bosluk-4);
    background: var(--renk-yuzey);
    color: var(--renk-murekkep-2);
    border: 1px solid var(--renk-cizgi-koyu);
    border-radius: var(--radius-tam);
    font: inherit;
    font-weight: 600;
    font-size: var(--olcek-kucuk);
    cursor: pointer;
    transition: background-color var(--gecis-hizli) var(--yumusak),
                color var(--gecis-hizli) var(--yumusak),
                border-color var(--gecis-hizli) var(--yumusak);
}
.belge-secim-btn[aria-pressed="true"] { background: var(--renk-vurgu); color: #fff; border-color: transparent; }
/* `.dugme`'nin `white-space: nowrap`'ı burada BİLEREK geçersiz kılınır: bu düğmenin metni
   hesaplanan sıra aralığını (ör. "19.211–115.263") İÇERİR ve dar ekranlarda (320px) tek satıra
   sığmayabilir — nowrap kalırsa metin kırpılmaz, KARTIN KENDİSİ yatay taşardı (ampirik olarak
   320px'te 117px taşma ile bulundu). `height: auto` + `text-align: left`: çok satırlı içerikte
   `.dugme`'nin sabit `min-height`'ı (44px dokunma hedefi) korunur ama tek satıra ZORLANMAZ. */
.belge-aralik-btn {
    justify-self: start;
    width: 100%;
    height: auto;
    padding-block: var(--bosluk-2);
    white-space: normal;
    text-align: left;
}

@media (hover: hover) {
    .belge-secim-btn:hover { border-color: var(--renk-vurgu); color: var(--renk-vurgu-koyu); }
}

/* Küçük "yükleniyor" iskelet çubuğu — #belge-durum ikonunun yanında, OCR isteği sürerken. */
.iskelet {
    display: inline-block;
    width: 64px;
    height: 8px;
    border-radius: var(--radius-tam);
    background: linear-gradient(90deg, var(--renk-cizgi) 25%, var(--renk-cizgi-koyu) 37%, var(--renk-cizgi) 63%);
    background-size: 200% 100%;
    animation: iskelet-parla 1.4s ease-in-out infinite;
}
@keyframes iskelet-parla {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ==================== 08 FİLTRELER + ÇOKLU SEÇİM ====================
   <details>: mobilde JS'siz açılır/kapanır bir çekmecedir. Masaüstünde
   ::details-content geçersiz kılınarak DAİMA açık gösterilir (bkz. 11. bölümdeki
   aynı desen). Desteklemeyen eski motorlarda kapalı başlar — bozulmaz, sadece bir
   dokunuş gerektirir. */

.filtreler { padding: 0; overflow: hidden; }

.filtre-basi {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    min-height: var(--dokunma);
    padding: var(--bosluk-3) var(--bosluk-4);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}
.filtre-basi::-webkit-details-marker { display: none; }
.filtre-basi-ad { font-family: var(--yazi-baslik); font-size: var(--olcek-orta); letter-spacing: -0.02em; }
.filtre-basi-yardim {
    flex: 1;
    font-size: var(--olcek-kucuk);
    font-weight: 400;
    color: var(--renk-murekkep-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.filtre-ok, .panel-ok {
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-right: 2px solid var(--renk-murekkep-2);
    border-bottom: 2px solid var(--renk-murekkep-2);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--gecis-normal) var(--esneme);
}
[open] > .filtre-basi .filtre-ok,
[open] > .panel-basi .panel-ok { transform: rotate(225deg) translate(-2px, -2px); }

.filtre-govde {
    display: grid;
    gap: var(--bosluk-5);
    padding: var(--bosluk-4);
    border-top: 1px solid var(--renk-cizgi);
    background: var(--renk-zemin);
}
.filtre-grup-ad {
    margin-bottom: var(--bosluk-3);
    font-size: var(--olcek-mikro);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--renk-murekkep-3);
}
.filtre-satir { display: grid; gap: var(--bosluk-3); }

.coklu { position: relative; }
.coklu-ac {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-2);
    width: 100%;
    min-height: var(--dokunma);
    padding: 0 var(--bosluk-3);
    background: var(--renk-yuzey);
    color: var(--renk-murekkep);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-kucuk);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--gecis-hizli) var(--yumusak);
}
.coklu-ac::after {
    content: "";
    width: 8px; height: 8px;
    border-right: 2px solid var(--renk-murekkep-3);
    border-bottom: 2px solid var(--renk-murekkep-3);
    transform: rotate(45deg) translate(-2px, -2px);
}
.coklu-ac:hover { border-color: var(--renk-cizgi-koyu); }
.coklu-ac[aria-expanded="true"] { border-color: var(--renk-vurgu); }
.coklu-sayi:not(:empty) {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    margin-left: auto;
    padding-inline: 6px;
    background: var(--renk-vurgu);
    color: #fff;
    border-radius: var(--radius-tam);
    font-size: var(--olcek-mikro);
    font-variant-numeric: tabular-nums;
}

.coklu-panel {
    position: absolute;
    z-index: 20;
    inset-inline: 0;
    top: calc(100% + 6px);
    padding: var(--bosluk-2);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-orta);
    box-shadow: var(--golge-2);
}
.coklu-panel[hidden] { display: none; }
.coklu-liste {
    max-height: 220px;
    margin-top: var(--bosluk-2);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.coklu-liste li {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    min-height: var(--dokunma);
    padding-inline: var(--bosluk-2);
    border-radius: var(--radius-kucuk);
    cursor: pointer;
}
.coklu-liste li:hover { background: var(--renk-vurgu-fon); }
.coklu-liste li[aria-selected="true"] { background: var(--renk-vurgu-fon); color: var(--renk-vurgu-koyu); font-weight: 600; }
.coklu-liste:empty::after {
    content: "Seçenekler yükleniyor…";
    display: block;
    padding: var(--bosluk-3);
    font-size: var(--olcek-kucuk);
    color: var(--renk-murekkep-3);
}

.coklu-cipler { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }
.coklu-cipler:not(:empty) { margin-top: var(--bosluk-2); }
.coklu-cipler li {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-1);
    padding: 0.25rem 0.35rem 0.25rem 0.7rem;
    background: var(--renk-vurgu-fon);
    color: var(--renk-vurgu-koyu);
    border-radius: var(--radius-tam);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
}
.coklu-cipler button {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    background: none;
    border: 0;
    border-radius: var(--radius-tam);
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.coklu-cipler button .ikon { width: 12px; height: 12px; }
.coklu-cipler button:hover { background: var(--renk-vurgu-fon-2); }

.filtre-eylem { padding-top: var(--bosluk-1); }


/* ========================= 09 SONUÇ TABLOSU =========================
   Tablo iki AYRI görünüm modu arasında geçer, bu yüzden kart modu bilinçli olarak
   `@media (max-width: 768px)` bloğuna alınmıştır (dosyanın geri kalanındaki mobil-önce
   min-width düzeninin tek istisnası). Gerekçe: kart yerleşimi `td:nth-child(n)`
   seçicileriyle kurulur — özgüllüğü (0,2,2) — ve masaüstü bloğundaki daha DÜŞÜK
   özgüllüklü `.tablo tbody td` (0,1,2) sıfırlamaları bunları EZEMEZ. İki modu ayrık
   media query'lere koymak bu özgüllük çatışmasını kaynağında yok eder; alternatifi
   her seçiciyi masaüstünde birebir yansıtmaktır (kırılgan ve tekrarlı).

   TASK 10 SÖZLEŞMESİ: kart modundaki hücre başlıkları CSS `::before` ile basılır ve
   sadece KOLON SIRASINA dayanır — JS'in ek bir sınıf/nitelik üretmesi GEREKMEZ.
   Yine de bir hücrede `data-label` varsa o metin kullanılır. */

.sonuclar { padding-top: var(--bosluk-6); }

.sonuc-basi {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-3);
}
.sonuc-baslik { font-size: var(--olcek-h3); }
.sonuc-adet {
    display: inline-block;
    margin-left: var(--bosluk-1);
    padding: 0.1rem 0.5rem;
    background: var(--renk-vurgu-fon);
    color: var(--renk-vurgu-koyu);
    border-radius: var(--radius-tam);
    font-family: var(--yazi-govde);
    font-size: var(--olcek-kucuk);
    font-variant-numeric: tabular-nums;
    vertical-align: 0.15em;
}
.alan--sirala { display: flex; align-items: center; gap: var(--bosluk-2); }
.alan--sirala .etiket { margin-bottom: 0; white-space: nowrap; }
.alan--sirala .girdi { width: auto; }

.ornek-not {
    margin-bottom: var(--bosluk-3);
    padding: var(--bosluk-3);
    background: var(--renk-vurgu-fon);
    border-radius: var(--radius-orta);
    font-size: var(--olcek-kucuk);
    color: var(--renk-vurgu-koyu);
}

/* `position: relative` ZORUNLU: içerideki `.gizli-metin` (ör. "Listeye ekle" başlığı)
   `position: absolute`tır. Konumlanmış bir ata olmasaydı kapsayıcı bloğu SAYFANIN kendisi
   olur, statik konumu geniş tablonun sağ ucunda (~1400px) kalır ve tüm SAYFAYA yatay
   kaydırma eklerdi — tablo kendi içinde kaydırılabilir olmasına rağmen. */
.tablo-sarmal { position: relative; overflow: visible; }
.tablo { width: 100%; border-collapse: collapse; }
.tablo tbody td { font-variant-numeric: tabular-nums; }

/* Bölüm tanımı — bölüm adının HEMEN ALTINDA, küçük/soluk bir satır ("Gerontoloji gibi bölümleri
   kullanıcı bilmeyebilir" gereksinimi; bkz. app-tablo.js bolumHucresiOlustur()). yz_tanim BOŞSA
   bu span HİÇ oluşturulmaz (yer kaplamaz — bkz. JS). font-weight/letter-spacing BİLİNÇLİ olarak
   sıfırlanır: bölüm hücresi (td:nth-child(4)) hem mobil kartta HEM masaüstünde kalın/sıkı harf
   aralıklı başlık stiliyle çizilir (bkz. aşağıdaki nth-child(4) kuralları); bu tanım satırının
   ONLARDAN görsel olarak AYRIŞMASI (ikincil/soluk metin izlenimi) gerekir. 2 satırda kırpılır
   (-webkit-line-clamp) — geniş masaüstü tablosunda bile tek bir bölümün tanımı satırı şişirmez. */
.bolum-tanim {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: var(--bosluk-1);
    font-family: var(--yazi-govde);
    font-size: 0.8em;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.35;
    color: var(--renk-murekkep-3);
}

/* Mobil ana eylem: "Filtrele ve listeyi oluştur" (kullanıcı geri bildirimi 29 Tem).
   Asıl "Filtreleri uygula" düğmesi KAPALI akordeonun içinde kaldığından mobilde hiç
   görünmüyordu; bu düğme akordeonun dışında, tam genişlikte ve büyük durur.
   MASAÜSTÜNDE GİZLİ: orada akordeon açık ve asıl düğme zaten görünür — iki özdeş düğme
   yan yana durursa hangisine basılacağı belirsizleşir. */
/* MASAÜSTÜNDE DE GÖRÜNÜR (kullanıcı isteği 1 Ağu: "mobil görünümdeki Filtrele ve listeyi
   oluştur'u masaüstüne de yap, ayrı dursun mobil gibi").
   Panelin İÇİNDEKİ özdeş düğme masaüstünde GİZLENİR (aşağıda): iki aynı düğme yan yana
   durursa hangisine basılacağı belirsizleşir — eylem tek ve panelin dışında. */
.mobil-eylem {
    display: grid;
    gap: var(--bosluk-2);
    justify-items: center;
    margin: var(--bosluk-4) 0 var(--bosluk-5);
}

.mobil-eylem-dugme {
    min-width: min(28rem, 100%);
    min-height: 56px;
    font-size: var(--olcek-orta);
    font-weight: 700;
    box-shadow: 0 10px 26px -8px oklch(55% 0.22 275 / 0.55);
    animation: mobilEylemNabiz 2.4s ease-in-out infinite;
}

.mobil-eylem-not {
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-vurgu-koyu);
}

body.arama-yapildi .mobil-eylem-dugme { animation: none; }
body.arama-yapildi .mobil-eylem-not { display: none; }

@media (min-width: 769px) {
    /* Panel içindeki "Filtreleri uygula" masaüstünde gizli — eylem artık dışarıdaki düğme. */
    #filtre-uygula { display: none; }
}

@media (max-width: 768px) {
    .mobil-eylem-dugme {
        width: 100%;
        min-height: 60px;
        font-size: var(--olcek-orta);
        font-weight: 700;
        box-shadow: 0 10px 26px -8px oklch(55% 0.22 275 / 0.55);
        animation: mobilEylemNabiz 2.4s ease-in-out infinite;
    }
    .mobil-eylem-dugme .ikon { width: 20px; height: 20px; }
    .mobil-eylem-not {
        font-size: var(--olcek-kucuk);
        font-weight: 600;
        color: var(--renk-vurgu-koyu);
    }

    /* Arama yapıldıktan sonra nabız DURUR: yönlendirmenin işi bitmiştir. */
    body.arama-yapildi .mobil-eylem-dugme { animation: none; }
    body.arama-yapildi .mobil-eylem-not { display: none; }
}

/* Dikkat çeken nabız — sadece ölçek ve gölge (renk/konum değişmez, düğme metni okunur kalır).
   prefers-reduced-motion bloğu süreyi 0.001ms'ye indirdiğinden hareket duyarlılığı olan
   kullanıcıda kendiliğinden devre dışı kalır. */
@keyframes mobilEylemNabiz {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 26px -8px oklch(55% 0.22 275 / 0.5); }
    50%      { transform: scale(1.025); box-shadow: 0 16px 34px -8px oklch(55% 0.22 275 / 0.75); }
}

/* "Demo gör" (kullanıcı isteği 29 Tem): puan girmeden örnek tabloya inen çıpa.
   Yumuşak kaydırma CSS ile yapılır (JS gerekmez); `prefers-reduced-motion: reduce` bloğu
   scroll-behavior'ı zaten `auto`ya çevirdiğinden hareket duyarlılığı olan kullanıcı anında
   atlar. `.ust` sabit (sticky) olduğundan hedefe üstten pay bırakılır — aksi hâlde
   "Sana uyan programlar" başlığı başlığın altında kalırdı. */
html { scroll-behavior: smooth; }
#sonuclar { scroll-margin-top: calc(var(--ust-yukseklik) + var(--bosluk-4)); }

.kahraman-demo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bosluk-2) var(--bosluk-3);
    margin: var(--bosluk-4) 0 0;
}
.kahraman-demo .dugme { text-decoration: none; }
.kahraman-demo .ikon { width: 16px; height: 16px; }
.kahraman-demo-not { font-size: var(--olcek-kucuk); color: var(--renk-murekkep-3); }

/* Meslek çipleri — bölüm adının/tanımının ALTINDA, kartın kendisinde (kullanıcı isteği
   29 Tem: "MEZUNLAR GENELDE ŞU İŞLERİ YAPAR'ı da üstteki karta ekle"). Detay panelinde
   TEKRARLANMAZ. Masaüstü tablosunda bölüm sütunu dar olduğundan çipler orada gizlenir —
   bilgiyi dar bir hücreye sıkıştırmak satır yüksekliğini üçe katlardı; kart modunda
   (≤768px) ve tercih panelinde tam görünür. */
.bolum-meslekler { margin-top: var(--bosluk-2); }
.bolum-meslek-baslik {
    margin: 0 0 var(--bosluk-1);
    font-family: var(--yazi-govde);
    font-size: var(--olcek-mikro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--renk-murekkep-3);
}
.bolum-meslekler .meslek-cip-listesi { margin-bottom: 0; gap: var(--bosluk-1); }
.bolum-meslekler .meslek-cip { font-size: var(--olcek-mikro); padding: 2px var(--bosluk-2); }

/* İki kırılım noktası, iki farklı yer — aynı anda YALNIZCA BİRİ görünür:
   · ≤768px (kart): bölüm adının altında, kartın içinde (kullanıcı isteği 29 Tem)
   · ≥769px (tablo): satırın ALTINDA tam genişlikte ayrı bir şerit satırı
     (`tr.meslek-satir`, kullanıcı isteği 29 Tem: "web görünümde de meslek etiketlerini
     ilgili satırın en altına sırala"). Bölüm sütunu 5 çipi yan yana alacak kadar geniş
     olmadığından hücre içinde gösterilemez — colspan'li ayrı satır kullanılır.
   Detay paneli artık meslek çipi TAŞIMAZ (iki yerde birden göstermek tekrar olurdu). */
@media (min-width: 769px) {
    /* SADECE bölüm hücresindeki kopya gizlenir — `:not(.meslek-satir)` şart: seçici
       daraltılmazsa şerit satırının KENDİ içeriğini de gizler (29 Tem'de yaşandı: şerit
       13px yüksekliğinde boş bir çizgiye düşmüştü). */
    .tablo tbody tr:not(.meslek-satir) td .bolum-meslekler { display: none; }

    /* Şerit üstteki satırın görsel devamıdır: üst kenarlık yok, hafif girinti,
       satırla aynı vurgu/hover davranışı için ayrı bir zemin verilmez. */
    .tablo tbody tr.meslek-satir td {
        padding: 0 var(--bosluk-3) var(--bosluk-3);
        border-top: none;
    }
    .tablo tbody tr.meslek-satir .bolum-meslek-baslik { display: none; }
    .tablo tbody tr.meslek-satir .meslek-cip-listesi {
        margin: 0;
        padding-left: var(--bosluk-3);
        border-left: 2px solid var(--renk-cizgi);
    }
    /* Program satırının alt kenarlığı şeride kadar uzamasın — ikisi TEK satır gibi okunur. */
    .tablo tbody tr:has(+ tr.meslek-satir) td { border-bottom: none; }
}
@media (max-width: 768px) {
    .tablo tbody tr.meslek-satir { display: none; }
}

/* --- KART MODU (≤768px): her satır bir kart --- */
@media (max-width: 768px) {
    .tablo thead { display: none; }
    .tablo tbody { display: grid; gap: var(--bosluk-3); }

    .tablo tbody tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--bosluk-3) var(--bosluk-2);
        padding: var(--bosluk-4);
        background: var(--renk-yuzey);
        border: 1px solid var(--renk-cizgi);
        border-radius: var(--radius-buyuk);
        box-shadow: var(--golge-2);
    }
    .tablo tbody td { min-width: 0; font-size: var(--olcek-kucuk); }
    .tablo tbody td::before {
        display: block;
        font-size: var(--olcek-mikro);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--renk-murekkep-3);
    }

    /* Kart yerleşimi — kolon SIRASINA göre (bkz. bölüm başındaki not).
       Kolon sırası (kullanıcı geri bildirimi 28 Tem): Kod, Üniversite, Şehir, Bölüm, YZ Etki,
       Sıra 2025/2024/2023, Taban 2025/2024/2023, Kont. 26, Dil, Burs, Ekle — Başarı Sırası
       TABAN PUAN'dan önce geldiğinden kart düzeni de aynı önceliği taşır: bölüm adı (başlık)
       → üniversite/şehir → YZ etki → birincil künye (SIRA önce) → ikincil veriler → Ekle. */
    .tablo tbody td:nth-child(4)  { grid-area: 1 / 1 / 2 / 4; font-family: var(--yazi-baslik); font-size: var(--olcek-orta); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
    .tablo tbody td:nth-child(2)  { grid-area: 2 / 1 / 3 / 3; color: var(--renk-murekkep-2); }
    .tablo tbody td:nth-child(3)  { grid-area: 2 / 3 / 3 / 4; text-align: right; color: var(--renk-murekkep-3); }
    .tablo tbody td:nth-child(5)  { grid-area: 3 / 1 / 4 / 4; }
    .tablo tbody td:nth-child(6)  { grid-area: 4 / 1 / 5 / 2; }
    .tablo tbody td:nth-child(9)  { grid-area: 4 / 2 / 5 / 3; }
    .tablo tbody td:nth-child(12) { grid-area: 4 / 3 / 5 / 4; }
    .tablo tbody td:nth-child(7)  { grid-area: 5 / 1 / 6 / 2; }
    .tablo tbody td:nth-child(8)  { grid-area: 5 / 2 / 6 / 3; }
    .tablo tbody td:nth-child(10) { grid-area: 5 / 3 / 6 / 4; }
    .tablo tbody td:nth-child(11) { grid-area: 6 / 1 / 7 / 2; }
    .tablo tbody td:nth-child(13) { grid-area: 6 / 2 / 7 / 3; }
    .tablo tbody td:nth-child(14) { grid-area: 6 / 3 / 7 / 4; }
    .tablo tbody td:nth-child(1)  { grid-area: 7 / 1 / 8 / 4; text-align: right; color: var(--renk-murekkep-3); }
    .tablo tbody td:nth-child(15) { grid-area: 8 / 1 / 9 / 4; }
    .tablo tbody td:nth-child(15) .dugme { width: 100%; }

    /* Birincil üçlü (Sıra 2025 / Taban 2025 / Kontenjan) kartın "künye" şeridi — sıra önce. */
    .tablo tbody td:nth-child(6),
    .tablo tbody td:nth-child(9),
    .tablo tbody td:nth-child(12) {
        padding: var(--bosluk-2);
        background: var(--renk-zemin-alt);
        border-radius: var(--radius-kucuk);
        font-size: var(--olcek-metin);
        font-weight: 700;
    }

    /* Kart başlıkları */
    .tablo tbody td:nth-child(1)::before  { content: "Program kodu"; }
    .tablo tbody td:nth-child(5)::before  { content: "Gelecek Riski"; }
    .tablo tbody td:nth-child(6)::before  { content: "Sıra 2025"; }
    .tablo tbody td:nth-child(7)::before  { content: "Sıra 2024"; }
    .tablo tbody td:nth-child(8)::before  { content: "Sıra 2023"; }
    .tablo tbody td:nth-child(9)::before  { content: "Taban 2025"; }
    .tablo tbody td:nth-child(10)::before { content: "Taban 2024"; }
    .tablo tbody td:nth-child(11)::before { content: "Taban 2023"; }
    .tablo tbody td:nth-child(12)::before { content: "Kontenjan 26"; }
    .tablo tbody td:nth-child(13)::before { content: "Dil"; }
    .tablo tbody td:nth-child(14)::before { content: "Burs"; }
    /* Task 10 isterse data-label ile ezebilir (aynı özgüllük, sonra geldiği için kazanır). */
    .tablo tbody td[data-label]::before { content: attr(data-label); }
}

.tablo-bos {
    display: none;
    padding: var(--bosluk-6) var(--bosluk-4);
    text-align: center;
    color: var(--renk-murekkep-2);
    background: var(--renk-yuzey);
    border: 1px dashed var(--renk-cizgi-koyu);
    border-radius: var(--radius-buyuk);
}
.tablo-sarmal:has(tbody:empty) + .tablo-bos { display: block; }

.sayfalama {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bosluk-3);
    margin-top: var(--bosluk-5);
}
.sayfalama-bilgi {
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--renk-murekkep-2);
}


/* ========================= 10 YZ ETKİ ROZETİ =========================
   Seviye `data-seviye` ile gelir: yuksek (>%70) · orta (%50-70) · dusuk (<%50)
   · yok (NULL → "—"). Rozet bir <button>'dır: dokunulabilir, klavyeyle
   odaklanabilir; açıklama masaüstünde `title`, mobil kartta .yz-ipucu ile görünür. */

.yz-rozet {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    /* Görsel yükseklik 32px; dokunma hedefi ::after ile 44px'e genişletilir (aşağıda).
       Rozeti doğrudan 44px yapmak, 15px'lik bir sayının etrafında şişkin bir balon
       bırakıyordu — erişilebilirlik hedefi görünürlükten ödün vermeden karşılanıyor. */
    min-height: 32px;
    padding: 0 var(--bosluk-3);
    background: var(--renk-notr-fon);
    color: var(--renk-notr);
    border: 1px solid transparent;
    border-radius: var(--radius-tam);
    font: inherit;
    font-size: var(--olcek-metin);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    /* was cursor:help — rozet artık tıklanabilir bir açma/kapama düğmesi (YZ detay paneli,
       bkz. 10B), sadece bir ipucu göstergesi DEĞİL. */
    cursor: pointer;
    transition: box-shadow var(--gecis-hizli) var(--yumusak), transform var(--gecis-hizli) var(--esneme);
}
.yz-rozet::before {
    content: "";
    width: 7px; height: 7px;
    margin-right: var(--bosluk-1);
    border-radius: var(--radius-tam);
    background: currentColor;
}
/* Görünmez dokunma yastığı: 32px + 2×6px = 44px (WCAG 2.2 hedef boyutu). */
.yz-rozet::after {
    content: "";
    position: absolute;
    inset: -6px -2px;
}
.yz-birim { font-size: var(--olcek-kucuk); font-weight: 600; opacity: 0.7; }
.yz-rozet[data-seviye="yuksek"] { background: var(--renk-tehlike-fon); color: var(--renk-tehlike); }
.yz-rozet[data-seviye="orta"]   { background: var(--renk-uyari-fon);   color: var(--renk-uyari); }
.yz-rozet[data-seviye="dusuk"]  { background: var(--renk-guven-fon);   color: var(--renk-guven); }
.yz-rozet[data-seviye="yok"]::before { display: none; }
@media (hover: hover) {
    .yz-rozet:hover { transform: translateY(-1px); box-shadow: var(--golge-1); border-color: currentColor; }
}

.yz-ipucu {
    display: block;
    margin-top: var(--bosluk-1);
    font-size: var(--olcek-mikro);
    line-height: 1.4;
    color: var(--renk-murekkep-3);
}


/* ======================= 10B YZ DETAY PANELİ =======================
   Rozete tıklama/Enter-Space ile açılır: bir <tr class="yz-detay-satir"><td colspan="…">
   satırın HEMEN ALTINA eklenir (bkz. app-tablo.js yzRozetTikla()) — aynı anda TEK panel
   açık kalır. Görünür kart GÖVDESİ her zaman .yz-detay-panel'dedir; tr/td sadece nötr bir
   taşıyıcıdır — bu SAYEDE 09'daki (kart modu / masaüstü) `td:nth-child(1)` seçicilerinin
   (tek çocuklu bu satırda da eşleşen) kalıntı stilleri (renk/punto/grid-area/::before
   etiketi) burada AÇIKÇA sıfırlanır, aksi halde panel yanlışlıkla "Program kodu" etiketli
   küçük gri sağa-yaslı metin gibi görünürdü. */

/* "Detaylar" etiketi (kullanıcı geri bildirimi 29 Tem: rozetin tıklanabilir olduğu belli
   değildi). Yüzdeden ince bir çizgiyle ayrılır — aynı düğmenin parçası olduğu belli olsun ama
   sayının okunurluğuyla yarışmasın. Rengini rozet seviyesinden (currentColor) alır. */
.yz-detay-etiket {
    flex: 0 0 auto;
    margin-left: var(--bosluk-2);
    padding-left: var(--bosluk-2);
    border-left: 1px solid currentColor;
    font-size: var(--olcek-mikro);
    font-weight: 500;
    letter-spacing: 0.01em;
    opacity: 0.8;
    white-space: nowrap;
}
/* Yavaş nabız (kullanıcı isteği 29 Tem: "Detaylar yanıp sönsün, yavaşça"): etiketin
   tıklanabilir olduğunu sezdirir. Uzun bir döngü (3.2sn) ve yalnızca saydamlık değişimi
   seçildi — hızlı ya da renk/konum değiştiren bir yanıp sönme, bir tablo dolusu satırda
   okumayı zorlaştırırdı. Tek/çift satırlara farklı gecikme verilir ki tüm rozetler AYNI
   ANDA yanıp sönmesin (aynı fazda yanıp sönen bir duvar, sayfayı titriyormuş gibi gösterir).
   `prefers-reduced-motion: reduce` bloğu (bkz. dosya sonu) süreyi 0.001ms'ye indirdiğinden
   hareket duyarlılığı olan kullanıcıda nabız KENDİLİĞİNDEN devre dışı kalır. */
@keyframes yzDetayNabiz {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* Yüzde AYNI RİTİMDE ama DAHA SIĞ söner (kullanıcı isteği 29 Tem: "yüzdeler de aynı şekilde
   olsun"). Sayı bu sütunun ASIL VERİSİ; etiketle aynı derinlikte (0.45) sönseydi okunurluğu
   döngünün yarısında düşerdi. Süre/gecikme etiketle birebir aynı olduğundan ikisi TEK NABIZ
   gibi birlikte hareket eder, yalnızca genlik farklıdır. */
@keyframes yzSayiNabiz {
    0%, 100% { opacity: 0.68; }
    50%      { opacity: 1; }
}
.yz-detay-etiket { animation: yzDetayNabiz 3.2s ease-in-out infinite; }
.yz-sayi, .yz-birim { animation: yzSayiNabiz 3.2s ease-in-out infinite; }

/* Gecikme kovaları ÜÇLÜ: her program satırının ardında bir `tr.meslek-satir` bulunabildiği
   (meslek verisi olmayan satırda bulunmadığı) için tek/çift deseni güvenilir değildir —
   nitekim ilk denemede tüm rozetler 0s gecikmeyle AYNI FAZDA yanıp söndü. Üç kova, şerit
   olsun olmasın satırları farklı fazlara dağıtır. */
.tablo tbody tr:nth-child(3n+2) .yz-detay-etiket,
.tablo tbody tr:nth-child(3n+2) .yz-sayi,
.tablo tbody tr:nth-child(3n+2) .yz-birim { animation-delay: 1.1s; }
.tablo tbody tr:nth-child(3n)   .yz-detay-etiket,
.tablo tbody tr:nth-child(3n)   .yz-sayi,
.tablo tbody tr:nth-child(3n)   .yz-birim { animation-delay: 2.1s; }

/* Etkileşim ya da panel açıkken nabız durur: dikkat çekmenin işi bitmiştir, sürmesi
   rahatsız ederdi. */
.yz-rozet:hover .yz-detay-etiket,
.yz-rozet:hover .yz-sayi,
.yz-rozet:hover .yz-birim,
.yz-rozet:focus-visible .yz-detay-etiket,
.yz-rozet:focus-visible .yz-sayi,
.yz-rozet:focus-visible .yz-birim,
.yz-rozet[aria-expanded="true"] .yz-detay-etiket,
.yz-rozet[aria-expanded="true"] .yz-sayi,
.yz-rozet[aria-expanded="true"] .yz-birim {
    animation: none;
    opacity: 1;
}

/* Değerlendirmesi olmayan satırda ("—") açılacak bir gerekçe yoktur — etiket gizlenir. */
.yz-rozet[data-seviye="yok"] .yz-detay-etiket { display: none; }

.yz-rozet-ok {
    flex: 0 0 auto;
    width: 6px; height: 6px;
    margin-left: var(--bosluk-1);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.85;
    transform: rotate(45deg);
    transition: transform var(--gecis-normal) var(--esneme);
}
.yz-rozet[data-seviye="yok"] .yz-rozet-ok { margin-left: var(--bosluk-1); }
.yz-rozet[aria-expanded="true"] .yz-rozet-ok { transform: rotate(225deg) translate(1px, 1px); }
.yz-rozet[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px currentColor; }

.yz-detay-panel {
    padding: var(--bosluk-4);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-left: 3px solid var(--renk-notr);
    border-radius: var(--radius-orta);
    box-shadow: var(--golge-1);
}
.yz-detay-panel[data-seviye="yuksek"] { border-left-color: var(--renk-tehlike); }
.yz-detay-panel[data-seviye="orta"]   { border-left-color: var(--renk-uyari); }
.yz-detay-panel[data-seviye="dusuk"]  { border-left-color: var(--renk-guven); }

/* Bölüm tanımı — panelin EN ÜSTÜNDE (bölüm başlığının altında, bkz. app-tablo.js
   yzDetayIcerigiOlustur()); tanim YOKSA bu paragraf hiç eklenmez. */
.yz-detay-tanim {
    margin: 0 0 var(--bosluk-3);
    font-size: var(--olcek-kucuk);
    line-height: 1.5;
    color: var(--renk-murekkep-3);
}
.yz-detay-baslik {
    margin: 0 0 var(--bosluk-2);
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-orta);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--renk-murekkep);
}
.yz-detay-aciklama {
    margin: 0 0 var(--bosluk-3);
    font-size: var(--olcek-kucuk);
    line-height: 1.5;
    color: var(--renk-murekkep-2);
}

/* Meslek çipleri (brief: "her bölüm mezununun yapabileceği 5 popüler meslek") — tanım/açıklamanın
   ALTINDA, "Mezunlar genelde şu işleri yapar" başlığıyla gösterilir (bkz. app-tablo.js
   yzDetayIcerigiOlustur()). meslekler BOŞSA başlık da çip listesi de HİÇ eklenmez (JS tarafında
   koşullu — yer kaplamaz). .meslek-cip TIKLANAMAZ: salt bir etiket (span, button DEĞİL). */
.yz-detay-meslek-baslik {
    margin: 0 0 var(--bosluk-2);
    font-size: var(--olcek-mikro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--renk-murekkep-3);
}
.meslek-cip-listesi {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bosluk-2);
    margin: 0 0 var(--bosluk-3);
}
.meslek-cip {
    display: inline-flex;
    align-items: center;
    padding: var(--bosluk-1) var(--bosluk-3);
    background: var(--renk-zemin-alt);
    color: var(--renk-murekkep-2);
    border-radius: var(--radius-tam);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    line-height: 1.3;
}

.yz-detay-dayanak-baslik {
    margin: 0 0 var(--bosluk-2);
    font-size: var(--olcek-mikro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--renk-murekkep-3);
}
.yz-detay-yakinda {
    margin: 0;
    font-size: var(--olcek-kucuk);
    font-style: italic;
    color: var(--renk-murekkep-3);
}
.yz-kaynak-listesi {
    display: flex;
    flex-direction: column;
    gap: var(--bosluk-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.yz-kaynak-oge {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bosluk-1) var(--bosluk-3);
    padding: var(--bosluk-2) var(--bosluk-3);
    background: var(--renk-zemin-alt);
    border-radius: var(--radius-kucuk);
    font-size: var(--olcek-kucuk);
}
.yz-kaynak-metin { color: var(--renk-murekkep-2); }
.yz-kaynak-link {
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--renk-vurgu-koyu);
    white-space: nowrap;
}
@media (hover: hover) {
    .yz-kaynak-link:hover { text-decoration-thickness: 2px; }
}

/* Kart modu (≤768px): 09'daki `td:nth-child(1)` kalıntılarının sıfırlanması (bkz. bölüm
   başındaki not) — özgüllük KASITLI OLARAK 09'daki karşılığından yüksek tutulur (fazladan
   `.yz-detay-satir` sınıfı + eleman sayısı), sıra/kaynak dosyası ÖNEMLİ DEĞİLDİR. */
@media (max-width: 768px) {
    /* Program kartı ile detay paneli TEK KART gibi görünür (kullanıcı geri bildirimi 29 Tem:
       "ayrı bir kart gibi duruyor, birleştirir misin"). Kart çerçevesi ÜSTTEKİ satırda kalır;
       detay satırı aynı çerçevenin devamı olarak yapışır:
         · üstteki satır (.yz-acik) alt köşe yuvarlaklığını ve alt kenarlığını bırakır,
         · detay satırı tbody'nin `gap`'ini negatif üst kenar boşluğuyla kapatır,
         · detay satırı kart yüzeyini/kenarlığını devralır, YALNIZCA alt köşeleri yuvarlar.
       İçerideki .yz-detay-panel ise kendi kart görünümünü BIRAKIR (çift çerçeve olmasın) —
       seviye rengini taşıyan sol şerit KORUNUR, panelin kimliği odur. */
    .tablo tbody tr.yz-acik {
        border-bottom-color: transparent;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        padding-bottom: var(--bosluk-3);
    }

    .tablo tbody tr.yz-detay-satir {
        display: block;
        margin-top: calc(-1 * var(--bosluk-3));   /* tbody gap'ini kapatır */
        padding: 0 var(--bosluk-4) var(--bosluk-4);
        background: var(--renk-yuzey);
        border: 1px solid var(--renk-cizgi);
        border-top: none;
        border-radius: 0 0 var(--radius-buyuk) var(--radius-buyuk);
        box-shadow: var(--golge-2);
    }
    .tablo tbody tr.yz-detay-satir td {
        display: block;
        grid-area: auto;
        text-align: left;
        color: inherit;
        font-size: inherit;
        padding: 0;
    }
    .tablo tbody tr.yz-detay-satir td::before { content: none; }

    .tablo tbody tr.yz-detay-satir .yz-detay-panel {
        padding: var(--bosluk-3) 0 0 var(--bosluk-3);
        background: transparent;
        border: none;
        border-left: 3px solid var(--renk-notr);
        border-radius: 0;
        box-shadow: none;
    }
}

/* Masaüstü (≥769px): 09'daki `td:nth-child(1)` renk/punto sıfırlaması + hover sızıntısı. */
@media (min-width: 769px) {
    .tablo tbody tr.yz-detay-satir td { color: inherit; font-size: var(--olcek-kucuk); }
    .tablo tbody tr.yz-detay-satir:hover td { background: transparent; }
}


/* ========================== 11 TERCİH PANELİ ==========================
   MOBİL: ekranın altına sabitlenmiş, tek elle erişilebilen bir çekmece.
   Kapalıyken sadece 56px'lik başlık çubuğu görünür (sayaç daima okunur).
   MASAÜSTÜ: sağda yapışkan sütun, daima açık. */

.panel-sarmal {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--renk-yuzey);
    border-top: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-buyuk) var(--radius-buyuk) 0 0;
    box-shadow: var(--golge-3);
}

.panel-basi {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
    min-height: 56px;
    padding: var(--bosluk-2) var(--kenar);
    cursor: pointer;
    list-style: none;
}
.panel-basi::-webkit-details-marker { display: none; }
.panel-ad {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-2);
    flex: 1;
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-orta);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.adim-rozet--panel { gap: 0; }
.adim-rozet--panel .adim-rozet-no { margin-right: var(--bosluk-2); }
.panel-sayac {
    padding: 0.2rem 0.6rem;
    background: var(--renk-vurgu-fon);
    color: var(--renk-vurgu-koyu);
    border-radius: var(--radius-tam);
    font-size: var(--olcek-kucuk);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.panel-govde {
    max-height: min(62vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--bosluk-4) var(--kenar) var(--bosluk-5);
    border-top: 1px solid var(--renk-cizgi);
}

.panel-paylasim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-3);
    padding: var(--bosluk-2) var(--bosluk-3);
    background: var(--renk-vurgu-fon);
    color: var(--renk-vurgu-koyu);
    border-radius: var(--radius-kucuk);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
}
/* "Görünümü kaydet" düğmesi bandın kendi metin akışının dışında, sağa yaslı görünür. */
.panel-paylasim .dugme--kucuk { margin-left: auto; }
/* Otomatik kayıt sonucu ("Kaydedildi ✓") — bant rengiyle uyumlu, kısa ömürlü küçük bir vurgu. */
.panel-paylasim-durum {
    font-size: var(--olcek-mikro);
    font-weight: 700;
    white-space: nowrap;
}

.dugme--kucuk {
    min-height: 2rem;
    padding: 0 var(--bosluk-3);
    font-size: var(--olcek-mikro);
}

/* İmza: numaralı sıra rayı. Numaralar CSS sayacından gelir — JS'in numara
   basmasına gerek yok, sadece <li> eklemesi yeter. */
.tercih-listesi { counter-reset: tercih; display: grid; gap: var(--bosluk-2); }
.tercih-listesi li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--bosluk-2);
    padding: var(--bosluk-2);
    background: var(--renk-zemin-alt);
    border-radius: var(--radius-orta);
    font-size: var(--olcek-kucuk);
}
.tercih-listesi li::before {
    counter-increment: tercih;
    content: counter(tercih);
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    background: var(--renk-vurgu);
    color: #fff;
    border-radius: var(--radius-tam);
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.tercih-bos {
    display: none;
    padding: var(--bosluk-4);
    background: var(--renk-zemin-alt);
    border: 1px dashed var(--renk-cizgi-koyu);
    border-radius: var(--radius-orta);
    font-size: var(--olcek-kucuk);
    color: var(--renk-murekkep-2);
    text-wrap: pretty;
}
/* Liste boşken yönlendirme metnini göster (JS bir <li> eklediği an kendiliğinden kaybolur). */
#tercih-listesi:empty + .tercih-bos { display: block; }

.panel-eylemler { display: grid; gap: var(--bosluk-2); margin-top: var(--bosluk-4); }
.panel-not { margin-top: var(--bosluk-3); font-size: var(--olcek-mikro); color: var(--renk-murekkep-3); }


/* ====================== 12 AI PANELİ (dialog) ====================== */

.ai-panel {
    width: min(640px, calc(100vw - 2 * var(--bosluk-4)));
    max-height: min(80vh, 720px);
    padding: 0;
    background: var(--renk-yuzey);
    color: var(--renk-murekkep);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-buyuk);
    box-shadow: var(--golge-2);
}
.ai-panel::backdrop { background: oklch(23% 0.028 275 / 0.45); backdrop-filter: blur(2px); }
.ai-basi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-3);
    padding: var(--bosluk-4);
    border-bottom: 1px solid var(--renk-cizgi);
}
.ai-baslik { font-size: var(--olcek-h3); }
.ai-icerik { padding: var(--bosluk-4); overflow-y: auto; }
.ai-bos { color: var(--renk-murekkep-3); }

/* --- AI yükleniyor iskeleti (Task 11) --- */
.ai-yukleniyor { display: grid; gap: var(--bosluk-2); }
.ai-yukleniyor-satir {
    height: 14px;
    border-radius: var(--radius-kucuk);
    background: linear-gradient(90deg, var(--renk-zemin-alt) 25%, var(--renk-cizgi) 37%, var(--renk-zemin-alt) 63%);
    background-size: 200% 100%;
    animation: iskelet-parla 1.4s ease-in-out infinite;
}
.ai-yukleniyor-satir:nth-child(2) { width: 85%; }
.ai-yukleniyor-satir:nth-child(3) { width: 65%; }

.ai-yorum { margin: 0 0 var(--bosluk-4); color: var(--renk-murekkep-2); text-wrap: pretty; }
.ai-tumunu-ekle-btn { margin-bottom: var(--bosluk-4); }

/* --- AI öneri: gruplu sonuç (garanti/normal/hayal) --- */
.oneri-grup { margin-bottom: var(--bosluk-4); padding-left: var(--bosluk-3); border-left: 4px solid; }
.oneri-grup--garanti { border-color: var(--renk-guven); }
.oneri-grup--normal   { border-color: var(--renk-uyari); }
.oneri-grup--hayal    { border-color: var(--renk-tehlike); }
.oneri-grup-baslik { font-family: var(--yazi-baslik); font-size: var(--olcek-orta); font-weight: 700; margin: 0 0 var(--bosluk-2); }
.oneri-liste { display: grid; gap: var(--bosluk-3); list-style: none; margin: 0; padding: 0; }
.oneri-oge { display: grid; gap: var(--bosluk-1); padding: var(--bosluk-3); background: var(--renk-zemin-alt); border-radius: var(--radius-orta); }
.oneri-oge-baslik { margin: 0; font-weight: 700; }
.oneri-oge-sehir { margin: 0; font-size: var(--olcek-kucuk); color: var(--renk-murekkep-3); }
.oneri-yz {
    justify-self: start;
    padding: 2px var(--bosluk-2);
    border-radius: var(--radius-tam);
    background: var(--renk-vurgu-fon);
    color: var(--renk-vurgu-koyu);
    font-size: var(--olcek-mikro);
    font-weight: 700;
}
.oneri-gerekce { margin: 0; font-size: var(--olcek-kucuk); color: var(--renk-murekkep-2); text-wrap: pretty; }
.oneri-oge .dugme--ekle { justify-self: start; margin-top: var(--bosluk-1); }

/* --- Analiz: durum rozetleri + öneriler --- */
.analiz-liste { display: grid; gap: var(--bosluk-3); list-style: none; margin: 0 0 var(--bosluk-4); padding: 0; }
.analiz-oge { display: grid; gap: var(--bosluk-1); padding: var(--bosluk-3); background: var(--renk-zemin-alt); border-radius: var(--radius-orta); }
.analiz-oge-baslik { margin: 0; font-weight: 700; }
.analiz-durum {
    justify-self: start;
    padding: 2px var(--bosluk-3);
    border-radius: var(--radius-tam);
    font-size: var(--olcek-mikro);
    font-weight: 700;
}
.analiz-durum[data-durum="guvenli"] { background: var(--renk-guven-fon); color: var(--renk-guven); }
.analiz-durum[data-durum="dengeli"] { background: var(--renk-uyari-fon); color: var(--renk-uyari); }
.analiz-durum[data-durum="riskli"]  { background: var(--renk-tehlike-fon); color: var(--renk-tehlike); }
.analiz-yorum { margin: 0; font-size: var(--olcek-kucuk); color: var(--renk-murekkep-2); text-wrap: pretty; }
.analiz-oneriler-baslik { font-family: var(--yazi-baslik); font-size: var(--olcek-orta); font-weight: 700; margin: var(--bosluk-2) 0; }
.analiz-oneriler { margin: 0; padding-left: var(--bosluk-5); display: grid; gap: var(--bosluk-1); font-size: var(--olcek-kucuk); color: var(--renk-murekkep-2); }

.kapat {
    display: grid;
    place-items: center;
    width: var(--dokunma); height: var(--dokunma);
    background: var(--renk-zemin-alt);
    color: var(--renk-murekkep-2);
    border: 0;
    border-radius: var(--radius-tam);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--gecis-hizli) var(--yumusak);
}
.kapat:hover { background: var(--renk-cizgi); color: var(--renk-murekkep); }


/* ============================= 13 SOHBET ============================= */

.sohbet-baloncuk {
    position: fixed;
    right: var(--kenar);
    bottom: calc(56px + env(safe-area-inset-bottom) + var(--bosluk-3));
    z-index: 45;
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-2);
    min-height: var(--dokunma);
    padding: 0 var(--bosluk-4);
    background: var(--renk-murekkep);
    color: var(--renk-yuzey);
    border: 0;
    border-radius: var(--radius-tam);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--golge-2);
    transition: transform var(--gecis-normal) var(--esneme), background-color var(--gecis-hizli) var(--yumusak);
}
.sohbet-baloncuk:hover { background: var(--renk-vurgu); transform: translateY(-2px); }
.sohbet-ikon svg { width: 20px; height: 20px; }

/* Tercih çekmecesi AÇIKKEN balon gizlenir.
   Neden: mobilde çekmece ekranın altını bir bottom-sheet olarak SAHİPLENİR ve son eylemi
   (#paylas-btn) tam da balonun durduğu sağ-alt köşeye getirir — balon o düğmenin sağ üst
   köşesini örtüyordu (360/390/430px'te hit-test ile doğrulandı).
   Neden "yukarı taşı" değil: çekmecenin açık yüksekliği İÇERİĞE bağlıdır (boş listede
   ~385px, dolu listede max-height'e dayanıp ~552px) ve CSS bunu okuyamaz; sabit bir
   `bottom` hesabı iki durumdan birinde ya hâlâ örter ya da balonu ekranın ortasında
   asılı bırakır. Gizleme her viewport yüksekliğinde deterministiktir.
   Erişilebilirlik: çekmecenin 56px'lik başlığı daima görünür; kapatınca balon geri gelir.
   Masaüstünde (panel yapışkan sütun) bu kural geri alınır — bkz. iki sütun bloğu. */
body:has(#tercih-paneli[open]) .sohbet-baloncuk { display: none; }

.sohbet-pencere {
    position: fixed;
    z-index: 46;
    inset-inline: var(--bosluk-3);
    bottom: calc(56px + env(safe-area-inset-bottom) + var(--bosluk-3));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: min(70vh, 560px);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-buyuk);
    box-shadow: var(--golge-2);
    overflow: hidden;
}
.sohbet-pencere[hidden] { display: none; }
.sohbet-basi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-2);
    padding: var(--bosluk-2) var(--bosluk-3);
    border-bottom: 1px solid var(--renk-cizgi);
}
.sohbet-baslik { font-family: var(--yazi-baslik); font-weight: 700; letter-spacing: -0.02em; }
.sohbet-mesajlar { display: grid; gap: var(--bosluk-2); padding: var(--bosluk-3); overflow-y: auto; align-content: start; }
.sohbet-mesaj {
    max-width: 85%;
    padding: var(--bosluk-2) var(--bosluk-3);
    border-radius: var(--radius-orta);
    font-size: var(--olcek-kucuk);
    text-wrap: pretty;
}
/* 4px BİLEREK sabit: yarıçap ölçeğinde (10/14/18/tam) böyle bir kademe yok; bu, baloncuk
   kuyruğunu işaret eden yerel bir "kırık köşe"dir — token'lık genel bir değer değil. */
.sohbet-mesaj--bot { background: var(--renk-zemin-alt); border-bottom-left-radius: 4px; }
.sohbet-mesaj--ben { justify-self: end; background: var(--renk-vurgu); color: #fff; border-bottom-right-radius: 4px; }

/* Yazıyor göstergesi (Task 11) — üç nokta; prefers-reduced-motion'da genel kural (bölüm 14)
   animation-duration'ı sıfıra indirip statik bırakır. */
.sohbet-yaziyor { display: inline-flex; align-items: center; gap: 4px; padding-block: var(--bosluk-2); }
.sohbet-yaziyor-nokta {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--renk-murekkep-3);
    animation: sohbet-yaziyor-zip 1.1s ease-in-out infinite;
}
.sohbet-yaziyor-nokta:nth-child(2) { animation-delay: 0.15s; }
.sohbet-yaziyor-nokta:nth-child(3) { animation-delay: 0.3s; }
@keyframes sohbet-yaziyor-zip {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

.sohbet-alt { display: flex; gap: var(--bosluk-2); padding: var(--bosluk-3); border-top: 1px solid var(--renk-cizgi); }
.sohbet-alt .girdi { flex: 1; min-width: 0; }
/* #sohbet-girdi bir <textarea>'dır (Shift+Enter yeni satır desteği için) — tek satırlık bir
   <input> GÖRÜNÜMÜNÜ korur (sabit yükseklik, kaydırma taşarsa devreye girer, elle boyutlandırma
   kapalı — brief'in "Enter gönderir" akışıyla çelişecek bir serbest yeniden boyutlandırma yok). */
textarea.sohbet-girdi {
    resize: none;
    max-height: 96px;
    padding-block: var(--bosluk-2);
    line-height: 1.3;
}


/* ======================= 14 DİP + HAREKET AZALTMA ======================= */

.dip {
    margin-top: var(--bosluk-bolum);
    padding: var(--bosluk-5) 0 var(--bosluk-6);
    border-top: 1px solid var(--renk-cizgi);
}
.dip-ad { font-family: var(--yazi-baslik); font-weight: 700; letter-spacing: -0.03em; }
.dip-not { margin-top: var(--bosluk-2); max-width: 60ch; font-size: var(--olcek-kucuk); color: var(--renk-murekkep-3); text-wrap: pretty; }

/* Üyelik: başlık düğmesi + giriş/kayıt penceresi (app-giris.js) */
.ust-sag {
    display: flex;
    align-items: center;
    gap: var(--bosluk-3);
}
.ust-giris { white-space: nowrap; }
.giris-panel {
    width: min(420px, calc(100vw - 2 * var(--bosluk-4)));
    padding: 0 0 var(--bosluk-4);
    background: var(--renk-yuzey);
    color: var(--renk-murekkep);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-buyuk);
    box-shadow: var(--golge-2);
}
.giris-panel::backdrop { background: oklch(23% 0.028 275 / 0.45); backdrop-filter: blur(2px); }
.giris-form {
    display: grid;
    gap: var(--bosluk-2);
    padding: var(--bosluk-3) var(--bosluk-4) 0;
}
.giris-form .etiket { margin-top: var(--bosluk-2); }
.giris-form .dugme--birincil { margin-top: var(--bosluk-3); }
.giris-opsiyonel { font-weight: 400; color: var(--renk-murekkep-3); }
.giris-onay {
    display: flex;
    gap: var(--bosluk-2);
    align-items: flex-start;
    margin-top: var(--bosluk-2);
    font-size: var(--olcek-kucuk);
    color: var(--renk-murekkep-2);
}
.giris-onay input { margin-top: 0.2em; }
.giris-hata {
    margin: 0;
    font-size: var(--olcek-kucuk);
    color: oklch(45% 0.19 25);
}
.giris-not { margin: 0; font-size: var(--olcek-kucuk); color: var(--renk-murekkep-2); text-wrap: pretty; }
.giris-gecis { margin: var(--bosluk-2) 0 0; font-size: var(--olcek-kucuk); color: var(--renk-murekkep-2); }
.giris-baglanti {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: var(--renk-vurgu);
    text-decoration: underline;
    cursor: pointer;
}
/* Paylaşım seçeneği (30 Tem — çaprazlama kontrolü) */
.paylasim-secenek { margin-top: var(--bosluk-3); }
.onay--paylasim {
    display: flex;
    align-items: flex-start;
    gap: var(--bosluk-2);
    font-size: var(--olcek-kucuk);
    color: var(--renk-murekkep-2);
    cursor: pointer;
}
.onay--paylasim input { margin-top: 0.2em; }

/* Yapay zekâ bekleme durumu (kullanıcı isteği 30 Tem): spinner + sırayla ilerleyen adım
   metni. Metin DEĞİŞTİĞİNDE yumuşak bir geçiş yoktur — bilinçli: her adım net biçimde
   "yeni bir bilgi" olarak okunmalı, solup belirmesi okumayı yavaşlatırdı. */
.ai-yukleniyor-durum {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-3);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    color: var(--renk-vurgu-koyu);
}
.ai-spinner {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid var(--renk-vurgu-fon-2);
    border-top-color: var(--renk-vurgu);
    border-radius: 50%;
    animation: aiSpinner 0.8s linear infinite;
}
@keyframes aiSpinner {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    /* Dönme kaldırılır ama gösterge KAYBOLMAZ: "bir şey oluyor" bilgisi hareketten değil
       varlığından gelmeli. Nabız yerine sabit bir halka bırakılır. */
    .ai-spinner { animation: none; border-top-color: var(--renk-vurgu); }
}

/* Panel başlığındaki paylaş kısa yolu (30 Tem) — sayaç ile açma okunun arasında durur. */
.panel-basi-paylas {
    display: inline-flex;
    align-items: center;
    gap: var(--bosluk-1);
    min-height: 34px;
    margin-left: var(--bosluk-2);
    padding: 0 var(--bosluk-3);
    background: var(--renk-vurgu-fon);
    color: var(--renk-vurgu-koyu);
    border: 1px solid var(--renk-vurgu-fon-2);
    border-radius: var(--radius-tam);
    font: inherit;
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    cursor: pointer;
}
.panel-basi-paylas .ikon { width: 15px; height: 15px; }
@media (hover: hover) {
    .panel-basi-paylas:hover { background: var(--renk-vurgu-fon-2); }
}
@media (max-width: 480px) {
    /* Çok dar ekranda yalnızca ikon kalır: sayaç + ad + düğme + ok bir satıra sığmıyor. */
    .panel-basi-paylas-ad { display: none; }
    .panel-basi-paylas { padding: 0 var(--bosluk-2); }
}

/* Mobil sıralama çipleri (kullanıcı isteği 29 Tem) — masaüstünde kolon başlıkları bu işi
   yapar, kart görünümünde başlık olmadığı için sıralamanın tek yolu bunlardır. Yatay kaydırılır:
   altı seçenek 390px'e sığmaz, alt alta dizmek de listeyi aşağı iterdi. */
.mobil-sirala { display: none; }
.mobil-sirala-etiket {
    display: block;
    margin-bottom: var(--bosluk-2);
    font-size: var(--olcek-mikro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--renk-murekkep-3);
}
.mobil-sirala-cipler {
    display: flex;
    gap: var(--bosluk-2);
    overflow-x: auto;
    padding-bottom: var(--bosluk-1);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mobil-sirala-cipler::-webkit-scrollbar { display: none; }
.sirala-cip {
    flex: 0 0 auto;
    min-height: var(--dokunma);
    padding: 0 var(--bosluk-3);
    background: var(--renk-yuzey);
    color: var(--renk-murekkep-2);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-tam);
    font: inherit;
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.sirala-cip[aria-pressed="true"] {
    background: var(--renk-vurgu);
    color: oklch(100% 0 0);
    border-color: var(--renk-vurgu);
}

/* Mobil detay penceresi — içerik satır altı panelle AYNI üreticiden gelir, bu yüzden panelin
   kart görünümünü burada bırakıyoruz (pencerenin kendi çerçevesi var). */
.yz-modal { width: min(460px, calc(100vw - var(--bosluk-3))); max-height: 88vh; }
.yz-modal-icerik { padding: var(--bosluk-3) var(--bosluk-4) var(--bosluk-4); overflow-y: auto; }
.yz-modal-icerik .yz-detay-panel {
    padding: 0 0 0 var(--bosluk-3);
    background: transparent;
    border: none;
    border-left: 3px solid var(--renk-notr);
    border-radius: 0;
    box-shadow: none;
}
.yz-modal-icerik .yz-detay-panel[data-seviye="yuksek"] { border-left-color: var(--renk-tehlike); }
.yz-modal-icerik .yz-detay-panel[data-seviye="orta"]   { border-left-color: var(--renk-uyari); }
.yz-modal-icerik .yz-detay-panel[data-seviye="dusuk"]  { border-left-color: var(--renk-guven); }

@media (max-width: 768px) {
    .mobil-sirala { display: block; margin-bottom: var(--bosluk-4); }
    /* Açılır sıralama listesi mobilde GİZLENİR: aynı işi yapan iki denetim yan yana
       durursa hangisinin geçerli olduğu belirsizleşir (çipler seçimi bu listeye de yazar). */
    .sonuc-basi .alan--sirala { display: none; }
}

/* Kilitli risk rozeti (30 Tem) — veri sunucuda kesildiği için burada gösterilecek bir sayı
   YOKTUR; rozet doğrudan satın almaya çağırır. */
.yz-rozet[data-seviye="kilit"] {
    background: var(--renk-vurgu-fon);
    color: var(--renk-vurgu-koyu);
    border-color: var(--renk-vurgu-fon-2);
    font-weight: 600;
}
.yz-rozet[data-seviye="kilit"] .yz-detay-etiket { animation: none; opacity: 1; }

/* ==================== PAKET SAYFASI (satin-al.php, 30 Tem) ==================== */
.sa-durum {
    margin: var(--bosluk-4) 0;
    padding: var(--bosluk-3);
    background: var(--renk-vurgu-fon);
    border-radius: var(--radius-orta);
    font-size: var(--olcek-kucuk);
}
.sa-grup-baslik {
    margin-top: var(--bosluk-6);
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-h3);
}
.sa-grup-baslik--ikinci { margin-top: var(--bosluk-7); }
.sa-grup-not { margin-top: var(--bosluk-2); font-size: var(--olcek-kucuk); color: var(--renk-murekkep-2); max-width: 60ch; }
.sa-birim { font-size: var(--olcek-kucuk); color: var(--renk-murekkep-3); }
.sa-paket--link { padding: var(--bosluk-4); }
.sa-paket--link .sa-fiyat-sayi { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.4rem); }

.sa-paketler { display: grid; gap: var(--bosluk-4); margin-top: var(--bosluk-4); list-style: none; padding: 0; }
@media (min-width: 820px) {
    .sa-paketler { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (min-width: 900px) {
    /* Link paketleri ÜÇ kolon — kıyaslama tek bakışta yapılsın. Bu blok iki-kolon
       kuralından SONRA gelmek ZORUNDA: aynı özgüllükte son kural kazanır (önce yazıldığında
       2 kolonda kalıyordu, 30 Tem'de ekran görüntüsünde görüldü). */
    .sa-paketler--link { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sa-paket {
    position: relative;
    display: grid;
    gap: var(--bosluk-2);
    padding: var(--bosluk-5);
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-buyuk);
    box-shadow: var(--golge-1);
}
/* Önerilen paket öne çıkar: iki kart eşit ağırlıkta olsa kullanıcı kıyaslamak için
   ekstra çaba harcardı. */
.sa-paket--onerilen {
    border-color: var(--renk-vurgu);
    box-shadow: 0 24px 60px -30px oklch(45% 0.19 275 / 0.45);
}
.sa-etiket {
    padding: 2px var(--bosluk-2);
    background: var(--renk-vurgu);
    color: oklch(100% 0 0);
    border-radius: var(--radius-tam);
    font-size: var(--olcek-mikro);
    font-weight: 700;
    text-transform: uppercase;
    justify-self: start;
}
.sa-paket-ad { font-family: var(--yazi-baslik); font-size: var(--olcek-h3); }
.sa-fiyat { font-family: var(--yazi-baslik); color: var(--renk-murekkep-2); }
.sa-fiyat-sayi {
    font-size: clamp(2.2rem, 1.4rem + 3vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--renk-murekkep);
    font-variant-numeric: tabular-nums;
}
.sa-ozellikler { display: grid; gap: var(--bosluk-2); margin: var(--bosluk-3) 0; padding: 0; list-style: none; }
.sa-ozellik { position: relative; padding-left: calc(var(--bosluk-4) + 4px); font-size: var(--olcek-kucuk); line-height: 1.5; }
.sa-ozellik::before { position: absolute; left: 0; font-weight: 700; }
.sa-ozellik--var::before { content: "\2713"; color: var(--renk-guven); }
/* Pakette OLMAYAN özellik gizlenmez, ÜSTÜ ÇİZİLİR — kıyaslama eksikler görünürse yapılır. */
.sa-ozellik--yok { color: var(--renk-murekkep-3); text-decoration: line-through; }
.sa-ozellik--yok::before { content: "\2014"; color: var(--renk-murekkep-3); }
.sa-hata {
    margin-top: var(--bosluk-4);
    padding: var(--bosluk-3);
    background: var(--renk-tehlike-fon);
    color: var(--renk-tehlike);
    border-radius: var(--radius-kucuk);
    font-size: var(--olcek-kucuk);
}
#sa-cerceve { margin-top: var(--bosluk-5); }
#sa-iframe { width: 100%; min-height: 620px; border: 0; }

/* Ödeme penceresi (29 Tem) — giriş penceresinin görünümünü paylaşır, PayTR çerçevesi için
   biraz daha geniştir. Çerçeve yüksekliği PayTR'nin önerdiği asgari ölçüdür; daha kısa
   verilirse kart formu kendi içinde kayar ve mobilde kullanılamaz hâle gelir. */
.odeme-panel { width: min(520px, calc(100vw - 2 * var(--bosluk-4))); }
.odeme-cerceve { padding: var(--bosluk-3) var(--bosluk-4) 0; }
.odeme-cerceve #odeme-iframe {
    width: 100%;
    min-height: 560px;
    margin-top: var(--bosluk-3);
    border: 0;
}
.ust-satinal { white-space: nowrap; }

@media (max-width: 768px) {
    /* Mobilde ödeme çerçevesi ekranı doldurur: kart formu küçük bir kutuda sıkışmamalı. */
    .odeme-panel { width: calc(100vw - var(--bosluk-3)); max-height: 92vh; }
    .odeme-cerceve #odeme-iframe { min-height: 68vh; }
    /* Başlıkta üç düğme birden sığmaz; satın alma metni kısalır. */
    .ust-satinal { padding-inline: var(--bosluk-2); font-size: var(--olcek-kucuk); }
}

.giris-kod { letter-spacing: 0.4em; font-size: var(--olcek-orta); text-align: center; }

/* Hukuki linkler + satıcı bilgileri (PayTR başvurusu için sitede görünür olması zorunlu) */
.dip-hukuk {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--bosluk-2) var(--bosluk-3);
    margin-top: var(--bosluk-4);
    padding-top: var(--bosluk-3);
    border-top: 1px solid var(--renk-cizgi);
    font-size: var(--olcek-kucuk);
}
.dip-hukuk-etiket {
    font-family: var(--yazi-baslik);
    font-weight: 700;
    font-size: var(--olcek-mikro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--renk-vurgu);
}
.dip-hukuk a { color: var(--renk-murekkep-2); text-decoration: none; }
.dip-hukuk a:hover, .dip-hukuk a:focus-visible { color: var(--renk-vurgu); text-decoration: underline; }
.dip-satici {
    margin-top: var(--bosluk-3);
    font-size: var(--olcek-mikro);
    color: var(--renk-murekkep-3);
    line-height: 1.7;
}
.dip-satici p { margin: 0; }
.dip-satici-baslik { font-weight: 600; color: var(--renk-murekkep-2); }
.dip-satici a { color: inherit; }


/* ==================== 15 İKONLAR + TASK 10 BİLEŞENLERİ ====================
   assets/icons.svg sprite'ından <svg class="ikon"><use href="…#ad"></use></svg>
   ile kullanılan ikonların ortak boyutu + Task 10'da eklenen küçük bileşenler
   (onay kutusu grupları, sıralanabilir tablo başlıkları, tercih satırı eylem
   düğmeleri, toast/bildirim). */

.ikon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    vertical-align: -0.15em;
}
.belge-ikon .ikon { width: 28px; height: 28px; }
.kapat .ikon { width: 20px; height: 20px; }

/* --- Onay kutusu grupları (Program türü / Üniversite türü / Öğretim / Burs) --- */
.onay-satir { display: flex; flex-wrap: wrap; gap: var(--bosluk-2) var(--bosluk-5); }
.onay-grup { margin: 0; padding: 0; border: 0; display: grid; gap: var(--bosluk-1); min-width: 0; }
.onay-grup > legend.etiket { padding: 0; margin-bottom: var(--bosluk-1); }
.onay {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    min-height: var(--dokunma);
    font-size: var(--olcek-kucuk);
    color: var(--renk-murekkep-2);
    cursor: pointer;
}
.onay input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    accent-color: var(--renk-vurgu);
    cursor: pointer;
}

/* --- Sıralanabilir tablo başlıkları (th-sirala) --- */
.th-sirala {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.th-sirala .ikon { width: 11px; height: 11px; }
th[aria-sort]:not([aria-sort="none"]) .th-sirala { color: var(--renk-vurgu-koyu); }

/* --- Tercih satırı eylem düğmeleri (yukarı/aşağı/kaldır) --- */
.tercih-eylemler { display: flex; gap: var(--bosluk-1); justify-self: end; }
.tercih-eylem-btn {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    background: var(--renk-yuzey);
    color: var(--renk-murekkep-2);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-kucuk);
    cursor: pointer;
    transition: border-color var(--gecis-hizli) var(--yumusak), color var(--gecis-hizli) var(--yumusak);
}
.tercih-eylem-btn .ikon { width: 14px; height: 14px; }
.tercih-eylem-btn:disabled { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) {
    .tercih-eylem-btn:hover:not(:disabled) { border-color: var(--renk-cizgi-koyu); color: var(--renk-murekkep); }
}

/* --- Paylaşım sonucu (link + kopyala) --- */
.paylasim-sonuc { display: grid; gap: var(--bosluk-2); margin-top: var(--bosluk-2); }
.paylasim-sonuc[hidden] { display: none; }

/* --- Toast / bildirim ---
   Üstte (sticky bardan hemen aşağıda) sabitlenir: mobilde tercih paneli VE sohbet balonu
   ekranın ALTINI kullandığından (bkz. 11/13. bölümler) çakışmayı buradan kaynağında önler. */
.bildirim-yer {
    position: fixed;
    top: calc(var(--ust-yukseklik) + var(--bosluk-3));
    inset-inline: var(--bosluk-3);
    z-index: 90;
    display: grid;
    justify-items: center;
    gap: var(--bosluk-2);
    pointer-events: none;
}
.bildirim {
    display: flex;
    align-items: center;
    gap: var(--bosluk-2);
    max-width: 420px;
    padding: var(--bosluk-3) var(--bosluk-4);
    background: var(--renk-murekkep);
    color: var(--renk-yuzey);
    border-radius: var(--radius-orta);
    box-shadow: var(--golge-2);
    font-size: var(--olcek-kucuk);
    font-weight: 600;
    pointer-events: auto;
    animation: bildirim-gir var(--gecis-normal) var(--esneme);
}
.bildirim > span { flex: 1; }
.bildirim--basari { background: var(--renk-guven); }
.bildirim--hata { background: var(--renk-tehlike); }
/* Kod incelemesi (Important 2): kapatma düğmesi — toast'lar sınırsız yığılmasın diye JS
   zaten en fazla TOAST_MAKS (3) toast tutuyor, ama kullanıcı istediğinde erken kapatabilmeli. */
.bildirim-kapat {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px; height: 24px;
    margin-left: auto;
    background: oklch(100% 0 0 / 0.14);
    color: inherit;
    border: 0;
    border-radius: var(--radius-tam);
    cursor: pointer;
}
.bildirim-kapat .ikon { width: 12px; height: 12px; }
@media (hover: hover) {
    .bildirim-kapat:hover { background: oklch(100% 0 0 / 0.24); }
}
@keyframes bildirim-gir {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ========================= MASAÜSTÜ GENİŞLETMESİ ========================= */

@media (min-width: 600px) {
    .hak-serit { grid-template-columns: repeat(24, 1fr); }
    .hak-slot { height: 34px; }
    .giris-yollari {
        grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr);
        align-items: start;
    }
    .ayirac { flex-direction: column; height: 100%; padding-top: var(--bosluk-6); }
    .ayirac::before, .ayirac::after { width: 1px; height: auto; }
    .filtre-satir { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filtre-satir--dortlu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sohbet-pencere { inset-inline: auto var(--kenar); width: 380px; }
}

@media (min-width: 769px) {
    /* --- Tablo gerçek tabloya döner --- */
    .tablo-sarmal {
        overflow-x: auto;
        background: var(--renk-yuzey);
        border: 1px solid var(--renk-cizgi);
        border-radius: var(--radius-buyuk);
        box-shadow: var(--golge-2);
    }
    /* min-width burada yalnızca bir NİYET tabanıdır ve pratikte hiç bağlamaz: tablonun
       min-content genişliği (~1260px) zaten 1040'ın üstünde olduğundan otomatik tablo
       yerleşimi asla 1040'a inmez. Bu yüzden dosyada bir zamanlar bulunan
       `@media (min-width: 1200px) { .tablo { min-width: 100% } }` bloğu ÖLÜ koddu
       (hem 1040px hem 100%, min-content tarafından eziliyordu; ölçümde tablo her iki
       durumda da aynı genişlikte çiziliyordu) — kaynak sırası da yanlıştı (1280'den
       SONRA geliyordu). Kaldırıldı. */
    .tablo { min-width: 1040px; font-size: var(--olcek-kucuk); }
    .tablo thead { display: table-header-group; }
    .tablo tbody { display: table-row-group; }
    .tablo th {
        padding: var(--bosluk-2) var(--bosluk-3);
        background: var(--renk-zemin-alt);
        border-bottom: 1px solid var(--renk-cizgi);
        font-size: var(--olcek-mikro);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--renk-murekkep-2);
        text-align: left;
        white-space: nowrap;
    }
    .tablo th.s-grup { text-align: center; border-left: 1px solid var(--renk-cizgi); }
    .tablo th.s-yil { text-align: right; }

    /* Yıl alt-başlıkları (2. thead satırı — kullanıcı geri bildirimi 28 Tem: "burası niye böyle
       görünüyor"). ÖNCEKİ tasarımda bu satır, genel `.tablo th` kutu stilini (dolgulu arka plan +
       kalın + BÜYÜK HARF) grup üst-başlıklarıyla BİREBİR paylaşıyordu — tek kelimelik "2025/2024/
       2023" hücrelerinde bu, hepsi aynı soluk mavi çip gibi görünen, hangisinin gerçekten AKTİF
       sıralama olduğunu ayırt etmesi zor bir "seçili metin" karmaşasına dönüşüyordu. Düzeltme:
       PASİF yıllar burada düz/sessiz metne döner (kutu/dolgu YOK); sadece AKTİF sıralama yılı
       ince bir alt-çizgi (box-shadow — border-bottom'un ÜZERİNE eklenir, satır yüksekliğini
       ETKİLEMEZ) + vurgu rengiyle öne çıkar. Ok ikonu zaten th-sirala-ok üzerinden (JS) gelir. */
    .tablo thead tr:nth-child(2) th.s-yil {
        background: none;
        font-weight: 500;
        letter-spacing: normal;
        text-transform: none;
        color: var(--renk-murekkep-3);
    }
    .tablo thead tr:nth-child(2) th.s-yil[aria-sort]:not([aria-sort="none"]) {
        color: var(--renk-vurgu-koyu);
        font-weight: 700;
        box-shadow: inset 0 -2px 0 0 var(--renk-vurgu);
    }
    @media (hover: hover) {
        /* Tıklanabilirlik ipucu: sadece GERÇEKTEN tıklanabilir (bir th-sirala butonu barındıran,
           henüz aktif olmayan) yıl başlıklarında hover'da belirir — sıralanamayan düz yıl
           hücreleri (ör. sira_2023) hiçbir hover tepkisi VERMEZ, çünkü tıklanabilir değildir. */
        .tablo thead tr:nth-child(2) th.s-yil[aria-sort="none"]:has(.th-sirala):hover {
            color: var(--renk-murekkep);
            box-shadow: inset 0 -2px 0 0 var(--renk-cizgi-koyu);
        }
    }

    .tablo tbody tr { transition: background-color var(--gecis-hizli) var(--yumusak); }
    .tablo tbody tr + tr td { border-top: 1px solid var(--renk-cizgi); }
    .tablo tbody tr:hover td { background: var(--renk-vurgu-fon); }
    .tablo tbody td {
        padding: var(--bosluk-3);
        vertical-align: middle;
        font-size: var(--olcek-kucuk);
    }
    .tablo tbody td:nth-child(1)  { color: var(--renk-murekkep-3); font-size: var(--olcek-mikro); }
    /* Ad kolonlarının TABANI (min-width) tablonun min-content genişliğini — yani kaç
       kolonun kaydırmasız görünebileceğini — doğrudan belirler: 170+180 = 350px, tablonun
       ~1260px'lik min-content'inin dörtte biri. Taban yalnızca tablo SIKIŞTIĞINDA bağlar;
       rahat genişliklerde otomatik tablo yerleşimi artan alanı zaten en çok bu iki kolona
       dağıtır (en büyük max-content onlarda), yani geniş ekranda görünüm değişmez. */
    .tablo tbody td:nth-child(2)  { font-weight: 600; color: var(--renk-murekkep); min-width: 170px; }
    .tablo tbody td:nth-child(3)  { text-align: left; color: var(--renk-murekkep-2); }
    .tablo tbody td:nth-child(4)  { font-family: var(--yazi-govde); font-size: var(--olcek-kucuk); font-weight: 600; letter-spacing: 0; min-width: 180px; }
    /* Sıra 2025/2024/2023, Taban 2025/2024/2023, Kont. 26 — kolon sırası (kullanıcı geri
       bildirimi 28 Tem): Başarı Sırası grubu TABAN PUAN'dan önce (nth-child 6-8 sıra,
       9-11 taban), bu yüzden nth-child numaraları bu sırayı izler. */
    .tablo tbody td:nth-child(6),
    .tablo tbody td:nth-child(7),
    .tablo tbody td:nth-child(8),
    .tablo tbody td:nth-child(9),
    .tablo tbody td:nth-child(10),
    .tablo tbody td:nth-child(11),
    .tablo tbody td:nth-child(12) { text-align: right; white-space: nowrap; }
    .tablo tbody td:nth-child(7),
    .tablo tbody td:nth-child(8),
    .tablo tbody td:nth-child(10),
    .tablo tbody td:nth-child(11) { color: var(--renk-murekkep-3); }
    .tablo tbody td:nth-child(6), .tablo tbody td:nth-child(9) { font-weight: 700; }

    /* 15 kolon dar masaüstlerine sığmaz ve tablo kendi içinde yatay kayar. "Ekle" sayfanın
       BİRİNCİL eylemi olduğundan sağ kenara SABİTLENİR — kullanıcı veri kolonlarını
       kaydırırken bile eylem hep elinin altındadır (kolon gizlemeye gerek kalmaz). */
    .tablo th.s-ekle, .tablo tbody td:nth-child(15) {
        position: sticky;
        right: 0;
        text-align: right;
        background: var(--renk-yuzey);
        box-shadow: -10px 0 12px -10px oklch(30% 0.04 275 / 0.35);
    }
    .tablo th.s-ekle { background: var(--renk-zemin-alt); }

    /* min-height DEĞİŞMEZ (32px): ::after yastığıyla birlikte hedef 44px kalır. */
    .yz-rozet { padding-inline: var(--bosluk-2); font-size: var(--olcek-kucuk); }
    .yz-ipucu { display: none; }

    .belge-alan { padding: var(--bosluk-6) var(--bosluk-5); }

    /* Filtreler masaüstünde bir çekmece değil, daima açık bir filtre çubuğudur.
       <details> semantiği korunur (mobilde açılır/kapanır), ama burada içerik
       ::details-content ile görünür kılınır ve başlık tıklanamaz bir başlığa döner.
       Destek: Chrome 131+, Safari 18.4+, Firefox 139+. Desteklemeyen eski motorlarda
       kapalı başlar — bozulmaz, sadece bir tıklama gerektirir. */
    #filtreler::details-content { content-visibility: visible; block-size: auto; }
    .filtre-basi { pointer-events: none; cursor: default; }
    .filtre-ok { display: none; }
}

/* Geniş masaüstü tipografi/kompozisyon genişletmesi. Tercih paneli burada HÂLÂ alt
   çekmecedir (bkz. bir alttaki blok) — bu blok sadece kahraman ve form ile ilgilidir. */
@media (min-width: 1280px) {
    .kahraman { padding-top: var(--bosluk-bolum); }
    .kahraman-alt { font-size: 1.15rem; }
    /* Izgarayı kıran öğe: "24 hak" kartı gövde akışının soluna taşar. */
    .hak-karti {
        max-width: 620px;
        margin-left: calc(var(--bosluk-6) * -1);
        padding: var(--bosluk-5);
    }
    .alan-ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================== İKİ SÜTUNLU DÜZEN — NEDEN 1780px? =====================
   Yapışkan panel ana sütundan `--panel-en + gap` = 340+32 = 372px ÇALAR. Sonuç
   tablosunun min-content genişliği ~1260px'tir; 14 kolonun tamamı ancak ana sütun
   bu kadar genişken kaydırmasız görünür. Dolayısıyla paneli, ana sütunu daraltmadan
   ancak KAPSAYICI 372px büyüyebildiği noktada açabiliriz:

       tek sütun tavanı  --duzen-en           = 1400
       + panel + boşluk                       =  372
       ---------------------------------------------
       gereken kapsayıcı                      = 1772  →  eşik 1780, tavan 1800

   Bu eşiğin ALTINDA panel alt çekmece kalır ve tablo TAM GENİŞLİK alır. Daha erken
   (ör. 1280'de) açmak kolon sayısını GERİLETİYORDU: 1279'da 13 kolon görünürken
   1280'de 7'ye düşüyordu ve 1400px tavanı yüzünden 2560px'lik ekranda bile 8'de
   kalıyordu — yani ekran büyüdükçe daha az veri görünüyordu. Eşik + tavan birlikte
   değişince kolon sayısı ekran genişledikçe asla azalmaz.
   ============================================================================ */
@media (min-width: 1780px) {
    /* Tavan panel kadar yükselir: 1400 + 372 = 1772 ≤ 1800. Böylece ana sütun tek
       sütunlu banttaki genişliğinin ALTINA düşmez (1320 → 1348). */
    :root { --duzen-en: 1800px; }

    body { padding-bottom: 0; }

    .duzen {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--panel-en);
        gap: var(--bosluk-6);
        align-items: start;
    }

    /* Panel: sağda yapışkan sütun, DAİMA açık.
       <details> içeriğini masaüstünde açıkmış gibi göstermek için ::details-content
       geçersiz kılınır; başlık da tıklanamaz bir bölüm başlığına dönüşür. */
    .panel-sarmal {
        position: sticky;
        top: calc(var(--ust-yukseklik) + var(--bosluk-4));
        inset-inline: auto;
        bottom: auto;
        margin-top: var(--bosluk-bolum);
        border: 1px solid var(--renk-cizgi);
        border-radius: var(--radius-buyuk);
        box-shadow: var(--golge-2);
        padding-bottom: 0;
        overflow: hidden;
    }
    #tercih-paneli::details-content { content-visibility: visible; block-size: auto; }
    .panel-basi { pointer-events: none; cursor: default; padding-inline: var(--bosluk-4); }
    .panel-ok { display: none; }
    .panel-govde {
        max-height: calc(100vh - var(--ust-yukseklik) - 140px);
        padding-inline: var(--bosluk-4);
    }

    .sohbet-baloncuk, .sohbet-pencere { bottom: var(--bosluk-5); }
    /* Panel burada alt çekmece DEĞİL — balonu gizlemek için bir sebep yok
       (mobil kural için bkz. 13 SOHBET). */
    body:has(#tercih-paneli[open]) .sohbet-baloncuk { display: inline-flex; }
}

/* Hareketi azalt: tüm süre bazlı animasyon/geçişler devre dışı, ama odak halkası
   ve renk geri bildirimleri (anlık) korunur. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .dugme:active, .sohbet-baloncuk:hover, .yz-rozet:hover { transform: none; }
}


/* ========================== 16 ADMIN PANELİ ==========================
   admin.php (Task 11B) — şifre korumalı, salt-okunur kullanım raporları.
   Kendi sayfa iskeleti (index.php'nin .duzen/.panel-sarmal düzenine BAĞIMLI
   DEĞİL); mevcut token'ları (renk/boşluk/radius/gölge/yazı) yeniden kullanır.
   JS YOK: istatistik çubukları native <progress> elementiyle çizilir. */

.admin-govde {
    min-height: 100vh;
    background: var(--renk-zemin);
    color: var(--renk-murekkep);
    font-family: var(--yazi-govde);
    font-size: var(--olcek-metin);
}

/* --- Kilitli / giriş sayfaları: ortalanmış tek kart --- */
.admin-kilit-sayfa, .admin-giris-sayfa {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--kenar);
}

.admin-kilit-kart, .admin-giris-kart {
    width: 100%;
    max-width: 440px;
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-buyuk);
    box-shadow: var(--golge-2);
    padding: var(--bosluk-6);
}

.admin-kilit-kart { text-align: center; }
.admin-kilit-kart .ikon { width: 32px; height: 32px; color: var(--renk-tehlike); }
.admin-kilit-baslik {
    margin-top: var(--bosluk-4);
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-h3);
    letter-spacing: -0.02em;
}
.admin-kilit-kart p { margin-top: var(--bosluk-3); font-size: var(--olcek-kucuk); color: var(--renk-murekkep-2); text-wrap: pretty; }
.admin-kilit-kart code { font-size: 0.9em; background: var(--renk-zemin-alt); padding: 0.1em 0.35em; border-radius: 4px; }
.admin-kod {
    margin-top: var(--bosluk-3);
    padding: var(--bosluk-3);
    background: var(--renk-zemin-alt);
    border-radius: var(--radius-kucuk);
    overflow-x: auto;
    text-align: left;
    font-size: var(--olcek-kucuk);
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-giris-baslik { font-family: var(--yazi-baslik); font-size: var(--olcek-h3); margin-bottom: var(--bosluk-4); }
.admin-hata {
    margin-bottom: var(--bosluk-4);
    padding: var(--bosluk-3);
    background: var(--renk-tehlike-fon);
    color: var(--renk-tehlike);
    border-radius: var(--radius-kucuk);
    font-size: var(--olcek-kucuk);
}
.admin-giris-kart .alan { margin-bottom: var(--bosluk-5); }
.admin-giris-kart button { width: 100%; }

/* --- Rapor görünümü --- */
.admin-ust {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bosluk-4);
    padding: var(--bosluk-4) var(--kenar);
    background: var(--renk-yuzey);
    border-bottom: 1px solid var(--renk-cizgi);
}
.admin-ust-baslik { font-family: var(--yazi-baslik); font-weight: 700; letter-spacing: -0.02em; }

.admin-rapor {
    max-width: var(--duzen-en);
    margin-inline: auto;
    padding: var(--bosluk-6) var(--kenar) var(--bosluk-bolum);
    display: grid;
    gap: var(--bosluk-6);
}

.admin-kartlar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--bosluk-5);
}
.admin-kart {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-orta);
    box-shadow: var(--golge-1);
    padding: var(--bosluk-5);
}
.admin-kart-etiket {
    font-size: var(--olcek-mikro);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--renk-murekkep-3);
}
.admin-kart-deger {
    margin-top: var(--bosluk-2);
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-h2);
    font-weight: 700;
    color: var(--renk-vurgu-koyu);
}
.admin-kart-deger--metin { font-size: var(--olcek-h3); color: var(--renk-murekkep); }

.admin-bolum {
    background: var(--renk-yuzey);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-buyuk);
    box-shadow: var(--golge-1);
    padding: var(--bosluk-6);
}
.admin-bolum-baslik {
    display: flex;
    align-items: baseline;
    gap: var(--bosluk-2);
    margin-bottom: var(--bosluk-4);
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-h3);
    letter-spacing: -0.01em;
}
.admin-bolum-alt { font-family: var(--yazi-govde); font-size: var(--olcek-kucuk); font-weight: 400; color: var(--renk-murekkep-3); }

.admin-tablo-sarmal { overflow-x: auto; }
.admin-tablo { width: 100%; border-collapse: collapse; font-size: var(--olcek-kucuk); font-variant-numeric: tabular-nums; }
.admin-tablo th, .admin-tablo td { padding: var(--bosluk-2) var(--bosluk-3); border-bottom: 1px solid var(--renk-cizgi); text-align: right; white-space: nowrap; }
.admin-tablo th { background: var(--renk-zemin-alt); font-size: var(--olcek-mikro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--renk-murekkep-2); }
.admin-tablo th:first-child, .admin-tablo th[scope="row"], .admin-tablo td:first-child { text-align: left; }
.admin-tablo tbody tr:hover td { background: var(--renk-vurgu-fon); }

/* Duyuru e-postası bölümü (admin) — .girdi/.dugme tasarım sisteminden gelir; burada yalnızca
   çok satırlı alanın yüksekliği ve bölüme özgü durum satırları tanımlanır. */
.girdi--metin {
    min-height: calc(var(--dokunma) * 3);
    padding: var(--bosluk-3);
    line-height: 1.6;
    resize: vertical;
}
.admin-mail-form { display: grid; gap: var(--bosluk-2); max-width: 60ch; }
.admin-mail-form .etiket { margin-top: var(--bosluk-3); }
.admin-mail-form button { justify-self: start; margin-top: var(--bosluk-3); }
.admin-mail-durum {
    margin-bottom: var(--bosluk-4);
    padding: var(--bosluk-3);
    background: var(--renk-vurgu-fon);
    border-radius: var(--radius-kucuk);
    font-size: var(--olcek-kucuk);
}
.admin-mail-kalan { margin-bottom: var(--bosluk-3); font-size: var(--olcek-kucuk); }

/* Ziyaret/hesaplama özet kutuları (29 Tem) — panelin üstünde tek bakışta okunan sayılar. */
.admin-kutular {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--bosluk-3);
    margin-bottom: var(--bosluk-4);
}
.admin-kutu {
    display: grid;
    gap: 2px;
    padding: var(--bosluk-3);
    background: var(--renk-zemin-alt);
    border: 1px solid var(--renk-cizgi);
    border-radius: var(--radius-orta);
}
.admin-kutu-etiket {
    font-size: var(--olcek-mikro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--renk-murekkep-3);
}
.admin-kutu-sayi {
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-h3);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.admin-kutu-not { font-size: var(--olcek-mikro); color: var(--renk-murekkep-3); }
.admin-alt-baslik {
    margin: var(--bosluk-5) 0 var(--bosluk-3);
    font-family: var(--yazi-baslik);
    font-size: var(--olcek-orta);
}

.admin-not { margin-top: var(--bosluk-3); font-size: var(--olcek-kucuk); color: var(--renk-murekkep-3); }
.admin-not-satirici { margin-left: var(--bosluk-2); font-size: var(--olcek-kucuk); color: var(--renk-murekkep-3); }
.admin-bos { padding: var(--bosluk-4) 0; font-size: var(--olcek-kucuk); color: var(--renk-murekkep-3); }

.admin-siralama { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bosluk-3); }
.admin-siralama-satir {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bosluk-2);
    align-items: center;
}
.admin-siralama-ad {
    font-size: var(--olcek-kucuk);
    color: var(--renk-murekkep);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-siralama-sayi, .admin-yz-etiket + .admin-siralama-sayi { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--renk-murekkep-2); }

.admin-cubuk {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border: 0;
    border-radius: var(--radius-tam);
}
.admin-cubuk::-webkit-progress-bar { background: var(--renk-zemin-alt); border-radius: var(--radius-tam); }
.admin-cubuk::-webkit-progress-value { background: var(--renk-vurgu); border-radius: var(--radius-tam); }
.admin-cubuk::-moz-progress-bar { background: var(--renk-vurgu); border-radius: var(--radius-tam); }
.admin-cubuk--tehlike::-webkit-progress-value, .admin-cubuk--tehlike::-moz-progress-bar { background: var(--renk-tehlike); }
.admin-cubuk--uyari::-webkit-progress-value, .admin-cubuk--uyari::-moz-progress-bar { background: var(--renk-uyari); }
.admin-cubuk--guven::-webkit-progress-value, .admin-cubuk--guven::-moz-progress-bar { background: var(--renk-guven); }
.admin-cubuk--notr::-webkit-progress-value, .admin-cubuk--notr::-moz-progress-bar { background: var(--renk-notr); }

.admin-yz-ortalama { font-size: var(--olcek-orta); margin-bottom: var(--bosluk-4); }
.admin-yz-dagilim { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--bosluk-3); }
.admin-yz-satir { display: grid; grid-template-columns: 1fr; gap: var(--bosluk-2); align-items: center; }
.admin-yz-etiket { font-size: var(--olcek-kucuk); color: var(--renk-murekkep-2); }

@media (min-width: 600px) {
    .admin-siralama-satir { grid-template-columns: minmax(0, 1fr) minmax(140px, 260px) 56px; gap: var(--bosluk-3); }
    .admin-siralama-sayi { text-align: right; }
    .admin-yz-satir { grid-template-columns: 160px minmax(0, 1fr) 56px; gap: var(--bosluk-3); }
}


/* ==================== YAZDIRMA ÇIKTISI (A4) — 30 Tem ====================
   Ekranda GİZLİ; yalnızca baskıda görünür. Neden ayrı bir alan: ekrandaki paneller
   <dialog> içinde ve tablo 15 kolonlu — baskıda sayfaya sığmıyor ve modal içerikleri
   tarayıcılar arasında tutarsız basılıyor. Çıktı bu yüzden ekrandan BAĞIMSIZ kurulur
   (bkz. assets/app-yazdir.js). */
.yazdir-alan { display: none; }

@media print {
    /* Sayfanın geri kalanı BASILMAZ: başlık çubuğu, paneller, sohbet baloncuğu, tablo…
       Yalnızca hazırlanan çıktı görünür. */
    body > *:not(.yazdir-alan) { display: none !important; }

    body {
        padding: 0;
        background: #fff;
        color: #000;
        font-size: 11pt;
        line-height: 1.45;
    }

    .yazdir-alan {
        display: block;
        max-width: 100%;
        padding: 0;
    }

    @page {
        size: A4;
        /* Kenar boşluğu tarayıcı varsayılanına bırakılmaz: 15mm hem delgeç payı bırakır
           hem metni kenara yapıştırmaz. */
        margin: 15mm;
    }

    .yazdir-basi {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        padding-bottom: 6pt;
        border-bottom: 1.5pt solid #000;
    }
    .yazdir-marka { font-size: 16pt; font-weight: 800; letter-spacing: -0.02em; }
    .yazdir-slogan { font-size: 9pt; }

    .yazdir-baslik { margin-top: 12pt; font-size: 18pt; font-weight: 800; }
    .yazdir-ogrenci { margin-top: 2pt; font-size: 10pt; }

    .yazdir-bolum { margin-top: 14pt; }
    .yazdir-bolum h2 {
        margin-bottom: 4pt;
        font-size: 12pt;
        font-weight: 700;
        border-bottom: 0.5pt solid #999;
        padding-bottom: 2pt;
    }

    .yazdir-tablo { width: 100%; border-collapse: collapse; font-size: 10pt; }
    .yazdir-tablo th, .yazdir-tablo td {
        padding: 3pt 4pt;
        border-bottom: 0.5pt solid #ccc;
        text-align: left;
        vertical-align: top;
    }
    .yazdir-tablo th { font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.04em; }
    .yazdir-no { width: 22pt; font-weight: 700; }
    /* Satırlar sayfa sonunda ORTADAN bölünmesin. */
    .yazdir-tablo tr { break-inside: avoid; }

    /* Program satırı ile onun meslek satırı arasındaki çizgi KALDIRILIR (kullanıcı isteği
       30 Tem): ikisi tek bir kaydın parçası. Ayırıcı çizgi meslek satırının ALTINDA kalır,
       yani kayıtlar birbirinden hâlâ ayrılıyor. */
    .yazdir-satir--bagli td { border-bottom: none; }

    /* Sıra / durum kolonu: sayı üstte, sapma altta. */
    .yazdir-sira { white-space: nowrap; font-variant-numeric: tabular-nums; }
    .yazdir-sapma { font-size: 7.5pt; font-weight: 700; }
    /* Yazdırmada renk güvenilmez (siyah-beyaz çıktı): durum SÖZCÜKLE anlatılıyor, renk
       yalnızca destek. */
    .yazdir-sapma.tercih-sapma--riskli  { color: #a12; }
    .yazdir-sapma.tercih-sapma--dikkat  { color: #a60; }
    .yazdir-sapma.tercih-sapma--guvenli { color: #161; }
    .yazdir-sapma.tercih-sapma--esit,
    .yazdir-sapma.tercih-sapma--yok     { color: #555; }

    .yazdir-tarih { margin-top: 10pt; font-size: 9pt; color: #555; }

    .yazdir-dip {
        display: flex;
        gap: 12pt;
        margin-top: 16pt;
        padding-top: 8pt;
        border-top: 1pt solid #000;
        break-inside: avoid;
    }
    .yazdir-link-kuto, .yazdir-link-kutu { flex: 1 1 55%; }
    .yazdir-link-etiket { font-size: 9pt; }
    /* Link BÜYÜK basılır: QR olmadığı için taranacak şey bu — elle yazılabilecek kadar
       okunur olmalı (bkz. app-yazdir.js başlığındaki QR notu). */
    .yazdir-link {
        margin-top: 2pt;
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
        font-size: 11pt;
        font-weight: 700;
        word-break: break-all;
    }
    .yazdir-tanitim {
        flex: 1 1 45%;
        padding: 6pt 8pt;
        border: 1pt solid #000;
        border-radius: 3pt;
    }
    .yazdir-tanitim-baslik { font-size: 9pt; }
    .yazdir-tanitim-adres { font-size: 15pt; font-weight: 800; letter-spacing: -0.02em; }
    .yazdir-tanitim-not { margin-top: 2pt; font-size: 7.5pt; line-height: 1.35; }

    .yazdir-uyari { margin-top: 8pt; font-size: 8pt; color: #555; }
}

/* Yapay zekâ panelindeki yazdır düğmesi (ekranda). */
.ai-eylem { padding: 0 var(--bosluk-4) var(--bosluk-4); }

/* Link başına kullanım limitleri (kullanıcı isteği 30 Tem: "limitler de kullanıcıya
   görünsün"). Bant metninin ALTINDA, ikincil ton: bilgi uyarıyı bastırmasın. */
.panel-limit {
    display: inline-block;
    margin-top: 0.35rem;
    opacity: 0.78;
    font-variant-numeric: tabular-nums;
}

/* Gelecek riski aralığı satırı (kullanıcı isteği 30 Tem): hazır aralık + en az/en çok yüzde.
   Mobilde tek kolon — üç sayı alanı 390px'te yan yana sığmaz. */
.filtre-satir--uclu {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 1fr;
}

.filtre-grup-ad--ikinci { margin-top: 1.1rem; }

@media (min-width: 640px) {
    .filtre-satir--uclu { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* Yazdırma çıktısındaki QR kodu (kullanıcı isteği 30 Tem: "en üstte paylaşım linkinin qr
   kodu olsun"). Sağ üstte, listenin akışını bozmadan. */
.yazdir-qr {
    float: right;
    margin: 0 0 0.6rem 1rem;
    text-align: center;
}

.yazdir-qr svg {
    display: block;
    width: 108px;
    height: 108px;
}

.yazdir-qr-alt {
    margin: 0.25rem 0 0;
    font-size: 0.62rem;
    max-width: 108px;
    line-height: 1.25;
}

/* Meslek satırı: program satırının ALTINDA, ikincil ton. */
.yazdir-meslek-satir .yazdir-meslekler {
    font-size: 0.7rem;
    padding-top: 0;
    padding-bottom: 0.35rem;
    opacity: 0.8;
}

.yazdir-ozet { margin: 0 0 0.5rem; font-weight: 600; }

/* Tercih listesinde sıra + kullanıcı sırasından sapma (kullanıcı isteği 30 Tem).
   Renk SEMANTİK: yeşil güvenli, sarı dikkat, kırmızı riskli — süs değil, karar bilgisi. */
.tercih-sapma {
    display: inline-block;
    margin-top: 0.15rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.tercih-sapma--guvenli { color: oklch(52% 0.13 150); }
.tercih-sapma--esit    { color: oklch(50% 0.02 260); }
.tercih-sapma--dikkat  { color: oklch(58% 0.14 75); }
.tercih-sapma--riskli  { color: oklch(55% 0.19 25); }
.tercih-sapma--yok     { color: oklch(50% 0.02 260); font-weight: 500; }

/* ÜCRETSİZ MOD (kullanıcı isteği 31 Tem: "maliyetli yz ürünleri ... müşteriye de
   gösterilmeyecek"). İstek başına ücretli olan her giriş noktası gizlenir; satın alma
   çağrıları da kalkar çünkü satılacak bir şey yok.

   !important GEREKLİ: bu öğelerin bir kısmı JS ile görünür kılınıyor (ör. satın al düğmesi
   oturum durumuna göre hidden=false yapılıyor); normal bir kural onu geri açardı. */
body[data-ucretsiz="1"] #ai-oneri-btn,
body[data-ucretsiz="1"] #analiz-btn,
body[data-ucretsiz="1"] #ilgi-btn,
body[data-ucretsiz="1"] .ilgi-kutu,
body[data-ucretsiz="1"] #sohbet-baloncuk,
body[data-ucretsiz="1"] #sohbet-pencere,
body[data-ucretsiz="1"] #belge-karti,
body[data-ucretsiz="1"] #satinal-ac,
body[data-ucretsiz="1"] #yazdir-ai-btn {
    display: none !important;
}

/* "Neye ilgin var?" alanı tamamen kalkınca sarmalın etiketi de anlamsız kalır. */
body[data-ucretsiz="1"] .alan:has(#ilgi) { display: none !important; }

/* Belge kartı gizlenince "ya da" ayracı tek başına kalır (sınıfı .ayirac — ilk denemede
   .yada yazılmıştı ve ayraç ekranda kaldı, kullanıcı bildirdi). */
body[data-ucretsiz="1"] .ayirac { display: none !important; }

/* Üç sütunlu yerleşim (belge · ayraç · elle gir) ikisi gizlenince ANLAMSIZ kalıyor:
   "Elle gir" paneli sağ sütunda asılı duruyordu. Ücretsiz modda tek sütuna inip
   ortalanır ve makul bir genişlikte durur — tam genişlikte bir form alanı seyrek
   görünürdü. */
body[data-ucretsiz="1"] .giris-yollari {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
}

body[data-ucretsiz="1"] .giris-yollari > .kart {
    width: 100%;
    max-width: 34rem;
}