/* ============================
   HAYAT BİLGİSİ
   Two interchangeable presentations, switched via .hb-view-toggle
   (same pattern as the Çevre Bilinci page) — room left for option #3.

   Option #1 "Kartlar": sticky-stacking cards (each card pins in place
   and gets covered by the next as you scroll — pure CSS position:sticky,
   no scroll-linked JS for the stacking itself).

   Option #2 "Bölünmüş Ekran": a full-height (100svh, non-scrolling)
   screen split in two — content on the left, the title list on the
   right. Hovering (or clicking/keyboard-selecting) a title sweeps a
   warm highlight bar under it and crossfades the content pane, mirrored
   from and matching the interaction language already built for the
   Technical Advantages page. White background throughout, on purpose.

   Both "Detayları Gör" buttons (.hb-card-btn) open the same shared modal.
============================ */

.hb-section {
    background-color: var(--bg-body);
}

.hb-section-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px;
}

.hb-view-toggle {
    margin: 70px 0 60px;
}

.hb-view {
    display: none;
}

.hb-view.is-active {
    display: block;
}

/* ---------- option #1: sticky stack ---------- */

.hb-stack {
    position: relative;
}

.hb-card {
    position: sticky;
    top: 130px;
    min-height: 68vh;
    display: flex;
    align-items: center;
    background-color: var(--bg-body);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -30px 50px rgba(0, 0, 0, .05);
    padding: 60px;
}

.hb-card-inner {
    max-width: 820px;
    margin: 0 auto;
}

.hb-card-count {
    display: block;
    font-size: 12px;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.hb-card-inner h2 {
    font-family: var(--font-secondary), sans-serif;
    font-size: clamp(34px, 4.2vw, 64px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--text-body);
    margin-bottom: 20px;
}

.hb-card-inner p {
    font-size: 17px;
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 62ch;
    margin-bottom: 36px;
}

/* ---------- option #2: split screen ---------- */

.hb-split {
    --hb-split-accent: #a8582e;
    --hb-split-accent-soft: #f3ddc4;
    position: relative;
    height: 100svh;
    overflow: hidden;
    box-sizing: border-box;
    padding-top: 130px;
    background-color: var(--bg-body);
}

.hb-split-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hb-split-body {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.hb-split-content {
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    align-content: center;
    padding: 0 80px;
    overflow-y: auto;
}

.hb-split-panel {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .5s cubic-bezier(.16, 1, .3, 1), visibility .5s;
}

.hb-split-panel.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hb-split-count {
    display: block;
    font-size: 12px;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.hb-split-panel h2 {
    font-family: var(--font-secondary), sans-serif;
    font-size: clamp(32px, 3.6vw, 54px);
    font-weight: 400;
    line-height: 1.1;
    color: var(--text-body);
    margin-bottom: 20px;
}

.hb-split-panel p {
    font-size: 16px;
    line-height: 1.75;
    color: var(--text-muted);
    max-width: 52ch;
    margin-bottom: 32px;
}

.hb-split-index {
    flex: 1 1 0;
    min-width: 0;
    border-left: 1px solid var(--border-soft);
    display: flex;
    align-items: center;
    padding: 0 80px;
    overflow-y: auto;
}

.hb-split-list {
    list-style: none;
    width: 100%;
}

.hb-split-trigger {
    display: flex;
    align-items: baseline;
    gap: 22px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
}

.hb-split-num {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.hb-split-title {
    position: relative;
    display: inline-block;
    left: 0;
    font-family: var(--font-secondary), sans-serif;
    font-size: clamp(19px, 1.9vw, 28px);
    color: var(--text-body);
    transition: color .5s cubic-bezier(.785, .135, .15, .86), left .5s cubic-bezier(.785, .135, .15, .86);
}

.hb-split-title::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: .08em;
    z-index: -1;
    width: 100%;
    height: .3em;
    background-color: var(--hb-split-accent-soft);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.785, .135, .15, .86);
}

.hb-split-radio:focus-visible + .hb-split-trigger {
    outline: 2px solid var(--hb-split-accent);
    outline-offset: 6px;
}

.hb-split-trigger.is-active .hb-split-title {
    left: 10px;
    color: var(--hb-split-accent);
}

.hb-split-trigger.is-active .hb-split-title::before {
    transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
    .hb-split-panel,
    .hb-split-title,
    .hb-split-title::before {
        transition-duration: .01ms;
    }
}

/* ---------- modal ---------- */

body.hb-modal-open {
    overflow: hidden;
}

.hb-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .35s ease, visibility .35s;
}

.hb-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.hb-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(20, 18, 16, .55);
}

.hb-modal-dialog {
    position: relative;
    background-color: var(--bg-body);
    width: 100%;
    max-width: 720px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(24px) scale(.98);
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}

.hb-modal.is-open .hb-modal-dialog {
    transform: translateY(0) scale(1);
}

.hb-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background-color: var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: var(--text-body);
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.hb-modal-close:hover {
    background-color: var(--text-body);
    color: #fff;
}

.hb-modal-scroll {
    overflow-y: auto;
    padding: 72px 56px 56px;
}

.hb-modal-content {
    display: none;
}

.hb-modal-content.is-active {
    display: block;
}

.hb-modal-count {
    display: block;
    font-size: 12px;
    letter-spacing: .05em;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.hb-modal-content h2 {
    font-family: var(--font-secondary), sans-serif;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 400;
    color: var(--text-body);
    margin-bottom: 16px;
}

.hb-modal-summary {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 36px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-soft);
}

.hb-modal-section {
    margin-bottom: 32px;
}

.hb-modal-section:last-child {
    margin-bottom: 0;
}

.hb-modal-section h3 {
    font-family: var(--font-secondary), sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--text-body);
    margin-bottom: 10px;
}

.hb-modal-text {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-muted);
}

.hb-modal-text p {
    margin-bottom: 10px;
}

.hb-modal-text p:last-child {
    margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hb-modal,
    .hb-modal-dialog {
        transition-duration: .01ms;
    }
}

@media screen and (max-width: 900px) {
    .hb-section-inner {
        padding: 0 24px;
    }

    .hb-view-toggle {
        margin-top: 44px;
    }

    .hb-card {
        /* the fixed mobile header is ~109px tall */
        top: 118px;
        min-height: 60vh;
        padding: 40px 24px;
    }

    .hb-card-inner p {
        max-width: none;
    }

    .hb-split {
        /* the fixed mobile header is ~109px tall; the split can't fit
           side by side on a narrow screen, so it stacks and flows
           normally instead of staying locked to one screen */
        height: auto;
        overflow: visible;
        padding-top: 118px;
        padding-bottom: 60px;
    }

    .hb-split-body {
        flex-direction: column;
        height: auto;
    }

    .hb-split-content {
        padding: 0 24px 50px;
        overflow: visible;
    }

    .hb-split-panel p {
        max-width: none;
    }

    .hb-split-index {
        border-left: none;
        border-top: 1px solid var(--border-soft);
        padding: 30px 24px 0;
        overflow: visible;
    }

    .hb-modal {
        padding: 0;
    }

    .hb-modal-dialog {
        max-width: 100%;
        max-height: 100svh;
        height: 100svh;
    }

    .hb-modal-scroll {
        padding: 90px 24px 40px;
    }
}