:root{--warna-biru:#0c6f96;--warna-hijau:#006325;--warna-kuning:#dbbe00;--warna-navy:#0a2733;--warna-teks:#17252e;--warna-latar:#fff;--warna-latar-abu:#f3f6f8;--font-utama:system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--lebar-konten:72rem}*,:before,:after{box-sizing:border-box}body{font-family:var(--font-utama);color:var(--warna-teks);background:var(--warna-latar);flex-direction:column;min-height:100dvh;margin:0;line-height:1.6;display:flex}main{flex:1 0 auto}h1,h2,h3{color:var(--warna-navy);line-height:1.2}h1{font-size:clamp(2rem,5vw,3.25rem)}.kontainer{max-width:var(--lebar-konten);margin:0 auto;padding:0 1.5rem}.header{--header-tinggi-atas:4.5rem;z-index:10;background:var(--warna-latar);position:sticky;top:0}.header__isi{max-width:var(--lebar-konten);justify-content:space-between;align-items:center;gap:1.5rem;margin:0 auto;display:flex}.header__merek{color:var(--warna-navy);align-items:center;gap:.75rem;font-size:1.125rem;font-weight:700;text-decoration:none;display:flex}.header__logo{width:auto;height:40px;display:block}.header__menu{margin:0;padding:0;list-style:none}.header__tautan{text-decoration:none}.header__merek:focus-visible,.header__tombol:focus-visible,.header__kontak-tautan:focus-visible,.header__ajakan:focus-visible{outline:3px solid var(--warna-biru);outline-offset:3px}.header__tombol{display:none}.header__tombol svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round}@media (width>48rem){.header{top:calc(-1 * var(--header-tinggi-atas))}.header__isi{height:var(--header-tinggi-atas);padding:0 1.5rem}.header__kontak{align-items:center;gap:1.5rem;display:flex}.header__kontak-tautan{color:var(--warna-teks);font-size:.9375rem;text-decoration:none}.header__kontak-tautan:hover{color:var(--warna-biru)}.header__ajakan{background:var(--warna-kuning);color:var(--warna-navy);border-radius:.375rem;padding:.5rem 1.25rem;font-weight:700;text-decoration:none;display:inline-block}.header__ajakan:hover{filter:brightness(1.08)}.header__nav{background:var(--warna-navy);border-bottom:1px solid #ffffff29}.header__menu{max-width:var(--lebar-konten);gap:2rem;margin:0 auto;padding:0 1.5rem;display:flex}.header__tautan{color:var(--warna-latar);letter-spacing:.04em;text-transform:uppercase;padding:.875rem 0;font-size:.875rem;font-weight:600;display:block}.header__tautan:hover{color:var(--warna-kuning)}.header__tautan.active{color:var(--warna-latar);box-shadow:inset 0 -3px 0 var(--warna-kuning)}.header__tautan:focus-visible{outline:3px solid var(--warna-latar);outline-offset:2px}}@media (48rem<width<=64rem){.header__email{display:none}}@media (width<=48rem){.header{border-bottom:1px solid #dbe3e8}.header__isi{gap:1rem;padding:.5rem 1rem}.header__merek{gap:.5rem;font-size:1rem}.header__kontak{display:none}.header__tombol{background:var(--warna-latar);width:2.75rem;height:2.75rem;color:var(--warna-navy);cursor:pointer;border:1px solid #dbe3e8;border-radius:.375rem;flex-shrink:0;place-items:center;padding:0;display:inline-grid}.header__nav{background:var(--warna-latar);border-bottom:1px solid #dbe3e8;padding:.5rem 1rem 1rem;display:none;position:absolute;top:100%;left:0;right:0;box-shadow:0 8px 16px #0a27331f}.header__nav--buka{display:block}.header__tautan{color:var(--warna-teks);border-left:4px solid #0000;padding:.875rem .75rem;font-weight:500;display:block}.header__tautan:hover{color:var(--warna-biru)}.header__tautan.active{color:var(--warna-biru);border-left-color:var(--warna-kuning);background:var(--warna-latar-abu)}.header__tautan:focus-visible{outline:3px solid var(--warna-biru);outline-offset:3px}}.footer{background:var(--warna-latar);border-top:4px solid var(--warna-biru)}.footer__pita{background:var(--warna-navy)}.footer__pita-isi{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;padding-top:clamp(1.75rem,5vw,2.5rem);padding-bottom:clamp(1.75rem,5vw,2.5rem);display:flex}.footer__pita h2{color:var(--warna-latar);margin:0;font-size:clamp(1.375rem,3vw,1.875rem)}.footer__pita-tombol{background:var(--warna-kuning);color:var(--warna-navy);border-radius:.375rem;padding:.75rem 1.75rem;font-weight:700;text-decoration:none;display:inline-block}.footer__pita-tombol:hover{filter:brightness(1.08)}.footer__pita-tombol:focus-visible{outline:3px solid var(--warna-latar);outline-offset:3px}.footer__isi{gap:2rem;padding:3rem 0;display:grid}.footer__merek{color:var(--warna-navy);align-items:center;gap:.75rem;font-size:1.125rem;font-weight:700;text-decoration:none;display:inline-flex}.footer__logo{width:auto;height:40px;display:block}.footer__slogan{color:var(--warna-biru);margin:.75rem 0 1.5rem;font-weight:600}.footer__menu{gap:.5rem;margin:0;padding:0;list-style:none;display:grid}.footer__tautan{color:var(--warna-teks);overflow-wrap:anywhere;font-weight:500;text-decoration:none}.footer__tautan:hover{color:var(--warna-biru);text-decoration:underline}.footer__tautan:focus-visible,.footer__merek:focus-visible{outline:3px solid var(--warna-biru);outline-offset:3px}.footer__kanan{border-top:1px solid #dbe3e8;padding-top:2rem}.footer__kontak{gap:.875rem;margin:0;padding:0;list-style:none;display:grid}.footer__kontak li{align-items:flex-start;gap:.75rem;display:flex}.footer__ikon{fill:none;stroke:var(--warna-biru);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:.2rem}.footer__alamat{font-style:normal}.footer__alamat span{display:block}.footer__bawah{background:var(--warna-latar-abu);border-top:1px solid #dbe3e8;padding:1rem 0;font-size:.875rem}.footer__bawah p{margin:0}@media (width>=52rem){.footer__isi{grid-template-columns:1fr 1.5fr;gap:0}.footer__kiri{padding-right:3rem}.footer__kanan{border-top:0;border-left:1px solid #dbe3e8;padding-top:0;padding-left:3rem}}
