/*
 * Saglikta Kalite — ortak stil
 *
 * ── TURKCE BUYUK HARF KURALI ──────────────────────────────────────────
 * Bu dosyada "text-transform" HIC YOK ve eklenmeyecek.
 * CSS'te text-transform:uppercase kucuk "i" harfini ancak ogenin dili "tr"
 * ise dogru isler; dil zincirinin bir halkasi kopunca "verileriniz" ->
 * "VERILERINIZ" olur. Buyuk gorunmesi gereken metin DOGRUDAN dogru yazilir.
 * (Olculdu: toLocaleUpperCase("tr") -> "YENİ", toUpperCase() -> "YENI".)
 *
 * ── RENK KURALI ───────────────────────────────────────────────────────
 * Turkuaz MAVIDEN farkli: acik bir renk. Parlak turkuaz uzerine beyaz yazi
 * 2.5:1'e dusup eriyor. Bu yuzden:
 *   --turkuaz       : zemin olarak kullanilir, uzerine --vurgu-metin gelir
 *   --camgobegi     : YALNIZCA susleme ve KOYU zemin uzerinde metin
 *   --vurgu-koyu    : acik zemin uzerinde metin/baglanti rengi
 * Her yeni renk esleswmesi kontrast olculerek eklenir.
 */
:root {
    /* Lacivert omurga */
    --murekkep:    #071b3d;
    --metin:       #263a55;
    --soluk:       #617088;
    --lacivert-950:#04172f;
    --lacivert-900:#062652;
    --lacivert-800:#083d7b;

    /* Yuzeyler */
    --yuzey:       #ffffff;
    --kagit:       #f5f8fc;
    --cizgi:       #dce4ee;
    --cizgi-koyu:  #c2cfe0;

    /* Turkuaz ailesi */
    --turkuaz:      #0b7f85;   /* uzerinde beyaz 4.8:1 */
    --vurgu-koyu:   #06595e;   /* acik zeminde metin 6.4:1 */
    --camgobegi:    #22c9e5;   /* susleme + koyu zeminde metin 9.1:1 */
    --turkuaz-zemin:#e4f5f4;
    --vurgu-metin:  #ffffff;

    --olumlu:      #0f7a4f;
    --uyari:       #9a6a00;

    --font: "Inter", "Inter Variable", "Segoe UI", "Noto Sans", system-ui, sans-serif;
    --kod:  "JetBrains Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace;

    --kutu-golge: 0 .75rem 2.5rem rgba(18, 46, 82, .10);
    --kutu-golge-guclu: 0 1.2rem 3.2rem rgba(7, 27, 61, .16);
    --yaricap-s: 8px;
    --yaricap:   12px;
    --yaricap-l: 18px;

    --govde-genislik: 1240px;
    --bosluk: clamp(1.25rem, 4vw, 3.5rem);
}

/*
 * Koyu tema: lacivert zaten koyu bir palet oldugu icin burada yuzeyleri
 * daha da indirip turkuazi PARLAK tarafa aliyoruz ve vurgu uzerindeki
 * yaziyi KOYU yapiyoruz (parlak turkuaz + beyaz yazi okunmuyordu).
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --murekkep:    #e8f1f5;
        --metin:       #c3d2e0;
        --soluk:       #8fa3b8;
        --yuzey:       #0c1c2e;
        --kagit:       #061320;
        --cizgi:       #1c3045;
        --cizgi-koyu:  #2c4760;
        --turkuaz:      #2dd4c8;
        --vurgu-koyu:   #6fe6dc;
        --camgobegi:    #22c9e5;
        --turkuaz-zemin:#0c2b30;
        --vurgu-metin:  #05171a;
        --olumlu:      #4cc08a;
        --kutu-golge: 0 .75rem 2.5rem rgba(0, 0, 0, .34);
        --kutu-golge-guclu: 0 1.2rem 3.2rem rgba(0, 0, 0, .46);
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --murekkep:    #e8f1f5;
    --metin:       #c3d2e0;
    --soluk:       #8fa3b8;
    --yuzey:       #0c1c2e;
    --kagit:       #061320;
    --cizgi:       #1c3045;
    --cizgi-koyu:  #2c4760;
    --turkuaz:      #2dd4c8;
    --vurgu-koyu:   #6fe6dc;
    --camgobegi:    #22c9e5;
    --turkuaz-zemin:#0c2b30;
    --vurgu-metin:  #05171a;
    --olumlu:      #4cc08a;
    --kutu-golge: 0 .75rem 2.5rem rgba(0, 0, 0, .34);
    --kutu-golge-guclu: 0 1.2rem 3.2rem rgba(0, 0, 0, .46);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    background: var(--kagit);
    color: var(--metin);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.62;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "cv05" 1, "ss03" 1;
}
.kap { margin: 0 auto; max-width: var(--govde-genislik); padding-inline: var(--bosluk); width: 100%; }
.kap-dar { margin: 0 auto; max-width: 880px; padding-inline: var(--bosluk); width: 100%; }

h1, h2, h3, h4 {
    color: var(--murekkep); font-weight: 800; letter-spacing: -0.028em;
    line-height: 1.1; margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.45rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; }
p  { margin: 0; }
a  { color: var(--vurgu-koyu); }
img, svg { max-width: 100%; height: auto; }
:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(34, 201, 229, .55); border-radius: 4px; }

section { padding-block: clamp(52px, 6.5vw, 92px); }
.ayrac { border: 0; border-top: 1px solid var(--cizgi); margin: 0; }

/* Bolum ust etiketi — Stratex'teki kucuk kasli etiket.
   BUYUK HARFE CEVIRMIYORUZ; metin zaten dogru yazilir. */
.ust-etiket {
    align-items: center; color: var(--vurgu-koyu); display: inline-flex;
    font-size: .76rem; font-weight: 700; gap: 9px; letter-spacing: .09em;
}
.ust-etiket::before {
    background: var(--camgobegi); border-radius: 2px; content: "";
    height: 3px; width: 22px;
}
.bolum-basi { margin-bottom: clamp(30px, 4vw, 48px); max-width: 68ch; }
.bolum-basi h2 { margin-top: 14px; }
.bolum-basi p { color: var(--soluk); font-size: 1.05rem; margin-top: 14px; }

/* ——— Ust bar ——— */
.ustbar {
    backdrop-filter: blur(12px);
    /* IKI SATIR BILEREK: color-mix desteklenmeyen tarayicida bildirim
       komple duser ve bar SEFFAF kalir; altindan kayan icerigin uzerinde
       menu okunmaz. Opak yedek once yazilir. */
    background: var(--yuzey);
    background: color-mix(in srgb, var(--yuzey) 86%, transparent);
    border-bottom: 1px solid var(--cizgi);
    position: sticky; top: 0; z-index: 60;
}
.ustbar .kap { align-items: center; display: flex; gap: 20px; min-height: 70px; position: relative; }
.marka { align-items: center; color: var(--murekkep); display: flex; font-weight: 800; gap: 11px; letter-spacing: -.03em; text-decoration: none; }
.marka .rozet {
    /* Gradyanin HER IKI ucu parlak: koyu glif en kotu durakta bile 9:1.
       Onceki surumde alt uc --turkuaz idi ve oran 3.5:1'e dusuyordu.
       color BURADA ONEMLI: glif stroke="currentColor" ile ciziliyor
       (tanitim/parcalar/marka.php), rengini buradan aliyor. */
    align-items: center; background: linear-gradient(140deg, #4bd9f0, var(--camgobegi));
    border-radius: var(--yaricap-s); color: #04202a; display: flex;
    flex: 0 0 auto; height: 32px; justify-content: center; width: 32px;
}
/* Glif kutuya tam otursun; satir yuksekligi bosluk eklemesin. */
.marka .rozet svg { display: block; }
.ustbar nav { display: flex; gap: 26px; margin-left: auto; }
.ustbar nav a {
    color: var(--soluk); font-size: .95rem; font-weight: 500;
    padding-block: 6px; text-decoration: none; position: relative;
}
.ustbar nav a:hover { color: var(--murekkep); }
.ustbar nav a.etkin { color: var(--murekkep); font-weight: 700; }
.ustbar nav a.etkin::after {
    background: var(--camgobegi); border-radius: 2px; bottom: -2px; content: "";
    height: 3px; left: 0; position: absolute; right: 0;
}
.menu-dugme {
    background: transparent; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap-s);
    color: var(--murekkep); cursor: pointer; display: none; font-family: var(--font);
    font-size: .9rem; font-weight: 600; margin-left: auto; padding: 9px 15px;
}

/* ——— Ust barda acilir menu ———
 *
 * Menu 11 ogeyle iki satira sariyordu; dort hizmet sayfasi Hizmetler'in
 * altinda gruplandi (bkz. tanitim/parcalar/ustbar.php).
 *
 * BURADAKI KURALLAR MASAUSTU ICIN. Telefon (<=980px) karsiliklari asagidaki
 * medya sorgusunda.
 *
 * SECICILER NEDEN ".ustbar nav" ILE BASLIYOR — IKI AYRI OLCULMUS SEBEP:
 *
 *  1. OZGULLUK. Yukaridaki ".ustbar nav a" secicisi (0,1,2) duz bir
 *     ".gez-alt a" kuralini (0,1,1) EZIYOR. Ilk yazimda acilir menu
 *     ogelerinin dikey bosluguna "padding: 10px 12px" verilmisti ama
 *     padding-block 6px kazaniyordu; yani kutu ic bosluk almiyordu ve
 *     hicbir yerde hata gorunmuyordu. ".gez-ana" icin de aynisi:
 *     "font-weight: 700" ".ustbar nav a"nin 500'une yeniliyordu.
 *  2. DOKUNMATIK :hover. ":hover" bir sinif kadar ozgulluk tasiyor
 *     (".gez-grup:hover > .gez-alt" = 0,3,0). Dokunmatik tarayicilarda
 *     :hover bir dokunustan sonra TAKILI KALABILIYOR; telefon kurallari
 *     kisa yazilsaydi menu telefonda masaustu kutusuna donusurdu.
 */
.ustbar nav .gez-grup { position: relative; }
/*
 * Grup basligi bir BAGLANTI, dugme DEGIL (gerekce: parcalar/ustbar.php
 * basligindaki aciklama). Dugme sifirlamalari (background/border/
 * font-family/cursor) bu yuzden YOK: <a> zaten hicbirini tasimiyor ve
 * yazilmalari okuyana "burada bir dugme var" dedirtirdi.
 */
.ustbar nav .gez-ac {
    align-items: center; color: var(--soluk); display: inline-flex;
    font-size: .95rem; font-weight: 500; gap: 7px; padding: 6px 0; position: relative;
}
.ustbar nav .gez-ac:hover, .ustbar nav .gez-grup:hover > .gez-ac { color: var(--murekkep); }
.ustbar nav .gez-ac.etkin { color: var(--murekkep); font-weight: 700; }
.ustbar nav .gez-ac.etkin::after {
    background: var(--camgobegi); border-radius: 2px; bottom: -2px; content: "";
    height: 3px; left: 0; position: absolute; right: 0;
}
/* Asagi bakan kucuk ok; rengi dugmeden geliyor (currentColor). */
.ustbar nav .gez-ok {
    border: solid currentColor; border-width: 0 2px 2px 0; flex: 0 0 auto;
    height: 6px; margin-top: -3px; transform: rotate(45deg); width: 6px;
}
.ustbar nav .gez-grup:hover > .gez-ac > .gez-ok,
.ustbar nav .gez-grup:focus-within > .gez-ac > .gez-ok,
.ustbar nav .gez-grup.acik > .gez-ac > .gez-ok { margin-top: 3px; transform: rotate(-135deg); }
.ustbar nav .gez-alt {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
    box-shadow: var(--kutu-golge-guclu); display: none; flex-direction: column; gap: 2px;
    left: 0; min-width: 236px; padding: 9px; position: absolute; top: calc(100% + 13px);
}
/*
 * FARE KOPRUSU: dugme ile kutu arasinda 13px bosluk var ve fare o bosluktan
 * gecerken :hover kopuyor, menu kullanici kutuya ulasmadan kapaniyordu.
 * Bu seffaf serit boslugu GRUBUN ICINE aliyor; hic JS gerektirmiyor.
 * Olculeri boslugun TAM olcusu: 1px tasarsa komsu menu baglantilarinin
 * alt kenarindaki tiklamalari yutardi.
 */
.ustbar nav .gez-alt::before {
    content: ""; height: 13px; left: 0; position: absolute; right: 0; top: -13px;
}
/*
 * ACILMA TAMAMEN CSS: fare uzerine gelince :hover, klavye odagi gruba
 * girince :focus-within. JS KAPALIYKEN DE CALISIR.
 */
.ustbar nav .gez-grup:hover > .gez-alt,
.ustbar nav .gez-grup:focus-within > .gez-alt { display: flex; }
/*
 * "kapali" Escape'in bastirmasi. Ozgullugu ustteki iki kuralla AYNI
 * (0,4,1); kazanmasinin tek sebebi SONRA gelmesi. Yukari tasinirsa Escape
 * calismaz — yeri onemlidir.
 */
.ustbar nav .gez-grup.kapali > .gez-alt { display: none; }
.ustbar nav .gez-alt a { border-radius: var(--yaricap-s); padding: 10px 12px; white-space: nowrap; }
.ustbar nav .gez-alt a:hover { background: var(--kagit); }
.ustbar nav .gez-alt a.etkin { background: var(--turkuaz-zemin); }
.ustbar nav .gez-alt a.etkin::after { display: none; }
/*
 * ".gez-ana" KALDIRILDI. Grubun kendi sayfasi acilir menunun icinde
 * ikinci kez tekrarlaniyordu; artik baslik dogrudan o sayfaya baglaniyor.
 */

@media (max-width: 980px) {
    .ustbar nav {
        background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
        box-shadow: var(--kutu-golge-guclu); display: none; flex-direction: column;
        gap: 2px; margin: 0; min-width: 225px; padding: 9px;
        position: absolute; right: 0; top: 66px;
    }
    .ustbar nav.acik { display: flex; }
    .ustbar nav a { border-radius: var(--yaricap-s); padding: 11px 13px; }
    .ustbar nav a.etkin { background: var(--turkuaz-zemin); }
    .ustbar nav a.etkin::after { display: none; }
    .menu-dugme { display: inline-flex; }
    .ustbar > .kap > .dugme { display: none; }

    /* ── Telefonda acilir menu DUZ LISTE ──────────────────────────
     * Telefon menusunun KENDISI zaten bir acilir kutu. Icine ikinci bir
     * kutu koymak ziyaretciye iki dokunus bindirir ve dar ekranda kutu
     * kutunun icinde tasar. "display: contents" grubun ve alt kutunun
     * kendi kutusunu KALDIRIYOR: dort baglanti menunun DOGRUDAN ogesi
     * oluyor ve ustteki .ustbar nav a bicimlerini aynen aliyor.
     * GRUP BASLIGI TELEFONDA DA GORUNUR. Masaustunde acilir menuyu acan
     * sey odur, telefonda ise listenin siradan bir satiri — ve her iki
     * durumda da /hizmetler'e giden bir BAGLANTI. Gizlenseydi o sayfaya
     * telefondan hic ulasilamazdi.
     *
     * SECICILER UZUN: gerekcesi yukarida, .gez-grup basliginda.
     *
     * ":hover", ":focus-within" ve ".acik" BICIMLERI DE BURADA EZILIYOR.
     * Masaustu kurallari ".ustbar nav .gez-grup:hover > .gez-alt" (0,4,1)
     * ozgullugunde; telefon kurali yalnizca
     * ".ustbar nav .gez-grup .gez-alt" (0,3,1) yazilsaydi dokunmatikte
     * TAKILAN bir :hover masaustu kutusunu geri getirirdi. Ayni uc secici
     * burada tekrar yaziliyor ve sonra geldigi icin kazaniyor. */
    .ustbar nav .gez-grup,
    .ustbar nav .gez-grup .gez-alt,
    .ustbar nav .gez-grup:hover > .gez-alt,
    .ustbar nav .gez-grup:focus-within > .gez-alt,
    .ustbar nav .gez-grup.kapali > .gez-alt { display: contents; }
    .ustbar nav .gez-grup .gez-alt::before { content: none; }
    /* Asagi bakan ok yalnizca acilir menunun isareti; telefonda acilir
       menu yok, ok da olmamali. */
    .ustbar nav .gez-ok { display: none; }
    /* Alt ogeler girintili: duz listede hangisinin gruba ait oldugu
       baska turlu anlasilmazdi. Grup basligi girintisiz kaliyor. */
    .ustbar nav .gez-alt a { border-radius: var(--yaricap-s); padding: 11px 13px; white-space: normal; }
    .ustbar nav .gez-alt a {
        border-left: 2px solid var(--cizgi); border-radius: 0 var(--yaricap-s) var(--yaricap-s) 0;
        margin-left: 13px;
    }
}

/* ——— Dugmeler ——— */
.dugme {
    align-items: center; border: 1px solid transparent; border-radius: var(--yaricap-s);
    cursor: pointer; display: inline-flex; font-family: var(--font); font-size: .97rem;
    font-weight: 600; gap: 9px; justify-content: center; padding: 12px 22px;
    text-decoration: none; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.dugme-asil { background: var(--turkuaz); color: var(--vurgu-metin); }
.dugme-asil:hover { background: var(--vurgu-koyu); color: var(--vurgu-metin); }
.dugme-ikinci { background: transparent; border-color: var(--cizgi-koyu); color: var(--murekkep); }
.dugme-ikinci:hover { border-color: var(--turkuaz); color: var(--vurgu-koyu); }
.dugme-koyu-uzeri { background: var(--camgobegi); color: #04202a; }
.dugme-koyu-uzeri:hover { background: #4bd9f0; color: #04202a; }
.dugme-hayalet-koyu { background: transparent; border-color: rgba(255, 255, 255, .34); color: #fff; }
.dugme-hayalet-koyu:hover { border-color: var(--camgobegi); color: var(--camgobegi); }
.ok { font-family: var(--kod); font-size: 1.05em; line-height: 1; }

/* ——— Koyu bolum ——— */
.koyu {
    background:
        radial-gradient(1100px 440px at 88% -12%, rgba(34, 201, 229, .20), transparent 62%),
        radial-gradient(760px 420px at 4% 108%, rgba(11, 127, 133, .26), transparent 62%),
        var(--lacivert-950);
    color: #dbe7f2;
}
.koyu h1, .koyu h2, .koyu h3 { color: #fff; }
.koyu .ust-etiket { color: var(--camgobegi); }
.koyu .bolum-basi p { color: rgba(219, 231, 242, .82); }
.koyu .ayrac { border-top-color: rgba(255, 255, 255, .13); }

/* ——— Giris (ana sayfa kahraman alani) ——— */
.giris { padding-block: clamp(46px, 6vw, 86px) clamp(34px, 4.5vw, 62px); }
.giris h1 { margin-top: 18px; }
.giris p.alt { color: rgba(219, 231, 242, .86); font-size: 1.15rem; margin-top: 20px; max-width: 62ch; }
.giris .eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.giris .kayit-notu { color: rgba(219, 231, 242, .66); font-size: .88rem; margin-top: 16px; }

/* ——— Sayi seridi ——— */
.sayilar {
    border-top: 1px solid rgba(255, 255, 255, .13);
    display: grid; gap: 1px 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin-top: clamp(34px, 4.5vw, 56px); padding-top: clamp(26px, 3.5vw, 38px);
}
.sayilar > div { padding-right: 20px; }
.sayilar b {
    color: #fff; display: block; font-size: clamp(1.7rem, 3.4vw, 2.5rem);
    font-weight: 800; letter-spacing: -0.04em; line-height: 1;
}
.sayilar b em { color: var(--camgobegi); font-style: normal; }
.sayilar span { color: rgba(219, 231, 242, .72); display: block; font-size: .88rem; margin-top: 7px; }

/* ——— Ic sayfa basligi ——— */
.sayfa-basi { padding-block: clamp(42px, 5.5vw, 74px) clamp(26px, 3.5vw, 44px); }
.sayfa-basi h1 { margin-top: 16px; }
.sayfa-basi p { font-size: 1.1rem; margin-top: 18px; max-width: 64ch; }
.sayfa-basi.koyu p { color: rgba(219, 231, 242, .84); }

/* ——— KAYDIRICI ——— */
.kaydirici { margin-top: clamp(34px, 4.5vw, 54px); position: relative; }
.kaydirici-pencere { border-radius: var(--yaricap-l); overflow: hidden; }
.kaydirici-ray { display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.slayt {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap-l);
    box-shadow: var(--kutu-golge); display: grid; flex: 0 0 100%;
    gap: 28px 38px; grid-template-columns: 1.1fr .9fr; min-width: 0;
    padding: clamp(24px, 3.2vw, 42px);
}
@media (max-width: 880px) { .slayt { grid-template-columns: 1fr; } }
.slayt h3 {
    font-size: clamp(1.35rem, 2.7vw, 2rem); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.12; margin: 14px 0;
}
.slayt > div > p { color: var(--soluk); font-size: 1rem; max-width: 52ch; }
.slayt .nokta-liste { display: grid; gap: 10px; list-style: none; margin: 20px 0 0; padding: 0; }
.slayt .nokta-liste li { color: var(--metin); font-size: .93rem; padding-left: 26px; position: relative; }
.slayt .nokta-liste li::before {
    color: var(--turkuaz); content: "✓"; font-weight: 800; left: 2px; position: absolute;
}
.kaydirici-alt { align-items: center; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; margin-top: 20px; }
.kaydirici-noktalar { display: flex; gap: 9px; }
.kaydirici-noktalar button {
    background: var(--cizgi-koyu); border: 0; border-radius: 999px; cursor: pointer;
    height: 9px; padding: 0; transition: width .3s, background .3s; width: 9px;
}
.kaydirici-noktalar button[aria-current="true"] { background: var(--turkuaz); width: 32px; }
.koyu .kaydirici-noktalar button { background: rgba(255, 255, 255, .3); }
.koyu .kaydirici-noktalar button[aria-current="true"] { background: var(--camgobegi); }
.kaydirici-oklar { display: flex; gap: 9px; }
.kaydirici-oklar button {
    align-items: center; background: var(--yuzey); border: 1px solid var(--cizgi-koyu);
    border-radius: var(--yaricap-s); color: var(--murekkep); cursor: pointer;
    display: flex; font-family: var(--kod); font-size: 1.05rem;
    height: 42px; justify-content: center; width: 44px;
}
.kaydirici-oklar button:hover { border-color: var(--turkuaz); color: var(--vurgu-koyu); }
.koyu .kaydirici-oklar button { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); color: #fff; }
.koyu .kaydirici-oklar button:hover { border-color: var(--camgobegi); color: var(--camgobegi); }
@media (prefers-reduced-motion: reduce) { .kaydirici-ray { transition: none; } }

/* ——— FORM ONIZLEME (gercek form sablonunun birebir kopyasi) ———
   Gercek ekran goruntusu DEGIL: hasta/kurum verisi tasimayan, her
   cozunurlukte net kalan bir yeniden cizim. Logo yerine "HASTANE LOGOSU". */
.form-kagidi {
    background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap);
    box-shadow: var(--kutu-golge); color: #16202b; overflow: hidden;
}
.form-antet { border-bottom: 1.5px solid #16202b; display: grid; grid-template-columns: 112px 1fr 128px; }
.form-antet > div { padding: 10px 12px; }
.form-antet .logo-kutu {
    align-items: center; border-right: 1px solid #16202b; color: #58687a; display: flex;
    font-size: .6rem; font-weight: 700; justify-content: center; letter-spacing: .06em;
    line-height: 1.35; text-align: center;
}
.form-antet .ad-kutu { align-items: center; display: flex; font-size: .9rem; font-weight: 700; justify-content: center; text-align: center; }
.form-antet .kod-kutu { border-left: 1px solid #16202b; display: grid; font-family: var(--kod); font-size: .58rem; gap: 3px; }
.form-antet .kod-kutu span { display: flex; justify-content: space-between; gap: 8px; }
.form-govde { display: grid; }
.form-alan { border-bottom: 1px solid #d7dee6; display: grid; grid-template-columns: 185px 1fr; }
.form-alan > div { padding: 9px 12px; }
.form-alan .fe { border-right: 1px solid #d7dee6; color: #46566a; font-size: .78rem; }
.form-alan .fd { font-size: .82rem; min-height: 34px; }
.form-alan .fd.bos::after { color: #adbac7; content: "—"; }
.form-altbilgi { border-top: 1.5px solid #16202b; display: grid; grid-template-columns: repeat(3, 1fr); }
.form-altbilgi > div { border-right: 1px solid #d7dee6; padding: 9px 12px; text-align: center; }
.form-altbilgi > div:last-child { border-right: 0; }
.form-altbilgi b { display: block; font-size: .6rem; letter-spacing: .05em; }
/* 9px + #8b99a8 = 2.91:1 idi; maket de olsa okunmuyordu. */
.form-altbilgi span { color: #5f6e7e; display: block; font-size: .64rem; margin-top: 16px; }
.form-kagidi .ek-not {
    background: var(--turkuaz-zemin); border-top: 1px solid var(--cizgi);
    color: var(--vurgu-koyu); font-size: .78rem; padding: 10px 12px;
}
@media (max-width: 520px) {
    .form-antet { grid-template-columns: 84px 1fr; }
    .form-antet .kod-kutu { border-left: 0; border-top: 1px solid #16202b; grid-column: 1 / -1; }
    .form-alan { grid-template-columns: 1fr; }
    .form-alan .fe { border-right: 0; border-bottom: 1px dashed #d7dee6; }
}

/* ——— Ozellik izgarasi ——— */
.ozellikler { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); }
.ozellik {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
    display: flex; flex-direction: column; gap: 10px; padding: 26px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ozellik:hover { border-color: var(--camgobegi); box-shadow: var(--kutu-golge); transform: translateY(-2px); }
.ozellik .simge {
    align-items: center; background: var(--turkuaz-zemin); border-radius: 10px;
    color: var(--vurgu-koyu); display: flex; font-size: 1.1rem; height: 42px;
    justify-content: center; width: 42px;
}
.ozellik p { color: var(--soluk); font-size: .93rem; }
.ozellik .bag { color: var(--vurgu-koyu); font-size: .88rem; font-weight: 600; margin-top: auto; padding-top: 8px; text-decoration: none; }
.ozellik .bag:hover { text-decoration: underline; }

/* ——— Numarali adimlar ——— */
.adimlar { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.adim { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 26px; position: relative; }
.adim .no {
    color: var(--camgobegi); font-size: 2rem; font-weight: 800;
    letter-spacing: -.04em; line-height: 1; margin-bottom: 12px;
}
.adim h3 { margin-bottom: 9px; }
.adim p { color: var(--soluk); font-size: .92rem; }
.adim ul { display: grid; gap: 8px; list-style: none; margin: 14px 0 0; padding: 0; }
.adim li { color: var(--metin); font-size: .88rem; padding-left: 24px; position: relative; }
.adim li::before { color: var(--turkuaz); content: "✓"; font-weight: 800; left: 2px; position: absolute; }

/* ——— Karsilastirma ——— */
.karsi { border: 1px solid var(--cizgi); border-radius: var(--yaricap); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.karsi > div { min-width: 0; padding: clamp(22px, 3vw, 32px); }
.karsi .once { background: var(--yuzey); border-right: 1px solid var(--cizgi); }
.karsi .sonra { background: var(--turkuaz-zemin); }
.karsi h3 { margin-bottom: 15px; }
.karsi ul { display: grid; gap: 11px; list-style: none; margin: 0; padding: 0; }
.karsi li { color: var(--soluk); font-size: .94rem; padding-left: 24px; position: relative; }
.karsi li::before { content: "—"; left: 0; position: absolute; }
.karsi .sonra li { color: var(--metin); }
.karsi .sonra li::before { color: var(--olumlu); content: "✓"; font-weight: 800; }
@media (max-width: 760px) {
    .karsi { grid-template-columns: 1fr; }
    .karsi .once { border-bottom: 1px solid var(--cizgi); border-right: 0; }
}

/* ——— Moduller ——— */
.moduller { background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--yaricap); display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); overflow: hidden; }
.modul { background: var(--yuzey); padding: 22px; }
.modul .kod { color: var(--soluk); font-family: var(--kod); font-size: .69rem; letter-spacing: .05em; }
.modul h3 { margin: 8px 0; }
.modul p { color: var(--soluk); font-size: .89rem; }
.modul.one-cikan { background: var(--turkuaz-zemin); }
.rozet-etiket {
    background: var(--turkuaz); border-radius: 4px; color: var(--vurgu-metin);
    font-family: var(--kod); font-size: .6rem; letter-spacing: .05em;
    margin-left: 7px; padding: 3px 6px; vertical-align: 2px; white-space: nowrap;
}

/* ——— Yapay zeka sohbeti ——— */
.zeka { align-items: start; display: grid; gap: 38px; grid-template-columns: 1.02fr .98fr; }
@media (max-width: 900px) { .zeka { grid-template-columns: 1fr; } }
.zeka-liste { display: grid; gap: 16px; margin-top: 26px; }
.zeka-liste > div { display: grid; gap: 4px; padding-left: 28px; position: relative; }
.zeka-liste > div::before { background: var(--camgobegi); border-radius: 50%; content: ""; height: 10px; left: 0; position: absolute; top: 9px; width: 10px; }
.zeka-liste b { color: var(--murekkep); font-weight: 700; }
.zeka-liste span { color: var(--soluk); font-size: .93rem; }
.koyu .zeka-liste b { color: #fff; }
.koyu .zeka-liste span { color: rgba(219, 231, 242, .78); }

.sohbet { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap); box-shadow: var(--kutu-golge); overflow: hidden; }
.sohbet .baslik { align-items: center; background: var(--kagit); border-bottom: 1px solid var(--cizgi); color: var(--metin); display: flex; font-size: .87rem; gap: 10px; padding: 13px 18px; }
.sohbet .baslik .nokta { background: var(--camgobegi); border-radius: 50%; height: 8px; width: 8px; }
.sohbet .govde { display: grid; gap: 14px; padding: 18px; }
.balon { border-radius: var(--yaricap); font-size: .93rem; max-width: 90%; padding: 12px 15px; }
.balon.soru { background: var(--turkuaz-zemin); border-bottom-right-radius: 3px; color: var(--vurgu-koyu); justify-self: end; }
.balon.cevap { background: var(--kagit); border: 1px solid var(--cizgi); border-bottom-left-radius: 3px; color: var(--metin); }
.balon .kaynak { color: var(--soluk); display: block; font-family: var(--kod); font-size: .71rem; margin-top: 9px; }
.balon.cevap i { color: var(--soluk); display: block; font-size: .84rem; font-style: normal; margin-top: 9px; }

/* ——— Danismanlik fazlari ——— */
.fazlar { display: grid; }
.faz { border-bottom: 1px solid var(--cizgi); }
.faz:first-child { border-top: 1px solid var(--cizgi); }
.faz summary { align-items: baseline; cursor: pointer; display: grid; gap: 4px 18px; grid-template-columns: 58px 1fr auto; list-style: none; padding: 19px 0; }
.faz summary::-webkit-details-marker { display: none; }
.faz .fno { color: var(--vurgu-koyu); font-family: var(--kod); font-size: .78rem; font-weight: 600; }
.faz .fad { color: var(--murekkep); font-size: 1.08rem; font-weight: 700; letter-spacing: -.02em; }
.faz .fisaret { color: var(--turkuaz); font-family: var(--kod); font-size: 1.25rem; }
.faz .icerik { padding: 0 0 22px 76px; }
@media (max-width: 620px) { .faz summary { grid-template-columns: 42px 1fr auto; } .faz .icerik { padding-left: 42px; } }
.faz .icerik ul { color: var(--soluk); display: grid; gap: 8px; list-style: none; margin: 0 0 15px; max-width: 70ch; padding: 0; }
.faz .icerik li { font-size: .93rem; padding-left: 20px; position: relative; }
.faz .icerik li::before { color: var(--vurgu-koyu); content: "·"; font-weight: 800; left: 5px; position: absolute; }
.faz .devir { background: var(--turkuaz-zemin); border-left: 3px solid var(--camgobegi); border-radius: 0 var(--yaricap-s) var(--yaricap-s) 0; color: var(--metin); font-size: .92rem; max-width: 70ch; padding: 13px 16px; }
.faz .devir b { color: var(--vurgu-koyu); font-weight: 700; }

/* ——— Teslim ——— */
.teslim { background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--yaricap); display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); overflow: hidden; }
.teslim > div { background: var(--yuzey); padding: 25px; }
.teslim .cikti { color: var(--vurgu-koyu); font-family: var(--kod); font-size: .71rem; letter-spacing: .04em; }
.teslim h3 { margin: 9px 0; }
.teslim p { color: var(--soluk); font-size: .92rem; }

/* ——— Hazirlik suresi ——— */
.sure {
    align-items: center; background: var(--turkuaz-zemin); border: 1px solid var(--cizgi);
    border-left: 4px solid var(--camgobegi); border-radius: 0 var(--yaricap) var(--yaricap) 0;
    display: grid; gap: 12px 28px; grid-template-columns: auto 1fr;
    margin-bottom: 34px; padding: 22px 26px;
}
.sure b { color: var(--vurgu-koyu); display: block; font-size: clamp(1.9rem, 3.8vw, 2.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; white-space: nowrap; }
.sure > div > span { color: var(--soluk); font-size: .85rem; }
.sure p { color: var(--metin); font-size: .95rem; max-width: 62ch; }
@media (max-width: 620px) { .sure { grid-template-columns: 1fr; } }

/* ——— Veri listesi ——— */
.veri-liste { display: grid; }
.veri-liste > div { border-bottom: 1px solid var(--cizgi); display: grid; gap: 4px 20px; grid-template-columns: 230px 1fr; padding: 14px 0; }
.veri-liste > div:first-child { border-top: 1px solid var(--cizgi); }
.veri-liste dt { color: var(--soluk); font-size: .86rem; }
.veri-liste dd { color: var(--metin); font-size: .95rem; margin: 0; min-width: 0; }
.koyu .veri-liste > div { border-color: rgba(255, 255, 255, .13); }
.koyu .veri-liste dt { color: rgba(219, 231, 242, .6); }
.koyu .veri-liste dd { color: #e7eff7; }
@media (max-width: 620px) { .veri-liste > div { grid-template-columns: 1fr; } }

/* ——— SSS ——— */
.sss { display: grid; }
.sss details { border-bottom: 1px solid var(--cizgi); }
.sss details:first-child { border-top: 1px solid var(--cizgi); }
.sss summary { color: var(--murekkep); cursor: pointer; font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; list-style: none; padding: 18px 40px 18px 0; position: relative; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { color: var(--turkuaz); content: "+"; font-family: var(--kod); font-size: 1.3rem; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.sss details[open] summary::after { content: "–"; }
.sss .cevap { color: var(--soluk); font-size: .96rem; max-width: 72ch; padding-bottom: 20px; }

/* ——— Kapanis cagrisi ——— */
.cagri { align-items: center; border-radius: var(--yaricap-l); display: grid; gap: 20px 36px; grid-template-columns: 1fr auto; padding: clamp(28px, 4vw, 48px); }
.cagri.koyu { border: 0; }
@media (max-width: 800px) { .cagri { grid-template-columns: 1fr; } }
.cagri h2 { font-size: clamp(1.45rem, 2.8vw, 2.05rem); }
.cagri p { margin-top: 10px; max-width: 56ch; }
.cagri .eylem { display: flex; flex-wrap: wrap; gap: 12px; }

/* ——— Iletisim ——— */
.iletisim { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap-l); box-shadow: var(--kutu-golge); padding: clamp(26px, 4vw, 44px); }
.alanlar { display: grid; gap: 17px; grid-template-columns: 1fr 1fr; margin-top: 26px; }
@media (max-width: 620px) { .alanlar { grid-template-columns: 1fr; } }
.alan { display: grid; gap: 7px; min-width: 0; }
.alan.genis { grid-column: 1 / -1; }
.alan label { color: var(--soluk); font-size: .85rem; font-weight: 500; }
.alan input, .alan select, .alan textarea {
    background: var(--kagit); border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap-s);
    color: var(--metin); font-family: var(--font); font-size: .97rem; padding: 12px 14px; width: 100%;
}
.alan textarea { min-height: 104px; resize: vertical; }
.gonderim-notu { color: var(--soluk); font-size: .88rem; margin-top: 15px; }
.yanit { border-radius: var(--yaricap-s); font-size: .95rem; margin-top: 18px; padding: 14px 16px; }
.yanit.iyi { background: var(--turkuaz-zemin); color: var(--vurgu-koyu); }
.dogrudan { border-top: 1px solid var(--cizgi); display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); margin-top: 30px; padding-top: 24px; }
.dogrudan div { display: grid; gap: 3px; min-width: 0; }
.dogrudan span { color: var(--soluk); font-size: .82rem; }
.dogrudan b { color: var(--murekkep); font-family: var(--kod); font-size: .94rem; font-weight: 600; overflow-wrap: anywhere; }

/* ——— Alt bilgi ——— */
footer { background: var(--lacivert-950); color: rgba(219, 231, 242, .66); font-size: .88rem; padding-block: clamp(36px, 4.5vw, 56px) 36px; }
footer a { color: rgba(219, 231, 242, .78); text-decoration: none; }
footer a:hover { color: var(--camgobegi); }
.alt-izgara { display: grid; gap: 28px 40px; grid-template-columns: 1.4fr 1fr 1fr; }
@media (max-width: 760px) { .alt-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .alt-izgara { grid-template-columns: 1fr; } }
.alt-izgara h4 { color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .07em; margin-bottom: 14px; }
.alt-izgara ul { display: grid; gap: 10px; list-style: none; margin: 0; padding: 0; }
.alt-izgara .marka { color: #fff; margin-bottom: 12px; }
.alt-serit { align-items: center; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 32px; padding-top: 22px; }
.alt-serit nav { display: flex; flex-wrap: wrap; gap: 18px; margin-left: auto; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ═══════════════════════════════════════════════════════════════════
   TANITIM SITESI — sablonlarin ek siniflari
   (ortak.css'in ust kismi tasarim dizgesi; burasi sayfa parcalari)
   ═══════════════════════════════════════════════════════════════════ */

/* Klavyeyle gezen icin "icerige atla" — yalnizca odaklaninca gorunur. */
.atla {
    background: var(--turkuaz); border-radius: 0 0 var(--yaricap-s) 0;
    color: var(--vurgu-metin); font-weight: 600; left: 0; padding: 12px 18px;
    position: absolute; top: 0; transform: translateY(-120%); z-index: 100;
    text-decoration: none; transition: transform .15s ease;
}
.atla:focus { transform: translateY(0); }

.kap-saga { margin-left: auto; color: var(--soluk); font-family: var(--kod); font-size: .72rem; }

/* Sayi seridi artik ayri bir bolum: kahraman alanindaki ust cizgi ve
   bosluk burada gereksiz, bolumun kendi dolgusu var. */
.sayilar-bolum { padding-block: clamp(30px, 3.6vw, 48px); }
.sayilar-bolum .sayilar { border-top: 0; margin-top: 0; padding-top: 0; }

.dar-bolum { padding-block: clamp(28px, 3.4vw, 44px); }

.form-alt { color: var(--soluk); margin-top: 10px; max-width: 58ch; }
.form-eylem { margin-top: 22px; }

/* ——— Yol haritasi ———
   Bu bolum HENUZ YAPILMAMIS ozellikleri anlatiyor. Gorsel dili bilerek
   ozellik kartlarindan FARKLI: kesikli kenarlik ve soluk zemin, "bu
   heniz yok" sinyalini renkten once bicimle veriyor. */
.yol-bolum { background: var(--kagit); }
.yol-liste { display: grid; gap: 14px; }
.yol-oge {
    align-items: start; background: var(--yuzey);
    border: 1px dashed var(--cizgi-koyu); border-radius: var(--yaricap);
    display: grid; gap: 8px 20px; grid-template-columns: 150px 1fr; padding: 20px 22px;
}
@media (max-width: 640px) { .yol-oge { grid-template-columns: 1fr; } }
.yol-oge h3 { margin-bottom: 6px; }
.yol-oge p { color: var(--soluk); font-size: .93rem; }
.yol-durum {
    border-radius: 999px; display: inline-block; font-size: .74rem;
    font-weight: 700; letter-spacing: .02em; padding: 5px 12px; white-space: nowrap;
}
/* TEK ROZET: "Cok yakinda". Onceki uc varyant (gelistiriliyor / planlandi /
   arastiriliyor) kaldirildi; ayrim ziyaretci icin bir sey ifade etmiyordu ve
   yonetim ekraninda madde basina doldurulacak gereksiz bir alandi.
   Kontrast olculdu: turkuaz zemin uzerinde koyu turkuaz 7.5:1. */
.yol-durum { background: var(--turkuaz-zemin); color: var(--vurgu-koyu); }

/* ——— Zengin metin blogu ———
   Icerik HtmlTemizleyici'den gecmis bir beyaz liste: yalnizca asagidaki
   etiketler cikabilir, hepsinin bicimi burada tanimli. */
.zengin { color: var(--metin); max-width: 72ch; }
.zengin > * + * { margin-top: 1em; }
.zengin h2, .zengin h3, .zengin h4 { color: var(--murekkep); margin-top: 1.6em; }
.zengin ul, .zengin ol { padding-left: 1.3em; }
.zengin li + li { margin-top: .45em; }
.zengin a { color: var(--vurgu-koyu); }
.zengin blockquote {
    border-left: 3px solid var(--camgobegi); color: var(--soluk);
    margin-left: 0; padding: 4px 0 4px 18px;
}
/* ——— Yazi icindeki gorseller ———
   CKEditor gorseli <figure class="image"><img><figcaption> olarak yaziyor.
   "image" sinifi HtmlTemizleyici'de deger bazli izinli — kaldirilirsa
   duzenleyici figuru tanimaz: gorsel satir ici olur ve RESIM ALTI YAZISI
   duz metne iner (gercek tarayicida olculdu).
   display:block + margin:auto ortalar; hizalama sinifi URETILMIYOR
   (ImageStyle eklentisi bilerek kapali, bkz. yazilar.php). */
.zengin img { border-radius: var(--yaricap-s); display: block; height: auto; max-width: 100%; }
.zengin figure { margin: 30px auto; max-width: 100%; }
.zengin figure img { margin-inline: auto; }
.zengin figcaption {
    color: var(--soluk); font-size: .88rem; line-height: 1.55;
    margin-top: 10px; text-align: center;
}
.zengin table { border-collapse: collapse; width: 100%; }
.zengin th, .zengin td { border: 1px solid var(--cizgi); padding: 9px 12px; text-align: left; }
.zengin th { background: var(--kagit); font-weight: 700; }
.zengin code {
    background: var(--kagit); border-radius: 4px; font-family: var(--kod);
    font-size: .88em; padding: 2px 6px;
}
.zengin pre { background: var(--kagit); border-radius: var(--yaricap-s); overflow-x: auto; padding: 16px; }
.zengin hr { border: 0; border-top: 1px solid var(--cizgi); }
.yanit.kotu { background: #fdeaea; color: #8a1f1f; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .yanit.kotu { background: #3a1618; color: #ffb4b4; }
}
:root[data-theme="dark"] .yanit.kotu { background: #3a1618; color: #ffb4b4; }

/* ═══════════════════════════════════════════════════════════════════
   KAHRAMAN KAYDIRICISI  (hero_kaydirici blogu)
   Sayfanin en ustu: sabit tek vaat yerine donen slaytlar.

   Asagidaki ".kk" kapsamli kurallar, ozellik kaydiricisinin kart
   gorunumunu BURADA geri aliyor: kahramanda kutu, kenarlik ve golge
   istemiyoruz — yalnizca metin, koyu zeminin uzerinde.
   ═══════════════════════════════════════════════════════════════════ */
.kahraman-kaydirici { padding-block: clamp(40px, 5.5vw, 76px) clamp(28px, 3.5vw, 48px); }
.kahraman-kaydirici .kaydirici { margin-top: 0; }
.kk .kaydirici-pencere { border-radius: 0; overflow: hidden; }

.kk-slayt {
    flex: 0 0 100%;
    min-width: 0;
    /*
     * YUKSEKLIK SABITLENIYOR.
     * Slaytlarin metin uzunlugu farkli; flex esitlese de EN UZUN slayta
     * gore esitler ve gecis sirasinda sayfa zipliyordu. Alt sinir vererek
     * sicramayi kesiyoruz; daha uzun bir slayt eklenirse kutu buyur,
     * digerleri de onunla esitlenir (flex-stretch) ve yine zipla-mazlar.
     */
    min-height: clamp(300px, 34vw, 420px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: clamp(0px, 4vw, 90px);
}
.kk-slayt h1,
.kk-slayt .kk-baslik {
    color: #fff;
    font-size: clamp(2.1rem, 4.6vw, 3.45rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin: 18px 0 0;
    max-width: 19ch;
    text-wrap: balance;
}
.kk-slayt .alt { color: rgba(219, 231, 242, .86); font-size: 1.14rem; margin-top: 20px; max-width: 60ch; }
.kk-slayt .eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.kk-slayt .kayit-notu { color: rgba(219, 231, 242, .62); font-size: .88rem; margin-top: 16px; }

/* Denetimler: koyu zemine gore, sola hizali */
.kk .kaydirici-alt { justify-content: flex-start; gap: 22px; margin-top: 10px; }
.kk .kaydirici-noktalar button { background: rgba(255, 255, 255, .28); }
.kk .kaydirici-noktalar button[aria-current="true"] { background: var(--camgobegi); width: 34px; }
.kk .kaydirici-oklar button {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}
.kk .kaydirici-oklar button:hover { border-color: var(--camgobegi); color: var(--camgobegi); }

@media (max-width: 640px) {
    .kk-slayt { min-height: 0; padding-right: 0; }
    .kk-slayt h1, .kk-slayt .kk-baslik { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   BLOG
   ═══════════════════════════════════════════════════════════════════ */

/* Ekmek kirintisi — koyu kahraman alaninda */
.kirinti { display: flex; flex-wrap: wrap; gap: 8px; font-size: .86rem; margin-bottom: 18px; }
.kirinti a { color: var(--camgobegi); text-decoration: none; }
.kirinti a:hover { text-decoration: underline; }
.kirinti span { color: rgba(219, 231, 242, .45); }

/* Kategori seridi */
.kategori-serit { display: flex; flex-wrap: wrap; gap: 10px; }
.kategori-serit a {
    align-items: center; background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: 999px; color: var(--metin); display: inline-flex; font-size: .92rem;
    font-weight: 500; gap: 9px; padding: 9px 16px; text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}
.kategori-serit a:hover { border-color: var(--camgobegi); color: var(--vurgu-koyu); }
.kategori-serit a.etkin { background: var(--turkuaz-zemin); border-color: var(--camgobegi); color: var(--vurgu-koyu); font-weight: 700; }
.kategori-serit .adet {
    background: var(--kagit); border-radius: 999px; color: var(--soluk);
    font-family: var(--kod); font-size: .72rem; padding: 2px 8px;
}
.kategori-serit a.etkin .adet { background: rgba(255, 255, 255, .55); color: var(--vurgu-koyu); }

/* Yazi izgarasi ve kartlar */
.yazi-izgara { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.yazi-kart {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
    display: flex; flex-direction: column; gap: 10px; padding: 26px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.yazi-kart:hover { border-color: var(--camgobegi); box-shadow: var(--kutu-golge); transform: translateY(-2px); }
.yazi-kategori {
    align-self: flex-start; background: var(--turkuaz-zemin); border-radius: 999px;
    color: var(--vurgu-koyu); font-size: .74rem; font-weight: 700;
    padding: 4px 11px; text-decoration: none;
}
.yazi-kart h3 { font-size: 1.14rem; line-height: 1.3; }
.yazi-kart h3 a { color: var(--murekkep); text-decoration: none; }
.yazi-kart h3 a:hover { color: var(--vurgu-koyu); }
.yazi-kart p { color: var(--soluk); font-size: .93rem; }

/* Tarih / okuma suresi */
.yazi-ust-bilgi { color: var(--soluk); display: flex; flex-wrap: wrap; font-size: .82rem; gap: 16px; margin-top: auto; padding-top: 6px; }
.yazi-ust-bilgi span { align-items: center; display: inline-flex; gap: 6px; }
.yazi-ust-bilgi span + span::before { background: var(--cizgi-koyu); border-radius: 50%; content: ""; height: 4px; margin-right: 10px; width: 4px; }
/* Koyu zeminde (yazi basligi altinda) */
.yazi-ust-bilgi.acik { color: rgba(219, 231, 242, .72); margin-top: 20px; }
.yazi-ust-bilgi.acik span + span::before { background: rgba(255, 255, 255, .3); }

/* Yazi ozeti — gövdeden once, vurgulu */
.yazi-ozet {
    border-left: 3px solid var(--camgobegi); color: var(--murekkep);
    font-size: 1.12rem; line-height: 1.6; margin-bottom: 30px; padding-left: 20px;
}

.bos-liste { color: var(--soluk); padding: 40px 0; text-align: center; }

/* Sayfalama */
.sayfalama { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.sayfalama a {
    align-items: center; background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--yaricap-s); color: var(--metin); display: inline-flex;
    font-weight: 600; justify-content: center; min-width: 42px; padding: 10px 14px; text-decoration: none;
}
.sayfalama a:hover { border-color: var(--camgobegi); color: var(--vurgu-koyu); }
.sayfalama a.etkin { background: var(--turkuaz); border-color: var(--turkuaz); color: var(--vurgu-metin); }

/* ── Hizmet kartlari (alt sayfa listesi) ── */
.hizmetler { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.hizmet-kart {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
    display: flex; flex-direction: column; gap: 10px; padding: 26px; text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.hizmet-kart:hover { border-color: var(--camgobegi); box-shadow: var(--kutu-golge); transform: translateY(-2px); }
.hizmet-kart h3 { color: var(--murekkep); }
.hizmet-kart p { color: var(--soluk); font-size: .93rem; }
.hizmet-kart .devam { color: var(--vurgu-koyu); font-size: .88rem; font-weight: 600; margin-top: auto; padding-top: 8px; }

/* ── Icindekiler (TOC) ──────────────────────────────────────────────
   Uzun mevzuat/karsilastirma yazilarinda hem okuyucuya hem arama
   motoruna yaryor: baslik capalari sayesinde sonuclarda "sayfa ici
   atla" baglantilari cikabiliyor. */
.icindekiler {
    background: var(--kagit); border: 1px solid var(--cizgi);
    border-left: 4px solid var(--camgobegi); border-radius: 0 var(--yaricap) var(--yaricap) 0;
    margin-bottom: 34px; padding: 22px 26px;
}
.icindekiler h2 {
    font-size: .78rem; font-weight: 700; letter-spacing: .08em;
    margin-bottom: 14px; color: var(--vurgu-koyu);
}
.icindekiler ol { counter-reset: toc; display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
.icindekiler li { counter-increment: toc; padding-left: 28px; position: relative; }
.icindekiler li::before {
    color: var(--soluk); content: counter(toc) "."; font-family: var(--kod);
    font-size: .8rem; left: 0; position: absolute; top: 1px;
}
.icindekiler li.d3 { margin-left: 22px; }
.icindekiler li.d3::before { content: "—"; }
.icindekiler a { color: var(--metin); text-decoration: none; }
.icindekiler a:hover { color: var(--vurgu-koyu); text-decoration: underline; }

/* Capa hedefi ust barin altinda kalmasin */
.zengin h2[id], .zengin h3[id] { scroll-margin-top: 90px; }

/* Karsilastirma tablosu (kanunun onceki/yeni hali) — yazar bu sinifi
   editorde verebilir; vermezse normal tablo bicimi gecerli. */
.zengin table.karsilastirma th:first-child,
.zengin table.karsilastirma td:first-child { background: var(--kagit); width: 50%; }
.zengin table.karsilastirma th { background: var(--turkuaz-zemin); color: var(--vurgu-koyu); }

/* ——— Yazi ici vurgu ve yan not ———
   BU IKI SINIF HtmlTemizleyici'nin IZINLI_SINIFLAR listesinde VAR ama
   bicimi YOKTU: yazar class="vurgu" verse hicbir sey degismiyordu.
   Temizleyicinin kendi acıklamasi bunu zaten yasaklıyor ("once ortak.css'e
   sinifi yazin, sonra adini beyaz listeye ekleyin — tersi, calismayan bir
   sinif birakir"). Sira tersine donmus; burada kapatiliyor.

   vurgu : dikkat cekilecek paragraf (okurun atlamamasi gereken cumle)
   not   : yan not / parantez bilgisi (atlanabilir ama faydali) */
.zengin p.vurgu {
    background: var(--turkuaz-zemin); border-left: 4px solid var(--camgobegi);
    border-radius: 0 var(--yaricap-s) var(--yaricap-s) 0;
    color: var(--murekkep); font-weight: 500;
    margin: 26px 0; padding: 16px 20px;
}
.zengin p.not {
    border-left: 2px dashed var(--cizgi); color: var(--soluk);
    font-size: .94rem; margin: 22px 0; padding: 4px 0 4px 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   AKREDITASYON SETLERI
   ═══════════════════════════════════════════════════════════════════
   Uc blok turu burada bicimlendiriliyor: set_kunyesi (setin kimlik
   karti), set_listesi (dizin) ve mevzuat_dayanak (hangi kaydi hangi
   mevzuat zorunlu kiliyor).

   KURAL: bu dosyada karsiligi OLMAYAN sinif sablonda kullanilmaz.
   Gerekcesi HtmlTemizleyici basligindaki olculmus kusur: 'vurgu' ve
   'not' siniflari listeye eklenmis, bicimi yazilmamisti ve sessizce
   hicbir sey yapmiyorlardi. Testi tools/test-kos.php icinde. */

/* ——— Ekmek kirintisi, ACIK zemin uzerinde ———
   .kirinti KOYU kahraman alani icin yazildi (span rengi beyaza yakin).
   Ayni sinifi beyaz zeminde kullanmak ayraci okunmaz yapiyordu; set
   sayfalarinin kirintisi icerik akisinin BASINDA, acik zeminde duruyor. */
.kirinti-serit {
    border-bottom: 1px solid var(--cizgi); font-size: .86rem;
    padding-block: 14px;
}
.kirinti-serit nav { display: flex; flex-wrap: wrap; gap: 8px; }
.kirinti-serit a { color: var(--vurgu-koyu); text-decoration: none; }
.kirinti-serit a:hover { text-decoration: underline; }
.kirinti-serit span { color: var(--soluk); }
.kirinti-serit b { color: var(--murekkep); font-weight: 600; }

/* ——— Set kunyesi ——— */
.set-kunye {
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--yaricap-l); padding: clamp(22px, 3vw, 34px);
}
.set-kunye-basi h2 { margin: 12px 0 0; }
.set-kunye .set-kapsam { color: var(--soluk); font-size: 1rem; margin-top: 12px; max-width: 64ch; }
.set-rozet {
    background: var(--turkuaz-zemin); border-radius: 999px; color: var(--vurgu-koyu);
    display: inline-block; font-size: .78rem; font-weight: 700;
    letter-spacing: .01em; padding: 5px 13px;
}
.set-kunye-liste {
    border-top: 1px solid var(--cizgi); display: grid; gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin: 22px 0 0; padding: 0;
}
.set-kunye-liste > div { border-bottom: 1px solid var(--cizgi); padding: 13px 0; }
.set-kunye-liste dt {
    color: var(--soluk); font-family: var(--kod); font-size: .7rem;
    letter-spacing: .04em;
}
.set-kunye-liste dd { color: var(--metin); font-size: .98rem; font-weight: 600; margin: 5px 0 0; }
.set-yapi {
    display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    margin-top: 24px;
}
.set-yapi > div {
    background: var(--kagit); border-radius: var(--yaricap); padding: 16px 18px;
}
.set-yapi b {
    color: var(--vurgu-koyu); display: block; font-size: 1.7rem;
    letter-spacing: -.03em; line-height: 1;
}
.set-yapi span { color: var(--soluk); display: block; font-size: .82rem; margin-top: 7px; }
.set-pdf { margin-top: 26px; }
.set-pdf-not { color: var(--soluk); font-size: .86rem; margin-top: 10px; max-width: 64ch; }

/* ——— Set dizini ——— */
.set-dizin {
    border: 1px solid var(--cizgi); border-radius: var(--yaricap);
    display: grid; overflow: hidden;
}
.set-dizin-oge {
    align-items: center; border-bottom: 1px solid var(--cizgi); display: grid;
    gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr);
    padding: 18px 20px;
}
.set-dizin-oge:last-child { border-bottom: 0; }
.set-dizin-ad h3 { font-size: 1.04rem; line-height: 1.35; }
.set-dizin-ad h3 a { color: var(--murekkep); text-decoration: none; }
.set-dizin-ad h3 a:hover { color: var(--vurgu-koyu); text-decoration: underline; }
.set-surum {
    color: var(--soluk); display: block; font-family: var(--kod);
    font-size: .76rem; margin-top: 6px;
}
.set-dizin-durum { display: grid; gap: 7px; justify-items: start; }
.set-yururluk { color: var(--soluk); font-size: .85rem; }
.set-dizin-bag { display: grid; gap: 7px; justify-items: start; }
.set-dizin-bag .bag {
    color: var(--vurgu-koyu); font-size: .88rem; font-weight: 600; text-decoration: none;
}
.set-dizin-bag .bag:hover { text-decoration: underline; }
.set-dizin-not { color: var(--soluk); font-size: .9rem; margin-top: 18px; max-width: 76ch; }

@media (max-width: 760px) {
    .set-dizin-oge { grid-template-columns: 1fr; }
}

/* ——— Mevzuat dayanagi ———
   Her kart bir KONU BASLIGI; altindaki liste o konunun kanun/yonetmelik
   dayanaklari. Resmi ad tam, kunye ve madde ayri satirda: okuyan atfi
   kendisi dogrulayabilsin. */
.dayanak-bolum { background: var(--kagit); padding-block: clamp(40px, 5vw, 70px); }
.dayanaklar { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.dayanak {
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-radius: var(--yaricap); padding: 24px;
}
.dayanak h3 { font-size: 1.06rem; margin-bottom: 10px; }
.dayanak > p { color: var(--soluk); font-size: .94rem; }
.dayanak-liste { display: grid; gap: 12px; list-style: none; margin: 18px 0 0; padding: 0; }
.dayanak-liste li {
    border-left: 3px solid var(--turkuaz-zemin); padding-left: 14px;
}
.dayanak-ad { color: var(--metin); display: block; font-size: .9rem; font-weight: 600; }
.dayanak-kunye { color: var(--soluk); display: block; font-size: .8rem; margin-top: 3px; }
.dayanak-madde {
    color: var(--vurgu-koyu); display: inline-block; font-family: var(--kod);
    font-size: .76rem; margin-top: 5px;
}
.dayanak-not { color: var(--soluk); font-size: .9rem; margin-top: 22px; max-width: 80ch; }

/* ── Set alt bolum baglanti kartlari ─────────────────────────────────
 * "set_altbolumleri" blogu icin. Desen .yazi-kart ile ayni tutuldu:
 * ayni sitede iki farkli kart dili olmasin.
 *
 * Kart KENDISI bir <a>; ic ice baglanti yok. Butun kart tiklanabilir
 * olmali cunku 63 ogelik bir listede yalnizca basligi tiklatmak dar
 * bir hedef olurdu (dokunmatikte ozellikle).
 */
.altbolum-izgara {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.altbolum-kart {
    background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yaricap);
    display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.altbolum-kart:hover {
    border-color: var(--camgobegi); box-shadow: var(--kutu-golge); transform: translateY(-2px);
}
.altbolum-ad { color: var(--murekkep); font-size: .97rem; font-weight: 600; }
.altbolum-ozet { color: var(--soluk); font-size: .86rem; line-height: 1.45; }
.altbolum-not { color: var(--soluk); font-size: .88rem; margin-top: 18px; }

/* ── Set alt bolum sayfasi: standart listesi ─────────────────────────
 * "standart_listesi" ve "set_altbolumleri" bloklari icin.
 *
 * OLCULDU 12.10.2026: bu siniflarin HICBIRI tanimli degildi ve 63 sayfa
 * canlida bicimsiz duruyordu. Blok cizicisi yazilirken CSS atlanmis;
 * sayfa dogru HTML uretiyordu, o yuzden hicbir sinama kirmiziya donmedi.
 */
.altbolum-bolum { background: var(--kagit); padding-block: clamp(40px, 5vw, 70px); }
.standart-bolum { padding-block: clamp(40px, 5vw, 70px); }

/* Kendi numarasi yok: her maddenin KODU zaten var (AD.AD.01.00). */
.standart-liste { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 0; }

.standart {
    background: var(--yuzey); border: 1px solid var(--cizgi);
    border-left: 3px solid var(--camgobegi); border-radius: var(--yaricap);
    padding: 20px 24px;
    /* Capa ile gelindiginde baslik ust barin ALTINDA kalmasin. */
    scroll-margin-top: 90px;
}
.standart-bas {
    align-items: baseline; display: flex; flex-wrap: wrap; gap: 10px;
    font-size: 1rem; margin: 0 0 8px;
}
.standart-kod {
    background: var(--turkuaz-zemin); border-radius: var(--yaricap-s);
    color: var(--vurgu-koyu); font-family: var(--kod);
    font-size: .8rem; font-weight: 700; padding: 3px 8px; white-space: nowrap;
}
.standart-ad { color: var(--murekkep); font-weight: 600; }
.standart-aciklama { color: var(--soluk); font-size: .93rem; line-height: 1.6; margin: 0 0 10px; }
.standart-olcut { color: var(--soluk); font-size: .9rem; line-height: 1.6; margin: 0 0 10px; padding-left: 20px; }
.standart-olcut li { margin-bottom: 4px; }
.standart-olcum { color: var(--soluk); font-size: .88rem; margin: 0; }
.standart-etiket {
    color: var(--vurgu-koyu); font-size: .76rem; font-weight: 700;
    letter-spacing: .04em; margin-right: 6px; text-transform: uppercase;
}
.standart-not { color: var(--soluk); font-size: .88rem; margin-top: 18px; }

@media (max-width: 680px) {
    .standart { padding: 16px 18px; }
    .standart-bas { font-size: .95rem; }
}