/**
 * İSGTİM App Core — Yardım kılavuzu (?view=yardim) yüzey CSS'i.
 * admin.css emsali: core-yüzey stili kendi dosyasında; bootstrap.php yalnız bu view'da
 * enqueue eder, isgtim-app-ui.css'ten SONRA yüklenir (page-header override sırası).
 * Bölüm/karar detayı: decisions §5.10.
 */

/* Bölümler modül filter'ından gelir (inc/guide/*); boş-durum linkleri #id çapalarına derin link. */
.app-guide { margin-top: var(--isg-space-lg); }
@media (min-width: 900px) {
    .app-guide {
        display: grid;
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: var(--isg-space-2xl);
        align-items: start;
    }
    /* Yapışkan page-header'ın (ölçülen --guide-header-h) altına otursun; uzun sidebar iç kaydırır. */
    .app-guide__nav {
        position: sticky;
        top: calc(var(--guide-header-h, 56px) + var(--isg-space-md));
        align-self: start;
        max-height: calc(100vh - var(--guide-header-h, 56px) - var(--isg-space-2xl));
        overflow-y: auto;
    }
}

/* App header yok → main'in 2xl üst margin'i (header'dan ayırmak içindi) hem ölü boşluk hem
   sticky page-header'ı bozuyor → sıfırla (auto-centering korunur). */
.app-guide-page { margin-top: 0; }
/* App header gizli → geri-ok'lu page-header yapışkan (dönüş yolu hep görünür). top:0 → üstünden
   içerik sızmaz, nefes payı iç padding'den. */
.app-guide-page .app-page-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--isg-color-bg);
    padding-top: var(--isg-space-sm);
    padding-bottom: var(--isg-space-sm);
    border-bottom: 1px solid var(--isg-color-border);
}

/* İçindekiler: mobilde <details> kartı (kapalı başlar); masaüstünde summary gizli +
   panel görünür (details JS ile [open] tutulur — bkz. yardim.php script'i). */
.app-guide__toc {
    margin-bottom: var(--isg-space-xl);
    border: 1px solid var(--isg-color-border);
    border-radius: var(--isg-radius);
    background: var(--isg-color-neutral-bg);
}
.app-guide__toc-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--isg-space-xs);
    padding: var(--isg-space-sm) var(--isg-space-lg);
    font-weight: 600;
}
.app-guide__toc-summary::-webkit-details-marker { display: none; }
.app-guide__toc-caret { margin-left: auto; color: var(--isg-color-muted); transition: transform var(--isg-transition); }
.app-guide__toc[open] .app-guide__toc-caret { transform: rotate(180deg); }
.app-guide__toc-panel { padding: 0 var(--isg-space-lg) var(--isg-space-md); }
@media (min-width: 900px) {
    /* Masaüstünde <details> JS ile açık tutulur (HTML `open` fallback): kapalı <details> modern
       tarayıcıda ::details-content ile gizlenip CSS force-open'ı ezer → JS tek sağlam yol. */
    .app-guide__toc { margin: 0; border: none; background: none; }
    .app-guide__toc-summary { display: none; }
    .app-guide__toc-panel { padding: 0; }
}
.app-guide__toc-group + .app-guide__toc-group { margin-top: var(--isg-space-lg); }
.app-guide__toc-group-title {
    display: flex;
    align-items: center;
    gap: var(--isg-space-xs);
    font-size: var(--isg-font-size-sm);
    font-weight: 600;
    color: var(--isg-color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--isg-space-xs);
    text-decoration: none;
}
/* Grup başlığı link (§5.10): aktif grup vurgulu, diğerleri o modülün sayfasına götürür. */
.app-guide__toc-group-title:hover { color: var(--isg-color-text); }
.app-guide__toc-group-title.is-active { color: var(--isg-color-primary); }
.app-guide__toc-list { list-style: none; margin: 0; padding: 0 0 0 var(--isg-space-md); }
.app-guide__toc-list li { margin: 0; }
.app-guide__toc-link {
    display: block;
    padding: var(--isg-space-xs) var(--isg-space-sm);
    border-radius: var(--isg-radius-sm);
    text-decoration: none;
    color: var(--isg-color-text);
}
.app-guide__toc-link:hover { background: var(--isg-color-btn-tint); }
.app-guide__section {
    margin-bottom: var(--isg-space-3xl);
    /* Çapa id'si bölümde (heading'de değil) → scroll-margin burada: kaydırılan bölüm yapışkan
       page-header altında kalmasın (yükseklik JS ile --guide-header-h'e ölçülür, wrap'a dayanıklı). */
    scroll-margin-top: calc(var(--guide-header-h, 88px) + var(--isg-space-lg));
}
.app-guide__section:last-child { margin-bottom: 0; }
/* Aktif-grup başlığı: sayfada tek modül → bölüm (h3) başlıklarının üstünde grup kimliği (§5.10). */
.app-guide__group-heading {
    display: flex;
    align-items: center;
    gap: var(--isg-space-sm);
    font-size: var(--isg-font-size-lg);
    color: var(--isg-color-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--isg-space-xl);
}
.app-guide__heading {
    display: flex;
    align-items: center;
    gap: var(--isg-space-sm);
    padding-bottom: var(--isg-space-sm);
    border-bottom: 1px solid var(--isg-color-border);
    margin-bottom: var(--isg-space-lg);
}
/* Okuma içeriği → margin ritmi (app-help__body emsali). */
.app-guide__body > :first-child { margin-top: 0; }
.app-guide__body > :last-child  { margin-bottom: 0; }
.app-guide__body h4 { margin: var(--isg-space-lg) 0 var(--isg-space-xs); }
.app-guide__body p  { margin: 0 0 var(--isg-space-sm); }
.app-guide__body ul,
.app-guide__body ol { margin: 0 0 var(--isg-space-sm); padding-left: var(--isg-space-xl); }
.app-guide__body li { margin-bottom: var(--isg-space-xs); }

/* Başa dön — yüzen buton (yardim.php); mobilde TOC yapışkan değil → tek dokunuşla menüye dönüş.
   Masaüstünde sidebar yapışkan → gizli. */
.app-back-to-top {
    position: fixed;
    right: var(--isg-space-lg);
    bottom: var(--isg-space-lg);
    z-index: 45;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    font-size: var(--isg-font-size-lg);
    border-radius: 50%;
    border: 1px solid var(--isg-color-border);
    background: var(--isg-color-card);
    color: var(--isg-color-text);
    box-shadow: var(--isg-shadow-overlay);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--isg-transition), visibility var(--isg-transition);
}
.app-back-to-top.is-visible { opacity: 1; visibility: visible; }
.app-back-to-top:hover { border-color: var(--isg-color-text); }
@media (min-width: 900px) { .app-back-to-top { display: none; } }