/* ================= Tema =================
   Açık tema varsayılan; koyu tema data-tema="koyu" ile ya da cihaz koyu moddaysa
   (kullanıcı açık seçmediyse) devreye girer. */
:root {
    color-scheme: light;
    --zemin: #eef4fa;
    --zemin-gradyan: linear-gradient(180deg, #dcebf8 0px, #eef4fa 420px);
    --kart: #ffffff;
    --kart-golge: 0 1px 2px rgba(16, 42, 70, .05), 0 6px 20px -8px rgba(16, 42, 70, .12);
    --yazi: #0f2236;
    --soluk: #5a6e82;
    --cizgi: #d9e5f0;
    --vurgu: #0a6fc2;
    --kar-zemin: #e1f0fb;
    --kar-yazi: #0a5a94;
    --cam: rgba(232, 241, 250, .8);
    --kart-duz: #ffffff;
    --ok-zemin: #e3f6e8; --ok-yazi: #1d6b34;
    --hata-zemin: #fde8e8; --hata-yazi: #8a1f1f;
    /* üst bölüm: gündüz */
    --gok: linear-gradient(180deg, #2a6fb0 0%, #6fa8d8 55%, #b9d6ee 100%);
    --gok-isik: radial-gradient(60% 50% at 75% 15%, rgba(255,255,255,.28), transparent 70%);
    --dag-uzak: #8fb3d4; --dag-uzak-op: .75;
    --dag-yakin: #5f86ab;
    --zirve: #f4f8fc; --zirve-op: .9;
    --cam-agac: #1f4a3a;
    --pist-ust: #5b7a97; --pist-orta: #a9bfd4;
}
:root[data-tema="koyu"] {
    color-scheme: dark;
    --zemin: #07111f;
    --zemin-gradyan: radial-gradient(120% 60% at 50% -10%, #12305a 0%, #0a1a30 45%, #07111f 100%);
    --kart: rgba(255, 255, 255, .045);
    --kart-golge: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -12px rgba(0, 0, 0, .6);
    --yazi: #e8f1fa;
    --soluk: #8fa6bd;
    --cizgi: rgba(160, 200, 240, .13);
    --vurgu: #7cc4ff;
    --kar-zemin: rgba(124, 196, 255, .12);
    --kar-yazi: #a9dbff;
    --cam: rgba(9, 22, 40, .72);
    --kart-duz: #0f1b2c;
    --ok-zemin: #173a24; --ok-yazi: #a6e3b8;
    --hata-zemin: #4a1d1d; --hata-yazi: #ffc9c9;
    /* üst bölüm: gece */
    --gok: linear-gradient(180deg, #050c1c 0%, #10264a 55%, #2d4b78 100%);
    --gok-isik: radial-gradient(40% 35% at 80% 18%, rgba(190,210,255,.18), transparent 70%);
    --dag-uzak: #2b4466; --dag-uzak-op: .9;
    --dag-yakin: #1e3352;
    --zirve: #c9d6e8; --zirve-op: .7;
    --cam-agac: #10261f;
    --pist-ust: #1f3049; --pist-orta: #0e1d33;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) {
        color-scheme: dark;
        --zemin: #07111f;
        --zemin-gradyan: radial-gradient(120% 60% at 50% -10%, #12305a 0%, #0a1a30 45%, #07111f 100%);
        --kart: rgba(255, 255, 255, .045);
        --kart-golge: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 30px -12px rgba(0, 0, 0, .6);
        --yazi: #e8f1fa;
        --soluk: #8fa6bd;
        --cizgi: rgba(160, 200, 240, .13);
        --vurgu: #7cc4ff;
        --kar-zemin: rgba(124, 196, 255, .12);
        --kar-yazi: #a9dbff;
        --cam: rgba(9, 22, 40, .72);
    --kart-duz: #0f1b2c;
        --ok-zemin: #173a24; --ok-yazi: #a6e3b8;
        --hata-zemin: #4a1d1d; --hata-yazi: #ffc9c9;
        --gok: linear-gradient(180deg, #050c1c 0%, #10264a 55%, #2d4b78 100%);
        --gok-isik: radial-gradient(40% 35% at 80% 18%, rgba(190,210,255,.18), transparent 70%);
        --dag-uzak: #2b4466; --dag-uzak-op: .9;
        --dag-yakin: #1e3352;
        --zirve: #c9d6e8; --zirve-op: .7;
        --cam-agac: #10261f;
        --pist-ust: #1f3049; --pist-orta: #0e1d33;
    }
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--zemin-gradyan) no-repeat, var(--zemin);
    min-height: 100vh;
    color: var(--yazi);
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--vurgu); }
main { max-width: 860px; margin: 0 auto; padding: 16px; }

.ust {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
    max-width: 860px; margin: 0 auto; padding: 18px 16px 4px;
}
.ust .logo { font-weight: 700; font-size: 20px; text-decoration: none; color: var(--yazi); }
.ust span { color: var(--soluk); font-size: 14px; }

footer { max-width: 860px; margin: 0 auto; padding: 24px 16px 40px; color: var(--soluk); font-size: 13px; }

h1 { margin: 0 0 4px; font-size: 26px; }
.ozet p { margin: 0 0 14px; color: var(--soluk); }
#ara {
    width: 100%; padding: 11px 14px; font-size: 16px;
    border: 1px solid var(--cizgi); border-radius: 10px;
    background: var(--kart); color: var(--yazi);
}

/* Liste */
.liste { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.kart {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 14px; background: var(--kart);
    border: 1px solid var(--cizgi); border-radius: 12px;
    text-decoration: none; color: inherit;
}
.kart:hover { border-color: var(--vurgu); }
.kar {
    flex: 0 0 74px; height: 64px; border-radius: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--kar-zemin); color: var(--kar-yazi);
}
.kar b { font-size: 24px; line-height: 1; }
.kar small { font-size: 11px; margin-top: 3px; }
.kar.yok { background: transparent; border: 1px dashed var(--cizgi); color: var(--soluk); }
.bilgi { flex: 1; min-width: 0; }
.bilgi h2 { margin: 0; font-size: 16px; }
.bilgi .il, .bilgi .hava { color: var(--soluk); font-size: 14px; }
.bilgi .il::after { content: " · "; }
.bugun { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 15px; }
.ikon { width: 36px; height: 36px; vertical-align: middle; }
.bos { color: var(--soluk); text-align: center; }

/* Detay */
.geri { display: inline-block; margin-bottom: 12px; text-decoration: none; }
.detay-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.detay-ust .il { margin: 0; color: var(--soluk); }
.buyuk-kar {
    min-width: 180px; padding: 14px 18px; border-radius: 14px;
    background: var(--kar-zemin); color: var(--kar-yazi);
    display: flex; flex-direction: column;
}
.buyuk-kar b { font-size: 44px; line-height: 1; }
.buyuk-kar small { margin-top: 6px; font-size: 12px; opacity: .85; }
.buyuk-kar.yok { background: var(--kart); border: 1px dashed var(--cizgi); color: var(--soluk); }

.bugun-kart {
    margin-top: 18px; padding: 16px 18px; background: var(--kart);
    border: 1px solid var(--cizgi); border-radius: 14px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.ikon-buyuk { width: 72px; height: 72px; }
.bugun-kart p { margin: 0; }
.etiket { color: var(--soluk); font-size: 13px; }
.hadise { font-size: 18px; font-weight: 600; }
.sicaklik { font-size: 22px; }
.sicaklik span { color: var(--soluk); }
.bugun-kart dl { margin: 0 0 0 auto; display: grid; gap: 6px; }
.bugun-kart dl div { display: flex; gap: 10px; }
.bugun-kart dt { color: var(--soluk); width: 56px; }
.bugun-kart dd { margin: 0; }

.ok { display: inline-block; color: var(--vurgu); font-weight: 700; }

.bolum { font-size: 18px; margin: 26px 0 10px; }
.tablo-kap { overflow-x: auto; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; }
.tahmin { width: 100%; border-collapse: collapse; font-size: 15px; }
.tahmin th, .tahmin td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tahmin tr:last-child td { border-bottom: 0; }
.tahmin th { font-size: 13px; color: var(--soluk); font-weight: 500; }
.tahmin .hava { display: flex; align-items: center; gap: 6px; }
.harita { margin-top: 16px; }

.hata { padding: 14px; border-radius: 10px; background: var(--hata-zemin); color: var(--hata-yazi); }

@media (max-width: 560px) {
    .bugun span { font-size: 14px; }
    .bilgi .hava { display: none; }
    .bugun-kart dl { margin-left: 0; }
    .tahmin .hava span { display: none; }
}

/* Yorumlar */
.yorumlar .sayi { font-size: 14px; color: var(--soluk); font-weight: 400; margin-left: 4px; }
.yorum-form {
    display: grid; gap: 10px; padding: 16px; margin-bottom: 18px;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px;
}
.yorum-form label { display: grid; gap: 4px; font-size: 14px; color: var(--soluk); }
.yorum-form input, .yorum-form textarea {
    width: 100%; padding: 10px 12px; font: inherit; font-size: 16px;
    border: 1px solid var(--cizgi); border-radius: 8px;
    background: var(--zemin); color: var(--yazi); resize: vertical;
}
.yorum-form input:focus, .yorum-form textarea:focus { outline: 2px solid var(--vurgu); outline-offset: -1px; }
.yorum-form button {
    justify-self: start; padding: 10px 18px; font: inherit; font-weight: 600;
    border: 0; border-radius: 8px; background: var(--vurgu); color: #fff; cursor: pointer;
}
.yorum-form button:hover { filter: brightness(1.08); }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.yorum-listesi { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.yorum-listesi > li { padding: 14px 16px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; }
.yorum-ust { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.yorum-ust time { color: var(--soluk); font-size: 13px; }
.yorum-metin { margin: 8px 0 10px; overflow-wrap: anywhere; line-height: 1.55; }
.yorum-etkilesim { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.yorum-oylar { display: flex; align-items: center; gap: 6px; }

.oy-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 20px; font-size: 13px; font-weight: 500;
    background: var(--zemin); border: 1px solid var(--cizgi); color: var(--yazi);
    cursor: pointer; transition: all .15s ease; user-select: none;
}
.oy-btn:hover { border-color: var(--vurgu); }
.oy-btn .oy-ikon { font-size: 14px; line-height: 1; }
.oy-btn .oy-sayi { font-size: 12px; font-variant-numeric: tabular-nums; }
.oy-begen.aktif {
    background: #ecfdf5; border-color: #10b981; color: #047857; font-weight: 600;
}
.oy-begenme.aktif {
    background: #fef2f2; border-color: #ef4444; color: #b91c1c; font-weight: 600;
}
@media (prefers-color-scheme: dark) {
    .oy-begen.aktif { background: #064e3b; border-color: #059669; color: #a7f3d0; }
    .oy-begenme.aktif { background: #7f1d1d; border-color: #dc2626; color: #fecaca; }
}

.cevapla-btn {
    padding: 4px 10px; border-radius: 16px; font-size: 13px; font-weight: 500;
    background: transparent; border: 1px solid transparent; color: var(--soluk);
    cursor: pointer; transition: all .15s ease;
}
.cevapla-btn:hover { background: var(--zemin); color: var(--yazi); border-color: var(--cizgi); }

/* Alt cevaplar listesi */
.cevap-listesi {
    list-style: none; padding: 0; margin: 12px 0 0 16px;
    border-left: 2px solid var(--cizgi); padding-left: 14px;
    display: grid; gap: 8px;
}
@media (max-width: 640px) {
    .cevap-listesi { margin-left: 6px; padding-left: 8px; }
}
.cevap-kart {
    padding: 10px 14px !important; background: var(--zemin) !important; border-radius: 12px !important;
}
.cevap-yazar-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cevap-hedef-etiket {
    font-size: 11px; font-weight: 500; color: var(--soluk);
    background: var(--kart); padding: 1px 7px; border-radius: 8px; border: 1px solid var(--cizgi);
}

/* Inline cevap formu */
.cevap-form-kap {
    margin-top: 12px; padding: 14px;
    background: var(--zemin); border: 1px dashed var(--cizgi); border-radius: 12px;
}
.cevap-form-baslik {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    margin-bottom: 10px; font-size: 13px; color: var(--yazi);
}
.cevap-kapat {
    background: transparent; border: 0; color: var(--soluk);
    font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 6px; border-radius: 4px;
}
.cevap-kapat:hover { color: #e5484d; background: var(--kart); }
.mesaj { margin-bottom: 12px; }
.ok-mesaj { padding: 12px 14px; border-radius: 10px; background: var(--ok-zemin); color: var(--ok-yazi); }
.yorum-rozet { display: inline-block; margin-left: 6px; font-size: 13px; color: var(--soluk); }

/* Merkez içerikleri */
.kapak { margin: 0 0 16px; border-radius: 16px; overflow: hidden; aspect-ratio: 21 / 8; background: var(--cizgi); }
.kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sayfa-ici {
    display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 0;
    position: sticky; top: 0; z-index: 5; padding: 8px 0; background: var(--zemin);
}
.sayfa-ici a {
    padding: 5px 12px; border-radius: 16px; font-size: 14px; text-decoration: none;
    background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi);
}
.sayfa-ici a:hover { border-color: var(--vurgu); }
section[id] { scroll-margin-top: 56px; }

.metin-kutu {
    padding: 4px 18px; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px;
    font-size: 16px; line-height: 1.65;
}
.metin-kutu p { margin: 12px 0; overflow-wrap: anywhere; }
.iletisim { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--cizgi); }
.kaynaklar { margin: 12px 0; padding-top: 10px; border-top: 1px solid var(--cizgi); font-size: 14px; line-height: 1.5; }
.kaynaklar h3 { margin: 0 0 6px; font-size: 14px; font-weight: 600; opacity: .75; }
.kaynaklar ul { margin: 0; padding-left: 18px; }
.kaynaklar li { margin: 3px 0; overflow-wrap: anywhere; }

.yazi-kartlari { display: grid; gap: 10px; }
.yazi-kart {
    display: flex; gap: 14px; padding: 12px; text-decoration: none; color: inherit;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px;
}
.yazi-kart:hover { border-color: var(--vurgu); }
.yazi-kart img { width: 140px; height: 96px; object-fit: cover; border-radius: 10px; flex: none; }
.yazi-kart h3 { margin: 2px 0 4px; font-size: 17px; }
.yazi-kart p { margin: 0; color: var(--soluk); font-size: 14px; }

.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.galeri a { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--cizgi); }
.galeri img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.galeri a:hover img { transform: scale(1.04); }

.isik-kutusu {
    border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh;
    width: 100vw; height: 100vh; margin: 0;
}
.isik-kutusu::backdrop { background: rgba(0, 0, 0, .88); }
.isik-kutusu[open] { display: flex; align-items: center; justify-content: center; }
.isik-kutusu figure { margin: 0; max-width: 92vw; text-align: center; }
.isik-kutusu img { max-width: 92vw; max-height: 84vh; border-radius: 6px; }
.isik-kutusu figcaption { color: #eee; margin-top: 8px; font-size: 14px; }
.isik-kutusu button {
    position: fixed; background: rgba(255, 255, 255, .12); color: #fff; border: 0; cursor: pointer;
    width: 46px; height: 46px; border-radius: 50%; font-size: 28px; line-height: 1;
}
.isik-kutusu .kapat { top: 16px; right: 16px; }
.isik-kutusu .onceki { left: 12px; top: 50%; }
.isik-kutusu .sonraki { right: 12px; top: 50%; }

.konum-kutu {
    display: grid; grid-template-columns: 1.4fr 1fr; overflow: hidden;
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px;
}
.konum-kutu:not(:has(iframe)) { grid-template-columns: 1fr; }
.harita-gomme { width: 100%; height: 300px; border: 0; display: block; }
.konum-bilgi { padding: 14px 18px; }
.konum-bilgi p { margin: 0 0 8px; }
.soluk-yazi { color: var(--soluk); font-size: 14px; font-variant-numeric: tabular-nums; }
.konum-bilgi .not { font-size: 14px; color: var(--soluk); }
.konum-baglantilar { display: flex; flex-direction: column; gap: 6px; margin-top: 12px !important; }

.yazi h1 { font-size: 30px; line-height: 1.25; margin: 6px 0 16px; }
.yazi-kapak { margin: 0 0 16px; }
.yazi-kapak img { width: 100%; border-radius: 14px; display: block; }
.yazi-kapak figcaption { color: var(--soluk); font-size: 13px; margin-top: 6px; }
.yazi .metin-kutu { font-size: 17px; }
.diger-yazilar { padding-left: 18px; }
.diger-yazilar li { margin-bottom: 6px; }

@media (max-width: 640px) {
    .konum-kutu { grid-template-columns: 1fr; }
    .yazi-kart img { width: 96px; height: 80px; }
    .kapak { aspect-ratio: 16 / 9; }
}

/* ================= Merkez sayfası (modern) ================= */
:is(.sayfa-detay, .sayfa-ana) main, :is(.sayfa-detay, .sayfa-ana) .ust, .sayfa-detay footer { max-width: 1040px; }

.hero {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 440px; border-radius: 24px; margin-top: 4px;
    color: #fff;
    --k: 0;
}
.hero { background: var(--gok); }
.hero::after { /* hafif ışık */
    content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gok-isik);
}

.manzara { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.kar-yagisi { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

.dag-uzak { fill: var(--dag-uzak); opacity: var(--dag-uzak-op); }
.dag-zirve { fill: var(--zirve); opacity: var(--zirve-op); }
.dag-yakin { fill: var(--dag-yakin); }
.camlar path { fill: var(--cam-agac); }
.direk .kirmizi { fill: #e5484d; }
.direk .beyaz { fill: #ffffff; }

.kar-tabakasi, .kar-etiket {
    transform: translateY(calc(var(--k) * -1px));
    transition: transform 2.2s cubic-bezier(.2, .75, .2, 1);
}
.kar-ust { fill: none; stroke: #ffffff; stroke-width: 3; opacity: .9; }
.kar-etiket line { stroke: #fff; stroke-width: 2; stroke-dasharray: 4 3; }
.kar-etiket circle { fill: #fff; }
.kar-etiket text { fill: #fff; font: 700 26px system-ui, -apple-system, sans-serif; paint-order: stroke; stroke: rgba(10,30,50,.55); stroke-width: 4px; }
.kar-etiket { opacity: 0; transition: transform 2.2s cubic-bezier(.2, .75, .2, 1), opacity .6s 1.6s; }
.hero.hazir .kar-etiket { opacity: 1; }
.hero.hareketsiz .kar-tabakasi, .hero.hareketsiz .kar-etiket { transition: none; }

.hero-ust { position: relative; z-index: 3; padding: 22px 26px 0; max-width: 62%; }
.geri-acik { color: rgba(255,255,255,.85); text-decoration: none; font-size: 14px; }
.geri-acik:hover { color: #fff; }
.hero h1 {
    margin: 10px 0 4px; font-size: clamp(28px, 4.6vw, 46px); line-height: 1.08; letter-spacing: -.02em;
    text-shadow: 0 2px 18px rgba(0, 20, 50, .35);
}
.hero-yer { margin: 0; font-size: 16px; opacity: .9; }

.sayac {
    position: absolute; z-index: 3; top: 26px; right: 28px; text-align: right;
    display: flex; flex-direction: column; align-items: flex-end;
    text-shadow: 0 3px 24px rgba(0, 25, 60, .35);
}
.sayac b { font-size: clamp(64px, 11vw, 124px); line-height: .9; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sayac span { font-size: 18px; font-weight: 600; opacity: .95; margin-top: 4px; }
.sayac.olcum-yok b { font-size: 64px; opacity: .8; }

.hero-alt { position: absolute; z-index: 3; left: 22px; bottom: 18px; right: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.cip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px; font-size: 14px;
    background: rgba(10, 22, 36, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
}
.cip-ikon { width: 22px; height: 22px; }

:is(.sayfa-detay, .sayfa-ana) .sayfa-ici { margin-top: 14px; }

/* Özet kartları */
.ozet-kartlar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.ozet-kart {
    padding: 14px 16px; border-radius: 16px; background: var(--kart); border: 1px solid var(--cizgi);
    display: flex; flex-direction: column; gap: 4px;
}
.ozet-kart .etiket { color: var(--soluk); font-size: 13px; }
.ozet-deger { display: flex; align-items: center; gap: 6px; }
.ozet-deger b { font-size: 28px; line-height: 1.1; }
.ozet-deger small { color: var(--soluk); font-size: 14px; }
.ozet-deger .ok { font-size: 20px; }
.ozet-kart .alt { color: var(--soluk); font-size: 13px; min-height: 1.2em; }

/* Gün kartları */
.gun-kartlari {
    display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px;
}
.gun-kart {
    scroll-snap-align: start;
    display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
    padding: 14px 10px; border-radius: 16px; background: var(--kart); border: 1px solid var(--cizgi);
}
.gun-adi { font-weight: 700; }
.gun-tarih { color: var(--soluk); font-size: 13px; }
.gun-ikon { width: 52px; height: 52px; margin: 4px 0; }
.gun-hadise { font-size: 13px; color: var(--soluk); min-height: 2.4em; display: flex; align-items: center; }
.gun-sicaklik { font-size: 17px; }
.gun-sicaklik b { font-size: 20px; }
.gun-ruzgar { color: var(--soluk); font-size: 13px; }

@media (max-width: 760px) {
    .hero { min-height: 400px; border-radius: 18px; }
    .hero-ust { max-width: 100%; padding: 18px 18px 0; }
    .sayac { top: auto; bottom: 64px; right: 18px; }
    .hero-alt { left: 14px; right: 14px; bottom: 14px; }
    .ozet-kartlar { grid-template-columns: repeat(2, 1fr); }
    .gun-kartlari { grid-template-columns: repeat(5, 132px); }
}
@media (prefers-reduced-motion: reduce) {
    .kar-tabakasi, .kar-etiket { transition: none !important; }
}

/* ================= Ortak tema: kartlar, başlık, tema düğmesi ================= */
.ust { align-items: center; }
.ust .slogan { flex: 1; }
.tema-dugme {
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer; flex: none;
    display: grid; place-items: center; padding: 0;
    background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi);
    box-shadow: var(--kart-golge);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: transform .2s, border-color .2s;
}
.tema-dugme:hover { border-color: var(--vurgu); transform: rotate(-12deg); }
.tema-dugme svg { width: 20px; height: 20px; grid-area: 1 / 1; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tema-dugme .ay { fill: currentColor; stroke: none; }
.tema-dugme .gunes, .tema-dugme .ay { transition: opacity .25s, transform .35s; }
/* Açıkta ay simgesi (koyuya geç), koyuda güneş simgesi (açığa geç) */
.tema-dugme .gunes { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-tema="koyu"] .tema-dugme .gunes { opacity: 1; transform: none; }
:root[data-tema="koyu"] .tema-dugme .ay { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema]) .tema-dugme .gunes { opacity: 1; transform: none; }
    :root:not([data-tema]) .tema-dugme .ay { opacity: 0; transform: rotate(90deg) scale(.6); }
}

/* Kart yüzeyleri */
.kart, .metin-kutu, .konum-kutu, .yazi-kart, .yorum-form, .yorum-listesi li,
.ozet-kart, .gun-kart, .tablo-kap, .bugun-kart, .buyuk-kar.yok, #ara {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    box-shadow: var(--kart-golge);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.kart, .metin-kutu, .konum-kutu, .yazi-kart, .yorum-form, .ozet-kart, .gun-kart, .tablo-kap { border-radius: 18px; }
.yorum-listesi li { border-radius: 16px; }
.kart { transition: transform .15s, border-color .15s; }
.kart:hover { transform: translateY(-1px); }
.yazi-kart { transition: transform .15s, border-color .15s; }
.yazi-kart:hover { transform: translateY(-2px); }

/* Bölüm başlıkları */
.bolum { font-size: 20px; letter-spacing: -.01em; margin: 34px 0 12px; display: flex; align-items: center; gap: 8px; }
.bolum::before {
    content: ""; width: 4px; height: 18px; border-radius: 2px;
    background: linear-gradient(180deg, var(--vurgu), transparent);
}

/* Sayfa içi menü: buzlu cam */
.sayfa-ici {
    background: transparent; margin-inline: -4px; padding: 10px 4px;
}
.sayfa-ici::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--cam); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent);
}
.sayfa-ici a { background: var(--kart); border-color: var(--cizgi); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sayfa-ici a.aktif { background: var(--vurgu); border-color: var(--vurgu); color: #fff; }
:root[data-tema="koyu"] .sayfa-ici a.aktif { color: #07111f; }

/* Gün kartları: bugün vurgusu ve kar günleri */
.gun-kart { position: relative; overflow: hidden; }
.gun-kart.karli::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 4px;
    background: linear-gradient(90deg, transparent, var(--vurgu), transparent);
}
.ozet-kart.vurgulu { background: linear-gradient(160deg, var(--kar-zemin), var(--kart)); }
.ozet-kart.vurgulu b { color: var(--kar-yazi); }

/* Hava simgeleri koyu zeminde okunsun */
:root[data-tema="koyu"] .ikon, :root[data-tema="koyu"] .gun-ikon, :root[data-tema="koyu"] .ikon-buyuk {
    filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 6px rgba(160,210,255,.25));
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) .ikon, :root:not([data-tema="acik"]) .gun-ikon, :root:not([data-tema="acik"]) .ikon-buyuk {
        filter: drop-shadow(0 0 1px rgba(255,255,255,.9)) drop-shadow(0 0 6px rgba(160,210,255,.25));
    }
}

/* Form alanları */
.yorum-form input, .yorum-form textarea { background: transparent; }
.yorum-form button { border-radius: 10px; }
:root[data-tema="koyu"] .yorum-form button { color: #07111f; }

/* Harita koyu temada yumuşasın */
:root[data-tema="koyu"] .harita-gomme { filter: brightness(.82) contrast(1.05) saturate(.85); }

footer { text-align: center; }

/* ================= Merkez sayfası: tam genişlik üst bölüm ================= */
body { overflow-x: clip; }
:is(.sayfa-detay, .sayfa-ana) { --hiza: max(16px, calc((100vw - 1040px) / 2 + 16px)); }
:is(.sayfa-detay, .sayfa-ana) main { padding-top: 0; }

/* Üst çubuk gökyüzünün üstünde durur */
:is(.sayfa-detay, .sayfa-ana) .ust {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    max-width: none; padding: 16px var(--hiza);
    color: #fff;
}
:is(.sayfa-detay, .sayfa-ana) .ust .logo { color: #fff; text-shadow: 0 1px 12px rgba(0, 20, 50, .35); }
:is(.sayfa-detay, .sayfa-ana) .ust .slogan { color: rgba(255, 255, 255, .82); }
:is(.sayfa-detay, .sayfa-ana) .tema-dugme {
    background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #fff; box-shadow: none;
}

:is(.sayfa-detay, .sayfa-ana) .hero {
    width: 100vw; margin: 0 0 0 calc(50% - 50vw);
    min-height: 540px; border-radius: 0 0 32px 32px;
}
:is(.sayfa-detay, .sayfa-ana) .hero-ust { padding: 86px var(--hiza) 0; max-width: calc(var(--hiza) + 640px); }
:is(.sayfa-detay, .sayfa-ana) .sayac { top: 92px; right: var(--hiza); }
:is(.sayfa-detay, .sayfa-ana) .hero-alt { left: var(--hiza); right: var(--hiza); bottom: 22px; }

@media (max-width: 760px) {
    :is(.sayfa-detay, .sayfa-ana) .ust .slogan { display: none; }
    :is(.sayfa-detay, .sayfa-ana) .ust { justify-content: space-between; }
    :is(.sayfa-detay, .sayfa-ana) .hero { min-height: 470px; border-radius: 0 0 22px 22px; }
    :is(.sayfa-detay, .sayfa-ana) .hero-ust { padding-top: 72px; max-width: 100%; }
    :is(.sayfa-detay, .sayfa-ana) .sayac { top: auto; bottom: 66px; }
}

/* ================= Üst bölümün sayfaya yumuşak geçişi ================= */
:is(.sayfa-detay, .sayfa-ana) { background: var(--zemin); }
:is(.sayfa-detay, .sayfa-ana) .hero { border-radius: 0; }
.hero::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 30%;
    z-index: 2; pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--zemin) 45%, transparent) 45%,
        color-mix(in srgb, var(--zemin) 85%, transparent) 75%,
        var(--zemin) 100%);
}
.kar-yagisi { z-index: 1; }
:is(.sayfa-detay, .sayfa-ana) .sayfa-ici { margin-top: 0; }
/* Alt bilgi çipleri açık temada açık zemine oturur */
.hero-alt .cip { background: var(--cam); color: var(--yazi); border-color: var(--cizgi); }
.hero-alt .cip-ikon { filter: none; }
@media (max-width: 760px) { :is(.sayfa-detay, .sayfa-ana) .hero { border-radius: 0; } }
/* Menü arka planı yalnızca yukarı yapışınca görünsün */
.sayfa-ici::before { opacity: 0; transition: opacity .25s; }
.sayfa-ici.yapisti::before { opacity: 1; }

/* ================= Ana sayfa (giriş) ================= */
.sayfa-ana .hero { min-height: 560px; }
.sayfa-ana .hero-ust { padding-top: 104px; }
.ust-etiket {
    display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-ana h1 { font-size: clamp(36px, 6.4vw, 68px); margin-top: 14px; }
.hero-ana .hero-yer { font-size: 18px; max-width: 520px; }
.sayac-link { color: #fff; text-decoration: none; }
.sayac-link:hover span:last-child { text-decoration: underline; }
.sayac-ust { font-size: 13px !important; font-weight: 600; opacity: .85; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 6px !important; }
.sayfa-ana .sayac { top: 120px; }

/* Arama kartı: üst bölüme taşar */
.arama-kart {
    position: relative; z-index: 6; margin: -64px auto 0; max-width: 940px;
    display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 6px; align-items: stretch;
    padding: 8px; border-radius: 22px;
    background: var(--kart); border: 1px solid var(--cizgi);
    box-shadow: 0 20px 50px -18px rgba(5, 25, 50, .45), var(--kart-golge);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
:root[data-tema="koyu"] .arama-kart { background: rgba(14, 30, 52, .82); }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .arama-kart { background: rgba(14, 30, 52, .82); } }
.arama-alan {
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    padding: 8px 14px; border-radius: 14px; cursor: text; transition: background .15s;
}
.arama-alan:hover, .arama-alan:focus-within { background: var(--kar-zemin); }
.arama-alan + .arama-alan { border-left: 1px solid var(--cizgi); }
.arama-alan span { font-size: 12px; font-weight: 700; color: var(--yazi); }
.arama-alan input, .arama-alan select {
    border: 0; outline: 0; background: transparent; color: var(--soluk);
    font: inherit; font-size: 15px; padding: 2px 0; width: 100%; cursor: pointer;
}
.arama-alan input { cursor: text; }
.arama-alan select option { color: #0f2236; }
.arama-dugme {
    border: 0; border-radius: 16px; padding: 0 30px; cursor: pointer;
    font: inherit; font-size: 16px; font-weight: 700; color: #fff;
    background: linear-gradient(135deg, #1d8fe0, #0a5fb0);
    box-shadow: 0 8px 20px -8px rgba(10, 95, 176, .7);
    transition: transform .15s, filter .15s;
}
.arama-dugme:hover { transform: translateY(-1px); filter: brightness(1.08); }

/* İstatistik şeridi */
.istatistik {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 28px 0 8px;
}
.istatistik div {
    padding: 16px 18px; border-radius: 18px; text-align: center;
    background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
}
.istatistik b { display: block; font-size: 28px; letter-spacing: -.02em; color: var(--kar-yazi); }
.istatistik span { color: var(--soluk); font-size: 13px; }

/* Bölüm başlıkları */
.bolum-blok { margin-top: 36px; }
.bolum-baslik { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bolum-baslik .bolum { margin: 0 0 14px; }
.tumu { font-size: 14px; font-weight: 600; text-decoration: none; }

/* Merkez kartı */
.m-kart {
    display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
    border-radius: 20px; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.m-kart:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); box-shadow: 0 18px 40px -18px rgba(5, 30, 60, .45); }
.m-kart:hover .m-gorsel img, .m-kart:hover .m-gorsel.cizim { transform: scale(1.04); }
.m-gorsel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kar-zemin); }
.m-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.m-gorsel.cizim, .haber-gorsel.cizim {
    background:
        url("mini-dag.svg") center bottom / cover no-repeat,
        linear-gradient(180deg, hsl(var(--ton) 62% 42%), hsl(var(--ton) 55% 72%));
    transition: transform .4s;
}
:root[data-tema="koyu"] .m-gorsel.cizim, :root[data-tema="koyu"] .haber-gorsel.cizim {
    background: url("mini-dag.svg") center bottom / cover no-repeat, linear-gradient(180deg, hsl(var(--ton) 60% 12%), hsl(var(--ton) 45% 32%));
}
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) .m-gorsel.cizim, :root:not([data-tema="acik"]) .haber-gorsel.cizim {
        background: url("mini-dag.svg") center bottom / cover no-repeat, linear-gradient(180deg, hsl(var(--ton) 60% 12%), hsl(var(--ton) 45% 32%));
    }
}
.m-rozet, .m-yagis, .m-hava {
    position: absolute; display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.m-rozet { top: 10px; left: 10px; background: #fff; color: #0a4f86; box-shadow: 0 4px 14px -4px rgba(0,0,0,.35); }
.m-rozet b { font-size: 17px; }
.m-rozet.bos { background: rgba(10, 22, 36, .55); color: #fff; box-shadow: none; font-weight: 500; }
.m-yagis { top: 10px; right: 10px; background: rgba(10, 80, 150, .75); color: #fff; font-size: 12px; }
.m-hava { left: 10px; bottom: 10px; background: rgba(10, 22, 36, .55); color: #fff; }
.m-hava small { opacity: .75; font-weight: 400; margin-left: 2px; }
.m-hava-ikon { width: 22px; height: 22px; filter: brightness(1.15); }

.m-govde { padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.m-govde h3 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
.m-yer, .m-tur, .m-durum { margin: 0; color: var(--soluk); font-size: 13px; }
.m-tur { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; }
.m-gunler { display: flex; justify-content: space-between; margin: 8px 0 2px; padding: 8px 0 0; border-top: 1px dashed var(--cizgi); }
.m-gunler span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.m-gunler small { font-size: 11px; color: var(--soluk); }
.m-gun-ikon { width: 26px; height: 26px; }
.m-alt { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; font-size: 13px; color: var(--soluk); }
.m-git { color: var(--vurgu); font-weight: 700; }

.m-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }

/* Öne çıkanlar: ilki büyük */
.one-cikan { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.one-cikan .m-kart.ilk { grid-row: span 2; }
.one-cikan .m-kart { position: relative; min-height: 210px; }
.one-cikan .m-kart .m-gorsel { position: absolute; inset: 0; aspect-ratio: auto; }
.one-cikan .m-kart .m-gorsel::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(5, 15, 30, .78));
}
.one-cikan .m-govde { position: relative; z-index: 1; margin-top: auto; color: #fff; padding: 18px 20px; }
.one-cikan .m-govde h3 { font-size: 24px; }
.one-cikan .m-kart.ilk .m-govde h3 { font-size: 34px; }
.one-cikan .m-tur, .one-cikan .m-durum { color: rgba(255,255,255,.85); }
.one-cikan .m-hava { left: auto; right: 10px; bottom: auto; top: 10px; }
.one-cikan .m-yagis { top: 50px; }
.one-cikan .m-kart.ilk .m-rozet { font-size: 15px; padding: 7px 14px; }
.one-cikan .m-kart.ilk .m-rozet b { font-size: 26px; }

/* Filtre çipleri */
.filtre-cipleri { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filtre-cipleri button {
    padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
    background: var(--kart); color: var(--yazi); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
}
.filtre-cipleri button span { color: var(--soluk); font-weight: 500; margin-left: 2px; }
.filtre-cipleri button.aktif { background: var(--yazi); color: var(--zemin); border-color: var(--yazi); }
.filtre-cipleri button.aktif span { color: inherit; opacity: .7; }
.m-kart[hidden] { display: none; }
.baglanti { background: none; border: 0; color: var(--vurgu); cursor: pointer; font: inherit; padding: 0; text-decoration: underline; }

/* Haberler */
.haber-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.haber-kart {
    display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
    border-radius: 20px; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
    transition: transform .2s;
}
.haber-kart:hover { transform: translateY(-3px); }
.haber-gorsel { aspect-ratio: 16 / 9; overflow: hidden; }
.haber-gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.haber-kart p { margin: 2px 0 0; color: var(--soluk); font-size: 14px; }

@media (max-width: 860px) {
    .arama-kart { grid-template-columns: 1fr 1fr; margin-top: -48px; }
    .arama-alan.genis { grid-column: 1 / -1; }
    .arama-alan.genis + .arama-alan { border-left: 0; }
    .arama-dugme { grid-column: 1 / -1; padding: 12px; }
    .istatistik { grid-template-columns: repeat(2, 1fr); }
    .one-cikan { grid-template-columns: 1fr; grid-template-rows: none; }
    .one-cikan .m-kart.ilk { grid-row: auto; min-height: 280px; }
}
@media (max-width: 760px) {
    .sayfa-ana .hero { min-height: 500px; }
    .sayfa-ana .hero-ust { padding-top: 76px; }
    .sayfa-ana .sayac { top: auto; bottom: 80px; }
}

/* Düzeltmeler: ana sayfa sahnesi alta, yazılar açık gökyüzünde */
.sayfa-ana .hero { min-height: 620px; }
.hero-ana .manzara { top: auto; bottom: 0; height: 64%; }
.hero-ana .hero-yer { text-shadow: 0 1px 12px rgba(0, 25, 60, .45); }
.one-cikan .m-govde { flex: none; }
.one-cikan .m-yagis { top: auto; bottom: 12px; right: 12px; }
.one-cikan .m-kart .m-govde { padding-right: 150px; }
@media (max-width: 760px) {
    .sayfa-ana .hero { min-height: 600px; }
    .hero-ana .manzara { height: 52%; }
    .sayfa-ana .sayac { bottom: 84px; }
    .one-cikan .m-kart .m-govde { padding-right: 20px; padding-bottom: 50px; }
}
.m-rozet, .m-yagis, .m-hava { z-index: 2; }
@media (max-width: 760px) {
    .sayfa-ana .sayac {
        position: relative; top: auto; bottom: auto; right: auto;
        align-items: flex-start; text-align: left; padding: 18px var(--hiza) 0; z-index: 3;
    }
    .sayfa-ana .sayac b { font-size: 72px; }
    .sayfa-ana .hero { min-height: 640px; }
    .hero-ana .manzara { height: 44%; }
}

/* ================= Ana sayfa v2: canlı etiket, kar tablosu, arama, istatistik ================= */
.canli {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: 1px;
    background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); animation: nabiz 2s infinite;
}
@keyframes nabiz { 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }

/* Kar tablosu */
.kar-tablosu {
    position: absolute; z-index: 3; top: 96px; right: var(--hiza); width: min(360px, 34vw);
    padding: 16px 16px 12px; border-radius: 22px; color: #fff;
    background: rgba(8, 24, 46, .38); border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 20px 50px -20px rgba(0, 10, 30, .55);
}
.kt-baslik { display: flex; justify-content: space-between; align-items: baseline; margin: 0 4px 10px; }
.kt-baslik span { font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.kt-baslik small { opacity: .75; font-size: 12px; }
.kar-tablosu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.kar-tablosu li a {
    display: grid; grid-template-columns: 22px 1fr auto; grid-template-rows: auto 6px; column-gap: 10px; row-gap: 5px;
    align-items: center; padding: 8px 8px; border-radius: 12px; color: #fff; text-decoration: none;
    transition: background .15s;
}
.kar-tablosu li a:hover { background: rgba(255, 255, 255, .1); }
.kt-sira {
    grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, .16);
}
.kar-tablosu li:first-child .kt-sira { background: #fff; color: #0a4f86; }
.kt-ad { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-ad small { font-weight: 400; opacity: .7; font-size: 12px; margin-left: 6px; }
.kt-cm { font-size: 13px; opacity: .9; white-space: nowrap; }
.kt-cm b { font-size: 18px; }
.kt-cubuk { grid-column: 2 / 4; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.kt-cubuk i {
    display: block; height: 100%; width: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #bfe6ff, #fff);
    transform-origin: left; transform: scaleX(0);
    transition: transform 1.4s cubic-bezier(.2, .75, .2, 1) var(--gecikme, 0ms);
}
.hero.hazir .kt-cubuk i { transform: scaleX(var(--oran)); }
.hero.hareketsiz .kt-cubuk i { transition: none; }
.kt-tumu { display: block; margin: 8px 4px 0; color: #fff; font-size: 13px; font-weight: 600; opacity: .85; text-decoration: none; }
.kt-tumu:hover { opacity: 1; text-decoration: underline; }

/* Arama kartı: simgeler ve öneri listesi */
.arama-alan { position: relative; padding-left: 44px; }
.aa-ikon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px;
    fill: none; stroke: var(--vurgu); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.arama-alan label, .arama-alan > span { font-size: 12px; font-weight: 700; color: var(--yazi); cursor: pointer; }
.arama-alan input[type=search] { border: 0; box-shadow: none; padding: 2px 0; background: transparent; }
.arama-alan input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
.arama-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.arama-dugme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

.oneriler {
    position: absolute; left: 0; right: 0; top: calc(100% + 12px); z-index: 20; margin: 0; padding: 6px; list-style: none;
    border-radius: 18px; background: var(--zemin); border: 1px solid var(--cizgi);
    box-shadow: 0 24px 50px -16px rgba(5, 25, 50, .45);
    max-height: 360px; overflow-y: auto;
}
.oneriler li a {
    display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 12px; color: var(--yazi); text-decoration: none;
}
.oneriler li a.secili, .oneriler li a:hover { background: var(--kar-zemin); }
.oneri-rozet {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; text-align: center; line-height: 1;
    font-size: 15px; font-weight: 800; color: var(--kar-yazi); background: var(--kar-zemin);
}
.oneri-rozet small { display: block; font-size: 9px; font-weight: 600; }
.oneri-rozet.bos { color: var(--soluk); font-size: 18px; }
.oneriler b { display: block; font-size: 15px; }
.oneriler li small.yer { color: var(--soluk); font-size: 12px; }
.oneriler .ok-git { color: var(--soluk); font-size: 18px; }
.oneriler .yok { padding: 12px; color: var(--soluk); font-size: 14px; }
.oneriler mark { background: none; color: var(--vurgu); font-weight: 800; }

/* İstatistik şeridi: tıklanabilir kutular */
.istatistik { grid-template-columns: repeat(4, 1fr); }
.istatistik .ist {
    display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px;
    border-radius: 18px; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
    font: inherit; color: var(--yazi); text-decoration: none; cursor: pointer;
    transition: transform .15s, border-color .15s;
}
.istatistik div.ist { cursor: default; }
.istatistik .ist:is(a, button):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); }
.istatistik div { padding: 0; border: 0; box-shadow: none; background: none; text-align: left; }
.istatistik .ist b { font-size: 20px; display: block; color: var(--yazi); letter-spacing: -.01em; }
.istatistik .ist small { color: var(--soluk); font-size: 13px; line-height: 1.3; display: block; }
.ist-ikon {
    flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-size: 22px;
    background: var(--kar-zemin);
}

@media (max-width: 1000px) {
    .kar-tablosu { width: 300px; }
}
@media (max-width: 860px) {
    .istatistik { grid-template-columns: repeat(2, 1fr); }
    .kar-tablosu {
        position: relative; top: auto; right: auto; width: auto; margin: 20px var(--hiza) 0;
    }
    .sayfa-ana .hero { min-height: 0; padding-bottom: 120px; }
    .hero-ana .manzara { height: 40%; }
}
@media (max-width: 520px) {
    .istatistik { grid-template-columns: 1fr; }
}

/* Rötuşlar */
.arama-kart #ara { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 2px 0; border-radius: 0; color: var(--yazi); }
.arama-kart #ara::placeholder { color: var(--soluk); }
.hero-ana .kar-etiket { display: none; }
.ist-ikon svg { width: 24px; height: 24px; fill: none; stroke: var(--vurgu); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) {
    .istatistik { grid-template-columns: 1fr 1fr; gap: 8px; }
    .istatistik .ist { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
    .ist-ikon { width: 36px; height: 36px; border-radius: 11px; }
    .ist-ikon svg { width: 20px; height: 20px; }
    .istatistik .ist b { font-size: 18px; }
    .istatistik .ist small { font-size: 12px; }
}

/* ================= Footer ================= */
footer.alt-bilgi {
    position: relative; max-width: none; margin-top: 72px; padding: 0; text-align: left;
    color: #c9d9ea; background: linear-gradient(180deg, #0c2340 0%, #07152a 100%);
}
:root[data-tema="koyu"] footer.alt-bilgi { background: linear-gradient(180deg, #0b1d36 0%, #040b16 100%); }
.ab-dag {
    position: absolute; left: 0; right: 0; top: -59px; height: 60px; pointer-events: none;
    background: #0c2340;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 42 L90 18 L160 34 L260 4 L360 36 L450 20 L560 46 L660 10 L770 38 L860 22 L960 44 L1060 14 L1140 32 L1200 24 L1200 60Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60 L0 42 L90 18 L160 34 L260 4 L360 36 L450 20 L560 46 L660 10 L770 38 L860 22 L960 44 L1060 14 L1140 32 L1200 24 L1200 60Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
:root[data-tema="koyu"] .ab-dag { background: #0b1d36; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) footer.alt-bilgi { background: linear-gradient(180deg, #0b1d36 0%, #040b16 100%); }
    :root:not([data-tema="acik"]) .ab-dag { background: #0b1d36; }
}
.ab-ic { max-width: 1040px; margin: 0 auto; padding: 36px 16px 30px; }
.ab-ust { display: grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 36px; }
.ab-logo { color: #fff; font-size: 22px; font-weight: 800; text-decoration: none; letter-spacing: -.01em; }
.ab-slogan { margin: 6px 0 14px; font-size: 16px; font-weight: 600; color: #9fd3ff; }
.ab-marka blockquote {
    margin: 0; padding: 10px 14px; border-left: 3px solid #7cc4ff; border-radius: 0 10px 10px 0;
    background: rgba(255, 255, 255, .05); font-style: italic; color: #e3eef9;
}
.ab-sutun h3 { margin: 4px 0 12px; color: #fff; font-size: 15px; }
.ab-sutun h3 small { font-weight: 400; color: #8fa6bd; font-size: 12px; }
.ab-sutun ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ab-sutun li a, .ab-sutun li span { color: #c9d9ea; text-decoration: none; font-size: 14px; }
.ab-sutun li a:hover { color: #fff; text-decoration: underline; }
.ab-sutun li > span { opacity: .7; cursor: default; }
.ab-karli ul { grid-template-columns: 1fr 1fr; gap: 6px; }
.ab-karli li a {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
    transition: background .15s, border-color .15s;
}
.ab-karli li a:hover { background: rgba(124, 196, 255, .14); border-color: rgba(124, 196, 255, .35); text-decoration: none; }
.ab-karli li a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-karli li a b { color: #9fd3ff; white-space: nowrap; font-size: 13px; }
.ab-bos { font-size: 14px; color: #8fa6bd; margin: 0; }
.ab-alt {
    margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1);
    display: grid; gap: 6px; font-size: 12.5px; line-height: 1.55; color: #8fa6bd;
}
.ab-alt p { margin: 0; }
.ab-alt a { color: #9fd3ff; }
.ab-kaynak { margin-top: 6px !important; }
.ab-cerez-link { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

/* ================= Çerez Tercih Bildirimi (Cookie Consent Banner) ================= */
.cerez-banner {
    position: fixed; bottom: 20px; right: 20px; z-index: 1000;
    max-width: 460px; width: calc(100% - 40px);
    animation: cerezYukari .35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cerezYukari {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.cerez-kutu {
    background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px;
    padding: 16px 18px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
    display: flex; flex-direction: column; gap: 12px;
}
.cerez-kutu .cerez-ikon { font-size: 28px; line-height: 1; }
.cerez-kutu .cerez-icerik b { font-size: 15px; color: var(--yazi); display: block; margin-bottom: 3px; }
.cerez-kutu .cerez-icerik p { font-size: 13px; color: var(--soluk); margin: 0; line-height: 1.45; }
.cerez-butonlar { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.cerez-btn {
    padding: 8px 15px; font: inherit; font-size: 13px; font-weight: 600;
    border-radius: 8px; cursor: pointer; transition: all .15s ease;
}
.cerez-kabul { background: var(--vurgu); color: #fff; border: 0; }
.cerez-kabul:hover { filter: brightness(1.08); }
.cerez-red { background: var(--zemin); color: var(--soluk); border: 1px solid var(--cizgi); }
.cerez-red:hover { color: var(--yazi); border-color: var(--vurgu); }
@media (max-width: 480px) {
    .cerez-banner { bottom: 12px; right: 12px; width: calc(100% - 24px); }
    .cerez-butonlar { justify-content: stretch; }
    .cerez-btn { flex: 1; text-align: center; }
}
.ab-kapanis {
    margin: 24px 0 0; padding: 16px 18px; border-radius: 14px; text-align: center;
    background: rgba(124, 196, 255, .08); border: 1px dashed rgba(124, 196, 255, .3);
    color: #e3eef9; font-size: 15px;
}
.ab-kapanis::before { content: "☁️ "; }
@media (max-width: 860px) {
    .ab-ust { grid-template-columns: 1fr 1fr; }
    .ab-marka { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
    .ab-ust { grid-template-columns: 1fr; gap: 26px; }
    .ab-karli ul { grid-template-columns: 1fr; }
}
/* Footer kısa sayfalarda da en altta */
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; width: 100%; }
body > .ust, body > footer { width: 100%; }
@media (max-width: 520px) {
    .ab-karli ul { grid-template-columns: 1fr 1fr; }
    .ab-karli li a { padding: 7px 9px; font-size: 13px; }
}

/* ================= Canlı sahne: ateş, duman, kayakçılar, dağ evi ================= */
.manzara .alev, .manzara .duman, .manzara .kivilcim, .manzara .isinan, .manzara .kayakci-ic, .manzara .savrulan, .manzara .ates-isik {
    transform-box: fill-box;
}
.alev { transform-origin: 50% 100%; animation: titre .5s ease-in-out infinite alternate; }
.alev.a2 { animation-duration: .38s; animation-delay: -.2s; }
.alev.a3 { animation-duration: .27s; animation-delay: -.1s; }
@keyframes titre {
    0%   { transform: scale(1, 1) skewX(0deg); }
    50%  { transform: scale(.92, 1.12) skewX(-4deg); }
    100% { transform: scale(1.06, .9) skewX(3deg); }
}
.ates-isik { transform-origin: 50% 50%; animation: parilti 1.6s ease-in-out infinite alternate; opacity: .75; }
:root[data-tema="koyu"] .ates-isik { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .ates-isik { opacity: 1; } }
@keyframes parilti { from { transform: scale(.9); } to { transform: scale(1.08); } }

.kivilcim { fill: #ffd36b; animation: kivilcim 1.8s ease-out infinite; }
.kivilcim.k2 { animation-delay: -.6s; animation-duration: 2.2s; }
.kivilcim.k3 { animation-delay: -1.2s; animation-duration: 1.5s; }
@keyframes kivilcim {
    0%   { transform: translate(0, 0); opacity: 1; }
    100% { transform: translate(6px, -34px); opacity: 0; }
}
.duman { fill: #c8d3de; opacity: 0; transform-origin: 50% 50%; animation: duman 4s ease-out infinite; }
.duman.d2 { animation-delay: -1.3s; }
.duman.d3 { animation-delay: -2.6s; }
@keyframes duman {
    0%   { transform: translate(0, 0) scale(.6); opacity: .55; }
    100% { transform: translate(14px, -38px) scale(2.4); opacity: 0; }
}
.isinan { transform-origin: 50% 100%; animation: sallan 3s ease-in-out infinite alternate; }
.isinan.i2 { animation-delay: -1.5s; }
@keyframes sallan { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }

.kayakci-ic { transform-origin: 50% 100%; animation: viraj 1.4s ease-in-out infinite alternate; }
@keyframes viraj { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-1.5px) rotate(4deg); } }
.savrulan { fill: #fff; opacity: .9; animation: savrul .7s linear infinite; }
.savrulan.s2 { animation-delay: -.35s; }
@keyframes savrul { from { transform: translate(0, 0); opacity: .9; } to { transform: translate(-10px, -5px); opacity: 0; } }

.pencere { fill: #ffd36b; animation: pencere 3s ease-in-out infinite alternate; }
@keyframes pencere { from { fill: #ffd36b; } to { fill: #ffbe55; } }
:root[data-tema="koyu"] .pencere { filter: drop-shadow(0 0 4px #ffb347); }

/* Duraklatma: ekran dışında ya da hareket azaltma */
.hero.duraklat .manzara * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
    .manzara * { animation: none !important; }
}
/* Geçiş katmanı sahnedeki figürleri soldurmasın */
.hero::before { height: 17%; }
@media (max-width: 760px) {
    .sayfa-detay .manzara { top: auto; bottom: 0; height: 64%; }
}

/* ================= Footer sahnesi ================= */
footer.alt-bilgi { overflow: hidden; overflow: clip; overflow-clip-margin: 70px; }
footer.alt-bilgi .kar-yagisi { z-index: 0; }
.ab-ic { position: relative; z-index: 1; padding-bottom: 8px; }
.ab-sahne { position: relative; z-index: 1; display: block; width: 100%; height: 150px; margin-top: -10px; }
.ab-zemin { fill: #eef4fa; }
:root[data-tema="koyu"] .ab-zemin { fill: #dfe9f4; }
.ab-camlar path:first-child, .ab-camlar path:nth-child(odd) { fill: #1f4a3a; }
.alt-bilgi.duraklat * { animation-play-state: paused !important; }
.ab-sahne .alev, .ab-sahne .duman, .ab-sahne .kivilcim, .ab-sahne .isinan, .ab-sahne .ates-isik { transform-box: fill-box; }
.ab-sahne .ates-isik { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ab-sahne * { animation: none !important; } }
@media (max-width: 760px) { .ab-sahne { height: 120px; } }
/* Merkez sayfası telefonda: sayaç gökyüzüne */
@media (max-width: 760px) {
    .sayfa-detay .sayac { top: 168px; bottom: auto; }
}

/* ================= Merkez sayfası: Hakkında / Fotoğraflar / Konum üçlü ızgara ================= */
.bilgi-izgara {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; align-items: start;
}
.bilgi-kart {
    display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px;
    background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    scroll-margin-top: 64px;
}
.bk-baslik { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; letter-spacing: -.01em; }
.bk-baslik .sayi { color: var(--soluk); font-weight: 500; font-size: 14px; }
.bk-ikon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--kar-zemin); flex: none; }
.bk-ikon svg { width: 20px; height: 20px; fill: none; stroke: var(--vurgu); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.bk-metin { font-size: 15px; line-height: 1.65; color: var(--yazi); position: relative; }
.bk-metin p { margin: 0 0 10px; }
.bk-metin.kisaltilmis { max-height: 15.5em; overflow: hidden; }
.bk-metin.kisaltilmis::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4.5em;
    background: linear-gradient(180deg, transparent, var(--kart-duz));
}
.devami {
    align-self: flex-start; border: 0; background: var(--kar-zemin); color: var(--kar-yazi);
    font: inherit; font-size: 14px; font-weight: 700; padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.devami:hover { filter: brightness(.97); }
.bilgi-kart .iletisim { margin: 0; padding-top: 10px; font-size: 14px; }
.kaynaklar { padding-top: 12px; border-top: 1px solid var(--cizgi); }
.kaynaklar h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); }
.kaynaklar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kaynaklar a { font-size: 14px; text-decoration: none; font-weight: 600; }
.kaynaklar a:hover { text-decoration: underline; }

.bk-galeri { grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bk-galeri a { border-radius: 12px; position: relative; }
.bk-galeri a.ilk { grid-column: span 3; aspect-ratio: 16 / 10; }
.bk-galeri a[hidden] { display: none; }
.fazlasi {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(5, 15, 30, .55); color: #fff; font-size: 20px; font-weight: 800;
}
.bk-bos {
    display: grid; place-items: center; gap: 6px; text-align: center; padding: 34px 12px;
    border: 2px dashed var(--cizgi); border-radius: 16px; color: var(--soluk);
}
.bk-bos span { font-size: 28px; }
.bk-bos p { margin: 0; font-size: 14px; }

.bk-konum { display: flex; flex-direction: column; gap: 10px; }
.bk-konum .harita-gomme { height: 210px; border-radius: 14px; border: 1px solid var(--cizgi); }
.bk-konum .konum-bilgi { padding: 0; }
.bk-konum .konum-baglantilar { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.bk-konum .konum-baglantilar a {
    padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none;
    background: var(--kar-zemin); color: var(--kar-yazi);
}
.bk-konum .konum-baglantilar a:hover { filter: brightness(.96); }

/* Yorum formu: ad + e-posta yan yana */
.yorum-form .form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.yorum-form label small { color: var(--soluk); font-weight: 400; }
.yorum-form .form-alt { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.yorum-form .form-alt small { color: var(--soluk); font-size: 12px; max-width: 420px; }
.form-islem { display: flex; align-items: center; gap: 14px; }
.yorum-sayac { font-size: 13px; color: var(--soluk); white-space: nowrap; }
.yorum-sayac.dolu { color: #e5484d; font-weight: 600; }

@media (max-width: 960px) {
    .bilgi-izgara { grid-template-columns: 1fr 1fr; }
    .bilgi-izgara #konum { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .bilgi-izgara { grid-template-columns: 1fr; }
    .yorum-form .form-satir { grid-template-columns: 1fr; }
}

/* ================= Alt düzen: solda mekan bilgileri, sağda yorumlar ================= */
.alt-duzen {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 24px;
    align-items: start; margin-top: 40px;
}
.alt-duzen .bilgi-izgara { grid-template-columns: 1fr; margin-top: 0; }
.alt-duzen .bilgi-izgara #konum { grid-column: auto; }
.alt-duzen .yorumlar { position: sticky; top: 72px; }
.alt-duzen .yorumlar .bolum { margin-top: 0; }
.alt-duzen .yorum-listesi { max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.alt-duzen .bk-galeri a.ilk { aspect-ratio: 16 / 9; }
@media (max-width: 900px) {
    .alt-duzen { grid-template-columns: 1fr; }
    .alt-duzen .yorumlar { position: static; order: 2; }
    .alt-duzen .yorum-listesi { max-height: none; overflow: visible; }
}

/* Yorum daveti */
.yorum-davet {
    display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; padding: 16px 18px; border-radius: 20px;
    background: linear-gradient(135deg, var(--kar-zemin), transparent 80%), var(--kart);
    border: 1px solid color-mix(in srgb, var(--vurgu) 30%, var(--cizgi));
    box-shadow: var(--kart-golge);
}
.yd-ikon {
    flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 24px;
    background: var(--kart-duz); border: 1px solid var(--cizgi);
}
.yorum-davet h3 { margin: 2px 0 4px; font-size: 17px; letter-spacing: -.01em; line-height: 1.3; }
.yorum-davet p { margin: 0 0 10px; color: var(--soluk); font-size: 14px; line-height: 1.5; }
.yd-cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.yd-cipler button {
    padding: 5px 11px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
    background: var(--kart-duz); color: var(--yazi); border: 1px solid var(--cizgi);
    transition: border-color .15s, transform .15s;
}
.yd-cipler button:hover { border-color: var(--vurgu); transform: translateY(-1px); }
.yd-cipler button.eklendi { background: var(--kar-zemin); border-color: var(--vurgu); color: var(--kar-yazi); }
.yorum-yok { padding: 18px; border: 2px dashed var(--cizgi); border-radius: 16px; }

/* ================= Alt düzen v2: %80 bilgi | %20 yorumlar (sağda) ================= */
.alt-duzen {
    width: min(1400px, 100vw - 32px);
    margin-left: 50%; transform: translateX(-50%);
    grid-template-columns: minmax(0, 4fr) minmax(280px, 1fr);
    gap: 22px;
}
/* Bilgi alanı: Hakkında solda boylu boyunca, Fotoğraflar + Konum sağda üst üste */
.alt-duzen .bilgi-izgara {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-auto-flow: dense; align-items: start;
}
.alt-duzen .bilgi-izgara #hakkinda { grid-column: 1; grid-row: span 2; }
.alt-duzen .bilgi-izgara #fotograflar, .alt-duzen .bilgi-izgara #konum { grid-column: 2; }
.alt-duzen .bk-metin.kisaltilmis { max-height: 26em; }
/* Dar yorum sütunu: alanlar alt alta */
.alt-duzen .yorumlar .form-satir { grid-template-columns: 1fr; }
.alt-duzen .yorum-davet { flex-direction: column; gap: 10px; padding: 14px; }
.alt-duzen .yorum-davet h3 { font-size: 16px; }
.alt-duzen .yorum-form .form-alt { flex-direction: column; align-items: stretch; }
.alt-duzen .yorum-form .form-alt button { width: 100%; }
.alt-duzen .yorumlar { max-height: calc(100vh - 90px); overflow-y: auto; scrollbar-width: thin; }
.alt-duzen .yorum-listesi { max-height: none; overflow: visible; }

@media (max-width: 1100px) {
    .alt-duzen .bilgi-izgara { grid-template-columns: 1fr; }
    .alt-duzen .bilgi-izgara #hakkinda, .alt-duzen .bilgi-izgara #fotograflar, .alt-duzen .bilgi-izgara #konum { grid-column: auto; grid-row: auto; }
}
@media (max-width: 900px) {
    .alt-duzen { width: auto; margin-left: 0; transform: none; grid-template-columns: 1fr; }
    .alt-duzen .yorumlar { max-height: none; overflow: visible; }
    .alt-duzen .yorumlar .form-satir { grid-template-columns: 1fr 1fr; }
    .alt-duzen .yorum-davet { flex-direction: row; }
    .alt-duzen .yorum-form .form-alt { flex-direction: row; align-items: center; }
    .alt-duzen .yorum-form .form-alt button { width: auto; }
}
@media (max-width: 640px) { .alt-duzen .yorumlar .form-satir { grid-template-columns: 1fr; } }

/* Açık lisanslı fotoğraf künyesi (Wikimedia Commons) */
.foto-kunye { margin: 8px 0 0; font-size: 12px; line-height: 1.5; opacity: .7; }
.foto-kunye span { display: block; overflow-wrap: anywhere; }
.foto-kunye a { color: inherit; }

/* Alt düzen v3: yorumlar SOLDA (%20), mekan bilgileri sağda (%80) */
.alt-duzen { grid-template-columns: minmax(280px, 1fr) minmax(0, 4fr); }
.alt-duzen .yorumlar { order: -1; }
@media (max-width: 900px) {
    .alt-duzen { grid-template-columns: 1fr; }
    .alt-duzen .yorumlar { order: 2; }
}
/* Telefon/tablet: önce yorumlar, sonra mekan bilgileri */
@media (max-width: 900px) {
    .alt-duzen .yorumlar { order: -1; }
}

/* Alt düzen v4: yorumlar SOLDA %80, mekan bilgileri sağda %20 */
.alt-duzen { grid-template-columns: minmax(0, 4fr) minmax(300px, 1fr); }
.alt-duzen .yorumlar { order: -1; position: static; max-height: none; overflow: visible; }
/* Geniş yorum alanı: ad + e-posta yan yana, davet yatay */
.alt-duzen .yorumlar .form-satir { grid-template-columns: 1fr 1fr; }
.alt-duzen .yorum-davet { flex-direction: row; gap: 14px; padding: 16px 18px; }
.alt-duzen .yorum-davet h3 { font-size: 17px; }
.alt-duzen .yorum-form .form-alt { flex-direction: row; align-items: center; }
.alt-duzen .yorum-form .form-alt button { width: auto; }
/* Dar bilgi sütunu: kartlar alt alta, sayfa kayarken yanda sabit */
.alt-duzen .bilgi-izgara { grid-template-columns: 1fr; position: sticky; top: 72px; }
.alt-duzen .bilgi-izgara #hakkinda, .alt-duzen .bilgi-izgara #fotograflar, .alt-duzen .bilgi-izgara #konum { grid-column: auto; grid-row: auto; }
.alt-duzen .bk-metin.kisaltilmis { max-height: 15.5em; }
.alt-duzen .bk-konum .harita-gomme { height: 180px; }
@media (max-width: 900px) {
    .alt-duzen { grid-template-columns: 1fr; }
    .alt-duzen .bilgi-izgara { position: static; }
}
@media (max-width: 640px) { .alt-duzen .yorumlar .form-satir { grid-template-columns: 1fr; } }
.alt-duzen .bilgi-izgara { position: static; }

/* Alt düzen: sayfanın genel genişliğine sadık (1040px içerik alanı) */
.alt-duzen { width: auto; margin-left: 0; transform: none; grid-template-columns: minmax(0, 4fr) minmax(260px, 1fr); gap: 20px; }

/* ================= Geçmiş ölçümler (sağ sütun) ================= */
.gecmis-sutun { display: flex; flex-direction: column; gap: 16px; position: relative; }
.gecmis-kart {
    display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 22px;
    background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.gk-alt { margin: -6px 0 0; color: var(--soluk); font-size: 12.5px; }
.gk-ozet { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.gk-ozet b { font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--yazi); }
.gk-ozet span { color: var(--soluk); font-size: 14px; }
.gk-ozet em { font-style: normal; font-size: 12.5px; color: var(--soluk); margin-left: 4px; }
.gk-ozet em.artti, .gk-ozet em.azaldi { color: var(--yazi); font-weight: 600; }
.grafik svg { width: 100%; height: auto; display: block; overflow: visible; }
.gk-taban { stroke: var(--cizgi); stroke-width: 1; }
.gk-izgara { stroke: var(--cizgi); stroke-width: 1; stroke-dasharray: 2 3; }
.gk-eksen { fill: var(--soluk); font-size: 11px; font-family: inherit; }
.gk-cubuk { fill: var(--vurgu); transition: opacity .15s; }
.gk-bos { fill: var(--cizgi); }
.gk-hedef { fill: transparent; }
.gk-sutun { cursor: default; }
.grafik:hover .gk-cubuk { opacity: .45; }
.grafik .gk-sutun:hover .gk-cubuk { opacity: 1; }
.gk-sutun:hover .gk-hedef { fill: color-mix(in srgb, var(--vurgu) 8%, transparent); }
.gk-ara { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); }
.gk-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gk-liste li { display: flex; justify-content: space-between; font-size: 13.5px; padding: 5px 0; border-bottom: 1px dashed var(--cizgi); }
.gk-liste li:last-child { border-bottom: 0; }
.gk-liste span { color: var(--soluk); }
.gk-not { margin: 2px 0 0; font-size: 11.5px; color: var(--soluk); }

.hava-gecmis { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.hava-gecmis li {
    display: grid; grid-template-columns: 44px 26px 30px 1fr 30px; align-items: center; gap: 6px;
    padding: 6px 4px; border-radius: 10px; font-size: 13.5px;
}
.hava-gecmis li:hover { background: var(--kar-zemin); }
.hg-gun { font-weight: 600; }
.hg-ikon { width: 26px; height: 26px; }
.hg-min { color: var(--soluk); text-align: right; font-variant-numeric: tabular-nums; }
.hg-max { font-weight: 700; font-variant-numeric: tabular-nums; }
.hg-iz { position: relative; height: 6px; border-radius: 3px; background: var(--cizgi); }
.hg-iz i { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--vurgu); }

.grafik-ipucu {
    position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, calc(-100% - 10px));
    padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
    background: var(--yazi); color: var(--zemin); box-shadow: 0 6px 18px -6px rgba(0,0,0,.35);
}

/* Yerleşim: solda yorumlar, sağda geçmiş; mekan bilgileri altta 3 sütun */
.alt-duzen .yorumlar { order: 0; }
.alt-duzen + .bilgi-izgara { margin-top: 36px; }
@media (max-width: 900px) {
    .gecmis-sutun { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .gecmis-sutun { grid-template-columns: 1fr; }
}

/* ================= Sade sahne: tek ton siluetler, ölçüm öne çıkar ================= */
:root { --siluet: #34506d; }
:root[data-tema="koyu"] { --siluet: #0e1c30; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) { --siluet: #0e1c30; } }
/* Hero'daki figürler: ten/şapka/gözlük detayları da siluete karışsın */
.hero .manzara .kar-tabakasi use, .hero .manzara .telesiyej use { filter: saturate(0) brightness(.55); }
:root[data-tema="koyu"] .hero .manzara .kar-tabakasi use, :root[data-tema="koyu"] .hero .manzara .telesiyej use { filter: saturate(0) brightness(.35); }
.hero .telesiyej { opacity: .75; }
.hero .savrulan { opacity: .6; }
/* Direk yanındaki etiket büyük sayaçla aynı bilgiyi veriyordu */
.hero .kar-etiket { display: none; }

/* Dağlar aşağıda: başlık ve sayaç açık gökyüzünde okunsun */
.hero .dag-uzak, .hero .dag-zirve { transform: translateY(110px); }
.hero .dag-yakin { transform: translateY(55px); }

/* Hakkında / Fotoğraflar / Konum kartları eşit yükseklikte */
.bilgi-izgara { align-items: stretch; }
.bilgi-izgara > .bilgi-kart { height: 100%; }
/* Fotoğraf kartı: galeri kalan yüksekliği doldurur, ilk fotoğraf esner */
#fotograflar .bk-galeri { flex: 1; grid-auto-rows: minmax(70px, auto); grid-template-rows: minmax(200px, 1fr); }
#fotograflar .bk-galeri a.ilk { aspect-ratio: auto; height: 100%; min-height: 200px; }
#fotograflar .bk-bos { flex: 1; }
/* Konum kartı: harita kalan yüksekliği doldurur */
#konum .bk-konum { flex: 1; }
#konum .bk-konum .harita-gomme { flex: 1; min-height: 210px; height: auto; }
@media (max-width: 960px) {
    .bilgi-izgara > .bilgi-kart { height: auto; }
}
.harita-yok {
    flex: 1; min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    text-align: center; padding: 16px; border-radius: 14px; text-decoration: none; color: var(--yazi);
    border: 2px dashed var(--cizgi);
    background:
        repeating-linear-gradient(45deg, transparent 0 14px, color-mix(in srgb, var(--vurgu) 5%, transparent) 14px 15px),
        var(--kar-zemin);
}
.harita-yok span { font-size: 30px; }
.harita-yok b { font-size: 14px; }
.harita-yok small { color: var(--vurgu); font-size: 12.5px; font-weight: 600; }
.harita-yok:hover { border-color: var(--vurgu); }
/* Yorumlar formun üstünde: liste ile davet arasında boşluk */
.yorumlar .yorum-listesi, .yorumlar .yorum-yok { margin: 0 0 18px; }

/* ================= Üst menü ================= */
.ust-menu { display: flex; gap: 4px; margin-left: auto; margin-right: 4px; }
.ust-menu a {
    padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none;
    color: var(--yazi); transition: background .15s;
}
.ust-menu a:hover { background: var(--kar-zemin); }
.ust-menu a.aktif { background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge); }
.ust .slogan { flex: 0 1 auto; }
/* Gökyüzünün üstündeki üst çubukta beyaz menü */
:is(.sayfa-detay, .sayfa-ana) .ust-menu a { color: #fff; }
:is(.sayfa-detay, .sayfa-ana) .ust-menu a:hover { background: rgba(255,255,255,.14); }
:is(.sayfa-detay, .sayfa-ana) .ust-menu a.aktif { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); box-shadow: none; }
@media (max-width: 860px) { .ust .slogan { display: none; } }
@media (max-width: 520px) {
    .ust-menu a { padding: 6px 10px; font-size: 13px; }
}

/* ================= Santim Rehberi ================= */
.sayfa-rehber .hero { min-height: 470px; }
.sayfa-rehber .hero-ust { padding-top: 96px; }
.hero-rehber .manzara { height: 58%; }
.hero-rehber h1 { font-size: clamp(38px, 6vw, 64px); }

/* Seviye ramp'ı: tek renk tonu, açıktan koyuya (büyüklük) */
.sayfa-rehber { --sv0: #c9a27a; --sv1: #9fb8cc; --sv2: #7fb7e6; --sv3: #4a9be0; --sv4: #1f77c9; --sv5: #0b4f95; }

.cetvel {
    position: relative; z-index: 5; margin: -54px auto 0; max-width: 980px;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 8px; border-radius: 22px;
    background: var(--kart); border: 1px solid var(--cizgi);
    box-shadow: 0 20px 50px -18px rgba(5, 25, 50, .45), var(--kart-golge);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
:root[data-tema="koyu"] .cetvel { background: rgba(14, 30, 52, .82); }
.cetvel a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
    padding: 10px 6px; border-radius: 14px; text-decoration: none; color: var(--yazi);
    border-bottom: 3px solid var(--renk); transition: background .15s;
}
.cetvel a:nth-child(1) { --renk: var(--sv0); } .cetvel a:nth-child(2) { --renk: var(--sv1); }
.cetvel a:nth-child(3) { --renk: var(--sv2); } .cetvel a:nth-child(4) { --renk: var(--sv3); }
.cetvel a:nth-child(5) { --renk: var(--sv4); } .cetvel a:nth-child(6) { --renk: var(--sv5); }
.cetvel a:hover { background: var(--kar-zemin); }
.cetvel-ikon { font-size: 22px; }
.cetvel b { font-size: 14px; }
.cetvel small { font-size: 12px; color: var(--soluk); }
.cetvel em { font-style: normal; font-size: 11px; font-weight: 700; color: var(--kar-yazi); background: var(--kar-zemin); padding: 1px 7px; border-radius: 999px; margin-top: 2px; }

.seviyeler { display: grid; gap: 16px; margin-top: 34px; }
.seviye-kart {
    display: grid; grid-template-columns: 96px 1fr; gap: 22px; padding: 22px; border-radius: 24px;
    background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    scroll-margin-top: 24px; position: relative; overflow: hidden;
}
.seviye-kart::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--renk); }
.seviye-kart:nth-child(1) { --renk: var(--sv0); } .seviye-kart:nth-child(2) { --renk: var(--sv1); }
.seviye-kart:nth-child(3) { --renk: var(--sv2); } .seviye-kart:nth-child(4) { --renk: var(--sv3); }
.seviye-kart:nth-child(5) { --renk: var(--sv4); } .seviye-kart:nth-child(6) { --renk: var(--sv5); }
.seviye-kart:target { border-color: var(--renk); }

/* Kar göstergesi: ölçüm direği gibi bir tüp, kar seviyeye göre dolar */
.sv-gosterge { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sv-tup {
    position: relative; width: 44px; height: 150px; border-radius: 12px; overflow: hidden;
    background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--cizgi) 70%, transparent) 0 1px, transparent 1px 15px), var(--kar-zemin);
    border: 1px solid var(--cizgi);
}
.sv-toprak { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: #6b4a35; }
.sv-kar {
    position: absolute; left: 0; right: 0; bottom: 14px; height: 0;
    background: linear-gradient(180deg, #ffffff, #dbe9f6); border-top: 3px solid var(--renk);
    transition: height 1.2s cubic-bezier(.2, .75, .2, 1);
}
.seviye-kart.gorundu .sv-kar { height: calc((100% - 14px) * var(--dolu) / 100); }
.sv-ikon { font-size: 28px; }

.sv-aralik {
    display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800;
    background: color-mix(in srgb, var(--renk) 22%, transparent); color: var(--yazi); border: 1px solid color-mix(in srgb, var(--renk) 55%, transparent);
}
.sv-icerik h2 { margin: 8px 0 10px; font-size: 24px; letter-spacing: -.01em; }
.sv-alarm {
    margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: 15.5px;
    background: var(--hata-zemin); color: var(--hata-yazi); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
}
.sv-alarm span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.sv-alarm span::before { content: "⚠ "; }
.sv-durum { margin: 0; font-size: 16px; line-height: 1.65; }
.sv-simdi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--cizgi); }
.sv-simdi-etiket { font-size: 12px; font-weight: 700; color: var(--soluk); margin-right: 4px; }
.sv-simdi-etiket.bos { font-weight: 500; }
.sv-simdi a {
    padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; text-decoration: none;
    background: var(--kar-zemin); color: var(--yazi); border: 1px solid var(--cizgi);
}
.sv-simdi a b { color: var(--kar-yazi); }
.sv-simdi a:hover { border-color: var(--vurgu); }
.rehber-not { margin: 26px 0 0; text-align: center; color: var(--soluk); font-size: 14px; }

@media (max-width: 860px) {
    .cetvel { grid-template-columns: repeat(3, 1fr); margin-top: -40px; }
}
@media (max-width: 560px) {
    .seviye-kart { grid-template-columns: 1fr; gap: 14px; }
    .sv-gosterge { flex-direction: row; justify-content: flex-start; }
    .sv-tup { width: 100%; height: 34px; }
    .sv-tup { background: var(--kar-zemin); }
    .sv-toprak { top: 0; bottom: 0; left: 0; right: auto; width: 10px; height: auto; }
    .sv-kar { top: 0; bottom: 0; left: 10px; right: auto; height: auto !important; width: 0; border-top: 0; border-right: 3px solid var(--renk); transition: width 1.2s cubic-bezier(.2,.75,.2,1); }
    .seviye-kart.gorundu .sv-kar { width: calc((100% - 10px) * var(--dolu) / 100); }
    .sv-gosterge { flex-direction: row-reverse; }
}

/* ================= Merkez sayfası: dinamik santim bildirisi ================= */
.bildiri {
    --sv0: #c9a27a; --sv1: #9fb8cc; --sv2: #7fb7e6; --sv3: #4a9be0; --sv4: #1f77c9; --sv5: #0b4f95;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px;
    margin-top: 16px; padding: 16px 18px; border-radius: 20px; text-decoration: none; color: var(--yazi);
    background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
    position: relative; overflow: hidden; transition: transform .15s, border-color .15s;
}
.bildiri::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--renk); }
.bildiri[style*="--sira: 0"] { --renk: var(--sv0); } .bildiri[style*="--sira: 1"] { --renk: var(--sv1); }
.bildiri[style*="--sira: 2"] { --renk: var(--sv2); } .bildiri[style*="--sira: 3"] { --renk: var(--sv3); }
.bildiri[style*="--sira: 4"] { --renk: var(--sv4); } .bildiri[style*="--sira: 5"] { --renk: var(--sv5); }
.bildiri:hover { transform: translateY(-2px); border-color: var(--renk); }
.bildiri-ikon { font-size: 34px; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: color-mix(in srgb, var(--renk) 22%, transparent); }
.bildiri-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bildiri-ust { font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); font-weight: 700; }
.bildiri-ust b { color: var(--kar-yazi); }
.bildiri strong { font-size: 17px; color: var(--hata-yazi); }
.bildiri-durum { font-size: 14.5px; line-height: 1.55; color: var(--yazi); }
.bildiri-git { font-size: 13px; font-weight: 700; color: var(--vurgu); white-space: nowrap; }
@media (max-width: 640px) {
    .bildiri { grid-template-columns: auto 1fr; }
    .bildiri-git { grid-column: 1 / -1; }
}
.hero-rehber .manzara { height: 50%; }

/* ================= Santim Rehberi — sade ================= */
.olcek {
    position: relative; z-index: 5; margin: -40px auto 0; max-width: 980px;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 16px 18px; border-radius: 18px;
    background: var(--kart-duz); border: 1px solid var(--cizgi);
}
.olcek a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--soluk); padding: 0 4px; }
.olcek-cizgi { height: 3px; border-radius: 2px; background: var(--cizgi); margin-bottom: 8px; transition: background .15s; }
.olcek a.dolu .olcek-cizgi { background: var(--vurgu); }
.olcek a:hover .olcek-cizgi { background: var(--yazi); }
.olcek b { font-size: 15px; color: var(--yazi); font-variant-numeric: tabular-nums; }
.olcek small { font-size: 12px; }

.seviyeler.sade { gap: 0; margin-top: 30px; }
.seviye {
    display: grid; grid-template-columns: 170px 1fr; gap: 28px; padding: 30px 4px;
    border-top: 1px solid var(--cizgi); scroll-margin-top: 24px;
}
.seviye:last-child { border-bottom: 1px solid var(--cizgi); }
.sv-sol { display: flex; flex-direction: column; }
.sv-sayi { font-size: 44px; font-weight: 300; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sv-birim { font-size: 13px; color: var(--soluk); margin-top: 4px; }
.sv-cubuk { margin-top: 14px; height: 3px; border-radius: 2px; background: var(--cizgi); overflow: hidden; max-width: 140px; }
.sv-cubuk i { display: block; height: 100%; width: 0; background: var(--vurgu); transition: width 1.2s cubic-bezier(.2, .75, .2, 1); }
.seviye.gorundu .sv-cubuk i { width: calc(var(--dolu) * 1%); }
.sv-sag h2 { margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.sv-sag .sv-alarm { margin: 0 0 10px; padding: 0; background: none; font-size: 15px; font-weight: 600; color: var(--vurgu); display: block; }
.sv-sag .sv-durum { margin: 0; font-size: 16px; line-height: 1.7; color: var(--yazi); max-width: 68ch; }
.sv-sag .sv-simdi { margin: 14px 0 0; padding: 0; border: 0; font-size: 13.5px; color: var(--soluk); display: block; }
.sv-sag .sv-simdi span { margin-right: 6px; }
.sv-sag .sv-simdi a { padding: 0; border: 0; background: none; color: var(--yazi); text-decoration: underline; text-decoration-color: var(--cizgi); text-underline-offset: 3px; font-weight: 500; }
.sv-sag .sv-simdi a:hover { text-decoration-color: var(--vurgu); }
.sayfa-rehber .ust-etiket { font-weight: 500; }

/* Merkez sayfasındaki bildiri — sade */
.bildiri { grid-template-columns: 1fr auto; box-shadow: none; background: transparent; padding: 14px 4px 14px 16px; border-radius: 0; border: 0; border-left: 2px solid var(--vurgu); }
.bildiri::before { display: none; }
.bildiri:hover { transform: none; }
.bildiri strong { color: var(--yazi); font-size: 16px; }
.bildiri-ust b { color: var(--vurgu); }

@media (max-width: 860px) {
    .olcek { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
}
@media (max-width: 560px) {
    .seviye { grid-template-columns: 1fr; gap: 12px; padding: 24px 2px; }
    .sv-sol { flex-direction: row; align-items: baseline; gap: 6px; flex-wrap: wrap; }
    .sv-sayi { font-size: 34px; }
    .sv-cubuk { flex-basis: 100%; margin-top: 8px; }
    .bildiri { grid-template-columns: 1fr; }
}
.hero-rehber .manzara { height: 44%; }

/* ================= KacSantim (hakkımızda) — sade ================= */
.sayfa-hakkimizda .hero { min-height: 430px; }
.hakkimizda { max-width: 760px; margin: 48px auto 0; }
.hk-giris { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.55; letter-spacing: -.01em; margin: 0 0 22px; }
.hk-giris b { color: var(--vurgu); }
.hk-metin { font-size: 17px; line-height: 1.75; color: var(--yazi); margin: 0 0 22px; }
.hk-canli { margin: 0 0 8px; padding: 14px 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); font-size: 14.5px; color: var(--soluk); }
.hk-canli b { color: var(--yazi); }
.hk-baslik { margin: 48px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--soluk); font-weight: 700; }
.hk-nedenler { list-style: none; margin: 0; padding: 0; }
.hk-nedenler li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--cizgi); }
.hk-no { font-size: 34px; font-weight: 300; line-height: 1; color: var(--vurgu); font-variant-numeric: tabular-nums; }
.hk-nedenler h3 { margin: 2px 0 8px; font-size: 20px; letter-spacing: -.01em; }
.hk-nedenler p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--yazi); }
.hk-kapanis {
    margin: 44px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--vurgu);
    font-size: clamp(19px, 2.2vw, 23px); line-height: 1.55; font-weight: 500; letter-spacing: -.01em;
}
.hk-baglantilar { display: flex; gap: 22px; flex-wrap: wrap; margin: 30px 0 0; }
.hk-baglantilar a { font-weight: 600; text-decoration: none; }
.hk-baglantilar a:hover { text-decoration: underline; }
@media (max-width: 560px) {
    .hk-nedenler li { grid-template-columns: 1fr; gap: 6px; }
    .hk-no { font-size: 26px; }
}
@media (max-width: 640px) {
    .ust-menu { gap: 0; }
    .ust-menu a { padding: 6px 8px; font-size: 12.5px; }
}
.sayfa-hakkimizda .hero { min-height: 540px; }
.sayfa-hakkimizda .hero-rehber .manzara { height: 40%; }
/* Rehber + KacSantim: sahne kesilmesin (telesiyej tepesi dahil) */
.hero-rehber .manzara, .sayfa-hakkimizda .hero-rehber .manzara { height: 340px; }
.sayfa-rehber .hero { min-height: 600px; }
.sayfa-hakkimizda .hero { min-height: 630px; }
@media (max-width: 760px) {
    .hero-rehber .manzara, .sayfa-hakkimizda .hero-rehber .manzara { height: 260px; }
    .sayfa-rehber .hero, .sayfa-hakkimizda .hero { min-height: 520px; }
}

/* ================= KacSantim: düz pistte ölçüm yapan adam ================= */
.sayfa-hakkimizda .hero.hero-olcum { min-height: 560px; }
.hero-olcum .olcum-sahnesi { top: auto; bottom: 0; height: 300px; }
.olcum-sahnesi .kar-ust { stroke: #fff; stroke-width: 2; }
.olcumcu .oc-bacak { transform-box: fill-box; transform-origin: 50% 0; }
.olcumcu.yuruyor .b1 { animation: adim .45s ease-in-out infinite alternate; }
.olcumcu.yuruyor .b2 { animation: adim .45s ease-in-out infinite alternate-reverse; }
@keyframes adim { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.olcumcu .oc-govde { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .4s; }
.olcumcu.yuruyor .oc-govde { animation: sallanma .45s ease-in-out infinite alternate; }
@keyframes sallanma { from { transform: translateY(0); } to { transform: translateY(-1px); } }
.olcumcu.egiliyor .oc-govde { transform: rotate(6deg); }

.olcum-balon { opacity: 0; transition: opacity .3s; pointer-events: none; }
.olcum-balon.gorunur { opacity: 1; }
.olcum-balon rect, .olcum-balon path { fill: var(--kart-duz); }
.olcum-balon rect { stroke: var(--cizgi); }
.ob-cm { font: 800 19px system-ui, -apple-system, sans-serif; fill: var(--yazi); }
.ob-ad { font: 600 10.5px system-ui, -apple-system, sans-serif; fill: var(--soluk); }

.olcum-izleri .iz { opacity: 0; transition: opacity .5s; }
.olcum-izleri .iz.gorunur { opacity: 1; }
.iz line { stroke: #34506d; stroke-width: 1.4; }
.iz path { fill: #e5484d; }
.iz text { font: 700 11px system-ui, -apple-system, sans-serif; fill: #34506d; }
:root[data-tema="koyu"] .iz line, :root[data-tema="koyu"] .iz text { stroke: none; }
:root[data-tema="koyu"] .iz line { stroke: #9fb8cc; }
:root[data-tema="koyu"] .iz text { fill: #c9d9ea; }
@media (max-width: 760px) {
    .sayfa-hakkimizda .hero.hero-olcum { min-height: 500px; }
    .hero-olcum .olcum-sahnesi { height: 240px; }
}
.olcum-sahnesi .dag-uzak { transform: none; opacity: .45; }
.olcum-izleri { transition: opacity .8s; }
.olcum-izleri.soluk { opacity: 0; }
.olcum-izleri .iz { opacity: 1; }
.olcum-balon { transition: opacity .2s; }

/* ================= Kar Çaresizlik Hatırlatıcısı Modal & Buton ================= */
.kar-alarmi-tetikleyici {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 990;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 11px 18px;
    border-radius: 9999px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s ease, filter .2s ease, bottom .3s ease;
}
.kar-alarmi-tetikleyici:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 12px 28px rgba(2, 132, 199, 0.45);
    filter: brightness(1.06);
}
.kar-alarmi-tetikleyici:active {
    transform: translateY(0) scale(0.99);
}

/* Çerez bildirimi ekrandayken buton yukarı kaysın */
#cerez-banner:not([hidden]) ~ .kar-alarmi-tetikleyici {
    bottom: 120px;
}

.kar-alarmi-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.kar-alarmi-modal[hidden] {
    display: none !important;
}

.kam-arkaplan {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: kamOpak .25s ease;
}
@keyframes kamOpak {
    from { opacity: 0; }
    to { opacity: 1; }
}

.kam-kutu {
    position: relative;
    max-width: 520px;
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 20px;
    padding: 28px 26px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.38);
    animation: kamKutuAcilis .3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}
@keyframes kamKutuAcilis {
    from { opacity: 0; transform: scale(0.92) translateY(14px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.kam-kapat {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--cizgi);
    background: var(--zemin);
    color: var(--soluk);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all .15s ease;
}
.kam-kapat:hover {
    color: var(--yazi);
    background: var(--kart);
    border-color: var(--vurgu);
    transform: scale(1.08);
}

.kam-ust {
    margin-bottom: 20px;
}
.kam-ust h2 {
    font-size: 17.5px;
    font-weight: 800;
    color: var(--yazi);
    margin: 0 0 10px;
    line-height: 1.35;
    padding-right: 32px;
}
.kam-ust p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--soluk);
    margin: 0;
    background: rgba(2, 132, 199, 0.08);
    border-left: 3px solid var(--vurgu);
    padding: 10px 14px;
    border-radius: 0 8px 8px 0;
}

.kam-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.kam-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--yazi);
}
.kam-form input,
.kam-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border-radius: 10px;
    border: 1px solid var(--cizgi);
    background: var(--zemin);
    color: var(--yazi);
    font: inherit;
    font-size: 13.5px;
    transition: border-color .15s, box-shadow .15s;
}
.kam-form input::placeholder {
    color: var(--soluk);
    opacity: 0.8;
    font-size: 12px;
}
.kam-form input:focus,
.kam-form select:focus {
    outline: none;
    border-color: var(--vurgu);
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
}

.alarm-submit-btn {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    padding: 13px 18px;
    cursor: pointer;
    transition: all .2s ease;
    margin-top: 6px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.35);
    text-align: center;
    display: block;
    width: 100%;
}
.alarm-submit-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
}
.alarm-submit-btn:active {
    transform: translateY(0);
}
.alarm-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.kam-bildirim {
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
}
.kam-bildirim.ok {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.kam-bildirim.hata {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
:root[data-tema="koyu"] .kam-bildirim.ok {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.35);
}
:root[data-tema="koyu"] .kam-bildirim.hata {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.35);
}

@media (max-width: 520px) {
    .kar-alarmi-tetikleyici {
        bottom: 16px;
        right: 16px;
        padding: 9px 14px;
        font-size: 12.5px;
    }
    #cerez-banner:not([hidden]) ~ .kar-alarmi-tetikleyici {
        bottom: 135px;
    }
    .kam-kutu {
        padding: 22px 18px;
        border-radius: 16px;
    }
    .kam-ust h2 {
        font-size: 16px;
    }
}

/* ================= Yasal Sayfalar (Yasal Uyarı, Gizlilik, KVKK) ================= */
.sayfa-yasal .hero-yasal {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-yasal .hero-ust {
    max-width: 820px;
    text-align: center;
    margin: 0 auto;
    padding: 30px 20px;
}
.hero-yasal h1 {
    font-size: clamp(26px, 3.5vw, 38px);
    margin: 8px 0 0;
    line-height: 1.25;
}

.yasal-sayfa {
    max-width: 820px;
    margin: 36px auto 60px;
    padding: 0 20px;
    box-sizing: border-box;
}

.yasal-giris-kart {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 18px;
    padding: 24px 26px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
.yasal-giris-kart p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--yazi);
}
.yasal-giris-kart strong {
    color: var(--vurgu);
}

.yasal-bolum {
    background: var(--kart);
    border: 1px solid var(--cizgi);
    border-radius: 18px;
    padding: 24px 26px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}
.yasal-bolum h2 {
    font-size: 17.5px;
    font-weight: 800;
    color: var(--yazi);
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cizgi);
    letter-spacing: -0.01em;
}
.yasal-bolum p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--yazi);
    margin: 0 0 14px;
}
.yasal-bolum p:last-child {
    margin-bottom: 0;
}

.yasal-liste {
    margin: 10px 0 16px 20px;
    padding: 0;
    list-style-type: disc;
    color: var(--yazi);
}
.yasal-liste li {
    font-size: 14.5px;
    line-height: 1.7;
    margin-bottom: 8px;
    color: var(--yazi);
}

.yasal-vurgulu-kutu {
    background: rgba(2, 132, 199, 0.08);
    border-left: 3px solid var(--vurgu);
    padding: 12px 16px;
    border-radius: 0 10px 10px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--yazi);
    margin: 14px 0 0;
    line-height: 1.6;
}

.yasal-cerez-tetikleyici {
    background: none;
    border: 0;
    padding: 0;
    color: var(--vurgu);
    font: inherit;
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}
.yasal-cerez-tetikleyici:hover {
    filter: brightness(1.15);
}

.yasal-alt-bilgi {
    text-align: center;
    font-size: 13px;
    color: var(--soluk);
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px dashed var(--cizgi);
}
.yasal-alt-bilgi a {
    color: var(--vurgu);
    text-decoration: none;
    font-weight: 600;
}
.yasal-alt-bilgi a:hover {
    text-decoration: underline;
}

.ab-yasal-linkler {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13.5px;
}
.ab-yasal-linkler a {
    color: #c9d9ea;
    text-decoration: none;
    font-weight: 600;
    transition: color .15s ease;
}
.ab-yasal-linkler a:hover {
    color: #ffffff;
    text-decoration: underline;
}
.ab-ayrac {
    color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 600px) {
    .yasal-sayfa {
        margin: 24px auto 40px;
        padding: 0 14px;
    }
    .yasal-giris-kart,
    .yasal-bolum {
        padding: 18px 16px;
        border-radius: 14px;
    }
    .yasal-bolum h2 {
        font-size: 16px;
    }
    .ab-yasal-linkler {
        gap: 8px;
        font-size: 12.5px;
    }
}



/* ================= Ana sayfa v3: sade arama çubuğu + liste görünümü ================= */
.gorunmez {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Arama çubuğu: tek satır, içerikle aynı genişlik */
.arama-cubuk {
    position: relative; z-index: 6; margin: -36px 0 0;
    display: flex; align-items: center; gap: 0; height: 56px; padding: 6px;
    border-radius: 16px; background: var(--kart); border: 1px solid var(--cizgi);
    box-shadow: 0 12px 32px -18px rgba(5, 25, 50, .35);
}
:root[data-tema="koyu"] .arama-cubuk { background: #0e1e34; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .arama-cubuk { background: #0e1e34; } }
.ac-ara { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; }
.ac-ikon {
    position: absolute; z-index: 1; left: 12px; width: 18px; height: 18px; pointer-events: none;
    fill: none; stroke: var(--soluk); stroke-width: 2.2; stroke-linecap: round;
}
.arama-cubuk #ara {
    width: 100%; height: 100%; padding: 0 12px 0 40px; border: 0; outline: 0; border-radius: 10px;
    background: transparent; color: var(--yazi); font: inherit; font-size: 15px;
    box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.arama-cubuk #ara::placeholder { color: var(--soluk); }
.arama-cubuk #ara:focus { background: var(--kar-zemin); }
.ac-secim { position: relative; height: 100%; display: flex; align-items: center; border-left: 1px solid var(--cizgi); }
.ac-secim::after {
    content: ""; position: absolute; right: 14px; top: 50%; width: 6px; height: 6px; margin-top: -5px; pointer-events: none;
    border-right: 1.6px solid var(--soluk); border-bottom: 1.6px solid var(--soluk); transform: rotate(45deg);
}
.ac-secim select {
    appearance: none; -webkit-appearance: none; height: 100%; padding: 0 34px 0 16px; border: 0; outline: 0;
    background: transparent; color: var(--yazi); font: inherit; font-size: 14px; cursor: pointer; border-radius: 10px;
}
.ac-secim select:hover, .ac-secim select:focus-visible { background: var(--kar-zemin); }
.ac-secim select option { color: #0f2236; }
.ac-dugme {
    height: 100%; margin-left: 6px; padding: 0 22px; border: 0; border-radius: 11px; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 700; color: var(--zemin); background: var(--vurgu); transition: filter .15s;
}
.ac-dugme:hover { filter: brightness(1.1); }
.arama-cubuk .oneriler { top: calc(100% + 12px); left: -6px; right: auto; width: min(560px, calc(100vw - 32px)); }
@media (max-width: 720px) {
    .arama-cubuk { flex-wrap: wrap; height: auto; margin-top: -28px; }
    .ac-ara { flex: 1 0 100%; height: 44px; border-bottom: 1px solid var(--cizgi); }
    .ac-secim { flex: 1; height: 44px; border-left: 0; }
    .ac-secim + .ac-secim { border-left: 1px solid var(--cizgi); }
    .ac-secim select { width: 100%; }
    .ac-dugme { height: 38px; }
}

/* Tüm merkezler: liste */
.m-liste {
    border-radius: 18px; overflow: hidden;
    background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
}
.ml-baslik, .ml-satir {
    display: grid; align-items: center; gap: 16px;
    grid-template-columns: 64px minmax(0, 1fr) 104px 300px 20px;
    padding: 0 18px;
}
.ml-baslik {
    height: 38px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--soluk); border-bottom: 1px solid var(--cizgi);
}
.ml-satir {
    min-height: 72px; color: var(--yazi); text-decoration: none;
    border-bottom: 1px solid var(--cizgi); transition: background .12s;
}
#merkez-izgara > .ml-satir:last-child { border-bottom: 0; }
.ml-satir[hidden] { display: none; }
.ml-satir:hover { background: color-mix(in srgb, var(--vurgu) 5%, transparent); }
.ml-satir:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }

.ml-kar {
    width: 56px; height: 48px; border-radius: 12px; display: flex; align-items: baseline; justify-content: center; gap: 2px;
    padding-top: 10px; background: var(--kar-zemin); color: var(--kar-yazi);
}
.ml-kar b { font-size: 22px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ml-kar small { font-size: 11px; font-weight: 600; }
.ml-kar.bos { align-items: center; padding: 0; background: transparent; border: 1px dashed var(--cizgi); color: var(--soluk); text-align: center; }
.ml-kar.bos small { font-size: 10px; font-weight: 500; line-height: 1.2; }

.ml-ad { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ml-ad b { font-size: 16px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-ad small { font-size: 12.5px; color: var(--soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-yagis {
    align-self: flex-start; margin-top: 3px; font-style: normal; font-size: 11px; font-weight: 600;
    color: var(--kar-yazi); padding: 1px 8px; border-radius: 999px; background: var(--kar-zemin);
}

.ml-bugun { display: flex; align-items: center; gap: 8px; }
.ml-ikon { width: 34px; height: 34px; flex: none; }
.ml-bugun > span { display: flex; flex-direction: column; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ml-bugun b { font-size: 15px; }
.ml-bugun small { font-size: 12px; color: var(--soluk); }

.ml-tahmin { display: grid; grid-template-columns: repeat(5, 1fr); }
.ml-tahmin > span { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.ml-tahmin small { font-size: 11px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.ml-gun-ikon { width: 22px; height: 22px; }

.ml-ok svg { width: 18px; height: 18px; fill: none; stroke: var(--soluk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s, stroke .15s; }
.ml-satir:hover .ml-ok svg { transform: translateX(3px); stroke: var(--vurgu); }

@media (max-width: 900px) {
    .ml-baslik, .ml-satir { grid-template-columns: 64px minmax(0, 1fr) 96px 20px; }
    .ml-tahmin, .ml-tahmin-b { display: none; }
}
@media (max-width: 520px) {
    .ml-baslik { display: none; }
    .ml-baslik, .ml-satir { grid-template-columns: 52px minmax(0, 1fr) auto 14px; gap: 12px; padding: 0 12px; }
    .ml-kar { width: 50px; height: 44px; padding-top: 9px; }
    .ml-kar b { font-size: 19px; }
    .ml-ikon { width: 28px; height: 28px; }
}

/* ================= Merkez sayfası: kar kartı günlük liste + bağlantılar ================= */
.gk-baslik-link { display: inline-flex; align-items: center; gap: inherit; color: inherit; text-decoration: none; }
.gk-baslik-link:hover { color: var(--vurgu); }
a.gk-sutun { cursor: pointer; }
.gk-gunler li { padding: 0; }
.gk-gunler a {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 4px; margin: 0 -4px;
    color: var(--yazi); text-decoration: none; border-radius: 6px;
}
.gk-gunler a:hover { background: var(--kar-zemin); }
.gk-gunler span { flex: 1; color: var(--soluk); }
.gk-gunler em { font-style: normal; font-size: 12px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.gk-gunler em.artti { color: var(--kar-yazi); font-weight: 600; }
.gk-gunler b { font-variant-numeric: tabular-nums; }
.gk-tumu { font-size: 13px; font-weight: 600; color: var(--vurgu); text-decoration: none; }
.gk-tumu:hover { text-decoration: underline; }

/* ================= Kar geçmişi sayfası ================= */
.sayfa-gecmis main, .sayfa-gecmis .ust { max-width: 1040px; }
.kg-ust { margin: 4px 0 20px; }
.kg-ust h1 { font-size: clamp(26px, 4vw, 36px); letter-spacing: -.02em; }
.kg-ust h1 span { color: var(--soluk); font-weight: 600; }
.kg-ust p { margin: 6px 0 14px; color: var(--soluk); max-width: 620px; }
.kg-donem { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--kart); border: 1px solid var(--cizgi); }
.kg-donem a { padding: 6px 14px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--soluk); text-decoration: none; }
.kg-donem a:hover { color: var(--yazi); }
.kg-donem a.aktif { background: var(--vurgu); color: var(--zemin); }
.kg-bos { padding: 28px; border-radius: 18px; text-align: center; color: var(--soluk); background: var(--kart); border: 1px dashed var(--cizgi); }

.kg-ozet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.kg-ozet div {
    display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px;
    background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
}
.kg-ozet small { font-size: 12px; color: var(--soluk); }
.kg-ozet b { font-size: 24px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kg-ozet em { font-style: normal; font-size: 12px; color: var(--soluk); }

.kg-grafik {
    padding: 18px 18px 12px; border-radius: 18px; margin-bottom: 14px;
    background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
}
.kg-grafik .gk-eksen { font-size: 12px; }
.kg-dusuk { fill: color-mix(in srgb, var(--zemin) 45%, transparent); pointer-events: none; }
.kg-aciklama { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; font-size: 12px; color: var(--soluk); }
.kg-aciklama i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.kg-aciklama i:first-child { margin-left: 0; }
.kg-k1 { background: var(--vurgu); }
.kg-k2 { background: color-mix(in srgb, var(--vurgu) 50%, var(--zemin)); }

.kg-gunler {
    border-radius: 18px; overflow: hidden;
    background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
}
.kg-satir {
    display: grid; align-items: center; gap: 12px;
    grid-template-columns: minmax(110px, 1.2fr) minmax(120px, 1.2fr) 1fr 1fr 1fr 20px;
    padding: 0 18px; min-height: 58px;
}
.kg-baslik {
    min-height: 38px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk);
    border-bottom: 1px solid var(--cizgi);
}
.kg-gun { border-bottom: 1px solid var(--cizgi); scroll-margin-top: 80px; transition: background .4s; }
.kg-gun:last-child { border-bottom: 0; }
.kg-gun summary { list-style: none; cursor: pointer; }
.kg-gun summary::-webkit-details-marker { display: none; }
.kg-gun summary:hover, .kg-gun[open] summary { background: color-mix(in srgb, var(--vurgu) 5%, transparent); }
.kg-gun summary:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }
.kg-gun.vurgulu { background: var(--kar-zemin); }
.kg-tarih { display: flex; flex-direction: column; line-height: 1.2; }
.kg-tarih small, .kg-hava small { font-size: 12px; color: var(--soluk); }
.kg-hava { display: flex; align-items: center; gap: 8px; }
.kg-ikon { width: 28px; height: 28px; }
.kg-deger { font-size: 14px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.kg-deger b { font-size: 18px; color: var(--yazi); }
.kg-deger.soluk { font-size: 14px; }
.kg-fark { font-size: 13px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.kg-fark.artti { color: var(--kar-yazi); font-weight: 600; }
.kg-ac svg { width: 18px; height: 18px; fill: none; stroke: var(--soluk); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.kg-gun[open] .kg-ac svg { transform: rotate(180deg); }
.kg-detay { padding: 4px 18px 18px; }
.kg-detay p { margin: 6px 0 10px; font-size: 13px; color: var(--soluk); }
.kg-saatler {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px;
}
.kg-saatler li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 6px;
    padding: 6px 10px; border-radius: 8px; background: var(--zemin); font-size: 13px; font-variant-numeric: tabular-nums;
}
.kg-saatler time { color: var(--soluk); }
.kg-not { margin-top: 12px; }

@media (max-width: 720px) {
    .kg-ozet { grid-template-columns: 1fr 1fr; }
    .kg-baslik { display: none; }
    .kg-satir { grid-template-columns: minmax(0, 1fr) auto auto 18px; padding: 8px 14px; }
    .kg-hava small, .kg-deger.soluk { display: none; }
    .kg-hava { order: 3; }
}

/* Koyu temada --kart neredeyse saydam: çerez bildirimi arkasındaki içeriği göstermesin */
:root[data-tema="koyu"] .cerez-kutu { background: #0e1e34; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .cerez-kutu { background: #0e1e34; } }

/* ================= İllerde kar sayfası (/illerde-kar) ================= */
.sayfa-iller main, .sayfa-iller .ust { max-width: 1040px; }
.il-ust p a { color: var(--vurgu); }
.il-arama { margin: 0 0 4px; }
.il-liste .ml-baslik, .il-satir { grid-template-columns: 64px minmax(0, 1fr) 120px 300px; }
.il-satir { cursor: default; }
.il-satir:hover { background: transparent; }
.il-tahmin { grid-template-columns: repeat(4, 1fr); }
.il-tahmin i.ml-gun-ikon { display: block; }
.il-tahmin small.il-kar-var { color: var(--kar-yazi); font-weight: 700; }
@media (max-width: 900px) {
    .il-liste .ml-baslik, .il-satir { grid-template-columns: 64px minmax(0, 1fr) 110px; }
}
@media (max-width: 520px) {
    .il-liste .ml-baslik, .il-satir { grid-template-columns: 52px minmax(0, 1fr) auto; }
}

/* İl listesi satırları artık detay sayfasına bağlantı */
.il-satir { cursor: pointer; }
.il-satir:hover { background: color-mix(in srgb, var(--vurgu) 5%, transparent); }
.il-satir:hover .ml-ad b { color: var(--vurgu); }

/* ================= İl detay sayfası (/illerde-kar/<il>) ================= */
.sayfa-il .bildiri { margin-bottom: 14px; }
.il-hava-kutu b { display: flex; align-items: center; gap: 6px; }
.il-ozet-ikon { width: 30px; height: 30px; }
.il-ara-baslik { margin: 0 0 10px; font-size: 16px; }
.il-ara-baslik small { font-weight: 500; font-size: 12.5px; color: var(--soluk); margin-left: 6px; }
.il-tahmin-alan { fill: color-mix(in srgb, var(--vurgu) 6%, transparent); }
.il-tahmin-sutun .gk-cubuk { fill: color-mix(in srgb, var(--vurgu) 45%, var(--zemin)); }
.il-gunler { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.il-gunler .gun-ruzgar { font-weight: 600; }
.il-gunler .gun-kart.karli .gun-ruzgar { color: var(--kar-yazi); }
@media (max-width: 900px) { .il-gunler { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .il-gunler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.il-saatler {
    display: flex; gap: 4px; overflow-x: auto; padding: 10px; border-radius: 18px; scroll-snap-type: x proximity;
    background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
}
.il-saat {
    flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 8px 4px; border-radius: 12px; scroll-snap-align: start; font-variant-numeric: tabular-nums;
}
.il-saat small { font-size: 11.5px; color: var(--soluk); }
.il-saat b { font-size: 14px; }
.il-saat.gun-basi { box-shadow: inset 2px 0 0 var(--cizgi); border-radius: 0 12px 12px 0; }
.il-saat.gun-basi > small:first-child { color: var(--yazi); font-weight: 700; }
.il-saat.karli { background: var(--kar-zemin); }
.il-saat-ikon { width: 28px; height: 28px; display: block; }
.il-saat-kar { min-height: 14px; font-size: 10.5px !important; color: var(--kar-yazi) !important; font-weight: 600; white-space: nowrap; }

.il-gecmis-satir { grid-template-columns: minmax(110px, 1fr) minmax(130px, 1.2fr) 1fr 1fr; min-height: 52px; border-bottom: 1px solid var(--cizgi); }
.il-gecmis .il-gecmis-satir:last-child { border-bottom: 0; }
.il-gecmis { max-height: 560px; overflow-y: auto; }
.il-gecmis .kg-baslik { position: sticky; top: 0; z-index: 1; background: var(--kart); }
:root[data-tema="koyu"] .il-gecmis .kg-baslik { background: #0e1e34; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .il-gecmis .kg-baslik { background: #0e1e34; } }

.il-kucuk { font-size: 13px; font-weight: 500; }
.il-merkez-satir { grid-template-columns: 64px minmax(0, 1fr) 20px; }
.il-komsular { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.il-komsular a {
    display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
    background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; font-size: 14px;
}
.il-komsular a:hover { border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); }
.il-komsular b { font-size: 13px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.il-komsular b.var { color: var(--kar-yazi); }
@media (max-width: 720px) {
    .il-gecmis-satir { grid-template-columns: minmax(0, 1fr) auto auto; }
    .il-gecmis-satir .kg-hava { display: none; }
}

/* ================= Ana sayfa üst bölüm v4: yan yana 5 merkez kartı ================= */
.sayfa-ana .hero.hero-kartli {
    min-height: 0; display: flex; flex-direction: column; gap: 18px;
    padding: 92px var(--hiza) 70px;
}
.hk-ust { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hk-ust h1 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; text-shadow: 0 1px 14px rgba(0, 25, 60, .35); }

.hk-sira {
    position: relative; z-index: 3;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
    height: clamp(300px, calc(100svh - 300px), 440px);
}
.hk-kart {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 20px;
    color: #fff; text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 18px 40px -20px rgba(4, 22, 48, .7);
    transition: transform .25s, box-shadow .25s;
    animation: hk-giris .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--sira) * 90ms);
}
.hk-kart:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -20px rgba(4, 22, 48, .8); }
.hk-kart:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes hk-giris { from { opacity: 0; transform: translateY(18px); } }

.hk-sahne { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hk-kart:hover .hk-sahne { transform: scale(1.03); }
.hk-sahne { transition: transform .5s; }

/* Yazı katmanı: şehir, merkez, kar, hava */
.hk-yazi {
    position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px;
    padding: 46px 16px 16px;
    background: linear-gradient(180deg, transparent, rgba(5, 20, 42, .55) 38%, rgba(5, 20, 42, .82));
}
.hk-il { font-size: clamp(20px, 1.9vw, 26px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hk-merkez { font-size: 12.5px; opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-cm { margin-top: 8px; font-size: 14px; font-weight: 600; }
.hk-cm b { font-size: clamp(30px, 3vw, 40px); line-height: 1; letter-spacing: -.03em; margin-right: 2px; }
.hk-cm.yok { font-size: 15px; opacity: .8; }
.hk-hava {
    display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .22); font-size: 12.5px; opacity: .95;
}
.hk-hava span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hk-hava-ikon { width: 26px; height: 26px; flex: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

/* Sahne renkleri (açık tema) — her kartın gökyüzü tonu farklı */
.hk-gok1 { stop-color: #5d9bd6; } .hk-gok2 { stop-color: #cfe4f5; }
.hk-tur1 .hk-gok1 { stop-color: #7f9fc4; } .hk-tur1 .hk-gok2 { stop-color: #dfe7ef; }
.hk-tur2 .hk-gok1 { stop-color: #f2a974; } .hk-tur2 .hk-gok2 { stop-color: #fde3c4; }
.hk-tur3 .hk-gok1 { stop-color: #4f97c9; } .hk-tur3 .hk-gok2 { stop-color: #bfe0ee; }
.hk-tur4 .hk-gok1 { stop-color: #8aa7d0; } .hk-tur4 .hk-gok2 { stop-color: #e9d9cc; }
.hk-uzak { fill: #93afcc; }
.hk-yakin { fill: #56708d; }
.hk-tur2 .hk-yakin { fill: #6b5a63; }
.hk-tur4 .hk-yakin { fill: #8a6a58; }
.hk-tur4 .hk-uzak { fill: #b79a88; }
.hk-kar { fill: #fff; }
.hk-catlak, .hk-katman { fill: none; stroke: rgba(20, 30, 45, .28); stroke-width: 1.4; stroke-linecap: round; }
.hk-kayalar path { fill: #46586c; } .hk-kayalar .hk-kaya-ust { fill: #6c7f94; }
.hk-cam-ic path { fill: #2e5a4c; } .hk-cam-ic .hk-cam-kar { fill: #fff; } .hk-govde { fill: #4b3a2e; }
.hk-bulutlar ellipse { fill: rgba(255, 255, 255, .85); }
.hk-bulutlar.hk-on ellipse { fill: rgba(255, 255, 255, .55); }
.hk-sis rect { fill: rgba(255, 255, 255, .55); }
.hk-gunes { fill: #fff3cf; } .hk-gunes-hale { fill: rgba(255, 236, 190, .35); }
.hk-savrulma ellipse { fill: rgba(255, 255, 255, .85); }
.hk-kartal path { fill: #2b2b33; }
.hk-yagis circle { fill: #fff; opacity: .9; }

/* Koyu tema: gece gökyüzü, ay ışığı */
:root[data-tema="koyu"] .hk-gok1 { stop-color: #0b1a33; } :root[data-tema="koyu"] .hk-gok2 { stop-color: #2a4670; }
:root[data-tema="koyu"] .hk-tur2 .hk-gok1 { stop-color: #1a1430; } :root[data-tema="koyu"] .hk-tur2 .hk-gok2 { stop-color: #4a3a5e; }
:root[data-tema="koyu"] .hk-tur4 .hk-gok1 { stop-color: #14182e; } :root[data-tema="koyu"] .hk-tur4 .hk-gok2 { stop-color: #3c3d5c; }
:root[data-tema="koyu"] .hk-uzak { fill: #2f4a6c; } :root[data-tema="koyu"] .hk-yakin { fill: #1d2f47; }
:root[data-tema="koyu"] .hk-kar { fill: #dfeaf6; }
:root[data-tema="koyu"] .hk-gunes { fill: #e8eef8; } :root[data-tema="koyu"] .hk-gunes-hale { fill: rgba(220, 232, 255, .18); }
:root[data-tema="koyu"] .hk-bulutlar ellipse, :root[data-tema="koyu"] .hk-sis rect { fill: rgba(200, 215, 235, .35); }
:root[data-tema="koyu"] .hk-kartal path { fill: #0a0f1a; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) .hk-gok1 { stop-color: #0b1a33; } :root:not([data-tema="acik"]) .hk-gok2 { stop-color: #2a4670; }
    :root:not([data-tema="acik"]) .hk-tur2 .hk-gok1 { stop-color: #1a1430; } :root:not([data-tema="acik"]) .hk-tur2 .hk-gok2 { stop-color: #4a3a5e; }
    :root:not([data-tema="acik"]) .hk-tur4 .hk-gok1 { stop-color: #14182e; } :root:not([data-tema="acik"]) .hk-tur4 .hk-gok2 { stop-color: #3c3d5c; }
    :root:not([data-tema="acik"]) .hk-uzak { fill: #2f4a6c; } :root:not([data-tema="acik"]) .hk-yakin { fill: #1d2f47; }
    :root:not([data-tema="acik"]) .hk-kar { fill: #dfeaf6; }
    :root:not([data-tema="acik"]) .hk-gunes { fill: #e8eef8; } :root:not([data-tema="acik"]) .hk-gunes-hale { fill: rgba(220, 232, 255, .18); }
    :root:not([data-tema="acik"]) .hk-bulutlar ellipse, :root:not([data-tema="acik"]) .hk-sis rect { fill: rgba(200, 215, 235, .35); }
    :root:not([data-tema="acik"]) .hk-kartal path { fill: #0a0f1a; }
}

/* Animasyonlar: her kartın kendi hareketi */
.hk-bulutlar { animation: hk-bulut 38s linear infinite; }
.hk-bulutlar.hk-on { animation-duration: 24s; animation-direction: reverse; }
@keyframes hk-bulut { from { transform: translateX(-120px); } to { transform: translateX(320px); } }

.hk-sis rect { animation: hk-sis 11s ease-in-out infinite alternate; }
.hk-sis rect + rect { animation-duration: 15s; animation-direction: alternate-reverse; }
@keyframes hk-sis { from { transform: translateX(-30px); opacity: .5; } to { transform: translateX(40px); opacity: 1; } }

.hk-gunes-hale { transform-box: fill-box; transform-origin: center; animation: hk-hale 5s ease-in-out infinite; }
@keyframes hk-hale { 50% { transform: scale(1.18); opacity: .55; } }
.hk-savrulma ellipse { transform-box: fill-box; transform-origin: left center; animation: hk-savrul 3.4s ease-out infinite; }
.hk-savrulma ellipse:nth-child(2) { animation-delay: .5s; } .hk-savrulma ellipse:nth-child(3) { animation-delay: 1s; }
@keyframes hk-savrul { 0% { opacity: 0; transform: translate(0, 0) scaleX(.4); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(60px, -12px) scaleX(1.6); } }

.hk-cam-ic { transform-box: fill-box; transform-origin: 50% 100%; animation: hk-sallan 4.2s ease-in-out infinite; animation-delay: var(--gecikme, 0s); }
@keyframes hk-sallan { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

.hk-kartal path { transform-box: fill-box; transform-origin: center; animation: hk-kanat .9s ease-in-out infinite; }
@keyframes hk-kanat { 50% { transform: scaleY(.55); } }
.hk-kayalar { animation: hk-kaya 9s ease-in-out infinite; }
@keyframes hk-kaya { 50% { transform: translateY(-1.5px); } }

.hk-yagis { animation: hk-yag 7s linear infinite; }
@keyframes hk-yag { from { transform: translateY(0); } to { transform: translateY(220px); } }

@media (prefers-reduced-motion: reduce) {
    .hk-kart, .hk-sahne *, .hk-sahne { animation: none !important; transition: none !important; }
}

/* Dar ekran: kartlar yine yan yana, yatay kaydırılır */
@media (max-width: 900px) {
    .sayfa-ana .hero.hero-kartli { padding: 80px 0 64px; }
    .hk-ust { padding: 0 var(--hiza); }
    .hk-sira {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
        padding: 4px var(--hiza) 8px; scroll-padding: 0 var(--hiza);
        height: clamp(320px, 58svh, 420px);
    }
    .hk-sira::-webkit-scrollbar { display: none; }
    .hk-kart { flex: 0 0 min(72vw, 280px); scroll-snap-align: start; }
}
.hk-zemin { fill: #56708d; }
.hk-tur2 .hk-zemin { fill: #6b5a63; } .hk-tur4 .hk-zemin { fill: #8a6a58; }
.hk-tur2 .hk-tepe { fill: #57474f; }
:root[data-tema="koyu"] .hk-zemin, :root[data-tema="koyu"] .hk-tur2 .hk-tepe { fill: #1d2f47; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) .hk-zemin, :root:not([data-tema="acik"]) .hk-tur2 .hk-tepe { fill: #1d2f47; } }
@media (max-width: 600px) { .sayfa-ana .hero.hero-kartli { padding-top: 118px; } }

/* ================= İl detay: şehir sahnesi ================= */
.sayfa-il .hero.hero-sehir { min-height: 520px; }
.sayfa-il .hero-sehir .manzara { top: auto; bottom: 0; height: 100%; }
.sayfa-il .hero-sehir .hero-ust h1 { text-shadow: 0 2px 18px rgba(0, 25, 60, .45); }
.sayfa-il .hero-sehir .hero-yer { text-shadow: 0 1px 12px rgba(0, 25, 60, .5); }
.il-model-not { margin: 14px 0 12px; font-size: 13px; color: var(--soluk); }
.il-model-not a { color: var(--vurgu); }
@media (max-width: 760px) { .sayfa-il .hero.hero-sehir { min-height: 480px; } }

/* Renkler (açık tema: kış öğleden sonrası) */
.sehir-sahne {
    --ss-uzak: #9db8d3; --ss-b1: #6f87a3; --ss-b2: #8197b0; --ss-b3: #5d7591; --ss-b4: #92a6bc;
    --ss-pen: #c9d8e6; --ss-isik: #ffd98a; --ss-tas: #c9b8a0; --ss-tas2: #b29f86; --ss-kursun: #7b8794;
    --ss-cati: #b5574b; --ss-zemin: #a9b4bf; --ss-yol: #59636e; --ss-deniz: #4f8fbf; --ss-kar: #fbfdff;
}
.ss-uzak { fill: var(--ss-uzak); }
.ss-bina1 { fill: var(--ss-b1); } .ss-bina2 { fill: var(--ss-b2); } .ss-bina3 { fill: var(--ss-b3); } .ss-bina4 { fill: var(--ss-b4); }
.ss-pencere { fill: var(--ss-pen); opacity: .55; }
.ss-pencere.ss-isik { fill: var(--ss-isik); opacity: .9; }
.ss-cati { fill: var(--ss-cati); }
.ss-baca { fill: #6d4b3e; }
.ss-anten, .ss-alem, .ss-direk { fill: none; stroke: #4a5664; stroke-width: 1.6; stroke-linecap: round; }
.ss-kar { fill: var(--ss-kar); }
.ss-tas { fill: var(--ss-tas); } .ss-tas2 { fill: var(--ss-tas2); } .ss-kursun { fill: var(--ss-kursun); }
.ss-tugla { fill: #b8674a; } .ss-turkuaz { fill: #2ba3a0; } .ss-yesil { fill: #3e8f7c; } .ss-yesil2 { fill: #2e7a68; }
.ss-yiv { stroke: rgba(40, 20, 10, .28); stroke-width: 1; }
.ss-kaya { fill: #6f6a63; }
.ss-tepe { fill: #87a0b8; } .ss-buyuk-dag { fill: #8aa3bd; }
.ss-peri { fill: #e2c6a2; } .ss-peri-sapka { fill: #a98563; }
.ss-konak { fill: #f3ead8; } .ss-konak-ust { fill: #fbf6ea; }
.ss-karsi-yapi { fill: #7f97b2; opacity: .85; }
.ss-deniz { fill: var(--ss-deniz); }
.ss-dalgalar path { stroke: rgba(255, 255, 255, .45); stroke-width: 1.4; stroke-dasharray: 14 22; fill: none; animation: ss-dalga 6s linear infinite; }
.ss-kaldirim { fill: var(--ss-zemin); } .ss-kaldirim.on { fill: #b9c3cd; }
.ss-yol { fill: var(--ss-yol); } .ss-yol.karli { fill: #7d8894; }
.ss-serit { stroke: #e9edf1; stroke-width: 2; stroke-dasharray: 26 22; }
.ss-lamba path { fill: none; stroke: #3a4552; stroke-width: 3; stroke-linecap: round; }
.ss-lamba-isik { fill: #ffe7a6; } .ss-lamba-hale { fill: rgba(255, 220, 140, .0); }
.ss-bacak { stroke: #2a3340; stroke-width: 2.4; stroke-linecap: round; }
.ss-kol { stroke-width: 2.2; stroke-linecap: round; }
.ss-far { fill: #fff3b0; }
.ss-marti use, .ss-kuslar use { stroke: #3a4552; }
.ss-kanat { stroke: #3a4552; }
.ss-halat, .ss-ray { stroke: #3a4552; stroke-width: 1.6; fill: none; }
.ss-ray-ayak { stroke: #55606d; stroke-width: 5; }
.ss-turbin-direk { fill: #eef2f6; } .ss-pervane path, .ss-pervane circle { fill: #f6f8fa; }
.ss-kadran { fill: #f8f4ea; stroke: #4a5664; stroke-width: 1.4; }
.ss-akrep path, .ss-yelkovan path { stroke: #1d2733; stroke-width: 1.8; stroke-linecap: round; }
.ss-isaret { fill: #ff4d4d; }
.ss-dolap-cember { stroke: #e9edf1; stroke-width: 3; } .ss-dolap-tel { stroke: rgba(233, 237, 241, .8); stroke-width: 1.2; }
.ss-duman circle { fill: rgba(235, 238, 242, .75); }

/* Koyu tema: gece; pencereler ve lambalar yanar */
:root[data-tema="koyu"] .sehir-sahne {
    --ss-uzak: #22385a; --ss-b1: #1b2b44; --ss-b2: #22344f; --ss-b3: #172538; --ss-b4: #283b57;
    --ss-pen: #2c3e57; --ss-isik: #ffcf6b; --ss-tas: #6d6457; --ss-tas2: #5c5448; --ss-kursun: #3f4a57;
    --ss-cati: #6b3a35; --ss-zemin: #3a4656; --ss-yol: #232c37; --ss-deniz: #132c4c; --ss-kar: #dfe8f3;
}
:root[data-tema="koyu"] .ss-lamba-hale { fill: rgba(255, 210, 120, .22); }
:root[data-tema="koyu"] .ss-pencere.ss-isik { filter: drop-shadow(0 0 3px rgba(255, 200, 90, .7)); }
:root[data-tema="koyu"] .ss-tepe, :root[data-tema="koyu"] .ss-buyuk-dag { fill: #2c4466; }
:root[data-tema="koyu"] .ss-karsi-yapi { fill: #2a4061; }
:root[data-tema="koyu"] .ss-konak, :root[data-tema="koyu"] .ss-konak-ust { fill: #6e675a; }
:root[data-tema="koyu"] .ss-peri { fill: #7a6650; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) .sehir-sahne {
        --ss-uzak: #22385a; --ss-b1: #1b2b44; --ss-b2: #22344f; --ss-b3: #172538; --ss-b4: #283b57;
        --ss-pen: #2c3e57; --ss-isik: #ffcf6b; --ss-tas: #6d6457; --ss-tas2: #5c5448; --ss-kursun: #3f4a57;
        --ss-cati: #6b3a35; --ss-zemin: #3a4656; --ss-yol: #232c37; --ss-deniz: #132c4c; --ss-kar: #dfe8f3;
    }
    :root:not([data-tema="acik"]) .ss-lamba-hale { fill: rgba(255, 210, 120, .22); }
    :root:not([data-tema="acik"]) .ss-pencere.ss-isik { filter: drop-shadow(0 0 3px rgba(255, 200, 90, .7)); }
    :root:not([data-tema="acik"]) .ss-tepe, :root:not([data-tema="acik"]) .ss-buyuk-dag { fill: #2c4466; }
    :root:not([data-tema="acik"]) .ss-karsi-yapi { fill: #2a4061; }
    :root:not([data-tema="acik"]) .ss-konak, :root:not([data-tema="acik"]) .ss-konak-ust { fill: #6e675a; }
    :root:not([data-tema="acik"]) .ss-peri { fill: #7a6650; }
}

/* Animasyonlar */
#ss-y .b1, #ss-k .b1 { transform-box: fill-box; transform-origin: 50% 0; animation: ss-adim .55s ease-in-out infinite alternate; }
#ss-y .b2, #ss-k .b2 { transform-box: fill-box; transform-origin: 50% 0; animation: ss-adim .55s ease-in-out infinite alternate-reverse; }
@keyframes ss-adim { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.ss-kuyruk { transform-box: fill-box; transform-origin: 100% 100%; animation: ss-salla .4s ease-in-out infinite alternate; }
@keyframes ss-salla { to { transform: rotate(-18deg); } }
.ss-duman circle { animation: ss-duman 3.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ss-duman { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(10px, -30px) scale(1.8); } }
.ss-bayrak { transform-box: fill-box; transform-origin: 0 50%; animation: ss-bayrak 1.4s ease-in-out infinite alternate; }
@keyframes ss-bayrak { to { transform: skewY(-6deg) scaleX(.92); } }
.ss-pervane { animation: ss-don 6s linear infinite; }
@keyframes ss-don { to { rotate: 360deg; } }
.ss-dolap { animation: ss-don 40s linear infinite; }
.ss-dolap-kabin { animation: ss-don 40s linear infinite reverse; }
.ss-yelkovan { animation: ss-don 60s linear infinite; }
.ss-akrep { animation: ss-don 720s linear infinite; }
.ss-yanip { animation: ss-yanip 7s steps(1) infinite; }
@keyframes ss-yanip { 50% { fill: var(--ss-pen); opacity: .55; } }
.ss-isaret { animation: ss-isaret 1.6s steps(1) infinite; }
@keyframes ss-isaret { 50% { opacity: .15; } }
.ss-kanat { transform-box: fill-box; transform-origin: center; animation: ss-kanat .7s ease-in-out infinite alternate; }
@keyframes ss-kanat { to { transform: scaleY(.4); } }
.ss-palmiye { animation: ss-palmiye 4s ease-in-out infinite alternate; }
@keyframes ss-palmiye { to { rotate: 1.6deg; } }
.ss-balon { animation: ss-balon 8s ease-in-out infinite alternate; }
@keyframes ss-balon { to { transform: translateY(-26px); } }
.ss-kurek { transform-box: fill-box; transform-origin: 0 0; animation: ss-kurek 1.2s ease-in-out infinite; }
@keyframes ss-kurek { 50% { transform: rotate(-24deg); } }
.ss-savrulan { animation: ss-savrul 1.2s ease-out infinite; }
@keyframes ss-savrul { 0%, 45% { opacity: 0; transform: translate(0, 0); } 60% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -14px); } }
.ss-sapka { transform-box: fill-box; transform-origin: 50% 100%; animation: ss-sapka 3s ease-in-out infinite; }
@keyframes ss-sapka { 50% { transform: rotate(-8deg); } }
@keyframes ss-dalga { to { stroke-dashoffset: -72; } }
.ss-lamba-hale { animation: ss-hale 3s ease-in-out infinite alternate; }
@keyframes ss-hale { to { opacity: .6; } }

@media (prefers-reduced-motion: reduce) {
    .sehir-sahne *, #ss-y *, #ss-k * { animation: none !important; }
}
/* İl detay sayfası tam genişlik başlık kullanır: liste sayfasının 1040px sınırı üst çubuğa uygulanmasın */
.sayfa-detay.sayfa-iller .ust { max-width: none; }

/* ================= Kayak Rehberi (/kayak-rehberi) ================= */
.sayfa-kayak-rehberi main, .sayfa-kayak-rehberi .ust { max-width: 1160px; }

/* Afiş renkleri (tema uyumlu) */
.rb-svg, .rk-ust-sahne svg {
    --rb-gok1: #9cc7ec; --rb-dag: #b9d0e6; --rb-zemin: #f4f8fc; --rb-kart: #ffffff; --rb-cizgi: #dbe6f1; --rb-yazi: #12304f;
    --rb-pist: #ffffff; --rb-harita: #fbf6e9;
}
:root[data-tema="koyu"] :is(.rb-svg, .rk-ust-sahne svg) { --rb-gok1: #13284a; --rb-dag: #22395c; --rb-zemin: #1a2c46; --rb-kart: #1d3150; --rb-cizgi: #2c4468; --rb-yazi: #e6eef8; --rb-pist: #2a4166; --rb-harita: #2a3a52; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="acik"]) :is(.rb-svg, .rk-ust-sahne svg) { --rb-gok1: #13284a; --rb-dag: #22395c; --rb-zemin: #1a2c46; --rb-kart: #1d3150; --rb-cizgi: #2c4468; --rb-yazi: #e6eef8; --rb-pist: #2a4166; --rb-harita: #2a3a52; } }
.rb-gok { fill: var(--rb-gok1); }
.rb-dag2 { fill: var(--rb-dag); }
.rb-kar { fill: #fff; }
.rb-zemin { fill: var(--rb-zemin); }
.rb-kart { fill: var(--rb-kart); stroke: var(--rb-cizgi); stroke-width: 1.5; }
.rb-pist { fill: var(--rb-pist); opacity: .85; }
.rb-harita { fill: var(--rb-harita); stroke: var(--rb-cizgi); stroke-width: 2; }
.rb-harita-kat { stroke: var(--rb-cizgi); stroke-width: 2; }
.rb-harita-dag { fill: #8aa3bd; }
.rb-sehir { fill: #0a6fc2; }
.rb-rota { fill: none; stroke: #e5484d; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.rb-cuzdan { fill: #8a5a3c; } .rb-cuzdan2 { fill: #6e4630; }
.rb-sure { stroke-dasharray: 100; stroke-dashoffset: 100; }
.rb-dalga { fill: none; stroke: #e5484d; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rb-buhar path { fill: none; stroke: rgba(160, 175, 190, .7); stroke-width: 3; stroke-linecap: round; }

/* Animasyonlar: yalnızca .oynuyor iken (görünürken) çalışır */
.rb-afis *, .rk-ust-sahne * { animation-play-state: paused; }
.rb-afis.oynuyor *, .rk-ust-sahne.oynuyor * { animation-play-state: running; }
.rb-rota { animation: rb-ciz 4s ease-in-out infinite; }
@keyframes rb-ciz { 0% { stroke-dashoffset: 100; } 60%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
.rb-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: rb-zipla 1.2s ease-in-out infinite; }
@keyframes rb-zipla { 50% { transform: translateY(-8px); } }
.rb-igne { animation: rb-pusula 5s ease-in-out infinite; }
@keyframes rb-pusula { 0%, 100% { rotate: -20deg; } 40% { rotate: 25deg; } 70% { rotate: -8deg; } }
.rb-para { animation: rb-para 2.1s ease-in infinite; }
@keyframes rb-para { 0% { transform: translateY(-40px); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(54px); opacity: 1; } 80%, 100% { transform: translateY(60px); opacity: 0; } }
.rb-skipass { animation: rb-salla 3s ease-in-out infinite; }
@keyframes rb-salla { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
.rb-sure { animation: rb-sure 4.4s linear infinite; }
@keyframes rb-sure { to { stroke-dashoffset: 0; } }
.rb-katman { opacity: 0; animation: rb-katman 6s ease-out infinite; }
.rb-katman.k1 { animation-delay: .8s; } .rb-katman.k2 { animation-delay: 1.6s; }
@keyframes rb-katman { 0% { opacity: 0; transform: translateX(-60px); } 12%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
.rb-etiket { opacity: 0; animation: rb-etiket 6s ease-out infinite; }
.rb-etiket.e1 { animation-delay: .8s; } .rb-etiket.e2 { animation-delay: 1.6s; }
@keyframes rb-etiket { 0% { opacity: 0; translate: 14px 0; } 12%, 80% { opacity: 1; translate: 0 0; } 92%, 100% { opacity: 0; } }
.rb-bob { animation: rb-bob 3.4s ease-in-out infinite; }
.rb-bob.b1 { animation-delay: -1.1s; } .rb-bob.b2 { animation-delay: -2.2s; }
/* Konumu transform özniteliğiyle verilen gruplarda CSS 'transform' özniteliği ezer; ayrı 'translate' özelliği kullanılır */
@keyframes rb-bob { 50% { translate: 0 -9px; } }
.rb-ibre { animation: rb-ibre 4s ease-in-out infinite; }
@keyframes rb-ibre { 0%, 100% { rotate: -60deg; } 50% { rotate: 50deg; } }
.rb-sallanan { animation: rb-yalpa .9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes rb-yalpa { from { rotate: -7deg; } to { rotate: 6deg; } }
.rb-flama { transform-box: fill-box; transform-origin: 0 50%; animation: rb-flama 1s ease-in-out infinite alternate; }
@keyframes rb-flama { to { transform: scaleX(.75) skewY(8deg); } }
.rb-balon-yazi { animation: rb-baloncuk 5.5s ease-in-out infinite; }
@keyframes rb-baloncuk { 0%, 15% { opacity: 0; translate: 0 6px; } 25%, 70% { opacity: 1; translate: 0 0; } 80%, 100% { opacity: 0; } }
.rb-kayak { animation: rb-pizza-sol 2.6s ease-in-out infinite; }
.rb-kayak.sag { animation-name: rb-pizza-sag; }
@keyframes rb-pizza-sol { 0%, 100% { transform: translate(-22px, 0) rotate(0deg); } 50% { transform: translate(-30px, 0) rotate(18deg); } }
@keyframes rb-pizza-sag { 0%, 100% { transform: translate(22px, 0) rotate(0deg); } 50% { transform: translate(30px, 0) rotate(-18deg); } }
.rb-ok { opacity: 0; animation: rb-ok 2.6s ease-in-out infinite; }
@keyframes rb-ok { 40%, 60% { opacity: 1; } }
.rb-egil { animation: rb-egil 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes rb-egil { 50% { transform: scaleY(.9) translateY(2px); } }
.rb-dalga { animation: rb-dalga 2.4s ease-out infinite; }
.rb-dalga.d2 { animation-delay: 1.2s; }
@keyframes rb-dalga { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.rb-arti { animation: rb-nabiz 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rb-nabiz { 50% { transform: scale(1.15); } }
.rb-tabela { animation: rb-salla 2.4s ease-in-out infinite; }
.rb-buhar path { animation: rb-buhar 2.8s ease-out infinite; }
.rb-buhar path + path { animation-delay: 1.4s; }
@keyframes rb-buhar { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }
@media (prefers-reduced-motion: reduce) {
    .rb-afis *, .rk-ust-sahne * { animation: none !important; }
    .rb-katman, .rb-etiket, .rb-balon-yazi { opacity: 1; }
    .rb-rota, .rb-sure { stroke-dashoffset: 0; }
}

/* Üst bölüm */
.rk-ust {
    position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; margin: 4px 0 26px;
    min-height: 300px; display: flex; align-items: flex-end;
    border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
}
.rk-ust-sahne { position: absolute; inset: 0; z-index: -1; }
.rk-ust-sahne svg { width: 100%; height: 100%; display: block; }
.rk-ust-yazi {
    width: 100%; padding: 28px 32px; display: flex; flex-direction: column; gap: 8px;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--zemin) 88%, transparent) 45%);
}
.rk-etiket { align-self: flex-start; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--vurgu); color: var(--zemin); }
.rk-ust h1 { margin: 0; font-size: clamp(28px, 4.4vw, 48px); letter-spacing: -.025em; line-height: 1.08; max-width: 820px; }
.rk-ust p { margin: 0; font-size: clamp(15px, 1.6vw, 18px); color: var(--soluk); max-width: 760px; }
.rk-meta { font-size: 13px; color: var(--soluk); }

/* Düzen: solda içindekiler, sağda içerik */
.rk-duzen { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 36px; align-items: start; }
.rk-yan { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: thin; }
.rk-toc { border-radius: 18px; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge); padding: 6px 8px 10px; }
.rk-toc summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    padding: 10px 10px 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk);
}
.rk-toc summary::-webkit-details-marker { display: none; }
.rk-yuzde { font-variant-numeric: tabular-nums; color: var(--vurgu); letter-spacing: 0; }
.rk-ilerleme { height: 3px; margin: 0 10px 8px; border-radius: 2px; background: var(--cizgi); overflow: hidden; }
.rk-ilerleme i { display: block; height: 100%; background: var(--vurgu); transform: scaleX(0); transform-origin: left; transition: transform .15s; }
.rk-toc ol { list-style: none; margin: 0; padding: 0; }
.rk-toc > ol > li > a {
    display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: baseline;
    padding: 9px 10px; border-radius: 10px; color: var(--yazi); text-decoration: none; font-size: 14px; line-height: 1.35;
    border-left: 3px solid transparent; transition: background .15s, color .15s;
}
.rk-toc > ol > li > a:hover { background: var(--kar-zemin); }
.rk-toc > ol > li > a.aktif { background: var(--kar-zemin); color: var(--kar-yazi); font-weight: 700; border-left-color: var(--vurgu); }
.rk-no { font-size: 12px; font-weight: 700; color: var(--soluk); font-variant-numeric: tabular-nums; }
.rk-toc a.aktif .rk-no { color: var(--vurgu); }
.rk-alt { display: none; margin: 2px 0 6px 44px !important; border-left: 1px solid var(--cizgi); }
.rk-toc li.acik > .rk-alt { display: block; }
.rk-alt a { display: block; padding: 5px 10px; font-size: 13px; color: var(--soluk); text-decoration: none; line-height: 1.35; }
.rk-alt a:hover { color: var(--vurgu); }

/* İçerik */
.rk-icerik { min-width: 0; }
.rk-giris p:first-child { font-size: 19px; line-height: 1.6; color: var(--yazi); }
.rk-giris p { font-size: 16.5px; line-height: 1.75; color: var(--soluk); }
.rk-bolum { margin-top: 44px; padding-top: 6px; scroll-margin-top: 80px; }
.rk-giris, .rk-icerik h3 { scroll-margin-top: 80px; }
.rb-afis {
    border-radius: 20px; overflow: hidden; aspect-ratio: 800 / 220; margin-bottom: 18px;
    border: 1px solid var(--cizgi); box-shadow: var(--kart-golge);
}
.rb-afis svg { width: 100%; height: 100%; display: block; }
.rk-bolum-no { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vurgu); }
.rk-bolum h2 { margin: 4px 0 14px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; line-height: 1.15; }
.rk-metin { font-size: 16.5px; line-height: 1.75; color: var(--yazi); }
.rk-metin p { margin: 0 0 14px; }
.rk-metin h3 { margin: 30px 0 10px; font-size: 21px; letter-spacing: -.01em; }
.rk-metin h4 { margin: 22px 0 6px; font-size: 17px; color: var(--kar-yazi); }
.rk-metin ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 6px; }
.rk-metin li { position: relative; padding-left: 26px; }
.rk-metin li::before {
    content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 50%;
    background: var(--vurgu); box-shadow: 0 0 0 4px var(--kar-zemin);
}
.rb-not {
    display: flex; gap: 12px; align-items: flex-start; margin: 18px 0; padding: 14px 16px; border-radius: 14px;
    background: var(--kar-zemin); border: 1px solid color-mix(in srgb, var(--vurgu) 25%, var(--cizgi));
}
.rb-not p { margin: 0; }
.rb-not-ikon {
    flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin-top: 2px;
    background: var(--vurgu); color: var(--zemin); font-weight: 900; font-size: 14px;
}
.rk-sonraki {
    display: flex; flex-direction: column; gap: 2px; margin-top: 26px; padding: 16px 18px; border-radius: 16px; text-decoration: none;
    background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge); color: var(--yazi); transition: border-color .15s, transform .15s;
}
.rk-sonraki:hover { border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); transform: translateY(-2px); }
.rk-sonraki small { font-size: 12px; color: var(--soluk); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.rk-sonraki span { font-weight: 700; color: var(--vurgu); }

@media (max-width: 900px) {
    .rk-duzen { grid-template-columns: 1fr; gap: 18px; }
    .rk-yan { position: sticky; top: 8px; z-index: 5; max-height: none; overflow: visible; }
    .rk-toc[open] ol { max-height: 60vh; overflow-y: auto; }
    .rk-ust { min-height: 260px; border-radius: 20px; }
    .rk-ust-yazi { padding: 20px; }
    .rb-afis { aspect-ratio: 16 / 7; }
}

/* İllerde Kar: üst bölüm kartları (ana sayfa düzeniyle aynı) */
.sayfa-ana.sayfa-iller .ust { max-width: none; }
.sayfa-iller .il-arama { margin: -36px 0 0; }
.hk-beklenen b { font-size: clamp(26px, 2.6vw, 34px); }
.hk-beklenen small { display: block; font-size: 12px; font-weight: 600; opacity: .85; margin-top: 2px; }

/* ================= Kayak eğitmenleri ================= */
.sayfa-egitmen main, .sayfa-egitmen .ust { max-width: 1120px; }
.eg-ust { margin-bottom: 22px; }
.eg-ust .rk-etiket { display: inline-block; margin-bottom: 8px; }
.eg-ust-liste { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.eg-durum { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; vertical-align: middle; }
.eg-durum-onayli { background: #dcfce7; color: #166534; }
.eg-durum-bekliyor { background: #fef3c7; color: #92400e; }
.eg-durum-reddedildi { background: #fee2e2; color: #991b1b; }
.eg-durum-askida { background: #e5e7eb; color: #374151; }
.eg-red { padding: 12px 14px; border-radius: 12px; background: #fee2e2; color: #7f1d1d; }
.eg-mesaj { padding: 12px 14px; border-radius: 12px; margin: 0 0 14px; font-weight: 600; }
.eg-mesaj.ok { background: #dcfce7; color: #14532d; } .eg-mesaj.hata { background: #fee2e2; color: #7f1d1d; }
.eg-hatalar { padding: 14px 18px; border-radius: 14px; margin-bottom: 18px; background: #fee2e2; color: #7f1d1d; }
.eg-hatalar ul { margin: 6px 0 0; padding-left: 20px; }

/* Form */
.eg-form { display: grid; gap: 18px; }
.eg-kutu { margin: 0; padding: 20px 22px 22px; border-radius: 20px; border: 1px solid var(--cizgi); background: var(--kart); box-shadow: var(--kart-golge); display: grid; gap: 14px; min-width: 0; }
.eg-kutu legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.eg-kutu legend span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: var(--vurgu); color: var(--zemin); }
.eg-alan { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--yazi); }
.eg-alan em { color: #e5484d; font-style: normal; }
.eg-alan small { font-weight: 400; color: var(--soluk); font-size: 12.5px; }
.eg-form input[type=text], .eg-form input[type=email], .eg-form input[type=tel], .eg-form input[type=number], .eg-form input[type=search], .eg-form input[type=date], .eg-form select, .eg-form textarea,
.eg-talep input, .eg-talep select, .eg-talep textarea, .eg-yorum-form input[type=text], .eg-yorum-form textarea {
    width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--zemin); color: var(--yazi);
    font: inherit; font-size: 15px; font-weight: 400;
}
.eg-form :is(input, select, textarea):focus, .eg-talep :is(input, select, textarea):focus { outline: 2px solid var(--vurgu); outline-offset: -1px; }
.eg-form input[type=file] { font-weight: 400; font-size: 14px; }
.eg-iki { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.eg-cipler, .eg-merkezler { display: flex; flex-wrap: wrap; gap: 8px; font-weight: 400; }
.eg-merkezler { max-height: 240px; overflow-y: auto; padding: 4px; border: 1px solid var(--cizgi); border-radius: 12px; }
.eg-cip { position: relative; }
.eg-cip input { position: absolute; opacity: 0; pointer-events: none; }
.eg-cip span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--cizgi); background: var(--zemin); cursor: pointer; font-size: 14px; transition: all .12s; }
.eg-cip input:checked + span { background: var(--vurgu); border-color: var(--vurgu); color: var(--zemin); font-weight: 600; }
.eg-cip input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.eg-cip[hidden] { display: none; }
.eg-diller { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; font-weight: 400; }
.eg-dil { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; border: 1px solid var(--cizgi); }
.eg-dil select { width: auto !important; padding: 6px 8px !important; font-size: 13.5px !important; }
.eg-ucretler { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.eg-para { position: relative; display: block; }
.eg-para i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--soluk); }
.eg-radyo { display: grid; gap: 6px; font-weight: 400; }
.eg-portre-satir { display: flex; gap: 18px; align-items: center; }
.eg-portre { flex: none; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-size: 30px; background: var(--kar-zemin); border: 2px solid var(--cizgi); }
.eg-portre img { width: 100%; height: 100%; object-fit: cover; }
.eg-galeri-mevcut { display: flex; flex-wrap: wrap; gap: 10px; }
.eg-galeri-mevcut label { display: grid; gap: 4px; font-size: 12.5px; }
.eg-galeri-mevcut img { width: 110px; height: 80px; object-fit: cover; border-radius: 10px; }
.eg-onaylar { display: grid; gap: 10px; font-size: 14px; }
.eg-onaylar label { display: flex; gap: 10px; align-items: flex-start; }
.eg-onaylar input { margin-top: 3px; }
.eg-gonder { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.eg-gonder button, .eg-talep button, .eg-yorum-form button {
    padding: 12px 22px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; background: var(--vurgu); color: var(--zemin);
}
.eg-gonder small { color: var(--soluk); }
.eg-tamam { padding: 28px; border-radius: 20px; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge); }
.eg-tamam-ikon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 800; background: #dcfce7; color: #166534; }
.eg-link { word-break: break-all; padding: 10px 12px; border-radius: 10px; background: var(--zemin); font-family: ui-monospace, Menlo, monospace; font-size: 13px; }

/* Kartlar */
.eg-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.eg-kart { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge); transition: transform .15s, border-color .15s; }
.eg-kart:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--vurgu) 45%, var(--cizgi)); }
.eg-kart-ust { display: flex; gap: 12px; align-items: center; color: var(--yazi); text-decoration: none; }
.eg-kart-ust img, .eg-kart-bos { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.eg-kart-bos { display: grid; place-items: center; font-size: 26px; font-weight: 800; background: var(--kar-zemin); color: var(--kar-yazi); }
.eg-kart-ad { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eg-kart-ad b { font-size: 17px; letter-spacing: -.01em; }
.eg-kart-ad small { font-size: 12.5px; color: var(--soluk); }
.eg-rozetler { display: flex; flex-wrap: wrap; gap: 5px; }
.eg-rozet { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--kar-zemin); color: var(--kar-yazi); }
.eg-rozet.dil { background: var(--zemin); color: var(--soluk); border: 1px solid var(--cizgi); }
.eg-rozetler.buyuk .eg-rozet { font-size: 13px; padding: 4px 12px; }
.eg-rozet.uzm { background: var(--zemin); color: var(--yazi); border: 1px solid var(--cizgi); }
.eg-kart-uzm { margin: 0; font-size: 13px; color: var(--soluk); }
.eg-kart-alt { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--cizgi); font-size: 13px; color: var(--soluk); }
.eg-kart-alt > span { flex: 1; }
.eg-kart-alt b { color: var(--yazi); font-size: 15px; }
.eg-wa { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; }
.eg-wa svg { width: 20px; height: 20px; }
.eg-git { padding: 8px 14px; border-radius: 10px; background: var(--vurgu); color: var(--zemin); text-decoration: none; font-weight: 700; }
.eg-yildiz { position: relative; display: inline-block; font-size: 13px; letter-spacing: 1px; color: var(--cizgi); line-height: 1; }
.eg-yildiz::before { content: "★★★★★"; position: absolute; inset: 0; width: var(--puan); overflow: hidden; color: #f5a524; }
.eg-merkez-bolum { margin-top: 36px; }
.eg-bos-merkez { padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--cizgi); color: var(--soluk); }
.eg-bos-merkez a { color: var(--vurgu); font-weight: 600; }
.eg-suzgec { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.eg-suzgec select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--kart); color: var(--yazi); font: inherit; font-size: 14px; }
.eg-suzgec a { color: var(--vurgu); }

/* Profil */
.eg-profil { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.eg-kimlik { display: flex; gap: 22px; align-items: center; margin-bottom: 10px; }
.eg-foto { width: 150px; height: 150px; border-radius: 28px; object-fit: cover; box-shadow: var(--kart-golge); border: 3px solid var(--kart); flex: none; }
.eg-kimlik h1 { margin: 6px 0 4px; font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -.02em; }
.eg-alt { margin: 0 0 10px; color: var(--soluk); }
.eg-alt a { color: inherit; text-decoration: none; }
.eg-rozet.sertifika { background: #fef3c7; color: #92400e; }
:root[data-tema="koyu"] .eg-rozet.sertifika { background: #42330e; color: #fcd34d; }
.eg-bolum { padding: 22px 0; border-top: 1px solid var(--cizgi); }
.eg-bolum h2 { margin: 0 0 12px; font-size: 20px; letter-spacing: -.01em; }
.eg-bolum h3 { margin: 18px 0 8px; font-size: 16px; }
.eg-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.eg-vurgu { padding: 10px 14px; border-left: 3px solid var(--vurgu); background: var(--kar-zemin); border-radius: 0 10px 10px 0; }
.eg-diller-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.eg-diller-liste li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--cizgi); }
.eg-diller-liste small { color: var(--soluk); }
.eg-merkez-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.eg-merkez-cipler a { padding: 8px 14px; border-radius: 999px; background: var(--kart); border: 1px solid var(--cizgi); color: var(--yazi); text-decoration: none; font-size: 14px; }
.eg-merkez-cipler a:hover { border-color: var(--vurgu); color: var(--vurgu); }
.eg-ucret-tablo { width: 100%; border-collapse: collapse; font-size: 15px; }
.eg-ucret-tablo td { padding: 10px 0; border-bottom: 1px solid var(--cizgi); }
.eg-ucret-tablo td:last-child { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.eg-paketler { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.eg-paketler li { padding: 10px 14px; border-radius: 12px; background: var(--kar-zemin); font-weight: 600; }
.eg-lojistik { margin: 0; display: grid; gap: 10px; }
.eg-lojistik div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--kart); }
.eg-lojistik div.uyari { background: #fff7ed; border-color: #fed7aa; }
:root[data-tema="koyu"] .eg-lojistik div.uyari { background: #3a2410; border-color: #7c4a1a; }
.eg-lojistik dt { font-weight: 700; margin-bottom: 2px; }
.eg-lojistik dd { margin: 0; }
.eg-galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-bottom: 12px; }
.eg-galeri img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.eg-video { aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; margin-bottom: 10px; }
.eg-video iframe { width: 100%; height: 100%; border: 0; }
.eg-video-link { display: inline-block; margin: 0 8px 8px 0; padding: 10px 14px; border-radius: 12px; background: var(--kart); border: 1px solid var(--cizgi); color: var(--vurgu); text-decoration: none; font-weight: 600; }
.eg-yorum { padding: 14px 0; border-bottom: 1px solid var(--cizgi); }
.eg-yorum header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eg-yorum header small { color: var(--soluk); }
.eg-yorum p { margin: 6px 0 0; }
.eg-yorum-form { margin-top: 14px; }
.eg-yorum-form summary { cursor: pointer; font-weight: 700; color: var(--vurgu); }
.eg-yorum-form form { display: grid; gap: 12px; margin-top: 12px; max-width: 560px; }
.eg-puan-sec { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.eg-puan-sec legend { float: left; width: 100%; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.eg-puan-sec input { position: absolute; opacity: 0; }
.eg-puan-sec label { font-size: 30px; color: var(--cizgi); cursor: pointer; line-height: 1; }
.eg-puan-sec label:hover, .eg-puan-sec label:hover ~ label, .eg-puan-sec input:checked ~ label { color: #f5a524; }
.eg-puan-sec input:focus-visible + label { outline: 2px solid var(--vurgu); }

.eg-sag { position: sticky; top: 76px; }
.eg-rezervasyon { padding: 20px; border-radius: 22px; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--kart-golge); display: grid; gap: 12px; }
.eg-rezervasyon h2 { margin: 6px 0 0; font-size: 17px; }
.eg-fiyat { margin: 0; color: var(--soluk); } .eg-fiyat b { font-size: 26px; color: var(--yazi); }
.eg-iletisim { display: grid; gap: 8px; }
.eg-buton { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.eg-buton svg { width: 20px; height: 20px; }
.eg-buton.wa { background: #25d366; color: #fff; }
.eg-buton.ara { background: var(--zemin); color: var(--yazi); border: 1px solid var(--cizgi); }
.eg-buton.cta { background: var(--vurgu); color: var(--zemin); }
.eg-talep { display: grid; gap: 10px; }
.eg-talep small { font-size: 12px; }

@media (max-width: 900px) {
    .eg-profil { grid-template-columns: 1fr; }
    .eg-sag { position: static; }
    .eg-ikili, .eg-iki { grid-template-columns: 1fr; }
    .eg-kimlik { flex-direction: column; align-items: flex-start; }
    .eg-foto { width: 120px; height: 120px; }
}

/* Panel */
.eg-panel-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.eg-panel-fotolar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.eg-panel-fotolar figure { margin: 0; font-size: 12px; color: var(--soluk); }
.eg-panel-fotolar img { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; display: block; }
.eg-panel-yorum { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.eg-panel-yorum p { margin: 6px 0 0; }
.eg-red-form { margin-top: 12px; }
tr.eg-fark td { background: color-mix(in srgb, #f5a524 10%, transparent); }
/* Etiket metni ve * aynı satırda kalsın */
.eg-alan { display: block; }
.eg-alan > :is(input, select, textarea, .eg-para, .eg-cipler, .eg-merkezler, .eg-diller, .eg-radyo) { display: block; margin-top: 6px; }
.eg-alan > .eg-cipler, .eg-alan > .eg-merkezler { display: flex; }
.eg-alan > .eg-diller { display: grid; }
.eg-alan > .eg-radyo { display: grid; }
.eg-alan > small { display: block; margin-top: 4px; }
.eg-alan > .eg-merkez-ara { margin-bottom: 8px; }

/* ================= Ortak üst çubuk (her sayfada Kayak Rehberi düzeni) =================
   Logo + slogan solda, menü + tema düğmesi sağda, tek satır, 1160px kap, sayfa akışında.
   Eskiden hero'lu sayfalarda (.sayfa-ana / .sayfa-detay) gökyüzünün üstüne bindiriliyordu. */
body > .ust,
:is(.sayfa-detay, .sayfa-ana, .sayfa-iller, .sayfa-gecmis, .sayfa-egitmen, .sayfa-kayak-rehberi) > .ust,
.sayfa-detay.sayfa-iller > .ust, .sayfa-ana.sayfa-iller > .ust {
    position: relative; top: auto; left: auto; right: auto; z-index: 10;
    max-width: 1160px; margin: 0 auto; padding: 18px 16px 4px;
    align-items: center; color: inherit;
}
:is(.sayfa-detay, .sayfa-ana) .ust .logo { color: var(--yazi); text-shadow: none; }
:is(.sayfa-detay, .sayfa-ana) .ust .slogan { color: var(--soluk); }
:is(.sayfa-detay, .sayfa-ana) .ust-menu a { color: var(--yazi); }
:is(.sayfa-detay, .sayfa-ana) .ust-menu a:hover { background: var(--kar-zemin); }
:is(.sayfa-detay, .sayfa-ana) .ust-menu a.aktif { background: var(--kart); border-color: var(--cizgi); box-shadow: var(--kart-golge); }
:is(.sayfa-detay, .sayfa-ana) .tema-dugme { background: var(--kart); border-color: var(--cizgi); color: var(--yazi); box-shadow: var(--kart-golge); }
/* Slogan menüyü alt satıra itmesin */
@media (max-width: 1180px) { .ust .slogan { display: none; } }
@media (max-width: 760px) { :is(.sayfa-detay, .sayfa-ana) .ust { justify-content: flex-start; } }

/* Üst çubuk artık hero'nun üstünde değil: hero'lardaki "çubuk payı" boşlukları küçüldü */
:is(.sayfa-detay, .sayfa-ana) .hero-ust { padding-top: 30px; }
.sayfa-ana .hero-ust, .sayfa-rehber .hero-ust { padding-top: 40px; }
:is(.sayfa-detay, .sayfa-ana) .sayac { top: 34px; }
.sayfa-ana .sayac { top: 60px; }
.kar-tablosu { top: 38px; }
.sayfa-ana .hero.hero-kartli { padding-top: 30px; }
@media (max-width: 900px) { .sayfa-ana .hero.hero-kartli { padding-top: 24px; } }
@media (max-width: 760px) {
    :is(.sayfa-detay, .sayfa-ana) .hero-ust, .sayfa-ana .hero-ust { padding-top: 24px; }
    :is(.sayfa-detay, .sayfa-ana) .sayac { top: auto; }
    .sayfa-detay .sayac { top: 110px; }
}
/* Dar ekran: menü kelimeleri bölünmesin; logo + tema düğmesi üstte, menü altta tek satır, yana kaydırılır */
.ust-menu a { white-space: nowrap; }
@media (max-width: 760px) {
    body > .ust { flex-wrap: wrap; row-gap: 8px; }
    body > .ust .tema-dugme { margin-left: auto; }
    body > .ust .ust-menu {
        order: 3; flex: 1 0 100%; margin: 0 -16px; padding: 0 12px 2px;
        overflow-x: auto; scrollbar-width: none;
    }
    body > .ust .ust-menu::-webkit-scrollbar { display: none; }
}

/* ================= Açılır menüler (menu.php) ================= */
.menu-oge { display: flex; }
.ust-menu .menu-oge > a { display: inline-flex; align-items: center; gap: 5px; }
.mo-ok { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform .2s; }

.menu-panel {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 16px; right: 16px;
    max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain;
    padding: 22px 24px; border-radius: 20px; text-align: left;
    background: var(--kart-duz); color: var(--yazi); border: 1px solid var(--cizgi);
    box-shadow: 0 24px 60px -20px rgba(10, 30, 60, .35), 0 4px 14px -6px rgba(10, 30, 60, .15);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .16s .1s, transform .16s .1s, visibility 0s .26s;
}
/* İmleç bağlantıdan panele geçerken boşlukta kapanmasın */
.menu-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.menu-oge.acik > .menu-panel,
.menu-oge:has(:focus-visible) > .menu-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) {
    .menu-oge:hover > .menu-panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .menu-oge:hover .mo-ok { transform: rotate(180deg); }
}
.menu-oge.kapat > .menu-panel { opacity: 0 !important; visibility: hidden !important; }
.menu-oge.acik .mo-ok { transform: rotate(180deg); }

/* Panel içindeki bağlantılar üst menü düğmesi gibi görünmesin */
.ust-menu .menu-panel a {
    padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
    font-size: inherit; font-weight: inherit; color: inherit; white-space: normal;
}
.ust-menu .menu-panel a:hover { background: none; color: var(--vurgu); }

.mp-baslik { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); display: flex; align-items: center; gap: 8px; }
.ust .menu-panel .mp-canli { padding: 2px 8px; border-radius: 999px; font-size: 10.5px; letter-spacing: .04em; background: var(--kar-zemin); color: var(--kar-yazi); }
.mp-bos { margin: 0 0 12px; font-size: 14px; color: var(--soluk); }
.ust-menu .menu-panel a.mp-tumu { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--vurgu); }
.ust-menu .menu-panel a.mp-tumu:hover { text-decoration: underline; }

/* İki sütunlu panel: solda en karlı 5, sağda liste */
.mp-iki { display: grid; grid-template-columns: minmax(250px, 300px) 1fr; gap: 28px; }
.mp-sol { padding-right: 28px; border-right: 1px solid var(--cizgi); }
.mp-karli { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ust-menu .menu-panel .mp-karli a {
    display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 12px; transition: background .15s;
}
.ust-menu .menu-panel .mp-karli a:hover { background: var(--kar-zemin); color: inherit; }
.ust .menu-panel .mp-sira { font-size: 13px; font-weight: 700; color: var(--soluk); text-align: center; font-variant-numeric: tabular-nums; }
.ust .menu-panel .mp-ad { min-width: 0; display: grid; }
.ust .menu-panel .mp-ad b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ust .menu-panel .mp-ad small { font-size: 12.5px; color: var(--soluk); }
.ust .menu-panel .mp-cm { font-size: 13px; color: var(--soluk); white-space: nowrap; }
.ust .menu-panel .mp-cm b { font-size: 20px; font-weight: 800; color: var(--kar-yazi); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.mp-sutunlar { list-style: none; margin: 0; padding: 0; columns: 4 150px; column-gap: 24px; }
.mp-merkez-il li { break-inside: avoid; padding: 0 0 10px; }
.ust .menu-panel .mp-il { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--soluk); margin-bottom: 2px; break-after: avoid; }
.ust-menu .menu-panel .mp-sutunlar a { display: block; padding: 2px 0; font-size: 14px; }
.mp-sutunlar a small { color: var(--kar-yazi); font-weight: 700; font-size: 12px; }
.mp-bolgeler { columns: 5 120px; }
.mp-bolge { padding-bottom: 12px; }
.ust .mp-bolge .mp-il { padding-top: 2px; }

/* Rehber panelleri: başlık + kısa açıklama, iki sütun */
.mp-bolumler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; }
.ust-menu .menu-panel .mp-bolumler a {
    display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start;
    padding: 10px 12px; border-radius: 12px; transition: background .15s;
}
.ust-menu .menu-panel .mp-bolumler a:hover { background: var(--kar-zemin); color: inherit; }
.ust-menu .menu-panel .mp-bolumler a:hover b { color: var(--vurgu); }
.mp-bolumler b { display: block; font-size: 15px; line-height: 1.3; }
.mp-bolumler small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--soluk); }
.ust .menu-panel .mp-no { font-size: 15px; font-weight: 800; color: var(--vurgu); font-variant-numeric: tabular-nums; padding-top: 1px; }
.ust .menu-panel .mp-aralik { font-size: 14px; white-space: nowrap; }
.ust .menu-panel .mp-aralik small { display: inline; margin: 0 0 0 2px; font-size: 11px; font-weight: 600; }

@media (max-width: 900px) {
    .mp-iki { grid-template-columns: 1fr; gap: 18px; }
    .mp-sol { padding: 0 0 18px; border-right: 0; border-bottom: 1px solid var(--cizgi); }
    .mp-bolumler { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .menu-panel { left: 8px; right: 8px; padding: 18px; max-height: calc(100svh - 130px); }
    .mp-sutunlar { columns: 2; }
}
@media (prefers-reduced-motion: reduce) { .menu-panel, .mo-ok { transition: none; } }

/* Eski ".ust span" kuralı panel içine taşmasın */
.ust .menu-panel span { color: inherit; font-size: inherit; }
.ust .menu-panel .mp-sira, .ust .menu-panel .mp-ad small { color: var(--soluk); }
/* Santim paneli: cm aralığı daha geniş sütun */
.ust-menu .menu-panel .mp-santim a { grid-template-columns: 78px 1fr; }
/* Menü + slogan + tema düğmesi tek satıra sığsın */
@media (min-width: 761px) {
    body > .ust { flex-wrap: nowrap; }
    .ust-menu > a, .ust-menu .menu-oge > a { padding: 7px 11px; }
}
@media (max-width: 1240px) { .ust .slogan { display: none; } }
.mp-merkez-il { columns: 5 125px; column-gap: 18px; }
@media (max-width: 760px) { .mp-merkez-il, .mp-bolgeler { columns: 2; } }
/* Panel açıkken yüzen "Kar Alarmı Kur" düğmesinin (z 990) üstünde kalsın; çerez kutusu (1000) ve modal (1200) yine üstte */
body > .ust:has(.menu-oge.acik, .menu-oge:hover, .menu-oge :focus-visible) { z-index: 995; }

/* ================= Açılır menü ikonları ================= */
/* Kar seviyesi renkleri (Santim Rehberi paletiyle aynı aile) */
.menu-panel { --sv0: #a87a4f; --sv1: #7a93a8; --sv2: #4f9bd8; --sv3: #2b7fd0; --sv4: #1665b5; --sv5: #0b4f95; }
:root[data-tema="koyu"] .menu-panel { --sv0: #d6ab7f; --sv1: #aec3d6; --sv2: #8cc2ee; --sv3: #6db0f3; --sv4: #8dccff; --sv5: #c2e3ff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="acik"]) .menu-panel { --sv0: #d6ab7f; --sv1: #aec3d6; --sv2: #8cc2ee; --sv3: #6db0f3; --sv4: #8dccff; --sv5: #c2e3ff; }
}
.menu-panel .mk-sv0 { --c: var(--sv0); } .menu-panel .mk-sv1 { --c: var(--sv1); } .menu-panel .mk-sv2 { --c: var(--sv2); }
.menu-panel .mk-sv3 { --c: var(--sv3); } .menu-panel .mk-sv4 { --c: var(--sv4); } .menu-panel .mk-sv5 { --c: var(--sv5); }

.mi-ikon, .mk-ikon { display: block; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mk-ikon { color: var(--c, var(--vurgu)); }
.mk-ikon .mk-kar { fill: currentColor; stroke: none; opacity: .9; }
.mk-ikon .mk-direk, .mk-ikon path[d^="M16.5 6"], .mk-ikon path[d^="M16.5 9"], .mk-ikon path[d^="M16.5 13"] { stroke: var(--soluk); stroke-width: 1.4; }
.mk-ikon .mk-zemin { stroke: var(--soluk); stroke-width: 1.2; opacity: .6; }

/* İkon kutusu */
.ust .menu-panel .mp-kutu {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
    color: var(--c, var(--vurgu));
    background: color-mix(in srgb, var(--c, var(--vurgu)) 13%, transparent);
    transition: background .15s, transform .15s;
}
.ust .menu-panel .mp-kutu svg { width: 22px; height: 22px; }
.ust-menu .menu-panel a:hover .mp-kutu { background: color-mix(in srgb, var(--c, var(--vurgu)) 22%, transparent); transform: translateY(-1px); }

/* En karlı 5 listesi */
.ust-menu .menu-panel .mp-karli a { grid-template-columns: 38px 1fr auto; gap: 12px; padding: 7px 10px; }
.ust .menu-panel .mp-ad em { font-style: normal; font-weight: 700; color: var(--c); }

/* Sağ listelerde karlı merkez / il: küçük ölçer + cm */
.ust .menu-panel .mp-kar { display: inline-flex; align-items: center; gap: 2px; margin-left: 2px; color: var(--c); font-weight: 700; font-size: 12px; vertical-align: -1px; }
.mp-kar .mk-ikon { width: 15px; height: 15px; }

/* Rehber panelleri: ikon kutusu + başlık */
.ust-menu .menu-panel .mp-bolumler a, .ust-menu .menu-panel .mp-santim a { grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.ust .menu-panel .mp-bolumler b .mp-no { font-style: normal; font-size: 12px; font-weight: 700; color: var(--soluk); margin-right: 7px; padding: 0; letter-spacing: .02em; }
.ust .menu-panel .mp-bolumler b .mp-aralik {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
    font-style: normal; font-size: 11.5px; font-weight: 700; white-space: nowrap;
    color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent);
}
/* Kar ölçer: dolu basamak seviye renginde, boşlar soluk */
.mk-ikon rect { stroke: none; }
.mk-ikon .mk-dolu { fill: currentColor; }
.mk-ikon .mk-bos { fill: var(--soluk); opacity: .22; }

/* Logo yanındaki dönen slogan */
.ust .slogan { display: inline-block; white-space: nowrap; overflow: hidden; }
.ust .slogan > span { display: inline-block; transition: opacity .25s, transform .25s; }
.ust .slogan > span.cikis { opacity: 0; transform: translateY(-6px); }
@media (max-width: 1240px) { .ust .slogan { display: none; } }
@media (prefers-reduced-motion: reduce) { .ust .slogan > span { transition: none; } }
/* Uzun sloganlar kesilmesin: en fazla iki satır, menüyü itmeden */
.ust .slogan { white-space: normal; overflow: visible; max-width: 240px; font-size: 13px; line-height: 1.3; }
.ust .slogan > span { display: block; font-size: inherit; color: inherit; }
.ust .logo { white-space: nowrap; flex-shrink: 0; }
.ust .slogan { font-size: 10.4px; } /* 13px − %20 */