/* ============================================================
   04-BERANDA.CSS
   Halaman Beranda: hero card, kartu statistik, dan kartu
   "Hukum Sengketa Warisan Budaya" (kontribusi Kaden - Hukum).
   ============================================================ */
#beranda{background:linear-gradient(rgba(13,9,4,.82),rgba(13,9,4,.9)),url('../assets/images/beranda/museum.jpeg') center/cover no-repeat;position:relative;overflow-y:auto;justify-content:flex-start;padding-top:100px}
#beranda::-webkit-scrollbar{width:6px}
#beranda::-webkit-scrollbar-thumb{background:rgba(200,160,30,.35);border-radius:3px}
.sparkle{position:absolute;width:4px;height:4px;background:var(--gold-bright);border-radius:50%;pointer-events:none;z-index:2;animation:sparkleFade 4s ease-in-out infinite;box-shadow:0 0 6px rgba(237,216,74,0.8)}
@keyframes sparkleFade{0%,100%{opacity:0;transform:scale(0)}50%{opacity:.7;transform:scale(1)}}
#beranda .beranda-card{position:relative;z-index:10;background:rgba(13,9,4,0.7);border:1px solid rgba(200,160,30,0.35);border-radius:8px;padding:36px 48px;max-width:600px;box-shadow:0 0 0 1px rgba(200,160,30,0.1),0 20px 60px rgba(0,0,0,0.7),inset 0 0 30px rgba(0,0,0,0.3)}
#beranda .beranda-card::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1.5px;background:var(--gold-grad);opacity:.7}
#beranda .beranda-card::after{content:'';position:absolute;bottom:0;left:10%;right:10%;height:1.5px;background:var(--gold-grad);opacity:.7}
.stats-row{position:relative;z-index:10;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:760px;margin:30px auto 8px}
.stat-card{background:rgba(13,9,4,.55);border:1px solid rgba(200,160,30,.25);border-radius:10px;padding:18px 18px;min-width:130px;flex:1 1 150px;text-align:center;box-shadow:0 10px 25px rgba(0,0,0,.4);transition:transform .25s ease,border-color .25s ease}
.stat-card:hover{transform:translateY(-4px);border-color:rgba(200,160,30,.55)}
.stat-icon{width:42px;height:42px;object-fit:contain;display:block;margin:0 auto 8px;filter:drop-shadow(0 0 6px rgba(200,160,30,.3))}
.stat-number{font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:1.35rem;letter-spacing:1px;margin-bottom:4px}
.stat-label{font-family:'Cinzel',serif;font-size:.6rem;color:var(--muted);letter-spacing:1.4px;text-transform:uppercase}
.scroll-indicator{position:relative;z-index:10;margin:22px 0 6px;font-family:'Cinzel',serif;font-size:.62rem;color:var(--muted);letter-spacing:2px;text-transform:uppercase;animation:pulse 1.8s ease-in-out infinite;text-align:center}
.beranda-section-title{position:relative;z-index:10;margin:18px 0 16px;font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:clamp(1.3rem,2.6vw,1.8rem);letter-spacing:2.5px;text-shadow:0 2px 18px rgba(200,160,30,.35);text-align:center}
.hukum-card{position:relative;z-index:10;max-width:660px;margin:0 auto 60px;background:rgba(13,9,4,.62);border:1px solid rgba(200,160,30,.3);border-radius:10px;padding:32px 38px;box-shadow:0 0 0 1px rgba(200,160,30,.08),0 20px 50px rgba(0,0,0,.55);text-align:center}
.hukum-card .hukum-icon{width:54px;height:54px;object-fit:contain;display:block;margin:0 auto 14px;filter:drop-shadow(0 0 10px rgba(200,160,30,.4))}
.hukum-card h3{font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:1.1rem;letter-spacing:2px;margin-bottom:14px;text-transform:uppercase}
.hukum-card p{font-family:'Cormorant Garamond',serif;font-size:1.02rem;color:var(--cream);line-height:1.75;opacity:.88;max-width:none}
.hukum-divider{height:1px;background:linear-gradient(to right,transparent,rgba(200,160,30,.4),transparent);margin:28px 0 24px}
.hukum-subheading{font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:1rem;letter-spacing:2px;margin-bottom:18px;text-transform:uppercase}
.hukum-list{list-style:none;text-align:left;display:flex;flex-direction:column;gap:16px;margin-bottom:6px}
.hukum-list li{display:flex;flex-direction:column;gap:10px;border-left:2px solid rgba(200,160,30,.32);padding-left:14px}
.hukum-list-text{font-family:'Cormorant Garamond',serif;font-size:.96rem;color:var(--cream);line-height:1.55;opacity:.9}
.btn-hukum{align-self:flex-start;display:inline-block;background:transparent;border:1px solid rgba(200,160,30,.45);color:var(--gold);font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:1.4px;padding:7px 16px;border-radius:20px;text-decoration:none;transition:all .2s;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none}
.btn-hukum:hover{background:var(--gold-grad);color:#0d0904;border-color:var(--gold);box-shadow:var(--shadow-gold)}
.hukum-tagline{margin-top:30px;font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:1.05rem;letter-spacing:2px;line-height:1.7;text-transform:uppercase;text-shadow:0 2px 16px rgba(200,160,30,.35)}
.card-corner-ornament{position:absolute;width:30px;height:30px;pointer-events:none}
.card-corner-ornament svg{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.6}
.card-corner-ornament.ccTL{top:6px;left:6px}.card-corner-ornament.ccTR{top:6px;right:6px;transform:scaleX(-1)}
.card-corner-ornament.ccBL{bottom:6px;left:6px;transform:scaleY(-1)}.card-corner-ornament.ccBR{bottom:6px;right:6px;transform:scale(-1)}

/* ───────────────────────────────────────────────
   SECTION ARTIKEL — horizontal scroll cards
   ─────────────────────────────────────────────── */
.artikel-scroll-wrapper{
    position:relative;
    z-index:10;
    width:100%;
    max-width:760px;
    margin:0 auto 48px;
    /* fade mask kiri-kanan */
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
.artikel-row{
    display:flex;
    gap:16px;
    overflow-x:auto;
    padding:8px 24px 18px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:rgba(200,160,30,.28) transparent;
}
.artikel-row::-webkit-scrollbar{height:4px}
.artikel-row::-webkit-scrollbar-thumb{background:rgba(200,160,30,.28);border-radius:2px}

/* ── Setiap card artikel ── */
.artikel-card{
    flex:0 0 220px;
    width:220px;
    scroll-snap-align:start;
    background:rgba(13,9,4,.68);
    border:1px solid rgba(200,160,30,.28);
    border-radius:12px;
    overflow:hidden;
    cursor:pointer;
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
    position:relative;
    box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.artikel-card:hover{
    transform:translateY(-6px) scale(1.02);
    border-color:rgba(200,160,30,.65);
    box-shadow:0 0 0 1px rgba(200,160,30,.15),0 16px 40px rgba(0,0,0,.6),var(--shadow-gold);
}
.artikel-card:active{transform:scale(.97)}

/* Card featured (pelestarian) — highlight khusus */
.artikel-card-featured{
    border-color:rgba(200,160,30,.5);
    background:rgba(20,13,4,.75);
}
.artikel-card-featured::before{
    content:'✦ BARU';
    position:absolute;
    top:10px;right:10px;
    background:var(--gold-grad);
    color:#0d0904;
    font-family:'Cinzel',serif;
    font-size:.5rem;
    font-weight:700;
    letter-spacing:1.5px;
    padding:3px 9px;
    border-radius:20px;
    z-index:5;
}

/* ── Gambar / placeholder atas card ── */
.artikel-card-img-wrap{
    position:relative;
    height:110px;
    background:linear-gradient(135deg,rgba(74,46,8,.55),rgba(13,9,4,.85));
    border-bottom:1px solid rgba(200,160,30,.18);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.artikel-card-img-wrap::after{
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 50% 100%,rgba(200,160,30,.08),transparent 70%);
}
.artikel-img-icon{
    font-size:3rem;
    filter:drop-shadow(0 0 12px rgba(200,160,30,.5));
    z-index:1;
}
.artikel-card-badge{
    position:absolute;
    top:10px;left:10px;
    background:rgba(13,9,4,.82);
    border:1px solid rgba(200,160,30,.35);
    border-radius:20px;
    padding:3px 10px;
    font-family:'Cinzel',serif;
    font-size:.52rem;
    color:var(--gold);
    letter-spacing:1px;
    z-index:2;
}

/* ── Body bawah card ── */
.artikel-card-body{
    padding:14px 14px 12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.artikel-card-title{
    font-family:'Cinzel Decorative',serif;
    font-size:.68rem;
    color:var(--gold);
    letter-spacing:1px;
    line-height:1.45;
    text-shadow:0 1px 8px rgba(200,160,30,.25);
}
.artikel-card-preview{
    font-family:'Cormorant Garamond',serif;
    font-size:.78rem;
    color:var(--cream);
    opacity:.78;
    line-height:1.55;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.artikel-tap-hint{
    margin-top:4px;
    font-family:'Cinzel',serif;
    font-size:.54rem;
    color:var(--gold-bright);
    letter-spacing:1.5px;
    text-transform:uppercase;
    opacity:.85;
    animation:pulse 2s ease-in-out infinite;
    text-align:center;
    background:rgba(200,160,30,.07);
    border:1px solid rgba(200,160,30,.2);
    border-radius:20px;
    padding:5px 0;
}

/* ── Modal detail artikel ── */
.artikel-modal-card{
    max-width:640px;
    max-height:85vh;
    display:flex;
    flex-direction:column;
}
.artikel-modal-body{
    flex:1;
    overflow-y:auto;
    padding:20px 26px 10px;
    scrollbar-width:thin;
    scrollbar-color:rgba(200,160,30,.3) transparent;
}
.artikel-modal-body::-webkit-scrollbar{width:5px}
.artikel-modal-body::-webkit-scrollbar-thumb{background:rgba(200,160,30,.3);border-radius:3px}

/* Elemen dalam modal artikel */
.art-hero-emoji{
    font-size:3.5rem;
    display:block;
    text-align:center;
    margin-bottom:16px;
    filter:drop-shadow(0 0 14px rgba(200,160,30,.55));
}
.art-intro{
    font-family:'Cormorant Garamond',serif;
    font-size:1.02rem;
    color:var(--cream);
    line-height:1.8;
    opacity:.92;
    margin-bottom:20px;
    border-left:2px solid rgba(200,160,30,.4);
    padding-left:16px;
}
.art-section-heading{
    font-family:'Cinzel Decorative',serif;
    color:var(--gold);
    font-size:.82rem;
    letter-spacing:2px;
    text-transform:uppercase;
    margin:22px 0 12px;
    padding-bottom:8px;
    border-bottom:1px solid rgba(200,160,30,.2);
}
.art-paragraph{
    font-family:'Cormorant Garamond',serif;
    font-size:.97rem;
    color:var(--cream);
    line-height:1.78;
    opacity:.88;
    margin-bottom:14px;
}
.art-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:14px;
    margin-bottom:18px;
}
.art-list li{
    border-left:2px solid rgba(200,160,30,.35);
    padding-left:14px;
    font-family:'Cormorant Garamond',serif;
    font-size:.95rem;
    color:var(--cream);
    line-height:1.6;
    opacity:.88;
}
.art-list li strong{
    color:var(--gold-pale);
    display:block;
    font-family:'Cinzel',serif;
    font-size:.72rem;
    letter-spacing:1px;
    margin-bottom:4px;
}
.art-hukum-item{
    background:rgba(200,160,30,.05);
    border:1px solid rgba(200,160,30,.22);
    border-radius:8px;
    padding:14px 16px;
    margin-bottom:12px;
}
.art-hukum-item p{
    font-family:'Cormorant Garamond',serif;
    font-size:.92rem;
    color:var(--cream);
    line-height:1.62;
    opacity:.88;
    margin-bottom:10px;
}
.art-hukum-btn{
    display:inline-block;
    background:transparent;
    border:1px solid rgba(200,160,30,.45);
    color:var(--gold);
    font-family:'Cinzel',serif;
    font-size:.56rem;
    letter-spacing:1.4px;
    padding:6px 14px;
    border-radius:20px;
    text-decoration:none;
    transition:all .2s;
}
.art-hukum-btn:hover{
    background:var(--gold-grad);
    color:#0d0904;
    border-color:var(--gold);
    box-shadow:var(--shadow-gold);
}
.art-penutup{
    margin:24px 0 8px;
    background:linear-gradient(135deg,rgba(74,46,8,.2),rgba(200,160,30,.06));
    border:1px solid rgba(200,160,30,.25);
    border-radius:10px;
    padding:18px 20px;
    text-align:center;
    font-family:'Cinzel Decorative',serif;
    color:var(--gold);
    font-size:.82rem;
    letter-spacing:1.5px;
    line-height:1.7;
    text-shadow:0 2px 10px rgba(200,160,30,.25);
}

/* ───────────────────────────────────────────────
   GAMBAR ILUSTRASI PORTRAIT — Artikel Card
   ─────────────────────────────────────────────── */
.artikel-card-img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:top center;
    display:block;
    transition:transform .35s ease;
}
.artikel-card:hover .artikel-card-img{
    transform:scale(1.06);
}
.artikel-card-img-fallback{
    display:none;
    width:100%;
    height:100%;
    align-items:center;
    justify-content:center;
    font-size:3rem;
    filter:drop-shadow(0 0 12px rgba(200,160,30,.5));
}

/* ───────────────────────────────────────────────
   MODAL UNDANG-UNDANG — UU Card
   ─────────────────────────────────────────────── */
.uu-modal-card{
    max-width:660px;
    max-height:88vh;
    display:flex;
    flex-direction:column;
    overflow:hidden; /* scroll hanya di .uu-modal-body */
}
.uu-modal-body{
    flex:1;
    overflow-y:auto;
    padding:22px 26px 10px;
    scrollbar-width:thin;
    scrollbar-color:rgba(200,160,30,.3) transparent;
}
.uu-modal-body::-webkit-scrollbar{width:5px}
.uu-modal-body::-webkit-scrollbar-thumb{background:rgba(200,160,30,.3);border-radius:3px}

/* Elemen dalam modal UU */
.uu-jenis-badge{
    display:inline-block;
    background:rgba(200,160,30,.12);
    border:1px solid rgba(200,160,30,.35);
    border-radius:20px;
    padding:4px 14px;
    font-family:'Cinzel',serif;
    font-size:.6rem;
    color:var(--gold);
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:18px;
}
.uu-nomor{
    font-family:'Cinzel Decorative',serif;
    color:var(--gold);
    font-size:1.05rem;
    letter-spacing:1.5px;
    margin-bottom:6px;
    line-height:1.4;
}
.uu-tentang{
    font-family:'Cormorant Garamond',serif;
    font-size:1.1rem;
    color:var(--cream);
    font-style:italic;
    line-height:1.5;
    opacity:.9;
    margin-bottom:22px;
}
.uu-divider{
    height:1px;
    background:linear-gradient(to right,transparent,rgba(200,160,30,.4),transparent);
    margin:0 0 20px;
}
.uu-section-label{
    font-family:'Cinzel',serif;
    font-size:.62rem;
    color:var(--gold);
    letter-spacing:2px;
    text-transform:uppercase;
    margin:18px 0 10px;
    opacity:.85;
}
.uu-abstrak{
    font-family:'Cormorant Garamond',serif;
    font-size:.96rem;
    color:var(--cream);
    line-height:1.8;
    opacity:.88;
    margin-bottom:16px;
    padding:16px 18px;
    background:rgba(200,160,30,.04);
    border-left:2px solid rgba(200,160,30,.35);
    border-radius:0 6px 6px 0;
}
.uu-materi-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:16px;
}
.uu-materi-list li{
    font-family:'Cormorant Garamond',serif;
    font-size:.9rem;
    color:var(--cream);
    opacity:.85;
    line-height:1.5;
    padding-left:14px;
    border-left:1px solid rgba(200,160,30,.25);
}
.uu-berlaku{
    font-family:'Cinzel',serif;
    font-size:.65rem;
    color:var(--gold-bright);
    letter-spacing:1px;
    padding:8px 14px;
    background:rgba(200,160,30,.07);
    border-radius:6px;
    display:inline-block;
    margin-bottom:16px;
}
.uu-modal-source{
    padding:12px 26px 16px;
    border-top:1px solid rgba(200,160,30,.15);
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.uu-source-label{
    font-family:'Cinzel',serif;
    font-size:.58rem;
    color:var(--muted);
    letter-spacing:1.5px;
    text-transform:uppercase;
}
.uu-source-link{
    font-family:'Cormorant Garamond',serif;
    font-size:.82rem;
    color:rgba(200,160,30,.75);
    text-decoration:none;
    word-break:break-all;
    transition:color .2s;
}
.uu-source-link:hover{color:var(--gold)}