/* ===================================================================================== TEMPLATE TOKO — 12 tampilan siap pakai untuk toko reseller. [NEW 2026-09-24] Dipasang di atas tema iOS (tema/toko-ios.css) lewat atribut di : data-tpl="" -> warna, huruf, sudut khas template data-tpl-head="solid" -> bar atas berwarna penuh (ala marketplace) data-tpl-card="tall|list" -> kartu produk gambar-besar / baris (ala Amazon) data-tpl-hero="banner" -> kepala toko berupa kartu berwarna (ala halaman toko marketplace) Template 'ios' = tanpa atribut = tampilan iOS standar. Daftar: tema/toko-template-list.js ===================================================================================== */ /* ---------- A. MODE UMUM (dipakai beberapa template) ---------- */ /* A1. bar atas berwarna penuh */ html.tios[data-tpl-head="solid"] #app header::before{opacity:1!important;background:var(--tp-head-bg)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important} html.tios[data-tpl-head="solid"] #app header .storeName{color:var(--tp-head-ink)!important} html.tios[data-tpl-head="solid"].ios-bigtitle #app header .brand{opacity:1;transform:none;pointer-events:auto} html.tios[data-tpl-head="solid"] #app header .logo{box-shadow:0 0 0 2px rgba(255,255,255,.7)!important} html.tios[data-tpl-head="solid"] #app header .iconbtn{background:rgba(255,255,255,.18)!important;color:var(--tp-head-ink)!important} html.tios[data-tpl-head="solid"] #app header .saldo{background:rgba(255,255,255,.2)!important;color:var(--tp-head-ink)!important} html.tios[data-tpl-head="solid"] #app header{margin-bottom:12px!important} /* A2. kartu produk gambar besar di atas (ala marketplace) */ html.tios[data-tpl-card="tall"] .pcard:not(.pcard-compact):not(.pcard-large){padding:0 0 12px!important;overflow:hidden;gap:6px} html.tios[data-tpl-card="tall"] .pcard:not(.pcard-compact):not(.pcard-large) .ptop{flex-direction:column;align-items:stretch;gap:8px;padding-right:0} html.tios[data-tpl-card="tall"] .pcard:not(.pcard-compact):not(.pcard-large) .pic{width:100%!important;height:auto!important;aspect-ratio:1;border-radius:0!important;font-size:44px;box-shadow:none!important} html.tios[data-tpl-card="tall"] .pcard:not(.pcard-compact):not(.pcard-large) .ptop > div{padding:0 10px} html.tios[data-tpl-card="tall"] .pcard:not(.pcard-compact):not(.pcard-large) > :not(.ptop):not(.pwish-btn):not(.pbadges){margin-left:10px!important;margin-right:10px!important} html.tios[data-tpl-card="tall"] .pcard:not(.pcard-compact):not(.pcard-large) .pdesc{display:none} html.tios[data-tpl-card="tall"] .pcard .pbadges{position:absolute;top:8px;left:8px;z-index:2;padding-right:0!important;margin:0!important} html.tios[data-tpl-card="tall"] .pcard h3{font-size:14px!important;font-weight:500!important;-webkit-line-clamp:2} html.tios[data-tpl-card="tall"] .pcard .pnow{font-size:16px!important} html.tios[data-tpl-card="tall"] .pcard .pwish-btn{background:rgba(255,255,255,.85)!important;color:#555!important} html.tios[data-tpl-card="tall"] .pcard .pwish-btn.on{color:#FF3B30!important} /* A3. kartu produk berupa baris (gambar kiri, info kanan) */ html.tios[data-tpl-card="list"] #prodGridInner,html.tios[data-tpl-card="list"] .pgrid:not(:has(.pcard-grid)){grid-template-columns:1fr!important;gap:10px!important} html.tios[data-tpl-card="list"] .pcard:not(.pcard-grid):not(.pcard-large){display:grid!important;grid-template-columns:112px minmax(0,1fr);column-gap:14px;row-gap:4px;align-content:start;padding:12px!important} html.tios[data-tpl-card="list"] .pcard:not(.pcard-grid):not(.pcard-large) .ptop{display:contents} html.tios[data-tpl-card="list"] .pcard:not(.pcard-grid):not(.pcard-large) .pic{grid-column:1;grid-row:1 / span 8;width:112px!important;height:112px!important;border-radius:6px!important} html.tios[data-tpl-card="list"] .pcard:not(.pcard-grid):not(.pcard-large) > *:not(.pic):not(.pwish-btn):not(.ptop),html.tios[data-tpl-card="list"] .pcard:not(.pcard-grid):not(.pcard-large) .ptop > div:not(.pic){grid-column:2;min-width:0} html.tios[data-tpl-card="list"] .pcard:not(.pcard-grid):not(.pcard-large) .ptop > div:not(.pic){padding-right:30px} html.tios[data-tpl-card="list"] .pcard .pnow{font-size:20px!important;font-weight:600!important} @media(min-width:900px){html.tios[data-tpl-card="list"] #prodGridInner{grid-template-columns:repeat(auto-fill,minmax(440px,1fr))!important}} /* A4. kepala toko berupa kartu berwarna */ html.tios[data-tpl-hero="banner"] .tp-hero:not(.compact){padding:18px!important;margin:4px 0 18px!important;border-radius:var(--r-card)!important;background:var(--tp-hero-bg)!important;color:var(--tp-hero-ink)!important;box-shadow:var(--tp-hero-shadow,none)!important;overflow:hidden} html.tios[data-tpl-hero="banner"] .tp-hero:not(.compact) .tp-hero-logo{width:76px!important;height:76px!important;border-radius:50%!important;box-shadow:0 0 0 3px var(--tp-hero-ring,rgba(255,255,255,.75))!important} html.tios[data-tpl-hero="banner"] .tp-hero:not(.compact) .tp-hero-logo > div{border-radius:50%!important} html.tios[data-tpl-hero="banner"] .tp-hero .tp-hero-id h2,html.tios[data-tpl-hero="banner"] .tp-hero p{color:var(--tp-hero-ink)!important} html.tios[data-tpl-hero="banner"] .tp-hero .tp-hero-live,html.tios[data-tpl-hero="banner"] .tp-hero-stats span{color:var(--tp-hero-ink)!important;opacity:.8} html.tios[data-tpl-hero="banner"] .tp-hero-stats b,html.tios[data-tpl-hero="banner"] .tp-hero-stats b svg{color:var(--tp-hero-ink)!important} html.tios[data-tpl-hero="banner"] .tp-hero-stats,html.tios[data-tpl-hero="banner"] .tp-hero-stats > div{border-color:var(--tp-hero-line,rgba(255,255,255,.28))!important} html.tios[data-tpl-hero="banner"] .tp-hero-cta .a{background:var(--tp-hero-cta-bg,#fff)!important;color:var(--tp-hero-cta-ink,var(--tint))!important} html.tios[data-tpl-hero="banner"] .tp-hero-cta .b{background:rgba(255,255,255,.22)!important;color:var(--tp-hero-ink)!important} /* A5. pita pratinjau (dibuka dari galeri template) */ .tk-tpl-preview{position:fixed;left:50%;bottom:calc(var(--bnav-h,0px) + 14px);transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:9px 10px 9px 16px;border-radius:99px; background:rgba(20,20,22,.92);color:#fff;font:500 13.5px var(--ios-font,system-ui);box-shadow:0 12px 30px -10px rgba(0,0,0,.5);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} .tk-tpl-preview span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tk-tpl-preview button{flex:0 0 auto;padding:6px 14px;border:0;border-radius:99px;background:#fff;color:#000;font:600 13px var(--ios-font,system-ui);cursor:pointer} /* template dengan skema tetap: sembunyikan pilihan terang/gelap (warnanya bagian dari template) */ html[data-tpl-scheme] #themeToggleBtn,html[data-tpl-scheme] .tkp-seg.small,html[data-tpl-scheme] .tkp-sec:has(+ .tkp-seg.small){display:none!important} /* ===================================================================================== B. TEMPLATE ===================================================================================== */ /* ---------- 1. Oranye Mall (ref. Shopee) ---------- */ html.tios[data-tpl="oranye"]{ --bg:#F5F5F5!important;--bg2:#FFFFFF!important;--glass:#FFFFFF!important;--txt:#222222!important;--mut:rgba(0,0,0,.54)!important;--line:rgba(0,0,0,.09)!important; --ios-cell:#FFFFFF;--ios-sheet:#F5F5F5;--ios-elev:#FFFFFF;--ios-sep:rgba(0,0,0,.09);--ios-fill:rgba(238,77,45,.08);--ios-fill2:rgba(0,0,0,.04);--ios-label3:rgba(0,0,0,.3); --ios-bar:rgba(255,255,255,.96);--ios-shadow:0 1px 1px rgba(0,0,0,.05);--ios-tint:#EE4D2D!important;--ios-on-tint:#FFFFFF!important; --r-card:4px;--r-cell:4px;--r-btn:4px;--ios-font:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; --tp-head-bg:linear-gradient(-180deg,#F53D2D,#F63);--tp-head-ink:#fff;--tp-hero-bg:linear-gradient(135deg,#F53D2D,#FF7337);--tp-hero-ink:#fff;--tp-hero-cta-ink:#EE4D2D} html.tios[data-tpl="oranye"] .pcard .pnow{color:#EE4D2D!important;font-weight:500!important} html.tios[data-tpl="oranye"] .pcard .btn-primary{border-radius:2px!important;background:#EE4D2D!important;color:#fff!important;font-weight:500!important;font-size:14px!important} html.tios[data-tpl="oranye"] .tab{border-radius:2px!important} html.tios[data-tpl="oranye"] .tab.on{background:#EE4D2D!important} html.tios[data-tpl="oranye"] .searchbar{background:#fff!important;border:2px solid #EE4D2D!important;border-radius:2px!important} html.tios[data-tpl="oranye"] .pcard .pbdg.flash{background:#FFD424!important;color:#EE4D2D!important} /* ---------- 2. Hijau Pasar (ref. Tokopedia) ---------- */ html.tios[data-tpl="hijau"]{ --bg:#FFFFFF!important;--bg2:#FFFFFF!important;--glass:#FFFFFF!important;--txt:#212121!important;--mut:#6D7588!important;--line:#E4EBF5!important; --ios-cell:#FFFFFF;--ios-sheet:#F3F4F5;--ios-elev:#FFFFFF;--ios-sep:#E4EBF5;--ios-fill:#F0F3F7;--ios-fill2:#F7F9FB;--ios-label3:#9FA6B0; --ios-bar:rgba(255,255,255,.94);--ios-shadow:0 1px 6px rgba(49,53,59,.12);--ios-tint:#03AC0E!important;--ios-on-tint:#FFFFFF!important; --r-card:10px;--r-cell:10px;--r-btn:8px;--ios-font:"Open Sans","Nunito Sans","Segoe UI",Roboto,Arial,sans-serif; --tp-hero-bg:linear-gradient(120deg,#03AC0E,#00AA5B 60%,#0D9488);--tp-hero-ink:#fff;--tp-hero-cta-ink:#03AC0E} html.tios[data-tpl="hijau"] .pcard{box-shadow:0 1px 6px rgba(49,53,59,.12)!important} html.tios[data-tpl="hijau"] .pcard .pnow{font-weight:800!important} html.tios[data-tpl="hijau"] .pcard .btn-primary{border-radius:8px!important;background:transparent!important;color:#03AC0E!important;box-shadow:inset 0 0 0 1px #03AC0E!important;font-weight:700!important;font-size:14px!important} html.tios[data-tpl="hijau"] .btn-primary{border-radius:8px!important} html.tios[data-tpl="hijau"] .tab{background:#fff!important;box-shadow:inset 0 0 0 1px #E4EBF5!important} html.tios[data-tpl="hijau"] .tab.on{background:#03AC0E!important;box-shadow:none!important} html.tios[data-tpl="hijau"] .searchbar{background:#fff!important;box-shadow:inset 0 0 0 1px #E4EBF5!important;border-radius:8px!important} /* ---------- 3. Samudra Prime (ref. Amazon) ---------- */ html.tios[data-tpl="samudra"]{ --bg:#EAEDED!important;--bg2:#FFFFFF!important;--glass:#FFFFFF!important;--txt:#0F1111!important;--mut:#565959!important;--line:#D5D9D9!important; --ios-cell:#FFFFFF;--ios-sheet:#F7F8F8;--ios-elev:#FFFFFF;--ios-sep:#D5D9D9;--ios-fill:#F0F2F2;--ios-fill2:#F7F8F8;--ios-label3:#8D9096; --ios-bar:rgba(255,255,255,.96);--ios-shadow:none;--ios-tint:#007185!important;--ios-on-tint:#FFFFFF!important; --r-card:8px;--r-cell:8px;--r-btn:100px;--ios-font:"Amazon Ember",Arial,"Helvetica Neue",sans-serif; --tp-head-bg:#131921;--tp-head-ink:#fff;--tp-hero-bg:linear-gradient(180deg,#232F3E,#37475A);--tp-hero-ink:#fff;--tp-hero-cta-bg:#FFD814;--tp-hero-cta-ink:#0F1111} html.tios[data-tpl="samudra"] .pcard{box-shadow:none!important;border:1px solid #D5D9D9!important} html.tios[data-tpl="samudra"] .pcard h3{font-weight:400!important;font-size:15px!important;color:#0F1111!important} html.tios[data-tpl="samudra"] .pcard .pnow{font-weight:500!important;letter-spacing:-.01em} html.tios[data-tpl="samudra"] .btn-primary,html.tios[data-tpl="samudra"] .pcard .btn-primary,html.tios[data-tpl="samudra"] .ios-get{background:#FFD814!important;color:#0F1111!important;border-radius:100px!important;box-shadow:0 2px 5px rgba(213,217,217,.5)!important;font-weight:500!important} html.tios[data-tpl="samudra"] .tp-hero-cta .a{background:#FFD814!important;color:#0F1111!important} html.tios[data-tpl="samudra"] .tab{border-radius:8px!important;background:#fff!important;box-shadow:inset 0 0 0 1px #D5D9D9!important;color:#0F1111!important} html.tios[data-tpl="samudra"] .tab.on{background:#232F3E!important;color:#fff!important;box-shadow:none!important} html.tios[data-tpl="samudra"] .searchbar{background:#fff!important;border-radius:8px!important;box-shadow:inset 0 0 0 2px #FEBD69!important} html.tios[data-tpl="samudra"] .pcard .pstok{color:#007600!important} /* ---------- 4. Shop Hitam (ref. TikTok Shop) ---------- */ html.tios[data-tpl="shophitam"]{ --bg:#000000!important;--bg2:#121212!important;--glass:#161616!important;--txt:#FFFFFF!important;--mut:rgba(255,255,255,.6)!important;--line:rgba(255,255,255,.1)!important; --ios-cell:#161616;--ios-sheet:#121212;--ios-elev:#1E1E1E;--ios-sep:rgba(255,255,255,.1);--ios-fill:rgba(255,255,255,.1);--ios-fill2:rgba(255,255,255,.06);--ios-label3:rgba(255,255,255,.35); --ios-bar:rgba(0,0,0,.82);--ios-shadow:none;--ios-tint:#FE2C55!important;--ios-on-tint:#FFFFFF!important; --r-card:12px;--r-cell:12px;--r-btn:6px;--ios-font:"TikTok Sans","Proxima Nova",Inter,system-ui,sans-serif; --tp-hero-bg:linear-gradient(120deg,#FE2C55 0%,#9B1BFF 55%,#25F4EE 130%);--tp-hero-ink:#fff;--tp-hero-cta-bg:#fff;--tp-hero-cta-ink:#000} html.tios[data-tpl="shophitam"] .pcard .pnow{color:#FE2C55!important;font-weight:800!important} html.tios[data-tpl="shophitam"] .pcard .btn-primary{background:#FE2C55!important;color:#fff!important;border-radius:6px!important;font-weight:700!important} html.tios[data-tpl="shophitam"] .pcard .pbdg.flash{background:#25F4EE!important;color:#000!important} html.tios[data-tpl="shophitam"] .tab.on{background:#fff!important;color:#000!important} html.tios[data-tpl="shophitam"] h1,html.tios[data-tpl="shophitam"] h2,html.tios[data-tpl="shophitam"] .tp-hero-id h2{font-weight:800!important} /* ---------- 5. Pop Pink (ref. Lazada) ---------- */ html.tios[data-tpl="pop"]{ --bg:#F3F4FA!important;--bg2:#FFFFFF!important;--glass:#FFFFFF!important;--txt:#1A1C4B!important;--mut:#6A6D8F!important;--line:#E3E4F0!important; --ios-cell:#FFFFFF;--ios-sheet:#F3F4FA;--ios-elev:#FFFFFF;--ios-sep:#E3E4F0;--ios-fill:rgba(245,49,127,.09);--ios-fill2:#F6F7FC;--ios-label3:#A3A5C0; --ios-bar:rgba(255,255,255,.95);--ios-shadow:0 4px 14px -8px rgba(26,28,107,.25);--ios-tint:#F5317F!important;--ios-on-tint:#FFFFFF!important; --r-card:16px;--r-cell:14px;--r-btn:12px;--ios-font:"Poppins","Nunito",system-ui,sans-serif; --tp-head-bg:linear-gradient(90deg,#1A1C6B,#6A1FA8 55%,#F5317F);--tp-head-ink:#fff;--tp-hero-bg:linear-gradient(120deg,#1A1C6B,#7B1FA2 55%,#F5317F);--tp-hero-ink:#fff;--tp-hero-cta-ink:#F5317F; --tp-hero-shadow:0 18px 40px -22px rgba(245,49,127,.7)} html.tios[data-tpl="pop"] .pcard .pnow{color:#F5317F!important;font-weight:700!important} html.tios[data-tpl="pop"] .pcard .btn-primary{background:linear-gradient(90deg,#FF7A00,#F5317F)!important;color:#fff!important;font-weight:600!important} html.tios[data-tpl="pop"] .btn-primary{background:linear-gradient(90deg,#FF7A00,#F5317F)!important} html.tios[data-tpl="pop"] .tab.on{background:linear-gradient(90deg,#1A1C6B,#F5317F)!important} /* ---------- 6. Biru Korporat (ref. Blibli & Traveloka) ---------- */ html.tios[data-tpl="biru"]{ --bg:#F2F6FB!important;--bg2:#FFFFFF!important;--glass:#FFFFFF!important;--txt:#1B2733!important;--mut:#62707E!important;--line:#DCE4EE!important; --ios-cell:#FFFFFF;--ios-sheet:#F2F6FB;--ios-elev:#FFFFFF;--ios-sep:#DCE4EE;--ios-fill:rgba(0,149,218,.09);--ios-fill2:#F5F8FC;--ios-label3:#9AA7B4; --ios-bar:rgba(255,255,255,.95);--ios-shadow:0 2px 10px -4px rgba(3,18,26,.12);--ios-tint:#0095DA!important;--ios-on-tint:#FFFFFF!important; --r-card:12px;--r-cell:10px;--r-btn:10px;--ios-font:"Nunito Sans","Segoe UI",Roboto,Arial,sans-serif; --tp-head-bg:#0095DA;--tp-head-ink:#fff;--tp-hero-bg:linear-gradient(135deg,#0064D2,#0095DA 60%,#1BA0E2);--tp-hero-ink:#fff;--tp-hero-cta-ink:#0064D2} html.tios[data-tpl="biru"] .pcard .pnow{color:#F37021!important;font-weight:700!important} html.tios[data-tpl="biru"] .pcard .btn-primary{background:#0095DA!important;color:#fff!important;border-radius:10px!important;font-weight:700!important} html.tios[data-tpl="biru"] .tab.on{background:#0095DA!important} /* ---------- 7. Arena Neon (ref. Codashop & UniPin) ---------- */ html.tios[data-tpl="arena"]{ --bg:#07070F!important;--bg2:#101024!important;--glass:#12122A!important;--txt:#EDEBFF!important;--mut:rgba(237,235,255,.62)!important;--line:rgba(120,110,255,.22)!important; --ios-cell:#12122A;--ios-sheet:#0E0E22;--ios-elev:#17173A;--ios-sep:rgba(120,110,255,.22);--ios-fill:rgba(0,229,255,.1);--ios-fill2:rgba(255,255,255,.05);--ios-label3:rgba(237,235,255,.35); --ios-bar:rgba(7,7,15,.8);--ios-shadow:0 0 0 1px rgba(120,110,255,.22),0 14px 30px -20px rgba(0,229,255,.5);--ios-tint:#00E5FF!important;--ios-on-tint:#04121A!important; --r-card:14px;--r-cell:12px;--r-btn:10px;--ios-font:"Rajdhani","Exo 2","Orbitron",system-ui,sans-serif; --tp-hero-bg:linear-gradient(120deg,#1B0B3A,#2A0E5E 45%,#003A4A);--tp-hero-ink:#fff;--tp-hero-cta-bg:linear-gradient(90deg,#00E5FF,#FF2BD6);--tp-hero-cta-ink:#04121A; --tp-hero-shadow:0 0 0 1px rgba(0,229,255,.35),0 20px 50px -24px rgba(255,43,214,.6);--tp-hero-ring:rgba(0,229,255,.8)} html.tios[data-tpl="arena"] body{background:radial-gradient(900px 500px at 10% -10%,rgba(255,43,214,.16),transparent 60%),radial-gradient(900px 500px at 110% 10%,rgba(0,229,255,.14),transparent 60%),#07070F!important;background-attachment:fixed!important} html.tios[data-tpl="arena"] .pcard:hover{box-shadow:0 0 0 1px rgba(0,229,255,.6),0 16px 36px -18px rgba(0,229,255,.7)!important} html.tios[data-tpl="arena"] .pcard .pnow{color:#00E5FF!important;font-weight:700!important;text-shadow:0 0 12px rgba(0,229,255,.45)} html.tios[data-tpl="arena"] .btn-primary,html.tios[data-tpl="arena"] .pcard .btn-primary{background:linear-gradient(90deg,#00E5FF,#FF2BD6)!important;color:#04121A!important;font-weight:700!important;letter-spacing:.02em} html.tios[data-tpl="arena"] .tab.on{background:linear-gradient(90deg,#00E5FF,#FF2BD6)!important;color:#04121A!important} html.tios[data-tpl="arena"] h1,html.tios[data-tpl="arena"] h2,html.tios[data-tpl="arena"] h3{letter-spacing:.01em!important} /* ---------- 8. Galeri Putih (ref. Apple Store & Muji) ---------- */ html.tios[data-tpl="galeri"]{ --bg:#FFFFFF!important;--bg2:#FFFFFF!important;--glass:#F5F5F7!important;--txt:#1D1D1F!important;--mut:#6E6E73!important;--line:#E8E8ED!important; --ios-cell:#F5F5F7;--ios-sheet:#FFFFFF;--ios-elev:#FFFFFF;--ios-sep:#E8E8ED;--ios-fill:#F0F0F2;--ios-fill2:#F7F7F8;--ios-label3:#AEAEB2; --ios-bar:rgba(255,255,255,.86);--ios-shadow:none;--ios-tint:#1D1D1F!important;--ios-on-tint:#FFFFFF!important; --r-card:20px;--r-cell:14px;--r-btn:99px} html.tios[data-tpl="galeri"] .pcard{background:transparent!important;box-shadow:none!important} html.tios[data-tpl="galeri"] .pcard .pic{background:#F5F5F7!important;border-radius:20px!important} html.tios[data-tpl="galeri"] .pcard h3{font-weight:600!important;font-size:15px!important} html.tios[data-tpl="galeri"] .pcard .btn-primary{background:#1D1D1F!important;color:#fff!important} html.tios[data-tpl="galeri"] .tp-hero-logo{box-shadow:none!important} html.tios[data-tpl="galeri"] .tp-hero-id h2{font-size:30px!important;letter-spacing:-.04em!important} html.tios[data-tpl="galeri"] .tab{background:transparent!important;color:#6E6E73!important} html.tios[data-tpl="galeri"] .tab.on{background:#1D1D1F!important;color:#fff!important} html.tios[data-tpl="galeri"] .tp-trust span{box-shadow:none!important;background:#F5F5F7!important} /* ---------- 9. Butik Kayu (ref. Etsy & butik lokal) ---------- */ html.tios[data-tpl="butik"]{ --bg:#F6F0E6!important;--bg2:#FFFDF8!important;--glass:#FFFDF8!important;--txt:#2E2418!important;--mut:#7A6A55!important;--line:#E6DAC6!important; --ios-cell:#FFFDF8;--ios-sheet:#F6F0E6;--ios-elev:#FFFDF8;--ios-sep:#E6DAC6;--ios-fill:rgba(139,94,60,.09);--ios-fill2:#FBF6EE;--ios-label3:#B3A38C; --ios-bar:rgba(246,240,230,.9);--ios-shadow:0 1px 0 #E6DAC6;--ios-tint:#8B5E3C!important;--ios-on-tint:#FFFDF8!important; --r-card:6px;--r-cell:6px;--r-btn:4px} html.tios[data-tpl="butik"] .pcard{box-shadow:none!important;border:1px solid #E6DAC6!important} html.tios[data-tpl="butik"] h1,html.tios[data-tpl="butik"] h2,html.tios[data-tpl="butik"] h3,html.tios[data-tpl="butik"] .storeName,html.tios[data-tpl="butik"] .tp-hero-id h2,html.tios[data-tpl="butik"] .ios-sec,html.tios[data-tpl="butik"] .tkp-large{font-family:"Playfair Display",Georgia,"Times New Roman",serif!important;letter-spacing:0!important;font-weight:600!important} html.tios[data-tpl="butik"] .pcard h3{font-size:16px!important} html.tios[data-tpl="butik"] .pcard .pnow{font-family:Georgia,serif!important;font-weight:600!important;color:#8B5E3C!important} html.tios[data-tpl="butik"] .pcard .btn-primary{border-radius:4px!important;background:transparent!important;color:#8B5E3C!important;box-shadow:inset 0 0 0 1px #8B5E3C!important;text-transform:none} html.tios[data-tpl="butik"] .tab{border-radius:4px!important;background:transparent!important;box-shadow:inset 0 0 0 1px #E6DAC6!important} html.tios[data-tpl="butik"] .tab.on{background:#8B5E3C!important;box-shadow:none!important} html.tios[data-tpl="butik"] .tp-hero-logo,html.tios[data-tpl="butik"] .tp-hero-logo > div{border-radius:50%!important} /* ---------- 10. Neo Brutal (ref. Gumroad & Figma Community) ---------- */ html.tios[data-tpl="brutal"]{ --bg:#FFF3B0!important;--bg2:#FFFFFF!important;--glass:#FFFFFF!important;--txt:#000000!important;--mut:#3A3A3A!important;--line:#000000!important; --ios-cell:#FFFFFF;--ios-sheet:#FFF3B0;--ios-elev:#FFFFFF;--ios-sep:#000000;--ios-fill:#FFFFFF;--ios-fill2:#FFF9D6;--ios-label3:#6B6B6B; --ios-bar:rgba(255,243,176,.95);--ios-shadow:4px 4px 0 #000;--ios-tint:#000000!important;--ios-on-tint:#FFFFFF!important; --r-card:10px;--r-cell:10px;--r-btn:8px;--ios-font:"Space Grotesk","Archivo","Arial Black",system-ui,sans-serif; --tp-hero-bg:#FF90E8;--tp-hero-ink:#000;--tp-hero-cta-bg:#000;--tp-hero-cta-ink:#fff;--tp-hero-shadow:5px 5px 0 #000;--tp-hero-ring:#000;--tp-hero-line:#000} html.tios[data-tpl="brutal"] .pcard,html.tios[data-tpl="brutal"] .tp-hero,html.tios[data-tpl="brutal"] .searchbar,html.tios[data-tpl="brutal"] .tp-trust span,html.tios[data-tpl="brutal"] .rv-card,html.tios[data-tpl="brutal"] .rv-summary,html.tios[data-tpl="brutal"] .ios-group,html.tios[data-tpl="brutal"] .tkp-group,html.tios[data-tpl="brutal"] .tkp-wallet{border:2px solid #000!important} html.tios[data-tpl="brutal"] .pcard{box-shadow:4px 4px 0 #000!important} html.tios[data-tpl="brutal"] .pcard:active{transform:translate(2px,2px)!important;box-shadow:2px 2px 0 #000!important} html.tios[data-tpl="brutal"] .pcard .pic{box-shadow:inset 0 0 0 2px #000!important} html.tios[data-tpl="brutal"] .btn,html.tios[data-tpl="brutal"] .pcard .btn-primary,html.tios[data-tpl="brutal"] .tab{border:2px solid #000!important;box-shadow:3px 3px 0 #000!important;font-weight:800!important} html.tios[data-tpl="brutal"] .btn-primary,html.tios[data-tpl="brutal"] .pcard .btn-primary{background:#FF90E8!important;color:#000!important} html.tios[data-tpl="brutal"] .tab{background:#fff!important;color:#000!important} html.tios[data-tpl="brutal"] .tab.on{background:#23A094!important;color:#000!important} html.tios[data-tpl="brutal"] .pcard .pnow{font-weight:900!important} html.tios[data-tpl="brutal"] h1,html.tios[data-tpl="brutal"] h2,html.tios[data-tpl="brutal"] .tp-hero-id h2{font-weight:900!important;letter-spacing:-.02em!important} html.tios[data-tpl="brutal"] .modal{border:2px solid #000!important;border-bottom:0!important} /* ---------- 11. Kaca Aurora (ref. glassmorphism & macOS) ---------- */ html.tios[data-tpl="aurora"]{ --bg:#0B0820!important;--bg2:#15112E!important;--glass:rgba(255,255,255,.07)!important;--txt:#F4F2FF!important;--mut:rgba(244,242,255,.64)!important;--line:rgba(255,255,255,.14)!important; --ios-cell:rgba(255,255,255,.07);--ios-sheet:#15112E;--ios-elev:#1D1840;--ios-sep:rgba(255,255,255,.12);--ios-fill:rgba(255,255,255,.1);--ios-fill2:rgba(255,255,255,.05);--ios-label3:rgba(244,242,255,.36); --ios-bar:rgba(15,11,38,.55);--ios-shadow:inset 0 0 0 1px rgba(255,255,255,.12);--ios-tint:#A78BFA!important;--ios-on-tint:#140A2E!important; --r-card:22px;--r-cell:16px;--r-btn:14px} html.tios[data-tpl="aurora"] body{background:radial-gradient(800px 520px at 0% 0%,rgba(139,92,246,.45),transparent 60%),radial-gradient(700px 520px at 100% 20%,rgba(20,184,166,.35),transparent 60%),radial-gradient(900px 600px at 50% 110%,rgba(236,72,153,.28),transparent 60%),#0B0820!important;background-attachment:fixed!important} html.tios[data-tpl="aurora"] .pcard,html.tios[data-tpl="aurora"] .tp-trust span,html.tios[data-tpl="aurora"] .rv-card,html.tios[data-tpl="aurora"] .rv-summary,html.tios[data-tpl="aurora"] .searchbar{-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%)} html.tios[data-tpl="aurora"] .modal{--ios-cell:rgba(255,255,255,.08)} html.tios[data-tpl="aurora"] .pcard .pnow{color:#fff!important} html.tios[data-tpl="aurora"] .btn-primary,html.tios[data-tpl="aurora"] .pcard .btn-primary{background:linear-gradient(135deg,#A78BFA,#5EEAD4)!important;color:#140A2E!important} html.tios[data-tpl="aurora"] .tab.on{background:linear-gradient(135deg,#A78BFA,#5EEAD4)!important;color:#140A2E!important} @media(prefers-reduced-motion:reduce){html.tios[data-tpl="brutal"] .pcard:active{transform:none!important}} /* ===================================================================================== C. TATA LETAK PER TEMPLATE [2026-09-24 tahap 2] ===================================================================================== */ /* ---------- C1. bar atas ---------- */ /* kolom cari di bar atas (ala marketplace) */ .tk-hsearch{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:0;border-radius:var(--tp-hs-r,8px);background:var(--tp-hs-bg,var(--ios-fill));color:var(--tp-hs-ink,var(--mut));font:400 14px var(--ios-font,system-ui);cursor:text;text-align:left;box-shadow:var(--tp-hs-shadow,none)} .tk-hsearch span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html.tios[data-tpl-hlay="search"] #app header .brand{flex:0 0 auto!important;max-width:34%} html.tios[data-tpl-hlay="search"] #app header .storeName{display:none} html.tios[data-tpl-hlay="search"].ios-bigtitle #app header .brand{opacity:1;transform:none} html.tios[data-tpl-head="solid"] .tk-hsearch{--tp-hs-bg:#fff;--tp-hs-ink:#757575} /* logo & nama toko di tengah (ala butik / Apple) */ html.tios[data-tpl-hlay="center"] #app header{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center} html.tios[data-tpl-hlay="center"] #app header .brand{grid-column:2;justify-self:center;opacity:1!important;transform:none!important;pointer-events:auto!important} html.tios[data-tpl-hlay="center"] #app header .hdr-actions{grid-column:3;justify-self:end} html.tios[data-tpl-hlay="center"] #app header .storeName{font-size:18px;letter-spacing:.02em} /* ---------- C2. kepala toko ---------- */ /* shop: kartu toko bersampul (ala halaman toko Shopee) */ html.tios[data-tpl-hero="shop"] .tp-hero:not(.compact){position:relative;display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:12px;padding:64px 14px 14px!important;margin:0 0 14px!important;border-radius:var(--r-card);background:var(--ios-cell)!important;box-shadow:var(--ios-shadow)!important;overflow:hidden} html.tios[data-tpl-hero="shop"] .tp-hero:not(.compact)::before{content:''!important;display:block!important;position:absolute;left:0;right:0;top:0;height:92px;background:var(--tp-hero-bg);z-index:0} html.tios[data-tpl-hero="shop"] .tp-hero > *{position:relative;z-index:1} html.tios[data-tpl-hero="shop"] .tp-hero-logo{grid-row:1 / span 2!important;width:68px!important;height:68px!important;border-radius:50%!important;box-shadow:0 0 0 3px #fff,0 4px 12px rgba(0,0,0,.18)!important} html.tios[data-tpl-hero="shop"] .tp-hero-logo > div{border-radius:50%!important} html.tios[data-tpl-hero="shop"] .tp-hero-id{padding-top:0!important;align-self:end} html.tios[data-tpl-hero="shop"] .tp-hero-id h2{color:#fff!important;font-size:18px!important;text-shadow:0 1px 3px rgba(0,0,0,.25)} html.tios[data-tpl-hero="shop"] .tp-hero-live{color:rgba(255,255,255,.9)!important} html.tios[data-tpl-hero="shop"] .tp-hero-cta{grid-column:2;margin-top:8px!important} html.tios[data-tpl-hero="shop"] .tp-hero-cta .a{background:var(--tint)!important;color:#fff!important;border-radius:4px!important} html.tios[data-tpl-hero="shop"] .tp-hero-cta .b{background:transparent!important;box-shadow:inset 0 0 0 1px var(--tint)!important;color:var(--tint)!important;border-radius:4px!important} html.tios[data-tpl-hero="shop"] .tp-hero-stats{margin-top:14px!important} html.tios[data-tpl-hero="shop"] .tp-hero-stats b{color:var(--tint)!important} html.tios[data-tpl-hero="shop"] .tp-hero p{font-size:13.5px!important;color:var(--mut)!important} /* strip: baris toko ringkas (ala Tokopedia / Amazon) */ html.tios[data-tpl-hero="strip"] .tp-hero:not(.compact){display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:12px 14px!important;margin:0 0 14px!important;border-radius:var(--r-card);background:var(--tp-strip-bg,var(--ios-cell))!important;box-shadow:var(--ios-shadow)!important} html.tios[data-tpl-hero="strip"] .tp-hero-logo{grid-row:auto!important;width:52px!important;height:52px!important;border-radius:50%!important} html.tios[data-tpl-hero="strip"] .tp-hero-logo > div{border-radius:50%!important;font-size:22px!important} html.tios[data-tpl-hero="strip"] .tp-hero-id{grid-column:2;padding:0!important;align-self:center} html.tios[data-tpl-hero="strip"] .tp-hero-id h2{font-size:17px!important;color:var(--tp-strip-ink,var(--txt))!important} html.tios[data-tpl-hero="strip"] .tp-hero-live{font-size:13px!important;color:var(--tp-strip-mut,var(--mut))!important} html.tios[data-tpl-hero="strip"] .tp-hero-cta{grid-column:3;grid-row:1;margin:0!important} html.tios[data-tpl-hero="strip"] .tp-hero-cta .b{display:none!important} html.tios[data-tpl-hero="strip"] .tp-hero-cta .a{padding:7px 14px!important;font-size:14px!important;border-radius:8px!important} html.tios[data-tpl-hero="strip"] .tp-hero-stats{grid-column:1 / -1;margin:12px 0 0!important;padding-top:10px!important;border-top:.5px solid var(--ios-sep)!important} html.tios[data-tpl-hero="strip"] .tp-hero-stats b{font-size:16px!important;color:var(--tp-strip-ink,var(--txt))!important} html.tios[data-tpl-hero="strip"] .tp-hero-stats span{color:var(--tp-strip-mut,var(--mut))!important} html.tios[data-tpl-hero="strip"] .tp-hero p{display:none!important} /* center: profil / editorial di tengah (ala TikTok, butik, Apple) */ html.tios[data-tpl-hero="center"] .tp-hero:not(.compact){display:flex!important;flex-direction:column;align-items:center;text-align:center;padding:14px 8px 4px!important;margin:0 0 18px!important;background:transparent!important;box-shadow:none!important} html.tios[data-tpl-hero="center"] .tp-hero-logo{order:1;width:96px!important;height:96px!important;border-radius:50%!important} html.tios[data-tpl-hero="center"] .tp-hero-logo > div{border-radius:50%!important} html.tios[data-tpl-hero="center"] .tp-hero-id{order:2;padding:12px 0 0!important} html.tios[data-tpl-hero="center"] .tp-hero-id h2{justify-content:center;font-size:24px!important} html.tios[data-tpl-hero="center"] .tp-hero-live{justify-content:center} html.tios[data-tpl-hero="center"] .tp-hero-stats{order:3;width:100%;max-width:360px;margin:14px auto 0!important;padding-top:0!important;border-top:0!important} html.tios[data-tpl-hero="center"] .tp-hero-stats b{color:var(--txt)!important;font-size:19px!important} html.tios[data-tpl-hero="center"] .tp-hero-cta{order:4;justify-content:center;width:100%;max-width:360px;margin:16px auto 0!important} html.tios[data-tpl-hero="center"] .tp-hero-cta .a{flex:1;padding:10px 18px!important} html.tios[data-tpl-hero="center"] .tp-hero:not(.compact) .tp-hero-cta .b{width:42px!important;height:42px!important} html.tios[data-tpl-hero="center"] .tp-hero p{order:5;max-width:44ch;margin:14px auto 0!important;text-align:center;color:var(--mut)!important} /* bento: ubin-ubin (ala bento grid) */ html.tios[data-tpl-hero="bento"] .tp-hero:not(.compact){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0!important;margin:4px 0 18px!important;background:transparent!important} html.tios[data-tpl-hero="bento"] .tp-hero-logo{grid-column:1;grid-row:1 / span 2!important;width:100%!important;height:auto!important;aspect-ratio:1;border-radius:22px!important} html.tios[data-tpl-hero="bento"] .tp-hero-logo > div{border-radius:22px!important} html.tios[data-tpl-hero="bento"] .tp-hero-id{grid-column:2 / -1;padding:14px!important;border-radius:22px;background:var(--ios-cell);box-shadow:var(--ios-shadow)} html.tios[data-tpl-hero="bento"] .tp-hero-cta{grid-column:2 / -1;margin:0!important} html.tios[data-tpl-hero="bento"] .tp-hero-cta .a{flex:1} html.tios[data-tpl-hero="bento"] .tp-hero-stats{grid-column:1 / -1;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important;margin:0!important;padding:0!important;border:0!important} html.tios[data-tpl-hero="bento"] .tp-hero-stats > div{padding:14px 8px!important;border:0!important;border-radius:20px!important;background:var(--ios-cell)!important;box-shadow:var(--ios-shadow)} html.tios[data-tpl-hero="bento"] .tp-hero-stats b{color:var(--txt)!important;font-size:22px!important} html.tios[data-tpl-hero="bento"] .tp-hero p{grid-column:1 / -1;margin:0!important;padding:14px!important;border-radius:20px;background:var(--ios-cell);box-shadow:var(--ios-shadow)} /* brutal: kartu sedikit miring */ html.tios[data-tpl="brutal"] .tp-hero:not(.compact){transform:rotate(-1.2deg);margin-top:10px!important} html.tios[data-tpl="brutal"] .tp-hero:not(.compact) > *{transform:rotate(1.2deg)} /* ---------- C3. tab kategori ---------- */ html.tios[data-tpl-tabs]:not([data-tpl-tabs="pill"]) #catTabs .tp-tab-ind{display:none!important} html.tios[data-tpl-tabs]:not([data-tpl-tabs="pill"]) #catTabs.tp-ind-on .tab.on{background:var(--tp-tab-on-bg,transparent)!important} /* underline: teks + garis bawah (ala Shopee / TikTok) */ html.tios[data-tpl-tabs="underline"] #catTabs{gap:0!important;margin-bottom:12px!important;background:var(--ios-cell)!important;box-shadow:0 .5px 0 var(--ios-sep)!important} html.tios[data-tpl-tabs="underline"] #catTabs::before{opacity:1!important;background:var(--ios-cell)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important} html.tios[data-tpl-tabs="underline"] .tab{padding:12px 14px!important;border-radius:0!important;background:transparent!important;color:var(--mut)!important;box-shadow:none!important} html.tios[data-tpl-tabs="underline"] .tab.on,html.tios[data-tpl-tabs="underline"] #catTabs.tp-ind-on .tab.on{background:transparent!important;color:var(--tint)!important;box-shadow:inset 0 -2.5px 0 var(--tint)!important;font-weight:600!important} html.tios[data-tpl-tabs="underline"] .tab svg{display:none} /* outline: kapsul bergaris (ala Tokopedia) */ html.tios[data-tpl-tabs="outline"] .tab{background:transparent!important;box-shadow:inset 0 0 0 1px var(--ios-sep)!important;color:var(--txt)!important} html.tios[data-tpl-tabs="outline"] .tab.on,html.tios[data-tpl-tabs="outline"] #catTabs.tp-ind-on .tab.on{background:color-mix(in srgb,var(--tint) 10%,transparent)!important;box-shadow:inset 0 0 0 1.5px var(--tint)!important;color:var(--tint)!important} /* navbar: bilah navigasi gelap selebar layar (ala Amazon) */ html.tios[data-tpl-tabs="navbar"] #catTabs{gap:4px!important;margin-top:-12px!important;padding-top:8px!important;padding-bottom:8px!important} html.tios[data-tpl-tabs="navbar"] #catTabs::before{opacity:1!important;background:var(--tp-nav-bg,#232F3E)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important} html.tios[data-tpl-tabs="navbar"] .tab{background:transparent!important;color:#fff!important;box-shadow:none!important;border-radius:4px!important;padding:6px 10px!important;font-size:14px!important} html.tios[data-tpl-tabs="navbar"] .tab svg{color:#fff!important} html.tios[data-tpl-tabs="navbar"] .tab.on,html.tios[data-tpl-tabs="navbar"] #catTabs.tp-ind-on .tab.on{background:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 1px #fff!important;font-weight:700!important} /* text: tautan teks polos (ala butik / Apple) */ html.tios[data-tpl-tabs="text"] #catTabs{justify-content:safe center;gap:4px!important} html.tios[data-tpl-tabs="text"] .tab{background:transparent!important;color:var(--mut)!important;box-shadow:none!important;padding:8px 10px!important;font-size:15px!important} html.tios[data-tpl-tabs="text"] .tab svg{display:none} html.tios[data-tpl-tabs="text"] .tab.on,html.tios[data-tpl-tabs="text"] #catTabs.tp-ind-on .tab.on{background:transparent!important;color:var(--txt)!important;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px} /* tile: ubin layanan besar (ala Traveloka / Codashop) — tidak menempel, tampil sebagai menu */ html.tios[data-tpl-tabs="tile"] #catTabs{position:static!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px!important;overflow:visible!important;margin:0 0 16px!important;padding:0!important} html.tios[data-tpl-tabs="tile"] #catTabs::before{display:none!important} html.tios[data-tpl-tabs="tile"] .tab{flex-direction:column;justify-content:center;gap:8px!important;min-height:86px;padding:12px 6px!important;border-radius:var(--r-card)!important;background:var(--ios-cell)!important;box-shadow:var(--ios-shadow)!important;color:var(--txt)!important;font-size:13px!important;font-weight:600!important;text-align:center;white-space:normal;line-height:1.2} html.tios[data-tpl-tabs="tile"] .tab svg{width:26px!important;height:26px!important;color:var(--tint)!important} html.tios[data-tpl-tabs="tile"] .tab.on,html.tios[data-tpl-tabs="tile"] #catTabs.tp-ind-on .tab.on{background:var(--tint)!important;color:var(--on-tint)!important} html.tios[data-tpl-tabs="tile"] .tab.on svg{color:var(--on-tint)!important} @media(min-width:900px){html.tios[data-tpl-tabs="tile"] #catTabs{grid-template-columns:repeat(6,minmax(0,1fr))}} /* chunky: kapsul tebal (neo brutal) */ html.tios[data-tpl-tabs="chunky"] #catTabs{gap:10px!important;padding-bottom:12px!important} /* ---------- C4. susunan produk ---------- */ /* tall3: 3 kolom ala daftar game */ html.tios[data-tpl-grid="tall3"] #prodGridInner{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important} html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard{padding-bottom:10px!important} html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard h3{font-size:12.5px!important} html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard .ptop > div > div,html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard .pstok,html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard .pstrike{display:none!important} html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard .pnow{font-size:13px!important} html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard .btn-primary{padding:5px 6px!important;font-size:12px!important} html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard .pwish-btn{width:26px;height:26px;top:6px;right:6px} @media(min-width:900px){html.tios[data-tpl-grid="tall3"] #prodGridInner{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important}} /* portrait: gambar tegak 4:5 (ala TikTok Shop / butik) */ html.tios[data-tpl-grid="portrait"] .pcard:not(.pcard-compact):not(.pcard-large) .pic{aspect-ratio:4/5!important} html.tios[data-tpl="butik"] .pcard{text-align:center} html.tios[data-tpl="butik"] .pcard .pprices,html.tios[data-tpl="butik"] .pcard .pstok{justify-content:center} html.tios[data-tpl="shophitam"] .pcard .pic{position:relative} /* feature1: 1 produk besar per baris di HP, 3 kolom di PC (ala Apple Store) */ html.tios[data-tpl-grid="feature1"] #prodGridInner{grid-template-columns:1fr!important;gap:28px!important} html.tios[data-tpl-grid="feature1"] #prodGridInner .pcard .pic{aspect-ratio:4/3!important} html.tios[data-tpl-grid="feature1"] #prodGridInner .pcard h3{font-size:20px!important;font-weight:600!important;-webkit-line-clamp:2} html.tios[data-tpl-grid="feature1"] #prodGridInner .pcard .pdesc{display:-webkit-box!important;margin-top:2px} html.tios[data-tpl-grid="feature1"] #prodGridInner .pcard .pnow{font-size:17px!important} html.tios[data-tpl-grid="feature1"] #prodGridInner .pcard > div:last-child{max-width:220px} @media(min-width:900px){html.tios[data-tpl-grid="feature1"] #prodGridInner{grid-template-columns:repeat(3,minmax(0,1fr))!important}} /* bento: produk pertama besar (2x2), sisanya biasa */ html.tios[data-tpl-grid="bento"] #prodGridInner{grid-auto-flow:dense} html.tios[data-tpl-grid="bento"] #prodGridInner > .pcard:first-child{grid-column:span 2;grid-row:span 2} html.tios[data-tpl-grid="bento"] #prodGridInner > .pcard:first-child .pic{aspect-ratio:16/10!important} html.tios[data-tpl-grid="bento"] #prodGridInner > .pcard:first-child h3{font-size:20px!important} html.tios[data-tpl-grid="bento"] #prodGridInner > .pcard:nth-child(7n){grid-column:span 2} html.tios[data-tpl-grid="bento"] #prodGridInner > .pcard:nth-child(7n) .pic{aspect-ratio:16/8!important} /* ---------- C5. bagian tambahan ---------- */ #tkExtras{display:flex;flex-direction:column;gap:14px;margin:0 0 16px} /* ikon kategori */ .tk-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:12px 6px;padding:14px 8px;border-radius:var(--r-card);background:var(--ios-cell);box-shadow:var(--ios-shadow)} .tk-catgrid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--txt);font:500 12px/1.2 var(--ios-font,system-ui);cursor:pointer;text-align:center} .tk-catgrid i{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--tp-cat-r,50%);background:var(--tp-cat-bg,color-mix(in srgb,var(--tint) 12%,transparent));color:var(--tint);box-shadow:var(--tp-cat-shadow,none)} .tk-catgrid i svg{width:22px;height:22px} .tk-catgrid button:active i{transform:scale(.92)} /* rel produk (Flash Sale / Penawaran hari ini / Lagi viral) */ .tk-rail{border-radius:var(--r-card);background:var(--tp-rail-bg,var(--ios-cell));box-shadow:var(--ios-shadow);padding:12px 0 14px;overflow:hidden} .tk-rail-h{display:flex;align-items:center;gap:10px;padding:0 12px 10px} .tk-rail-h b{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--tp-rail-title,var(--tint))} .tk-more{margin-left:auto;display:inline-flex;align-items:center;gap:2px;padding:0;border:0;background:none;color:var(--tp-rail-link,var(--mut));font:500 13px var(--ios-font,system-ui);cursor:pointer} .tk-cd{display:inline-flex;gap:2px;align-items:center;font:700 12px var(--ios-font,system-ui);color:var(--txt)} .tk-cd i{display:inline-block;min-width:22px;padding:3px 0;border-radius:4px;background:var(--tp-cd-bg,#000);color:#fff;font-style:normal;text-align:center;font-variant-numeric:tabular-nums} .tk-rail-s{display:flex;gap:10px;overflow-x:auto;padding:0 12px;scroll-snap-type:x proximity;scrollbar-width:none} .tk-rail-s::-webkit-scrollbar{display:none} .tk-rc{flex:0 0 118px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0;border:0;background:none;color:var(--txt);text-align:left;cursor:pointer;font-family:var(--ios-font,system-ui)} .tk-rc .ph{position:relative;width:118px;height:118px;border-radius:calc(var(--r-card) - 2px);overflow:hidden;display:grid;place-items:center;background:var(--ios-fill2);font-size:36px;margin-bottom:4px} .tk-rc .ph img{width:100%;height:100%;object-fit:cover} .tk-rc .ph em{position:absolute;top:6px;right:6px;padding:2px 6px;border-radius:4px;background:var(--tp-disc-bg,#FFD424);color:var(--tp-disc-ink,#EE4D2D);font:800 11px var(--ios-font,system-ui);font-style:normal} .tk-rc .ph u{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font:800 12px var(--ios-font,system-ui);text-decoration:none} .tk-rc b{width:100%;font-size:12.5px;font-weight:500;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden} .tk-rc strong{font-size:14px;font-weight:700;color:var(--tp-rail-price,var(--tint));font-variant-numeric:tabular-nums} .tk-rc s{font-size:11.5px;color:var(--ios-label3)} .tk-rc .bar{position:relative;width:100%;height:16px;margin-top:4px;border-radius:99px;background:color-mix(in srgb,var(--tint) 22%,transparent);overflow:hidden} .tk-rc .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--tint),color-mix(in srgb,var(--tint) 70%,#FFD424))} .tk-rc .bar small{position:relative;display:block;text-align:center;font:700 10.5px/16px var(--ios-font,system-ui);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25)} .tk-trending .tk-rc{flex-basis:140px} .tk-trending .tk-rc .ph{width:140px;height:186px} .tk-deals .tk-rc{flex-basis:150px} .tk-deals .tk-rc .ph{width:150px;height:150px} .tk-deals .tk-rc .ph em{left:6px;right:auto;background:#CC0C39;color:#fff} /* warna bagian tambahan per template */ html.tios[data-tpl="oranye"]{--tp-rail-title:#EE4D2D;--tp-cat-r:14px;--tp-cat-bg:#FFF1EC} html.tios[data-tpl="oranye"] .tk-flash{background:linear-gradient(180deg,#FFF3EF,#fff 60%)} html.tios[data-tpl="hijau"]{--tp-cat-r:16px;--tp-cat-bg:#E5F9E7;--tp-rail-title:#212121;--tp-rail-price:#212121} html.tios[data-tpl="samudra"]{--tp-rail-title:#0F1111;--tp-rail-price:#0F1111;--tp-rail-link:#007185} html.tios[data-tpl="shophitam"]{--tp-rail-bg:transparent;--tp-rail-title:#fff;--tp-rail-price:#FE2C55} html.tios[data-tpl="shophitam"] .tk-rail{box-shadow:none;padding-left:0;padding-right:0} html.tios[data-tpl="pop"]{--tp-rail-bg:linear-gradient(135deg,#1A1C6B,#6A1FA8 60%,#F5317F);--tp-rail-title:#fff;--tp-rail-link:rgba(255,255,255,.85);--tp-rail-price:#fff;--tp-cd-bg:#fff;--tp-disc-bg:#fff;--tp-disc-ink:#F5317F} html.tios[data-tpl="pop"] .tk-rail .tk-rc{padding:8px;border-radius:14px;background:#fff} html.tios[data-tpl="pop"] .tk-rail .tk-rc strong{color:#F5317F} html.tios[data-tpl="pop"] .tk-rail .tk-rc b{color:#1A1C4B} html.tios[data-tpl="pop"] .tk-cd i{color:#F5317F} /* ---------- C6. penyesuaian kecil lain ---------- */ html.tios[data-tpl-tabs="tile"] #catTabs .tab{transform:none!important} html.tios[data-tpl="galeri"] #app .wrap{padding-left:20px;padding-right:20px} @media(prefers-reduced-motion:reduce){html.tios[data-tpl="brutal"] .tp-hero,html.tios[data-tpl="brutal"] .tp-hero > *{transform:none!important}} /* perbaikan: kartu toko bersampul — sampul menutupi logo + nama (teks putih terbaca), tombol di bawah sampul */ html.tios[data-tpl-hero="shop"] .tp-hero:not(.compact){padding-top:16px!important} html.tios[data-tpl-hero="shop"] .tp-hero:not(.compact)::before{height:100px!important} html.tios[data-tpl-hero="shop"] .tp-hero-id{align-self:center!important;padding-bottom:6px!important} html.tios[data-tpl-hero="shop"] .tp-hero-cta{grid-column:1 / -1!important;margin-top:16px!important} html.tios[data-tpl-hero="shop"] .tp-hero-cta .a{flex:1} /* perbaikan: kepala tengah benar-benar di tengah */ html.tios[data-tpl-hero="center"] .tp-hero-id{align-self:center!important;display:flex;flex-direction:column;align-items:center} html.tios[data-tpl-hero="shop"] .tp-hero-id,html.tios[data-tpl-hero="shop"] .tp-hero-logo,html.tios[data-tpl-hero="shop"] .tp-hero-stats,html.tios[data-tpl-hero="shop"] .tp-hero > p{position:relative;z-index:1} /* ---------- C7. tampilan PC per tata letak (menang atas aturan grid PC tema iOS) ---------- */ @media(min-width:900px){ html.tios[data-tpl-grid="list"] #app:not(.density-compact):not(.density-comfortable) #prodGridInner{grid-template-columns:repeat(auto-fill,minmax(440px,1fr))!important} html.tios[data-tpl-grid="tall3"] #app:not(.density-compact):not(.density-comfortable) #prodGridInner{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important} html.tios[data-tpl-grid="feature1"] #app:not(.density-compact):not(.density-comfortable) #prodGridInner{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:32px!important} html.tios[data-tpl-grid="portrait"] #app:not(.density-compact):not(.density-comfortable) #prodGridInner{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))!important} html.tios[data-tpl-grid="bento"] #app:not(.density-compact):not(.density-comfortable) #prodGridInner{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important} } @media(min-width:1024px){ /* kepala toko: batalkan susunan 3 kolom PC tema iOS untuk varian non-App-Store */ html.tios[data-tpl-hero="shop"] .tp-hero:not(.compact){grid-template-columns:auto minmax(0,1fr)!important} html.tios[data-tpl-hero="shop"] .tp-hero-stats,html.tios[data-tpl-hero="strip"] .tp-hero-stats{grid-column:1 / -1!important;grid-row:auto!important;align-self:auto!important} html.tios[data-tpl-hero="shop"] .tp-hero-stats{max-width:560px} html.tios[data-tpl-hero="shop"] .tp-hero-cta{max-width:560px} html.tios[data-tpl-hero="strip"] .tp-hero:not(.compact){grid-template-columns:auto minmax(0,1fr) auto!important} html.tios[data-tpl-hero="strip"] .tp-hero-stats{max-width:520px;margin-left:0!important} html.tios[data-tpl-hero="strip"] .tp-hero-logo{width:60px!important;height:60px!important} html.tios[data-tpl-hero="center"] .tp-hero-logo{width:120px!important;height:120px!important} html.tios[data-tpl-hero="center"] .tp-hero-id h2{font-size:34px!important} html.tios[data-tpl-hero="bento"] .tp-hero:not(.compact){grid-template-columns:170px repeat(3,minmax(0,1fr))!important;gap:14px} html.tios[data-tpl-hero="bento"] .tp-hero-logo{grid-column:1!important;grid-row:1 / span 2!important;width:170px!important;height:170px!important} html.tios[data-tpl-hero="bento"] .tp-hero-id{grid-column:2 / -1!important;grid-row:1!important} html.tios[data-tpl-hero="bento"] .tp-hero-cta{grid-column:2 / -1!important;grid-row:2!important;align-self:end} html.tios[data-tpl-hero="bento"] .tp-hero-stats{grid-column:1 / -1!important;grid-row:3!important;align-self:auto!important} html.tios[data-tpl-hero="bento"] .tp-hero p{grid-column:1 / -1!important;grid-row:4!important} .tk-catgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))} .tk-rc{flex-basis:150px}.tk-rc .ph{width:150px;height:150px} } /* ---------- C8. perbaikan tampilan HP (audit 360px) ---------- */ @media(max-width:430px){ /* kolom cari / logo tengah + sudah login: saldo cukup ikon dompet (angka saldo ada di Profil) */ html.tios[data-tpl-hlay="search"] #app header .saldo,html.tios[data-tpl-hlay="center"] #app header .saldo{width:34px;padding:0!important;justify-content:center;gap:0!important} html.tios[data-tpl-hlay="search"] #app header .saldo #saldoText,html.tios[data-tpl-hlay="center"] #app header .saldo #saldoText{display:none} html.tios[data-tpl-hlay="search"] #app header .hdr-actions{gap:6px} html.tios[data-tpl-hlay="search"] #app header .brand{max-width:none} /* daftar baris: harga tidak patah */ html.tios[data-tpl-card="list"] .pcard .pnow{font-size:17px!important} html.tios[data-tpl-card="list"] .pcard:not(.pcard-grid):not(.pcard-large){grid-template-columns:96px minmax(0,1fr);column-gap:12px} html.tios[data-tpl-card="list"] .pcard:not(.pcard-grid):not(.pcard-large) .pic{width:96px!important;height:96px!important} /* kartu gambar besar 2 kolom: harga & judul lebih ringkas */ html.tios[data-tpl-card="tall"] .pcard .pnow{font-size:14.5px!important} html.tios[data-tpl-card="tall"] .pcard .pprices{flex-wrap:wrap;row-gap:0} } /* 3 kolom: tombol disembunyikan (seluruh kartu bisa diketuk -> halaman produk), harga satu baris */ html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard > div:last-child:has(.btn){display:none!important} html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard .pnow{font-size:12.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard .pprices{flex-wrap:nowrap;min-width:0} html.tios[data-tpl-grid="tall3"] #prodGridInner .pcard{padding-bottom:8px!important} /* Butik: teks sekunder sedikit lebih gelap supaya terbaca di latar krem */ html.tios[data-tpl="butik"]{--ios-label3:#8E7B61;--mut:#6E5E48!important} /* logo tengah benar-benar di tengah walau tombol kanan bertambah (saat login) */ html.tios[data-tpl-hlay="center"] #app header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important} html.tios[data-tpl-hlay="center"] #app header .hdr-actions{gap:6px} html.tios[data-tpl-hlay="center"] #app header .brand{max-width:calc(100vw - 260px);min-width:0} html.tios[data-tpl-hlay="center"] #app header .storeName{min-width:0;overflow:hidden;text-overflow:ellipsis} @media(max-width:430px){html.tios[data-tpl-hlay="center"] #app header .iconbtn,html.tios[data-tpl-hlay="center"] #app header .saldo{width:32px;height:32px}}