/* =========================================================================
   EMO PA5X  --  03-duzen

   Ust bar, alt bilgi ve duyarli davranis

   Bu dosya pa5x.css'in bir parcasidir. Parcalar duzende sirayla
   baglanir; kaskad sirasi dosya adlarindaki numaraya baglidir.
   ========================================================================= */

/* --------------------------------------------------------------------------
   5. Ust bar
   -------------------------------------------------------------------------- */
.ustbar { position: sticky; top: 0; z-index: 100; isolation: isolate; }

/* 5.1 Ana bar */
.ustbar-ana {
    position: relative;
    height: var(--bar);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--cizgi);
    background: color-mix(in srgb, var(--zemin) 84%, transparent);
    backdrop-filter: saturate(160%) blur(16px);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    transition: height var(--h2), border-color var(--h2);
}

.ustbar[data-kaydi="1"] .ustbar-ana { height: 56px; border-bottom-color: var(--cizgi-k); }

.ustbar-ana .kap { display: flex; align-items: stretch; gap: var(--a5); height: 100%; }

/* 5.2 Marka */
.marka {
    display: flex;
    align-items: center;
    gap: var(--a3);
    flex: 0 0 auto;
    padding-right: var(--a5);
}

.marka:hover { color: inherit; }
.marka:hover img { opacity: .82; }

.marka img { height: 42px; width: auto; transition: height var(--h2), opacity var(--h1); }
.ustbar[data-kaydi="1"] .marka img { height: 34px; }

.marka-ayrac { width: 1px; height: 26px; background: var(--cizgi); flex: 0 0 auto; }

.marka-yazi { display: flex; flex-direction: column; line-height: 1.2; }

.marka-yazi b {
    font-size: var(--yz-3);
    font-weight: 600;
    letter-spacing: -.022em;
    color: var(--yazi);
}

.marka-yazi span {
    font-family: var(--f-mono);
    font-size: var(--yz-1);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--yazi-3);
}

/* 5.3 Gezinme: tam yukseklik sekmeler + kayan gosterge
   Gosterge JS ile konumlanir. JS yoksa etkin sekme kendi alt cizgisini cizer,
   yani gezinme betiksiz de dogru gorunur. */
.menu {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 100%;
    /* Bos alan menunun soluna birakilir; menu sag kumeye yaslanir. */
    margin-left: auto;
}

.menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    font-size: var(--yz-2);
    font-weight: 600;
    /* Buyuk harfte harfler sikisir; nefes almasi icin arasi acilir. */
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--yazi-3);
    white-space: nowrap;
    transition: color var(--h1);
}

.menu a svg { display: none; }

/* Panel basligi yalnizca tam ekran mobil menude gorunur. */
.menu-bas { display: none; }

.menu a:hover { color: var(--yazi); }

.menu a.etkin { color: var(--yazi); font-weight: 650; }

/* Betiksiz durum icin alt cizgi */
.menu:not([data-ibre]) a.etkin::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 2px;
    background: var(--vurgu);
}

/* Sekmeler arasinda kayan gosterge */
.menu-ibre {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--vurgu);
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    transition: transform var(--h2), width var(--h2), opacity var(--h1);
}

.menu[data-ibre] .menu-ibre { opacity: 1; }

/* 5.4 Sag bolum */
.ustbar-sag { display: flex; align-items: center; gap: var(--a2); flex: 0 0 auto; }

.ikon-dg {
    position: relative;
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--cizgi);
    border-radius: var(--r2);
    background: transparent;
    color: var(--yazi-2);
    cursor: pointer;
    transition: color var(--h1), border-color var(--h1), background var(--h1);
}

.ikon-dg:hover { color: var(--yazi); border-color: var(--cizgi-k); background: var(--yuzey); }
.ikon-dg svg { width: 17px; height: 17px; }

.ikon-dg .sayac {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--vurgu);
    color: #180800;
    font-family: var(--f-mono);
    font-size: var(--yz-1);
    font-weight: 700;
}

/* Tema degistirme dugmesi simdilik gizli. Isaretleme ve tema.js yerinde
   duruyor; geri acmak icin bu kurali silmek yeterli. display:none ayrica
   dugmeyi sekme sirasindan da cikarir. */
.tema-dugme { display: none; }

.tema-dugme .ikon-ay { display: none; }
:root[data-tema="acik"] .tema-dugme .ikon-gunes { display: none; }
:root[data-tema="acik"] .tema-dugme .ikon-ay { display: block; }

@media (prefers-color-scheme: light) {
    :root:not([data-tema="koyu"]) .tema-dugme .ikon-gunes { display: none; }
    :root:not([data-tema="koyu"]) .tema-dugme .ikon-ay { display: block; }
}

/* 5.5 Kullanici */
.kul-menu { position: relative; }

.kul-dugme {
    display: inline-flex;
    align-items: center;
    gap: var(--a2);
    height: 34px;
    padding: 0 10px 0 4px;
    border: 1px solid var(--cizgi);
    border-radius: var(--r2);
    background: transparent;
    color: var(--yazi);
    font: inherit;
    cursor: pointer;
    transition: border-color var(--h1), background var(--h1);
}

.kul-dugme:hover { border-color: var(--cizgi-k); background: var(--yuzey); }

.kul-dugme .ok { width: 13px; height: 13px; opacity: .4; transition: transform var(--h1); }
.kul-dugme[aria-expanded="true"] .ok { transform: rotate(180deg); }

.kul-ad { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.18; }

.kul-ad b { font-size: var(--yz-2); font-weight: 550; letter-spacing: -.02em; }

.kul-ad span {
    font-family: var(--f-mono);
    font-size: var(--yz-1);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--yazi-3);
}

.avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--vurgu);
    color: #180800;
    font-size: var(--yz-1);
    font-weight: 700;
    letter-spacing: -.01em;
}

.avatar-buyuk { width: 40px; height: 40px; border-radius: 11px; font-size: var(--yz-4); }

/* 5.6 Acilir menu */
.acilir {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 258px;
    padding: var(--a2);
    border: 1px solid var(--cizgi);
    border-radius: var(--r3);
    background: var(--yuzey);
    box-shadow: var(--golge);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity var(--h1), transform var(--h1), visibility var(--h1);
    z-index: 120;
}

.acilir[data-acik="1"] { opacity: 1; visibility: visible; transform: translateY(0); }

.acilir-bas {
    display: flex;
    align-items: center;
    gap: var(--a3);
    padding: var(--a3);
    margin-bottom: var(--a2);
    border-bottom: 1px solid var(--cizgi);
}

.acilir-bas b { display: block; font-size: var(--yz-3); font-weight: 600; letter-spacing: -.022em; }

.acilir-bas span {
    font-family: var(--f-mono);
    font-size: var(--yz-1);
    color: var(--yazi-3);
    word-break: break-all;
}

.acilir-ayrac { height: 1px; background: var(--cizgi); margin: var(--a2) 0; }

.acilir a,
.acilir button {
    display: flex;
    align-items: center;
    gap: var(--a3);
    width: 100%;
    padding: 9px var(--a3);
    border: 0;
    border-radius: var(--r2);
    background: none;
    color: var(--yazi-2);
    font: inherit;
    font-size: var(--yz-3);
    text-align: left;
    cursor: pointer;
    transition: background var(--h1), color var(--h1);
}

.acilir a svg,
.acilir button svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .55; }

.acilir a:hover,
.acilir button:hover { background: var(--yuzey-2); color: var(--yazi); }

.acilir a:hover svg,
.acilir button:hover svg { opacity: 1; color: var(--vurgu); }

.acilir .tehlike:hover { background: var(--hata-is); color: var(--hata); }
.acilir .tehlike:hover svg { color: var(--hata); }

.acilir form { margin: 0; }

.menu-ac {
    display: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid var(--cizgi);
    border-radius: var(--r2);
    background: transparent;
    color: var(--yazi);
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   13. Alt bilgi
   -------------------------------------------------------------------------- */
.altbar {
    flex: 0 0 auto;
    border-top: 1px solid var(--cizgi);
    padding-block: var(--a5);
    font-family: var(--f-mono);
    font-size: var(--yz-1);
    letter-spacing: .03em;
    color: var(--yazi-3);
}

.altbar .kap { display: flex; align-items: center; justify-content: space-between; gap: var(--a4); flex-wrap: wrap; }
.altbar a { color: var(--yazi-3); }
.altbar a:hover { color: var(--vurgu); }

/* --------------------------------------------------------------------------
   17. Duyarli
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yan-duzen { grid-template-columns: 1fr; gap: var(--a5); }
    .ustbar-ana .kap { gap: var(--a5); }
    .menu { gap: var(--a5); }
}

@media (max-width: 920px) {
    .kahraman-ic { grid-template-columns: 1fr; gap: var(--a6); padding: var(--a7) 0 var(--a6); }
    .kahraman h1 { max-width: none; }
    .kahraman-panel { border-left: 0; border-top: 1px solid var(--cizgi); padding-left: 0; padding-top: var(--a5); }
    .kahraman-notlar { gap: var(--a6); margin-top: var(--a6); }
}

@media (max-width: 860px) {
    .menu-ac { display: grid; }

    /* Bosluk normalde menunun "margin-left: auto" ile birakiyordu; menu
       dar ekranda gizlendigi icin dugmeler logoya yapisiyordu. Bosluk
       artik dogrudan sag kumeye birakilir. */
    .ustbar-sag { margin-left: auto; }

    /* backdrop-filter tasiyan bir oge, icindeki position:fixed ogeler icin
       kapsayici blok olur. Menu ustbarin icinde oldugu icin "inset: 0"
       ekrani degil 66px'lik bari kapliyordu. Dar ekranda bulaniklik
       kaldirilir; panel boylece gercekten viewport'a gore konumlanir. */
    .ustbar-ana {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--zemin);
    }

    /* --- Tam ekran mobil menu ---
       Panel ekranin tamamini kaplar, kendi ust seridini tasir ve arkadaki
       sayfa kaydirilamaz. Boylece uzun menulerde de icerik kesilmez. */
    .menu {
        position: fixed;
        inset: 0;
        z-index: 260;
        /* Yatay seritten devralinan olculer sifirlanir. */
        height: auto;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0 var(--a5) var(--a6);
        background: var(--zemin);
        overflow-y: auto;
        overscroll-behavior: contain;
        display: none;
    }

    .menu[data-acik="1"] { display: flex; animation: menu-gir var(--h2) ease both; }

    @keyframes menu-gir {
        from { opacity: 0; transform: translateY(-8px); }
        to { opacity: 1; transform: none; }
    }

    /* Panelin kendi basligi: logo solda, kapat sagda, ustbarla ayni yukseklik. */
    .menu-bas {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--a4);
        flex: 0 0 auto;
        height: var(--bar);
        margin-inline: calc(var(--a5) * -1);
        padding-inline: var(--a5);
        border-bottom: 1px solid var(--cizgi);
    }

    .menu-bas img { height: 34px; width: auto; }

    .menu-kapat {
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        border: 1px solid var(--cizgi);
        border-radius: var(--r2);
        background: transparent;
        color: var(--yazi-2);
        cursor: pointer;
        transition: all var(--h1);
    }

    .menu-kapat:hover { border-color: var(--cizgi-k); color: var(--yazi); }

    .menu-kapat svg { width: 20px; height: 20px; }

    /* Dokunma hedefleri buyur; yazi da oyle. */
    .menu a {
        display: flex;
        align-items: center;
        /* Yatay bardaki "height: 100%" burada her baglantiyi panel
           yuksekligine cikariyordu; dikey duzende yukseklik icerikten. */
        height: auto;
        white-space: normal;
        /* Dokunma hedefi 44px'in altina dusmesin diye dolgu korunur,
           yazi olcegi normal govdeye cekildi. */
        padding: 13px 0;
        border-bottom: 1px solid var(--cizgi);
        font-size: var(--yz-4);
        font-weight: 600;
        letter-spacing: .04em;
    }

    .menu a:last-child { border-bottom: 0; }

    /* Dikey panelde kayan gosterge yerine sagda nokta */
    .menu-ibre { display: none; }

    .menu a.etkin::after,
    .menu:not([data-ibre]) a.etkin::after {
        content: "";
        position: absolute;
        left: auto;
        right: 0;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--vurgu);
    }

    .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: 1fr; }

    .kul-ad, .kul-dugme .ok { display: none; }
    .kul-dugme { padding: 0 4px; }
}

@media (max-width: 600px) {
    body { font-size: 15px; }

    .kap { padding-inline: var(--a4); }

    .marka-yazi, .marka-ayrac { display: none; }


    .kahraman-ic { padding-top: var(--a6); }
    .kahraman-notlar { gap: var(--a5); }
    .kahraman-not b { font-size: 1.8rem; }

    .liste-satir { gap: var(--a4); }

    /* Bolumler arasi 80px dar ekranda cok; icerik ekrandan tasiyor. */
    .bolum { padding-top: var(--a6); }

    .bolum-bas { flex-wrap: wrap; gap: var(--a3); margin-top: var(--a4); }

    /* Genis ekranda tek satirda durmasi icin nowrap verilmisti;
       dar ekranda uzun basliklar tasiyor. */
    .bolum-bas h2 { white-space: normal; font-size: 1.35rem; }

    /* Kural cizgisi dar ekranda yer kaplamasin. */
    .bolum-bas .kural { display: none; }

    .altbar .kap { flex-direction: column; text-align: center; }
}

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

@media print {
    .ustbar, .altbar, .dg { display: none !important; }
    body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   25. Dar ekranda ust bar tasmasi
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Oturum acmamis kullanicida iki dugme + logo bara sigmiyor.
       Ikincil olan "Giris Yap" gizlenir; tam ekran menude zaten var. */
    .ustbar-sag .dg-kucuk:not(.dg-vurgu):not(.ikon-dg) { display: none; }
    .ustbar-sag .dg-kucuk { padding: 0 11px; }

    .marka img { height: 34px; }
    .ustbar[data-kaydi="1"] .marka img { height: 30px; }

    .ustbar-ana .kap { gap: var(--a3); }
}

@media (max-width: 380px) {
    .marka img { height: 30px; }
}

/* Etiket + "?" bilgi dugmesi ayni satirda; dugme <label> icine konmaz
   cunku alanin erisilebilir adina "?" karisir. */
.alan-basi {
    display: flex;
    align-items: center;
    gap: 2px;
}

.alan-basi > label { margin: 0; }

/* --------------------------------------------------------------------------
   Dar ekranda tablolar karta doner

   Yatay kaydirma yerine her satir kendi kartina gecer. Sutun basliklari
   hucrelerdeki data-etiket degerinden okunur; bu yuzden basliklar
   gizlendiginde bile hangi degerin ne oldugu bellidir.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    .tablo-sar { overflow-x: visible; }

    table.tablo,
    table.tablo tbody,
    table.tablo tr,
    table.tablo td { display: block; width: auto; }

    /* Baslik satiri karta donusen duzende gereksiz. */
    table.tablo thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

    table.tablo tr {
        margin-bottom: var(--a3);
        padding: var(--a4);
        border: 1px solid var(--cizgi);
        border-radius: var(--r2);
        background: var(--yuzey);
    }

    table.tablo tr.vurgulu { background: color-mix(in srgb, var(--vurgu) 6%, var(--yuzey)); }

    table.tablo td {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        gap: var(--a3);
        align-items: baseline;
        height: auto;
        padding: 6px 0;
        border: 0;
    }

    table.tablo td + td { border-top: 1px solid var(--cizgi); }

    table.tablo td::before {
        content: attr(data-etiket);
        font-family: var(--f-mono);
        font-size: var(--yz-1);
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--yazi-3);
    }

    /* Etiketsiz hucre (ornegin islem sutunu) tam genislik alir. */
    table.tablo td:not([data-etiket])::before { content: none; }

    table.tablo td:not([data-etiket]) { grid-template-columns: 1fr; }

    /* Sag yaslama karta donusunce anlamsiz. */
    table.tablo td.sag { text-align: left; }

    table.tablo td.sag .satir { justify-content: flex-start; }
}