/* ==========================================================================
   ampmbet — Style Sheet Utama
   ========================================================================== */

:root{
  color-scheme:light;
  --ink:#172230;
  --muted:#536273;
  --brand:#075e54;
  --brand-dark:#054840;
  --soft:#eef6f4;
  --line:#d8e2e6;
  --warning:#fff6df;
  --ok:#0d7a4a;
  --bg:#ffffff;
  --bg-alt:#f8fafb;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  font:16px/1.7 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:#075e83;text-decoration:none}
a:hover{text-decoration:underline}

/* ==========================================================================
   HEADER
   ========================================================================== */

header.site-header{
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--line);
  z-index:50;
  padding:.75rem max(1rem,calc((100% - 1100px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:800;
  color:var(--brand);
  text-decoration:none;
  font-size:1rem;
}
.brand:hover{text-decoration:none}
.brand img{height:36px;width:auto}

.header-cta{display:flex;gap:.5rem;align-items:center}

/* ==========================================================================
   NAVIGASI UTAMA + MEGA MENU
   ========================================================================== */

nav.main-nav{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:.35rem max(1rem,calc((100% - 1100px)/2));
  font-size:.95rem;
}

.nav-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  align-items:center;
}

.nav-menu li{position:relative}

.nav-menu > li > a{
  color:var(--ink);
  text-decoration:none;
  font-weight:600;
  padding:.5rem 0;
  display:inline-block;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}

.nav-menu > li > a:hover,
.nav-menu > li > a[aria-current="page"]{
  color:var(--brand);
  border-bottom-color:var(--brand);
  text-decoration:none;
}

.dropdown{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:.5rem;
  padding:.5rem;
  min-width:240px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  list-style:none;
  z-index:60;
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown{display:block}

.dropdown li{margin:0}
.dropdown a{
  padding:.5rem .7rem;
  display:block;
  border-radius:.35rem;
  font-weight:500;
  color:var(--ink);
}
.dropdown a:hover{background:var(--soft);text-decoration:none}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.breadcrumb{
  max-width:1100px;
  margin:0 auto;
  padding:.75rem 1.25rem 0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  font-size:.875rem;
  color:var(--muted);
}
.breadcrumb li::after{content:"›";margin-left:.4rem;color:var(--muted)}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:600}

/* ==========================================================================
   LAYOUT
   ========================================================================== */

.wrap{max-width:1100px;margin:auto;padding:1.25rem}

main{padding-bottom:2rem}

article h2{
  margin-top:2.5rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  font-size:1.6rem;
}
article h2:first-of-type{border-top:none;margin-top:1.5rem}

article h3{
  margin-top:1.75rem;
  font-size:1.2rem;
  color:var(--brand-dark);
}

article p{margin:1rem 0}

article ul, article ol{padding-left:1.4rem}
article li{margin:.4rem 0}

article code{
  background:var(--soft);
  padding:.15rem .4rem;
  border-radius:.25rem;
  font-size:.9em;
  word-break:break-all;
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{
  background:var(--soft);
  padding:1.2rem;
  border-radius:1rem;
  margin-top:.5rem;
}

.hero img{
  width:100%;
  max-height:430px;
  object-fit:cover;
  border-radius:.75rem;
  margin-bottom:1rem;
}

.hero h1{
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.25;
  margin:.75rem 0;
}

/* ==========================================================================
   BUTTON
   ========================================================================== */

.btn{
  display:inline-block;
  padding:.7rem 1.1rem;
  border-radius:.55rem;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  font-weight:700;
  margin:.25rem .25rem .25rem 0;
  border:none;
  cursor:pointer;
  font-size:.95rem;
  transition:background .15s;
}
.btn:hover{background:var(--brand-dark);text-decoration:none;color:#fff}

.btn.alt{background:#29384a}
.btn.alt:hover{background:#1d2937}

/* ==========================================================================
   KOMPONEN KONTEN
   ========================================================================== */

.note{
  padding:1rem 1.25rem;
  background:var(--warning);
  border-left:4px solid #b98012;
  margin:1.25rem 0;
  border-radius:.4rem;
}

.card{
  border:1px solid var(--line);
  padding:1.25rem;
  border-radius:.7rem;
  margin:1.25rem 0;
  background:#fff;
}

.badge{
  display:inline-block;
  background:#e7f6ee;
  color:var(--ok);
  border:1px solid #b6e2c9;
  border-radius:1rem;
  padding:.15rem .6rem;
  font-size:.8rem;
  font-weight:700;
  vertical-align:middle;
}

.score{font-weight:700;color:var(--ok)}
.muted{color:var(--muted);font-size:.925rem}

/* ==========================================================================
   TABEL
   ========================================================================== */

table{
  border-collapse:collapse;
  width:100%;
  display:block;
  overflow-x:auto;
  margin:1.25rem 0;
  font-size:.95rem;
}
th,td{
  border:1px solid var(--line);
  padding:.7rem .85rem;
  text-align:left;
  vertical-align:top;
}
th{background:var(--soft);font-weight:700}

/* ==========================================================================
   READ-NEXT (BACA JUGA)
   ========================================================================== */

.read-next{
  background:var(--bg-alt);
  border-left:4px solid var(--brand);
  padding:1rem 1.25rem;
  border-radius:.5rem;
  margin:1.75rem 0;
}
.read-next h3{
  margin:0 0 .5rem;
  font-size:1rem;
  color:var(--brand);
  border:none;
  padding:0;
}
.read-next ul{margin:0;padding-left:1.2rem}
.read-next li{margin:.35rem 0}
.read-next a{font-weight:600}

/* ==========================================================================
   CTA BANNER
   ========================================================================== */

.cta-banner{
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));
  color:#fff;
  padding:1.5rem;
  border-radius:1rem;
  margin:2rem 0;
  text-align:center;
}
.cta-banner h3{margin:0 0 .5rem;color:#fff;border:none;padding:0;font-size:1.2rem}
.cta-banner p{margin:.5rem 0 1rem;opacity:.9}
.cta-banner .btn{background:#fff;color:var(--brand)}
.cta-banner .btn:hover{background:#f0f0f0}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer.site-footer{
  background:#f4f7f8;
  padding:2rem 1rem;
  margin-top:2rem;
  border-top:1px solid var(--line);
}

.footer-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.5rem;
}

.footer-grid h4{
  margin:0 0 .5rem;
  font-size:.95rem;
  color:var(--brand);
  font-weight:800;
}
.footer-grid p{font-size:.9rem;color:var(--muted);margin:.35rem 0}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin:.3rem 0}
.footer-grid a{
  color:var(--muted);
  text-decoration:none;
  font-size:.9rem;
}
.footer-grid a:hover{color:var(--brand);text-decoration:underline}

.footer-bottom{
  max-width:1100px;
  margin:1.5rem auto 0;
  border-top:1px solid var(--line);
  padding-top:1rem;
  font-size:.85rem;
  color:var(--muted);
  text-align:center;
}
.footer-bottom a{color:var(--brand);font-weight:600}

/* ==========================================================================
   MOBILE CTA (FLOATING)
   ========================================================================== */

.mobile-cta{
  position:fixed;
  right:.75rem;
  bottom:.75rem;
  z-index:100;
  background:var(--brand);
  color:#fff;
  padding:.7rem 1rem;
  border-radius:2rem;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 3px 14px rgba(0,0,0,.2);
  font-size:.9rem;
}
.mobile-cta:hover{background:var(--brand-dark);text-decoration:none;color:#fff}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:850px){
  .mobile-cta{display:inline-block}
  .nav-menu{flex-direction:column;gap:.25rem;align-items:flex-start}
  .dropdown{
    position:static;
    box-shadow:none;
    border:none;
    padding-left:1rem;
    background:transparent;
    min-width:0;
  }
  .has-dropdown:hover .dropdown{display:block}
  header.site-header{padding:.6rem 1rem}
  .brand img{height:30px}
  .brand span{display:none}
  .header-cta .btn{padding:.5rem .8rem;font-size:.85rem}
  .wrap{padding:1rem}
  .hero{padding:1rem}
}

@media(min-width:851px){
  .mobile-cta{display:none}
}