/* ═══════════════════════════════════════════════════════════════════════
   /penawaran — "Amber Terminal", mengikuti bahasa visual BERANDA
   ═══════════════════════════════════════════════════════════════════════
   CSS biasa, bukan Tailwind. Dipakai penawaran.blade.php dan
   penawaran-sukses.blade.php.

   BERBEDA dari lima halaman platform: berkas ini MEMUAT home-v2.css lebih
   dulu dan hidup di dalam .sc2, persis pola yang dipakai /tentang. Token,
   tipografi, tombol, lencana, kotak ikon, dan kerangka penutup dipinjam
   dari sana; di sini hanya ditambahkan bentuk yang khas halaman formulir.

   Karena itu seluruh aturan .sc2 ikut berlaku, termasuk yang paling
   menentukan rupanya: JetBrains Mono untuk judul maupun teks isi, dan
   "border-radius: 0" pada semua keturunannya. Jangan menambahkan sudut
   membulat di sini, itu akan bertabrakan dengan beranda.

   Semua kelas berawalan "pn-".
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Hero ─────────────────────────────────────────────────────────────
   Hero beranda setinggi layar penuh dan dipimpin video. Di halaman
   formulir itu keliru: isian utamanya harus terlihat tanpa menggulir
   sejauh itu. Jadi hero di sini memakai kerangka yang sama (kicker
   bergaris, judul besar, bilah angka di kaki) tapi tingginya mengikuti
   isinya saja. 66px adalah tinggi bilah navigasi tetap di chrome-v2.css. */

.pn-hero {
    position: relative;
    overflow: hidden;
    padding: calc(66px + clamp(38px, 5.5vw, 74px)) var(--pad-x) clamp(40px, 4.6vw, 66px);
    border-bottom: 1px solid var(--line);
}

/* Dua lapis latar, keduanya hiasan dan tidak menangkap pointer: kisi
   garis tipis dan pijar amber di bahu kiri atas. Keduanya CSS murni,
   tidak ada gambar yang perlu diunggah. */
.pn-hero__grid,
.pn-hero__glow { position: absolute; inset: 0; pointer-events: none; }
.pn-hero__grid {
    background-image:
        linear-gradient(rgba(242, 239, 234, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242, 239, 234, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(72% 76% at 22% 0%, #000, transparent 76%);
    mask-image: radial-gradient(72% 76% at 22% 0%, #000, transparent 76%);
}
.pn-hero__glow { background: radial-gradient(52% 58% at 18% -8%, rgba(245, 160, 27, .16), transparent 64%); }

.pn-hero__inner { position: relative; max-width: 1280px; margin: 0 auto; }

.pn-kicker { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pn-kicker__rule { flex: 1; max-width: 120px; height: 1px; background: var(--line); }

/* Judul kiri, kalimat pengantar rata kanan — ritme yang sama dengan hero
   beranda. Di bawah 900px keduanya menumpuk dan pengantarnya rata kiri. */
.pn-hero__head {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 3vw, 40px);
    justify-content: space-between;
    align-items: flex-end;
    margin-top: clamp(22px, 2.6vw, 34px);
}
.pn-hero__h1 {
    margin: 0;
    font-size: clamp(30px, 4.9vw, 68px);
    line-height: 1.07;
    letter-spacing: -.035em;
    font-weight: 500;
    max-width: 18ch;
    color: var(--paper);
}
.pn-hero__h1 span { display: block; color: var(--amber); }
.pn-hero__sub {
    flex: 0 1 52ch;
    margin: 0;
    text-align: right;
    text-wrap: balance;
    font-size: clamp(11.5px, 1vw, 13px);
    line-height: 1.85;
    color: var(--dim);
}

.pn-hero__rule { height: 1px; background: var(--line); margin-top: clamp(28px, 3.4vw, 44px); }

.pn-hero__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 46px;
    align-items: center;
    justify-content: space-between;
    margin-top: clamp(18px, 2vw, 26px);
}
.pn-facts { display: flex; align-items: center; gap: clamp(18px, 3vw, 46px); flex-wrap: wrap; }
.pn-fact { display: flex; align-items: baseline; gap: 9px; }
.pn-fact__n { font: 700 clamp(16px, 1.7vw, 23px)/1 var(--mono); letter-spacing: -.03em; color: var(--amber); }
.pn-fact__l {
    font: 500 8.5px/1.4 var(--mono);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--faint);
}
.pn-hero__trust {
    margin: 0;
    text-align: right;
    font: 500 9px/1.7 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
}

@media (max-width: 899px) {
    .pn-hero__head { flex-direction: column; align-items: flex-start; }
    .pn-hero__sub { text-align: left; flex-basis: auto; }
    .pn-hero__trust { text-align: left; }
}
@media (max-width: 599px) {
    .pn-facts { gap: 16px; width: 100%; justify-content: space-between; }
    .pn-fact { flex-direction: column; align-items: flex-start; gap: 4px; }
    .pn-fact__l { font-size: 7.5px; letter-spacing: .1em; }
    .pn-hero__grid { background-size: 52px 52px; }
}

/* ─── Kerangka formulir ────────────────────────────────────────────────
   Satu kisi dua lajur yang dijahit garis 1px: isian di kiri, rail
   ringkasan di kanan. Jahitannya dibuat dari "gap: 1px" di atas alas
   --line, bukan border per panel, supaya tidak ada garis ganda di
   persimpangan. Polanya sama dengan .sc2-cards di beranda. */

.pn-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}
.pn-col { display: flex; flex-direction: column; gap: 1px; background: var(--line); min-width: 0; }
.pn-block { background: var(--ink); padding: clamp(24px, 3vw, 38px); }

/* Di bawah 1080px rail turun ke bawah isian. Nilainya dipilih dari lebar
   tempat lajur kanan 372px mulai memaksa lajur isian lebih sempit dari
   ~600px, yang membuat baris layanan mulai pecah tidak karuan. */
@media (max-width: 1079px) {
    .pn-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Nomor bagian: angka amber lalu garis yang mengisi sisa baris. Sama
   dengan .sc2-card__num di beranda, ditulis ulang di sini karena
   dipakai pada <div> biasa, bukan di dalam .sc2-card. */
.pn-num {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 12px/1 var(--mono);
    letter-spacing: .1em;
    color: var(--amber);
}
.pn-num::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.pn-block__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 18px;
}
.pn-block__h { margin: 0; }
.pn-block__note {
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}
/* Pesan galat memakai warna sinyal yang sama dengan bilah "kredensial"
   di konsep, bukan merah peramban. */
.pn-block__note--bad { color: #ef5b4c; }

/* ─── Isian ────────────────────────────────────────────────────────── */

.pn-fields { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.pn-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 599px) { .pn-pair { grid-template-columns: minmax(0, 1fr); } }

.pn-field { display: flex; flex-direction: column; gap: 8px; }
.pn-label {
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dimmer);
}
.pn-label span { color: var(--amber); }

.pn-input {
    width: 100%;
    padding: 13px 15px;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: -.01em;
    outline: none;
    transition: border-color .25s ease, background .25s ease;
}
.pn-input::placeholder { color: rgba(242, 239, 234, .30); }
.pn-input:hover { border-color: rgba(242, 239, 234, .26); }
.pn-input:focus { border-color: var(--amber); background: var(--raise); }
textarea.pn-input { min-height: 128px; resize: vertical; line-height: 1.75; }

.pn-err {
    margin: 0;
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #ef5b4c;
}

/* ─── Baris layanan ────────────────────────────────────────────────────
   Bentuknya meminjam .sc2-row milik beranda: nomor amber di kiri, kotak
   ikon 38px, nama, keterangan, lalu penanda pilih di kanan. Bedanya baris
   ini bukan tautan melainkan <label> yang mengendalikan checkbox, jadi
   papan ketik tetap bisa memilihnya tanpa JavaScript. */

.pn-svcs { margin-top: 26px; border-top: 1px solid var(--line); }

.pn-svc {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(14px, 2vw, 24px);
    align-items: flex-start;
    padding: clamp(18px, 2.2vw, 24px) clamp(6px, 1vw, 12px);
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: background .25s ease, padding-left .25s ease;
}
.pn-svc:hover { background: var(--panel); padding-left: 22px; }
.pn-svc.is-on { background: var(--panel); }
.pn-svc.is-on:hover { background: var(--raise); }

.pn-svc__num {
    flex: none;
    width: 52px;
    font: 700 13px/1.6 var(--mono);
    letter-spacing: .06em;
    color: var(--faint);
    transition: color .25s ease;
}
.pn-svc.is-on .pn-svc__num { color: var(--amber); }

.pn-svc__head { flex: 1 1 250px; min-width: 210px; display: flex; align-items: center; gap: 14px; }

/* Kotak ikon. icon_svg di basis data membawa class="w-7 h-7" dan
   stroke="#F9A020" bawaan tema lama; keduanya ditimpa di sini. Aturan CSS
   selalu mengalahkan atribut presentasi, jadi tidak perlu menyunting
   isinya di PHP dan data produksi tetap utuh. */
.pn-svc__ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(242, 239, 234, .20);
    color: var(--amber);
    transition: border-color .25s ease, background .25s ease;
}
.pn-svc__ico svg { width: 18px; height: 18px; stroke: currentColor; }
.pn-svc:hover .pn-svc__ico,
.pn-svc.is-on .pn-svc__ico { border-color: rgba(245, 160, 27, .5); background: rgba(245, 160, 27, .07); }

.pn-svc__name {
    font-size: clamp(13.5px, 1.4vw, 15px);
    line-height: 1.3;
    letter-spacing: -.02em;
    font-weight: 500;
    color: rgba(242, 239, 234, .72);
    transition: color .25s ease;
}
.pn-svc.is-on .pn-svc__name { color: var(--paper); }

.pn-svc__desc { flex: 2 1 300px; min-width: 240px; font-size: 13px; line-height: 1.7; color: var(--dim); }

.pn-svc__end { flex: none; margin-left: auto; padding-top: 2px; }
.pn-box {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--line-strong);
    transition: border-color .25s ease, background .25s ease;
}
.pn-box svg { width: 13px; height: 13px; opacity: 0; transition: opacity .2s ease; }
.pn-svc.is-on .pn-box { border-color: var(--amber); background: var(--amber); }
.pn-svc.is-on .pn-box svg { opacity: 1; }

/* Papan ketik: checkbox aslinya disembunyikan tanpa dilepas dari alur
   fokus, jadi Tab tetap sampai ke sini dan Spasi tetap memilih. */
.pn-svc__cb {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.pn-svc__cb:focus-visible + .pn-svc { outline: 2px solid var(--amber); outline-offset: -2px; }

/* Di lajur sempit nomor 52px menyisakan sisa yang terlalu kurus, dan
   keterangan lebih enak dibaca di bawah namanya. */
@media (max-width: 599px) {
    .pn-svc { gap: 12px; }
    .pn-svc__num { width: 34px; font-size: 12px; }
    .pn-svc__head { flex: 1 1 100%; min-width: 0; }
    .pn-svc__desc { flex: 1 1 100%; min-width: 0; padding-left: 46px; font-size: 12px; }
    .pn-svc__end { position: absolute; right: 0; }
    .pn-svc { position: relative; padding-right: 34px; }
    .pn-svc:hover { padding-left: 12px; }
}

/* Bilah produk yang muncul saat layanan berproduk dipilih. */
.pn-prods {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    padding: clamp(16px, 2vw, 22px) clamp(6px, 1vw, 14px);
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}
.pn-prods__l {
    font: 500 9.5px/1.5 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}
.pn-prods__list { display: flex; flex-wrap: wrap; gap: 7px; }

/* ─── Kaki kirim ───────────────────────────────────────────────────── */

.pn-send {
    background: var(--panel);
    padding: clamp(22px, 2.4vw, 30px) clamp(24px, 3vw, 38px);
    display: flex;
    flex-wrap: wrap;
    gap: 16px 26px;
    align-items: center;
    justify-content: space-between;
}
.pn-send__note {
    margin: 0;
    font: 500 9px/1.7 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
}
@media (max-width: 599px) {
    .pn-send { flex-direction: column; align-items: stretch; }
    .pn-send .sc2-btn { width: 100%; }
}

/* ─── Rail kanan ───────────────────────────────────────────────────── */

.pn-rail { display: flex; flex-direction: column; gap: 1px; background: var(--line); }
.pn-panel { background: var(--ink); padding: clamp(24px, 2.6vw, 30px); }
.pn-panel--lit { background: var(--panel); }

.pn-panel__k {
    display: block;
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dimmer);
}
.pn-panel__k--amber { color: var(--amber); }

.pn-sum__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pn-sum__count { display: flex; align-items: baseline; gap: 8px; }
.pn-sum__n { font: 700 clamp(24px, 2.4vw, 30px)/1 var(--mono); letter-spacing: -.03em; color: var(--paper); }
.pn-sum__u {
    font: 500 8.5px/1.4 var(--mono);
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--faint);
}

.pn-sum__body { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.pn-sum__empty { margin: 0; font-size: 13px; line-height: 1.75; color: var(--faint); }
.pn-sum__list { list-style: none; margin: 0; padding: 0; }
.pn-sum__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(242, 239, 234, .80);
}
.pn-sum__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.pn-sum__list b { flex: none; font: 700 11px/1.6 var(--mono); font-weight: 700; color: var(--amber); }

/* Tiga langkah setelah kirim. */
.pn-steps { list-style: none; margin: 22px 0 0; padding: 0; }
.pn-steps li {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--dim);
}
.pn-steps li:first-child { padding-top: 0; }
.pn-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.pn-steps b { flex: none; width: 26px; font: 700 13px/1.5 var(--mono); font-weight: 700; color: var(--amber); }

/* Dua tautan kontak. */
.pn-contact { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.pn-contact a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--line-strong);
    color: var(--paper);
    font: 500 11px/1.4 var(--mono);
    letter-spacing: .1em;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.pn-contact a:hover { background: rgba(242, 239, 234, .08); border-color: rgba(242, 239, 234, .45); color: var(--paper); }
.pn-contact svg { flex: none; width: 16px; height: 16px; color: var(--amber); }
.pn-hours {
    margin: 18px 0 0;
    font: 500 9px/1.7 var(--mono);
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
}

/* ─── Halaman sukses ───────────────────────────────────────────────────
   Ringkasan permintaan ditulis sebagai baris label dan nilai, bukan
   kartu. Bentuknya sejalan dengan lembar spesifikasi di halaman platform
   dan dengan daftar baris di beranda. */

.pn-recap { border-top: 1px solid var(--line); }
.pn-recap__row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px clamp(18px, 2.6vw, 34px);
    align-items: flex-start;
    padding: clamp(18px, 2.2vw, 22px) clamp(6px, 1vw, 12px);
    border-bottom: 1px solid var(--line);
}
.pn-recap__l {
    flex: none;
    width: clamp(120px, 14vw, 168px);
    font: 500 9.5px/1.6 var(--mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
}
.pn-recap__v { flex: 1 1 300px; min-width: 220px; font-size: 14px; line-height: 1.6; color: var(--paper); }
.pn-recap__v--soft { font-size: 13px; line-height: 1.75; color: var(--dim); }
.pn-recap__tags { flex: 1 1 300px; min-width: 220px; display: flex; flex-wrap: wrap; gap: 7px; }
@media (max-width: 479px) {
    .pn-recap__l { width: 100%; }
}

/* Cap sukses di hero halaman terima kasih. */
.pn-stamp {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(245, 160, 27, .35);
    background: rgba(245, 160, 27, .07);
    color: var(--amber);
    margin-bottom: clamp(20px, 2.4vw, 30px);
}
.pn-stamp svg { width: 28px; height: 28px; }