/* Blog Dutasukses — tema GELAP elegan (near-black + emas gradasi), konsisten dengan homepage React. */
:root{
  --primary:#c9a227; --primary-dark:#0b0b1c; --heading:#f6f7fa;
  --accent:#c9a227; --accent-dark:#b8901c;
  --ink:#aeb3c2; --mist:#191b23; --slate6:#aeb3c2; --slate5:#9398ab; --slate4:#787e8e; --line:#2a2d39;
  --base:#101118; --surface:#191b23; --surface2:#20222e; --hair2:#2e313d;
  --gold:linear-gradient(135deg,#f9ecb0 0%,#e6bb4f 38%,#c2922a 70%,#9c6f28 100%);
  --gold-sheen:linear-gradient(135deg,#fff6cf 0%,#edc868 45%,#b8881f 100%);
  --gold-glow:rgba(201,162,39,.5);
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;font-family:'Sora','Poppins',system-ui,sans-serif;color:var(--ink);background:var(--base);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
@media(min-width:640px){.wrap{padding:0 24px}}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(16,17,24,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.nav-logo img{height:34px;width:auto;background:#fff;border-radius:8px;padding:5px 9px}
.nav-menu{display:none;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-menu a{font-size:14px;font-weight:500;color:var(--ink)}
.nav-menu a:hover{color:var(--accent)}
.nav-cta{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:600;cursor:pointer;transition:.2s;border:0}
.btn-accent{background-image:var(--gold);color:#1a1404;padding:12px 24px;box-shadow:0 12px 30px -14px var(--gold-glow)}
.btn-accent:hover{background-image:var(--gold-sheen);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--hair2);color:var(--heading);padding:10px 20px}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.nav-toggle{display:inline-flex;background:none;border:0;padding:8px;cursor:pointer;color:var(--heading)}
@media(min-width:1024px){.nav-menu{display:flex}.nav-cta{display:inline-flex}.nav-toggle{display:none}}
.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--surface)}
.mobile-menu.open{display:block}
.mobile-menu ul{list-style:none;margin:0;padding:12px 0;display:flex;flex-direction:column;gap:4px}
.mobile-menu a{padding:10px 16px;font-weight:500;border-radius:10px}
.mobile-menu a:hover{background:var(--surface2);color:var(--accent)}

/* Eyebrow + headings */
.eyebrow{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;background-image:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,h3{color:var(--heading);line-height:1.25}

/* Band (gelap, teks terang) */
.band{background:var(--primary-dark);border-bottom:1px solid rgba(255,255,255,.08)}
.band-inner{padding:56px 0;text-align:center}
.band .eyebrow{background-image:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.band h1{font-size:32px;font-weight:700;margin:12px 0 0;color:#fff}
@media(min-width:640px){.band h1{font-size:46px}.band-inner{padding:72px 0}}
.band p{max-width:640px;margin:16px auto 0;color:rgba(255,255,255,.78)}

/* Index controls */
.controls{padding:32px 0 8px}
.search{position:relative;max-width:520px;margin:0 auto}
.search input{width:100%;border:1px solid var(--line);border-radius:999px;padding:12px 18px 12px 44px;font:inherit;font-size:14px;outline:none;background:var(--surface);color:var(--heading);box-shadow:0 14px 40px -22px rgba(0,0,0,.6)}
.search input::placeholder{color:var(--slate4)}
.search input:focus{border-color:var(--accent)}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--slate4)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
.chip{border:0;border-radius:999px;padding:6px 16px;font-size:14px;font-weight:500;background:var(--surface);color:var(--slate6);cursor:pointer;transition:.2s}
.chip:hover{background:var(--surface2)}
.chip.active{background-image:var(--gold);color:#1a1404}
.count{text-align:center;color:var(--slate5);font-size:14px;margin:24px 0}

/* Grid cards */
.grid{display:grid;grid-template-columns:1fr;gap:20px;padding-bottom:80px}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:0 14px 40px -22px rgba(0,0,0,.6);transition:.3s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 55px -24px rgba(0,0,0,.75)}
.card-img{aspect-ratio:16/9;width:100%;object-fit:cover;background:var(--surface2)}
.card-body{padding:18px;display:flex;flex-direction:column;flex:1}
.card .cat{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.03em}
.card h3{font-size:17px;font-weight:600;margin:8px 0 0;color:var(--heading)}
.card .ex{font-size:14px;color:var(--slate6);margin:8px 0 0;flex:1}
.card .meta{font-size:12px;color:var(--slate4);margin-top:14px}
.empty{text-align:center;color:var(--slate5);padding:64px 0}

/* Article */
.article{max-width:760px;margin:0 auto;padding:32px 16px 64px}
@media(min-width:640px){.article{padding:48px 24px 80px}}
.breadcrumb{font-size:13px;color:var(--slate5);margin-bottom:20px}
.breadcrumb a:hover{color:var(--accent)}
.article-hero{width:100%;max-height:440px;object-fit:cover;border-radius:18px;margin-bottom:28px;background:var(--surface2)}
.article h1{font-size:30px;font-weight:700;margin:0 0 14px}
@media(min-width:640px){.article h1{font-size:40px}}
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--slate5);font-size:14px;margin-bottom:28px}
.tag{background:rgba(201,162,39,.12);color:var(--accent);font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px}
.prose{font-size:17px;color:var(--ink);line-height:1.8}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:26px;font-weight:700;margin:1.6em 0 .5em;color:var(--heading)}
.prose h3{font-size:21px;font-weight:600;margin:1.4em 0 .4em;color:var(--heading)}
.prose p{margin:1em 0}
.prose ul,.prose ol{padding-left:1.4em;margin:1em 0}
.prose li{margin:.4em 0}
.prose li::marker{color:var(--accent)}
.prose img{border-radius:14px;margin:1.4em auto}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.prose blockquote{border-left:4px solid var(--accent);background:var(--surface);padding:14px 20px;border-radius:0 12px 12px 0;margin:1.4em 0;color:var(--slate6)}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{background:var(--surface2);color:var(--heading)}
.prose figure{margin:1.4em 0}
.prose img{max-width:100%}

/* CTA box */
.cta-box{margin-top:48px;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px;text-align:center}
.cta-box h3{font-size:22px;font-weight:700;margin:0}
.cta-box p{color:var(--slate6);margin:10px 0 20px}

/* Footer */
.site-footer{background:var(--primary-dark);color:#CBD5E1;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:36px;padding:56px 0}
@media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-logo{background:#fff;display:inline-flex;padding:8px 12px;border-radius:10px}
.footer-logo img{height:32px}
.site-footer h4{color:#fff;font-size:18px;font-weight:600;margin:0 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0;font-size:14px;display:flex;flex-direction:column;gap:10px}
.site-footer a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom .wrap{display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:space-between;padding:24px 16px;font-size:14px;color:var(--slate4)}
@media(min-width:640px){.footer-bottom .wrap{flex-direction:row;padding-bottom:96px}}
.footer-contact li{display:flex;align-items:center;gap:12px}
.footer-contact svg{color:var(--accent);flex:none}
.footer-social{display:flex;gap:12px}
.footer-social a{display:grid;place-items:center;height:36px;width:36px;border-radius:999px;background:rgba(255,255,255,.1);color:#CBD5E1;transition:.2s}
.footer-social a:hover{background-image:var(--gold);color:#1a1404}
.muted{color:var(--slate5);font-size:14px}

/* ===== Pagination (pager atas + bawah) — 9 artikel/halaman ===== */
.ds-pages{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.ds-pg{min-width:42px;height:42px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;border:0;background:var(--surface2);border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:.18s;user-select:none}
.ds-pg:hover{background:var(--hair2);color:var(--heading)}
.ds-pg.cur{background-image:var(--gold);color:#1a1404;cursor:default;box-shadow:0 8px 18px -8px var(--gold-glow)}
.ds-pg.nav{gap:6px}
.ds-pg.disabled{opacity:.45;pointer-events:none}
.ds-dots{color:var(--slate4);font-weight:700;padding:0 2px}
.ds-pager{max-width:1200px;margin:8px auto 0;padding:30px 24px 56px;display:flex;flex-direction:column;align-items:center;gap:14px}
.ds-pgcount{font-size:13px;color:var(--slate5)}
.ds-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin:24px 0 18px}
.ds-toolbar .count{margin:0;text-align:left}
.ds-pages-top{justify-content:flex-end;margin-top:-8px}
.ds-pages-top .ds-pg{height:38px;min-width:38px;padding:0 14px;font-size:13px;border-radius:999px}
@media(max-width:560px){.ds-toolbar{justify-content:center}.ds-pages-top{justify-content:center;width:100%}}
.ds-pg.nav .m{display:none}
@media(max-width:480px){.ds-pg.nav .t{display:none}.ds-pg.nav .m{display:inline}}

/* ===== Kartu horizontal (gambar kiri mengambang + rounded + hover halus) ===== */
@media(min-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:640px){
  .card{flex-direction:row;align-items:stretch;padding:14px;gap:18px}
  .card-img{width:190px;flex:0 0 190px;height:auto;align-self:stretch;aspect-ratio:auto;border-radius:14px}
  .card-body{padding:6px 6px 6px 0}
  .card .ex{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
@media(min-width:640px) and (max-width:1023px){.card-img{width:160px;flex-basis:160px}}
.card-img{transition:transform .4s ease}
.card:hover .card-img{transform:scale(1.04)}
.card{overflow:hidden;border-radius:22px;transition:transform .3s,box-shadow .3s,background .3s,border-color .3s}
.card:hover{background:var(--surface2);border-color:var(--hair2);box-shadow:0 22px 55px -24px rgba(0,0,0,.75)}

/* ============================================================
   LIGHT THEME — selaraskan dgn beranda (latar putih + emas; hero/band/footer tetap navy).
   Ditambahkan 2026-06-01. Rollback: hapus seluruh blok di bawah ini.
   ============================================================ */
:root{
  --heading:#0f172a; --ink:#475569;
  --slate6:#475569; --slate5:#64748b; --slate4:#94a3b8;
  --line:#e2e8f0;
  --base:#ffffff; --surface:#ffffff; --surface2:#f1f5f9; --hair2:#cbd5e1; --mist:#f1f5f9;
  --accent:#a8801c; --accent-dark:#8a6a16; --primary:#a8801c;
  --primary-dark:#052c5f;            /* band + footer + tp-hero tetap navy, senada beranda */
}
html{color-scheme:light}
/* header putih transparan (override hardcoded near-black) */
.site-header{background:rgba(255,255,255,.85)!important}
/* eyebrow: gradasi emas tak terbaca di atas putih -> emas solid; tetap gradasi di area navy */
.eyebrow{background-image:none!important;-webkit-text-fill-color:#a8801c!important;color:#a8801c!important}
.band .eyebrow,.tp-hero .eyebrow{background-image:var(--gold)!important;-webkit-text-fill-color:transparent!important;color:transparent!important}
/* bayangan lembut utk tema terang (ganti bayangan hitam pekat) */
.card,.search input{box-shadow:0 14px 34px -20px rgba(15,23,42,.16)}
.card:hover{box-shadow:0 22px 50px -22px rgba(15,23,42,.24)}
/* separasi elemen di atas putih */
.chip{background:#f1f5f9;color:#475569}
.chip:hover{background:#e2e8f0}
.prose blockquote{background:#f8fafc}
.cta-box{background:#f8fafc}
/* footer navy: jaga keterbacaan teks redup */
.site-footer .muted,.footer-bottom .wrap{color:#94a3b8}