/* Landing page Al-Wildan 4. Warna diambil dari logo: biru, hijau, jingga. */
@font-face { font-family: "Jakarta"; src: url("font/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("font/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("font/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --biru: #1b2a8f;
  --biru-tua: #141f6b;
  --biru-garis: #3446c2;
  --biru-muda: #eaeefe;
  --hijau: #157a39;
  --jingga: #e85d1a;
  --jingga-muda: #fff1e8;
  --tinta: #151a33;
  --abu: #59607a;
  --garis: #e3e6f0;
  --putih: #ffffff;
  --bintang: polygon(50% 0%, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%, 100% 50%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50% 100%, 35.4% 85.4%, 14.6% 85.4%, 14.6% 64.6%, 0% 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--putih);
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--jingga); outline-offset: 3px; border-radius: 6px; }

.tata {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "id" "main" "kontak";
  min-height: 100vh;
}

/* ---------------------------------------------------------------- identitas */
.identitas {
  grid-area: id;
  position: relative;
  overflow: hidden;
  background: var(--biru);
  color: var(--putih);
  padding: 32px 20px 36px;
}
.motif {
  position: absolute;
  width: 340px;
  height: 340px;
  right: -120px;
  top: -90px;
  fill: none;
  stroke: var(--biru-garis);
  stroke-width: 1.6;
  pointer-events: none;
}
.logo {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  padding: 6px;
  background: var(--putih);
  border-radius: 50%;
}
.identitas h1 {
  position: relative;
  margin: 20px 0 0;
  font-size: clamp(1.9rem, 6.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 13ch;
}
.tagline {
  position: relative;
  margin: 14px 0 0;
  max-width: 34ch;
  color: #d6dcff;
  font-size: 1.02rem;
}

/* ---------------------------------------------------------------- layanan */
.layanan {
  grid-area: main;
  padding: 24px 20px 40px;
  max-width: 720px;
  width: 100%;
}
.sapaan { margin: 4px 0 18px; color: var(--abu); }
.galat { margin: 4px 0 18px; padding: 12px 14px; border-left: 4px solid var(--jingga); background: var(--jingga-muda); }

.pengumuman {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--jingga-muda);
  border-radius: 10px;
  font-weight: 600;
}
.pengumuman a {
  display: inline-block;
  color: #b0430c;
  text-underline-offset: 3px;
}

.bintang {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  clip-path: var(--bintang);
  background: var(--biru-muda);
  color: var(--biru);
}
.bintang svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.teks { display: flex; flex-direction: column; min-width: 0; }
.judul { font-weight: 600; }
.ket { color: var(--abu); font-size: 0.94rem; }
.host { color: var(--hijau); font-size: 0.82rem; margin-top: 2px; overflow-wrap: anywhere; }

.utama {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0 0 28px;
  padding: 20px;
  border: 2px solid var(--biru);
  border-radius: 14px;
  text-decoration: none;
}
.utama .bintang { width: 56px; height: 56px; background: var(--jingga); color: var(--putih); }
.utama .bintang svg { width: 26px; height: 26px; stroke-width: 2; }
.utama .judul { font-size: 1.3rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.utama .ket { font-size: 1rem; margin-top: 4px; }
.utama:hover { background: #f6f7ff; }

.kelompok { margin-top: 8px; }
.kelompok + .kelompok { margin-top: 28px; }
.kelompok h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--biru);
}
.kelompok ul { list-style: none; margin: 0; padding: 0; }
.kelompok li + li { border-top: 1px solid var(--garis); }
.baris {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 8px;
  margin: 0 -8px;
  border-radius: 10px;
  text-decoration: none;
}
.baris:hover { background: #f6f7ff; }
.baris:hover .judul, .utama:hover .judul { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- kontak */
.kontak {
  grid-area: kontak;
  background: var(--biru-tua);
  color: #d6dcff;
  padding: 28px 20px 32px;
  font-size: 0.95rem;
}
.kontak h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 800; color: var(--putih); }
.kontak dl { margin: 0; display: grid; grid-template-columns: 6.5em 1fr; gap: 6px 12px; }
.kontak dt { color: #9fa9ec; }
.kontak dd { margin: 0; color: var(--putih); overflow-wrap: anywhere; }
.kontak a { text-underline-offset: 3px; text-decoration-color: #6f7bd6; }
.kecil { margin: 18px 0 0; font-size: 0.8rem; color: #9fa9ec; }

/* ---------------------------------------------------------------- layar lebar */
@media (min-width: 900px) {
  .tata {
    grid-template-columns: minmax(340px, 5fr) 7fr;
    grid-template-rows: 1fr auto;
    grid-template-areas: "id main" "kontak main";
  }
  .identitas { padding: 64px 48px 40px; display: flex; flex-direction: column; justify-content: flex-end; }
  .motif { width: 560px; height: 560px; right: -210px; top: -170px; }
  .logo { width: 88px; height: 88px; }
  .kontak { background: var(--biru); padding: 0 48px 48px; }
  .kontak h2 { padding-top: 28px; border-top: 1px solid var(--biru-garis); }
  .layanan { padding: 72px 56px 64px; align-self: start; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .motif { display: none; } .identitas, .kontak { background: none; color: #000; } }