/* ============================================================================
   Portal publik - gaya mandiri, tanpa framework.
   Tidak memakai AdminLTE/jQuery milik aplikasi: halaman ini adalah satu-satunya
   yang dibaca crawler, jadi bundelnya sengaja kecil dan tidak ada aset pihak
   ketiga yang memblokir render. Font memakai font sistem agar tidak ada
   permintaan jaringan tambahan.
   ========================================================================= */

:root {
    --brand: #1d4ed8;
    --brand-dark: #1e3a8a;
    --brand-light: #eff6ff;
    --brand-soft: #dbeafe;
    --ink: #0f172a;
    --ink-soft: #334155;
    --muted: #64748b;
    --line: #e2e8f0;
    --bg: #ffffff;
    --bg-alt: #f8fafc;
    --ok: #15803d;
    --ok-soft: #dcfce7;
    --promo: #dc2626;
    --promo-soft: #fee2e2;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
    --shadow: 0 10px 30px rgba(15, 23, 42, .08);
    --shadow-lg: 0 24px 60px rgba(15, 23, 42, .12);
    --wrap: 1200px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.p-portal {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--bg);
    overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.25rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.p-skip {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
}
.p-skip:focus { left: 0; }

.p-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* Tautan ke bagian di dalam halaman tidak boleh berhenti di bawah header yang menempel. */
#fitur, #solusi, #paket, #faq { scroll-margin-top: 84px; }
.p-section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.p-section--alt { background: var(--bg-alt); }
.p-section--tight { padding-top: clamp(2rem, 4vw, 3rem); }

.p-eyebrow {
    display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand); margin-bottom: .6rem;
}
.p-lead { font-size: 1.075rem; color: var(--ink-soft); max-width: 46rem; }
.p-center { text-align: center; }
.p-center .p-lead { margin-left: auto; margin-right: auto; }
.p-muted { color: var(--muted); }
.p-small { font-size: .875rem; }

/* ---------------------------------------------------------------- tombol */
.p-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .8rem 1.35rem; border-radius: 999px; border: 1px solid transparent;
    font-weight: 600; font-size: .975rem; line-height: 1.2; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
    text-decoration: none !important;
}
.p-btn:hover { transform: translateY(-1px); }
.p-btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.p-btn--primary:hover { background: var(--brand-dark); }
.p-btn--dark { background: var(--ink); color: #fff; }
.p-btn--ghost { background: transparent; color: var(--brand); border-color: var(--brand-soft); }
.p-btn--ghost:hover { background: var(--brand-light); }
.p-btn--light { background: #fff; color: var(--brand); }
.p-btn--block { width: 100%; }
.p-btn--lg { padding: 1rem 1.75rem; font-size: 1.05rem; }

/* ---------------------------------------------------------------- header */
.p-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .18s ease;
}
.p-header.is-scrolled { box-shadow: var(--shadow-sm); }
.p-header__row { display: flex; align-items: center; gap: 1rem; height: 68px; }
.p-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--ink); font-size: 1.1rem; letter-spacing: -.01em; }
.p-brand:hover { text-decoration: none; }
.p-brand__mark {
    width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--brand) 0%, #3b82f6 100%);
    color: #fff; display: grid; place-items: center; font-size: .95rem; font-weight: 800;
}
.p-nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.p-nav__links { display: flex; align-items: center; gap: 1.35rem; list-style: none; margin: 0; padding: 0; }
.p-nav__link { color: var(--ink-soft); font-weight: 500; font-size: .95rem; }
.p-nav__link:hover, .p-nav__link[aria-current="page"] { color: var(--brand); text-decoration: none; }
.p-nav__actions { display: flex; align-items: center; gap: .6rem; }

/* Tombol bahasa: dua tautan dalam satu kapsul, yang sedang berlaku ditandai. Tingginya sengaja
   dikecilkan dibanding tombol utama karena ini kendali sekunder, tetapi tetap 40px agar nyaman
   ditekan di layar sentuh. */
.p-lang { display: inline-flex; align-items: center; gap: .1rem; border: 1px solid var(--line); border-radius: 999px; padding: .15rem; }
.p-lang__link {
    display: inline-flex; align-items: center; height: 40px; padding: 0 .75rem;
    border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--muted);
}
.p-lang__link:hover { background: var(--brand-light); color: var(--brand); text-decoration: none; }
.p-lang__link.is-active { background: var(--brand-light); color: var(--brand); }

.p-dropdown { position: relative; }
.p-dropdown__toggle {
    display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0;
    font: inherit; font-size: .95rem; font-weight: 600; color: var(--brand); cursor: pointer; padding: .4rem 0;
}
.p-dropdown__menu {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 232px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: .45rem; margin: 0; list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .15s ease;
}
.p-dropdown[data-open="true"] .p-dropdown__menu { opacity: 1; visibility: visible; transform: none; }
.p-dropdown__menu a { display: block; padding: .55rem .7rem; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: .93rem; }
.p-dropdown__menu a:hover { background: var(--brand-light); color: var(--brand); text-decoration: none; }
.p-dropdown__menu .p-dropdown__hint { display: block; font-size: .78rem; color: var(--muted); }

.p-burger {
    display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line);
    border-radius: 12px; background: #fff; cursor: pointer; align-items: center; justify-content: center;
}
.p-burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.p-burger span::before, .p-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.p-burger span::before { top: -6px; } .p-burger span::after { top: 6px; }

/* ---------------------------------------------------------------- hero */
.p-hero {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(135deg, #172554 0%, var(--brand-dark) 45%, #2563eb 100%);
    padding: clamp(2.75rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
}
.p-hero::after {
    content: ""; position: absolute; inset: auto -10% -40% -10%; height: 60%;
    background: radial-gradient(60% 60% at 50% 0%, rgba(255, 255, 255, .18), transparent 70%);
    pointer-events: none;
}
.p-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; position: relative; z-index: 1; }
.p-hero h1 { color: #fff; }
.p-hero__lead { font-size: 1.1rem; color: #dbeafe; max-width: 34rem; }
.p-hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.p-hero__badge {
    font-size: .8rem; font-weight: 600; color: #eff6ff;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
    padding: .35rem .7rem; border-radius: 999px;
}
.p-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.p-hero__note { font-size: .85rem; color: #bfdbfe; margin-top: .9rem; }
.p-hero__visual { position: relative; }
.p-hero__img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; object-fit: cover; }
.p-hero__panel {
    position: absolute; left: -18px; bottom: -22px; width: min(280px, 78%);
    background: #fff; color: var(--ink); border-radius: var(--radius); padding: 1rem 1.1rem;
    box-shadow: var(--shadow-lg);
}
.p-hero__panel-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.p-hero__panel-value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.p-hero__panel-note { font-size: .8rem; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------- strip & grid */
.p-trust { background: #fff; border-bottom: 1px solid var(--line); }
.p-trust__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.5rem 0; text-align: center; }
.p-trust__value { font-size: 1.35rem; font-weight: 800; color: var(--brand-dark); letter-spacing: -.02em; }
.p-trust__label { font-size: .82rem; color: var(--muted); }

.p-grid { display: grid; gap: 1.25rem; }
.p-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.p-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.p-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow-sm); height: 100%;
}
.p-card__icon {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--brand-light); color: var(--brand); margin-bottom: .9rem;
}
.p-card h3 { margin-bottom: .4rem; }
.p-card p { margin-bottom: 0; color: var(--ink-soft); font-size: .95rem; }

.p-chip-list { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.p-chip {
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: .45rem .95rem; font-size: .9rem; color: var(--ink-soft); box-shadow: var(--shadow-sm);
}

.p-quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.p-quote__text { font-size: .97rem; color: var(--ink-soft); }
.p-quote__who { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; }
.p-quote__avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-size: .85rem;
}
.p-quote__name { font-weight: 600; font-size: .92rem; }
.p-quote__role { font-size: .82rem; color: var(--muted); }

/* ---------------------------------------------------------------- pricing */
.p-cycles { display: inline-flex; flex-wrap: wrap; gap: .25rem; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; padding: .3rem; }
.p-cycles__btn {
    border: 0; background: none; font: inherit; font-size: .92rem; font-weight: 600; color: var(--ink-soft);
    padding: .5rem 1rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
}
.p-cycles__btn[aria-pressed="true"] { background: #fff; color: var(--brand); box-shadow: var(--shadow-sm); }
.p-cycles__save { font-size: .72rem; font-weight: 700; color: var(--ok); background: var(--ok-soft); border-radius: 999px; padding: .1rem .45rem; margin-left: auto; }

/* Picking a cycle inside a form is a list of choices, not a segmented control, and the register
   page's column is too narrow for four of them side by side - its pill wrapped onto two rows with
   the right edge ragged. As rows, each choice reads radio, name, then what it costs, and the amount
   takes the right edge of the row. The portal's own selector gets the same shape on a phone.
   `margin-left: auto` on the amount is what holds that shape together: it absorbs free space, so
   the radio and its name stay on the left instead of being spread across the row. */
.p-cycles--stacked { display: flex; flex-direction: column; width: 100%; gap: .3rem; border-radius: var(--radius-lg); }
.p-cycles--stacked .p-cycles__btn { justify-content: flex-start; text-align: left; min-height: 44px; padding: .6rem .85rem; border-radius: var(--radius); }

.p-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; margin-top: 1.75rem; }
.p-plan {
    position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 1.6rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.p-plan--popular { border-color: var(--brand); box-shadow: var(--shadow); }
.p-plan__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; min-height: 22px; }
.p-tag { font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: .25rem .55rem; border-radius: 999px; }
.p-tag--promo { background: var(--promo-soft); color: var(--promo); }
.p-tag--popular { background: var(--brand); color: #fff; }
.p-plan__name { font-size: 1.2rem; margin-bottom: .2rem; }
.p-plan__desc { color: var(--muted); font-size: .92rem; min-height: 2.6rem; }
.p-plan__price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; margin: 1rem 0 .15rem; }
.p-plan__amount { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.p-plan__per { font-size: .85rem; color: var(--muted); }
.p-plan__strike { color: var(--muted); text-decoration: line-through; font-size: .95rem; }
.p-plan__note { font-size: .82rem; color: var(--muted); min-height: 2.4rem; }
.p-plan__total { font-size: .9rem; font-weight: 600; color: var(--brand-dark); background: var(--brand-light); border-radius: var(--radius-sm); padding: .55rem .7rem; margin: .5rem 0 .9rem; }
.p-plan__limits { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .85rem; color: var(--ink-soft); margin-bottom: .8rem; }
.p-plan__cta { margin-top: auto; }

/* Harga per siklus: hanya satu yang tampil. Siklus pertama sudah diberi is-active saat
   HTML dikirim, sehingga halaman tetap masuk akal kalau JavaScript tidak berjalan. */
.p-cycle-opt { display: none; }
.p-cycle-opt.is-active { display: block; }

.p-feature-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.p-feature-list li { position: relative; padding: .32rem 0 .32rem 1.7rem; font-size: .92rem; color: var(--ink-soft); }
.p-feature-list li::before {
    content: ""; position: absolute; left: 0; top: .55rem; width: 16px; height: 16px;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2315803d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
}
.p-more { margin-top: .35rem; }
.p-more > summary {
    cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--brand); list-style: none;
}
.p-more > summary::-webkit-details-marker { display: none; }
.p-more > summary::after { content: " →"; }
.p-more[open] > summary::after { content: " ↑"; }

.p-includes { margin-top: 2rem; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.p-includes h3 { font-size: 1rem; }
.p-includes ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.p-includes li { position: relative; padding-left: 1.5rem; font-size: .9rem; color: var(--ink-soft); }
.p-includes li::before {
    content: ""; position: absolute; left: 0; top: .5rem; width: 14px; height: 14px;
    background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231d4ed8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- tabel banding */
.p-table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.p-table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .92rem; }
.p-table th, .p-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.p-table thead th { background: var(--bg-alt); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); position: sticky; top: 0; }
.p-table tbody tr:last-child td { border-bottom: 0; }
.p-table td.p-yes { color: var(--ok); font-weight: 700; }
.p-table td.p-no { color: var(--muted); }
.p-table__section td { background: var(--brand-light); font-weight: 700; color: var(--brand-dark); font-size: .85rem; }

/* ---------------------------------------------------------------- faq */
.p-faq { max-width: 52rem; margin: 0 auto; }
.p-faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: .7rem; box-shadow: var(--shadow-sm); }
.p-faq summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.p-faq summary::-webkit-details-marker { display: none; }
.p-faq summary::after { content: "+"; color: var(--brand); font-weight: 700; font-size: 1.2rem; line-height: 1; }
.p-faq details[open] summary::after { content: "–"; }
.p-faq p { margin: .75rem 0 0; color: var(--ink-soft); font-size: .95rem; }

/* ---------------------------------------------------------------- cta & footer */
.p-cta { background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(1.75rem, 4vw, 3rem); display: grid; grid-template-columns: 1.4fr .6fr; gap: 1.5rem; align-items: center; }
.p-cta h2 { color: #fff; margin-bottom: .35rem; }
.p-cta p { color: #dbeafe; margin: 0; }
.p-cta__actions { display: flex; flex-direction: column; gap: .6rem; }

.p-footer { background: #0b1220; color: #cbd5e1; padding: 3rem 0 1.5rem; margin-top: clamp(3rem, 6vw, 5rem); }
.p-footer a { color: #e2e8f0; }
.p-footer h3 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .9rem; }
.p-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2rem; }
.p-footer ul { list-style: none; margin: 0; padding: 0; }
.p-footer li { margin-bottom: .5rem; font-size: .92rem; }
.p-footer .p-brand { color: #fff; }
.p-footer__brand-text { font-size: .9rem; color: #94a3b8; max-width: 24rem; }
.p-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 2rem; padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; font-size: .84rem; color: #94a3b8; }

/* ---------------------------------------------------------------- form kontak */
.p-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-sm); }

/* Kartu masuk dan daftar: satu kolom sempit di tengah. Judulnya sendiri, bukan judul hero,
   jadi ukurannya ditahan supaya tidak memenuhi kartu di layar kecil. */
.p-auth { max-width: 26rem; margin: 0 auto; }
.p-auth h1 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: .35rem; }
.p-field { margin-bottom: 1rem; }
.p-field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .35rem; color: var(--ink-soft); }
.p-field input, .p-field textarea {
    width: 100%; font: inherit; font-size: .95rem; color: var(--ink);
    padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
/* A checkbox and a radio are choices, not text fields: the field-wide box above stretched them to
   the full width of the row, which pushed their own label to the right edge and wrapped it into a
   narrow column instead of setting it beside the tick. */
.p-field input[type="checkbox"], .p-field input[type="radio"] {
    width: auto; flex: 0 0 auto; padding: 0; border: 0; border-radius: 0; background: none;
}
.p-field textarea { min-height: 140px; resize: vertical; }
.p-field input:focus, .p-field textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.p-field__error { display: block; color: var(--promo); font-size: .82rem; margin-top: .25rem; }
.p-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.p-alert { border-radius: var(--radius); padding: .9rem 1.1rem; font-size: .93rem; margin-bottom: 1.25rem; border: 1px solid transparent; }
.p-alert--ok { background: var(--ok-soft); color: #14532d; border-color: #bbf7d0; }
.p-alert--err { background: var(--promo-soft); color: #7f1d1d; border-color: #fecaca; }
.p-alert--warn { background: #fffbeb; color: #78350f; border-color: #fde68a; }

/* ASP.NET's tag helper stamps `validation-summary-valid` on the summary while there is nothing to
   report, but the element keeps the error panel's own class - so the form opened with an empty red
   box above it. The framework's own site.css hides that state; the portal loads no site.css, so it
   has to say so itself. The summary's list is inside the panel and needs no bullet or indent. */
.p-alert.validation-summary-valid { display: none; }
.p-alert ul { margin: 0; padding: 0; list-style: none; }
.p-alert li + li { margin-top: .3rem; }

.p-contact-list { list-style: none; margin: 0; padding: 0; }
.p-contact-list li { display: flex; gap: .75rem; margin-bottom: 1rem; align-items: flex-start; }
.p-contact-list__icon { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; background: var(--brand-light); color: var(--brand); display: grid; place-items: center; }
.p-contact-list__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
    .p-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .p-cta { grid-template-columns: 1fr; }
    .p-includes ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .p-hero__grid { grid-template-columns: 1fr; }
    .p-hero__visual { order: -1; max-width: 520px; }
    .p-hero__panel { position: static; width: auto; margin: 1rem 0 0; }
    .p-trust__row { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
    .p-grid--3 { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
    .p-burger { display: flex; }
    .p-nav {
        position: fixed; inset: 68px 0 auto 0; z-index: 60;
        background: #fff; border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
        flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 20px 1.5rem;
        margin: 0; max-height: calc(100vh - 68px); overflow-y: auto;
        transform: translateY(-12px); opacity: 0; visibility: hidden; transition: all .18s ease;
    }
    .p-nav[data-open="true"] { transform: none; opacity: 1; visibility: visible; }
    .p-nav__links { flex-direction: column; align-items: stretch; gap: .25rem; }
    .p-nav__link { display: block; padding: .7rem .25rem; border-bottom: 1px solid var(--line); font-size: 1rem; }
    .p-nav__actions { flex-direction: column; align-items: stretch; margin-top: 1rem; }
    .p-nav__actions .p-btn { width: 100%; }
    .p-lang { justify-content: center; }
    .p-dropdown__menu { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; padding: 0 0 0 .5rem; }
    .p-dropdown[data-open="false"] .p-dropdown__menu { display: none; }
}

@media (max-width: 720px) {
    /* Empat pilihan siklus di dalam pil membungkus jadi tiga baris dengan sisi kanan kosong.
       Di layar sempit tumpuk jadi daftar selebar kolom - bentuk yang sama dengan
       `.p-cycles--stacked` di atas, hanya di sini yang memicunya lebar layar. */
    .p-cycles { display: flex; flex-direction: column; width: 100%; gap: .3rem; border-radius: var(--radius-lg); }
    .p-cycles__btn { justify-content: flex-start; text-align: left; min-height: 44px; padding: .6rem .85rem; border-radius: var(--radius); }

    /* minmax(0, ...) and not a bare 1fr: a bare fr track never shrinks below its content's
       min-content width, so a card whose text is wider than the column pushed the whole page
       sideways - a phone showed a horizontal scrollbar on the pricing section. */
    .p-plan-grid { grid-template-columns: minmax(0, 1fr); }
    .p-grid--2, .p-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .p-includes ul { grid-template-columns: 1fr; }
    .p-footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .p-hero__actions .p-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}