/* ============================================================
   itomjie Blog — Tema glassmorphism (gelap & terang)
   Mengikuti bahasa desain itomjie.com
   ============================================================ */

/* ===== TOKEN WARNA ===== */
:root{
  --violet:#7c3aed; --violet-2:#8b5cf6; --indigo:#4f46e5;
  --blue:#3b82f6;   --sky:#38bdf8;      --pink:#ec4899;
  --green:#34d399;  --amber:#fbbf24;    --rose:#fb7185;
  --accent:#a78bfa;

  --bg:#0b0b16;
  --bg-2:#16162b;
  --panel:rgba(22,22,38,.94);
  --text:#ffffff;
  --muted:rgba(255,255,255,.64);
  --muted-2:rgba(255,255,255,.40);
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.12);
  --stroke-soft:rgba(255,255,255,.06);
  --nav-bg:rgba(15,15,26,.55);
  --code-bg:rgba(255,255,255,.06);
  --orb-op:.55;

  --radius:26px;
  --radius-lg:40px;
  --shadow:0 30px 80px rgba(0,0,0,.55);
  --ease:cubic-bezier(.22,1,.36,1);
  --grad:linear-gradient(135deg,var(--violet),var(--indigo));
  --grad-2:linear-gradient(135deg,#c4b5fd,#818cf8);
}

/* Mode terang — dipicu tombol 🌗 (menyimpan pilihan di localStorage) */
:root[data-theme="light"]{
  --bg:#f4f3fb;
  --bg-2:#ffffff;
  --panel:rgba(255,255,255,.97);
  --text:#15132a;
  --muted:rgba(21,19,42,.66);
  --muted-2:rgba(21,19,42,.45);
  --glass:rgba(255,255,255,.72);
  --glass-2:rgba(255,255,255,.92);
  --stroke:rgba(21,19,42,.10);
  --stroke-soft:rgba(21,19,42,.07);
  --nav-bg:rgba(255,255,255,.72);
  --code-bg:rgba(21,19,42,.05);
  --accent:#6d28d9;
  --grad-2:linear-gradient(135deg,#7c3aed,#4f46e5);
  --shadow:0 24px 60px rgba(76,29,149,.14);
  --orb-op:.30;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:110px; }
body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height:100vh; color:var(--text); background:var(--bg);
  overflow-x:hidden; line-height:1.6; -webkit-font-smoothing:antialiased;
  transition:background .35s var(--ease), color .35s var(--ease);
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:rgba(139,92,246,.4); color:#fff; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--stroke); border-radius:20px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--muted-2); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ===== LATAR ORB + GRID ===== */
.bg{ position:fixed; inset:0; z-index:-1; overflow:hidden;
     background:radial-gradient(circle at 15% 20%, var(--bg-2), var(--bg) 60%); }
.orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:var(--orb-op); }
.orb-1{ width:520px; height:520px; top:-140px; left:-120px;
        background:radial-gradient(circle,#7c3aed,transparent 70%); animation:float1 18s var(--ease) infinite; }
.orb-2{ width:460px; height:460px; top:8%; right:-140px;
        background:radial-gradient(circle,#3b82f6,transparent 70%); animation:float2 22s var(--ease) infinite; }
.orb-3{ width:420px; height:420px; bottom:-120px; left:12%;
        background:radial-gradient(circle,#ec4899,transparent 70%); animation:float3 26s var(--ease) infinite; }
.orb-4{ width:360px; height:360px; bottom:6%; right:14%;
        background:radial-gradient(circle,#38bdf8,transparent 70%); animation:float1 20s var(--ease) infinite reverse; }
.grid-overlay{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--stroke-soft) 1px, transparent 1px),
                   linear-gradient(90deg, var(--stroke-soft) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 80%);
  -webkit-mask-image:radial-gradient(circle at 50% 30%, #000 0%, transparent 80%); }
@keyframes float1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(40px,50px);} }
@keyframes float2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-50px,40px);} }
@keyframes float3{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(40px,-40px);} }

/* ===== LAYOUT ===== */
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.container-sm{ max-width:900px; margin:0 auto; padding:0 24px; }
section{ position:relative; }
.sec{ padding:72px 0 12px; }

/* ===== BAR PROGRES BACA ===== */
.progress-bar{ position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,#a78bfa,#60a5fa,#ec4899); z-index:400; transition:width .1s linear; }

/* ===== NAVBAR ===== */
.nav-wrap{ position:sticky; top:14px; z-index:200; padding:0 24px; margin-top:14px; }
.navbar{
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:12px 14px 12px 22px;
  background:var(--nav-bg);
  backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--stroke); border-radius:60px;
  box-shadow:0 16px 44px rgba(0,0,0,.28);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.brand{ display:flex; align-items:center; gap:11px; cursor:pointer; flex-shrink:0; }
.brand .mark{ width:38px; height:38px; border-radius:12px; flex-shrink:0; background:var(--grad);
  display:grid; place-items:center; box-shadow:0 8px 22px rgba(124,58,237,.5); }
.brand .mark svg{ width:20px; height:20px; }
.brand .word{ font-size:21px; font-weight:800; letter-spacing:-.6px; white-space:nowrap; }
.brand .word b{ background:var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.brand .word i{ font-style:normal; font-size:12.5px; font-weight:700; color:var(--muted-2);
  border-left:1px solid var(--stroke); margin-left:8px; padding-left:8px; letter-spacing:0; }

.nav-links{ display:flex; gap:4px; }
.nav-links a{ color:var(--muted); font-weight:600; font-size:14.5px;
  padding:9px 15px; border-radius:40px; transition:.2s var(--ease); white-space:nowrap; }
.nav-links a:hover{ color:var(--text); background:var(--glass); }
.nav-links a.active{ color:var(--text); background:var(--glass-2); }

.nav-right{ display:flex; gap:9px; align-items:center; }
.icon-btn{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--stroke); font-size:17px; transition:.22s var(--ease); }
.icon-btn:hover{ background:var(--glass-2); transform:translateY(-2px); }
.nav-toggle{ display:none; }

/* Laci menu mobile */
.drawer{ position:fixed; inset:0; z-index:300; display:none; }
.drawer.open{ display:block; }
.drawer-bg{ position:absolute; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); }
.drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:min(320px,86vw);
  background:var(--panel); border-left:1px solid var(--stroke); padding:26px 22px;
  display:flex; flex-direction:column; gap:8px; animation:slide-l .3s var(--ease); }
@keyframes slide-l{ from{ transform:translateX(100%);} to{ transform:none;} }
.drawer-panel h4{ font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted-2); margin:14px 0 4px; }
.drawer-panel a{ padding:12px 14px; border-radius:14px; font-weight:600; font-size:15px; color:var(--muted); }
.drawer-panel a:hover, .drawer-panel a.active{ background:var(--glass); color:var(--text); }

/* ===== TOMBOL ===== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:50px; border:1px solid var(--stroke);
  background:var(--glass); color:var(--text); font-weight:600; font-size:14px;
  transition:.25s var(--ease); white-space:nowrap; }
.btn:hover{ background:var(--glass-2); transform:translateY(-1px); }
.btn-primary{ background:var(--grad); border:none; color:#fff; box-shadow:0 10px 26px rgba(124,58,237,.4); }
.btn-primary:hover{ box-shadow:0 14px 34px rgba(124,58,237,.6); transform:translateY(-2px); filter:brightness(1.08); }
.btn-lg{ padding:15px 30px; font-size:15.5px; border-radius:54px; }
.btn-sm{ padding:9px 15px; font-size:13.5px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn.on{ background:linear-gradient(135deg,#fbbf24,#f59e0b); border-color:transparent; color:#3b2600; }

.pill{ display:inline-flex; align-items:center; gap:6px; padding:8px 15px; border-radius:40px;
  font-size:13px; font-weight:600; color:var(--muted); background:var(--glass); border:1px solid var(--stroke); }
.sec-tag{ display:inline-block; padding:6px 15px; border-radius:40px; font-size:12.5px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase; color:var(--accent);
  background:rgba(139,92,246,.14); border:1px solid rgba(139,92,246,.28); margin-bottom:16px; }
.cat-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:30px;
  font-size:11.5px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:#fff; }
.live-dot{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; color:#4ade80; }
.live-dot::before{ content:''; width:7px; height:7px; border-radius:50%; background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,.55);} 70%{ box-shadow:0 0 0 8px rgba(74,222,128,0);} 100%{ box-shadow:0 0 0 0 rgba(74,222,128,0);} }

/* ===== BANNER INFO ===== */
.info-banner{ position:relative; z-index:150; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:10px 46px 10px 18px; text-align:center; font-size:13.5px; font-weight:600; color:#c4b5fd;
  background:linear-gradient(90deg, rgba(124,58,237,.16), rgba(59,130,246,.16));
  border-bottom:1px solid var(--stroke-soft); }
.info-banner b{ color:var(--text); }
.info-banner .db-close{ position:absolute; right:12px; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:50%; background:var(--glass); border:1px solid var(--stroke); font-size:13px; }
.info-banner .db-close:hover{ background:var(--glass-2); }

/* ===== HERO ===== */
.hero{ padding:56px 0 8px; }
.hero-grid{ display:grid; grid-template-columns:1.08fr .92fr; gap:56px; align-items:center; }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 10px; border-radius:40px;
  background:var(--glass); border:1px solid var(--stroke); font-size:13px; font-weight:600;
  color:var(--muted); margin-bottom:24px; }
.eyebrow .dot{ width:22px; height:22px; border-radius:50%; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-size:11px; }
.eyebrow b{ color:var(--text); }
.hero h1{ font-size:clamp(36px,5vw,58px); font-weight:800; line-height:1.06; letter-spacing:-2px; }
.hero h1 .g{ background:var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero .lead{ color:var(--muted); font-size:17.5px; line-height:1.75; margin:20px 0 28px; max-width:520px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-chips{ display:flex; align-items:center; gap:10px; margin-top:28px; flex-wrap:wrap; }

/* Kotak cari besar */
.search-box{ position:relative; max-width:520px; margin-top:6px; }
.search-box input{ width:100%; padding:15px 52px 15px 48px; border-radius:50px; font-size:15px;
  background:var(--glass); border:1px solid var(--stroke); color:var(--text);
  font-family:inherit; outline:none; transition:.22s var(--ease); }
.search-box input::placeholder{ color:var(--muted-2); }
.search-box input:focus{ border-color:var(--accent); background:var(--glass-2); box-shadow:0 0 0 4px rgba(139,92,246,.15); }
.search-box .s-ico{ position:absolute; left:18px; top:50%; transform:translateY(-50%); font-size:16px; opacity:.6; }
.search-box .s-key{ position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:700; color:var(--muted-2); border:1px solid var(--stroke);
  padding:3px 8px; border-radius:8px; background:var(--glass); }

/* Kartu sorotan di hero */
.hero-visual{ position:relative; }
.spot{ position:relative; z-index:2; display:block; padding:26px; border-radius:var(--radius-lg);
  background:var(--glass); border:1px solid var(--stroke);
  backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4);
  box-shadow:var(--shadow); animation:rise 1s var(--ease) both; transition:.35s var(--ease); }
.spot:hover{ transform:translateY(-6px); border-color:rgba(167,139,250,.34); }
@keyframes rise{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:none;} }
.spot-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.spot-ico{ width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:23px;
  background:var(--grad); box-shadow:0 8px 20px rgba(124,58,237,.4); flex-shrink:0; }
.spot h3{ font-size:20px; font-weight:800; letter-spacing:-.5px; line-height:1.25; margin-bottom:8px; }
.spot p{ color:var(--muted); font-size:14.5px; line-height:1.7; }
.spot-meta{ display:flex; align-items:center; gap:14px; margin-top:18px; padding-top:16px;
  border-top:1px solid var(--stroke-soft); font-size:12.5px; color:var(--muted-2); flex-wrap:wrap; }
.chip-float{ position:absolute; z-index:3; display:flex; align-items:center; gap:9px;
  padding:11px 15px; border-radius:16px; font-size:13px; font-weight:700;
  background:var(--panel); backdrop-filter:blur(16px); border:1px solid var(--stroke);
  box-shadow:0 14px 34px rgba(0,0,0,.32); }
.chip-1{ top:-18px; right:-14px; animation:bob 4s ease-in-out infinite; }
.chip-2{ bottom:-20px; left:-18px; animation:bob 5s ease-in-out infinite .6s; }
.chip-float small{ display:block; font-size:11px; font-weight:500; color:var(--muted-2); }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-9px);} }

/* ===== TICKER TREN ===== */
.ticker{ margin-top:34px; display:flex; align-items:center; gap:14px; padding:12px 18px;
  border-radius:50px; background:var(--glass); border:1px solid var(--stroke-soft); overflow:hidden; }
.ticker .tk-label{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; color:var(--accent); flex-shrink:0; }
.ticker-track{ display:flex; gap:28px; white-space:nowrap; animation:marquee 32s linear infinite; }
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker-track a{ font-size:13.5px; color:var(--muted); font-weight:600; }
.ticker-track a:hover{ color:var(--text); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ===== BARIS STATISTIK ===== */
.stats-bar{ margin-top:44px; padding:24px 0; border-top:1px solid var(--stroke-soft); border-bottom:1px solid var(--stroke-soft); }
.stats-inner{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ text-align:center; padding:0 16px; }
.stat + .stat{ border-left:1px solid var(--stroke-soft); }
.stat .n{ font-size:27px; font-weight:800; letter-spacing:-.8px;
  background:var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat .l{ font-size:12.5px; color:var(--muted-2); margin-top:2px; }

/* ===== JUDUL SEKSI ===== */
.sec-head{ max-width:660px; margin:0 auto 38px; text-align:center; }
.sec-head.left{ text-align:left; margin-left:0; }
.sec-head h2{ font-size:clamp(26px,3.4vw,40px); font-weight:800; letter-spacing:-1.3px; line-height:1.12; }
.sec-head p{ color:var(--muted); font-size:16px; margin-top:12px; }

/* ===== FILTER KATEGORI ===== */
.filters{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
.filter{ padding:10px 20px; border-radius:40px; font-size:14px; font-weight:600;
  background:var(--glass); border:1px solid var(--stroke); color:var(--muted); transition:.22s var(--ease); }
.filter:hover{ color:var(--text); border-color:var(--accent); }
.filter.active{ color:#fff; background:var(--grad); border-color:transparent; box-shadow:0 8px 22px rgba(124,58,237,.35); }

/* ===== TATA LETAK ISI + SIDEBAR ===== */
.layout{ display:grid; grid-template-columns:1fr 330px; gap:32px; align-items:start; }
.side{ position:sticky; top:96px; display:flex; flex-direction:column; gap:18px; }

/* ===== KARTU ARTIKEL ===== */
.post-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.post-grid.one{ grid-template-columns:1fr; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.card{ position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--radius); background:var(--glass); border:1px solid var(--stroke-soft);
  backdrop-filter:blur(14px); transition:.35s var(--ease); }
.card:hover{ background:var(--glass-2); transform:translateY(-7px);
  border-color:rgba(167,139,250,.32); box-shadow:0 26px 60px rgba(0,0,0,.32); }
.card-cover{ position:relative; height:150px; display:grid; place-items:center; font-size:46px; overflow:hidden; }
.card-cover::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.28)); }
.card-cover .cat-chip{ position:absolute; top:14px; left:14px; z-index:2;
  background:rgba(0,0,0,.34); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2); }
.card-cover .bookmark{ position:absolute; top:12px; right:12px; z-index:2; width:34px; height:34px;
  border-radius:50%; display:grid; place-items:center; font-size:15px; border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.34); backdrop-filter:blur(10px); color:#fff; transition:.2s var(--ease); }
.card-cover .bookmark:hover{ background:rgba(0,0,0,.6); transform:scale(1.08); }
.card-cover .bookmark.on{ background:linear-gradient(135deg,#fbbf24,#f59e0b); border-color:transparent; }
.card-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.card h3{ font-size:18px; font-weight:800; letter-spacing:-.4px; line-height:1.35; }
.card h3 a:hover{ color:var(--accent); }
.card .exc{ color:var(--muted); font-size:14px; line-height:1.7; margin-top:9px; }
.card .meta{ display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--stroke-soft); font-size:12.5px; color:var(--muted-2); flex-wrap:wrap; }
.card .meta .dotsep{ opacity:.5; }

/* Kartu utama (featured) */
.card.feature{ grid-column:1 / -1; flex-direction:row; }
.card.feature .card-cover{ width:44%; height:auto; min-height:260px; font-size:72px; flex-shrink:0; }
.card.feature .card-body{ padding:30px 32px; justify-content:center; }
.card.feature h3{ font-size:clamp(22px,2.6vw,30px); letter-spacing:-1px; }
.card.feature .exc{ font-size:15.5px; margin-top:12px; }

/* Daftar ringkas (sidebar / terkait) */
.mini{ display:flex; gap:13px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--stroke-soft); }
.mini:last-child{ border-bottom:none; }
.mini .mi{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  font-size:21px; flex-shrink:0; box-shadow:0 8px 18px rgba(0,0,0,.25); }
.mini h4{ font-size:14.2px; font-weight:700; line-height:1.45; }
.mini h4 a:hover{ color:var(--accent); }
.mini .mm{ font-size:11.5px; color:var(--muted-2); margin-top:4px; }
.mini .rank{ font-size:19px; font-weight:800; color:var(--muted-2); width:22px; flex-shrink:0; text-align:center; }

/* ===== PANEL / WIDGET ===== */
.panel{ padding:22px; border-radius:var(--radius); background:var(--glass);
  border:1px solid var(--stroke-soft); backdrop-filter:blur(14px); }
.panel h3{ font-size:16px; font-weight:800; letter-spacing:-.3px; display:flex; align-items:center; gap:9px; }
.panel > p{ color:var(--muted); font-size:13.5px; margin-top:6px; line-height:1.65; }
.panel .p-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.tag{ padding:6px 13px; border-radius:30px; font-size:12.5px; font-weight:600; color:var(--muted);
  background:var(--glass); border:1px solid var(--stroke); transition:.2s var(--ease); }
.tag:hover{ color:var(--text); border-color:var(--accent); transform:translateY(-2px); }
.tag.on{ color:#fff; background:var(--grad); border-color:transparent; }

/* ===== POLLING ===== */
.poll-opt{ position:relative; width:100%; text-align:left; padding:12px 15px; border-radius:14px;
  background:var(--glass); border:1px solid var(--stroke); font-size:14px; font-weight:600;
  margin-bottom:9px; overflow:hidden; transition:.22s var(--ease); color:var(--text); }
.poll-opt:hover:not(.voted){ border-color:var(--accent); transform:translateX(3px); }
.poll-opt .fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:14px;
  background:linear-gradient(90deg, rgba(124,58,237,.42), rgba(59,130,246,.30));
  transition:width .8s var(--ease); z-index:0; }
.poll-opt.mine .fill{ background:linear-gradient(90deg, rgba(52,211,153,.42), rgba(16,185,129,.28)); }
.poll-opt .lbl, .poll-opt .pct{ position:relative; z-index:1; }
.poll-opt .pct{ float:right; font-weight:800; color:var(--muted); }
.poll-opt.mine .pct::after{ content:' ✓'; color:#34d399; }
.poll-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-top:12px; font-size:12px; color:var(--muted-2); }
.poll-foot button{ background:none; border:none; color:var(--accent); font-weight:700; font-size:12px; }

/* ===== NEWSLETTER ===== */
.news-form{ display:flex; gap:9px; margin-top:14px; flex-wrap:wrap; }
.news-form input{ flex:1; min-width:170px; padding:12px 16px; border-radius:14px; font-size:14px;
  background:var(--glass); border:1px solid var(--stroke); color:var(--text); font-family:inherit; outline:none; transition:.2s var(--ease); }
.news-form input::placeholder{ color:var(--muted-2); }
.news-form input:focus{ border-color:var(--accent); box-shadow:0 0 0 4px rgba(139,92,246,.15); }
.news-note{ font-size:11.5px; color:var(--muted-2); margin-top:10px; }

/* ===== KUIS ===== */
.quiz{ padding:34px; border-radius:var(--radius-lg); border:1px solid var(--stroke);
  background:linear-gradient(135deg, rgba(124,58,237,.16), rgba(59,130,246,.12)); backdrop-filter:blur(18px); }
.quiz-head{ display:flex; align-items:center; gap:14px; margin-bottom:6px; flex-wrap:wrap; }
.quiz-head h3{ font-size:22px; font-weight:800; letter-spacing:-.6px; }
.quiz-bar{ height:6px; border-radius:20px; background:var(--stroke); overflow:hidden; margin:18px 0 22px; }
.quiz-bar span{ display:block; height:100%; width:0; border-radius:20px; background:var(--grad); transition:width .4s var(--ease); }
.quiz-q{ font-size:18.5px; font-weight:700; letter-spacing:-.4px; line-height:1.45; margin-bottom:16px; }
.quiz-opts{ display:grid; gap:10px; }
.quiz-opt{ text-align:left; padding:14px 17px; border-radius:16px; font-size:14.5px; font-weight:600;
  background:var(--glass); border:1px solid var(--stroke); color:var(--text); transition:.2s var(--ease); }
.quiz-opt:hover{ border-color:var(--accent); background:var(--glass-2); transform:translateX(4px); }
.quiz-score{ text-align:center; }
.quiz-score .big{ font-size:56px; font-weight:800; letter-spacing:-2px; line-height:1;
  background:var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.quiz-score h4{ font-size:21px; font-weight:800; margin:12px 0 8px; }
.quiz-score p{ color:var(--muted); font-size:15px; max-width:460px; margin:0 auto 14px; line-height:1.7; }
.quiz-tips{ text-align:left; max-width:520px; margin:16px auto 0; display:grid; gap:9px; }
.quiz-tips div{ display:flex; gap:10px; font-size:14px; color:var(--muted); background:var(--glass);
  border:1px solid var(--stroke-soft); padding:11px 14px; border-radius:14px; }

/* ===== HALAMAN ARTIKEL ===== */
.art-head{ padding:44px 0 8px; }
.crumb{ font-size:13px; color:var(--muted-2); margin-bottom:18px; }
.crumb a:hover{ color:var(--accent); }
.art-head h1{ font-size:clamp(30px,4.4vw,50px); font-weight:800; letter-spacing:-1.8px; line-height:1.1; margin:16px 0 14px; }
.art-lead{ color:var(--muted); font-size:18px; line-height:1.75; max-width:760px; }
.art-meta{ display:flex; align-items:center; gap:14px; margin-top:26px; flex-wrap:wrap;
  font-size:13.5px; color:var(--muted-2); }
.art-author{ display:flex; align-items:center; gap:11px; }
.avatar{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:800; color:#fff; flex-shrink:0; box-shadow:0 6px 16px rgba(0,0,0,.28); }
.art-author b{ color:var(--text); font-size:14px; display:block; }
.art-hero{ height:230px; border-radius:var(--radius-lg); display:grid; place-items:center;
  font-size:90px; margin:30px 0 8px; position:relative; overflow:hidden; box-shadow:var(--shadow); }
.art-hero::after{ content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:38px 38px; opacity:.5; }

.art-cols{ display:grid; grid-template-columns:1fr 300px; gap:38px; align-items:start; padding-top:34px; }

/* Daftar isi */
.toc{ position:sticky; top:96px; }
.toc h4{ font-size:12px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted-2); margin-bottom:12px; }
.toc a{ display:block; font-size:13.5px; color:var(--muted); padding:7px 0 7px 14px;
  border-left:2px solid var(--stroke); transition:.2s var(--ease); line-height:1.5; }
.toc a:hover{ color:var(--text); border-color:var(--accent); }
.toc a.active{ color:var(--accent); border-color:var(--accent); font-weight:700; }

/* Isi tulisan */
.prose{ font-size:16.8px; line-height:1.85; color:rgba(255,255,255,.86); max-width:760px; }
:root[data-theme="light"] .prose{ color:rgba(21,19,42,.84); }
.prose > * + *{ margin-top:20px; }
.prose h2{ font-size:26px; font-weight:800; letter-spacing:-.9px; color:var(--text); margin-top:44px; line-height:1.25; scroll-margin-top:110px; }
.prose h3{ font-size:20px; font-weight:800; letter-spacing:-.5px; color:var(--text); margin-top:32px; scroll-margin-top:110px; }
.prose a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.prose ul, .prose ol{ padding-left:22px; display:grid; gap:9px; }
.prose li::marker{ color:var(--accent); }
.prose b, .prose strong{ color:var(--text); font-weight:700; }
.prose blockquote{ padding:20px 24px; border-radius:20px; background:var(--glass);
  border:1px solid var(--stroke-soft); border-left:3px solid var(--accent); font-size:17px;
  font-style:italic; color:var(--text); }
.prose code{ font-family:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  font-size:14.5px; padding:2px 7px; border-radius:7px; background:var(--code-bg); border:1px solid var(--stroke-soft); }
.prose pre{ padding:18px 20px; border-radius:18px; background:var(--code-bg);
  border:1px solid var(--stroke-soft); overflow-x:auto; }
.prose pre code{ background:none; border:none; padding:0; }
.prose img{ border-radius:20px; }
.prose hr{ border:none; border-top:1px solid var(--stroke-soft); margin:34px 0; }
.callout{ display:flex; gap:14px; padding:18px 20px; border-radius:20px;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.28); font-size:15.5px; line-height:1.7; }
.callout .ci{ font-size:22px; line-height:1.3; }
.callout.warn{ background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.3); }
.callout.tip{ background:rgba(52,211,153,.12); border-color:rgba(52,211,153,.3); }

/* Tag artikel */
.art-tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:34px; padding-top:26px; border-top:1px solid var(--stroke-soft); }

/* Bar reaksi */
.react-bar{ margin-top:26px; padding:22px; border-radius:var(--radius); background:var(--glass);
  border:1px solid var(--stroke-soft); text-align:center; }
.react-bar h4{ font-size:15.5px; font-weight:800; margin-bottom:14px; }
.reacts{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.react{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:74px;
  padding:12px 10px; border-radius:18px; background:var(--glass); border:1px solid var(--stroke);
  font-size:24px; transition:.22s var(--ease); }
.react span{ font-size:12px; font-weight:700; color:var(--muted); }
.react:hover{ transform:translateY(-4px) scale(1.05); border-color:var(--accent); background:var(--glass-2); }
.react.on{ background:var(--grad); border-color:transparent; box-shadow:0 10px 24px rgba(124,58,237,.36); }
.react.on span{ color:#fff; }
.react.bump{ animation:bump .45s var(--ease); }
@keyframes bump{ 0%{ transform:scale(1);} 45%{ transform:scale(1.28) translateY(-6px);} 100%{ transform:scale(1);} }

/* Bagikan */
.share{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:20px; }
.share b{ font-size:13.5px; color:var(--muted); margin-right:4px; }
.share a, .share button{ width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--stroke); font-size:16px; transition:.2s var(--ease); }
.share a:hover, .share button:hover{ background:var(--grad); border-color:transparent; transform:translateY(-3px); }

/* Kotak penulis */
.author-box{ display:flex; gap:18px; align-items:flex-start; margin-top:30px; padding:24px;
  border-radius:var(--radius); background:var(--glass); border:1px solid var(--stroke-soft); }
.author-box .avatar{ width:58px; height:58px; font-size:19px; }
.author-box h4{ font-size:17px; font-weight:800; }
.author-box p{ color:var(--muted); font-size:14px; line-height:1.7; margin-top:6px; }

/* ===== KOMENTAR ===== */
.comments{ margin-top:44px; }
.comments-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px; }
.comments-head h3{ font-size:22px; font-weight:800; letter-spacing:-.7px; }
.c-form{ padding:22px; border-radius:var(--radius); background:var(--glass); border:1px solid var(--stroke-soft); }
.c-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.c-form input, .c-form textarea{ width:100%; padding:13px 15px; border-radius:14px; font-size:14.5px;
  background:var(--glass); border:1px solid var(--stroke); color:var(--text); font-family:inherit;
  outline:none; transition:.2s var(--ease); }
.c-form input::placeholder, .c-form textarea::placeholder{ color:var(--muted-2); }
.c-form input:focus, .c-form textarea:focus{ border-color:var(--accent); background:var(--glass-2); box-shadow:0 0 0 4px rgba(139,92,246,.15); }
.c-form textarea{ resize:vertical; min-height:104px; line-height:1.7; }
.c-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }
.c-foot .hint{ font-size:12px; color:var(--muted-2); }
.hp{ position:absolute; left:-9999px; opacity:0; height:0; width:0; }

.c-list{ margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.c-item{ display:flex; gap:14px; padding:18px 20px; border-radius:20px; background:var(--glass);
  border:1px solid var(--stroke-soft); animation:fade-up .45s var(--ease) both; }
.c-item.reply{ margin-left:38px; background:var(--glass-2); }
@keyframes fade-up{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
.c-item .c-main{ flex:1; min-width:0; }
.c-top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.c-top b{ font-size:14.5px; font-weight:700; }
.c-top .tag-mini{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
  padding:3px 9px; border-radius:20px; background:var(--grad); color:#fff; }
.c-top time{ font-size:12px; color:var(--muted-2); }
.c-body{ font-size:14.8px; line-height:1.75; color:var(--muted); margin-top:7px; white-space:pre-wrap; word-wrap:break-word; }
.c-acts{ display:flex; gap:14px; margin-top:10px; font-size:12.5px; color:var(--muted-2); font-weight:600; }
.c-acts button{ background:none; border:none; color:var(--muted-2); font-weight:600; font-size:12.5px;
  display:inline-flex; align-items:center; gap:5px; transition:.2s; }
.c-acts button:hover{ color:var(--accent); }
.c-acts button.on{ color:#fb7185; }
.c-empty{ text-align:center; padding:34px 20px; color:var(--muted-2); }
.c-empty .ico{ font-size:40px; opacity:.55; margin-bottom:8px; }

/* ===== ARTIKEL TERKAIT / CTA ===== */
.cta-band{ margin:80px 0 30px; }
.cta-inner{ position:relative; overflow:hidden; text-align:center; padding:58px 40px; border-radius:var(--radius-lg);
  background:linear-gradient(135deg, rgba(124,58,237,.22), rgba(59,130,246,.18));
  border:1px solid var(--stroke); backdrop-filter:blur(18px); }
.cta-inner::after{ content:''; position:absolute; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,#7c3aed,transparent 70%); top:-120px; right:-60px; opacity:.5; filter:blur(30px); }
.cta-inner h2{ font-size:clamp(26px,3.2vw,38px); font-weight:800; letter-spacing:-1.2px; position:relative; }
.cta-inner p{ color:var(--muted); font-size:16.5px; margin:14px auto 26px; max-width:520px; position:relative; }
.cta-inner .hero-cta{ justify-content:center; position:relative; }

/* ===== FOOTER ===== */
footer{ border-top:1px solid var(--stroke-soft); margin-top:40px; padding:54px 0 32px; }
.foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:32px; }
.foot-brand p{ color:var(--muted); font-size:14.5px; margin:16px 0 18px; max-width:300px; line-height:1.7; }
.foot-contact a{ display:block; color:var(--muted); font-size:13.5px; padding:3px 0; }
.foot-contact a:hover{ color:var(--text); }
.socials{ display:flex; gap:10px; margin-top:14px; }
.socials a{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--stroke); transition:.2s var(--ease); }
.socials a:hover{ background:var(--grad); border-color:transparent; transform:translateY(-3px); }
.socials svg{ width:18px; height:18px; }
.foot-col h5{ font-size:14px; font-weight:700; margin-bottom:14px; }
.foot-col a{ display:block; color:var(--muted); font-size:14px; padding:6px 0; transition:.2s; }
.foot-col a:hover{ color:var(--text); padding-left:4px; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:40px; padding-top:22px; border-top:1px solid var(--stroke-soft); color:var(--muted-2); font-size:13px; }
.foot-bottom .pills{ display:flex; gap:16px; flex-wrap:wrap; }

/* ===== MODAL & OVERLAY ===== */
.overlay{ position:fixed; inset:0; z-index:900; display:none; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
.overlay.open{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{ opacity:0;} to{ opacity:1;} }
.modal{ position:fixed; inset:0; z-index:901; display:none; place-items:center; padding:24px; }
.modal.open{ display:grid; }
.modal-box{ max-width:560px; width:100%; max-height:86vh; overflow-y:auto; position:relative;
  background:var(--panel); backdrop-filter:blur(30px); border:1px solid var(--stroke);
  border-radius:var(--radius); padding:32px; box-shadow:var(--shadow); animation:zoom .3s var(--ease); }
@keyframes zoom{ from{ opacity:0; transform:scale(.94) translateY(14px);} to{ opacity:1; transform:none;} }
.modal-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  background:var(--glass); border:1px solid var(--stroke); font-size:14px; }
.modal-close:hover{ background:var(--glass-2); }

/* Hasil pencarian cepat */
.sr-item{ display:flex; gap:13px; align-items:center; padding:12px 14px; border-radius:16px;
  border:1px solid transparent; transition:.18s var(--ease); }
.sr-item:hover{ background:var(--glass); border-color:var(--stroke-soft); }
.sr-item .mi{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:20px; flex-shrink:0; }
.sr-item h4{ font-size:14.5px; font-weight:700; }
.sr-item p{ font-size:12.5px; color:var(--muted-2); margin-top:2px; }
mark{ background:rgba(167,139,250,.32); color:inherit; border-radius:4px; padding:0 2px; }

/* ===== TOAST ===== */
.toast-wrap{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:1000;
  display:flex; flex-direction:column; gap:10px; align-items:center; pointer-events:none; }
.toast{ display:flex; align-items:center; gap:12px; padding:14px 20px; border-radius:16px;
  background:var(--panel); backdrop-filter:blur(20px); border:1px solid var(--stroke);
  box-shadow:0 20px 50px rgba(0,0,0,.4); font-size:14.5px; font-weight:600;
  animation:toast-in .4s var(--ease); max-width:min(420px,92vw); }
.toast .ti{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font-size:16px;
  background:linear-gradient(135deg,#34d399,#10b981); flex-shrink:0; }
.toast.warn .ti{ background:linear-gradient(135deg,#fbbf24,#f59e0b); }
.toast.err .ti{ background:linear-gradient(135deg,#fb7185,#e11d48); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
.toast.out{ animation:toast-out .35s var(--ease) forwards; }
@keyframes toast-out{ to{ opacity:0; transform:translateY(16px);} }

/* ===== TOMBOL KE ATAS ===== */
.to-top{ position:fixed; right:24px; bottom:26px; z-index:340; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; font-size:18px; background:var(--panel); border:1px solid var(--stroke);
  box-shadow:0 14px 34px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:.3s var(--ease); }
.to-top.show{ opacity:1; pointer-events:auto; }
.to-top:hover{ background:var(--grad); border-color:transparent; transform:translateY(-3px); }

/* ===== ALERT (admin/setup) ===== */
.alert{ padding:13px 16px; border-radius:14px; font-size:14px; font-weight:600; margin-bottom:18px;
  display:flex; gap:11px; align-items:flex-start; }
.alert.err{ background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.3); color:#fca5a5; }
.alert.ok{ background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.3); color:#6ee7b7; }
.alert.warn{ background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.3); color:#fcd34d; }
.alert ul{ margin:5px 0 0 18px; font-weight:500; }
.alert b{ color:var(--text); }

/* ===== FORM UMUM (admin) ===== */
.field{ margin-bottom:15px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:var(--muted); margin-bottom:7px; }
.field input, .field select, .field textarea{ width:100%; padding:13px 15px; border-radius:14px;
  background:var(--glass); border:1px solid var(--stroke); color:var(--text); font-size:15px;
  font-family:inherit; transition:.2s var(--ease); outline:none; }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--accent); background:var(--glass-2); box-shadow:0 0 0 4px rgba(139,92,246,.15); }
.field textarea{ resize:vertical; min-height:110px; line-height:1.7; }
.field select{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a78bfa' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px; }
.field select option{ background:var(--bg-2); color:var(--text); }
.field .hint{ font-size:12px; color:var(--muted-2); margin-top:6px; }
.form-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wrap-center{ min-height:70vh; display:flex; align-items:center; justify-content:center; padding:44px 20px; }
.card-auth{ width:100%; max-width:440px; background:var(--glass); border:1px solid var(--stroke);
  border-radius:var(--radius); padding:36px 32px; backdrop-filter:blur(22px); box-shadow:var(--shadow); }
.card-auth h1{ font-size:25px; font-weight:800; letter-spacing:-.6px; }
.card-auth .sub{ color:var(--muted); font-size:14.5px; margin:6px 0 22px; }
.card-ico{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; font-size:26px;
  background:var(--grad); box-shadow:0 12px 28px rgba(124,58,237,.4); margin-bottom:16px; }
.muted-link{ text-align:center; color:var(--muted); font-size:14px; margin-top:20px; }
.muted-link a{ color:var(--accent); font-weight:700; }

/* ===== TABEL (admin) ===== */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ text-align:left; padding:13px 12px; border-bottom:1px solid var(--stroke-soft);
  font-size:14px; vertical-align:middle; }
.table th{ color:var(--muted-2); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:.6px; }
.table tr:last-child td{ border-bottom:none; }
.badge{ display:inline-block; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:700;
  background:var(--glass-2); border:1px solid var(--stroke-soft); color:var(--muted); }
.badge.ok{ background:rgba(52,211,153,.14); border-color:rgba(52,211,153,.3); color:#6ee7b7; }
.badge.wait{ background:rgba(251,191,36,.14); border-color:rgba(251,191,36,.3); color:#fcd34d; }
.btn-del{ background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.28); color:#fca5a5;
  padding:8px 13px; border-radius:10px; font-size:13px; font-weight:700; transition:.2s var(--ease); }
.btn-del:hover{ background:rgba(248,113,113,.2); transform:translateY(-1px); }
.stat-row{ display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.stat-box{ flex:1; min-width:130px; background:var(--glass); border:1px solid var(--stroke-soft);
  border-radius:16px; padding:16px 18px; }
.stat-box .n{ font-size:24px; font-weight:800; letter-spacing:-.5px;
  background:var(--grad-2); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-box .l{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.empty{ text-align:center; padding:44px 20px; color:var(--muted-2); }
.empty .ico{ font-size:44px; opacity:.5; margin-bottom:10px; }

/* ===== ANIMASI MUNCUL ===== */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in{ opacity:1; transform:none; }

/* ===== RESPONSIF ===== */
@media (max-width:1080px){
  .art-cols{ grid-template-columns:1fr; gap:28px; }
  .toc{ position:static; }
  .toc-wrap{ order:-1; }
}
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-visual{ max-width:520px; width:100%; margin:0 auto; }
  .layout{ grid-template-columns:1fr; }
  .side{ position:static; }
  .nav-links{ display:none; }
  .nav-toggle{ display:grid; }
  .stats-inner{ grid-template-columns:repeat(2,1fr); gap:20px 0; }
  .stat + .stat{ border-left:none; }
  .stat:nth-child(3), .stat:nth-child(4){ border-top:1px solid var(--stroke-soft); padding-top:18px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:26px; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .card.feature{ flex-direction:column; }
  .card.feature .card-cover{ width:100%; min-height:180px; height:180px; font-size:56px; }
  .card.feature .card-body{ padding:24px 22px; }
}
@media (max-width:680px){
  .container, .container-sm, .nav-wrap{ padding-left:16px; padding-right:16px; }
  .navbar{ padding:10px 12px 10px 16px; }
  .brand .word{ font-size:18px; }
  .brand .word i{ display:none; }
  .nav-right .btn-primary{ display:none; }   /* pindah ke laci menu agar navbar tidak meluber */
  .hero{ padding:36px 0 4px; }
  .hero h1{ letter-spacing:-1.2px; }
  .post-grid, .grid-3{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .sec{ padding:52px 0 10px; }
  .c-row{ grid-template-columns:1fr; }
  .form-2{ grid-template-columns:1fr; }
  .quiz{ padding:24px 20px; }
  .art-hero{ height:170px; font-size:62px; }
  .c-item.reply{ margin-left:16px; }
  .cta-inner{ padding:40px 22px; }
  .foot-bottom{ flex-direction:column; text-align:center; }
  .modal-box{ padding:26px 20px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
  html{ scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; }
}