/* =========================================================
   PITR, Landing Page Styles

   Warna diambil persis dari aset brand PITR (CLAUDE.md bagian 3):
   hijau #00AF57 sebagai primary, kuning #FFBE00 sebagai accent.
   Selebihnya netral. Landing yang warnanya berbeda dari aplikasi
   yang diunduh membuat orang ragu sudah mengunduh yang benar.

   Tipografi: Plus Jakarta Sans (judul) + Inter (isi) + IBM Plex Mono
   (label dan angka, supaya kolom saldo di kartu stok tetap lurus).
   ========================================================= */

:root{
    --hijau: #00AF57;
    --hijau-deep: #04703A;
    --hijau-soft: #E4F7ED;
    --kuning: #FFBE00;
    --kuning-deep: #B87F00;

    --ink: #10231A;
    --ink-soft: #4C5A53;
    --paper: #FFFFFF;
    --mist: #F3F8F5;
    --line: #E1EAE5;

    /* Status kedaluwarsa, warnanya sama dengan yang dipakai di aplikasi */
    --aman: #00AF57;
    --waspada: #FFBE00;
    --lewat: #D34A3C;

    --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --radius-lg: 28px;
    --radius-md: 20px;
    --radius-sm: 12px;

    --shadow-soft: 0 20px 45px -20px rgba(4, 43, 26, 0.20);
    --shadow-card: 0 10px 30px -18px rgba(4, 43, 26, 0.24);
}

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

html{ scroll-behavior: smooth; }

body{
    margin: 0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

h1, h2, h3, h4{
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.01em;
}

p{ margin: 0; color: var(--ink-soft); line-height: 1.65; }

.wrap{
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.text-accent{ color: var(--hijau); }

/* Fokus keyboard harus terlihat: apoteker sering memakai HP dengan keyboard
   eksternal, dan halaman legal wajib bisa ditelusuri tanpa tetikus. */
:focus-visible{
    outline: 3px solid var(--hijau);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link{
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--hijau);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-sm) 0;
    z-index: 200;
    font-weight: 600;
}
.skip-link:focus{ left: 0; }

@media (prefers-reduced-motion: reduce){
    *{
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Buttons ---------- */
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1.5px solid transparent;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
    cursor: pointer;
    text-align: center;
}
.btn-lg{ padding: 15px 30px; font-size: 1rem; }

.btn-primary{ background: var(--hijau); color: #fff; box-shadow: var(--shadow-card); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(0,175,87,.55); }

.btn-outline{ border-color: var(--line); color: var(--hijau-deep); background: var(--paper); }
.btn-outline:hover{ border-color: var(--hijau); background: var(--hijau-soft); }

.btn-white{ background: var(--paper); color: var(--hijau-deep); }
.btn-white:hover{ transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(0,0,0,.32); }

.btn-outline-white{ border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline-white:hover{ background: rgba(255,255,255,.14); }

/* ---------- Header ---------- */
.site-header{
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled{
    border-bottom-color: var(--line);
    box-shadow: 0 8px 24px -20px rgba(4,43,26,.4);
}
.header-inner{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    gap: 20px;
}
.brand{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark{ width: 32px; height: 32px; }
.brand-name{ font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -0.02em; }

.main-nav{ display: flex; gap: 30px; margin: 0 auto; }
.main-nav a{ font-size: .95rem; font-weight: 500; color: var(--ink-soft); transition: color .15s ease; }
.main-nav a:hover{ color: var(--hijau); }

.header-actions{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-toggle{
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    border: none; background: none; cursor: pointer;
}
.nav-toggle span{ display: block; height: 2px; width: 22px; background: var(--ink); border-radius: 2px; }

/* ---------- Eyebrow / Section head ---------- */
.eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hijau-deep);
    margin: 0 0 14px;
}
.eyebrow-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--kuning); display: inline-block; flex-shrink: 0; }

.section-head{ max-width: 680px; margin-bottom: 48px; }
.section-head h2{ font-size: clamp(1.5rem, 3vw, 2.35rem); }
.section-lead{ margin-top: 16px; font-size: 1rem; }

.section{ padding: 100px 0; }
.section-mist{ background: var(--mist); }

/* ---------- Hero ---------- */
.hero{
    position: relative;
    padding: 120px 0 100px;
    background: linear-gradient(180deg, #F7FCF9 0%, #FFFFFF 60%);
    overflow: hidden;
}
.hero-decor{
    position: absolute;
    inset: -12% -8% auto auto;
    width: 620px; height: 620px;
    background-image: radial-gradient(circle, var(--line) 1.6px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,.9) 0%, transparent 70%);
    mask-image: radial-gradient(circle, rgba(0,0,0,.9) 0%, transparent 70%);
    opacity: .85;
    pointer-events: none;
}
/* Kapsul dari aset brand, dipakai sebagai dekorasi latar */
.hero-aksen{
    position: absolute;
    left: -180px;
    bottom: -220px;
    width: 520px;
    opacity: .10;
    pointer-events: none;
    transform: rotate(-8deg);
}

.hero-inner{
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    gap: 48px;
    position: relative;
}
.hero-copy h1{ font-size: clamp(1.95rem, 4.2vw, 3.3rem); margin-bottom: 20px; }
.hero-lead{ font-size: 1.06rem; max-width: 520px; margin-bottom: 30px; }
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }

.hero-note{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #FFF9E6;
    border: 1px solid #F2E0A8;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: .86rem;
    color: #6B5310;
    max-width: 520px;
    margin-bottom: 32px;
}
.hero-note-icon{ width: 18px; height: 18px; color: var(--kuning-deep); flex-shrink: 0; margin-top: 1px; }

.hero-meta{ display: flex; gap: 28px; flex-wrap: wrap; }
.hero-meta div{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-meta strong{ font-family: var(--font-display); font-size: 1.02rem; }
.hero-meta span{ font-size: .82rem; color: var(--ink-soft); }

.hero-visual{ position: relative; display: flex; justify-content: center; }

/* ---------- Kartu stok (visual khas apotek) ---------- */
.stok-card{
    width: 100%;
    max-width: 400px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 22px;
    box-shadow: var(--shadow-soft);
}
.stok-card--flat{ box-shadow: var(--shadow-card); max-width: 420px; }

.stok-card-head{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 6px;
}
.stok-card-label{
    display: block;
    font-family: var(--font-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-soft);
    margin-bottom: 4px;
}
.stok-card-title{ font-family: var(--font-display); font-size: 1.02rem; }
.stok-card-icon{ width: 24px; height: 24px; color: var(--hijau); flex-shrink: 0; }

/* Kolom terakhir memakai font mono supaya angka saldonya sejajar ke bawah */
.stok-row{
    display: grid;
    grid-template-columns: 46px 1fr 52px 54px;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--line);
    font-size: .82rem;
    color: var(--ink-soft);
}
.stok-row:last-of-type{ border-bottom: none; }
.stok-row span:first-child,
.stok-row span:nth-child(3),
.stok-row span:last-child{ font-family: var(--font-mono); }
.stok-row span:nth-child(3), .stok-row span:last-child{ text-align: right; }
.stok-row span:nth-child(2){ color: var(--ink); overflow-wrap: anywhere; }

.stok-row--head{
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-soft);
    border-bottom: 1px solid var(--line);
}
.stok-row--head span{ font-family: var(--font-mono) !important; color: var(--ink-soft) !important; }

.qty-in{ color: var(--hijau); font-weight: 600; }
.qty-out{ color: var(--lewat); font-weight: 600; }

.stok-card-foot{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: .86rem;
    color: var(--ink-soft);
}
.stok-card-foot strong{ font-family: var(--font-mono); font-size: 1.05rem; color: var(--hijau-deep); }

/* Kartu status ED, menempel di sudut kartu stok */
/* Ditempatkan menggantung di bawah kartu stok, BUKAN menimpa barisnya.
   Sempat menutupi baris "Stok berjalan" sehingga angka saldonya tidak
   terbaca sama sekali di layar lebar. */
.ed-card{
    position: absolute;
    right: -10px;
    top: calc(100% + 14px);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    box-shadow: var(--shadow-soft);
    min-width: 210px;
}
.ed-title{
    display: block;
    font-family: var(--font-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-soft);
    margin-bottom: 10px;
}
.ed-line{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--ink);
    padding: 3px 0;
}
.ed-day{ margin-left: auto; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-soft); }
.dot{ width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-aman{ background: var(--aman); }
.dot-waspada{ background: var(--waspada); }
.dot-lewat{ background: var(--lewat); }

/* ---------- Problems ---------- */
.problem-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.problem-card{
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 26px;
}
.problem-tag{
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9E3226;
    background: #FCECEA;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.problem-card p{ margin-bottom: 18px; color: var(--ink); }
.problem-solution{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}
.ps-icon{ width: 18px; height: 18px; color: var(--hijau); flex-shrink: 0; margin-top: 2px; }
.problem-solution span{ font-size: .9rem; color: var(--ink-soft); }

/* ---------- Bento fitur (gaya strip obat) ----------
   Kartu memakai sudut membulat dengan garis putus di tepi atas, meniru
   perforasi strip obat. Ini yang membuat grid-nya tidak terbaca sebagai
   template bento umum. */
/* Tingginya ditentukan isi kartunya, BUKAN dipaksa lewat grid-row span.
   Versi sebelumnya memaksa kartu md setinggi dua baris grid, padahal
   teksnya cuma mengisi separuh, sehingga barisnya terlihat bergerigi
   dan ada lubang besar di bawah teks. Sekarang tiap baris setinggi
   kartu terisi paling banyak, dan sisanya ikut meratakan diri. */
.bento{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    align-items: stretch;
}
.bento-card{
    position: relative;
    border-radius: var(--radius-md);
    padding: 26px;
    border: 1px solid var(--line);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
/* Garis perforasi strip obat di tepi atas kartu */
.bento-card::before{
    content: "";
    position: absolute;
    top: 12px;
    left: 26px;
    right: 26px;
    height: 2px;
    background-image: linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
    background-size: 12px 2px;
    opacity: .9;
}
.bento-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-card); }

/* Kartu lg dan md berbagi baris yang sama tingginya, dan isi md memang
   lebih pendek. Paragrafnya TIDAK didorong ke dasar kartu: judul yang
   pendek (misalnya "Koneksi mati, kasir tetap melayani") menyisakan
   lubang besar di antara judul dan paragrafnya, dan keduanya jadi
   terbaca sebagai dua hal yang tidak berhubungan. Teks dibiarkan
   menumpuk di atas, ruang sisanya kosong di bawah seperti kartu lain. */
/* Susunannya (9 kartu, grid 6 kolom):
     baris 1  lg(4) + md(2)
     baris 2  md(2) + sm(2) + sm(2)
     baris 3  sm(2) + sm(2) + sm(2)
     baris 4  sm(3) + sm(3)
   Sembilan kartu jatuh jadi 4+2 / 2+2+2 / 2+2+2 / 2, jadi kartu
   terakhir tersisa sendirian. Kartu itu dilebarkan sampai memenuhi
   barisnya, supaya baris penutupnya tidak terbaca sebagai kartu yang
   lupa dipasangkan. Kalau jumlah kartunya berubah, cukup aturan
   terakhir ini yang perlu ditinjau ulang. */
.bento-lg{ grid-column: span 4; }
.bento-md{ grid-column: span 2; }
.bento-sm{ grid-column: span 2; }
.bento-card:last-child{ grid-column: 1 / -1; }

/* Kartu penutup jadi lebar penuh, jadi teksnya dibiarkan mendatar
   supaya barisnya tidak jadi satu kolom sempit yang tinggi. */
.bento-card:last-child p{ max-width: 62ch; }

.bento-highlight{
    background: linear-gradient(155deg, var(--hijau) 0%, var(--hijau-deep) 115%);
    color: #fff;
    border-color: transparent;
}
.bento-highlight::before{ background-image: linear-gradient(90deg, rgba(255,255,255,.45) 0 6px, transparent 6px 12px); }
.bento-highlight h3{ color: #fff; }
.bento-highlight p, .bento-highlight .bento-label{ color: rgba(255,255,255,.86); }
.bento-highlight .bento-icon{ background: rgba(255,255,255,.18); color: #fff; }

.bento-icon{
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--hijau-soft);
    color: var(--hijau-deep);
    display: flex; align-items: center; justify-content: center;
    margin-top: 8px;
    margin-bottom: 16px;
    flex-shrink: 0;
}
.bento-icon .icon{ width: 23px; height: 23px; }
.bento-label{
    font-family: var(--font-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-soft);
    margin-bottom: 10px;
}
.bento-card h3{ font-size: 1.12rem; margin-bottom: 10px; overflow-wrap: anywhere; }
.bento-card p{ font-size: .91rem; }

/* Kartu utama tidak lagi lebih tinggi dari yang lain, jadi bobotnya
   datang dari ukuran teks dan padding, bukan dari ruang kosong. */
.bento-highlight{ padding: 34px 32px; }
.bento-highlight h3{ font-size: 1.5rem; margin-bottom: 14px; }
.bento-highlight p{ font-size: 1rem; }
.bento-highlight .bento-icon{ width: 52px; height: 52px; }
.bento-highlight .bento-icon .icon{ width: 26px; height: 26px; }

/* ---------- Deep dive tabs ---------- */
.deepdive-tabs{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.dd-tab{
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .9rem;
    padding: 11px 20px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-soft);
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.dd-tab.is-active{ background: var(--hijau-deep); border-color: var(--hijau-deep); color: #fff; }

.dd-panel{ display: none; }
.dd-panel.is-active{
    display: grid;
    grid-template-columns: 1fr 0.85fr;
    gap: 48px;
    align-items: center;
}
.dd-copy h3{ font-size: clamp(1.25rem, 2.4vw, 1.6rem); margin-bottom: 14px; }
.dd-copy p{ margin-bottom: 22px; }
.dd-points{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dd-points li{ display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: .94rem; }
.dd-check{ width: 18px; height: 18px; color: var(--hijau); flex-shrink: 0; margin-top: 3px; }

.dd-visual{ display: flex; justify-content: center; min-width: 0; }

/* ---------- Alur obat (cara kerja) ----------
   Timeline berurutan: Beli, Rak, Jual, Laporan. Garis penghubungnya
   digambar dengan pseudo-element, bukan gambar. */
.alur{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
}
.alur-step{ position: relative; padding-top: 8px; }
.alur-node{
    width: 54px; height: 54px;
    border-radius: 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--hijau-deep);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
    box-shadow: var(--shadow-card);
}
.alur-icon{ width: 25px; height: 25px; }
/* Garis penghubung antar langkah, tidak digambar setelah langkah terakhir */
.alur-step::after{
    content: "";
    position: absolute;
    top: 35px;
    left: 62px;
    right: -24px;
    height: 2px;
    background-image: linear-gradient(90deg, var(--line) 0 7px, transparent 7px 14px);
    background-size: 14px 2px;
    z-index: 1;
}
.alur-step:last-child::after{ display: none; }

.alur-no{
    font-family: var(--font-mono);
    font-size: .78rem;
    color: var(--kuning-deep);
    display: block;
    margin-bottom: 8px;
}
.alur-step h3{ font-size: 1.08rem; margin-bottom: 10px; }
.alur-step p{ font-size: .91rem; }

/* ---------- Dua audiens ---------- */
.audiens-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.audiens-card{
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 30px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
}
.audiens-apotek{ background: var(--hijau-soft); border-color: #C4E9D6; }
.audiens-icon{
    width: 50px; height: 50px;
    border-radius: 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--hijau-deep);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
}
.audiens-icon .icon{ width: 25px; height: 25px; }
.audiens-label{
    font-family: var(--font-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--kuning-deep);
    background: #FFF6DC;
    border-radius: 999px;
    padding: 4px 11px;
    align-self: flex-start;
    margin-bottom: 12px;
}
.audiens-card h3{ font-size: 1.35rem; margin-bottom: 12px; }
.audiens-card p{ font-size: .95rem; margin-bottom: 20px; }
.audiens-poin{
    list-style: none; margin: 0; padding: 18px 0 0;
    border-top: 1px dashed var(--line);
    display: flex; flex-direction: column; gap: 11px;
}
.audiens-poin li{ display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; font-weight: 500; }

/* ---------- Harga ---------- */
.harga-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.harga-card{
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 30px;
    background: var(--paper);
    display: flex;
    flex-direction: column;
}
.harga-card--utama{ border-color: var(--hijau); box-shadow: var(--shadow-card); }
.harga-nama{
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
    margin-bottom: 10px;
}
.harga-kuota{
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--ink);
    margin-bottom: 20px;
    overflow-wrap: anywhere;
}
.harga-poin{
    list-style: none; margin: 0; padding: 18px 0 0;
    border-top: 1px dashed var(--line);
    display: flex; flex-direction: column; gap: 11px;
}
.harga-poin li{ display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }

/* Kotak penjelasan batas kuota, membentang penuh di bawah kedua paket */
.harga-jaminan{
    grid-column: 1 / -1;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: var(--hijau-soft);
    border: 1px solid #C4E9D6;
    border-radius: var(--radius-md);
    padding: 26px 28px;
}
.harga-jaminan-icon{ width: 26px; height: 26px; color: var(--hijau-deep); flex-shrink: 0; margin-top: 3px; }
.harga-jaminan h3{ font-size: 1.08rem; margin-bottom: 10px; color: var(--hijau-deep); }
.harga-jaminan p{ font-size: .93rem; }

/* ---------- Kenapa namanya PITR (akronim) ----------
   Empat huruf dibaca sebagai kapsul: huruf besar di dalam bentuk kapsul
   hijau kuning, bentuk yang sama dengan aksen di logo. Nomor urutnya
   memakai <ol> supaya urutan P, I, T, R tetap terbaca oleh pembaca layar
   walau angkanya disembunyikan. */
.akronim-grid{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    counter-reset: none;
}
.akronim-card{
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
}
.akronim-huruf{
    /* Kapsul kecil berisi hurufnya. Lebarnya dua kali tingginya supaya
       terbaca sebagai kapsul, bukan lingkaran. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 38px;
    border-radius: 999px;
    background: linear-gradient(105deg, var(--hijau-soft) 0 50%, #FFF0BF 50% 100%);
    border: 1px solid var(--line);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.32rem;
    color: var(--hijau-deep);
    margin-bottom: 16px;
    flex-shrink: 0;
}
/* Garis sambungan badan dan tutup kapsul, sama seperti kapsul latar.
   Digambar di dua sisi hurufnya, bukan menembusnya: garis yang lewat
   persis di tengah membuat huruf P dan I hampir tidak terbaca. */
.akronim-huruf{ position: relative; overflow: hidden; }
.akronim-huruf::before,
.akronim-huruf::after{
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 8px;
    background: var(--line);
    transform: translateX(-50%);
}
.akronim-huruf::before{ top: 0; }
.akronim-huruf::after{ bottom: 0; }
.akronim-card:last-child .akronim-huruf::before,
.akronim-card:last-child .akronim-huruf::after{ background: rgba(255,255,255,.75); }

.akronim-kata{
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--kuning-deep);
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}
.akronim-card p{ font-size: .9rem; }

/* Kata "Retail" yang membedakan PITR dari aplikasi gudang, jadi kartunya
   diberi penekanan hijau. */
.akronim-card:last-child{ border-color: #C4E9D6; background: var(--hijau-soft); }
.akronim-card:last-child .akronim-huruf{
    background: linear-gradient(105deg, var(--hijau) 0 50%, var(--kuning) 50% 100%);
    border-color: transparent;
    color: #fff;
}

.akronim-penutup{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 26px;
    padding: 20px 24px;
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    font-size: .93rem;
    color: var(--ink);
}
.akronim-penutup-icon{ width: 20px; height: 20px; color: var(--hijau); flex-shrink: 0; margin-top: 2px; }

/* ---------- CTA ---------- */
.cta{
    position: relative;
    background: linear-gradient(135deg, var(--hijau-deep) 0%, var(--hijau) 62%, var(--kuning-deep) 135%);
    padding: 90px 0;
    overflow: hidden;
}
.cta-decor{
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.16) 1.6px, transparent 1.6px);
    background-size: 28px 28px;
    opacity: .6;
}
.cta-inner{ position: relative; text-align: center; max-width: 660px; margin: 0 auto; }
.cta h2{ color: #fff; font-size: clamp(1.45rem, 3.4vw, 2.25rem); margin-bottom: 16px; }
.cta p{ color: rgba(255,255,255,.88); margin-bottom: 30px; font-size: 1.03rem; }
.cta-actions{ justify-content: center; margin-bottom: 24px; }
.cta-note{ font-size: .84rem; color: rgba(255,255,255,.78); margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.7); padding: 70px 0 30px; }
.footer-grid{
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.1fr;
    gap: 40px;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-brand{ display: flex; flex-direction: column; gap: 12px; }
.footer-brand-top{ display: flex; align-items: center; gap: 10px; }
.footer-brand .brand-name{ color: #fff; }
.footer-brand p{ color: rgba(255,255,255,.55); font-size: .89rem; max-width: 300px; }
/* Kepanjangan nama: kecil, mono, dan tidak menyaingi tagline di bawahnya */
.footer-kepanjangan{
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .03em;
    color: rgba(255,255,255,.42) !important;
    margin-top: -4px;
}
.footer-col{ display: flex; flex-direction: column; gap: 12px; }
.footer-col h4{ color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.footer-col a{ color: rgba(255,255,255,.62); font-size: .91rem; transition: color .15s ease; overflow-wrap: anywhere; }
.footer-col a:hover{ color: var(--kuning); }
.footer-bottom{
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    padding-top: 26px;
    font-size: .8rem;
    color: rgba(255,255,255,.45);
}

/* ---------- Scroll reveal ---------- */
[data-reveal]{ opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }

/* =========================================================
   Responsive

   Menu mobile ditaruh di blok 980px, BUKAN 640px. Di Ever aturan
   .main-nav.is-open hanya ada di blok 640px, padahal .main-nav sudah
   disembunyikan sejak 980px, jadi di lebar 641px sampai 980px tombol
   hamburgernya tidak membuka apa pun.
   ========================================================= */
@media (max-width: 980px){
    .main-nav{ display: none; }
    .nav-toggle{ display: flex; }

    .main-nav.is-open{
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 76px; left: 0; right: 0;
        background: #fff;
        border-bottom: 1px solid var(--line);
        padding: 20px 24px 26px;
        gap: 18px;
        margin: 0;
        box-shadow: var(--shadow-card);
    }

    .hero{ padding: 80px 0 90px; }
    .hero-inner{ grid-template-columns: 1fr; gap: 56px; }
    .hero-lead, .hero-note{ max-width: none; }
    .hero-visual{ order: 2; padding-bottom: 30px; }

    .problem-grid{ grid-template-columns: 1fr; }

    /* Dua kolom betulan di tablet. Sebelumnya grid-nya dijadikan 2 kolom
       tapi setiap kartu tetap diberi span 2, jadi semuanya memakan satu
       baris penuh dan tabletnya terlihat sama saja dengan ponsel. Hanya
       kartu utama dan kartu penutup yang sengaja melebar. */
    .bento{ grid-template-columns: repeat(2, 1fr); }
    .bento-lg, .bento-md, .bento-sm{ grid-column: span 1; grid-row: auto; }
    .bento-lg{ grid-column: 1 / -1; }
    /* Di dua kolom, delapan kartu sisanya sudah habis genap. Kartu
       penutup dikembalikan ke satu kolom supaya tidak ada kartu lain
       yang justru tertinggal sendirian di baris sebelumnya. */
    .bento-card:last-child{ grid-column: span 1; }

    .dd-panel.is-active{ grid-template-columns: 1fr; gap: 32px; }
    .dd-visual{ order: -1; }

    .alur{ grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
    /* Garis penghubung dimatikan begitu langkahnya turun baris, karena
       urutannya tidak lagi lurus kiri ke kanan. */
    .alur-step::after{ display: none; }

    .audiens-grid, .harga-grid{ grid-template-columns: 1fr; }
    .akronim-grid{ grid-template-columns: repeat(2, 1fr); }
    .footer-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px){
    .section{ padding: 68px 0; }
    .hero{ padding: 60px 0 76px; }

    .header-actions .btn{ padding: 10px 16px; font-size: .85rem; }

    .hero-actions .btn, .cta-actions .btn{ width: 100%; }
    .hero-actions, .cta-actions{ flex-direction: column; }
    .hero-meta{ gap: 18px; }

    .bento{ grid-template-columns: 1fr; }
    .bento-lg, .bento-md, .bento-sm{ grid-column: span 1; }
    .bento-highlight{ padding: 26px; }
    .bento-highlight h3{ font-size: 1.25rem; }
    .bento-highlight p{ font-size: .91rem; }

    .alur{ grid-template-columns: 1fr; }

    .harga-jaminan{ flex-direction: column; gap: 12px; padding: 22px; }

    /* Empat huruf ditumpuk satu kolom: dua kolom di 360px membuat kata
       "Transactions" terpotong di kartunya. */
    .akronim-grid{ grid-template-columns: 1fr; }
    .akronim-penutup{ flex-direction: column; gap: 10px; padding: 18px 20px; }

    .footer-grid{ grid-template-columns: 1fr; }
    .footer-bottom{ flex-direction: column; }

    /* Kartu ED tidak lagi menempel di sudut: di layar sempit posisinya
       menabrak kartu stok dan menutupi barisnya. */
    .ed-card{
        position: static;
        margin: 18px auto 0;
        width: 100%;
        max-width: 400px;
    }
    .hero-visual{ flex-direction: column; align-items: center; }
}

/* Layar paling sempit (320px). Lebar ini yang berulang kali menemukan
   overflow di aplikasi, jadi diuji juga di sini. */
@media (max-width: 380px){
    .wrap{ padding: 0 16px; }
    .header-inner{ gap: 10px; }
    .brand-name{ font-size: 1.15rem; }
    .header-actions .btn{ padding: 9px 12px; font-size: .78rem; }

    .stok-card{ padding: 16px; }
    .stok-row{ grid-template-columns: 40px 1fr 44px 44px; gap: 6px; font-size: .74rem; }
    .stok-row--head{ font-size: .62rem; }

    .bento-card, .problem-card, .audiens-card, .harga-card{ padding: 20px; }
    .bento-card::before{ left: 20px; right: 20px; }
}