/* =====================================================================
   HALAMAN PRODUK (games/show.ejs) — opsi C "Info pindah ke panel kanan"
   Dipilih pemilik 13 Nov 2026 ("boleh yg C") dari foto Sekarang|A|B|C.
   ---------------------------------------------------------------------
   Desktop (>= 1024px): kartu atas jadi kepala ringkas dua kolom di kanan
   logo — kiri = fakta (bintang, jam buka, rata-rata, penonton, chip), kanan
   = deskripsi 2 baris + Bagikan/Afiliasi. Kotak info (Garansi, Region/
   Server, Cara kerja sewa akun, Daftar Harga) tampil sebagai SATU kartu
   "Info produk" (partials/info-produk-kartu.ejs) di atas Ringkasan; salinan
   ber-id di tempat lamanya tetap dirender untuk lembar info wizard HP
   (checkout-wizard.js meng-clone #info-garansi dst. lewat id) dan hanya
   DISEMBUNYIKAN di sini. Ringkasan + tombol bayar + bukti sosial tetap
   lengket; kartu Info ikut tergulir.

   Semua aturan tata letak DIGERBANGI main:has(.opc-info): tanpa kartu itu
   (katalog kosong) halaman tetap seperti dulu. Di bawah 1024px hanya
   bagian 4 (lencana MANUAL/AUTO — perbaikan bug, disetujui pemilik untuk HP
   juga) yang berlaku.
   ===================================================================== */
@media (min-width:1024px){

  /* ---------- 0. Token warna (gelap = bawaan situs, terang = override) ---------- */
  main:has(.opc-info){
    --opc-garis:rgb(148 163 184 / .16);
    --opc-judul:#e2e8f0; --opc-teks:#cbd5e1; --opc-redup:#94a3b8; --opc-tebal:#f1f5f9;
    --opc-tautan:#6fc2e3;
    --opc-hijau:#6ee7b7; --opc-hijau-latar:rgb(16 185 129 / .16);
    --opc-amber:#fcd34d; --opc-amber-ikon:#fbbf24; --opc-amber-latar:rgb(245 158 11 / .2); --opc-amber-kotak:rgb(245 158 11 / .1);
    --opc-biru:#abdbee; --opc-biru-judul:#8fd3ee; --opc-biru-latar:rgb(1 126 188 / .22);
  }
  [data-theme="light"] main:has(.opc-info){
    --opc-garis:rgb(15 23 42 / .08);
    --opc-judul:#0f172a; --opc-teks:#475569; --opc-redup:#64748b; --opc-tebal:#1e293b;
    --opc-tautan:#0164a3;
    --opc-hijau:#047857; --opc-hijau-latar:rgb(16 185 129 / .12);
    --opc-amber:#92400e; --opc-amber-ikon:#b45309; --opc-amber-latar:rgb(245 158 11 / .18); --opc-amber-kotak:rgb(245 158 11 / .1);
    --opc-biru:#035392; --opc-biru-judul:#035392; --opc-biru-latar:rgb(1 126 188 / .12);
  }

  /* ---------- 1. Kartu atas: kepala ringkas ---------- */
  /* Banner 176px -> 136px. Judul, logo, adegan animasi, hati favorit tetap. */
  main:has(.opc-info) .card.overflow-hidden.mb-6 > div:first-child{height:8.5rem}

  /* Badan kartu = konteks blok sendiri (menampung float kolom kiri). */
  main:has(.opc-info) .card.overflow-hidden.mb-6 > .px-5.pb-5.relative{display:flow-root; padding-bottom:1.25rem}

  /* Garis rambut tegak di TEPI KIRI kolom kanan formulir (sepertiga kanan
     .checkout-grid: 2/3 lebar + 16,33px dari tepi dalam kartu ini). Letaknya
     tetap, apa pun isi kolom kiri (jam tutup, penonton, chip). */
  main:has(.opc-info) .card.overflow-hidden.mb-6 > .px-5.pb-5.relative::before{
    content:""; position:absolute; top:.75rem; bottom:1.25rem; left:calc(66.6667% + 16.33px);
    width:0; border-left:1px solid var(--opc-garis); pointer-events:none;
  }

  /* Kolom kiri (fakta): tiap baris = float kiri bertumpuk, mulai TEPAT di
     garis kiri judul (logo 112px + 12px), lebar tetap sampai 24px sebelum
     garis pemisah (= tepi kanan kartu formulir). Spacer selebar logo di
     baris subjudul/bintang tak dipakai lagi. */
  :where(main:has(.opc-info) .card.overflow-hidden.mb-6 > .px-5.pb-5.relative) > :is(.flex.items-center.gap-3, .pt-3[aria-hidden="true"], .hero-status, .wz-chips-slot, .penonton),
  :where(main:has(.opc-info) .card.overflow-hidden.mb-6 .wz-detail) > .flex.flex-wrap{
    float:left; clear:left; box-sizing:border-box; margin-left:7.75rem; width:calc(66.6667% - 7.75rem - 1px);
  }
  main:has(.opc-info) .card.overflow-hidden.mb-6 > .px-5.pb-5.relative > .flex.items-center.gap-3 > .shrink-0[aria-hidden="true"]{display:none}
  /* Subjudul (`truncate`) di kolom 508px: dibungkus, bukan dipotong "…" —
     subjudul 508–826px yang hari ini utuh tetap utuh. */
  main:has(.opc-info) .card.overflow-hidden.mb-6 > .px-5.pb-5.relative > .flex.items-center.gap-3 > p.truncate{white-space:normal; overflow:visible; text-overflow:clip; text-wrap:pretty}
  /* Irama tegak kolom kiri: 8px antarkelompok, 6px antarbaris status. */
  main:has(.opc-info) .card.overflow-hidden.mb-6 .hero-status{margin-top:.5rem; gap:.375rem}
  main:has(.opc-info) .card.overflow-hidden.mb-6 .penonton{margin-top:.375rem}
  main:has(.opc-info) .card.overflow-hidden.mb-6 .wz-detail > .flex.flex-wrap{margin-top:.75rem; gap:.5rem}
  main:has(.opc-info) .card.overflow-hidden.mb-6 .wz-detail > .flex.flex-wrap > .badge-save{gap:.3125rem}
  /* Chip "Garansi 100%" disembunyikan HANYA bila baris garansinya ada di
     kartu Info produk (.ip-garansi; #info-garansi = varian pratinjau yang
     memindah elemen) — faktanya tetap utuh, tidak diucapkan dua kali. */
  main:has(.opc-info :is(#info-garansi,.ip-garansi)) .card.overflow-hidden.mb-6 .garansi-chip{display:none}
  /* Salinan ber-id (untuk lembar info wizard HP) tetap di tempat lama,
     disembunyikan di desktop — kartu Info produk yang tampil. */
  main:has(.opc-info) .card.overflow-hidden.mb-6 .wz-detail > :is(.price-cta,#info-garansi,#info-region,#info-server),
  main:has(.opc-info) #checkout-form > [data-wz-step="1"] > #info-sewa-cara{display:none}

  /* Kolom kanan (tentang): deskripsi + aksi mengalir di bawah satu sama
     lain, mulai tepat di garis teks kartu Info produk (2/3 + 44px). */
  main:has(.opc-info) .card.overflow-hidden.mb-6 #sec-deskripsi{margin:0 0 0 calc(66.6667% + 44px); padding-top:.875rem}
  main:has(.opc-info) .card.overflow-hidden.mb-6 #sec-deskripsi .gd{margin-top:0}
  main:has(.opc-info) .card.overflow-hidden.mb-6 #sec-deskripsi .gd-preview{-webkit-line-clamp:2; line-height:1.6}
  main:has(.opc-info) .card.overflow-hidden.mb-6 #sec-deskripsi .gd[open] .gd-full{margin-top:.375rem; line-height:1.65}
  main:has(.opc-info) .card.overflow-hidden.mb-6 #sec-deskripsi .gd-act{
    margin-top:.375rem; padding:.125rem 0; border:0; border-radius:0; background:none;
    font-size:.8125rem; font-weight:600; color:var(--opc-tautan); gap:.375rem;
  }
  main:has(.opc-info) .card.overflow-hidden.mb-6 #sec-deskripsi .gd > summary:hover .gd-act{background:none; text-decoration:underline; text-underline-offset:3px}
  main:has(.opc-info) .card.overflow-hidden.mb-6 #sec-deskripsi .gd > summary:focus-visible{outline:2px solid var(--opc-tautan); outline-offset:3px; border-radius:.375rem}

  main:has(.opc-info) .card.overflow-hidden.mb-6 .wz-aff-baris{margin:.75rem 0 0 calc(66.6667% + 44px); gap:.5rem}
  main:has(.opc-info) .card.overflow-hidden.mb-6 .wz-aff-baris > .btn-secondary{min-height:2.125rem; padding:.3125rem .6875rem; font-size:.8125rem; border-radius:.625rem; gap:.375rem}
  main:has(.opc-info) .card.overflow-hidden.mb-6 .wz-aff-baris > .aff-ajak{min-height:2.125rem; font-size:.8125rem}

  /* ---------- 2. Kolom kanan formulir: kartu "Info produk" + tumpukan lengket ---------- */
  /* Kolom kanan setinggi formulir; yang lengket = tumpukan .space-y-4 yang
     SAMA dengan sekarang (Ringkasan + tombol bayar + bukti sosial, 491px).
     Kartu Info duduk di atasnya dan ikut tergulir. */
  .checkout-grid > .summary-sticky:has(> .opc-info){position:static; top:auto; align-self:stretch}
  .checkout-grid > .summary-sticky > .opc-info{margin-bottom:1rem}
  .checkout-grid > .summary-sticky > .opc-info ~ .space-y-4{position:sticky; top:7rem}

  .opc-info{padding:1.25rem 1.25rem .5rem}
  .opc-info-judul{display:flex; align-items:center; gap:.375rem; margin:0 0 .75rem; font-size:.875rem; font-weight:600; line-height:1.25rem; color:var(--opc-judul)}
  .opc-info-judul > svg{flex:none; width:1rem; height:1rem}

  /* Baris kartu: tanpa kotak warna-warni; pemisah garis rambut. Ubin ikon
     kecil (hijau = garansi, amber = region, biru = cara kerja & daftar harga)
     duduk sebaris dengan judul baris; kalimatnya memakai lebar kartu penuh. */
  .opc-info > :is(#info-garansi,.ip-garansi,#info-region,.ip-region,#info-server,.ip-server,#info-sewa-cara,.ip-sewa-cara){
    display:flow-root; margin:0; padding:.75rem 0; border:0; border-top:1px solid var(--opc-garis);
    border-radius:0; background:none; color:var(--opc-teks); font-size:.8125rem; line-height:1.55;
  }
  .opc-info > :is(#info-garansi,.ip-garansi,#info-region,.ip-region,#info-server,.ip-server) > span:first-child,
  .summary-sticky > .opc-info > .price-cta .price-cta-ic{
    float:left; width:1.5rem; height:1.5rem; margin:0 .5rem 0 0; border-radius:.4375rem;
    display:flex; align-items:center; justify-content:center; font-size:1rem; line-height:1;
  }
  .opc-info > :is(#info-garansi,.ip-garansi) > span:first-child{background:var(--opc-hijau-latar); color:var(--opc-hijau)}
  .opc-info > :is(#info-region,.ip-region,#info-server,.ip-server) > span:first-child{background:var(--opc-amber-latar); color:var(--opc-amber-ikon)}
  .opc-info > :is(#info-region,.ip-region) > span:first-child > svg{width:18px; height:12px}
  .opc-info > :is(#info-garansi,.ip-garansi,#info-server,.ip-server) > span:first-child > svg{width:.9375rem; height:.9375rem}

  .opc-info > :is(#info-garansi,.ip-garansi,#info-region,.ip-region,#info-server,.ip-server) > p{margin:0; font-size:.8125rem; line-height:1.55; color:var(--opc-teks); text-wrap:pretty}
  /* Kalimat pertama yang tebal = judul baris: kotak flow-root di samping
     ubin, setinggi ubin (24px) — kalimat sesudahnya mulai DI BAWAH ubin,
     selebar kartu. */
  .opc-info > :is(#info-garansi,.ip-garansi,#info-region,.ip-region,#info-server,.ip-server) > p > b:first-child{display:flow-root; margin-bottom:.1875rem; font-size:.875rem; font-weight:700; line-height:1.5rem; text-wrap:balance}
  .opc-info > :is(#info-garansi,.ip-garansi) > p > b:first-child{color:var(--opc-hijau)}
  .opc-info > :is(#info-region,.ip-region,#info-server,.ip-server) > p > b:first-child{color:var(--opc-amber)}
  .opc-info > :is(#info-garansi,.ip-garansi,#info-region,.ip-region,#info-server,.ip-server) > p > b:not(:first-child){color:var(--opc-tebal); font-weight:700}
  .opc-info > :is(#info-region,.ip-region,#info-server,.ip-server) a{color:var(--opc-tautan); font-weight:700; text-decoration:underline; text-underline-offset:2px}

  /* Region / server = PERINGATAN: satu-satunya baris berlatar (amber tipis),
     supaya tetap terbaca sebagai peringatan. Tanpa garis rambut di atas/
     bawahnya — kotaknya sendiri sudah memisahkan. */
  .opc-info > :is(#info-region,.ip-region,#info-server,.ip-server){margin:.25rem 0 .75rem; padding:.75rem; border-top:0; border-radius:.75rem; background:var(--opc-amber-kotak)}
  .opc-info > :is(#info-region,.ip-region,#info-server,.ip-server) + *{border-top:0; padding-top:.25rem}

  /* Cara kerja sewa akun (dulu kotak biru di langkah 1). Markupnya teks +
     <b> + <br>: ikon kunci di dalam <b> pertama dijadikan ubin. */
  .opc-info > :is(#info-sewa-cara,.ip-sewa-cara) > b:first-child{display:flow-root; margin-bottom:.1875rem; font-size:.875rem; font-weight:700; line-height:1.5rem; color:var(--opc-biru-judul)}
  .opc-info > :is(#info-sewa-cara,.ip-sewa-cara) > b:first-child > svg{
    float:left; box-sizing:border-box; width:1.5rem; height:1.5rem; padding:.25rem; margin:0 .5rem 0 0;
    border-radius:.4375rem; background:var(--opc-biru-latar); color:var(--opc-biru);
  }
  .opc-info > :is(#info-sewa-cara,.ip-sewa-cara) > b:first-child + br{display:none}
  .opc-info > :is(#info-sewa-cara,.ip-sewa-cara) > b:not(:first-child){color:var(--opc-tebal); font-weight:700}
  /* <br><br> = baris kosong penuh; diganti jeda 8px: <br> kedua hilang,
     judul "Khusus durasi…" jadi inline-block bermargin atas. */
  .opc-info > :is(#info-sewa-cara,.ip-sewa-cara) > br + br{display:none}
  .opc-info > :is(#info-sewa-cara,.ip-sewa-cara) > b:not(:first-child):has(> svg){display:inline-block; margin-top:.5rem; color:var(--opc-amber)}
  .opc-info > :is(#info-sewa-cara,.ip-sewa-cara) > b:not(:first-child) > svg{width:.9375rem; height:.9375rem; margin-right:.125rem; vertical-align:-3px}

  /* Daftar harga: baris tautan penutup kartu, bentuknya sama dengan baris
     lain (ubin + judul sebaris, keterangan selebar kartu); panah di kanan. */
  .summary-sticky > .opc-info > .price-cta{
    display:flow-root; position:relative; margin:0; padding:.75rem 0 .875rem; border:0; border-top:1px solid var(--opc-garis);
    border-radius:0; background:none; transform:none;
  }
  .summary-sticky > .opc-info > .price-cta .price-cta-ic{background:var(--opc-biru-latar); color:var(--opc-biru)}
  .summary-sticky > .opc-info > .price-cta .price-cta-ic > svg{width:.9375rem; height:.9375rem}
  .summary-sticky > .opc-info > .price-cta .price-cta-txt{display:block}
  .summary-sticky > .opc-info > .price-cta .price-cta-txt b{display:flow-root; padding-right:1.5rem; font-size:.875rem; line-height:1.5rem; color:var(--opc-tautan)}
  .summary-sticky > .opc-info > .price-cta .price-cta-txt span{display:block; margin-top:.1875rem; font-size:.8125rem; line-height:1.55; color:var(--opc-teks)}
  .summary-sticky > .opc-info > .price-cta .price-cta-go{position:absolute; top:.75rem; right:0; line-height:1.5rem; color:var(--opc-tautan)}
  .summary-sticky > .opc-info > .price-cta:hover{background:none; transform:none}
  .summary-sticky > .opc-info > .price-cta:hover .price-cta-txt b{text-decoration:underline; text-underline-offset:3px}
  .summary-sticky > .opc-info > .price-cta:focus-visible{outline:2px solid var(--opc-tautan); outline-offset:2px; border-radius:.5rem}

  /* Baris pertama tanpa garis atas — sama dengan kartu Ringkasan: judul
     langsung disusul isi. :is() ber-id supaya menang atas aturan baris. */
  .opc-info > .opc-info-judul + :is(#info-garansi,.ip-garansi,#info-sewa-cara,.ip-sewa-cara,.price-cta){border-top:0; padding-top:.25rem}
  .opc-info > .opc-info-judul + :is(#info-region,.ip-region,#info-server,.ip-server){margin-top:0}
  /* Panah daftar harga ikut bantalan atas barisnya (lebih rapat sesudah
     kotak peringatan / sebagai baris pertama) — tetap sebaris dengan judul. */
  .summary-sticky > .opc-info > :is(#info-region,.ip-region,#info-server,.ip-server) + .price-cta .price-cta-go,
  .summary-sticky > .opc-info > .opc-info-judul + .price-cta .price-cta-go{top:.25rem}
}

/* ---------- 3. Tombol chat mengambang, layar 1024–1105px ----------
   Di lebar ini tombol (54px, 24px dari tepi) jatuh DI ATAS teks kolom
   kanan (sekarang: menutupi deskripsi; di opsi ini: kartu Info). Dikecilkan
   ke 44px dan dirapatkan ke pojok (8px) — sisa tumpangannya cuma bantalan
   kanan kartu. Mulai 1106px tombol sudah di luar kartu, tak diubah. */
@media (min-width:1024px) and (max-width:1105.98px){
  body:has(.opc-info) .fab-dock.fab-dock{right:.5rem; bottom:.5rem}
  body:has(.opc-info) .fab-dock .fd-main{width:2.75rem; height:2.75rem}
}

/* ---------- 4. Kartu produk: lencana MANUAL/AUTO + nama ----------
   Dulu nama produk cuma menyisakan 40px (pr-10) untuk lencana selebar
   62-67px (12px kapital sejak HIG 9 Nov) -> lencana MENIMPA nama (5 kartu di
   Netflix, terukur). Kartu berlencana kini mendapat pita atas setinggi pita
   lencana FLASH (pt-7), lencana setinggi pil FLASH (18px), dan nama memakai
   lebar penuh di bawahnya. SEMUA LEBAR (pemilik: "yaudah benerin juga"). */
.product-option > span.absolute.top-2.right-2{line-height:1; padding:3px 6px}
.product-option:has(> span.absolute.top-2.right-2){padding-top:1.75rem}
.product-option:has(> span.absolute.top-2.right-2) > span.pr-10{padding-right:0}
/* Desktop: nama ber-ruas ("1 Hari |", "1P1U Anti Limit |") — tiap ruas satu
   unit utuh, baris hanya patah SESUDAH "|", dibagi seimbang. Nama biasa:
   pretty (cuma mencegah kata yatim; "4 Diamond" tetap utuh). Ruas yang lebih
   lebar dari kartu membungkus di dalam dirinya (max-width). */
@media (min-width:1024px){
  .product-option > span.pr-10 > span{text-wrap:pretty}
  .product-option > span.pr-10 > span:has(> .opc-ruas){text-wrap:balance}
  .product-option .opc-ruas{display:inline-block; max-width:100%}
}