/* ==========================================================================
   YASINDIGITAL — responsive-desktop.css
   HANYA berisi override untuk layar >=1024px. Semua style dasar ada di
   components.css (mobile-first) — file ini cuma menimpa properti yang
   perlu berbeda di layar besar (lebar konten, ukuran font, posisi footer
   jadi mengambang, dst).
   ========================================================================== */
@media (min-width: 1024px) {

    /* --page-max-width & --content-max-width sudah punya nilai default di
       tokens.css (100%) -- di sini kita timpa dengan nilai khusus desktop */
    :root {
        --page-max-width: 1200px;
        --content-max-width: 720px; /* lebar optimal baca teks Arab & terjemah */
    }

    /* =========================
       PAGE CONTAINER
    ========================= */
    .page {
        max-width: var(--page-max-width);
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 32px 40px;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,.12);
        position: relative;
        overflow: hidden;
        transition: background-color 0.4s ease, box-shadow 0.4s ease;
        z-index: 1;
        margin-bottom: var(--footer-height); /* dari tokens.css, sama dgn tinggi footer aktual */
    }

    /* =========================
       HEADER
       (ganti trik negative-margin -1px agar tidak bergantung
       pada padding parent yang mungkin berubah di desktop)
    ========================= */
    .header {
        margin-left: -40px;
        margin-right: -40px;
        width: calc(100% + 80px);
        padding: 24px 40px;
    }

    .header h1 {
        font-size: 1.6rem;
        letter-spacing: 3px;
    }

    .header h6 {
        font-size: 0.7rem;
    }

    .header p {
        font-size: 1rem;
    }

    /* =========================
       TYPOGRAPHY & VERSES
       (dibatasi lebar agar baris teks tidak terlalu panjang)
    ========================= */
    .bismillah,
    .arabic,
    .latin,
    .translation,
    .paragraf-content p,
    .arabic-paragraf,
    .latin-paragraf,
    .translation-paragraf {
        max-width: var(--content-max-width);
        margin-left: auto;
        margin-right: auto;
    }

    .arabic {
        font-size: 2rem;
        line-height: 2.7;
    }

    body.read-mode .arabic {
        font-size: 2.2rem;
    }

    .latin,
    .translation {
        font-size: 1.05rem;
    }

    /* =========================
       AYAT CARD
    ========================= */
    .ayat-card {
        max-width: 780px;
        margin-left: auto;
        margin-right: auto;
        padding: 24px 30px;
    }

    .ayat-number {
        width: 42px;
        height: 42px;
        font-size: 0.95rem;
    }

    /* =========================
       PAGINATION
    ========================= */
    .pagination {
        gap: 24px;
        margin-top: 24px;
    }

    .page-btn {
        width: 42px;
        height: 42px;
    }

    /* =========================
       FOOTER
       (di mobile footer stretch penuh layar; di desktop
       dibuat mengambang & dibatasi lebar seperti dock)
    ========================= */
    .footer {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: 480px;
        bottom: 20px;
        border-radius: 30px;
        border-top: 2px solid rgba(200, 168, 92, 0.3);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25),
                    0 2px 8px rgba(200, 168, 92, 0.15);
    }

    .footer:hover {
        transform: translateX(-50%) translateY(-2px);
    }

    .app-container {
        padding-bottom: 130px; /* footer jadi mengambang, beri jarak lebih */
    }

    /* =========================
       BOTTOM SHEET
       (di desktop jadi panel tengah, bukan menempel bawah layar)
    ========================= */
    .bottom-sheet {
        left: 50%;
        right: auto;
        bottom: 50%;
        transform: translate(-50%, 50%) scale(0.95);
        width: 100%;
        max-width: 560px;       /* FIX: kembalikan batas lebar, jangan full 100vw */
        max-height: 80vh;
        overflow: hidden;        /* FIX: clip konten yang melebihi max-height */
        border-radius: 24px;
        border-top: 2px solid var(--accent-color);
        opacity: 0;
        transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1),
                    opacity 0.35s ease;
        pointer-events: none;
        /* margin-bottom dihapus — bikin centering meleset */
    }

    .bottom-sheet.active {
        transform: translate(-50%, 50%) scale(1);
        opacity: 1;
        pointer-events: auto;
    }

    .sheet-content {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        min-height: 0;   /* FIX: kunci dari classic flexbox bug — wajib ada ini */
        flex: 1;         /* FIX: pastikan sheet-content yang mengambil sisa ruang, bukan sheet-header */
    }

    /* =========================
       DAFTAR ISI
    ========================= */
    .menu-card {
        max-width: var(--content-max-width);
        margin-left: auto;
        margin-right: auto;
    }

    /* =========================
       SILSILAH TREE — DESKTOP
       Satu aturan auto-fit untuk SEMUA generasi.
       Otomatis 1 kolom kalau isinya 1 kartu (gen 1-3),
       otomatis 3 kolom kalau isinya 3 kartu (gen 4 & 5),
       dan tetap benar walau nanti jumlah anak berubah.
    ========================= */
    .timeline-tree {
        max-width: 950px;
        padding: 30px 20px 70px;
    }

    .step-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
        max-width: 950px;
        margin: 0 auto;
        justify-content: center;
    }

    .node-group-wrapper {
        margin-bottom: 0; /* jarak antar wrapper sudah diatur oleh grid gap */
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 22px 26px;
    }

    .node-group-wrapper:hover {
        border-color: var(--accent-color);
        box-shadow: var(--active-shadow-hover);
        transform: translateY(-2px);
        transition: all 0.25s ease;
    }

    /* Kartu individu utama lebih lega di desktop */
    .node-card {
        width: 300px;
        max-width: 100%;
        padding: 16px 24px;
    }

    .node-name {
        font-size: 1.05rem;
    }

    .node-lifespan {
        font-size: 0.82rem;
    }

    .node-spouse {
        font-size: 0.88rem;
    }

    /* Almarhumah (gen 3, biasanya sendirian) tetap jadi fokus —
       diperbesar sedikit lewat class step-highlight yang sudah ada,
       bukan lewat grid, karena isinya cuma 1 kartu */
    .step-highlight .node-card:not(.is-child) {
        width: 340px;
        transform: scale(1.02);
    }

    /* Kartu anak/cucu: dibuat vertikal di dalam kolomnya sendiri
       supaya tinggi antar kolom grid tetap konsisten, terlepas
       dari berapa banyak anak yang dimiliki tiap orang tua */
    .sub-branch-container {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .node-card.is-child {
        max-width: 100%;
        width: 100%;
        min-height: 56px;
        padding: 12px 16px;
    }

    .node-card.is-child .node-name {
        font-size: 0.9rem;
    }

    .node-card.is-child .node-lifespan {
        font-size: 0.74rem !important;
    }

    /* Garis konektor sedikit lebih tegas di layar besar */
    .step-connector {
        height: 36px;
    }

    .sub-branch-connector {
        height: 18px;
    }

    /* =========================
       MODAL BIODATA
    ========================= */
    .bio-modal-box {
        max-width: 380px;
        padding: 30px 26px 24px;
    }

    .bio-frame-slider {
        width: 260px;
        height: 320px;
    }

    /* =========================
       FLOATING BUTTON
       (agar tetap dekat dengan tepi kartu .page yang center,
       bukan mepet ke tepi viewport)
    ========================= */
    .floating-btn {
        right: max(15px, calc((100vw - var(--page-max-width)) / 2 + 15px));
        bottom: 140px; /* menyesuaikan posisi footer yang kini mengambang */
    }

}