/* ==========================================================================
   LAYOUT — Üst bar, yan menü, içerik sütunu, sağ liste, alt bilgi
   ========================================================================== */

/* --------------------------------------------------------------- Üst bar */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--header-h);
    z-index: 60;
    background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 0 1rem;
}

.site-header__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.site-header__burger { display: inline-flex; }

/* Marka */
.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--text);
    text-decoration: none;
    flex-shrink: 0;
}
.brand:hover { text-decoration: none; }
.brand__mark {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: var(--radius);
    background: linear-gradient(140deg, var(--primary), var(--primary-strong));
    color: #fff;
    font-weight: 800;
    font-size: .68rem;
    letter-spacing: .04em;
    box-shadow: var(--shadow-sm);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text strong { font-size: .95rem; font-weight: 700; }
.brand__text small  { font-size: .68rem; color: var(--text-faint); }

/* Sürüm rozeti */
.version-badge {
    font-size: .7rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
    padding: .22rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- Kabuk */
.doc-shell {
    padding-top: var(--header-h);
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
    align-items: start;
    min-height: calc(100vh - var(--header-h));
}
.doc-shell--no-toc { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }

/* ------------------------------------------------- Masaüstü: menüyü daraltma
   Başlıktaki menü düğmesi masaüstünde de görünür ve yan menüyü gizleyip içeriği
   genişletir. Seçim tarayıcıda hatırlanır (bkz. assets/js/sidebar.js).
   Mobilde (<=860px) bu kurallar geçersizdir; orada düğme çekmeceyi açar. */
@media (min-width: 861px) {
    body.is-nav-collapsed .doc-sidebar { display: none; }
    body.is-nav-collapsed .doc-shell { grid-template-columns: minmax(0, 1fr) var(--toc-w); }
    body.is-nav-collapsed .doc-shell--no-toc { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 861px) and (max-width: 1080px) {
    /* Bu aralıkta sağdaki "Bu sayfada" listesi gizli olduğu için tek sütun kalır. */
    body.is-nav-collapsed .doc-shell { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ Yan menü */
.doc-sidebar {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-right: 1px solid var(--border);
    background: var(--bg-elev);
    padding: 1.1rem .85rem 3rem;
}

.doc-nav__home {
    display: block;
    padding: .5rem .7rem;
    margin-bottom: .5rem;
    font-weight: 650;
    font-size: var(--fs-sm);
    color: var(--text);
    border-radius: var(--radius);
}
.doc-nav__home:hover { background: var(--surface-2); text-decoration: none; }
.doc-nav__home.is-active { background: var(--primary-soft); color: var(--primary); }

.doc-nav__group { margin-bottom: .15rem; }
.doc-nav__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    list-style: none;
    padding: .5rem .7rem;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-faint);
    border-radius: var(--radius);
    user-select: none;
}
.doc-nav__summary::-webkit-details-marker { display: none; }
.doc-nav__summary:hover { background: var(--surface-2); color: var(--text-muted); }
.doc-nav__summary .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform var(--tr); }
.doc-nav__group[open] > .doc-nav__summary .chev { transform: rotate(180deg); }

.doc-nav__items { padding: .15rem 0 .5rem; }

.doc-nav__link {
    display: block;
    padding: .38rem .7rem .38rem 1rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.doc-nav__link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.doc-nav__link.is-active {
    color: var(--primary);
    background: var(--primary-softer);
    border-left-color: var(--primary);
    font-weight: 650;
}
.doc-nav__link.is-soon {
    color: var(--text-faint);
    cursor: default;
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}
.doc-nav__link.is-soon em {
    font-style: normal;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .75;
}
.doc-nav__link.is-soon:hover { background: transparent; color: var(--text-faint); }

/* --------------------------------------------------------- İçerik alanı */
.doc-main {
    padding: 2rem 2.5rem 3.5rem;
    min-width: 0;             /* grid içindeki uzun kod blokları taşmasın */
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    color: var(--text-faint);
    margin-bottom: 1.5rem;
}
.breadcrumb__sep { opacity: .55; }
.breadcrumb__current { color: var(--text-muted); }

/* ------------------------------------------------------ "Bu sayfada" */
.doc-toc {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 2rem 1.25rem 3rem .25rem;
    font-size: var(--fs-sm);
}
.doc-toc__title {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-faint);
    margin: 0 0 .6rem;
}
.doc-toc__list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.doc-toc__item a {
    display: block;
    padding: .28rem .7rem;
    color: var(--text-muted);
    border-left: 2px solid transparent;
    margin-left: -1px;
    line-height: 1.4;
}
.doc-toc__item a:hover { color: var(--text); text-decoration: none; }
.doc-toc__item--h3 a { padding-left: 1.4rem; font-size: .78rem; }
.doc-toc__item a.is-active {
    color: var(--primary);
    border-left-color: var(--primary);
    font-weight: 650;
}

/* ------------------------------------------------------------- Alt bilgi */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-elev);
    padding: 1.4rem 1.5rem;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.site-footer__inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: space-between;
}
.site-footer p { margin: 0; }

/* ------------------------------------------------------------ Mobil çekmece */
.doc-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: rgba(8, 10, 16, .5);
    backdrop-filter: blur(2px);
    z-index: 50;
}
.doc-backdrop[hidden] { display: none; }

body.is-drawer-open { overflow: hidden; }

/* Çekmece yalnızca mobil kırılımında geçerlidir: 860px üstünde menü zaten
   sabit bir sütundur. Pencere bu genişliğe çıktığında "is-drawer-open"
   durumu kalırsa perde tüm sayfayı karartıp tıklanamaz hâle getiriyordu.
   Bu bloğa kadar perde her genişlikte görünüyordu. */
@media (min-width: 861px) {
    .doc-backdrop { display: none !important; }
    body.is-drawer-open { overflow: auto; }
}

/* ------------------------------------------------------------- Kırılımlar */
@media (max-width: 1280px) {
    :root { --toc-w: 210px; }
    .doc-main { padding: 1.75rem 1.75rem 3rem; }
}

@media (max-width: 1080px) {
    .doc-shell,
    .doc-shell--no-toc { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
    .doc-toc { display: none; }
}

@media (max-width: 860px) {
    .doc-shell,
    .doc-shell--no-toc { grid-template-columns: minmax(0, 1fr); }

    .doc-sidebar {
        position: fixed;
        top: var(--header-h);
        left: 0;
        width: min(86vw, 320px);
        z-index: 55;
        transform: translateX(-100%);
        transition: transform 200ms ease;
        box-shadow: var(--shadow-lg);
    }
    body.is-drawer-open .doc-sidebar { transform: none; }

    .doc-main { padding: 1.25rem 1.1rem 3rem; }
    .doc-content h1 { font-size: 1.6rem; }
    .doc-content h2 { font-size: 1.24rem; margin-top: 2.2rem; }

    .brand__text small { display: none; }
}