:root{
  --brand:#fb923c;      /* Orange 400 */
  --brand-600:#f97316;  /* Orange 500 */
  --brand-700:#ea580c;  /* Orange 600 */
  --accent:#ef4444;     /* Red 500 */
  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#cbd5e1;
  --bg:#0a0f1e;
  --card:#0f172a;
  --ring:rgba(249,115,22,.28);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#e5e7eb; background:
    radial-gradient(1200px 600px at 10% -10%, rgba(249,115,22,.22), transparent 60%),
    radial-gradient(1000px 700px at 110% 10%, rgba(239,68,68,.18), transparent 55%),
    linear-gradient(180deg, #0a0f1e 0%, #0b1220 60%);
}

/* Layout dasar */
.container{width:min(1120px, 100% - 2rem); margin-inline:auto}
a{text-decoration:none; color:inherit}

/* Topbar */
.topbar{position:sticky; top:0; z-index:40; backdrop-filter:saturate(120%) blur(8px); background:rgba(11,18,32,.7); border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:.75rem}
.brand-logo{width:36px;height:36px;border-radius:10px;background:conic-gradient(from 45deg, var(--brand-600), var(--accent)); box-shadow:0 8px 24px rgba(249,115,22,.45)}
.brand-title{font-weight:800}
.brand-sub{color:#9ccff0}
.nav-actions{display:flex; gap:.5rem; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:#0f172a; color:#e6f6ff}
.btn:hover{border-color:var(--ring); box-shadow:0 0 0 6px var(--ring)}
.btn.primary{background:linear-gradient(180deg, var(--brand-600), var(--brand-700)); border:0}
.btn.ghost{background:transparent}

/* Hero */
.hero{padding:58px 0 22px}
.hero h1{margin:0 0 6px; font-size:clamp(28px, 4.6vw, 42px); color:#fff}
.lead{color:#cbd5e1; margin:0}
.hero-cta{display:flex; gap:.6rem; margin-top:12px; flex-wrap:wrap}

/* Konten */
.contact-section{padding:26px 0 60px}
.contact-grid{display:grid; gap:1rem; grid-template-columns:1.3fr .7fr}
.card{background:#0f172a; border:1px solid rgba(255,255,255,.06); border-radius:18px; padding:18px}
.section-title{margin:.1rem 0 .3rem; font-size:22px; color:#fff}
.muted{color:#cbd5e1}

/* Form */
.form{display:grid; gap:14px; margin-top:12px}
.grid-2{display:grid; gap:14px; grid-template-columns:1fr 1fr}
.field label{display:block; margin:0 0 6px; font-weight:600}
input, select, textarea{
  width:100%; background:#0b2135; border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 14px; color:#e2e8f0; font:inherit
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--ring)}
textarea{min-height:110px; resize:vertical}
.error{display:block; color:#ffb4b4; font-size:12px; min-height:14px; margin-top:4px}
.agree{margin-top:2px}
.check{display:flex; align-items:flex-start; gap:.5rem; color:#cbd5e1}
.check input{margin-top:3px}
.actions{display:flex; gap:.6rem; flex-wrap:wrap}

/* Side info */
.side h3{margin:.1rem 0 .6rem}
.info-list{list-style:none; margin:0; padding:0; display:grid; gap:.35rem; color:#dbeafe}
.info-list a{color:#cfefff; text-decoration:underline}
.ph-media{margin-top:12px; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.ph-img{aspect-ratio:16/9; display:grid; place-items:center; background:#0d1a2b; color:#8fbfe8; font-weight:600}
.quick-cta{display:flex; gap:.6rem; margin-top:12px; flex-wrap:wrap}

/* Toast */
.toast{
  position:fixed; left:50%; transform:translateX(-50%); bottom:22px;
  background:linear-gradient(145deg, var(--brand-600), var(--accent));
  color:#fff; padding:.6rem .9rem; border-radius:12px; opacity:0; pointer-events:none;
  box-shadow:0 10px 26px rgba(0,0,0,.35); transition:opacity .2s ease
}
.toast.show{opacity:1}

/* Footer mini */
.mini-footer{border-top:1px solid rgba(255,255,255,.06); padding:16px 0; color:#94a3b8; text-align:center}

/* Responsif */
@media (max-width: 960px){
  .contact-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .nav-actions{justify-content:flex-end}
}
@media (max-width: 640px){
  .btn{padding:.65rem .9rem}
}