/* ==========================================================================
   TOKENS.CSS
   Design tokens acuan gaya ala apple.com
   Taruh file ini di root project, import PALING ATAS sebelum CSS lainnya.
   Semua nilai visual (font, warna, radius, spacing) di seluruh website
   HARUS memakai variable di file ini — jangan tulis nilai hardcode baru.
   ========================================================================== */

:root {

    /* --------------------------------------------------------------------
     1. FONT FAMILY
     -------------------------------------------------------------------- */
    --font-main: -apple-system, BlinkMacSystemFont, "SF Pro Display",
        "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", ui-monospace, "Cascadia Code", "Roboto Mono",
        Menlo, Consolas, monospace;

    /* --------------------------------------------------------------------
     2. FONT SIZE SCALE
     -------------------------------------------------------------------- */
    --fs-hero: 80px;
    /* headline paling besar di hero section */
    --fs-h1: 56px;
    /* judul halaman */
    --fs-h2: 40px;
    /* judul section */
    --fs-h3: 28px;
    /* sub judul */
    --fs-h4: 21px;
    /* judul kartu / fitur */
    --fs-body-lg: 19px;
    /* lead paragraph / intro */
    --fs-body: 17px;
    /* body text default (standar apple.com) */
    --fs-caption: 14px;
    /* keterangan gambar, label kecil */
    --fs-legal: 12px;
    /* footnote, syarat & ketentuan */

    /* Versi responsive (mobile-safe) pakai clamp() — opsional dipakai
     langsung di elemen h1/h2/hero kalau mau auto-scale */
    --fs-hero-fluid: clamp(40px, 7vw, 80px);
    --fs-h1-fluid: clamp(32px, 5.5vw, 56px);
    --fs-h2-fluid: clamp(28px, 4vw, 40px);

    /* --------------------------------------------------------------------
     3. FONT WEIGHT
     -------------------------------------------------------------------- */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    /* dipakai hampir semua heading apple.com */
    --fw-bold: 700;

    /* --------------------------------------------------------------------
     4. LINE HEIGHT
     -------------------------------------------------------------------- */
    --lh-hero: 1.05;
    --lh-h1: 1.07;
    --lh-h2: 1.1;
    --lh-h3: 1.14;
    --lh-h4: 1.19;
    --lh-body-lg: 1.42;
    --lh-body: 1.47;
    /* line-height standar paragraf */
    --lh-caption: 1.4;
    --lh-legal: 1.33;
    --lh-tight: 1.05;
    --lh-normal: 1.5;

    /* --------------------------------------------------------------------
     5. LETTER SPACING (tracking)
     -------------------------------------------------------------------- */
    --ls-hero: -0.015em;
    /* headline besar sedikit dirapatkan */
    --ls-h1: -0.015em;
    --ls-h2: -0.01em;
    --ls-h3: 0em;
    --ls-h4: 0.011em;
    /* teks kecil sedikit direnggangkan */
    --ls-body: 0em;
    --ls-caption: 0em;
    --ls-eyebrow: 0.05em;
    /* label kecil huruf kapital */

    /* --------------------------------------------------------------------
     6. WARNA — Netral / Background
     -------------------------------------------------------------------- */
    --color-bg: #ffffff;
    --color-bg-alt: #f5f5f7;
    /* abu muda, dipakai section & card */
    --color-bg-alt-2: #fbfbfd;
    /* abu lebih terang, variasi section */
    --color-bg-dark: #000000;
    /* section dark mode */
    --color-bg-dark-alt: #1d1d1f;
    /* dark alt, sedikit lebih terang dari hitam */

    /* --------------------------------------------------------------------
     7. WARNA — Teks
     -------------------------------------------------------------------- */
    --color-text: #1d1d1f;
    /* teks utama di atas background terang */
    --color-text-secondary: #86868b;
    /* teks sekunder / deskripsi */
    --color-text-tertiary: #6e6e73;
    /* teks tersier, sedikit lebih gelap dari secondary */
    --color-text-onDark: #f5f5f7;
    /* teks utama di atas background gelap */
    --color-text-onDark-secondary: #a1a1a6;
    /* teks sekunder di atas background gelap */
    --color-text-disabled: #d2d2d7;

    /* --------------------------------------------------------------------
     8. WARNA — Aksen / Interaktif
     -------------------------------------------------------------------- */
    --color-link: #0071e3;
    /* warna aksen utama: link & tombol */
    --color-link-hover: #0077ed;
    --color-link-active: #006edb;
    --color-link-onDark: #2997ff;
    /* aksen biru versi di atas background gelap */

    /* --------------------------------------------------------------------
     9. WARNA — Status (opsional, dipakai form/notifikasi)
     -------------------------------------------------------------------- */
    --color-success: #00a852;
    --color-warning: #ff9f0a;
    --color-error: #ff3b30;
    --color-info: #0071e3;

    /* --------------------------------------------------------------------
     10. WARNA — Border & Divider
     -------------------------------------------------------------------- */
    --color-border: #d2d2d7;
    --color-border-light: #e8e8ed;
    --color-border-dark: #424245;
    /* border di atas background gelap */
    --color-divider: rgba(0, 0, 0, 0.1);
    --color-divider-onDark: rgba(255, 255, 255, 0.15);

    /* --------------------------------------------------------------------
     11. BORDER RADIUS
     -------------------------------------------------------------------- */
    --radius-pill: 980px;
    /* tombol CTA utama, selalu berbentuk pil */
    --radius-card: 18px;
    /* kartu / panel besar */
    --radius-card-sm: 12px;
    /* kartu kecil, elemen UI, input */
    --radius-xs: 6px;
    /* elemen sangat kecil, badge, tag */
    --radius-full: 50%;
    /* avatar / elemen bulat sempurna */

    /* --------------------------------------------------------------------
     12. SPACING SCALE (kelipatan 4px)
     -------------------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    /* padding vertikal antar section besar */

    /* --------------------------------------------------------------------
     13. LAYOUT / CONTAINER
     -------------------------------------------------------------------- */
    --max-width: 1200px;
    /* lebar maksimal konten utama */
    --max-width-narrow: 980px;
    /* lebar maksimal konten teks/artikel */
    --container-padding: 22px;
    /* padding kiri-kanan container di mobile/desktop */
    --section-padding-y: 96px;
    /* padding atas-bawah section besar */
    --section-padding-y-sm: 64px;
    /* padding atas-bawah section lebih kecil */

    /* --------------------------------------------------------------------
     14. SHADOW (dipakai secukupnya, apple minim shadow)
     -------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-nav: 0 1px 0 rgba(0, 0, 0, 0.08);

    /* --------------------------------------------------------------------
     15. TRANSITION / MOTION
     -------------------------------------------------------------------- */
    --ease-standard: cubic-bezier(0.28, 0.11, 0.32, 1);
    /* easing khas apple */
    --duration-fast: 0.2s;
    --duration-normal: 0.4s;
    --duration-slow: 0.6s;

    /* --------------------------------------------------------------------
     16. Z-INDEX SCALE
     -------------------------------------------------------------------- */
    --z-nav: 1000;
    --z-modal: 2000;
    --z-toast: 3000;

    /* --------------------------------------------------------------------
     17. BREAKPOINTS (referensi, dipakai di media query manual)
     640px  = mobile besar / small tablet
     834px  = tablet (iPad portrait)
     1068px = desktop kecil (nav Apple berubah di sini)
     1441px = desktop besar
     -------------------------------------------------------------------- */
}

/* ==========================================================================
   DARK MODE (opsional) — otomatis ikut preferensi sistem pengguna
   Override token warna saat prefers-color-scheme: dark
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #000000;
        --color-bg-alt: #1d1d1f;
        --color-bg-alt-2: #161617;
        --color-text: #f5f5f7;
        --color-text-secondary: #a1a1a6;
        --color-text-tertiary: #86868b;
        --color-border: #424245;
        --color-border-light: #3a3a3c;
        --color-link: #2997ff;
        --color-link-hover: #47a5ff;
    }
}

/* ==========================================================================
   BASE RESET & GLOBAL STYLE
   Terapkan token di atas ke elemen dasar HTML
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-main);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------
   Typography elements
   -------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--space-3);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

h1 {
    font-size: var(--fs-h1);
    line-height: var(--lh-h1);
    letter-spacing: var(--ls-h1);
}

h2 {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
}

h3 {
    font-size: var(--fs-h3);
    line-height: var(--lh-h3);
    letter-spacing: var(--ls-h3);
}

h4 {
    font-size: var(--fs-h4);
    line-height: var(--lh-h4);
    letter-spacing: var(--ls-h4);
}

.text-hero {
    font-size: var(--fs-hero-fluid);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-hero);
    letter-spacing: var(--ls-hero);
    margin: 0 0 var(--space-4);
}

p {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--color-text);
}

.text-body-lg {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-body-lg);
}

.text-secondary {
    color: var(--color-text-secondary);
}

.text-caption {
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--color-text-secondary);
}

.text-legal {
    font-size: var(--fs-legal);
    line-height: var(--lh-legal);
    color: var(--color-text-secondary);
}

.text-eyebrow {
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--color-link);
}

code,
pre,
kbd {
    font-family: var(--font-mono);
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
    color: var(--color-link-hover);
}

/* --------------------------------------------------------------------
   Layout / Container
   -------------------------------------------------------------------- */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.container-narrow {
    max-width: var(--max-width-narrow);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: var(--section-padding-y) 0;
}

.section-sm {
    padding: var(--section-padding-y-sm) 0;
}

.section-alt {
    background: var(--color-bg-alt);
}

.section-dark {
    background: var(--color-bg-dark);
    color: var(--color-text-onDark);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
    color: var(--color-text-onDark);
}

.section-dark p,
.section-dark .text-secondary {
    color: var(--color-text-onDark-secondary);
}

.section-dark a {
    color: var(--color-link-onDark);
}

/* --------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-family: var(--font-main);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard);
}

.btn-sm {
    padding: 8px 16px;
    font-size: var(--fs-caption);
}

.btn-lg {
    padding: 16px 28px;
    font-size: var(--fs-body-lg);
}

.btn-primary {
    background: var(--color-link);
    color: #ffffff;
}

.btn-primary:hover {
    background: var(--color-link-hover);
    color: #ffffff;
}

.btn-primary:active {
    background: var(--color-link-active);
}

.btn-secondary {
    background: transparent;
    color: var(--color-link);
    border-color: var(--color-link);
}

.btn-secondary:hover {
    background: rgba(0, 113, 227, 0.06);
}

.btn-link {
    display: inline-block;
    background: none;
    padding: 0;
    color: var(--color-link);
    font-size: var(--fs-body);
}

.btn-link::after {
    content: " \203A";
    /* › */
}

.btn-link:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------- */
.card {
    background: var(--color-bg-alt);
    border-radius: var(--radius-card);
    padding: var(--space-8);
}

.card-sm {
    border-radius: var(--radius-card-sm);
    padding: var(--space-6);
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
}

/* --------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--container-padding);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-nav);
}

.nav a {
    color: var(--color-text);
    font-size: var(--fs-caption);
}

/* --------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------- */
.divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-8) 0;
}

/* --------------------------------------------------------------------
   Form elements (opsional, biar konsisten kalau ada form)
   -------------------------------------------------------------------- */
input,
textarea,
select {
    font-family: var(--font-main);
    font-size: var(--fs-body);
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card-sm);
    padding: var(--space-3) var(--space-4);
    transition: border-color var(--duration-fast) var(--ease-standard);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-link);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

/* --------------------------------------------------------------------
   Responsive: mobile adjustments
   -------------------------------------------------------------------- */
@media (max-width: 734px) {
    :root {
        --fs-hero: 44px;
        --fs-h1: 34px;
        --fs-h2: 28px;
        --fs-h3: 22px;
        --section-padding-y: 56px;
        --section-padding-y-sm: 40px;
        --container-padding: 18px;
    }
}