/* TUKUVA - satu file pengaturan tampilan (Master Blueprint v2 bagian 17).
   Semua ukuran memakai lebar layar acuan 390 px (1 unit = 8 px). Kanvas gambar acuan 848 x 1854. */
@font-face{font-family:Mulish;src:url(../font/Mulish.woff2) format("woff2");font-weight:200 1000;font-display:swap}
@font-face{font-family:GSans;src:url(../font/GoogleSansFlex-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:GSans;src:url(../font/GoogleSansFlex-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:GSans;src:url(../font/GoogleSansFlex-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(../font/Nunito-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url(../font/Nunito-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Nunito;src:url(../font/Nunito-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Nunito;src:url(../font/Nunito-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Nunito;src:url(../font/Nunito-900.woff2) format("woff2");font-weight:900;font-display:swap}
:root{
  --tinta:#8B5733; --tinta-lembut:#A5876C; --tinta-gelap:#5E3A20;
  --terracotta:#D97B56; --sage:#7F9A72; --krem:#F4EBDD;
  --kaca:rgba(255,250,242,.42); --garis-kaca:rgba(255,255,255,.78);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:Mulish,system-ui,sans-serif;background:#efe3d2;color:var(--tinta);display:flex;justify-content:center;align-items:flex-start;min-height:100vh;min-height:100dvh;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* kanvas layar HP: semua posisi dalam satuan --p (1/848 lebar layar) */
.layar{--lebar:min(100vw,480px,calc(100vh*848/1854));position:relative;width:var(--lebar);aspect-ratio:848/1854;font-size:calc(var(--lebar)*1.875/48.75);container-type:inline-size;
  background:#efe3d2 center/100% 100% no-repeat;overflow:hidden}
.layar{--p:calc(100cqw/848);--u:calc(100cqw/48.75)} /* --u = 8 px pada lebar 390 */
.mutlak{position:absolute}

/* tipografi (bagian 17) */
.judul{font-size:calc(var(--u)*2.75);font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.sub{font-size:calc(var(--u)*2.125);font-weight:700}
.isi{font-size:calc(var(--u)*1.875)}
.isi,.layar{line-height:1.6;font-weight:500}
.ket{font-size:calc(var(--u)*1.625);color:var(--tinta-lembut);font-weight:500}
.kode{font-weight:700;text-transform:uppercase;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ukir{color:var(--tinta);text-shadow:0 1px 0 rgba(255,249,240,.9),0 -1px 0 rgba(70,35,12,.22)}
.timbul{color:var(--tinta);text-shadow:-1px -1px 0 rgba(255,250,242,.9),2px 3px 4px rgba(95,55,25,.35)}
.wm{display:inline-block;height:.82em;vertical-align:-.06em;color:var(--tinta)}
.wm svg{height:100%;width:auto;display:block}

/* kaca */
.kaca{background:var(--kaca);-webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);
  border:1.5px solid var(--garis-kaca);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 12px 30px rgba(120,80,40,.13);border-radius:calc(var(--p)*44)}
.kartu{background:rgba(255,250,242,.38);border:1px solid rgba(255,255,255,.7);border-radius:calc(var(--u)*2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 4px 14px rgba(120,80,40,.08);padding:calc(var(--u)*2)}
.cekung{background:rgba(236,224,207,.55);border:1px solid rgba(255,255,255,.55);border-radius:calc(var(--u)*6);
  box-shadow:inset 2px 3px 6px rgba(120,80,40,.22),inset -2px -2px 5px rgba(255,255,255,.7);
  padding:0 calc(var(--u)*2);height:calc(var(--u)*6);width:100%;outline:none}
.cekung::placeholder{color:var(--tinta-lembut)}
.tombol{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*1);height:calc(var(--u)*6);border-radius:calc(var(--u)*6);
  border:0;background:linear-gradient(180deg,#a8704a,#7a4a2a);color:#fff6ec;font-weight:700;width:100%;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,220,190,.45),0 6px 14px rgba(110,60,25,.28)}
.tombol.kedua{background:rgba(255,250,242,.55);color:var(--tinta);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(110,60,25,.12)}
.tombol.kecil{height:calc(var(--u)*4.5);font-size:calc(var(--u)*1.625);width:auto;padding:0 calc(var(--u)*2.5)}
.tombol:disabled{opacity:.45}
.baris{display:flex;gap:calc(var(--u)*2);align-items:center}
.tumpuk>*+*{margin-top:calc(var(--u)*2)}
.antara{justify-content:space-between}

/* panel isi yang bisa digulir */
.panel-isi{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:calc(var(--u)*3)}
.panel-isi::-webkit-scrollbar{display:none}
.daftar>a,.daftar>div.item{display:flex;align-items:center;gap:calc(var(--u)*1.5)}
.daftar>*+*{margin-top:calc(var(--u)*1.5)}
.ikon-bulat{width:calc(var(--u)*5.5);height:calc(var(--u)*5.5);border-radius:50%;flex:none;object-fit:cover}
.ikon-kotak{width:calc(var(--u)*5.5);height:calc(var(--u)*5.5);border-radius:calc(var(--u)*1.5);flex:none;object-fit:cover}
.lencana{display:inline-block;padding:0 calc(var(--u)*1.2);border-radius:99px;background:rgba(139,87,51,.12);font-size:calc(var(--u)*1.5);font-weight:700}
.lencana.merah{background:#c9342a;color:#fff}
.titik-merah{position:absolute;width:calc(var(--p)*44);height:calc(var(--p)*44);border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6b5c,#c9241a);
  border:2px solid #fff3e8;color:#fff;font-weight:800;font-size:calc(var(--p)*22);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(120,20,10,.35)}
.uji{position:fixed;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 2px);z-index:50;background:#5e3a20;color:#fff6ec;border-radius:99px;
  font:600 10px/1 Mulish,sans-serif;padding:5px 9px;opacity:.55;pointer-events:none;white-space:nowrap}
.pesan-kilat{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:rgba(90,50,24,.94);color:#fff1de;
  border-radius:40px;padding:12px 22px;font:600 14px Mulish,sans-serif;opacity:0;transition:.25s;z-index:60;pointer-events:none;max-width:88vw;text-align:center}
.pesan-kilat.on{opacity:1;transform:translate(-50%,0)}
.hot{position:absolute;border:0;background:transparent;cursor:pointer;border-radius:calc(var(--p)*30)}
.hot:focus-visible{outline:3px solid rgba(185,98,47,.6)}
.tersembunyi{display:none!important}
.galat{color:#a3321f;font-weight:700}
label.cek{display:flex;align-items:center;gap:calc(var(--u)*1);cursor:pointer}
input[type=checkbox]{accent-color:#8B5733;width:calc(var(--u)*2.2);height:calc(var(--u)*2.2)}
.mengetik::after{content:"";display:inline-block;width:.08em;height:1em;background:var(--tinta);margin-left:.05em;vertical-align:-.12em;animation:kedip 1s steps(1) infinite}
@keyframes kedip{50%{opacity:0}}
@keyframes denyut{0%{box-shadow:0 0 0 0 rgba(217,123,86,.55)}100%{box-shadow:0 0 0 calc(var(--p)*40) rgba(217,123,86,0)}}
.denyut{animation:denyut 1.6s ease-out 1}

/* halaman isi yang digulir */
.gulir-isi{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gulir-isi::-webkit-scrollbar{display:none}
.gulir-isi>*+*{margin-top:calc(var(--u)*2)}
.kv{display:grid;grid-template-columns:fit-content(55%) minmax(0,1fr);gap:calc(var(--u)*.5) calc(var(--u)*2);font-size:calc(var(--u)*1.75)}
.kv dt{color:var(--tinta-lembut);font-weight:600}
.kv dd{font-weight:700;word-break:break-word}
.medan{display:block}
.medan>span{display:block;font-size:calc(var(--u)*1.625);font-weight:700;margin-bottom:calc(var(--u)*.5)}
.medan+.medan{margin-top:calc(var(--u)*2)}
select.cekung,textarea.cekung{appearance:none}
textarea.cekung{height:auto;min-height:calc(var(--u)*10);padding:calc(var(--u)*1.5) calc(var(--u)*2);border-radius:calc(var(--u)*2)}
.ketuk{display:flex;gap:calc(var(--u)*.75);flex-wrap:wrap}
.ketuk input,.pilih input{position:absolute;opacity:0;pointer-events:none}
.ketuk span{display:flex;align-items:center;justify-content:center;min-width:calc(var(--u)*5);height:calc(var(--u)*5);border-radius:50%;
  background:rgba(255,250,242,.55);border:1px solid rgba(255,255,255,.8);font-weight:800;cursor:pointer;box-shadow:inset 0 1px 0 #fff}
.ketuk input:checked+span,.pilih input:checked+span{background:linear-gradient(180deg,#a8704a,#7a4a2a);color:#fff6ec}
.pilih{display:flex;gap:calc(var(--u)*1);flex-wrap:wrap}
.pilih span{display:inline-flex;align-items:center;padding:0 calc(var(--u)*2);height:calc(var(--u)*5);border-radius:99px;
  background:rgba(255,250,242,.55);border:1px solid rgba(255,255,255,.8);font-weight:700;cursor:pointer}
.lencana.st-aktif,.lencana.st-disetujui,.lencana.st-selesai{background:rgba(127,154,114,.22);color:#4d6b40}
.lencana.st-terkirim,.lencana.st-menunggu{background:rgba(217,123,86,.18);color:#a24f2c}
.lencana.st-kedaluwarsa,.lencana.st-tidak_disetujui,.lencana.st-dibatalkan,.lencana.st-lepas{background:rgba(120,90,70,.14)}
.tanda{display:inline-flex;align-items:center;gap:4px;font-size:calc(var(--u)*1.5);font-weight:700;color:#4d6b40}
.tanda::before{content:"✓";font-weight:900}
.tanda.belum{color:var(--tinta-lembut)}.tanda.belum::before{content:"–"}
.surat{background:rgba(255,253,248,.82);border-radius:calc(var(--u)*1.5);padding:calc(var(--u)*3);font-size:calc(var(--u)*1.75);line-height:1.6;
  box-shadow:inset 0 0 0 1px rgba(139,87,51,.12)}
.surat h2{font-size:calc(var(--u)*2.125);text-align:left;font-weight:800;text-transform:uppercase}
.surat p+p{margin-top:calc(var(--u)*1.25)}
.surat .isian{background:rgba(217,123,86,.16);border-radius:4px;padding:0 3px;font-weight:800}
.foto-bingkai{position:relative;aspect-ratio:4/3;border-radius:calc(var(--u)*1);overflow:hidden;background:#e6d6c2}
.foto-bingkai>img.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-bingkai.berbingkai>img.foto{left:5.5%;top:7.5%;width:89%;height:85%}
.foto-bingkai>img.bingkai{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}
.kartu-listing{display:grid;grid-template-columns:44% 1fr;gap:calc(var(--u)*1.5);align-items:start}
.galeri{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;border-radius:calc(var(--u)*1.5);scrollbar-width:none}
.galeri::-webkit-scrollbar{display:none}
.galeri img{flex:none;width:100%;aspect-ratio:4/3;object-fit:cover;scroll-snap-align:center;border-radius:calc(var(--u)*1.5)}
.garis-waktu{border-left:2px solid rgba(139,87,51,.25);padding-left:calc(var(--u)*2);margin-left:calc(var(--u)*.75)}
.garis-waktu>div{position:relative}
.garis-waktu>div+div{margin-top:calc(var(--u)*1.5)}
.garis-waktu>div::before{content:"";position:absolute;left:calc(var(--u)*-2.6);top:.45em;width:calc(var(--u)*1.1);height:calc(var(--u)*1.1);border-radius:50%;background:var(--tinta)}
.garis-waktu>div.nanti::before{background:rgba(139,87,51,.25)}
.dua{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1.5)}
.terracotta{color:var(--terracotta)}.sage{color:var(--sage)}
.tombol.terracotta{background:linear-gradient(180deg,#e08b66,#bf6440);color:#fff}
.tombol.sage{background:linear-gradient(180deg,#93ad86,#6a865d);color:#fff}
.tombol.tidak{background:rgba(255,250,242,.6);color:#8b3a26;border:1px solid rgba(160,60,40,.35);box-shadow:none}
.nol{color:var(--tinta-lembut);font-style:italic}
hr.tipis{border:0;border-top:1px solid rgba(139,87,51,.18);margin:calc(var(--u)*2) 0}
#kartu-cari input[name=q]{opacity:0;pointer-events:none}
#kartu-cari.cari-on input[name=q]{opacity:1;pointer-events:auto}
#kartu-cari.cari-on .nama-atas{display:none}
.hot.aktif{background:rgba(255,250,242,.18)}
.panel-isi .kv{grid-template-columns:1fr;gap:0}
.panel-isi .kv dt{font-size:calc(var(--u)*1.375)}
.panel-isi .kv dd{margin-bottom:calc(var(--u)*.75)}
input[type=file].cekung{font-size:calc(var(--u)*1.5)}
input[type=file]::file-selector-button{border:0;border-radius:99px;background:rgba(139,87,51,.14);color:var(--tinta);font:700 13px Mulish,sans-serif;padding:6px 12px;margin-right:8px}
.tombol[aria-disabled]{opacity:.45}

/* layar pendek/lebar: kanvas menyesuaikan tinggi layar; sisi kiri-kanan diisi latar yang sama, dilembutkan */
/* Sisi kiri-kanan saat layar lebih lebar dari kanvas: warna polos lembut, bukan salinan gambar (dulu tampak seperti 2 kaca) */
body::before{content:"";position:fixed;inset:0;background:radial-gradient(ellipse at 50% 40%,#f6ece0 0%,#efe3d2 55%,#e8d9c5 100%);z-index:-1}
.layar{box-shadow:0 0 40px rgba(120,80,40,.12)}
@media (min-aspect-ratio:3/4){body::before{background:url(../img/latar-listing.jpg) center/cover no-repeat;filter:blur(3px);opacity:.75}}
@supports (height:100dvh){.layar{--lebar:min(100vw,480px,calc(100dvh*848/1854))}}
/* pembaca dokumen di perangkat */
.tirai-baca{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:24px}
.tirai-baca .kaca{width:min(340px,100%);padding:22px 20px;border-radius:22px;text-align:center;color:#fff}
.tirai-baca .tb-judul{font-weight:700;font-size:17px}
.tirai-baca .tb-teks{font-size:13px;opacity:.85;margin-top:6px;min-height:1.2em}
.tirai-baca .tb-bar{height:8px;border-radius:8px;background:rgba(255,255,255,.18);margin-top:14px;overflow:hidden}
.tirai-baca .tb-bar i{display:block;height:100%;width:3%;border-radius:8px;background:linear-gradient(90deg,#f5c96a,#e9a73b);transition:width .3s}
.tirai-baca .tb-ket{font-size:11.5px;opacity:.7;margin-top:12px;line-height:1.4}
/* tombol suara melodi sambutan */
.tombol-suara{position:absolute;top:calc(var(--u,8px)*1.6);right:calc(var(--u,8px)*1.6);z-index:40;width:calc(var(--u,8px)*4.6);height:calc(var(--u,8px)*4.6);border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(255,250,242,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#8B5733;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;box-shadow:0 4px 14px rgba(90,50,20,.12)}
.tombol-suara svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tombol-suara svg path:first-child{fill:currentColor;fill-opacity:.15}

/* ===== halaman awal mengikuti desain Peter (gambar desain = latar, isi diletakkan persis di atasnya) ===== */
.d-teks{position:absolute;white-space:pre-line;margin:0;color:rgb(150,106,76);text-shadow:0 1px 0 rgba(255,248,236,.85),0 2px 3px rgba(90,50,20,.28)}
.d-gs{font-family:GSans,Mulish,sans-serif}.d-nu{font-family:Nunito,Mulish,sans-serif}
.d-hot{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:calc(var(--p)*28)}
.d-hot:active{background:rgba(125,74,43,.12)}
.d-hot:focus-visible{outline:3px solid #a97550;outline-offset:2px}
.d-gambar{position:absolute;display:block;transition:opacity .5s}
.d-masukan{position:absolute;border:0;background:transparent;outline:none;padding:0;font-family:GSans,Mulish,sans-serif;font-weight:500;color:rgb(122,77,44)}
.d-masukan::placeholder{color:rgb(165,116,79);opacity:1}
.d-cek{position:absolute;border-radius:calc(var(--p)*9);background:#f5e9d8;border:calc(var(--p)*3) solid rgb(160,112,78);box-shadow:inset 0 1px 3px rgba(90,50,20,.25);pointer-events:none}
.d-pesan{position:absolute;text-align:center;font-family:GSans,Mulish,sans-serif;font-weight:500;color:rgb(122,77,44)}
.d-pesan.galat{color:#b4472a}
.d-tanda{position:absolute;border-radius:calc(var(--p)*20);background:rgba(125,74,43,.9);color:#fff6ec;font:700 calc(var(--p)*22) GSans,Mulish,sans-serif;padding:calc(var(--p)*4) calc(var(--p)*14);pointer-events:none}
#gulir-syarat{--t:0;position:absolute;left:0;width:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--t)*var(--p)),#000 calc(var(--t)*var(--p) + var(--p)*56),#000 calc(100% - var(--p)*86),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent calc(var(--t)*var(--p)),#000 calc(var(--t)*var(--p) + var(--p)*56),#000 calc(100% - var(--p)*86),transparent 100%)}
#gulir-syarat::-webkit-scrollbar{display:none}
.d-syarat{position:relative;width:100%;font-family:GSans,Mulish,sans-serif;color:rgb(150,106,76);text-shadow:0 1px 0 rgba(255,248,236,.85),0 2px 3px rgba(90,50,20,.28)}
.d-syarat .pembuka{margin-left:calc(var(--p)*176);font-size:calc(var(--p)*25);line-height:1.45;font-weight:500}
.d-syarat .judul-besar{margin:calc(var(--p)*44) 0 0 calc(var(--p)*176);font-size:calc(var(--p)*29);font-weight:400}
.d-syarat .pembatas{display:block;margin:calc(var(--p)*16) 0 0 calc(var(--p)*180);width:calc(var(--p)*495)}
.d-syarat h3{margin:calc(var(--p)*48) 0 calc(var(--p)*10);text-align:center;font-size:calc(var(--p)*26);font-weight:700;letter-spacing:.06em;padding-left:calc(var(--p)*40)}
.d-syarat ol{margin:0;padding:0 0 0 calc(var(--p)*222);width:calc(var(--p)*663);list-style:none;counter-reset:n}
.d-syarat li{counter-increment:n;position:relative;margin-top:calc(var(--p)*22);font-size:calc(var(--p)*24.5);line-height:1.32;font-weight:500;text-align:justify;hyphens:auto}
.d-syarat li::before{content:counter(n) ".";position:absolute;left:calc(var(--p)*-36);font-weight:700}
.d-syarat li b{font-weight:700}
.d-syarat p.isi-p{margin:calc(var(--p)*22) 0 0 calc(var(--p)*186);width:calc(var(--p)*477);font-size:calc(var(--p)*24.5);line-height:1.32;font-weight:500;text-align:justify}
.d-syarat .wm svg{height:.82em;width:auto;vertical-align:-.08em}
.d-syarat .kaki-s{margin:calc(var(--p)*36) 0 0 calc(var(--p)*186);font-size:calc(var(--p)*24.5);line-height:1.35;font-weight:500}
.d-syarat .kaki-s b{font-weight:700}
.d-tombol-akhir{position:relative;height:calc(var(--p)*461);margin-top:calc(var(--p)*20)}
.d-tombol-akhir img{position:absolute;left:0;top:0;width:100%;transition:opacity .4s}
#d-petunjuk{position:absolute;left:0;width:100%;text-align:center;font:600 calc(var(--p)*24) GSans,Mulish,sans-serif;color:#a5744f;letter-spacing:.02em;transition:opacity .3s;pointer-events:none;text-shadow:0 1px 0 #fff7e8}
#d-petunjuk{display:flex;flex-direction:column;align-items:center;gap:0;font-size:calc(var(--p)*26);left:50%;width:auto;transform:translateX(-50%);padding:calc(var(--p)*6) calc(var(--p)*26) calc(var(--p)*2);border-radius:calc(var(--p)*30);background:rgba(251,243,230,.92);box-shadow:0 calc(var(--p)*4) calc(var(--p)*14) rgba(110,70,40,.18)}
#d-petunjuk b{font-size:calc(var(--p)*52);line-height:.6;animation:ayun 1.3s ease-in-out infinite}
@keyframes ayun{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(calc(var(--p)*12));opacity:1}}
#d-bayang{position:absolute;left:calc(var(--p)*118);width:calc(var(--p)*612);pointer-events:none;transition:opacity .3s;border-radius:0 0 calc(var(--p)*40) calc(var(--p)*40);
  background:linear-gradient(to bottom,rgba(120,80,45,0),rgba(120,80,45,.16));box-shadow:inset 0 calc(var(--p)*-18) calc(var(--p)*20) calc(var(--p)*-10) rgba(110,70,40,.22)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
input:checked+.d-cek{display:none}
.d-hot .sr{pointer-events:none}
.kartu-isi{font-family:GSans,Mulish,sans-serif;color:rgb(150,106,76)}
.kartu-isi .sub,.kartu-isi .isi,.kartu-isi .ket{font-family:inherit}
.kartu-isi .sub{font-size:calc(var(--p)*44);font-weight:700;line-height:1.25;text-shadow:0 1px 0 rgba(255,248,236,.85),0 2px 3px rgba(90,50,20,.28)}
.kartu-isi .isi{font-size:calc(var(--p)*29);line-height:1.45;font-weight:400}
/* daftar turun halaman awal (desain dropdown.jpg) */
.d-turun{border-radius:calc(var(--p)*28);padding:calc(var(--p)*8) 0 calc(var(--p)*8) calc(var(--p)*38);font-family:GSans,Mulish,sans-serif;color:rgb(112,72,44)}
.d-turun a{display:flex;align-items:center;justify-content:space-between;height:calc(var(--p)*60);font-size:calc(var(--p)*31);font-weight:500;padding-right:calc(var(--p)*32);position:relative}
.d-turun a+a::before{content:"";position:absolute;left:calc(var(--p)*-6);right:calc(var(--p)*82);top:0;border-top:calc(var(--p)*2) solid rgba(160,112,78,.28)}
.d-turun svg{width:calc(var(--p)*16);height:calc(var(--p)*27);color:rgb(125,82,52)}
.gelembung-pesan{position:absolute;pointer-events:none;z-index:3}
.gelembung-pesan img{position:absolute;inset:0;width:100%;height:100%}
.gelembung-pesan b{position:absolute;left:8%;top:6%;width:84%;height:76%;display:flex;align-items:center;justify-content:center;font-family:GSans,Mulish,sans-serif;font-weight:700;color:#fff;line-height:1;text-shadow:0 1px 2px rgba(90,0,0,.55)}
/* ===== panel dashboard mengikuti desain Peter (beranda/riwayat/jual/pesan/atur/panduan .jpg) ===== */
.pd{font-family:GSans,Mulish,sans-serif;color:rgb(150,104,72);font-size:calc(var(--p)*22);line-height:1.3;text-shadow:0 1px 0 rgba(255,248,236,.8),0 2px 3px rgba(90,50,20,.22)}
.pd b,.pd strong{font-weight:700}
.pd-judul{margin:calc(var(--p)*30) 0 calc(var(--p)*14);font-size:calc(var(--p)*21);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgb(140,94,62)}
.pd-judul:first-child{margin-top:calc(var(--p)*28)}
.pd-kartu{position:relative;display:block;background:linear-gradient(180deg,rgba(214,188,156,.30),rgba(226,204,176,.22));border:calc(var(--p)*2) solid rgba(255,250,242,.55);border-radius:calc(var(--p)*30);box-shadow:inset 0 calc(var(--p)*2) calc(var(--p)*6) rgba(255,255,255,.35),0 calc(var(--p)*3) calc(var(--p)*10) rgba(120,80,40,.10);padding:calc(var(--p)*20) calc(var(--p)*26);margin-top:calc(var(--p)*16)}
.pd-kartu:first-child{margin-top:0}
.pd-kartu.dgn-ikon{padding-left:calc(var(--p)*114);min-height:calc(var(--p)*116)}
.pd-ikon{position:absolute;left:calc(var(--p)*20);top:calc(var(--p)*30);width:calc(var(--p)*70);height:calc(var(--p)*70)}
.pd-ikon.besar{width:calc(var(--p)*90);height:calc(var(--p)*90);top:calc(var(--p)*38)}
.pd-t1{font-size:calc(var(--p)*28);font-weight:700;color:rgb(160,106,70);line-height:1.25}
.pd-t2{font-size:calc(var(--p)*21.5);line-height:1.33}
.pd-kode{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.pd-angka{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--p)*16);margin-top:calc(var(--p)*18)}
.pd-angka .pd-kartu{margin:0;padding:calc(var(--p)*16) calc(var(--p)*24)}
.pd-angka b{display:block;font-size:calc(var(--p)*36);line-height:1.15;color:rgb(160,106,70)}
.pd-chip-baris{display:flex;gap:calc(var(--p)*10);flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:calc(var(--p)*18)}
.pd-chip-baris::-webkit-scrollbar{display:none}
.pd-chip{flex:none;height:calc(var(--p)*46);padding:0 calc(var(--p)*18);border-radius:calc(var(--p)*23);border:calc(var(--p)*2) solid rgba(255,250,242,.6);background:rgba(220,198,170,.45);font:500 calc(var(--p)*21) GSans,Mulish,sans-serif;color:rgb(150,104,72);cursor:pointer;text-shadow:inherit}
.pd-chip.aktif{background:linear-gradient(180deg,#a2704b,#7d4d2c);color:#fff8ee;font-weight:700;text-shadow:0 1px 1px rgba(60,30,10,.4);border-color:rgba(255,255,255,.3)}
.pd-pil{position:absolute;right:calc(var(--p)*18);top:50%;transform:translateY(-50%);height:calc(var(--p)*50);padding:0 calc(var(--p)*24);border-radius:calc(var(--p)*25);display:flex;align-items:center;font-weight:700;font-size:calc(var(--p)*22);color:#fff8ee;background:linear-gradient(180deg,#a2704b,#7a4a2a);box-shadow:0 calc(var(--p)*3) calc(var(--p)*6) rgba(90,50,20,.3),inset 0 1px 0 rgba(255,255,255,.25);text-shadow:0 1px 1px rgba(60,30,10,.4);border:0;cursor:pointer}
.pd-pil.terang{background:linear-gradient(180deg,#fbf3e6,#ecdcc4);color:rgb(140,94,62);text-shadow:none;border:calc(var(--p)*2) solid rgba(255,255,255,.7)}
.pd-pil.bawah{top:auto;bottom:calc(var(--p)*14);transform:none;height:calc(var(--p)*44);font-size:calc(var(--p)*20);padding:0 calc(var(--p)*18)}
.pd-tombol{display:flex;align-items:center;justify-content:center;height:calc(var(--p)*74);border-radius:calc(var(--p)*37);background:linear-gradient(180deg,#a87650,#7a4a2a);color:#fff8ee;font-size:calc(var(--p)*28);font-weight:700;box-shadow:0 calc(var(--p)*4) calc(var(--p)*10) rgba(90,50,20,.3),inset 0 1px 0 rgba(255,255,255,.25);text-shadow:0 1px 1px rgba(60,30,10,.4);margin-bottom:calc(var(--p)*26);border:0;width:100%;cursor:pointer}
.pd-daftar{padding:calc(var(--p)*4) calc(var(--p)*26)}
.pd-baris{display:flex;align-items:center;justify-content:space-between;min-height:calc(var(--p)*76);font-size:calc(var(--p)*25);color:rgb(150,104,72);cursor:pointer;list-style:none;position:relative}
.pd-baris::-webkit-details-marker{display:none}
.pd-daftar>*+*{border-top:calc(var(--p)*2) solid rgba(170,125,90,.25)}
.pd-baris svg{width:calc(var(--p)*14);height:calc(var(--p)*24);flex:none;transition:transform .2s}
details[open]>.pd-baris svg{transform:rotate(90deg)}
.pd-isi-baris{padding:0 0 calc(var(--p)*20);font-size:calc(var(--p)*21)}
.pd-isi-baris .cekung{font-size:calc(var(--p)*23)}
.pd-pemberitahuan>*+*{border-top:calc(var(--p)*2) solid rgba(170,125,90,.25)}
.pd-pemberitahuan a{display:block;padding:calc(var(--p)*16) 0}
.pd-pemberitahuan .baru{color:#b4472a;font-weight:700;font-size:calc(var(--p)*18);letter-spacing:.06em;text-transform:uppercase;margin-right:calc(var(--p)*6)}
.pd-tengah{text-align:center}
.pd-kosong{font-size:calc(var(--p)*21);opacity:.85;padding:calc(var(--p)*6) 0}
.dash-user #isi-panel{padding:0 0 calc(var(--p)*40)}
.pd .wm svg{height:.82em;width:auto;vertical-align:-.06em}
.pd .tombol.kecil,.pd .tombol{min-height:0;height:calc(var(--p)*54);font-size:calc(var(--p)*21);padding:0 calc(var(--p)*24);border-radius:calc(var(--p)*27)}
.pd .cekung{height:calc(var(--p)*62);font-size:calc(var(--p)*22);border-radius:calc(var(--p)*31)}
.pd .lencana{font-size:calc(var(--p)*16);padding:calc(var(--p)*2) calc(var(--p)*10);vertical-align:middle}
.pd .cek{font-size:calc(var(--p)*21)}
.pd-angka .pd-kartu{font-size:calc(var(--p)*20.5)}
.pd-chip{font-size:calc(var(--p)*20);padding:0 calc(var(--p)*15)}
.pd-chip-baris{gap:calc(var(--p)*8)}
.pd .garis-waktu{font-size:calc(var(--p)*20)}
/* isi panel lama ditata seperti desain */
.pd .daftar{display:block}
.pd .daftar>.item,.pd .item.kartu,.pd>.kartu,.pd .kartu{display:block;background:linear-gradient(180deg,rgba(214,188,156,.30),rgba(226,204,176,.22));border:calc(var(--p)*2) solid rgba(255,250,242,.55);border-radius:calc(var(--p)*26);padding:calc(var(--p)*18) calc(var(--p)*24);margin-top:calc(var(--p)*14);box-shadow:inset 0 calc(var(--p)*2) calc(var(--p)*6) rgba(255,255,255,.35),0 calc(var(--p)*3) calc(var(--p)*10) rgba(120,80,40,.10);font-size:calc(var(--p)*22)}
.pd .daftar>.item b,.pd .kartu b{font-size:calc(var(--p)*24);color:rgb(160,106,70)}
.pd .ket{font-size:calc(var(--p)*19.5);color:rgb(150,104,72);opacity:.9}
.pd .isi,.pd p{font-size:calc(var(--p)*22)}
.pd .sub{font-size:calc(var(--p)*26);font-weight:700}
.pd .kv{font-size:calc(var(--p)*21)}
.pd .medan>span{font-size:calc(var(--p)*19)}
.pd details>summary{cursor:pointer}
.dash-p4ta #isi-panel{padding:0 calc(var(--p)*6) calc(var(--p)*30)}
/* ===== Dashboard P4/TA: kaca mengkilap (User tetap doff) ===== */
.dash-p4ta .pd-kartu{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,250,242,.30) 38%,rgba(236,214,186,.22) 62%,rgba(255,248,238,.34) 100%);
  border:calc(var(--p)*2) solid rgba(255,255,255,.85);
  box-shadow:inset 0 calc(var(--p)*3) calc(var(--p)*2) rgba(255,255,255,.75),inset 0 calc(var(--p)*-3) calc(var(--p)*6) rgba(170,120,80,.14),0 calc(var(--p)*6) calc(var(--p)*16) rgba(120,80,40,.16),0 0 0 calc(var(--p)*1) rgba(170,125,90,.18);
  -webkit-backdrop-filter:blur(6px) saturate(1.15);backdrop-filter:blur(6px) saturate(1.15);overflow:hidden}
.dash-p4ta .pd-kartu::before{content:"";position:absolute;left:4%;right:4%;top:calc(var(--p)*3);height:42%;border-radius:calc(var(--p)*26) calc(var(--p)*26) 50% 50%/calc(var(--p)*26) calc(var(--p)*26) 30% 30%;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0));pointer-events:none}
.dash-p4ta .pd-kartu::after{content:"";position:absolute;top:-40%;left:-30%;width:28%;height:180%;transform:rotate(22deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.28),rgba(255,255,255,0));pointer-events:none}
.dash-p4ta .pd-kartu>*{position:relative;z-index:1}
.dash-p4ta .pd-kartu>.pd-ikon{position:absolute}
.dash-p4ta .pd-kartu>.pd-pil{position:absolute}
.dash-p4ta .pd-chip{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(236,214,186,.45));border-color:rgba(255,255,255,.9)}
.dash-p4ta .pd-tombol,.dash-p4ta .pd-pil:not(.terang){background:linear-gradient(180deg,#c48d62 0%,#9a6038 45%,#7a4424 55%,#9a6038 100%);box-shadow:inset 0 calc(var(--p)*2) 0 rgba(255,235,210,.55),0 calc(var(--p)*4) calc(var(--p)*10) rgba(90,50,20,.32)}

/* HP (tegak): desain memenuhi layar selebar penuh; atas-bawah dipotong seimbang tanpa memotong isi (diatur tukuva.js) */
@media (max-width:600px) and (orientation:portrait){
  html,body{height:100%}
  body{display:block;overflow:hidden;min-height:0}
  body::before{display:none}
  .layar{--lebar:100vw!important;box-shadow:none}
  .tombol-suara{position:fixed;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px}
}


/* ===================== Laptop (layar lebar): kanvas 1672 x 940, 1 unit = 1 px desain =====================
   Diskalakan JS supaya memenuhi layar (cover), tanpa memotong kartu. */
body.laptop{display:block;overflow:hidden;height:100vh;height:100dvh;background:#efe3d2}
body.laptop::before{content:"";position:fixed;inset:-40px;background:var(--latar) center/cover no-repeat;filter:blur(16px);transform:scale(1.04);z-index:0}
.layar-l{--p:1px;--u:6.6px;position:fixed;left:50%;top:50%;width:1672px;height:940px;transform-origin:0 0;background:#efe3d2 center/100% 100% no-repeat;
  font-family:GSans,Mulish,sans-serif;font-size:20px;line-height:1.5;font-weight:500;color:var(--tinta);z-index:1;overflow:hidden}
.layar-l .l-logo{position:absolute;text-align:center}
.layar-l .l-logo img{display:block;margin:0 auto;width:62%}
.layar-l .l-logo .wm{height:auto;display:block;margin-top:2px}
.layar-l .l-logo .wm svg{width:100%;height:auto}
/* tulisan: bidang datar/cekung = timbul; tombol timbul = cekung (aturan Peter 25 Okt) */
.l-timbul{color:#A3714C;text-shadow:-1px -1px 0 rgba(255,251,243,.95),1px 1.5px 1px rgba(95,52,22,.40),2px 3px 5px rgba(95,52,22,.16)}
.l-timbul.besar{color:#A87650;text-shadow:-2px -2px 1px rgba(255,251,243,.95),2px 3px 2px rgba(95,52,22,.40),5px 7px 10px rgba(95,52,22,.18)}
.l-cekung{color:#966746;text-shadow:0 -1px 0 rgba(70,35,12,.55),0 1px 0 rgba(255,250,240,.9)}
.l-cekung.terang{color:#F6E7D7;text-shadow:0 -1px 0 rgba(40,18,5,.75),0 1px 0 rgba(255,215,180,.35)}
/* kolom isian cekung & tombol timbul */
.l-isian{position:absolute;display:flex;align-items:center;gap:14px;padding:0 26px;border-radius:999px;
  background:linear-gradient(180deg,rgba(236,222,203,.62),rgba(246,236,222,.55));border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 3px 4px 8px rgba(120,80,40,.22),inset -3px -3px 7px rgba(255,255,255,.8),0 1px 0 rgba(255,255,255,.6)}
.l-isian input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:500 26px GSans,Mulish,sans-serif;color:#7d4f2e;
  text-shadow:-1px -1px 0 rgba(255,251,243,.9),1px 1px 1px rgba(95,52,22,.25)}
.l-isian input::placeholder{color:#B08B6C}
.l-isian svg,.l-isian img{flex:none}
.l-tombol{position:absolute;display:flex;align-items:center;justify-content:center;gap:12px;border:0;cursor:pointer;border-radius:999px;
  background:linear-gradient(180deg,#B47E57 0%,#94603A 48%,#7A4A2A 100%);font:700 30px GSans,Mulish,sans-serif;
  box-shadow:inset 0 2px 1px rgba(255,226,196,.55),inset 0 -3px 5px rgba(60,28,8,.35),0 6px 12px rgba(110,60,25,.30),0 1px 0 rgba(255,255,255,.7)}
.l-tombol.terang{background:linear-gradient(180deg,#FFF9F1 0%,#F3E6D5 55%,#E8D6C0 100%);
  box-shadow:inset 0 2px 1px #fff,inset 0 -3px 5px rgba(150,100,60,.18),0 5px 10px rgba(110,60,25,.18)}
.l-tombol:active{transform:translateY(1px)}
.l-kotak-cekung{position:absolute;border-radius:28px;background:rgba(238,226,210,.45);border:1px solid rgba(255,255,255,.55);
  box-shadow:inset 4px 6px 12px rgba(120,80,40,.20),inset -4px -4px 10px rgba(255,255,255,.75)}
.l-kartu-kaca{position:absolute;border-radius:64px;background:rgba(255,249,240,.46);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:2px solid rgba(255,255,255,.75);box-shadow:inset 0 2px 1px rgba(255,255,255,.9),inset 0 -2px 4px rgba(150,100,60,.12),0 22px 50px rgba(120,80,40,.20)}
.l-ikon{position:absolute;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer}
.l-ikon img{width:100%;height:auto;filter:drop-shadow(0 4px 4px rgba(95,52,22,.25))}
.l-ikon span{font:600 18px GSans,Mulish,sans-serif;white-space:nowrap}
.l-ikon.aktif span{text-decoration:underline;text-underline-offset:5px}
.l-panel{position:absolute;overflow-y:auto;scrollbar-width:thin;padding:22px 26px}
.l-panel .pd,.l-panel{--p:1.2px;--u:7.6px}

/* ===================== Ikon pertanyaan umum, dropdown 6 pertanyaan ===================== */
.ikon-tanya{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;z-index:30;display:flex;flex-direction:column;align-items:center;gap:2px;
  font:600 11px/1.1 GSans,Mulish,sans-serif;color:var(--tinta);text-align:center}
.ikon-tanya img{width:58px;height:auto;filter:drop-shadow(0 3px 3px rgba(95,52,22,.28))}
.layar-l .ikon-tanya{position:absolute;top:12px;right:250px}
.layar-l .ikon-tanya img{width:82px}
.layar-l .ikon-tanya span{font-size:15px}
body.ada-tanya .tombol-suara{left:12px!important;right:auto!important}
.d-turun .tanya-q{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer}
.d-turun .tanya-jwb{padding:4px 2px 10px}
.d-turun .tanya-jwb .j{font-weight:800;font-size:1.45em;line-height:1.2;margin:6px 0 4px}
.d-turun .tanya-jwb p{line-height:1.45}
.d-turun .tanya-jwb p+p{margin-top:10px}
.d-turun.terbuka .tanya-q:not(.dipilih){display:none}

/* ===================== Pusat bantuan: Pertanyaan Umum + Chat ===================== */
body.bantuan{display:block;min-height:100vh;background:#efe3d2 var(--latar) center/cover fixed no-repeat;overflow:hidden}
.bantuan-kartu{position:fixed;left:max(16px,4vw);right:max(16px,4vw);top:max(16px,4vh);bottom:calc(max(16px,4vh) + 64px);border-radius:44px;
  background:rgba(255,249,240,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.78);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.9),0 20px 46px rgba(120,80,40,.18);display:flex;flex-direction:column;overflow:hidden;font-family:GSans,Mulish,sans-serif}
.bantuan-kepala{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;padding:24px max(18px,5vw) 10px}
.bantuan-kepala h1{overflow:hidden;font-size:clamp(18px,4.9vw,58px);white-space:nowrap;font-weight:700;letter-spacing:.01em;line-height:1.05;border-bottom:2px solid rgba(139,87,51,.55);padding-bottom:10px}
.bantuan-kepala .email{font-size:clamp(12px,3.1vw,22px);margin-top:8px;text-align:right;white-space:nowrap}
.bantuan-kepala .logo{width:clamp(58px,15vw,130px);text-align:center;justify-self:end}
.bantuan-kepala .logo img{width:72%;display:block;margin:0 auto}
.bantuan-kepala .logo .wm{height:auto;display:block}.bantuan-kepala .logo .wm svg{width:100%;height:auto}
.bantuan-isi{flex:1;overflow-y:auto;padding:8px 30px 30px;scrollbar-width:thin}
.bantuan-isi details{margin-top:14px}
.bantuan-isi summary{cursor:pointer;font-weight:700;font-size:clamp(15px,3.4vw,24px);list-style:none;padding:8px 0;border-bottom:1px solid rgba(139,87,51,.18)}
.bantuan-isi summary::-webkit-details-marker{display:none}
.bantuan-isi summary::after{content:" ›";opacity:.6}
.bantuan-isi details[open] summary::after{content:" ⌄"}
.bantuan-isi ol{list-style:none;margin-top:6px}
.bantuan-isi li{margin-top:16px;font-size:clamp(15px,3.3vw,24px);line-height:1.45}
.bantuan-isi li b{display:block;font-weight:700}
.bantuan-isi li .n{font-weight:700;margin-right:4px}
.bantuan-isi li .segera{display:inline-block;font-size:.72em;font-weight:700;padding:1px 8px;border-radius:99px;background:rgba(139,87,51,.12);margin-left:6px}
.bantuan-kembali{position:fixed;left:max(14px,3vw);bottom:max(12px,2vh);width:clamp(52px,12vw,78px);z-index:5}
.bantuan-chat{position:fixed;right:max(12px,3vw);bottom:max(10px,1.6vh);width:clamp(104px,23vw,150px);border:0;background:transparent;cursor:pointer;z-index:5}
.bantuan-kembali img,.bantuan-chat img{width:100%;display:block;filter:drop-shadow(0 4px 5px rgba(95,52,22,.28))}
.chat{position:fixed;z-index:20;display:flex;flex-direction:column;gap:14px;padding:22px 20px 18px;border-radius:40px;
  background:rgba(250,243,233,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:2px solid rgba(255,255,255,.85);
  box-shadow:inset 0 2px 1px #fff,0 24px 50px rgba(110,70,35,.28);font-family:GSans,Mulish,sans-serif;
  left:max(12px,4vw);right:max(12px,4vw);top:max(64px,11vh);bottom:calc(max(10px,1.6vh) + 96px)}
.chat.keyboard{bottom:auto}
body.chat-buka .bantuan-chat,body.chat-buka .bantuan-kembali{display:none}
@media (max-width:600px){ .chat{bottom:max(10px,1.6vh)} }
@media (max-width:600px) and (max-height:560px){ .chat{top:8px} .chat-isi{margin-top:44px} .chat-tutup{width:44px;height:44px;top:10px} }
.chat[hidden]{display:none}
.chat-tutup{position:absolute;right:16px;top:14px;width:52px;height:52px;border:0;background:url(/aset/img/ikon-tutup.png) center/contain no-repeat;cursor:pointer;filter:drop-shadow(0 3px 3px rgba(95,52,22,.3))}
.chat-isi{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;margin-top:50px;padding:4px 4px 6px;scrollbar-width:thin}
.gel{max-width:86%;padding:16px 24px;border-radius:34px;font-size:clamp(15px,3.6vw,21px);line-height:1.38}
.gel.asisten{align-self:flex-start;background:rgba(238,226,210,.55);border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 3px 4px 9px rgba(120,80,40,.20),inset -3px -3px 8px rgba(255,255,255,.8);color:#7d4a28;
  text-shadow:-1px -1px 0 rgba(255,251,243,.9),1px 1.5px 1px rgba(95,52,22,.28)}
.gel.user{align-self:flex-end;text-align:right;background:linear-gradient(180deg,#B47E57,#93603B 50%,#7A4A2A);color:#FBEBDB;
  box-shadow:inset 0 2px 1px rgba(255,226,196,.5),inset 0 -3px 5px rgba(60,28,8,.35),0 5px 10px rgba(110,60,25,.28);
  text-shadow:0 -1px 0 rgba(40,18,5,.6),0 1px 0 rgba(255,215,180,.25);font-weight:600}
.gel .pilihan{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.gel .pilihan button{text-align:left;border:0;cursor:pointer;padding:9px 16px;border-radius:22px;font:600 .92em GSans,Mulish,sans-serif;color:#7d4a28;
  background:linear-gradient(180deg,#FFF9F1,#EFE0CD);box-shadow:inset 0 1px 0 #fff,0 3px 6px rgba(110,60,25,.16);text-shadow:0 1px 0 #fff}
.gel .segera{display:block;font-size:.85em;opacity:.8;margin-top:6px}
.chat-kirim{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 24px;border-radius:999px;background:rgba(238,226,210,.55);
  box-shadow:inset 3px 4px 9px rgba(120,80,40,.2),inset -3px -3px 8px rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.6)}
.chat-kirim input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:500 clamp(15px,3.8vw,22px) GSans,Mulish,sans-serif;color:#7d4a28}
.chat-kirim input::placeholder{color:#9b7253}
.chat-kirim button{border:0;cursor:pointer;border-radius:999px;padding:10px 26px;font:700 clamp(15px,3.8vw,22px) GSans,Mulish,sans-serif;color:#FBEBDB;
  background:linear-gradient(180deg,#B47E57,#93603B 50%,#7A4A2A);box-shadow:inset 0 2px 1px rgba(255,226,196,.5),0 4px 8px rgba(110,60,25,.28);
  text-shadow:0 -1px 0 rgba(40,18,5,.6)}
@media (min-width:900px) and (orientation:landscape){
  .bantuan-kartu{left:7vw;right:7vw;top:7vh;bottom:7vh}
  .bantuan-kepala{padding:30px 60px 6px}
  .bantuan-kepala h1{font-size:64px;text-align:center}
  .bantuan-isi{padding:6px 60px 40px}
  .bantuan-isi li{font-size:24px}
  .chat{left:auto;right:15vw;top:auto;bottom:5vh;width:max(420px,27vw);height:62vh}
  .chat.keyboard{bottom:5vh}
  .bantuan-chat{width:150px}
  .bantuan-kembali{width:84px}
}
.d-turun .tanya .tanya-q::before{content:"";position:absolute;left:calc(var(--p)*-6);right:calc(var(--p)*82);top:0;border-top:calc(var(--p)*2) solid rgba(160,112,78,.28)}
.d-turun .tanya-jwb{font-size:calc(var(--p)*25);color:#7a4a2a;padding:calc(var(--p)*4) calc(var(--p)*32) calc(var(--p)*16) 0}
.d-turun .tanya-jwb .j{font-size:calc(var(--p)*44);color:#8B5733}
.d-turun .tanya-jwb .j .wm,.d-turun .tanya-q .wm{color:#8B5733}
.d-turun .tanya-q.dipilih{font-size:calc(var(--p)*26)}
.layar-l .d-turun{padding:6px 0 6px 26px}
.layar-l .d-turun a{height:44px;font-size:20px;padding-right:22px}
.layar-l .d-turun svg{width:11px;height:18px}
.layar-l .d-turun .tanya-jwb{font-size:19px;padding-right:22px}
.layar-l .d-turun .tanya-jwb .j{font-size:30px}
.layar-l .d-turun .tanya-q.dipilih{font-size:17px}

.d-turun .wm svg{width:auto!important;height:100%!important}
.d-turun .wm{height:.8em}
.d-turun .tanya-q{height:auto!important;min-height:calc(var(--p)*60);padding-top:calc(var(--p)*9);padding-bottom:calc(var(--p)*9);line-height:1.25}
.layar-l .d-turun .tanya-q{min-height:44px;padding-top:7px;padding-bottom:7px}
/* Syarat versi laptop: hanya isi ketentuan yang digulir */
.layar-l #gulir-syarat{position:absolute;scrollbar-width:thin;
  /* laptop: pudar tipis atas-bawah saja (efek pudar HP dulu ikut menutup seluruh kotak saat digulir) */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16px,#000 calc(100% - 24px),transparent 100%)}
.layar-l .l-syarat .pembuka,.layar-l .l-syarat .judul-besar,.layar-l .l-syarat .pembatas,.layar-l .l-syarat .d-tombol-akhir{display:none}
.layar-l .l-syarat .d-syarat h3{margin:14px 0 6px;text-align:left;padding:0;font-size:19px}
.layar-l .l-syarat .d-syarat ol{padding:0 6px 0 22px;width:auto}
.layar-l .l-syarat .d-syarat li{font-size:18px;margin-top:8px;line-height:1.3;text-align:left}
.layar-l .l-syarat .d-syarat li::before{left:-20px}
.layar-l .l-syarat .d-syarat p.isi-p,.layar-l .l-syarat .d-syarat .kaki-s{margin:10px 0 0;width:auto;font-size:18px}
.layar-l #setuju[aria-disabled]{opacity:.75}
.layar-l .l-isi-umum{--u:11px;font-size:22px;padding:4px 10px}
.layar-l .l-isi-umum .sub{font-size:30px}
.layar-l .l-isi-umum .isi{font-size:21px}
.layar-l .pd-kartu{background:rgba(238,226,210,.42);border:1px solid rgba(255,255,255,.55);box-shadow:inset 4px 6px 12px rgba(120,80,40,.18),inset -4px -4px 10px rgba(255,255,255,.7)}
.layar-l .pd-chip{box-shadow:inset 0 2px 1px #fff,0 4px 8px rgba(110,60,25,.18)}
.layar-l .l-panel .pd{color:#9a6845}
.dash-l .l-ikon img{height:84px;width:auto;max-width:100%;object-fit:contain}
.dash-l .l-ikon[style*="width:126px"] img{height:92px}

/* Pilih berkas: tampilan bawaan browser ("Choose File / Pilih File") diganti tombol tukuva + nama berkas (29 Okt) */
.pilih-berkas{display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px 10px 8px 8px!important;min-height:52px;position:relative}
.pilih-berkas .pb-tombol{flex:none;padding:9px 20px;border-radius:999px;font:700 15px/1 GSans,Mulish,sans-serif;color:#FBEBDB;
  background:linear-gradient(180deg,#B47E57,#93603B 50%,#7A4A2A);box-shadow:inset 0 2px 1px rgba(255,226,196,.5),0 3px 6px rgba(110,60,25,.25);text-shadow:0 -1px 0 rgba(40,18,5,.6)}
.pilih-berkas .pb-nama{flex:1;min-width:0;font:500 14px/1.3 GSans,Mulish,sans-serif;color:#8a5a37;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pilih-berkas.terisi .pb-nama{color:#5e3a20;font-weight:700}
.pilih-berkas input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.medan + .medan{margin-top:14px}
.gel .lanjut-judul{margin-top:10px;font-weight:700;font-size:.9em}
.chat-isi{scrollbar-width:none}.chat-isi::-webkit-scrollbar{display:none}

/* ===== Dashboard P4/TA laptop: pola Dashboard User laptop, bahan glossy (arahan Peter 29 Okt) ===== */
.l-kartu-kaca.glossy{background:linear-gradient(165deg,rgba(255,255,255,.62) 0%,rgba(255,250,243,.40) 34%,rgba(246,232,214,.30) 62%,rgba(255,248,240,.44) 100%);
  border:2px solid rgba(255,255,255,.92);-webkit-backdrop-filter:blur(9px) saturate(1.15);backdrop-filter:blur(9px) saturate(1.15);overflow:hidden;
  box-shadow:inset 0 3px 2px rgba(255,255,255,.95),inset 0 -3px 7px rgba(170,120,80,.16),0 0 0 1px rgba(190,140,100,.20),0 24px 54px rgba(120,80,40,.22)}
.l-kartu-kaca.glossy::before{content:"";position:absolute;left:3%;right:3%;top:4px;height:30%;border-radius:60px 60px 50% 50%/60px 60px 26% 26%;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));pointer-events:none}
.l-kartu-kaca.glossy::after{content:"";position:absolute;top:-30%;left:-12%;width:16%;height:160%;transform:rotate(24deg);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.30),rgba(255,255,255,0));pointer-events:none}
.layar-l.dash-p4ta .pd-kartu{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,250,242,.30) 38%,rgba(236,214,186,.22) 62%,rgba(255,248,238,.34) 100%);
  border:2px solid rgba(255,255,255,.85);box-shadow:inset 0 3px 2px rgba(255,255,255,.75),inset 0 -3px 6px rgba(170,120,80,.14),0 6px 16px rgba(120,80,40,.16),0 0 0 1px rgba(170,125,90,.18)}
.dash-p4ta-l .l-ikon img{height:84px;width:auto;max-width:100%;object-fit:contain}
.dash-p4ta-l .l-ikon[style*="width:146px"] img{height:70px}
.l-logo-tautan{display:block;cursor:pointer}
/* Halaman isi versi laptop: di dalam kartu kaca lebar, kolom ikon kiri */
.l-kepala-isi{position:absolute;display:flex;align-items:center;border-bottom:2px solid rgba(139,87,51,.22)}
.layar-l .l-isi{position:absolute;--p:.56px;--u:9.6px;font-size:18px;line-height:1.6;padding:6px 10px 48px;overflow-y:auto;scrollbar-width:thin}
.layar-l .l-isi>*{max-width:1000px}
.layar-l .l-isi .kartu{border-radius:26px}
.layar-l .l-panel .pd-tombol{max-width:560px}
.layar-l .l-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;max-width:none}
.layar-l .l-grid>*{margin:0!important}
.layar-l .l-isi>.l-grid{max-width:none}

.d-turun .tanya-jwb p{white-space:pre-line}
.d-turun .tanya-jwb>p:first-child{margin-top:calc(var(--p)*10)}
.layar-l .d-turun .tanya-jwb{font-size:24px;line-height:1.3}
.layar-l .d-turun .tanya-jwb .j{font-size:36px}
.layar-l .d-turun a,.layar-l .d-turun .tanya-q.dipilih{font-size:19px}
.layar-l #turun{max-height:420px!important}

.pilih-berkas{display:flex!important;align-items:center}
.pilih-berkas .pb-tombol{margin-right:12px}
.pilih-berkas .pb-nama{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}