/* ====== Tema JDİH — Sekilas Sejarah ====== */
:root{
  --w:1100px;
  --bg1:#0f1723;     /* latar gradient 1 */
  --bg2:#111b2b;     /* latar gradient 2 */
  --card:#141e2e;    /* kartu */
  --ink:#eef3fb;     /* teks utama */
  --muted:#a9b5c6;   /* teks sekunder */
  --line:#23314c;    /* garis */
  --acc:#5aa7ff;     /* aksen biru */
  --acc2:#8fd0ff;    /* aksen gradasi */
  --ok:#30d17e;      /* hijau check */
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  background:linear-gradient(180deg,var(--bg1),var(--bg2) 55%,var(--bg1));
  color:var(--ink);
  font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

/* Layout */
.wrap{max-width:var(--w);margin:auto;padding:22px}

/* Header */
.nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700}
.logo{
  width:34px;height:34px;border-radius:10px;
  background: url("/site/sekilas-sejarah/jdih.png") center/contain no-repeat,
              linear-gradient(135deg,#5aa7ff,#8fd0ff); /* fallback */
  box-shadow:0 10px 30px #00000055;
}
.menu a{margin-left:16px;color:#cfe1ff;text-decoration:none}
.menu a:hover{opacity:.9;text-decoration:underline}

/* Breadcrumbs */
.breadcrumbs{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  background:#0f1522; border:1px solid var(--line);
  padding:8px 12px; border-radius:999px; color:var(--muted);
}
.breadcrumbs a{color:#cfe1ff;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs .sep{opacity:.6}

/* Hero */
.hero{
  margin-top:18px; display:grid; gap:22px; grid-template-columns:1.1fr .9fr;
  background:linear-gradient(140deg,#152234,#0e1a2a);
  border:1px solid var(--line); border-radius:16px; padding:22px;
}
.tag{display:inline-block;padding:6px 10px;border-radius:999px;background:#ffffff12;color:#fff;font-size:12px;letter-spacing:.5px}
.hero h1{margin:.3em 0 .2em; font-size:32px; line-height:1.2}
.lead{color:var(--muted);max-width:58ch}
.hero__media img{width:100%;border-radius:12px;border:1px solid var(--line);box-shadow:0 18px 40px #00000055}
.cta{display:flex;gap:12px;margin-top:12px}
.btn{padding:10px 16px;border-radius:12px;font-weight:700;color:#0c1523;background:linear-gradient(135deg,var(--acc),var(--acc2));text-decoration:none}
.btn-outline{padding:10px 16px;border-radius:12px;font-weight:600;color:#eaf1fb;border:1px solid #ffffff30;text-decoration:none}

/* Content */
.content{margin-top:26px}
.card{
  background:linear-gradient(160deg,#131d2d,#111a2a);
  border:1px solid var(--line);
  border-radius:14px; padding:18px; margin:14px 0;
}
.card h2,.card h3{margin:.2em 0 .4em}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:12px 0}
.grid .card{margin:0}
.ticks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:28px;color:#dbe7ff}
.ticks li::before{
  content:""; position:absolute; left:0; top:.45em; width:18px; height:18px;
  border-radius:50%; background:conic-gradient(from 180deg, var(--ok), #58f2ac);
  mask: radial-gradient(circle 7px at center, transparent 6px, #000 7px);
  -webkit-mask: radial-gradient(circle 7px at center, transparent 6px, #000 7px);
}

/* Notice */
.notice{
  background:linear-gradient(135deg,#0f2030,#0d1a28);
  border:1px dashed #2a3b5a; border-radius:12px; padding:16px; margin:16px 0;
}
.notice h3{margin:.2em 0 .3em}

/* Footer */
.foot{border-top:1px solid var(--line);color:var(--muted);margin-top:28px}
.foot a{color:#cfe1ff}

/* Links accent underline */
a{
  background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0)), linear-gradient(to right, var(--acc), var(--acc2));
  background-size:0 2px, 100% 2px; background-position:0 100%, 0 100%;
  background-repeat:no-repeat; transition:background-size .25s ease;
}
a:hover{background-size:100% 2px, 100% 2px}

/* Responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .menu{display:none}
  .hero h1{font-size:26px}
}