/* ================================================================
   view_beranda.php — extracted styles
   Source: views/view_beranda.php
   ================================================================ */

/* ════════════════════════════════════════════════════
   BERANDA — Stone Wall Hero + Compass Header + Scroll Cards
════════════════════════════════════════════════════ */

/* ─── HERO LAYOUT ──────────────────────────────────── */
.hero-beranda {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 100px 20px 60px; /* top: ruang navbar */
}

/* Satu kolom terpusat: logo + teks */
.hero-center-wrap {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    max-width: 800px;
}

/* ─── HERO LOGO CENTER ─────────────────────────────── */
.hero-logo-center {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 240px;
    flex-shrink: 0;
}

/* Orbit rings */
.hlc-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(201,168,76,.22);
    pointer-events: none;
}
.hlc-orbit-1 { width:240px; height:240px; animation:orbitPulse 6s ease-in-out infinite; }
.hlc-orbit-2 { width:280px; height:280px; border-color:rgba(0,200,212,.13); animation:orbitPulse 6s ease-in-out infinite 1.5s; }
@keyframes orbitPulse { 0%,100%{opacity:.4;} 50%{opacity:.85;} }

/* Rotating dots */
.hlc-orbit-dots {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    animation: orbitRotate 12s linear infinite;
    pointer-events: none;
}
.hlc-od-2 { animation-direction:reverse; animation-duration:18s; width:116%; height:116%; top:-8%; left:-8%; }
.hlc-dot {
    position:absolute; top:0; left:50%;
    transform:translate(-50%,-50%);
    width:6px; height:6px; border-radius:50%;
    background:#00c8d4;
    box-shadow:0 0 8px rgba(0,200,212,.9);
}
.hlc-dot-gold { background:#c9a84c; box-shadow:0 0 8px rgba(201,168,76,.9); }
@keyframes orbitRotate { to { transform:rotate(360deg); } }

/* Logo image */
.hlc-emblem {
    width: 200px; height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #c9a84c;
    box-shadow:
0 0 0 6px rgba(201,168,76,.15),
0 0 25px rgba(201,168,76,.6),
0 0 60px rgba(201,168,76,.28),
0 0 10px rgba(0,200,212,.25);
    animation: emblemFloat 6s ease-in-out infinite;
    position: relative; z-index: 2;
    background: #0b1a2e;
}
@keyframes emblemFloat {
    0%,100%{ transform:translateY(0) scale(1); }
    50%    { transform:translateY(-10px) scale(1.02); }
}

/* Glow base */
.hlc-glow {
    position:absolute; bottom:-14px; left:50%;
    transform:translateX(-50%);
    width:150px; height:28px;
    background:radial-gradient(ellipse, rgba(201,168,76,.3) 0%, transparent 70%);
    pointer-events:none;
}

/* ─── HERO TEXT ────────────────────────────────────── */
.hero-content {
    position: relative;
    z-index: 5;
    text-align: center;
}
.hero-org-badge {
    font-family: 'Cinzel', serif;
    font-size: clamp(8px, 1vw, 11px);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(0,200,212,.85);
    margin-top: 10px;
    margin-bottom: 18px;
    text-shadow: 0 0 12px rgba(0,200,212,.5);
}
.hero-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(32px, 7vw, 80px);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 4px;
    background: linear-gradient(180deg, #ffe8a0 0%, #c9a84c 45%, #e0c060 75%, #a07820 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    letter-spacing: 4px;
}
.hero-title span {
    display: block;
    font-size: clamp(11px, 1.8vw, 20px);
    letter-spacing: 2px;
    background: linear-gradient(180deg, #e0eeff 0%, #a8c0d8 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-weight: 400;
    margin-top: 2px;
}
.hero-tagline {
    font-family: 'IM Fell English', Georgia, serif;
    font-style: italic;
    font-size: clamp(10px, 1.2vw, 13px);
    color: rgba(255,220,160,.65);
    margin: 0 0 18px;
    letter-spacing: .5px;
}
.hero-nav-links {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 6px 0;
}
.hero-nav-link {
    font-family: 'Cinzel', serif;
    font-size: clamp(9px, 1.1vw, 12px);
    font-weight: 700; color: rgba(255,255,255,.85);
    text-decoration: none; letter-spacing: 2px;
    text-transform: uppercase; padding: 0 16px;
    text-shadow: 0 1px 8px rgba(0,0,0,.8); transition: color .2s;
}
.hero-nav-link:hover { color: #ffc83c; }
.hero-nav-sep {
    display: block; width: 1px; height: 12px;
    background: rgba(201,168,76,.4);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — 360 → 480 → 600 → 768 → 1024 → desktop
═══════════════════════════════════════════════════ */

/* ── 360px (HP kecil) */
@media (max-width: 399px) {
    .hero-beranda     { padding: 80px 12px 44px; min-height: 100svh; }
    .hero-center-wrap { gap: 18px; }
    .hero-logo-center { width:150px; height:150px; }
    .hlc-orbit-1      { width:150px; height:150px; }
    .hlc-orbit-2      { width:178px; height:178px; }
    .hlc-emblem       { width:124px; height:124px; border-width:2.5px; }
    .hlc-glow         { width:100px; height:20px; }
    .hero-title       { font-size: 28px; letter-spacing: 3px; }
    .hero-title span  { font-size: 11px; }
    .hero-org-badge   { font-size: 7px; letter-spacing: 2px; }
    .hero-tagline     { font-size: 10px; margin-bottom:12px; }
    .hero-nav-link    { font-size: 8px; padding: 0 10px; letter-spacing:1px; }
    .hero-nav-sep     { height:10px; }
}

/* ── 400–479px */
@media (min-width: 400px) and (max-width: 479px) {
    .hero-beranda     { padding: 85px 16px 48px; min-height: 100svh; }
    .hero-center-wrap { gap: 20px; }
    .hero-logo-center { width:170px; height:170px; }
    .hlc-orbit-1      { width:170px; height:170px; }
    .hlc-orbit-2      { width:200px; height:200px; }
    .hlc-emblem       { width:142px; height:142px; }
    .hlc-glow         { width:116px; height:22px; }
    .hero-title       { font-size: 32px; }
    .hero-title span  { font-size: 12px; }
}

/* ── 480–599px */
@media (min-width: 480px) and (max-width: 599px) {
    .hero-beranda     { padding: 90px 20px 50px; }
    .hero-center-wrap { gap: 22px; }
    .hero-logo-center { width:190px; height:190px; }
    .hlc-orbit-1      { width:190px; height:190px; }
    .hlc-orbit-2      { width:225px; height:225px; }
    .hlc-emblem       { width:160px; height:160px; }
    .hero-title       { font-size: 36px; }
    .hero-title span  { font-size: 13px; }
}

/* ── 600–767px */
@media (min-width: 600px) and (max-width: 767px) {
    .hero-beranda     { padding: 95px 24px 52px; }
    .hero-center-wrap { gap: 24px; }
    .hero-logo-center { width:210px; height:210px; }
    .hlc-orbit-1      { width:210px; height:210px; }
    .hlc-orbit-2      { width:250px; height:250px; }
    .hlc-emblem       { width:176px; height:176px; }
    .hero-title       { font-size: 44px; }
    .hero-title span  { font-size: 14px; }
}

/* ── 768–1023px (tablet) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-beranda     { padding: 100px 32px 56px; }
    .hero-logo-center { width:220px; height:220px; }
    .hlc-orbit-1      { width:220px; height:220px; }
    .hlc-orbit-2      { width:260px; height:260px; }
    .hlc-emblem       { width:184px; height:184px; }
    .hero-title       { font-size: 54px; }
    .hero-title span  { font-size: 16px; }
}

/* ── 1024px+ (desktop) — ukuran penuh */
@media (min-width: 1024px) {
    .hero-beranda     { padding: 110px 40px 64px; }
    .hero-logo-center { width:240px; height:240px; }
    .hlc-orbit-1      { width:240px; height:240px; }
    .hlc-orbit-2      { width:280px; height:280px; }
    .hlc-emblem       { width:200px; height:200px; }
}
.stone-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-gold-fog { position:absolute; left:-5%; top:0; width:45%; height:100%; background:radial-gradient(ellipse 80% 100% at 0% 50%, rgba(140,90,0,.55) 0%, rgba(100,60,0,.3) 35%, transparent 70%); z-index:1; pointer-events:none; }
.hero-teal-fog { position:absolute; right:0; top:0; width:35%; height:100%; background:radial-gradient(ellipse 80% 80% at 100% 50%, rgba(0,60,80,.3) 0%, transparent 65%); z-index:1; pointer-events:none; }


/* MATH HEADER BAR */
.math-header-bar { background:linear-gradient(160deg,#023e8a 0%,#0077b6 50%,#023e8a 100%); padding:32px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; overflow:hidden; border-bottom:2px solid rgba(201,168,76,.5); }
.math-header-bar::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:40px 40px; pointer-events:none; }
.mhb-circuit { position:absolute; top:50%; transform:translateY(-50%); opacity:.7; }
.mhb-circuit-left  { left:0; }
.mhb-circuit-right { right:0; }
.mhb-text { text-align:center; position:relative; z-index:2; }
.mhb-title { font-family:'Cinzel',serif; font-size:clamp(20px,4vw,46px); font-weight:700; color:#ffe8b0; letter-spacing:.5px; line-height:1.15; text-shadow:0 2px 20px rgba(0,0,0,.4); margin:0 0 8px; }
.mhb-sub { font-family:'IM Fell English',Georgia,serif; font-style:italic; font-size:clamp(13px,1.8vw,18px); color:rgba(255,220,160,.7); margin:0; }

/* STATS */
.stats-parchment { background:linear-gradient(180deg,#f0e6c8,#e8d8a8 50%,#f0e6c8); padding:0 32px; position:relative; border-top:2px solid rgba(139,90,16,.4); border-bottom:2px solid rgba(139,90,16,.4); }
.parch-roll { height:8px; }
.parch-roll-top { background:linear-gradient(180deg,rgba(0,0,0,.08),transparent); }
.parch-roll-bot { background:linear-gradient(0deg,rgba(0,0,0,.06),transparent); }
.stats-panels { display:flex; justify-content:center; align-items:center; max-width:880px; margin:0 auto; flex-wrap:wrap; }
.stat-panel { display:flex; align-items:center; gap:14px; padding:20px 52px; flex:1; min-width:220px; justify-content:center; }
.stat-panel-icon { opacity:.65; flex-shrink:0; }
.stat-panel-num { font-family:'Cinzel',serif; font-size:42px; font-weight:700; color:#1a0a00; line-height:1; }
.stat-panel-lbl { font-size:11.5px; color:#6b3a00; font-weight:600; margin-top:4px; letter-spacing:.6px; font-family:'Cinzel',serif; }
.stat-divider { width:1px; height:60px; background:linear-gradient(180deg,transparent,#c9a84c 30%,#c9a84c 70%,transparent); flex-shrink:0; }

/* SCROLL SECTION */
.scroll-section { background:linear-gradient(160deg,#060e1e,#0d1e3e 50%,#060e1e); padding:56px 40px; position:relative; overflow:hidden; }
.scroll-section-bg { position:absolute; inset:0; background-image:repeating-linear-gradient(0deg,transparent,transparent 54px,rgba(255,255,255,.018) 54px,rgba(255,255,255,.018) 56px),repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(255,255,255,.014) 80px,rgba(255,255,255,.014) 82px); background-size:82px 56px; pointer-events:none; }
.scroll-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; max-width:1100px; margin:0 auto; position:relative; z-index:1; }

/* SCROLL CARD — aged manuscript */
.scroll-card { display:block; text-decoration:none; position:relative; transition:transform .3s, filter .3s; }
.scroll-card:hover { transform:translateY(-8px) scale(1.02); filter:brightness(1.06); z-index:2; }
.scroll-card-inner { position:relative; border-radius:3px; overflow:hidden; min-height:280px; border:1px solid rgba(160,110,30,.6); background:linear-gradient(160deg,#f5e8c0,#efd9a0 15%,#e8ce90 35%,#f0dca8 55%,#ead094 70%,#f2dca8 85%,#f5e4bc); box-shadow:0 6px 24px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.15); }
/* grain texture */
.scroll-card-inner::before { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23g)' opacity='0.065'/%3E%3C/svg%3E"); background-size:500px; mix-blend-mode:multiply; opacity:.85; }
/* aged vignette */
.scroll-card-inner::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(ellipse 90% 40% at 50% 0%,rgba(120,70,0,.1) 0%,transparent 60%),radial-gradient(ellipse 90% 40% at 50% 100%,rgba(100,55,0,.12) 0%,transparent 60%),radial-gradient(ellipse 30% 100% at 0% 50%,rgba(90,50,0,.08) 0%,transparent 60%),radial-gradient(ellipse 30% 100% at 100% 50%,rgba(90,50,0,.08) 0%,transparent 60%); }
/* scroll rolled edges */
.scroll-edge { position:absolute; left:0; right:0; height:14px; z-index:2; pointer-events:none; }
.scroll-top-edge { top:0; background:linear-gradient(180deg,rgba(100,65,0,.25),rgba(180,130,40,.15) 40%,transparent); border-top:2px solid rgba(160,100,20,.5); border-bottom:1px solid rgba(200,150,40,.3); }
.scroll-bot-edge { bottom:0; background:linear-gradient(0deg,rgba(100,65,0,.25),rgba(180,130,40,.15) 40%,transparent); border-bottom:2px solid rgba(160,100,20,.5); border-top:1px solid rgba(200,150,40,.3); }
/* corner decorations */
.scroll-corner { position:absolute; width:18px; height:18px; z-index:3; pointer-events:none; border-color:rgba(139,90,16,.5); border-style:solid; }
.sc-tl { top:8px;    left:8px;    border-width:1.5px 0 0 1.5px; }
.sc-tr { top:8px;    right:8px;   border-width:1.5px 1.5px 0 0; }
.sc-bl { bottom:8px; left:8px;    border-width:0 0 1.5px 1.5px; }
.sc-br { bottom:8px; right:8px;   border-width:0 1.5px 1.5px 0; }
/* content */
.scroll-body { position:relative; z-index:4; padding:22px 20px 28px; }
.scroll-cat-label { font-family:'Cinzel',serif; font-size:11px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:#c9a84c; margin-bottom:8px; }
.scroll-ornament { line-height:0; margin-bottom:10px; }
.scroll-initial { float:left; font-family:'IM Fell English',Georgia,serif; font-size:52px; line-height:.85; margin-right:6px; margin-top:2px; color:#7a4800; font-style:italic; text-shadow:1px 1px 0 rgba(200,140,40,.3); }
.scroll-text { font-family:'IM Fell English',Georgia,serif; font-style:italic; font-size:13.5px; line-height:1.75; color:#3a2000; margin:0; overflow:hidden; }
.scroll-text-lines { clear:both; margin-top:16px; display:flex; flex-direction:column; gap:5px; }
.scroll-text-lines span { display:block; height:1px; background:rgba(139,90,16,.2); border-radius:1px; }
.scroll-text-lines span:nth-child(1){width:100%}
.scroll-text-lines span:nth-child(2){width:85%}
.scroll-text-lines span:nth-child(3){width:92%}
.scroll-text-lines span:nth-child(4){width:78%}
.scroll-text-lines span:nth-child(5){width:60%}
/* arrow */
.scroll-arrow { position:absolute; right:14px; top:50%; transform:translateY(-50%) scale(.85); width:30px; height:30px; background:linear-gradient(135deg,#005f8a,#0077aa); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#ffc83c; font-size:18px; font-weight:700; z-index:5; opacity:0; transition:opacity .25s, transform .25s; }
.scroll-card:hover .scroll-arrow { opacity:1; transform:translateY(-50%) scale(1); }

/* RESPONSIVE */
@media(max-width:900px) { .scroll-grid{grid-template-columns:repeat(2,1fr);gap:20px;} }
@media(max-width:600px) { .scroll-grid{grid-template-columns:1fr;gap:16px;} .scroll-section{padding:32px 16px;} .math-header-bar{padding:24px 16px;} .mhb-circuit{display:none;} .stats-panels{flex-direction:column;align-items:stretch;} .stat-panel{padding:14px 20px;} .stat-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,#c9a84c,transparent);} .mhb-title{font-size:20px;} }

/* ═══════════════════════════════════════════════════════
   BERITA TERBARU SECTION
═══════════════════════════════════════════════════════ */

.news-section {
    background: linear-gradient(180deg, #060e1e 0%, #08122a 50%, #060e1e 100%);
    padding: 72px 40px 80px;
    position: relative;
    overflow: hidden;
}

/* Background grid samar */
.news-section::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background-image:
linear-gradient(rgba(201,168,76,.02) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,168,76,.02) 1px, transparent 1px);
    background-size: 64px 64px;
}

/* Glow di bagian atas section */
.news-section::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.45) 30%, rgba(0,200,212,.3) 70%, transparent 100%);
}

/* ── Header seksi ── */
.news-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: 1100px;
    margin: 0 auto 48px;
    position: relative; z-index: 1;
    gap: 20px;
    flex-wrap: wrap;
}
.news-eyebrow {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Cinzel', serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    color: rgba(0,200,212,.8);
    margin-bottom: 10px;
}
.news-eyebrow-dot {
    display: block; width: 6px; height: 6px;
    border-radius: 50%; background: #00c8d4;
    box-shadow: 0 0 8px rgba(0,200,212,.8);
    animation: newsDotPulse 2s ease-in-out infinite;
}
@keyframes newsDotPulse { 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.3)} }

.news-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 700; letter-spacing: .04em;
    color: #f0e8d0; line-height: 1.1;
    margin-bottom: 8px;
}
.news-sub {
    font-family: 'IM Fell English', Georgia, serif;
    font-style: italic; font-size: 13px;
    color: rgba(220,195,140,.5);
}
.news-btn-all {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; text-transform: uppercase;
    color: rgba(201,168,76,.7); text-decoration: none;
    border: 1px solid rgba(201,168,76,.25);
    padding: 10px 20px; border-radius: 3px;
    transition: all .25s; flex-shrink: 0;
    background: rgba(201,168,76,.05);
}
.news-btn-all:hover {
    color: #c9a84c;
    border-color: rgba(201,168,76,.5);
    background: rgba(201,168,76,.1);
    transform: translateY(-1px);
}

/* ── Grid kartu ── */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative; z-index: 1;
}

/* Tidak ada featured — semua kartu sejajar */
.news-card--featured {
    grid-row: span 1;
}

/* ── Kartu berita ── */
.news-card {
    position: relative;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(201,168,76,.12);
    border-radius: 6px;
    overflow: hidden;
    transition: transform .3s, border-color .3s, background .3s;
    animation: newsCardIn .5s cubic-bezier(.22,1,.36,1) both;
    animation-delay: var(--delay, 0ms);
    display: flex; flex-direction: column;
}
@keyframes newsCardIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.news-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201,168,76,.3);
    background: rgba(201,168,76,.05);
}

/* Glow sudut atas kiri */
.news-card::before {
    content: '';
    position: absolute; top: 0; left: 0;
    width: 60px; height: 60px; pointer-events: none;
    background: radial-gradient(ellipse at 0% 0%, rgba(201,168,76,.1) 0%, transparent 70%);
    z-index: 1;
}

/* Kartu featured: sama dengan kartu biasa */
.news-card--featured {
    background: rgba(255,255,255,.03);
    border-color: rgba(201,168,76,.15);
    padding: 0;
}
.news-card--featured .news-card-title {
    font-size: clamp(13px, 1.3vw, 15px);
    line-height: 1.45;
}
.news-card--featured .news-card-body {
    font-size: 12.5px;
    -webkit-line-clamp: 3;
}
.news-card--featured::before {
    width: 60px; height: 60px;
    background: radial-gradient(ellipse at 0% 0%, rgba(201,168,76,.1) 0%, transparent 70%);
}

/* Badge kategori */
.news-badge {
    display: inline-block;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    font-family: 'Cinzel', serif;
    padding: 3px 9px; border-radius: 2px;
    border-width: 1px; border-style: solid;
    margin-bottom: 10px;
    align-self: flex-start;
}

/* Meta tanggal */
.news-meta {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; color: rgba(200,180,130,.45);
    margin-bottom: 8px;
    font-family: 'IM Fell English', Georgia, serif;
}
.news-meta time { font-style: italic; }

/* Judul kartu */
.news-card-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(13px, 1.3vw, 15px);
    font-weight: 700; color: #f0e8d0;
    line-height: 1.45; margin-bottom: 8px;
    letter-spacing: .02em;
}

/* Cuplikan isi */
.news-card-body {
    font-size: 12.5px; line-height: 1.7;
    color: rgba(220,200,160,.55);
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Link selengkapnya */
.news-card-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'Cinzel', serif; font-size: 10.5px; font-weight: 700;
    letter-spacing: 1.2px; text-transform: uppercase;
    color: rgba(201,168,76,.6); text-decoration: none;
    transition: color .2s, gap .2s;
    margin-top: auto;
}
.news-card:hover .news-card-link {
    color: #c9a84c;
    gap: 9px;
}

/* Garis gold bawah animasi */
.news-card-bar {
    position: absolute; bottom: 0; left: 0;
    height: 2px; width: 0;
    background: linear-gradient(90deg, #c9a84c, #f0d060);
    box-shadow: 0 0 8px rgba(201,168,76,.5);
    transition: width .35s cubic-bezier(.22,1,.36,1);
    border-radius: 0 2px 2px 0;
}
.news-card:hover .news-card-bar { width: 100%; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .news-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .news-section { padding: 52px 24px 60px; }
}
@media (max-width: 600px) {
    .news-grid { grid-template-columns: 1fr; gap: 14px; }
    .news-section { padding: 40px 16px 48px; }
    .news-header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
    .news-btn-all { align-self: flex-start; }
}

/* Empty state berita */
.news-empty {
    max-width:420px; margin:0 auto;
    text-align:center; padding:56px 20px 24px;
    display:flex; flex-direction:column; align-items:center; gap:14px;
}
.news-empty-title {
    font-family:'Cinzel',serif; font-size:16px; font-weight:700;
    color:rgba(240,220,160,.55); letter-spacing:.05em;
}
.news-empty-sub {
    font-family:'IM Fell English',Georgia,serif; font-style:italic;
    font-size:13px; color:rgba(220,195,140,.35); line-height:1.7;
}

/* ================================================================
   FOTO KEGIATAN — Beranda Cards & News Cards
   ================================================================ */

/* ── Section 1: Kegiatan Terbaru (.card) ── */
.card--has-foto {
    padding: 0 !important;
    overflow: hidden;
}
.card-foto-wrap {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.card-foto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.card--has-foto:hover .card-foto-img {
    transform: scale(1.06);
}
.card-foto-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 55%, rgba(6,12,24,.8) 100%);
    pointer-events: none;
}
.card-inner {
    padding: 16px 20px 20px;
}
/* Kartu tanpa foto tetap pakai padding normal */
.card:not(.card--has-foto) .card-inner {
    padding: 0;
}

/* ── Section 2: Berita Terkini — Foto Card ── */
.news-card--has-foto {
    padding: 0 !important;
    overflow: hidden;
}

/* Foto wrapper — landscape 16:9 */
.news-card-foto-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}
/* Card biasa: landscape 16:9 */
.news-card--has-foto:not(.news-card--featured) .news-card-foto-wrap {
    aspect-ratio: 16 / 9;
    height: auto;
}
/* Card featured: sedikit lebih tinggi, tetap landscape */
.news-card--has-foto.news-card--featured .news-card-foto-wrap {
    aspect-ratio: 16 / 8;
    height: auto;
}
.news-card-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.news-card--has-foto:hover .news-card-foto {
    transform: scale(1.05);
}
.news-card-foto-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(6,12,24,.85) 100%);
    pointer-events: none;
}
/* Caption teks di atas overlay (bawah foto) */
.news-card-foto-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 14px 8px;
    color: #f5e6b2;
    font-size: 0.76rem;
    font-style: italic;
    font-family: 'IM Fell English', Georgia, serif;
    letter-spacing: .02em;
    text-align: center;
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Padding konten di dalam news-card yang punya foto */
.news-card--has-foto .news-badge,
.news-card--has-foto .news-meta,
.news-card--has-foto .news-card-title,
.news-card--has-foto .news-card-body,
.news-card--has-foto .news-card-link {
    padding-left: 22px;
    padding-right: 22px;
}
.news-card--has-foto .news-badge {
    margin-top: 16px;
    display: inline-block;
    margin-left: 22px;
    padding-left: 0;
    padding-right: 0;
}
.news-card--has-foto .news-card-link {
    padding-bottom: 20px;
}
/* bar tetap di bawah */
.news-card--has-foto .news-card-bar {
    bottom: 0;
}