/* ════════════════════════════════════════════════════════════
   DailyBlog Network — Public CSS
   Tema: Navy Biru & Putih — Elegan & General
════════════════════════════════════════════════════════════ */

/* ── VARIABLES ───────────────────────────────────────────── */
:root {
  --navy:     #0F172A;
  --navy-2:   #1E293B;
  --navy-3:   #334155;
  --blue:     #00C8D7;
  --blue-2:   #00A8B5;
  --blue-lt:  #E0FAFB;
  --blue-md:  #B2EEF4;
  --text:     #0F172A;
  --text-2:   #1E293B;
  --muted:    #64748B;
  --muted-2:  #94A3B8;
  --bdr:      #E2E8F0;
  --bdr-2:    #CBD5E1;
  --bg:       #F8FAFC;
  --bg-2:     #F1F5F9;
  --white:    #FFFFFF;
  --red:      #DC2626;
  --green:    #16A34A;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.6;
}
a { color:inherit; text-decoration:none }
img { max-width:100%; display:block }
ul { list-style:none }

/* ── CONTAINER ───────────────────────────────────────────── */
.container { max-width:1200px; margin:0 auto; padding:0 20px }

/* ════════════════════════════════════════════════════════════
   NAVBAR
════════════════════════════════════════════════════════════ */
.navbar {
  position:sticky; top:0; z-index:200;
  background:var(--navy); border-bottom:1px solid var(--navy-3);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
.nb-inner {
  max-width:1280px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:0; height:56px;
}
.nb-brand {
  display:flex; align-items:center; gap:10px;
  font-size:18px; font-weight:800; color:var(--white); white-space:nowrap;
  letter-spacing:-.3px; text-decoration:none; flex-shrink:0;
  margin-right:16px;
}
.brand-icon { font-size:20px; line-height:1 }
.brand-dot  { color:var(--pink); }

/* Kategori nav */
.nb-cats {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  white-space: nowrap;
}
.nb-cats::-webkit-scrollbar { display: none; }
.nb-cat-link {
  display:flex; align-items:center; padding:0 14px; height:56px;
  font-size:13px; font-weight:500; color:rgba(255,255,255,.72);
  white-space:nowrap; transition:.15s; border-bottom:2px solid transparent;
  flex-shrink: 0;
}
.nb-cat-link:hover { color:var(--white); background:rgba(255,255,255,.07); border-bottom-color:var(--pink) }

/* Kanan navbar */
.nb-right { display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0; padding-left:12px }
.nb-search {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  border-radius:6px; padding:6px 12px;
}
.nb-search svg { color:rgba(255,255,255,.5); flex-shrink:0 }
.nb-search input {
  background:none; border:none; outline:none; color:var(--white);
  font-family:inherit; font-size:13px; width:150px;
}
.nb-search input::placeholder { color:rgba(255,255,255,.4) }
.nb-login {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 16px; border-radius:6px; font-size:13px; font-weight:600;
  background:var(--blue); color:var(--white); text-decoration:none;
  transition:.15s; white-space:nowrap;
}
.nb-login:hover { background:var(--blue-2) }
.nb-login.ghost { background:rgba(255,255,255,.12); color:var(--white); border:1px solid rgba(255,255,255,.2) }
.nb-login.ghost:hover { background:rgba(255,255,255,.2) }

/* User dropdown button */
.nb-user-btn {
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  border-radius:6px; padding:6px 12px 6px 7px;
  cursor:pointer; font-family:inherit; transition:.15s;
}
.nb-user-btn:hover { background:rgba(255,255,255,.2) }
.nb-av {
  width:28px; height:28px; border-radius:4px; display:flex; align-items:center;
  justify-content:center; font-weight:700; color:#fff; font-size:11px; flex-shrink:0;
}
.nb-uname { font-size:13px; font-weight:600; color:var(--white); max-width:90px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.nb-caret  { color:rgba(255,255,255,.5); flex-shrink:0 }

/* Dropdown */
.nb-dropdown {
  position:absolute; top:calc(100% + 8px); right:0;
  background:var(--white); border:1px solid var(--bdr); border-radius:10px;
  padding:6px; min-width:210px; box-shadow:0 8px 32px rgba(0,0,0,.18);
  display:none; z-index:500;
}
.nb-dropdown.open { display:block; animation:ddFade .12s ease }
@keyframes ddFade { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} }
.nbd-head { padding:10px 12px; border-radius:6px; background:var(--blue-lt); margin-bottom:4px }
.nbd-name { font-size:13px; font-weight:700; color:var(--text) }
.nbd-role { font-size:11px; color:var(--muted); text-transform:capitalize }
.nbd-item {
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  border-radius:6px; font-size:13px; font-weight:500; color:var(--text); text-decoration:none; transition:.1s;
}
.nbd-item:hover { background:var(--blue-lt); color:var(--blue) }
.nbd-logout { color:var(--red) }
.nbd-logout:hover { background:#FEF2F2 }
.nbd-divider { height:1px; background:var(--bdr); margin:4px 0 }

/* Hamburger */
.nb-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; margin-left:auto }
.nb-hamburger span { display:block; width:22px; height:2px; background:rgba(255,255,255,.8); border-radius:2px; transition:.2s }
.nb-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.nb-hamburger.open span:nth-child(2) { opacity:0 }
.nb-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* Mobile menu */
.nb-mobile-menu { display:none; background:var(--navy-2); border-top:1px solid var(--navy-3) }
.nb-mobile-menu.show { display:block }
.nb-mobile-link {
  display:block; padding:12px 20px; font-size:14px; color:rgba(255,255,255,.8);
  border-left:3px solid transparent; transition:.1s;
}
.nb-mobile-link:hover { background:rgba(255,255,255,.07); color:var(--white) }

/* ════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */
.hero-main {
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, #003d45 100%);
  padding:56px 0 48px; color:var(--white); position:relative; overflow:hidden;
}
.hero-main::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 80% at 60% 50%, rgba(37,99,235,.18) 0%, transparent 70%);
}
.hero-inner { position:relative; z-index:1; display:flex; align-items:center; gap:40px; flex-wrap:wrap }
.hero-text   { flex:1; min-width:260px }
.hero-badge  {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(37,99,235,.3); border:1px solid rgba(37,99,235,.5);
  color:#67DCE8; font-size:11px; font-weight:700; padding:4px 14px;
  border-radius:20px; margin-bottom:14px; text-transform:uppercase; letter-spacing:.06em;
}
.hero-title {
  font-size:42px; font-weight:800; line-height:1.2; margin-bottom:12px;
  font-family:'Playfair Display', Georgia, serif;
}
.hero-title span { color:#38D4E0 }
.hero-sub   { font-size:15px; opacity:.75; line-height:1.7; max-width:480px; margin-bottom:22px }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap }
.hero-btn-primary {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--blue); color:var(--white); padding:11px 24px;
  border-radius:7px; font-size:14px; font-weight:700; text-decoration:none; transition:.15s;
}
.hero-btn-primary:hover { background:var(--blue-2); transform:translateY(-1px) }
.hero-btn-secondary {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.12); color:var(--white); padding:11px 22px;
  border-radius:7px; font-size:14px; font-weight:600; text-decoration:none;
  border:1px solid rgba(255,255,255,.2); transition:.15s;
}
.hero-btn-secondary:hover { background:rgba(255,255,255,.2) }

/* Hero stats bar */
.hero-stats {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:10px; padding:18px 24px; display:flex; gap:32px; flex-wrap:wrap; margin-top:28px;
}
.hero-stat-num { font-size:24px; font-weight:800; color:var(--white) }
.hero-stat-lbl { font-size:11px; opacity:.6; text-transform:uppercase; letter-spacing:.06em; margin-top:2px }

/* ════════════════════════════════════════════════════════════
   SECTIONS & SHARED
════════════════════════════════════════════════════════════ */
.container { max-width:1200px; margin:0 auto; padding:0 20px }
.section    { padding:48px 0 }
.sec-head   { text-align:center; margin-bottom:32px }
.sec-title  { font-size:26px; font-weight:800; color:var(--text); margin-bottom:8px; font-family:'Playfair Display',serif }
.sec-sub    { font-size:14px; color:var(--muted) }

/* ── KATEGORI GRID ───────────────────────────────────────── */
.cat-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.cat-card {
  display:flex; align-items:center; gap:12px;
  background:var(--white); border:1px solid var(--bdr); border-radius:10px;
  padding:14px 16px; text-decoration:none; transition:.2s;
  border-left:3px solid var(--cat-color, var(--blue));
}
.cat-card:hover {
  border-color:var(--cat-color, var(--blue));
  box-shadow:0 4px 16px rgba(0,0,0,.1); transform:translateY(-2px);
}
.cat-icon   { font-size:22px; flex-shrink:0 }
.cat-name   { font-size:13px; font-weight:700; color:var(--text); line-height:1.3 }
.cat-count  { font-size:11px; color:var(--muted); margin-top:2px }

/* ── ARTIKEL CARDS ───────────────────────────────────────── */
.art-featured {
  display:grid; grid-template-columns:1.4fr 1fr; gap:0;
  background:var(--white); border:1px solid var(--bdr); border-radius:12px;
  overflow:hidden; text-decoration:none; margin-bottom:24px; transition:.2s;
}
.art-featured:hover { box-shadow:0 6px 24px rgba(0,0,0,.1) }
.art-feat-img { position:relative; min-height:280px; overflow:hidden }
.art-feat-img img { width:100%; height:100%; object-fit:cover }
.art-feat-placeholder {
  width:100%; height:100%; min-height:280px; display:flex; align-items:center;
  justify-content:center; font-size:64px;
  background:linear-gradient(135deg,var(--blue-lt),var(--blue-md));
}
.art-feat-body { padding:28px 24px; display:flex; flex-direction:column; justify-content:center }
.art-cat-pill  {
  display:inline-flex; align-items:center; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:4px; margin-bottom:12px;
}
.art-feat-title { font-size:22px; font-weight:800; color:var(--text); line-height:1.35; margin-bottom:12px; font-family:'Playfair Display',serif }
.art-feat-exc   { font-size:14px; color:var(--muted); line-height:1.65; margin-bottom:16px }
.art-feat-meta  { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); flex-wrap:wrap }

/* Grid artikel */
.art-grid-home {
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.art-card-home {
  background:var(--white); border:1px solid var(--bdr); border-radius:10px;
  overflow:hidden; text-decoration:none; transition:.2s; display:flex; flex-direction:column;
}
.art-card-home:hover { box-shadow:0 4px 18px rgba(0,0,0,.1); transform:translateY(-2px) }
.art-card-img { position:relative; aspect-ratio:16/9; overflow:hidden }
.art-card-img img { width:100%; height:100%; object-fit:cover; transition:.3s }
.art-card-home:hover .art-card-img img { transform:scale(1.04) }
.art-card-placeholder {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:32px;
  background:linear-gradient(135deg,var(--blue-lt),var(--blue-md));
}
.art-card-cat {
  position:absolute; top:8px; left:8px;
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; color:#fff;
}
.art-card-body  { padding:14px; flex:1; display:flex; flex-direction:column }
.art-card-title { font-size:14px; font-weight:700; color:var(--text); line-height:1.45; margin-bottom:8px; flex:1 }
.art-card-meta  { font-size:11px; color:var(--muted); display:flex; gap:6px; flex-wrap:wrap }

/* ── POPULER ─────────────────────────────────────────────── */
.section-populer { padding:48px 0; background:var(--white); border-top:1px solid var(--bdr) }
.populer-list    { display:flex; flex-direction:column; gap:0 }
.populer-item    {
  display:flex; align-items:center; gap:14px; padding:14px 0;
  border-bottom:1px solid var(--bdr); text-decoration:none; transition:.12s;
}
.populer-item:hover { background:var(--blue-lt); margin:0 -20px; padding:14px 20px; border-radius:8px }
.pop-num  { font-size:22px; font-weight:800; min-width:36px; text-align:center; font-family:'Playfair Display',serif }
.pop-body { flex:1; min-width:0 }
.pop-title{ font-size:14px; font-weight:700; color:var(--text); line-height:1.4 }
.pop-meta { font-size:12px; color:var(--muted); margin-top:3px }
.pop-cat  { font-size:11px; font-weight:700; padding:3px 10px; border-radius:4px; white-space:nowrap; flex-shrink:0 }

/* ── ADS PROMO SECTION ───────────────────────────────────── */
.section-ads-promo { padding:64px 0; background:var(--navy); color:var(--white) }
.adsp-header { text-align:center; margin-bottom:40px }
.adsp-badge  {
  display:inline-block; background:rgba(37,99,235,.35); border:1px solid rgba(37,99,235,.6);
  color:#67DCE8; font-size:11px; font-weight:700; padding:5px 16px; border-radius:20px;
  margin-bottom:14px; text-transform:uppercase; letter-spacing:.07em;
}
.adsp-title  { font-size:34px; font-weight:800; font-family:'Playfair Display',serif; line-height:1.25; margin-bottom:12px }
.adsp-gradient { color:#38D4E0 }
.adsp-sub    { font-size:15px; opacity:.72; max-width:560px; margin:0 auto; line-height:1.7 }

.adsp-stats  { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:40px; flex-wrap:wrap }
.adsp-stat   { text-align:center; padding:0 32px }
.adsp-stat-num { font-size:30px; font-weight:800; color:var(--white) }
.adsp-stat-lbl { font-size:12px; opacity:.6; text-transform:uppercase; letter-spacing:.06em; margin-top:4px }
.adsp-stat-div { width:1px; height:36px; background:rgba(255,255,255,.15) }

.adsp-benefits { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:48px }
.adsp-benefit  { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:22px }
.adsp-b-icon   { font-size:26px; margin-bottom:10px }
.adsp-b-title  { font-size:15px; font-weight:700; margin-bottom:6px }
.adsp-benefit p{ font-size:13px; opacity:.7; line-height:1.65 }

.adsp-pricing-head { text-align:center; margin-bottom:24px }
.adsp-pricing-head h3 { font-size:22px; font-weight:800 }
.adsp-pricing-head p  { font-size:13px; opacity:.65; margin-top:5px }

.adsp-pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px }
.adsp-pkg {
  background:rgba(255,255,255,.07); border:2px solid rgba(255,255,255,.12);
  border-radius:14px; padding:22px 18px; position:relative; transition:.2s;
}
.adsp-pkg:hover { background:rgba(255,255,255,.12); border-color:var(--blue) }
.adsp-pkg-popular { background:rgba(37,99,235,.2); border-color:var(--blue) }
.adsp-pkg-badge {
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--blue); color:#fff; font-size:11px; font-weight:700;
  padding:4px 14px; border-radius:20px; white-space:nowrap;
}
.adsp-pkg-icon { font-size:26px; margin-bottom:8px }
.adsp-pkg-name { font-size:16px; font-weight:800; margin-bottom:4px }
.adsp-pkg-desc { font-size:12px; opacity:.65; margin-bottom:14px; min-height:32px; line-height:1.5 }
.adsp-pkg-price { display:flex; align-items:baseline; gap:3px; margin-bottom:8px; flex-wrap:wrap }
.adsp-price-rp  { font-size:13px; opacity:.7 }
.adsp-price-num { font-size:26px; font-weight:800; color:#38D4E0; line-height:1 }
.adsp-price-per { font-size:12px; opacity:.7 }
.adsp-pkg-alts  { display:flex; align-items:center; gap:6px; font-size:11px; opacity:.65; margin-bottom:12px; flex-wrap:wrap }
.adsp-pkg-alt   { display:flex; flex-direction:column; gap:1px }
.adsp-pkg-alt strong { font-size:12px; font-weight:700; opacity:1 }
.adsp-pkg-alt-sep { opacity:.4 }
.adsp-pkg-features { list-style:none; font-size:12px; opacity:.8; margin-bottom:16px; display:flex; flex-direction:column; gap:5px; line-height:1.4 }
.adsp-pkg-btn {
  display:block; text-align:center; padding:10px; border-radius:7px;
  font-size:13px; font-weight:700; color:#fff; text-decoration:none; transition:.15s;
}
.adsp-pkg-btn:hover { filter:brightness(1.1) }

.adsp-slots { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:24px; margin-bottom:32px }
.adsp-slots-head { font-size:15px; font-weight:700; margin-bottom:16px; opacity:.9 }
.adsp-slots-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.adsp-slot { background:rgba(255,255,255,.07); border-radius:8px; padding:14px; font-size:12px }
.adsp-slot-kode { font-weight:800; font-size:14px; color:#38D4E0; margin-bottom:4px }
.adsp-slot-nama { font-weight:600; margin-bottom:3px }
.adsp-slot-size,.adsp-slot-pos { opacity:.65; font-size:11px }

.adsp-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  background:rgba(37,99,235,.25); border:1px solid rgba(37,99,235,.4); border-radius:14px; padding:28px 32px }
.adsp-cta-text h3 { font-size:20px; font-weight:800; margin-bottom:6px }
.adsp-cta-text p  { font-size:14px; opacity:.75 }
.adsp-cta-btns   { display:flex; gap:10px; flex-wrap:wrap }
.adsp-cta-primary{
  background:var(--blue); color:#fff; padding:12px 24px; border-radius:7px;
  font-size:14px; font-weight:700; text-decoration:none; transition:.15s;
}
.adsp-cta-primary:hover { background:var(--blue-2) }
.adsp-cta-secondary{
  background:rgba(255,255,255,.15); color:#fff; padding:12px 22px; border-radius:7px;
  font-size:14px; font-weight:600; text-decoration:none; border:1px solid rgba(255,255,255,.2);
}

/* ── NEWSLETTER ──────────────────────────────────────────── */
.section-nl { padding:48px 0; background:var(--blue-lt); border-top:1px solid var(--blue-md) }
.nl-box { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  background:var(--white); border:1px solid var(--bdr); border-radius:14px; padding:32px }
.nl-text h2 { font-size:22px; font-weight:800; color:var(--text); margin-bottom:6px; margin-top:8px }
.nl-text p  { font-size:14px; color:var(--muted) }
.nl-form    { display:flex; gap:8px; flex-wrap:wrap }
.nl-form input {
  background:var(--bg); border:1.5px solid var(--bdr); border-radius:7px;
  padding:11px 16px; font-size:14px; font-family:inherit; outline:none; color:var(--text); width:260px;
}
.nl-form input:focus { border-color:var(--blue) }
.nl-form button {
  background:var(--blue); color:#fff; border:none; border-radius:7px;
  padding:11px 22px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s;
}
.nl-form button:hover { background:var(--blue-2) }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer      { background:var(--navy); color:rgba(255,255,255,.75); padding-top:40px }
.footer-inner{
  max-width:1200px; margin:0 auto; padding:0 20px 32px;
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
}
.footer-logo { font-size:18px; font-weight:800; color:var(--white); margin-bottom:10px; display:flex; align-items:center; gap:8px }
.footer-brand p { font-size:13px; line-height:1.65; max-width:260px; opacity:.65 }
.footer-heading { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.4); margin-bottom:12px }
.footer-cats a, .footer-links a {
  display:block; font-size:13px; color:rgba(255,255,255,.65); margin-bottom:7px; transition:.1s;
}
.footer-cats a:hover, .footer-links a:hover { color:var(--white) }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.1); padding:16px 20px;
  text-align:center; font-size:12px; color:rgba(255,255,255,.4); max-width:1200px; margin:0 auto;
}

/* ── ARTIKEL DETAIL ──────────────────────────────────────── */
.art-detail-layout { display:grid; grid-template-columns:1fr 300px; gap:24px; align-items:start }
.art-detail-main   { background:var(--white); border:1px solid var(--bdr); border-radius:12px; overflow:hidden }
.art-detail-sidebar{ display:flex; flex-direction:column; gap:16px; position:sticky; top:70px }
.art-content { padding:28px; font-size:15px; line-height:1.8; color:var(--text-2) }
.art-content h2,h3,h4 { margin:24px 0 10px; font-weight:800; color:var(--text) }
.art-content p { margin-bottom:16px }
.art-content img { border-radius:8px; margin:16px 0 }

/* Sidebar boxes */
.sidebar-box { background:var(--white); border:1px solid var(--bdr); border-radius:10px; overflow:hidden }
.sb-head { padding:12px 16px; font-size:13px; font-weight:700; color:var(--text); border-bottom:1px solid var(--bdr); background:var(--bg) }
.sb-body { padding:12px 16px }

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); margin-bottom:16px; flex-wrap:wrap }
.breadcrumb a { color:var(--blue) }

/* ── BADGES & TAGS ───────────────────────────────────────── */
.tag {
  display:inline-flex; align-items:center; font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:4px; white-space:nowrap;
}
.tag-blue   { background:var(--blue-lt); color:var(--blue) }
.tag-green  { background:#DCFCE7; color:#15803D }
.tag-red    { background:#FEF2F2; color:#DC2626 }
.tag-yellow { background:#FEFCE8; color:#A16207 }
.tag-grey   { background:var(--bg-2); color:var(--muted) }

/* ── COMMENT SECTION ─────────────────────────────────────── */
.comment-wrap { padding:24px 28px; border-top:1px solid var(--bdr) }
.comment-item {
  display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--bdr);
}
.comment-av {
  width:36px; height:36px; border-radius:6px; display:flex; align-items:center;
  justify-content:center; font-weight:700; color:#fff; font-size:13px; flex-shrink:0;
}
.comment-body { flex:1 }
.comment-meta { display:flex; align-items:center; gap:8px; margin-bottom:5px; flex-wrap:wrap }
.comment-name { font-size:13px; font-weight:700; color:var(--text) }
.comment-time { font-size:11px; color:var(--muted) }
.comment-text { font-size:14px; color:var(--text-2); line-height:1.65 }
.comment-reply-wrap { margin-top:10px; margin-left:48px }
.reply-item { background:var(--bg); border-radius:8px; padding:12px 14px; margin-bottom:8px }

/* Komentar form */
.comment-form { background:var(--bg); border-radius:10px; padding:18px; margin-top:20px }
.comment-form textarea {
  width:100%; background:var(--white); border:1.5px solid var(--bdr); border-radius:8px;
  padding:12px 14px; font-size:14px; font-family:inherit; outline:none; resize:vertical; min-height:90px;
  transition:.15s;
}
.comment-form textarea:focus { border-color:var(--blue) }
.btn-primary {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--blue); color:#fff; border:none; border-radius:7px;
  padding:10px 22px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:.15s;
}
.btn-primary:hover { background:var(--blue-2) }

/* ── EMPTY STATE ─────────────────────────────────────────── */
.empty-state { text-align:center; padding:48px 20px; color:var(--muted) }
.empty-state p { font-size:14px }

/* ═══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width:1024px) {
  .art-grid-home      { grid-template-columns:repeat(3,1fr) }
  .adsp-pricing-grid  { grid-template-columns:repeat(2,1fr) }
  .adsp-benefits      { grid-template-columns:repeat(2,1fr) }
  .cat-grid           { grid-template-columns:repeat(4,1fr) }
}
@media (max-width:900px) {
  .nb-cats    { display:none }
  .nb-hamburger { display:flex }
  .nb-search  { display:none }
  .art-featured { grid-template-columns:1fr }
  .art-feat-img { min-height:200px }
  .art-grid-home{ grid-template-columns:repeat(2,1fr) }
  .cat-grid   { grid-template-columns:repeat(2,1fr) }
  .adsp-slots-grid { grid-template-columns:repeat(2,1fr) }
  .footer-inner{ grid-template-columns:1fr 1fr; gap:28px }
  .art-detail-layout { grid-template-columns:1fr }
  .art-detail-sidebar { position:static }
}
@media (max-width:600px) {
  .hero-title { font-size:28px }
  .art-grid-home { grid-template-columns:1fr }
  .cat-grid { grid-template-columns:repeat(2,1fr) }
  .adsp-pricing-grid { grid-template-columns:1fr }
  .adsp-benefits { grid-template-columns:1fr }
  .footer-inner { grid-template-columns:1fr }
  .nl-form input { width:100% }
  .hero-stats { gap:20px }
  .adsp-cta { flex-direction:column }
}

/* ── NAVBAR ACTIVE CATEGORY ─────────────────────────────── */
.nb-cat-active {
  color:#fff !important;
  font-weight:700 !important;
  border-bottom:2px solid var(--blue);
}

/* ── KATEGORI HERO ───────────────────────────────────────── */
.breadcrumb a { color:#67DCE8; text-decoration:none }
.breadcrumb a:hover { color:#fff }

/* ════════════════════════════════════════════════════════════
   IKLAN DISPLAY — Sticky Footer & Popup
════════════════════════════════════════════════════════════ */

/* Sticky Footer */
#sticky-footer-ad {
  animation: slideUp .4s ease;
}
@keyframes slideUp {
  from { transform:translateY(100%); opacity:0 }
  to   { transform:translateY(0);    opacity:1 }
}
#sticky-footer-ad img {
  max-height:90px;
  object-fit:cover;
}

/* Popup */
#popup-ad-overlay { animation-fill-mode:forwards }
#popup-ad-box img { max-height:360px }

/* Popup responsive */
@media (max-width:600px) {
  #popup-ad-box    { max-width:95vw;border-radius:12px }
  #popup-ad-box img{ max-height:240px }
  #sticky-footer-ad img { max-height:60px }
}
@media (max-width:768px) {
  #sticky-footer-ad img { max-height:70px }
}

/* Body padding saat sticky footer aktif (ditambahkan via JS) */
.has-sticky-footer { padding-bottom:90px }
@media (max-width:600px) { .has-sticky-footer { padding-bottom:60px } }