/* Gen Koleji — iç sayfa şablonu (layouts/ic-sayfa + js/ic-sayfa.js) ve hero ikon baloncukları.
   --header-h ve --kisayol-bar-h JS tarafından ölçülüp :root'a yazılır; burada yedek değerler var. */

:root { --header-h: 105px; --kisayol-bar-h: 0px; }
@media (min-width: 1024px) { :root { --header-h: 121px; } }

/* ── Kısayol bölümleri: yapışkan header + mobil çubuk altında kalmasın ── */
[data-ic-icerik] [data-kisayol] {
    scroll-margin-top: calc(var(--header-h) + var(--kisayol-bar-h) + 24px);
}

/* ── Sol menü (lg+) — yapışkan, uzun listelerde kendi içinde kayar ── */
.ic-yan {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    max-height: calc(100vh - var(--header-h) - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.ic-yan::-webkit-scrollbar { display: none; }

/* Sayfa içi kısayol listesi (JS doldurur) — ince dikey ray + aktif kırmızı işaret */
.ic-kisayol-liste { border-left: 1px solid #E4E4E7; }
.ic-kisayol-liste a {
    display: block;
    margin-left: -1px;
    padding: 6px 8px 6px 14px;
    border-left: 2px solid transparent;
    font-size: 14px;
    line-height: 1.35;
    color: #58565B;
    transition: color .15s ease, border-color .15s ease;
}
.ic-kisayol-liste a:hover { color: #202020; }
.ic-kisayol-liste a.is-active { border-left-color: #E30111; color: #E30111; font-weight: 600; }

/* ── Mobil/tablet "Bu sayfada" çubuğu (<lg) ── */
.ic-bar {
    position: sticky;
    top: var(--header-h);
    z-index: 30;
    margin: -32px -24px 24px; /* konteynerin pt-8 boşluğunu yutar, alt menünün hemen altına oturur */
    padding: 0 24px;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid #F2F2F2;
    box-shadow: 0 8px 20px -18px rgba(32, 32, 32, .5);
}
.ic-bar-ok { transition: transform .2s ease; }
.ic-bar [aria-expanded="true"] .ic-bar-ok { transform: rotate(180deg); }
.ic-bar-liste {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 0 10px;
    background: #fff;
    border-bottom: 1px solid #F2F2F2;
    box-shadow: 0 24px 40px -20px rgba(32, 32, 32, .35);
}
.ic-bar-liste a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 24px;
    font-size: 15px;
    line-height: 1.3;
    color: #58565B;
}
.ic-bar-liste a::before {
    content: "";
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: #E4E4E7;
}
.ic-bar-liste a.is-active { color: #E30111; font-weight: 600; }
.ic-bar-liste a.is-active::before { background: #E30111; }

/* ── Alt menü sekme şeridi — scrollbar gizli, taşan kenarlarda yumuşak solma (JS sınıfları) ── */
.alt-menu-kaydir { scrollbar-width: none; -ms-overflow-style: none; }
.alt-menu-kaydir::-webkit-scrollbar { display: none; }
.alt-menu-kaydir.kaydir-sag { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.alt-menu-kaydir.kaydir-sol { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.alt-menu-kaydir.kaydir-sol.kaydir-sag {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

/* ── Hero ikon baloncukları — hafif süzülme ── */
.hero-balon { animation: hero-suzul 7s ease-in-out infinite; animation-delay: var(--gecikme, 0s); will-change: transform; }
@keyframes hero-suzul {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-balon { animation: none; }
}