/* =====================================================================
   Tasarım sistemi
   ---------------------------------------------------------------------
   Yön: "mimari sıcaklık + kamu güveni". TOKİ'nin resmî kırmızı-mavi
   dilinden bilinçli olarak ayrışıyor; sıcak kâğıt zemin, derin petrol
   mürekkep ve kiremit vurgu kullanıyor. Amaç, kamu verisi sunan bir
   sayfanın hem güven vermesi hem soğuk durmaması.

   Her şey önce mobil için yazıldı; geniş ekran kuralları sonradan
   ekleniyor. Renkler değişken, koyu tema da aynı değişkenleri yeniden
   tanımlayarak geliyor — iki ayrı tema dosyası tutulmuyor.
   ===================================================================== */

/* ------------------------------------------------------------ belirteç */
:root {
    /* Renk — açık tema */
    --murekkep:        #0B2E3B;   /* ana renk: derin petrol */
    --murekkep-koyu:   #072028;
    --murekkep-acik:   #14566C;
    --kiremit:         #B9552F;   /* vurgu: pişmiş toprak */
    --kiremit-acik:    #D97A4F;
    --yesil:           #1F6F55;   /* olumlu durum */
    --amber:           #A16207;   /* uyarı */
    --kirmizi:         #A62E2E;   /* hata */

    --zemin:           #F6F3EF;   /* sıcak kâğıt */
    --zemin-alt:       #EFEAE3;
    --kart:            #FFFFFF;
    --kart-ust:        #FBF9F6;
    --cizgi:           #E2DBD1;
    --cizgi-koyu:      #CFC5B8;

    --metin:           #14222A;
    --metin-orta:      #46585F;
    --metin-soluk:     #6E7F86;

    --golge-s:  0 1px 2px rgba(11,46,59,.06), 0 1px 1px rgba(11,46,59,.04);
    --golge-m:  0 2px 6px rgba(11,46,59,.07), 0 8px 24px -12px rgba(11,46,59,.18);
    --golge-l:  0 4px 12px rgba(11,46,59,.08), 0 24px 48px -20px rgba(11,46,59,.26);

    --yuvarlak-s: 8px;
    --yuvarlak:   14px;
    --yuvarlak-l: 20px;
    --yuvarlak-x: 28px;

    /* Akışkan ölçek: küçük ekranda sıkışmasın, büyükte şişmesin */
    --ol-1: clamp(.78rem, .76rem + .1vw, .84rem);
    --ol-2: clamp(.86rem, .83rem + .15vw, .94rem);
    --ol-3: clamp(.96rem, .92rem + .2vw, 1.06rem);
    --ol-4: clamp(1.12rem, 1.05rem + .35vw, 1.3rem);
    --ol-5: clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
    --ol-6: clamp(1.7rem, 1.4rem + 1.4vw, 2.6rem);

    --bos-1: .4rem;
    --bos-2: .75rem;
    --bos-3: 1.15rem;
    --bos-4: 1.75rem;
    --bos-5: 2.5rem;
    --bos-6: 4rem;

    --en: 1080px;          /* okunabilir azami genişlik */
    --gecis: .22s cubic-bezier(.4, 0, .2, 1);
}

/* Koyu tema — aynı değişkenler yeniden tanımlanıyor */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
        --murekkep:      #7FC8DE;
        --murekkep-koyu: #A8DDEE;
        --murekkep-acik: #5FA9BF;
        --kiremit:       #E08A5F;
        --kiremit-acik:  #EFA37C;
        --yesil:         #4FBF93;
        --amber:         #D9A441;
        --kirmizi:       #E07070;

        --zemin:     #0D1418;
        --zemin-alt: #121C21;
        --kart:      #16222899;
        --kart-ust:  #1B282F;
        --cizgi:     #26353C;
        --cizgi-koyu:#33454D;

        --metin:      #E6EDF0;
        --metin-orta: #A8BAC2;
        --metin-soluk:#7D9099;

        --golge-s: 0 1px 2px rgba(0,0,0,.4);
        --golge-m: 0 2px 8px rgba(0,0,0,.45);
        --golge-l: 0 8px 32px rgba(0,0,0,.55);
    }
}
:root[data-tema="koyu"] {
    --murekkep:#7FC8DE; --murekkep-koyu:#A8DDEE; --murekkep-acik:#5FA9BF;
    --kiremit:#E08A5F; --kiremit-acik:#EFA37C; --yesil:#4FBF93;
    --amber:#D9A441; --kirmizi:#E07070;
    --zemin:#0D1418; --zemin-alt:#121C21; --kart:#162228; --kart-ust:#1B282F;
    --cizgi:#26353C; --cizgi-koyu:#33454D;
    --metin:#E6EDF0; --metin-orta:#A8BAC2; --metin-soluk:#7D9099;
    --golge-s:0 1px 2px rgba(0,0,0,.4);
    --golge-m:0 2px 8px rgba(0,0,0,.45);
    --golge-l:0 8px 32px rgba(0,0,0,.55);
}

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

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

body {
    margin: 0;
    background: var(--zemin);
    color: var(--metin);
    font-family: "Plus Jakarta Sans", system-ui, -apple-system,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--ol-3);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Mimari bir not: çok hafif bir ızgara dokusu. Fark edilmez ama
       yüzeyin "kâğıt" hissini güçlendirir.

       Daha önce burada `background-attachment: fixed` ve üstünde
       `position: fixed` bir örtü vardı. İkisi de mobilde pahalıydı:
       sabit arka plan, her kaydırma karesinde arka planın yeniden
       boyanmasına yol açıyor (orta sınıf Android'de kaydırma takılıyor),
       sabit örtü de kendi katmanını her karede bileştiriyordu.

       Örtünün tek işi ızgarayı soldurmaktı; artık çizgi doğrudan soluk
       çiziliyor. Doku da sayfayla birlikte kayıyor — kâğıt zaten öyle
       davranmalı. İki katman gitti, görünüm aynı kaldı. */
    background-image:
        linear-gradient(color-mix(in srgb, var(--cizgi) 20%, transparent) 1px,
                        transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--cizgi) 20%, transparent) 1px,
                        transparent 1px);
    background-size: 56px 56px, 56px 56px;
    background-position: -1px -1px;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--bos-2);
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--metin);
    text-wrap: balance;
}
h1 { font-size: var(--ol-6); }
h2 { font-size: var(--ol-5); }
h3 { font-size: var(--ol-4); }
h4 { font-size: var(--ol-3); font-weight: 700; }
p  { margin: 0 0 var(--bos-3); }
p:last-child { margin-bottom: 0; }

a {
    color: var(--murekkep-acik);
    text-decoration-color: color-mix(in srgb, var(--murekkep-acik) 35%, transparent);
    text-underline-offset: .2em;
    transition: color var(--gecis);
}
a:hover { color: var(--kiremit); }

:focus-visible {
    outline: 3px solid var(--kiremit);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: color-mix(in srgb, var(--kiremit) 25%, transparent); }

/* ----------------------------------------------------------- yerleşim */
.kap {
    width: 100%;
    max-width: var(--en);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);   /* mobilde 16px kenar boşluğu */
}
.dar { max-width: 760px; }

.yigin > * + * { margin-top: var(--bos-3); }
.yigin-genis > * + * { margin-top: var(--bos-5); }

/* ------------------------------------------------------------ başlık */
/* Sticky başlık.
   `backdrop-filter` her kaydırma karesinde altındaki pikselleri yeniden
   bulanıklaştırıyor; telefonda kaydırmanın en pahalı tek işi buydu.
   Mobilde arka plan neredeyse donuk, bulanıklık yok — fark edilmiyor
   çünkü başlığın altında zaten çok az şey kayıyor. Bulanıklık yalnız
   geniş ekranda, destekleyen tarayıcıda açılıyor. */
.ust {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--zemin) 96%, transparent);
    border-bottom: 1px solid var(--cizgi);
}
@media (min-width: 720px) {
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .ust {
            background: color-mix(in srgb, var(--zemin) 84%, transparent);
            -webkit-backdrop-filter: saturate(1.5) blur(10px);
            backdrop-filter: saturate(1.5) blur(10px);
        }
    }
}
.ust-ic {
    display: flex;
    align-items: center;
    gap: var(--bos-3);
    min-height: 62px;
}
.marka {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--metin);
    text-decoration: none;
    font-size: var(--ol-4);
}
.marka:hover { color: var(--metin); }
.marka .im {
    flex-shrink: 0;
    border-radius: 10px;
    box-shadow: var(--golge-s);
}
.ust-bos { flex: 1; }

/* Üstteki kalıcı destek düğmesi: her sayfada görünür ama sayfanın önüne
   geçmez. Asıl ikna metni destek kartında; bu yalnız erişim noktası. */
.ust-destek {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .85rem;
    min-height: 38px;
    border: 1px solid color-mix(in srgb, var(--kiremit) 45%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--kiremit) 10%, transparent);
    color: var(--kiremit);
    font-size: var(--ol-1);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--gecis), color var(--gecis),
                border-color var(--gecis);
}
.ust-destek:hover {
    background: var(--kiremit);
    border-color: var(--kiremit);
    color: var(--zemin);
}
@media (max-width: 420px) {
    /* Dar ekranda metin gidiyor, kalp kalıyor: marka adına yer açılsın. */
    .ust-destek span { display: none; }
    .ust-destek { padding: .45rem .6rem; }
}

.tema-dugme {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--cizgi);
    border-radius: 10px;
    background: var(--kart);
    color: var(--metin-orta);
    cursor: pointer;
    transition: border-color var(--gecis), color var(--gecis);
}
.tema-dugme:hover { border-color: var(--murekkep-acik); color: var(--murekkep-acik); }

/* -------------------------------------------------------------- kart */
.kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-l);
    padding: var(--bos-4);
    box-shadow: var(--golge-s);
}
.kart-sik { box-shadow: var(--golge-m); }

/* Tıklanabilir kart: bütün yüzey bağlantı. */
a.kart {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--gecis), box-shadow var(--gecis),
                transform var(--gecis);
}
a.kart:hover {
    border-color: var(--murekkep);
    box-shadow: var(--golge-m);
    transform: translateY(-2px);
    color: inherit;
}

/* Büyük yol kartı: ikon + metin + ok. besyuz.php ve benzeri geçiş
   sayfalarında kullanılıyor; giriş ekranındaki seçim kartlarıyla aynı
   dili konuşuyor ama bağlantı olarak davranıyor. */
.yollar { display: grid; gap: var(--bos-3); }
.yol {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--bos-3);
    align-items: start;
    padding: var(--bos-4);
    border: 2px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-l);
    background: var(--kart);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--gecis), box-shadow var(--gecis),
                transform var(--gecis);
}
.yol:hover {
    border-color: var(--murekkep);
    box-shadow: var(--golge-m);
    transform: translateY(-2px);
    color: inherit;
}
.yol-im {
    display: grid; place-items: center;
    width: 54px; height: 54px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--murekkep) 10%, transparent);
    color: var(--murekkep);
}
.yol-im svg { width: 26px; height: 26px; }
.yol h2 { font-size: var(--ol-4); margin-bottom: .2rem; }
.yol p  { font-size: var(--ol-2); color: var(--metin-soluk); margin: 0; }
.yol-ok { align-self: center; color: var(--metin-soluk); }
.yol:hover .yol-ok { color: var(--kiremit); }
.yol-liste {
    grid-column: 1 / -1;
    margin: var(--bos-2) 0 0;
    padding-left: 1.1rem;
    font-size: var(--ol-2);
    color: var(--metin-orta);
}
.yol-liste li { margin-bottom: .25rem; }
@media (min-width: 860px) { .yollar { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- buton */
.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 50px;                 /* dokunma hedefi */
    padding: .85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font: inherit;
    font-size: var(--ol-3);
    font-weight: 700;
    letter-spacing: -.01em;
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--gecis), box-shadow var(--gecis),
                background var(--gecis), color var(--gecis),
                border-color var(--gecis);
}
.dugme-ana {
    background: var(--murekkep);
    color: var(--zemin);
    box-shadow: var(--golge-m);
}
.dugme-ana:hover:not(:disabled) {
    background: var(--murekkep-koyu);
    color: var(--zemin);
    transform: translateY(-1px);
    box-shadow: var(--golge-l);
}
.dugme-ana:active:not(:disabled) { transform: translateY(0); }
.dugme-ikincil {
    background: var(--kart);
    color: var(--metin);
    border-color: var(--cizgi-koyu);
}
.dugme-ikincil:hover { border-color: var(--murekkep-acik); color: var(--murekkep-acik); }
.dugme:disabled {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
.dugme-tam { width: 100%; }

/* ------------------------------------------------------- bilgi kutusu */
.kutu {
    border: 1px solid var(--cizgi);
    border-left: 4px solid var(--murekkep-acik);
    border-radius: var(--yuvarlak);
    background: var(--kart-ust);
    padding: var(--bos-3);
    font-size: var(--ol-2);
    color: var(--metin-orta);
}
.kutu-uyari { border-left-color: var(--amber); }
.kutu-onemli { border-left-color: var(--kiremit); }
.kutu strong { color: var(--metin); }

/* --------------------------------------------------------- onay kutusu */
.onay {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: var(--bos-3);
    border: 2px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak);
    background: var(--kart);
    cursor: pointer;
    transition: border-color var(--gecis), background var(--gecis);
    user-select: none;
}
.onay:hover { border-color: var(--murekkep-acik); }
.onay:has(input:checked) {
    border-color: var(--murekkep);
    background: color-mix(in srgb, var(--murekkep) 7%, var(--kart));
}
.onay input {
    appearance: none;
    flex-shrink: 0;
    width: 26px; height: 26px;
    margin: 0;
    border: 2px solid var(--cizgi-koyu);
    border-radius: 7px;
    background: var(--kart);
    cursor: pointer;
    position: relative;
    transition: background var(--gecis), border-color var(--gecis);
}
.onay input:checked {
    background: var(--murekkep);
    border-color: var(--murekkep);
}
.onay input:checked::after {
    content: "";
    position: absolute;
    left: 7px; top: 2px;
    width: 7px; height: 13px;
    border: solid var(--zemin);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}
.onay span { font-size: var(--ol-2); line-height: 1.55; }

/* --------------------------------------------------------- seçim kartı */
.secimler {
    display: grid;
    gap: var(--bos-3);
}
.secim { position: relative; }
.secim input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}
.secim-govde {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--bos-3);
    padding: var(--bos-3) var(--bos-3);
    border: 2px solid var(--cizgi-koyu);
    border-radius: var(--yuvarlak-l);
    background: var(--kart);
    transition: border-color var(--gecis), box-shadow var(--gecis),
                transform var(--gecis), background var(--gecis);
    pointer-events: none;            /* tıklama input'a gitsin */
}
.secim input:hover + .secim-govde { border-color: var(--murekkep-acik); }
.secim input:focus-visible + .secim-govde {
    outline: 3px solid var(--kiremit);
    outline-offset: 3px;
}
.secim input:checked + .secim-govde {
    border-color: var(--murekkep);
    background: color-mix(in srgb, var(--murekkep) 6%, var(--kart));
    box-shadow: var(--golge-m);
}
.secim-im {
    display: grid; place-items: center;
    width: 54px; height: 54px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--murekkep) 10%, transparent);
    color: var(--murekkep);
    flex-shrink: 0;
}
.secim input:checked + .secim-govde .secim-im {
    background: var(--murekkep);
    color: var(--zemin);
}
.secim-im svg { width: 26px; height: 26px; }
.secim-metin h3 { margin: 0 0 .15rem; font-size: var(--ol-4); }
.secim-metin p  { margin: 0; font-size: var(--ol-2); color: var(--metin-soluk); line-height: 1.5; }
.secim-tik {
    width: 24px; height: 24px;
    border: 2px solid var(--cizgi-koyu);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: border-color var(--gecis), background var(--gecis);
}
.secim input:checked + .secim-govde .secim-tik {
    border-color: var(--murekkep);
    background: var(--murekkep);
}
.secim input:checked + .secim-govde .secim-tik::after {
    content: "";
    position: absolute;
    left: 6px; top: 2px;
    width: 6px; height: 11px;
    border: solid var(--zemin);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ------------------------------------------------------------ destek */
/* Bağış isteği sayfanın dibinde kimseye ulaşmıyordu. Artık içeriğin
   üstünde ve kendi kartında — ama kapatılabilir, çünkü her ziyarette
   aynı şeyi okumak zorunda kalmak kullanıcıyı siteden soğutur. */
.destek {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--bos-2) var(--bos-3);
    align-items: start;
    padding: var(--bos-3);
    border: 1px solid color-mix(in srgb, var(--kiremit) 32%, var(--cizgi));
    border-radius: var(--yuvarlak-l);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--kiremit) 9%, var(--kart)) 0%,
            var(--kart) 62%);
    position: relative;
}
.destek-im {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--kiremit) 16%, transparent);
    color: var(--kiremit);
    flex-shrink: 0;
}
.destek-im svg { width: 22px; height: 22px; }
.destek-metin h3 {
    font-size: var(--ol-3);
    margin: 0 0 .2rem;
    padding-right: 2rem;          /* kapatma düğmesine yer */
}
.destek-metin p {
    margin: 0;
    font-size: var(--ol-2);
    color: var(--metin-orta);
    line-height: 1.55;
}
.destek-eylem {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;      /* dar ekranda not butonun altına */
    align-items: flex-start;
    gap: .45rem;
}
.destek-dugme {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 46px;
    padding: .7rem 1.3rem;
    border-radius: 11px;
    background: var(--kiremit);
    color: var(--zemin);
    font-weight: 700;
    font-size: var(--ol-2);
    text-decoration: none;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--kiremit) 32%, transparent);
    transition: transform var(--gecis), box-shadow var(--gecis),
                background var(--gecis);
}
.destek-dugme:hover {
    background: var(--kiremit-acik);
    color: var(--zemin);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--kiremit) 40%, transparent);
}
.destek-not { font-size: var(--ol-1); color: var(--metin-soluk); }
.destek-kapat {
    position: absolute;
    top: .6rem; right: .6rem;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--metin-soluk);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    transition: background var(--gecis), color var(--gecis);
}
.destek-kapat:hover { background: var(--zemin-alt); color: var(--metin); }

@media (min-width: 620px) {
    /* Üç sütuna bölmek metni sıkıştırıyordu (kap zaten 760 px). İkon ve
       metin yan yana kalıyor, eylem satırı metnin altına hizalanıyor. */
    .destek-eylem {
        grid-column: 2 / -1;
        flex-direction: row;
        align-items: center;
        gap: var(--bos-3);
        margin-top: .25rem;
    }
}

/* ------------------------------------------------------------- rozet */
.rozet {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: var(--ol-1);
    font-weight: 700;
    letter-spacing: .01em;
    background: color-mix(in srgb, var(--murekkep) 12%, transparent);
    color: var(--murekkep);
    border: 1px solid color-mix(in srgb, var(--murekkep) 22%, transparent);
}
.rozet-kiremit {
    background: color-mix(in srgb, var(--kiremit) 12%, transparent);
    color: var(--kiremit);
    border-color: color-mix(in srgb, var(--kiremit) 25%, transparent);
}

/* ------------------------------------------------------- açılır bölüm */
.acilir {
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    background: var(--kart);
    overflow: hidden;
}
.acilir + .acilir { margin-top: var(--bos-2); }
.acilir > summary {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: var(--bos-3);
    cursor: pointer;
    font-weight: 700;
    font-size: var(--ol-2);
    list-style: none;
    transition: background var(--gecis);
}
.acilir > summary::-webkit-details-marker { display: none; }
.acilir > summary:hover { background: var(--kart-ust); }
.acilir > summary::before {
    content: "";
    width: 9px; height: 9px;
    border-right: 2px solid var(--metin-soluk);
    border-bottom: 2px solid var(--metin-soluk);
    transform: rotate(-45deg);
    transition: transform var(--gecis);
    flex-shrink: 0;
    margin-left: 2px;
}
.acilir[open] > summary::before { transform: rotate(45deg); }
.acilir-ic {
    padding: 0 var(--bos-3) var(--bos-3);
    font-size: var(--ol-2);
    color: var(--metin-orta);
    border-top: 1px solid var(--cizgi);
    padding-top: var(--bos-3);
}
.acilir-ic h4 { margin-top: var(--bos-3); color: var(--metin); }
.acilir-ic h4:first-child { margin-top: 0; }
.acilir-ic ul { margin: 0 0 var(--bos-3); padding-left: 1.2rem; }
.acilir-ic li { margin-bottom: .35rem; }

/* -------------------------------------------------------------- alt */
.alt {
    margin-top: var(--bos-6);
    padding: var(--bos-4) 0 var(--bos-5);
    border-top: 1px solid var(--cizgi);
    font-size: var(--ol-1);
    color: var(--metin-soluk);
}
.alt-menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--bos-3);
    margin-bottom: var(--bos-4);
}
@media (min-width: 560px) { .alt-menu { grid-template-columns: repeat(3, 1fr); } }
.alt-menu h2 {
    font-size: var(--ol-1);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--metin-soluk);
    margin: 0 0 .5rem;
}
.alt-menu div { display: flex; flex-direction: column; gap: .3rem; }
.alt-menu a { font-size: var(--ol-2); }
.alt a { color: var(--metin-orta); }
.alt a:hover { color: var(--kiremit); }

/* İçeriğe geç: yalnız klavyeyle odaklanınca görünüyor. */
.atla {
    position: absolute;
    left: 50%;
    top: -100px;
    transform: translateX(-50%);
    z-index: 100;
    padding: .7rem 1.2rem;
    border-radius: 0 0 12px 12px;
    background: var(--murekkep);
    color: var(--zemin);
    font-weight: 700;
    text-decoration: none;
    transition: top .18s ease;
}
.atla:focus { top: 0; color: var(--zemin); }

/* --------------------------------------------------------- form alanları */
.alanlar { display: grid; gap: var(--bos-3); }
.alan { display: flex; flex-direction: column; gap: .35rem; }
.alan > label {
    font-size: var(--ol-2);
    font-weight: 700;
    color: var(--metin);
}
.alan-ipucu { font-size: var(--ol-1); color: var(--metin-soluk); line-height: 1.45; }
.alan-hata  { font-size: var(--ol-1); color: var(--kirmizi); font-weight: 700; }

.girdi {
    width: 100%;
    min-height: 54px;                     /* rahat dokunma hedefi */
    padding: .8rem 1rem;
    border: 2px solid var(--cizgi-koyu);
    border-radius: 12px;
    background: var(--kart);
    color: var(--metin);
    font: inherit;
    font-size: var(--ol-3);
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.girdi::placeholder { color: var(--metin-soluk); opacity: .7; }
.girdi:hover { border-color: var(--murekkep-acik); }
.girdi:focus {
    outline: none;
    border-color: var(--murekkep);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--murekkep) 15%, transparent);
}
.alan-bozuk .girdi { border-color: var(--kirmizi); }

/* Tek harflik alanlar: büyük, ortalanmış, klavye açıldığında kaybolmayan. */
.girdi-harf {
    text-align: center;
    font-size: var(--ol-5);
    font-weight: 800;
    letter-spacing: .02em;
    padding: .5rem;
    text-transform: uppercase;
}
.girdi-rakam {
    text-align: center;
    font-size: var(--ol-5);
    font-weight: 800;
    letter-spacing: .3em;
    text-indent: .3em;                    /* harf aralığı sağa kaydırmasın */
    font-variant-numeric: tabular-nums;
    padding: .5rem;
}
select.girdi {
    appearance: none;
    padding-right: 2.75rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* Ad / soyad / TC yan yana: üç alan tek satırda, üçü de tek elle doldurulur. */
.kimlik-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bos-2);
}
.kimlik-izgara .alan-tc { grid-column: 1 / -1; }
@media (min-width: 560px) {
    .kimlik-izgara { grid-template-columns: 1fr 1fr 1.6fr; }
    .kimlik-izgara .alan-tc { grid-column: auto; }
}

/* --------------------------------------------------------------- karar */
/* Sonuç sayfasının tamamı tek bir soruya cevap veriyor: çıktı mı, çıkmadı mı?
   Bu yüzden cevap ilk ekranda, büyük ve tartışmasız. Ayrıntı altta. */
.karar {
    position: relative;
    overflow: hidden;
    padding: var(--bos-4) var(--bos-4) var(--bos-4);
    border-radius: var(--yuvarlak-x);
    border: 1px solid var(--cizgi);
    background: var(--kart);
    box-shadow: var(--golge-m);
}
.karar-var {
    border-color: color-mix(in srgb, var(--yesil) 40%, var(--cizgi));
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--yesil) 11%, var(--kart)) 0%,
        var(--kart) 65%);
}
.karar-yok {
    border-color: var(--cizgi-koyu);
    background: var(--kart-ust);
}
.karar-im {
    display: grid; place-items: center;
    width: 62px; height: 62px;
    margin-bottom: var(--bos-3);
    border-radius: 19px;
    background: color-mix(in srgb, var(--yesil) 16%, transparent);
    color: var(--yesil);
}
.karar-yok .karar-im {
    background: color-mix(in srgb, var(--metin-soluk) 14%, transparent);
    color: var(--metin-soluk);
}
.karar-im svg { width: 32px; height: 32px; }
.karar h1 {
    font-size: var(--ol-6);
    margin: 0 0 var(--bos-2);
}
.karar-var h1 { color: var(--yesil); }
.karar-alt {
    font-size: var(--ol-4);
    color: var(--metin-orta);
    margin: 0;
    line-height: 1.45;
}

/* Dairenin kimliği: tek bakışta okunan dört sayı. */
.daire-satir {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bos-2);
    margin-top: var(--bos-4);
}
@media (min-width: 620px) { .daire-satir { grid-template-columns: repeat(4, 1fr); } }
.daire-kutu {
    /* Değerler kutunun altına yaslanıyor. Aksi hâlde "Genç" gibi daha
       küçük punto ile yazılan bir değer, yanındaki büyük sayılardan
       yukarıda duruyor ve dörtlü hizası bozuluyor. */
    display: flex;
    flex-direction: column;
    padding: var(--bos-2) var(--bos-3);
    border-radius: var(--yuvarlak);
    background: color-mix(in srgb, var(--murekkep) 7%, var(--kart));
    border: 1px solid var(--cizgi);
}
.daire-kutu dt {
    font-size: var(--ol-1);
    font-weight: 700;
    color: var(--metin-soluk);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: 0 0 .15rem;
}
.daire-kutu dd {
    margin: auto 0 0;
    font-size: var(--ol-5);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--metin);
    overflow-wrap: anywhere;
}
.daire-kutu dd small { font-size: var(--ol-2); font-weight: 700; color: var(--metin-soluk); }

/* ------------------------------------------------------- ayrıntı listesi */
.ozellikler {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0;
}
@media (min-width: 620px) { .ozellikler { grid-template-columns: 1fr 1fr; column-gap: var(--bos-4); } }
.ozellik {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--bos-2);
    padding: .6rem 0;
    border-bottom: 1px solid var(--cizgi);
    font-size: var(--ol-2);
}
.ozellik dt { color: var(--metin-soluk); margin: 0; }
.ozellik dd {
    margin: 0;
    font-weight: 700;
    color: var(--metin);
    text-align: right;
    overflow-wrap: anywhere;
}
.ozellik-vurgu dd { color: var(--kiremit); font-size: var(--ol-3); }

/* ------------------------------------------------------- 3B görünüm yeri */
/* İçini daire3d.js dolduruyor. Betik yüklenene kadar boş bir delik
   görünmesin diye kendi yüzeyi var; yüklendiğinde sahne aynı kutuya
   oturuyor, böylece sayfa zıplamıyor. */
.daire3d {
    min-height: 240px;
    border: 1px dashed var(--cizgi-koyu);
    border-radius: var(--yuvarlak-l);
    background: var(--kart-ust);
    overflow: hidden;
}
.daire3d:empty::after {
    content: "Üç boyutlu görünüm yükleniyor…";
    display: grid;
    place-items: center;
    height: 240px;
    color: var(--metin-soluk);
    font-size: var(--ol-2);
}

/* -------------------------------------------------------- proje galeri */
.galeri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: var(--bos-2);
}
.gorsel {
    display: block;
    position: relative;
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    overflow: hidden;
    background: var(--kart-ust);
    cursor: zoom-in;
    padding: 0;
    transition: border-color var(--gecis), transform var(--gecis),
                box-shadow var(--gecis);
}
.gorsel:hover { border-color: var(--murekkep); transform: translateY(-2px);
                box-shadow: var(--golge-m); }
.gorsel img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #fff;
}
/* Mimari pafta ve sunum sayfaları: beyaz kâğıt üzerine ince çizim.
   "cover" ile kırpılınca ekranda bomboş bir beyaz dikdörtgen kalıyordu —
   çizim tam da kırpılan kenarlarda. Paftalar bu yüzden tamamı görünecek
   şekilde sığdırılıyor ve kâğıt kendi gölgesiyle duruyor. */
.gorsel-plan img {
    object-fit: contain;
    padding: 6px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
:root[data-tema="koyu"] .gorsel-plan img { filter: none; }
.gorsel figcaption {
    padding: .5rem .7rem;
    font-size: var(--ol-1);
    color: var(--metin-orta);
    text-align: left;
    line-height: 1.35;
}
:root[data-tema="koyu"] .gorsel img { filter: brightness(.92); }
:root[data-tema="koyu"] .gorsel:hover img { filter: none; }

/* Büyütme penceresi. <dialog> kullanılıyor: odak tuzağı, Esc ile kapanma
   ve arka planın erişilemez olması tarayıcıdan geliyor. */
dialog.buyut {
    width: min(96vw, 1400px);
    max-width: none;
    max-height: 94vh;
    padding: 0;
    border: 0;
    border-radius: var(--yuvarlak-l);
    background: var(--kart-ust);
    color: var(--metin);
    overflow: hidden;
}
dialog.buyut::backdrop { background: rgba(7, 20, 26, .82); }
dialog.buyut img {
    display: block;
    width: 100%;
    max-height: calc(94vh - 56px);
    object-fit: contain;
    background: #fff;
}
.buyut-alt {
    display: flex;
    align-items: center;
    gap: var(--bos-2);
    padding: .7rem 1rem;
    font-size: var(--ol-2);
    border-top: 1px solid var(--cizgi);
}
.buyut-alt b { font-weight: 700; }
.buyut-kapat {
    margin-left: auto;
    min-height: 36px;
    padding: .35rem .9rem;
    border: 1px solid var(--cizgi-koyu);
    border-radius: 9px;
    background: var(--kart);
    color: var(--metin);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

/* Daire tipleri — projenin en çok bakılan tablosu. */
.tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ol-2);
    min-width: 420px;
}
table.tablo th, table.tablo td {
    padding: .6rem .7rem;
    text-align: right;
    border-bottom: 1px solid var(--cizgi);
    white-space: nowrap;
}
table.tablo th:first-child, table.tablo td:first-child { text-align: left; }
table.tablo thead th {
    font-size: var(--ol-1);
    font-weight: 700;
    color: var(--metin-soluk);
    text-transform: uppercase;
    letter-spacing: .05em;
}
table.tablo tbody td { font-variant-numeric: tabular-nums; }
table.tablo tbody td:first-child { font-weight: 700; }
table.tablo tbody tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------- ihale */
.ozet-satir {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--bos-2);
}
@media (min-width: 620px) { .ozet-satir { grid-template-columns: repeat(4, 1fr); } }
.ozet-kutu {
    padding: var(--bos-3);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    background: var(--kart);
}
.ozet-kutu b {
    display: block;
    font-size: var(--ol-5);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.ozet-kutu span { font-size: var(--ol-1); color: var(--metin-soluk); }

.ara-kutu { position: relative; }
.ara-kutu svg {
    position: absolute;
    left: 1rem; top: 50%;
    transform: translateY(-50%);
    width: 18px; height: 18px;
    color: var(--metin-soluk);
    pointer-events: none;
}
.ara-kutu .girdi { padding-left: 2.9rem; }

.ay-baslik {
    margin: var(--bos-5) 0 var(--bos-2);
    font-size: var(--ol-2);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--metin-soluk);
}
.ay-baslik:first-of-type { margin-top: var(--bos-3); }

.ihale-liste { display: grid; gap: var(--bos-2); }

/* Tarih solda ayrı bir blok: listede göz önce tarihi arıyor, başlıkları
   değil. Başlıklar zaten uzun ve birbirine benziyor. */
.ihale {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--bos-2) var(--bos-3);
    align-items: start;
    padding: var(--bos-3);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak);
    background: var(--kart);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--gecis), box-shadow var(--gecis),
                transform var(--gecis);
}
a.ihale:hover {
    border-color: var(--murekkep);
    box-shadow: var(--golge-m);
    transform: translateY(-1px);
    color: inherit;
}
.ihale-tarih {
    display: grid;
    place-items: center;
    align-content: center;
    width: 62px;
    padding: .45rem .3rem;
    border-radius: 11px;
    background: color-mix(in srgb, var(--murekkep) 9%, transparent);
    color: var(--murekkep);
    line-height: 1.1;
    text-align: center;
}
.ihale-tarih b { font-size: var(--ol-4); font-weight: 800; }
.ihale-tarih span { font-size: var(--ol-1); font-weight: 700; }
.ihale-tarih small { font-size: .68rem; opacity: .75; margin-top: .15rem; }
.ihale-tarih-yok { background: var(--zemin-alt); color: var(--metin-soluk); }
.ihale-govde h3 {
    font-size: var(--ol-3);
    margin: 0 0 .3rem;
    line-height: 1.3;
}
.ihale-govde p {
    margin: 0;
    font-size: var(--ol-1);
    color: var(--metin-soluk);
    line-height: 1.5;
    /* Uzun resmî başlıklar listeyi boğuyor; iki satır yetiyor. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cipler {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}
.cip {
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: var(--ol-1);
    font-weight: 700;
    background: var(--zemin-alt);
    color: var(--metin-orta);
    border: 1px solid var(--cizgi);
    white-space: nowrap;
}
.cip-ana {
    background: color-mix(in srgb, var(--murekkep) 12%, transparent);
    color: var(--murekkep);
    border-color: color-mix(in srgb, var(--murekkep) 22%, transparent);
    font-weight: 700;
}
.cip-dosya {
    background: color-mix(in srgb, var(--kiremit) 12%, transparent);
    color: var(--kiremit);
    border-color: color-mix(in srgb, var(--kiremit) 25%, transparent);
    font-weight: 700;
}
@media (max-width: 480px) {
    .ihale { grid-template-columns: auto 1fr; }
    .ihale-tarih { width: 54px; }
}

/* Sıradaki ihale: listedeki en yakın tarihli olan öne çıkıyor. */
.sirada {
    border: 2px solid var(--kiremit);
    background: linear-gradient(140deg,
        color-mix(in srgb, var(--kiremit) 8%, var(--kart)) 0%, var(--kart) 60%);
}
.sirada .ihale-tarih {
    background: var(--kiremit);
    color: var(--zemin);
}

.bos-sonuc {
    padding: var(--bos-4);
    text-align: center;
    color: var(--metin-soluk);
    font-size: var(--ol-2);
}

/* ----------------------------------------------------------- canlı kura */
/* Yayın sürerken "bulunamadı" kalıcı bir cevap değil — henüz çekilmemiş
   olabilir. Sayfanın bunu görünür kılması gerekiyor, yoksa insanlar
   dakikada bir sayfayı yenileyip duruyor. */
.canli-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bos-2) var(--bos-3);
    padding: var(--bos-3);
    border: 1px solid var(--cizgi);
    border-radius: var(--yuvarlak-l);
    background: var(--kart);
    box-shadow: var(--golge-s);
}
.canli-rozet {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: var(--ol-1);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--kirmizi) 14%, transparent);
    color: var(--kirmizi);
    border: 1px solid color-mix(in srgb, var(--kirmizi) 28%, transparent);
}
.canli-rozet::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
}
@media (prefers-reduced-motion: no-preference) {
    .canli-rozet::before { animation: nabiz 1.6s ease-in-out infinite; }
}
@keyframes nabiz { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.canli-rozet-kapali {
    background: color-mix(in srgb, var(--metin-soluk) 12%, transparent);
    color: var(--metin-soluk);
    border-color: var(--cizgi-koyu);
}
.canli-sayac { margin-left: auto; text-align: right; line-height: 1.2; }
.canli-sayac b {
    display: block;
    font-size: var(--ol-5);
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.canli-sayac span { font-size: var(--ol-1); color: var(--metin-soluk); }

/* Yayındaki an: kişi kendi satırının ekrana gelişini gözüyle görüyor. */
.oynatici {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--yuvarlak);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--cizgi);
}
.oynatici iframe {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    border: 0;
}

.karar-yedek {
    border-color: color-mix(in srgb, var(--amber) 40%, var(--cizgi));
    background: linear-gradient(145deg,
        color-mix(in srgb, var(--amber) 11%, var(--kart)) 0%,
        var(--kart) 65%);
}
.karar-yedek h1 { color: var(--amber); }
.karar-yedek .karar-im {
    background: color-mix(in srgb, var(--amber) 16%, transparent);
    color: var(--amber);
}

/* Yayın sürerken otomatik tekrar deneme satırı. */
.bekleme {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: var(--ol-2);
    color: var(--metin-orta);
}
.bekleme::before {
    content: "";
    width: 15px; height: 15px;
    border: 2px solid var(--cizgi-koyu);
    border-top-color: var(--murekkep);
    border-radius: 50%;
    flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .bekleme::before { animation: donus .9s linear infinite; }
}
@keyframes donus { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- eylemler */
.eylemler {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bos-2);
}
.eylemler .dugme { flex: 1 1 220px; }

/* ---------------------------------------------------------------- baskı */
/* Çıktıyı saklamak isteyen çok oluyor. Ekranda işe yarayan her şey kâğıtta
   yer kaybı: üst bar, tema düğmesi, bağış kartı, düğmeler gitsin. */
@media print {
    .ust, .alt, .eylemler, .destek, .adimlar, .daire3d,
    .tema-dugme, .ust-destek { display: none !important; }
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
        background-image: none !important;
    }
    body::before { display: none !important; }
    .kart, .karar {
        box-shadow: none !important;
        border: 1px solid #999 !important;
        background: #fff !important;
        break-inside: avoid;
    }
    .acilir { border: 0 !important; }
    .acilir > summary { display: none !important; }
    .acilir-ic { display: block !important; padding: 0 !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}

/* --------------------------------------------------------- yardımcılar */
.orta   { text-align: center; }
.soluk  { color: var(--metin-soluk); }
.kucuk  { font-size: var(--ol-2); }
.gizli  { display: none !important; }
.sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Yumuşak açılış.
   Dinlenme hâli GÖRÜNÜR olmak zorunda: animasyon gecikse, engellense ya da
   hiç çalışmasa bile içerik okunabilmeli. Bu yüzden hareket yalnız bir
   iyileştirme olarak, "hareket sorun değil" diyen tarayıcılarda ekleniyor. */
@keyframes bel { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.beliren { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
    .beliren { animation: bel .4s cubic-bezier(.2,.7,.3,1) both; }
    .gecikme-1 { animation-delay: .06s; }
    .gecikme-2 { animation-delay: .12s; }
    .gecikme-3 { animation-delay: .18s; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------------------------------- geniş ekran */
@media (min-width: 720px) {
    .secimler { grid-template-columns: 1fr 1fr; }
    .secim-govde { grid-template-columns: auto 1fr; grid-template-rows: auto auto; padding: var(--bos-4); }
    .secim-im { grid-row: 1; }
    .secim-metin { grid-column: 1 / -1; }
    .secim-tik { position: absolute; top: var(--bos-3); right: var(--bos-3); }
}
@media (min-width: 960px) {
    .kart { padding: var(--bos-5); }
}