:root{
  --bg:#ffffff; --card:#ffffff; --text:#111827; --muted:#6b7280;
  --line:#e5e7eb; --brand:#dc2626; --brand2:#ef4444; --shadow:0 10px 30px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
img{max-width:100%;display:block;border-radius:16px}
.container{width:min(1100px,92%);margin:0 auto}
.flex{display:flex} .between{justify-content:space-between} .center{align-items:center}
.site-header{position:sticky;top:0;z-index:3000;background:rgba(255,255,255,.85);backdrop-filter:saturate(1.1) blur(6px);border-bottom:1px solid var(--line)}
.site-header .brand{display:flex;gap:10px;align-items:center;color:var(--text);text-decoration:none}
.logo{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:var(--shadow)}
.nav{position:relative}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.nav a{color:var(--text);text-decoration:none;padding:12px 10px;border-radius:10px;transition:background .2s ease}
.nav a.active,.nav a:hover{background:linear-gradient(135deg,rgba(220,38,38,.10),rgba(239,68,68,.08));}
.nav-toggle{display:none}

.main{min-height:60vh}
.hero{padding:36px 0}
.hero .actions{ margin-top: 14px }
.btn-cta{
  display:inline-block;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff !important;
  text-decoration:none;
  font-weight:800;
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(220,38,38,.25);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn-cta:hover{ box-shadow: 0 14px 30px rgba(220,38,38,.35) }
.btn-cta:active{ transform: translateY(1px) }

.lead{color:var(--muted)}

.breadcrumb{padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:20px}
.breadcrumb ol{display:flex;gap:8px;list-style:none;margin:0;padding:0;color:var(--muted);flex-wrap:wrap}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb span{opacity:.9}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.card .cover{display:block}
.card-body{padding:14px}
.card .title{display:block;color:var(--text);text-decoration:none;font-weight:700;margin:4px 0 6px}
.card .muted{color:var(--muted);font-size:.9rem;margin:0 0 6px}

.article{display:block;padding:16px 0}
.article header{margin-bottom:16px}
.article .article-cover{margin:10px 0;border-radius:18px}
.article .content{line-height:1.75}
.tags{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}
.tag{display:inline-block;padding:6px 10px;border:1px solid var(--line);border-radius:999px;color:var(--text);text-decoration:none}

.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.toolbar input,.toolbar select,.form input,.form textarea{background:#fff;border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:12px;outline:0}
.toolbar button,.form button{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:700;border:0;padding:10px 14px;border-radius:12px;cursor:pointer;box-shadow:0 6px 16px rgba(220,38,38,.25)}
.toolbar button:active,.form button:active{transform:translateY(1px)}

.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;margin:8px 0;padding:10px}
.faq summary{cursor:pointer;font-weight:700}
.answer{color:var(--muted)}

.site-footer{margin-top:40px;padding:30px 0;border-top:1px solid var(--line);background:#fff}
.footer-links{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.copy{color:var(--muted)}

.alert{background:#fff1f2;border:1px solid #fecdd3;color:#b91c1c;padding:10px 12px;border-radius:12px}
.alert.success{background:#ecfeff;border-color:#7dd3fc;color:#0c4a6e}

/* Animations */
@keyframes fadeInUp { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }
.reveal{opacity:0; transform:translateY(12px)}
.reveal.in{opacity:1; transform:none; animation: fadeInUp .6s ease-out both}
body.is-loaded .site-header .brand,
body.is-loaded .site-header .nav{animation: fadeInUp .5s ease-out both}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.in, body.is-loaded .site-header .brand, body.is-loaded .site-header .nav { animation:none !important; opacity:1 !important; transform:none !important }
}

/* Mobile dropdown menu with blur */
@media (max-width:820px){
  body.nav-open{overflow:hidden}
  .nav-toggle{display:block;background:none;border:0;color:var(--text);font-size:24px;margin-left:12px}
  .nav ul{
    position:absolute; right:0; top:calc(100% + 10px);
    width:min(320px, 92vw);
    background:rgba(255,255,255,.85); backdrop-filter: blur(12px) saturate(1.2);
    border:1px solid var(--line); border-radius:16px; padding:10px;
    flex-direction:column; gap:6px; display:none; box-shadow:0 20px 40px rgba(0,0,0,.15); z-index:3100;
  }
  .nav ul li{list-style:none}
  .nav ul a{display:block; padding:12px 14px; border-radius:10px; line-height:1.25}
  body.nav-open .nav ul{display:flex}

  .nav-overlay{display:none; position:fixed; inset:0; background:rgba(10,10,10,.25); backdrop-filter: blur(6px) saturate(1.1); z-index:2000}
  body.nav-open .nav-overlay{display:block}

  .hero{padding:22px 0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
  .card .title{font-size:1rem}
}

/* Hyperlink brand red */
a{ color: var(--brand); text-decoration:none; }
a:hover{ color: var(--brand2); }
.nav a{ color: var(--text); } /* keep header menu neutral */
.article .content a, .prose a{ font-weight:600; }

/* ==== Kontak: card & form rapi (desktop & mobile) ==== */
.form-card{
  background:#fff; border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); padding:18px; margin-top:8px;
  max-width:920px;
}

.form{
  display:grid; grid-template-columns:1fr; gap:14px; max-width:820px;
}

.field{ display:flex; flex-direction:column; gap:6px }
.field label{ font-weight:700; color:var(--text) }

.field input, .field textarea{
  width:100%; background:#fff; color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:12px 14px; outline:0;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ resize:vertical; min-height:160px }

.field input:focus, .field textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px rgba(220,38,38,.08);
}

.field-full{ grid-column:1 / -1 }

.form-actions{ margin-top:2px }
.btn-primary{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff; font-weight:800; border:0; border-radius:12px;
  padding:12px 16px; cursor:pointer; box-shadow:0 8px 22px rgba(220,38,38,.25);
  transform:translateY(0); transition:transform .15s ease, box-shadow .2s ease;
}
.btn-primary:active{ transform:translateY(1px) }

@media (min-width:680px){
  .form{ grid-template-columns:1fr 1fr }
  .field-full, .form-actions{ grid-column:1 / -1 }
}

@media (max-width:480px){
  .btn-primary{ width:100% }  /* tombol penuh di mobile */
}