:root{
  --red:#bd2430;
  --red-dark:#8f1922;
  --ink:#17130f;
  --ink-soft:#4a4438;
  --line:#e6e2d8;
  --paper:#ffffff;
  --alt:#f4f2ec;
  --mustard:#c9982f;
  --teal:#2c6a5e;
  --display:'Anton', sans-serif;
  --serif:'Literata', serif;
  --mono:'Space Mono', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:var(--serif); line-height:1.55;}
a{color:inherit; text-decoration:none;}
img,svg{display:block;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
.topbar{border-bottom:1px solid var(--line); background:#fff;}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; min-height:78px; gap:16px;}
.logo{display:flex; align-items:center; gap:10px;}
.logo-badge{width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:7px; text-align:center; line-height:1.05;}
.logo-word{font-family:var(--display); font-size:24px; letter-spacing:.3px; text-transform:lowercase;}
.logo-word span{color:var(--red);}
.top-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.btn{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.8px; padding:11px 20px; border-radius:3px; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px; cursor:pointer; background:#fff;}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-dark);}
.btn-outline{border-color:var(--ink); color:var(--ink);}
.btn-outline:hover{background:var(--ink); color:#fff;}
.btn-danger{background:#73141b;color:#fff;}
.btn-small{padding:7px 11px; font-size:10.5px;}
.catbar{background:var(--alt); border-bottom:1px solid var(--line); overflow-x:auto;}
.catbar-inner{display:flex; align-items:center; gap:30px; min-height:56px; white-space:nowrap;}
.catbar a{font-family:var(--mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-soft);}
.catbar a:hover{color:var(--red);}
.catbar a.active{color:var(--ink); font-weight:700; display:flex; align-items:center; gap:8px;}
.badge-new{background:var(--red); color:#fff; font-size:9.5px; padding:2px 7px; border-radius:3px; font-family:var(--mono);}
.hint{text-align:center; font-family:var(--mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); padding:16px 0; background:var(--alt);}
.banner{background:linear-gradient(120deg,#1c2b45,#7c1620); min-height:210px; display:flex; align-items:center; color:#fff; padding:34px 0; position:relative; overflow:hidden;}
.banner:before{content:"";position:absolute;inset:-40px;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.12),transparent 25%),radial-gradient(circle at 85% 30%,rgba(201,152,47,.18),transparent 28%);mix-blend-mode:screen;}
.banner-inner{position:relative;display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;}
.banner-eyebrow{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--mustard); margin-bottom:10px;}
.banner h2{font-family:var(--display); font-size:clamp(26px,3.4vw,40px); text-transform:uppercase; line-height:1.05; max-width:600px;}
.banner p{font-size:14.5px; color:rgba(255,255,255,.78); max-width:480px; margin-top:10px;}
.banner .btn-outline{border-color:#fff; color:#fff;background:transparent;}
.banner .btn-outline:hover{background:#fff; color:var(--ink);}
.main{padding:44px 0 20px; display:grid; grid-template-columns:1fr 340px; gap:44px;}
@media(max-width:920px){ .main{grid-template-columns:1fr;} }
.feature-card{display:grid; grid-template-columns:1.05fr .95fr; gap:0; border:1px solid var(--line);}
@media(max-width:640px){ .feature-card{grid-template-columns:1fr;} }
.feature-visual{background:#7c1620; min-height:340px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
.feature-visual img{width:100%;height:100%;object-fit:cover;}
.feature-visual svg{width:150px; height:150px;}
.feature-visual .stamp{position:absolute; top:16px; right:16px; font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:1px; color:#fff; border:1.5px solid #fff; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.15; transform:rotate(-8deg); background:rgba(0,0,0,.18);}
.feature-text{padding:32px 30px;}
.eyebrow-tag{display:inline-block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:1px; color:var(--red); border-bottom:2px solid var(--red); padding-bottom:4px; margin-bottom:16px;}
.feature-text h1{font-family:var(--display); font-size:clamp(26px,3vw,34px); text-transform:uppercase; line-height:1.06; margin-bottom:16px;}
.feature-text p{font-size:15px; color:var(--ink-soft); margin-bottom:10px;}
.feature-meta{margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:flex; gap:18px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#8a8272;}
.sidebar h3{font-family:var(--display); font-size:19px; text-transform:uppercase; letter-spacing:.3px; border-bottom:3px solid var(--ink); padding-bottom:10px; margin-bottom:6px;}
.side-item{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
.side-thumb{width:72px; height:72px; flex:none; border-radius:2px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.side-thumb img{width:100%;height:100%;object-fit:cover;}
.side-thumb svg{width:34px; height:34px;}
.side-info .cat-mini{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--red); margin-bottom:4px;}
.side-info h4{font-family:var(--serif); font-weight:600; font-size:14.5px; line-height:1.35;}
.archive{padding:20px 0 70px;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:28px; padding-bottom:14px; border-bottom:2px solid var(--ink);}
.section-head h2{font-family:var(--display); font-size:clamp(24px,3vw,32px); text-transform:uppercase;}
.section-head a{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:var(--red); border-bottom:1px solid var(--red); padding-bottom:2px;}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px 24px;}
@media(max-width:880px){ .grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .grid{grid-template-columns:1fr;} }
.card{border:1px solid var(--line); transition:box-shadow .2s ease, transform .2s ease; background:#fff;}
.card:hover{box-shadow:0 10px 24px rgba(23,19,15,.1); transform:translateY(-3px);}
.card-art{height:150px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.card-art img{width:100%; height:100%; object-fit:cover;}
.card-art svg{width:56px; height:56px;}
.card-body{padding:18px 18px 20px;}
.card-body .cat{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--red); margin-bottom:8px;}
.card-body h3{font-family:var(--serif); font-weight:700; font-size:17px; line-height:1.3; margin-bottom:8px;}
.card-body p{font-size:13.5px; color:var(--ink-soft); margin-bottom:14px;}
.card-meta{display:flex; justify-content:space-between; gap:10px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:#8a8272; border-top:1px solid var(--line); padding-top:10px;}
.card-meta .read{color:var(--teal); font-weight:700;}
.art-feminisme{background:#7c1620;}
.art-astronot{background:#1c2b45;}
.art-digital{background:#1c453d;}
.art-pancasila{background:#7c1620;}
.art-filsuf{background:#c9982f;}
.art-sampah{background:#1c453d;}
.rubrik{background:var(--alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:44px 0;}
.rubrik h2{font-family:var(--display); font-size:22px; text-transform:uppercase; margin-bottom:20px;}
.tag-cloud{display:flex; flex-wrap:wrap; gap:12px;}
.tag-pill{font-family:var(--mono); font-size:12px; text-transform:uppercase; letter-spacing:.4px; padding:9px 18px; border:1px solid var(--ink); border-radius:30px;}
.tag-pill:hover{background:var(--ink); color:#fff;}
footer{padding:50px 0 30px;}
.foot-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; margin-bottom:34px;}
.foot-manifesto{font-family:var(--display); font-size:26px; text-transform:uppercase; max-width:400px; line-height:1.1;}
.foot-manifesto span{color:var(--red);}
.foot-links{display:flex; gap:40px;}
.foot-col h5{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:1px; color:#8a8272; margin-bottom:10px;}
.foot-col a{display:block; font-size:14px; color:var(--ink-soft); margin-bottom:8px;}
.foot-col a:hover{color:var(--red);}
.foot-bottom{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; border-top:1px solid var(--line); padding-top:20px; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:#8a8272;}
.article-wrap{max-width:860px;margin:0 auto;padding:46px 32px 70px;}
.article-head{border-bottom:2px solid var(--ink);padding-bottom:20px;margin-bottom:24px;}
.article-head h1{font-family:var(--display);font-size:clamp(32px,5vw,56px);line-height:.98;text-transform:uppercase;margin:12px 0;}
.article-meta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:#8a8272;}
.article-content{font-size:18px;line-height:1.8;color:#231c15;}
.article-content p{margin:0 0 20px;}
.article-cover{margin:0 0 24px;border:1px solid var(--line);max-height:460px;overflow:hidden;}
.article-cover img{width:100%;height:auto;}
/* Admin */
.admin-body{background:#17130f;color:#f7f1e7;font-family:var(--serif);min-height:100vh;}
.admin-shell{max-width:1180px;margin:0 auto;padding:26px;}
.admin-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:18px;margin-bottom:24px;}
.admin-brand{font-family:var(--display);font-size:28px;text-transform:uppercase;}
.admin-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.admin-links a,.admin-links button{font-family:var(--mono);font-size:11px;text-transform:uppercase;border:1px solid rgba(255,255,255,.28);background:transparent;color:#f7f1e7;padding:9px 12px;border-radius:3px;cursor:pointer;}
.admin-card{background:#fff;color:#17130f;border-radius:10px;padding:24px;margin-bottom:18px;box-shadow:0 18px 38px rgba(0,0,0,.24);}
.admin-card h1,.admin-card h2{font-family:var(--display);text-transform:uppercase;line-height:1;margin-bottom:16px;}
.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:720px){.admin-grid{grid-template-columns:1fr;}.admin-shell{padding:16px;}}
.stat{background:#f4f2ec;border:1px solid #e6e2d8;padding:18px;border-radius:8px;}
.stat b{display:block;font-family:var(--display);font-size:32px;color:#bd2430;line-height:1;}
.table{width:100%;border-collapse:collapse;font-size:14px;}
.table th,.table td{padding:12px 10px;border-bottom:1px solid #e6e2d8;text-align:left;vertical-align:top;}
.table th{font-family:var(--mono);font-size:11px;text-transform:uppercase;color:#7f7567;}
.status{font-family:var(--mono);font-size:10px;text-transform:uppercase;padding:4px 7px;border-radius:99px;background:#eee;display:inline-block;}
.status-published{background:#d9f0e9;color:#135642;}
.status-draft{background:#f2e1a8;color:#674b0c;}
.form-row{margin-bottom:16px;}
.form-row label{display:block;font-family:var(--mono);font-size:11px;text-transform:uppercase;color:#6e6557;margin-bottom:7px;}
.input, .textarea, .select{width:100%;border:1px solid #d8d0c3;border-radius:6px;padding:12px 13px;font:inherit;background:#fff;color:#17130f;}
.textarea{min-height:260px;resize:vertical;}
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(120deg,#17130f,#7c1620);padding:24px;}
.login-box{width:100%;max-width:420px;background:#fff;color:#17130f;border-radius:12px;padding:30px;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.login-box h1{font-family:var(--display);font-size:34px;text-transform:uppercase;line-height:1;margin-bottom:10px;}
.alert{background:#ffe1e5;color:#78141d;border:1px solid #f0a3ad;padding:10px 12px;border-radius:6px;margin:12px 0;font-size:14px;}
.help{color:#7d7468;font-size:13px;margin-top:8px;}