/* =========================================================
   base.css — Modul 3 (CSS Cascading Style Sheet)
   Menerapkan: selector HTML, selector Class, selector ID,
   pengelompokan selector, dan pemakaian CSS eksternal.
   ========================================================= */

:root{
  --navy:#355C9B;          /* Biru tua */
  --navy-deep:#233B73;     /* Biru tua gelap */
  --cream:#FFF9FC;         /* Putih dengan sedikit nuansa pink */
  --paper:#FFEFF7;         /* Pink muda sangat lembut */
  --green-dark:#F472B6;    /* Pink */
  --green-light:#BFE9FF;   /* Biru muda */
  --amber:#FFD6E8;         /* Pink muda */
  --ink:#4B5563;           /* Abu-abu gelap */
  --muted:#9CA3AF;         /* Abu-abu muda */
  --mono:'JetBrains Mono','Courier New',monospace;
  --sans:'Inter',-apple-system,'Segoe UI',sans-serif;
}

/* ---- Selector HTML (redefinisi tag bawaan) ---- */
*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  font-family:var(--sans);
  background:var(--paper); /* Dominan pink muda */
  color:var(--ink);
  line-height:1.65;
}

h1,h2,h3{
  font-family:var(--mono);
  letter-spacing:-0.01em;
  color:var(--navy);
}

h1{ font-size:clamp(2.4rem,7vw,4.2rem); }

a{ color:inherit; text-decoration:none; }

ul{ list-style:none; }

p{ color:var(--ink); }

em{ color:var(--muted); }

/* ---- Pengelompokan selector (beberapa selector, properti sama) ---- */
.section-kicker,
.section-title,
.lead{
  display:block;
}

/* ---- Selector Class ---- */
.section-kicker{
  font-family:var(--mono);
  font-size:0.78rem;
  text-transform:lowercase;
  color:var(--green-dark);
  margin-bottom:6px;
}

.section-title{
  font-size:clamp(1.5rem,3vw,2.1rem);
  margin-bottom:28px;
}

.lead{
  max-width:46ch;
  color:var(--muted);
  font-size:1.05rem;
  margin:14px 0 26px;
}

.infotext{
  max-width:62ch;
  margin-bottom:14px;
}

.infotext--muted{
  color:var(--muted);
  font-size:0.92rem;
}

.section{
  padding:88px 8vw;
  max-width:1180px;
  margin:0 auto;
}

.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:0.85rem;
  padding:12px 22px;
  border:1.5px solid var(--green-dark);
  border-radius:2px;
  background:var(--green-dark); /* Pink */
  color:var(--cream);
  transition:background .2s ease, color .2s ease;
}

.btn:hover{
  background:var(--cream);
  color:var(--green-dark);
}

/* ---- Selector ID (elemen unik: bingkai browser dekoratif) ---- */
#browser-frame{
  background:var(--navy-deep);
  padding:10px 18px;
  position:sticky;
  top:0;
  z-index:50;
}

.browser-frame__bar{
  display:flex;
  align-items:center;
  gap:8px;
}

.dot{
  width:11px;
  height:11px;
  border-radius:50%;
  display:inline-block;
}

.dot--red{ background:#F472B6; }      /* Pink */
.dot--amber{ background:#FFD6E8; }    /* Pink muda */
.dot--green{ background:#BFE9FF; }    /* Biru muda */

.browser-frame__address{
  margin-left:14px;
  font-family:var(--mono);
  font-size:0.78rem;
  color:#F9FAFB;                      /* Putih */
  background:#4F7ECF;                 /* Biru */
  padding:5px 12px;
  border-radius:4px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.site-footer{
  text-align:center;
  padding:26px 8vw 40px;
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--muted);
}