/* Layout mobile mengikuti referensi desain 360px (YOURSCRIPT-V8-referensi-desain.html).
   Hanya aktif <=720px; desktop tetap memakai redesign.css. */
.v10 .about-stats{display:none}
.v10 .hero-poster{display:none}
.v10 .hp-ticker{display:none}

@media (max-width:720px){
  /* ASCII latar diturunkan supaya teks kartu tetap terbaca di layar sempit */
  .v10 .page.home .gascii{opacity:.26}

  /* video latar tetap berjalan di mobile; shade tipis supaya teks enak dibaca tanpa menutup animasi */
  .v10.home-body .vbg{display:block}
  .v10.home-body .vbg::after{
    background:linear-gradient(180deg,rgba(5,5,6,.34) 0%,rgba(5,5,6,.12) 30%,rgba(5,5,6,.34) 70%,rgba(5,5,6,.62) 100%)
  }
  .v10.home-body .page.home{
    background:linear-gradient(180deg,rgba(5,5,6,.44) 0%,rgba(5,5,6,.28) 24%,rgba(5,5,6,.5) 60%,rgba(5,5,6,.84) 100%)
  }
  .v10 .hero{grid-template-columns:1fr;padding:0 0 8px;gap:13px}
  .v10 .hero-poster{
    position:relative;display:block;width:100vw;margin:0 calc(50% - 50vw) 0;
    height:188px;border:0;border-radius:0;overflow:hidden;background:#07080a;
    touch-action:pan-y;-webkit-user-select:none;user-select:none
  }
  .v10 .hero-poster::after{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    border-top:1px solid rgba(229,232,237,.55);
    border-bottom:1px solid rgba(229,232,237,.38)
  }
  .v10 .hero-poster .hp-slide{
    position:absolute;inset:0;display:flex;align-items:flex-end;
    background-position:center;background-size:cover;background-repeat:no-repeat;
    opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s
  }
  .v10 .hero-poster .hp-slide::before{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(90deg,rgba(5,5,6,.92) 0%,rgba(5,5,6,.72) 46%,rgba(5,5,6,.26) 100%),
      linear-gradient(180deg,rgba(5,5,6,.3) 0%,rgba(5,5,6,.04) 42%,rgba(5,5,6,.62) 100%)
  }
  .v10 .hero-poster .hp-1{background-image:url(../assets/bg.jpg);background-position:center 22%}
  .v10 .hero-poster .hp-2{
    background-image:
      radial-gradient(120% 120% at 100% 18%,rgba(229,232,237,.16),rgba(229,232,237,0) 58%),
      linear-gradient(145deg,#0c0e12 0%,#15181e 55%,#08090c 100%)
  }
  .v10 .hero-poster .hp-2::after{
    content:"10";position:absolute;right:-30px;bottom:-34px;
    font-size:7rem;font-weight:900;line-height:1;letter-spacing:-.06em;
    color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.14);pointer-events:none
  }
  .v10 .hero-poster .hp-3{
    background-image:
      radial-gradient(120% 120% at 8% 6%,rgba(229,232,237,.2),rgba(229,232,237,0) 56%),
      linear-gradient(158deg,#171b22 0%,#0b0d11 58%,#050506 100%)
  }
  .v10 .hero-poster .hp-3 .hp-title em{display:block}
  .v10 .hero-poster .hp-4{
    background-image:
      radial-gradient(120% 120% at 92% 12%,rgba(232,200,119,.18),rgba(232,200,119,0) 60%),
      linear-gradient(152deg,#14120d 0%,#0c0b09 58%,#050506 100%)
  }
  .v10 .hero-poster .hp-4::after{
    content:"4.1";position:absolute;right:-22px;bottom:-30px;
    font-size:6.4rem;font-weight:900;line-height:1;letter-spacing:-.06em;
    color:transparent;-webkit-text-stroke:1px rgba(232,200,119,.2);pointer-events:none
  }
  .v10 .hero-poster .hp-slide.on{opacity:1;visibility:visible;z-index:1;transition:opacity .6s ease}
  .v10 .hp-in{position:relative;z-index:1;width:100%;max-width:322px;padding:18px 20px 26px}
  .v10 .hp-eyebrow{
    display:flex;align-items:center;gap:8px;margin:0 0 7px;
    font-family:var(--mono);font-size:.5rem;font-weight:600;letter-spacing:.2em;
    color:#cdd2da;text-transform:uppercase
  }
  .v10 .hp-eyebrow::before{content:"";width:18px;height:1px;flex:none;background:linear-gradient(90deg,var(--silver),rgba(229,232,237,0))}
  .v10 .hp-title{
    margin:0;font-size:1.2rem;line-height:1.1;font-weight:800;letter-spacing:-.015em;
    text-transform:none;color:#fff
  }
  .v10 .hp-title em{
    font-style:normal;color:transparent;-webkit-text-fill-color:transparent;
    background:linear-gradient(96deg,#fff 0%,#c9ced6 42%,#8f959f 58%,#e9ebee 100%);
    -webkit-background-clip:text;background-clip:text
  }
  .v10 .hp-desc{margin:7px 0 0;font-size:.72rem;line-height:1.45;color:#c6cbd3}
  .v10 .hp-desc s{color:#8f959f}
  .v10 .hp-desc b{color:#e8c877;font-weight:600}
  .v10 .hp-actions{display:flex;align-items:center;gap:10px;margin-top:11px}
  .v10 .hp-start{flex:none;font-family:var(--mono);font-size:.54rem;font-weight:600;letter-spacing:.1em;color:#c6cbd3;text-transform:uppercase}
  .v10 .hp-start b{color:#e8c877;font-weight:600}
  .v10 .hp-actions .hp-cta{margin-top:0;flex:none}
  .v10 .hp-cta{margin-top:11px;min-height:36px;padding:.55em 1em;font-size:.54rem;letter-spacing:.14em}
  .v10 .hp-dots{position:absolute;left:50%;bottom:9px;z-index:2;display:flex;gap:6px;transform:translateX(-50%)}
  .v10 .hp-dot{width:18px;height:3px;padding:0;border:0;border-radius:2px;background:rgba(255,255,255,.3);cursor:pointer}
  .v10 .hp-dot.on{width:26px;background:#fff}
  .v10 .hp-dot:focus-visible{outline:1px solid #fff;outline-offset:3px}
  /* notifikasi berjalan tepat di bawah banner (geser dari kiri ke kanan) */
  .v10 .hp-ticker{
    position:relative;display:block;width:100vw;margin:-13px calc(50% - 50vw) 0;height:24px;
    overflow:hidden;background:linear-gradient(180deg,rgba(16,18,22,.9),rgba(6,7,9,.94));
    border-bottom:1px solid rgba(229,232,237,.14);
    -webkit-backdrop-filter:blur(10px) saturate(130%);
    backdrop-filter:blur(10px) saturate(130%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)
  }
  /* info YOURSCRIPT mengisi celah antara header dan banner (lebih kecil, arah kanan→kiri) */
  .v10 .hp-info{
    margin:0 calc(50% - 50vw) -13px;height:24px;
    background:linear-gradient(180deg,rgba(23,26,32,.94),rgba(9,11,14,.96));
    border-top:0;border-bottom:1px solid rgba(229,232,237,.14)
  }
  .v10 .hp-track{display:flex;align-items:center;height:100%;width:max-content;animation:hpTick 130s linear infinite;will-change:transform}
  .v10 .hp-info .hp-track{animation-name:hpInfo;animation-duration:70s}
  .v10 .hp-tick{display:inline-flex;align-items:center;gap:6px;padding:0 11px;font-family:var(--mono);font-size:.45rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;color:rgba(229,232,237,.6)}
  .v10 .hp-tick+.hp-tick{border-left:1px solid rgba(229,232,237,.12)}
  .v10 .hp-tick b{font-weight:600;color:#e8eaee}
  .v10 .hp-mark{width:8px;height:9px;flex:none;color:rgba(229,232,237,.52)}
  @keyframes hpTick{from{transform:translateX(-50%)}to{transform:translateX(0)}}
  @keyframes hpInfo{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (hover:hover){.v10 .hp-ticker:hover .hp-track{animation-play-state:paused}}
  @media (prefers-reduced-motion:reduce){.v10 .hp-track,.v10 .hp-info .hp-track{animation:none}}
  /* judul hero tampil sebagai slide banner; teks asli tetap terbaca mesin/AT */
  .v10 .hero-copy{
    position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;pointer-events:none
  }
  .v10 .hero-console{grid-area:auto}

  /* ---------- header ---------- */
  .v10 .site-head{
    width:100%;margin:0;padding:12px 16px 11px;
    background:linear-gradient(180deg,rgba(38,42,50,.46) 0%,rgba(10,12,16,.36) 100%);
    border-bottom:1px solid rgba(229,232,237,.18);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    backdrop-filter:blur(18px) saturate(160%);
    box-shadow:0 12px 28px rgba(0,0,0,.38)
  }
  .v10 .brand svg{height:34px}
  .v10 .brand-word{font-size:1rem;letter-spacing:.1em}
  .v10 .coba{min-height:33px;padding:.42em .7em;font-size:.52rem}
  .v10 .coba small{font-size:.4rem}

  /* ---------- beranda: hero (ukuran mengikuti referensi) ---------- */
  .v10 .hero h1{font-size:clamp(1.75rem,8.4vw,2.1rem);line-height:.98;letter-spacing:-.01em;color:#fff;text-shadow:none}
  .v10 .hero-sub{font-size:.75rem;letter-spacing:.16em;margin-top:7px;color:#c9ced6;text-shadow:none}
  .v10 .hero-eyebrow{margin:9px 0 0}
  .v10 .hero-slogan{margin:7px 0 0;font-size:.84rem;line-height:1.45}
  .v10 .hero-meta,.v10 .cta-note{display:none}
  .v10 .hero-console .cta-key{margin-top:9px}
  .v10 .hero-console .console{border-radius:16px}
  .v10 .console-head{padding:9px 12px;font-size:.5rem}
  .v10 .script.console pre{font-size:.64rem;line-height:1.55;padding:12px}
  .v10 .copyrow{padding:0}
  .v10 #copy-btn{min-height:46px;font-size:.6rem;letter-spacing:.16em}
  .v10 .cta-key{min-height:52px;font-size:.72rem;border-radius:14px}
  .v10 .cta-note{font-size:.58rem;line-height:1.5}

  /* ---------- beranda: promo ---------- */
  .v10 .promo-banner{padding:16px;border-radius:16px;margin-top:2px}
  .v10 .pb-head{gap:8px}
  .v10 .pb-title{font-size:.95rem}
  .v10 .pb-desc{font-size:.76rem}
  .v10 .pb-perks{gap:5px}
  .v10 .pb-perks li{font-size:.7rem}
  .v10 .promo-banner .pb-cta{min-height:46px;font-size:.62rem}

  /* ---------- beranda: nav 2 kolom ---------- */
  .v10 .home-links{margin-top:10px}
  .v10 .links{grid-template-columns:1fr 1fr;gap:8px}
  .v10 .links .fx{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    min-height:62px;padding:10px 8px;text-align:center;white-space:normal;
    font-size:.62rem;line-height:1.3;letter-spacing:.05em
  }
  .v10 .links .fx::before,.v10 .links .fx::after{display:none}
  .v10 .links .fx .nav-in{display:flex;flex-direction:column;align-items:center;gap:6px}
  .v10 .links .fx .ui-ico{width:18px;height:18px}
  .v10 .links .fx#btn-prompt .ui-ico{width:24px;height:24px;padding:3.5px}
  .v10 .links .fx.sp{grid-column:1/-1;flex-direction:row;min-height:46px;font-size:.64rem}
  .v10 .links #btn-ref{width:100%}
  .v10 .links .fx.sp .nav-in{flex-direction:row;gap:8px}

  /* ---------- beranda: tentang ---------- */
  .v10 .home-about{margin-top:26px;padding-top:20px;gap:14px}
  .v10 .home-about .eyebrow{display:none}
  .v10 .home-about h2{font-size:1.3rem;letter-spacing:-.02em}
  .v10 .home-about h2 span{font-size:.58rem;margin-bottom:8px}
  .v10 .home-about>div>p{display:none}
  .v10 .fx.home-more{width:100%;min-height:46px;margin-top:14px;font-size:.62rem}
  .v10 .about-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
  .v10 .about-stats>div{padding:12px;text-align:center}
  .v10 .about-stats b{display:block;font-size:1.35rem;font-weight:800;line-height:1.1}
  .v10 .about-stats span{display:block;margin-top:4px;font-size:.52rem;letter-spacing:.12em;color:var(--faint)}
  .v10 .about-list{grid-template-columns:1fr 1fr;gap:8px}
  .v10 .about-list li{padding:12px}
  .v10 .about-list b{font-size:.7rem}
  .v10 .about-list span{font-size:.64rem;line-height:1.5;margin-top:3px}
  .v10 .about-support b{font-size:.7rem}
  .v10 .about-support span{font-size:.64rem;line-height:1.5}

  /* ---------- subpage: header ringkas ---------- */
  .v10 .sub-wrap{padding-top:18px;padding-bottom:40px;gap:16px}
  .v10 .sub-rail .fx-back{min-height:38px;margin-bottom:16px;font-size:.58rem}
  .v10 .sub-rail h1{font-size:clamp(1.5rem,7.4vw,1.9rem);line-height:1.08;letter-spacing:-.02em}
  .v10 .sub-rail .lead{font-size:.8rem;line-height:1.55;margin-top:8px;max-width:none}
  .v10 .rail-meta{display:none}
  .v10 .sub-content .body{gap:12px}

  /* ---------- kartu umum ---------- */
  .v10 .box,.v10 .order-note,.v10 .receipt{padding:16px;border-radius:16px}
  .v10 .box h4{font-size:.68rem;letter-spacing:.12em}
  .v10 .box .row{font-size:.78rem;padding:7px 0}

  /* ---------- halaman order ---------- */
  .v10 .flow-line{display:none}
  .v10 .order-grid{gap:14px}
  .v10 .order-main,.v10 .order-side{gap:12px}
  .v10 .order-main .sec{font-size:.62rem;letter-spacing:.16em;margin:8px 0 2px}
  .v10 .opts{grid-template-columns:1fr 1fr;gap:8px}
  .v10 .opt{
    flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:64px;padding:10px 8px;border-radius:13px;text-align:center
  }
  .v10 .opt b{font-size:.72rem;justify-content:center;gap:5px}
  .v10 .opt b .pi,.v10 .opt b .ico{width:15px;height:15px}
  .v10 .opt small{font-size:.7rem}
  .v10 .opt.wide{grid-column:auto}
  .v10 .opt.prod{grid-column:1/-1}
  .v10 .opt.life{grid-column:1/-1;flex-direction:row;justify-content:center;gap:8px;min-height:56px}
  .v10 .opt.life small{margin-left:auto}
  .v10 .opt.life .opt-badge{right:12px}
  .v10 .opt.promo-card{grid-column:1/-1;display:block;min-height:0;padding:13px 15px 13px 20px;text-align:left}
  .v10 .promo-card .vc-code{font-size:.92rem;letter-spacing:.1em}
  .v10 .promo-card .vc-top{font-size:.54rem}
  .v10 .promo-card .vc-top em{font-size:.5rem}
  .v10 .promo-card .vc-foot small{font-size:.6rem;letter-spacing:.02em}
  .v10 .promo-card .vc-price{font-size:.82rem}
  .v10 .tab-card .tab-toggle{padding:14px 14px;min-height:54px}
  .v10 .tab-card .tab-fn{margin:0 14px 10px}
  .v10 .tab-card .feat{margin:0 14px 14px}
  .v10 .box.pay{padding:16px}
  .v10 .pay h5,.v10 .ref-box h5{margin:12px 0 6px;font-size:.58rem}
  .v10 .pay .opt{grid-column:1/-1;flex-direction:row;justify-content:center;min-height:48px}
  .v10 .ys-in{min-height:50px;border-radius:13px;padding:12px 13px}
  .v10 .proof-pick{border-radius:13px;padding:16px 12px;min-height:52px;font-size:.72rem}
  .v10 .pay-num{border-radius:13px;padding:12px}
  .v10 .order-main .send,.v10 .order-side .send{min-height:54px;border-radius:15px;font-size:.72rem}
  .v10 .hint{font-size:.68rem}

  /* ---------- status pesanan ---------- */
  .v10 .receipt{padding:16px}
  .v10 #o-card{gap:12px}
  .v10 .ostep b{font-size:.58rem}
  .v10 .ostep .odot{width:32px;height:32px}
  .v10 .osteps::before{top:15px}
  .v10 .o-actions{grid-template-columns:1fr;gap:8px}
  .v10 #o-refresh,.v10 #o-copy-link{min-height:44px}

  /* ---------- syarat / FAQ ---------- */
  .v10 .qa-btn{min-height:50px;padding:13px 14px;font-size:.76rem}
  .v10 .collapse-in p{font-size:.76rem;line-height:1.6;padding:0 14px 14px}
  .v10 .warranty-block{border-color:var(--gold-line)!important}
  .v10 .w-head h2{font-size:.78rem}
  .v10 .warranty p,.v10 .legal-body .box p,.v10 .legal-body .box li{font-size:.78rem;line-height:1.6}

  /* ---------- referral ---------- */
  .v10 .wa-group{gap:11px;margin-bottom:12px;padding:12px 13px;border-radius:14px}
  .v10 .wa-group .wa-ico{width:38px;height:38px}
  .v10 .wa-group .wa-txt b{font-size:.62rem;letter-spacing:.1em}
  .v10 .wa-group .wa-txt small{font-size:.64rem}
  .v10 .wa-group .wa-go{width:16px;height:16px}
  .v10 .ref-hero{gap:8px;margin-bottom:12px}
  .v10 .ref-hero-card{padding:12px;border-radius:14px}
  .v10 .ref-hero-card b{font-size:1.4rem}
  .v10 .ref-hero-card span{font-size:.5rem;margin-top:4px}
  .v10 .ref-tabs{gap:8px}
  .v10 .ref-tabs .opt{min-height:48px}
  .v10 .ref-stats{gap:8px}
  .v10 .ref-stats .box{border-radius:14px;padding:11px}
  .v10 .ref-prog-track{height:4px;border-radius:9px}
  .v10 .ref-prog-fill{border-radius:9px}
  .v10 .ref-prog-lbl{font-size:.54rem}
  .v10 .fld{margin-bottom:10px}
  .v10 .ref-lbl{font-size:.72rem}
  .v10 .ref-agree{font-size:.72rem}
  .v10 .ref-notes li{font-size:.7rem}
  .v10 .ref-link b{font-size:1.25rem}

  /* ---------- penjelasan fitur ---------- */
  .v10 .tab-card{padding:16px 0}
  .v10 .tab-card h2{font-size:.86rem}
  .v10 .feat li b{font-size:.74rem}
  .v10 .feat li span{font-size:.7rem}

  /* ---------- footer ---------- */
  .v10 .legal{padding:18px 0 24px;gap:8px 14px;font-size:.64rem}
  .v10 .legal::before{font-size:.5rem}
}