/* ══════════════════════════════════════════════════════════════
   PANGGIL.COM — Typography System (Web) v5
   Self-hosted fonts — no external CDN requests.

   Type scale (11 steps):
   --text-hero        : clamp(3rem, 5.5vw, 5.8rem)
   --text-section     : clamp(2.2rem, 4vw, 4rem)
   --text-3xl         : clamp(2rem, 4.5vw, 3.5rem)
   --text-page-mobile : clamp(1.8rem, 6vw, 2.5rem)
   --text-2xl         : 1.75rem
   --text-xl          : 1.375rem
   --text-lg          : 1.175rem
   --text-md          : 1.125rem
   --text-base        : 1rem        (16px)
   --text-sm          : 0.9375rem   (15px)
   --text-xs          : 0.9375rem   (15px — floor)

   Font families:
   --font-family : 'Outfit', sans-serif
   --font-logo   : 'Montserrat', sans-serif
   --font-mono   : ui-monospace, Menlo, monospace

   Font weights:
   --fw-regular  : 400  --fw-medium   : 500
   --fw-semibold : 600  --fw-bold     : 700
   --fw-extrabold: 800  --fw-black    : 900
   ══════════════════════════════════════════════════════════════ */

/* Outfit — latin-ext — weight 400 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Outfit — latin — weight 400 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/outfit-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Outfit — latin-ext — weight 500 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Outfit — latin — weight 500 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/outfit-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Outfit — latin-ext — weight 600 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Outfit — latin — weight 600 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/outfit-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Outfit — latin-ext — weight 700 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Outfit — latin — weight 700 */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/outfit-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat — latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Montserrat — latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Type scale — display */
  --text-hero:        clamp(3rem, 5.5vw, 5.8rem);
  --text-section:     clamp(2.2rem, 4vw, 4rem);
  --text-3xl:         clamp(2rem, 4.5vw, 3.5rem);
  --text-page-mobile: clamp(1.8rem, 6vw, 2.5rem);

  /* Type scale — body */
  --text-2xl:  1.75rem;
  --text-xl:   1.375rem;
  --text-lg:   1.175rem;
  --text-md:   1.125rem;
  --text-base: 1rem;
  --text-sm:   0.9375rem;
  --text-xs:   0.9375rem;

  /* Font weights */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Font families */
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-logo:   'Montserrat', sans-serif;
  --font-mono:   ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
}

body {
  font-family: var(--font-family);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;           /* Firefox & standard */
}

/* Form elements tidak otomatis inherit font dari body di browser —
   reset eksplisit agar semua pakai Outfit, bukan system UI font */
button, input, select, textarea, optgroup {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ── FOOTER ── */
footer{background:var(--navy);color:rgba(255,255,255,.85)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;padding:4rem max(2rem, calc((100% - 1200px)/2 + 2rem)) 3rem}
.footer-logo{display:flex;align-items:center;gap:.6rem;font-size:var(--text-lg);font-weight:800;color:#fff;font-family:var(--font-logo);margin-bottom:1rem}
.footer-tagline{font-size:var(--text-sm);line-height:1.7;max-width:260px;margin-bottom:1rem}
.footer-bali{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:100px;padding:.3rem .85rem;font-size:var(--text-xs);color:rgba(255,255,255,.7)}
.footer-col-title{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:1rem}
.footer-col-links{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.footer-col-links a{color:rgba(255,255,255,.75);text-decoration:none;font-size:var(--text-sm);transition:color .15s;font-weight:400}
.footer-col-links a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding:1.25rem max(2rem, calc((100% - 1200px)/2 + 2rem));border-top:1px solid rgba(255,255,255,.08)}
.footer-copy{font-size:var(--text-xs);color:rgba(255,255,255,.5)}
.footer-legal{display:flex;gap:1.25rem;list-style:none}
.footer-legal a{color:rgba(255,255,255,.5);text-decoration:none;font-size:var(--text-xs);transition:color .15s}
.footer-legal a:hover{color:rgba(255,255,255,.7)}
@media(max-width:768px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-top{grid-template-columns:1fr}}