/* =========================================================
   RADEN4D — Custom CSS (Canonical / Non-AMP)
   Tema: Dark Golden (Darkgoldenrod) — ringan, utility a la
   Tailwind/Bootstrap tapi dibuat manual seperlunya.
   ========================================================= */

:root{
    --gold:#dbac34;
    --gold-2:#b8860b;          /* darkgoldenrod */
    --gold-3:#8a6508;
    --gold-soft:#f4d27a;
    --bg:#0c0a06;
    --bg-2:#15110a;
    --bg-3:#1d180f;
    --line:#3a2e15;
    --text:#f3e8c8;
    --text-dim:#c9b888;
    --danger:#e54848;
    --ok:#3fbf6a;
    --radius:10px;
    --radius-sm:6px;
    --shadow:0 6px 24px rgba(0,0,0,.45);
    --shadow-gold:0 0 0 1px rgba(219,172,52,.35), 0 8px 28px rgba(184,134,11,.25);
    --font-body:'Sen',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    --font-head:Cambria,'Hoefler Text','Liberation Serif',Georgia,'Times New Roman',Times,serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    font-family:var(--font-body);
    background:radial-gradient(1200px 600px at 50% -10%,#2a200d 0%,var(--bg) 60%,#000 100%);
    color:var(--text);
    line-height:1.55;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:700;letter-spacing:.2px}
img{max-width:100%;display:block;height:auto}
a{color:var(--gold);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-soft)}
button{font:inherit}

/* Layout */
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 14px}
.grid{display:grid;gap:10px}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.center{justify-content:center;text-align:center}
.col{flex:1}
.hidden{display:none!important}
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}
.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.py-1{padding-top:8px;padding-bottom:8px}
.py-2{padding-top:16px;padding-bottom:16px}
.py-3{padding-top:24px;padding-bottom:24px}

/* Header */
.site-header{
    background:linear-gradient(180deg,#1a1408 0%,#0e0a04 100%);
    border-bottom:1px solid var(--line);
    position:sticky;top:0;z-index:50;
}
.topbar{
    display:grid;grid-template-columns:1fr 1fr;align-items:center;
    padding:8px 0;gap:10px;
}
.topbar .left{display:flex;gap:6px;align-items:center}
.topbar .right{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.icon-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:34px;height:34px;border-radius:50%;
    background:#1f1809;color:var(--gold);
    border:1px solid var(--line);
    font-size:18px;transition:.2s;
}
.icon-btn:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.pill{
    display:inline-flex;align-items:center;gap:6px;
    padding:7px 12px;border-radius:999px;
    background:transparent;color:var(--text);
    border:1px solid var(--line);font-size:13px;font-weight:600;
}
.pill:hover{background:var(--gold);color:#000;border-color:var(--gold)}

.brand{
    display:flex;justify-content:center;align-items:center;
    padding:14px 0 10px;
}
.brand img{max-height:64px;width:auto;filter:drop-shadow(0 2px 8px rgba(219,172,52,.35))}

/* Marquee */
.marquee{
    overflow:hidden;white-space:nowrap;
    background:linear-gradient(90deg,#15110a,#241a08,#15110a);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:8px 0;color:var(--gold-soft);font-size:13px;
}
.marquee span{display:inline-block;padding-left:100%;animation:marquee 28s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* CTA buttons */
.cta-row{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    padding:12px 0;
}
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:12px 18px;border-radius:var(--radius);
    font-weight:700;font-size:15px;letter-spacing:.3px;
    border:1px solid transparent;cursor:pointer;transition:.2s transform,.2s box-shadow,.2s background;
    text-transform:uppercase;
}
.btn:hover{transform:translateY(-1px)}
.btn-gold{
    background:linear-gradient(180deg,var(--gold-soft),var(--gold) 45%,var(--gold-2));
    color:#1a1200;box-shadow:var(--shadow-gold);
}
.btn-gold:hover{color:#000}
.btn-outline{
    background:transparent;color:var(--gold-soft);
    border:1px solid var(--gold);
}
.btn-outline:hover{background:var(--gold);color:#000}

/* Slider */
.slider{
    position:relative;overflow:hidden;border-radius:var(--radius);
    margin:14px 0;border:1px solid var(--line);background:#000;
    box-shadow:var(--shadow);
}
.slides{display:flex;transition:transform .6s ease}
.slides>figure{
    min-width:100%;margin:0;position:relative;
    aspect-ratio:1900/380;
}
.slides>figure img{width:100%;height:100%;object-fit:cover;display:block}
.slider-dots{
    position:absolute;left:0;right:0;bottom:8px;
    display:flex;justify-content:center;gap:6px;
}
.slider-dots button{
    width:8px;height:8px;border-radius:50%;border:0;
    background:rgba(255,255,255,.45);cursor:pointer;padding:0;
}
.slider-dots button.active{background:var(--gold);width:20px;border-radius:6px}
@media (max-width:640px){
    .slides>figure{aspect-ratio:600/280}
}

/* Article card */
.card{
    background:linear-gradient(180deg,var(--bg-2),var(--bg-3));
    border:1px solid var(--line);border-radius:var(--radius);
    padding:18px;box-shadow:var(--shadow);
}
.card h1,.card h2,.card h3{
    color:var(--gold-soft);margin:0 0 10px;line-height:1.25;
    font-family:var(--font-head);
}
.card h1{font-size:26px}
.card h2{font-size:21px;margin-top:22px}
.card h3{font-size:18px;margin-top:16px}
.card h2+p,.card h3+p{margin-top:0}
.card p{margin:0 0 10px;color:var(--text)}
.card ul{margin:0 0 10px 18px;padding:0}
.card li{margin:4px 0}

/* Footer */
.site-footer{
    margin-top:30px;padding:20px 0;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg,#0e0a04,#000);
    text-align:center;color:var(--text-dim);font-size:13px;
}
.site-footer .nav{display:flex;justify-content:center;gap:14px;margin-top:8px}
.site-footer .nav a{color:var(--gold)}
.site-footer .nav a:hover{color:var(--gold-soft)}

/* Utility */
.text-gold{color:var(--gold)}
.text-dim{color:var(--text-dim)}
.divider{height:1px;background:var(--line);margin:14px 0}

@media (min-width:768px){
    .topbar{padding:10px 0}
    .brand img{max-height:80px}
    .cta-row{max-width:520px;margin:0 auto}
}