/* Shared styles: home, archive, single */
:root{
  --putih:#fafafa; --kartu:#ffffff; --teks:#1d1d1d; --teks2:#2a2a2a;
  --abu:#5c5c5c; --abu2:#8a8a8a; --garis:#e6e6e6; --garis2:#ececec;
  --merah:#ce1126; --merah-tua:#a01820; --tint:#fdeceb;
  --gelap:#151515; --gelap2:#1d1d1d; --gelap-garis:#2c2c2c; --gelap-input:#0f0f0f;
  --krem:#f5f0e8; --kuning:#fff3cd; --kuning-teks:#66500a;
  --wrap:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--putih);color:var(--teks);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
a{color:var(--merah-tua);text-decoration:none}
a:hover{color:var(--merah);text-decoration:underline}
:focus-visible{outline:2px solid var(--merah);outline-offset:2px}
::selection{background:var(--tint)}
img{max-width:100%;height:auto;display:block}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:100;background:var(--kartu);padding:8px 14px;border-radius:4px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* container - 15px gutter on every side */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 15px}
.wrap-narrow{width:100%;max-width:760px;margin:0 auto;padding:0 15px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--kartu);border-bottom:1px solid var(--garis)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:9px;color:var(--teks);font-weight:800;font-size:18px;letter-spacing:-.01em}
.brand:hover{color:var(--teks);text-decoration:none}
.brand-dot{width:11px;height:11px;background:var(--merah);display:inline-block;flex:none}
.brand .tld{color:var(--abu2);font-weight:500;font-size:13px}
.brand img{max-height:34px;width:auto}
.nav{display:flex;gap:2px;font-size:14px;font-weight:600}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0}
.nav a{display:block;color:var(--teks);padding:7px 10px}
.nav a:hover{color:var(--merah);text-decoration:none}
.nav .current-menu-item>a,.nav .current_page_item>a,.nav a.active{color:var(--merah)}
.nav-toggle{display:none;cursor:pointer;font:inherit;font-size:14px;font-weight:700;padding:7px 12px;background:var(--kartu);border:1px solid #d9d9d9;border-radius:6px;color:var(--teks)}
.nav-toggle:hover{border-color:var(--merah);color:var(--merah)}

/* dark hero */
.hero{background:var(--gelap);border-bottom:3px solid var(--merah)}
.hero .wrap,.hero .wrap-narrow{padding-top:34px;padding-bottom:34px}
.kicker{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:#8f8f8f;text-transform:uppercase}
.hero h1{margin:8px 0 0;color:#fff;font-size:clamp(23px,4.2vw,34px);line-height:1.2;letter-spacing:-.015em;max-width:740px;text-wrap:balance}
.hero .lead{margin:10px 0 0;color:#b9b9b9;font-size:15px;line-height:1.65;max-width:660px;text-wrap:pretty}

/* section heading with red bar */
.section{padding:52px 0 8px}
.h2-bar{margin:0;font-size:clamp(20px,3vw,25px);line-height:1.25;border-left:4px solid var(--merah);padding-left:12px}
.sub{margin:8px 0 0 16px;color:var(--abu);font-size:14px}

/* chip / tab / pill */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{cursor:pointer;font:inherit;font-size:13px;font-weight:600;white-space:nowrap;padding:7px 14px;border-radius:999px;background:#232323;color:#d6d6d6;border:1px solid #3a3a3a}
.chip[aria-pressed="true"]{background:var(--merah);color:#fff;border-color:var(--merah)}
.tab{cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;padding:8px 14px;border-radius:999px;background:transparent;color:#b9b9b9;border:1px solid #3a3a3a}
.tab[aria-pressed="true"]{background:var(--merah);color:#fff;border-color:var(--merah)}
.pill{cursor:pointer;font:inherit;font-size:14px;white-space:nowrap;padding:7px 14px;background:var(--kartu);border:1px solid #e2e2e2;border-radius:999px;color:var(--teks)}
.pill:hover{background:var(--tint);border-color:var(--merah)}

/* generator */
.gen{background:var(--gelap);border-bottom:3px solid var(--merah)}
.gen .wrap{padding-top:36px;padding-bottom:46px}
.gen h1{margin:8px 0 0;color:#fff;font-size:clamp(23px,4.2vw,34px);line-height:1.2;letter-spacing:-.015em;max-width:740px;text-wrap:balance}
.gen .lead{margin:10px 0 0;color:#b9b9b9;font-size:15px;line-height:1.65;max-width:660px;text-wrap:pretty}
.gen-label{margin:26px 0 8px;font-size:11px;font-weight:700;letter-spacing:.12em;color:#8f8f8f}
.gen-input-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.gen-input{flex:1 1 260px;min-width:0;font:inherit;font-size:18px;padding:12px 16px;background:var(--gelap-input);border:1px solid #3a3a3a;border-radius:6px;color:var(--krem)}
.btn-red{cursor:pointer;font:inherit;font-size:14px;font-weight:700;white-space:nowrap;padding:12px 18px;background:var(--merah);color:#fff;border:1px solid var(--merah);border-radius:6px}
.btn-red:hover{background:var(--merah-tua);border-color:var(--merah-tua);color:#fff}
.gen-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:9px 0 0;font-size:13px;color:#8f8f8f}
.tabs-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:20px;border-top:1px solid var(--gelap-garis)}
.warn-badge{background:var(--kuning);color:var(--kuning-teks);font-weight:700;font-size:11px;padding:2px 7px;border-radius:4px}

.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:10px;margin-top:16px}
.result-card{cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:10px;justify-content:space-between;min-height:92px;padding:14px 16px;background:var(--gelap2);border:1px solid var(--gelap-garis);border-radius:6px;color:var(--krem);font:inherit}
.result-card:hover{border-color:var(--merah);background:#202020}
.result-name{font-size:17px;line-height:1.35;overflow-wrap:anywhere}
.result-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}
.result-style{font-size:11px;color:#a3a3a3;letter-spacing:.02em}
.result-count{font-size:11px;color:#8f8f8f;font-variant-numeric:tabular-nums;white-space:nowrap}
.result-over{font-size:11px;font-weight:700;background:var(--kuning);color:var(--kuning-teks);padding:2px 7px;border-radius:4px;white-space:nowrap}
.gen-note{margin:14px 0 0;font-size:13px;color:#8f8f8f}
.gen-empty{margin:26px 0 0;padding:26px;border:1px dashed #3a3a3a;border-radius:6px;color:#9a9a9a;font-size:15px;text-align:center}

/* collections */
.cat-block{margin-top:28px}
.cat-block h3{margin:0 0 12px;font-size:16px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px}

/* most searched */
.top-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:10px;margin-top:18px}
.top-item{cursor:pointer;font:inherit;display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--kartu);border:1px solid var(--garis);border-radius:6px;color:var(--teks)}
.top-item:hover{background:var(--tint);border-color:var(--merah)}
.rank{font-size:18px;font-weight:800;min-width:34px;text-align:left;color:#b3b3b3;font-variant-numeric:tabular-nums}
.rank.hot{color:var(--merah-tua)}
.top-name{flex:1;text-align:left;font-size:15px;overflow-wrap:anywhere}
.top-count{font-size:12px;color:#767676;white-space:nowrap}

/* stats */
.stats-band{margin-top:56px;background:var(--kartu);border-top:1px solid var(--garis);border-bottom:1px solid var(--garis)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;padding:30px 0}
.stat-num{margin:0;font-size:clamp(26px,3.6vw,34px);font-weight:800;color:var(--merah-tua);letter-spacing:-.02em}
.stat-label{margin:2px 0 0;font-size:13px;color:var(--abu)}

/* rating */
.rate-wrap{padding:44px 0 0}
.rate-card{max-width:560px;margin:0 auto;text-align:center;background:var(--kartu);border:1px solid var(--garis);border-radius:6px;padding:26px 22px}
.rate-card h2{margin:0;font-size:20px}
.rate-card p{margin:6px 0 0;font-size:13.5px;color:var(--abu)}
.rate-btns{display:flex;justify-content:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn-vote{cursor:pointer;font:inherit;font-size:14.5px;font-weight:700;padding:10px 18px;border-radius:6px;background:var(--kartu);border:1px solid #d9d9d9;color:var(--teks)}
.btn-vote:hover{background:var(--tint)}
.btn-vote.active{background:var(--tint);border-color:var(--merah)}
.btn-vote[disabled]{cursor:default}
.rate-thanks{margin:12px 0 0;font-size:13px;color:var(--merah-tua);font-weight:600}
.rate-total{margin:12px 0 0;font-size:12px;color:var(--abu2)}

/* prose (editor content) */
.prose{max-width:760px}
.prose p{margin:12px 0 0;font-size:15.5px;line-height:1.75;color:var(--teks2);text-wrap:pretty}
.prose h2,.prose .h2-bar{margin:44px 0 0;font-size:clamp(20px,3vw,25px);line-height:1.25;border-left:4px solid var(--merah);padding-left:12px}
.prose>h2:first-child,.prose>.h2-bar:first-child{margin-top:0}
.prose h3{margin:20px 0 0;font-size:16.5px}
.prose h4{margin:18px 0 0;font-size:15.5px}
.prose ol,.prose ul{margin:12px 0 0;padding-left:22px;font-size:15.5px;line-height:1.85;color:var(--teks2)}
.prose li{margin-top:4px}
.prose blockquote{margin:18px 0 0;padding:2px 0 2px 16px;border-left:3px solid var(--merah);color:var(--abu)}
.prose figure{margin:18px 0 0}
.prose figcaption{margin-top:6px;font-size:12.5px;color:var(--abu2)}
.prose img{border-radius:6px}
.prose code{background:#f1f1f1;padding:1px 5px;border-radius:3px;font-size:.92em}
.prose pre{margin:16px 0 0;padding:14px 16px;background:var(--gelap2);color:var(--krem);border-radius:6px;overflow-x:auto;font-size:13.5px}
.prose pre code{background:none;padding:0}
.note{margin:16px 0 0;font-size:14.5px;line-height:1.7;background:var(--kuning);color:#4d3f05;padding:12px 16px;border-radius:4px}
.tbl-scroll{overflow-x:auto;margin-top:16px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:14.5px;background:var(--kartu);border:1px solid var(--garis)}
th{text-align:left;padding:11px 14px;font-weight:700}
thead th{border-bottom:2px solid var(--merah);background:#f7f7f7;font-size:13px}
td{padding:11px 14px;border-bottom:1px solid var(--garis2)}
tbody th{border-bottom:1px solid var(--garis2)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
td.muted{color:var(--abu)}
.tbl-caption{margin:10px 0 0;font-size:13px;color:#767676;max-width:760px}

/* article cards (grid) */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:20px}
.card{display:block;background:var(--kartu);border:1px solid var(--garis);border-radius:8px;overflow:hidden;color:var(--teks)}
.card:hover{border-color:var(--merah);text-decoration:none}
.card-thumb{margin:0;background:var(--gelap);color:var(--krem);padding:24px 14px;text-align:center;font-size:18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.card-thumb.light{background:#f4f4f4;color:var(--teks);border-bottom:1px solid var(--garis2);font-size:19px;padding:28px 16px}
.card-thumb.img{padding:0;white-space:normal}
.card-thumb.img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.card-body{padding:13px 16px 15px}
.card-cat{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--merah-tua)}
.card-body h3{margin:5px 0 0;font-size:15px;line-height:1.4}
.card-body .excerpt{margin:6px 0 0;font-size:13px;color:#666;line-height:1.55}
.card-meta{margin:10px 0 0;font-size:12px;color:var(--abu2)}
.card-meta b{color:var(--merah-tua);font-weight:700}

/* archive: modern list */
.filter-row{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:22px;border-bottom:1px solid var(--garis)}
.filter-chip{cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;white-space:nowrap;padding:8px 15px;border-radius:999px;background:var(--kartu);color:#3a3a3a;border:1px solid #d9d9d9}
.filter-chip:hover{border-color:var(--merah);color:var(--merah-tua);text-decoration:none}
.filter-chip[aria-current="page"],.filter-chip[aria-pressed="true"]{background:var(--merah);color:#fff;border-color:var(--merah)}
.filter-chip[aria-current="page"]:hover{color:#fff}
.feature-card{display:flex;flex-wrap:wrap;margin-top:24px;background:var(--kartu);border:1px solid var(--garis);border-radius:8px;overflow:hidden;color:var(--teks)}
.feature-card:hover{border-color:var(--merah);text-decoration:none}
.feature-thumb{flex:1 1 320px;min-height:190px;display:flex;align-items:center;justify-content:center;background:var(--gelap);color:var(--krem);font-size:clamp(22px,3.4vw,30px);padding:26px 20px;text-align:center;overflow:hidden}
.feature-thumb.img{padding:0}
.feature-thumb.img img{width:100%;height:100%;min-height:190px;object-fit:cover}
.feature-body{flex:1 1 320px;padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
.badge{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--merah-tua);background:var(--tint);padding:3px 9px;border-radius:4px}
.feature-body h2{margin:12px 0 0;font-size:clamp(19px,2.6vw,24px);line-height:1.3}
.feature-body .excerpt{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:#4a4a4a;text-wrap:pretty}
.feature-meta{margin:14px 0 0;font-size:12.5px;color:var(--abu2)}
.feature-meta b{color:var(--merah-tua);font-weight:700}
.post-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.post-item{display:flex;flex-wrap:wrap;align-items:stretch;background:var(--kartu);border:1px solid var(--garis);border-radius:8px;overflow:hidden;color:var(--teks)}
.post-item:hover{border-color:var(--merah);background:var(--tint);text-decoration:none}
.post-thumb{flex:0 1 210px;min-width:150px;min-height:96px;display:flex;align-items:center;justify-content:center;background:var(--gelap);color:var(--krem);font-size:19px;padding:16px 14px;text-align:center;overflow:hidden}
.post-thumb.img{padding:0}
.post-thumb.img img{width:100%;height:100%;min-height:96px;object-fit:cover}
.post-body{flex:1 1 300px;padding:15px 18px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.post-body .card-cat{align-self:flex-start}
.post-body h3{margin:0;font-size:16.5px;line-height:1.35}
.post-body .excerpt{margin:0;font-size:13.5px;line-height:1.55;color:var(--abu);text-wrap:pretty}
.post-body .card-meta{margin:2px 0 0}
.blog-empty{margin:28px 0 0;padding:28px;border:1px dashed #d9d9d9;border-radius:8px;color:var(--abu2);text-align:center;font-size:15px}

/* single article */
.breadcrumb{font-size:12.5px;color:#8f8f8f;margin-bottom:14px}
.breadcrumb a{color:#c98088}
.breadcrumb a:hover{color:var(--krem)}
.art-cat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--merah);padding:3px 9px;border-radius:4px}
.art-cat:hover{color:#fff;text-decoration:none}
.art-hero h1{margin:12px 0 0;color:#fff;font-size:clamp(24px,4.4vw,34px);line-height:1.22;letter-spacing:-.015em;text-wrap:balance}
.art-hero .art-meta{margin:12px 0 0;font-size:13px;color:#9a9a9a}
.art-sample{display:flex;align-items:center;justify-content:center;min-height:160px;background:#f4f4f4;border:1px solid var(--garis2);border-radius:8px;color:var(--teks);font-size:clamp(24px,5vw,34px);padding:26px 18px;text-align:center;overflow:hidden}
.art-sample.img{padding:0;border:0;min-height:0}
.art-sample.img img{width:100%;border-radius:8px}
.art-sample-cap{margin:8px 0 0;font-size:12px;color:var(--abu2);text-align:center}
.prose .lead{font-size:16.5px;line-height:1.75;color:var(--teks2);margin-top:0}
.name-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.name-pill{cursor:pointer;font:inherit;font-size:14.5px;white-space:nowrap;padding:8px 14px;background:var(--kartu);border:1px solid #e2e2e2;border-radius:999px;color:var(--teks)}
.name-pill:hover{background:var(--tint);border-color:var(--merah)}
.cta{margin:36px 0 0;background:var(--gelap);border-radius:8px;padding:24px 22px}
.cta .cta-title{margin:0;color:var(--krem);font-size:17px;font-weight:700;line-height:1.4}
.cta p{margin:6px 0 0;color:#b9b9b9;font-size:14.5px;line-height:1.6}
.cta .btn-red{display:inline-block;margin-top:14px;padding:11px 20px;font-size:14.5px}
.cta .btn-red:hover{color:#fff;text-decoration:none}

/* pagination */
.pagination{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.pagination .page-numbers{display:block;padding:8px 14px;border:1px solid #d9d9d9;border-radius:6px;background:var(--kartu);color:var(--teks);font-size:14px;font-weight:600}
.pagination .page-numbers:hover{border-color:var(--merah);color:var(--merah);text-decoration:none}
.pagination .current{background:var(--merah);border-color:var(--merah);color:#fff}

/* search form */
.searchform{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.searchform input[type=search]{flex:1 1 220px;min-width:0;font:inherit;font-size:15px;padding:10px 14px;background:var(--kartu);border:1px solid #d9d9d9;border-radius:6px;color:var(--teks)}
.searchform .btn-red{padding:10px 18px}

/* footer */
.site-footer{border-top:1px solid var(--garis);background:var(--kartu)}
.site-footer .wrap{padding-top:22px;padding-bottom:26px}
.footer-row{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center;font-size:13px;color:#666}
.footer-nav{display:flex;gap:16px;flex-wrap:wrap}
.footer-nav ul{list-style:none;display:flex;gap:16px;flex-wrap:wrap;margin:0;padding:0}
.footer-nav a{color:#666}
.footer-nav a:hover{color:var(--merah)}
.disclaimer{margin:10px 0 0;font-size:12px;color:#9a9a9a;max-width:760px}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);background:var(--gelap2);color:var(--krem);border-left:3px solid var(--merah);padding:10px 18px;font-size:14px;font-weight:600;z-index:99;box-shadow:0 4px 16px rgba(0,0,0,.25);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* result stagger */
@keyframes ggFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.result-card.anim{animation:ggFade .3s ease both}

/* alignment helpers for editor blocks */
.prose .alignleft{float:left;margin:6px 18px 12px 0}
.prose .alignright{float:right;margin:6px 0 12px 18px}
.prose .aligncenter{margin-left:auto;margin-right:auto}
.prose .alignwide,.prose .alignfull{max-width:100%}

@media (max-width:760px){
  .nav-toggle{display:block}
  .site-header .wrap{flex-wrap:wrap}
  .nav{display:none;width:100%;order:3}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;padding-bottom:8px}
  .nav a{padding:10px 0;border-top:1px solid var(--garis2)}
  .prose .alignleft,.prose .alignright{float:none;margin:12px 0 0}
}
@media (max-width:560px){
  .hero .wrap,.hero .wrap-narrow,.gen .wrap{padding-top:26px;padding-bottom:30px}
  .section{padding:38px 0 8px}
  .stats-band{margin-top:40px}
  .post-thumb{flex:1 1 100%;min-height:110px}
  .feature-body{padding:20px 18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .toast{transform:translateX(-50%)}
}