/*
Theme Name: Arus
Theme URI: https://tokonaik.com
Author: TokoNaik
Description: Master template TokoNaik kategori elektronik & aksesoris. WooCommerce-ready, identitas per klien via Customizer.
Version: 1.0.5
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: arus
*/

@font-face{font-family:"Clash Display";src:url(assets/font/clash-display-600.woff2)format("woff2");font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:"IBM Plex Sans";src:url(assets/font/plex-sans.woff2)format("woff2");font-weight:100 700;font-display:swap;font-style:normal}
@font-face{font-family:"IBM Plex Mono";src:url(assets/font/plex-mono-500.woff2)format("woff2");font-weight:500;font-display:swap;font-style:normal}

:root{
  --navy:#0E2A47; --navy-tua:#071C33;
  --cyan:#00B8D4; --cyan-tua:#00707F; --cyan-gelap:#005A66;
  --amber:#E08A00;
  --latar:#F1F4F8; --putih:#FFFFFF; --tinta:#12202E; --abu:#5A6B7C; --garis:#DCE3EB;
  --abu-navy:#C9D4E0;
  --garis-terang:rgba(241,244,248,.20);
  --r-kartu:10px; --r-btn:8px; --r-bulat:999px;
  --seksi:96px; --seksi-hp:64px; --wrap:1200px; --wrap-pad:24px;
  --bayang-hover:0 6px 20px rgba(14,42,71,.12);
}
*{box-sizing:border-box}
body{margin:0;background:var(--latar);color:var(--tinta);
  font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Clash Display","IBM Plex Sans",sans-serif;font-weight:600;
  line-height:1.12;letter-spacing:-.01em;margin:0 0 16px}
h1{font-size:clamp(32px,5vw,54px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:20px}
p{margin:0 0 16px}
a{color:var(--cyan-tua)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--wrap-pad);padding-right:var(--wrap-pad)}
.seksi{padding-top:var(--seksi);padding-bottom:var(--seksi)}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;font-weight:500}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 20px;
  border-radius:var(--r-btn);border:1px solid transparent;font-weight:600;font-size:15px;
  text-decoration:none;cursor:pointer}
.btn-utama{background:var(--cyan-tua);color:var(--putih)}
.btn-utama:hover{background:var(--cyan-gelap)}
.btn-garis{background:transparent;color:var(--navy);border-color:var(--garis)}
.btn-garis:hover{border-color:var(--navy)}
.kartu{background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-kartu)}
.kartu:hover{box-shadow:var(--bayang-hover)}
@media(max-width:860px){
  .seksi{padding-top:var(--seksi-hp);padding-bottom:var(--seksi-hp)}
}
.lompat{position:absolute;left:-9999px;top:0;z-index:99;background:var(--navy);color:var(--putih);
  padding:12px 20px;border-radius:0 0 var(--r-btn) 0;text-decoration:none}
.lompat:focus{left:0}
.bilah{background:var(--navy);color:var(--putih);font-size:13px}
.bilah-in{padding-top:9px;padding-bottom:9px;display:flex;justify-content:center;text-align:center}
.kop{background:var(--putih);border-bottom:1px solid var(--garis);position:sticky;top:0;z-index:20}
.kop-in{display:flex;align-items:center;gap:20px;padding-top:14px;padding-bottom:14px}
.logo{font-family:"Clash Display",sans-serif;font-weight:600;font-size:24px;letter-spacing:.02em;
  color:var(--navy);text-decoration:none}
.cari{flex:1;display:flex;align-items:stretch;border:1px solid var(--garis);border-radius:var(--r-btn);
  background:var(--putih);overflow:hidden;min-height:46px;max-width:640px}
.cari-kat{border:0;border-right:1px solid var(--garis);background:var(--latar);color:var(--tinta);
  font:inherit;font-size:14px;padding:0 12px;cursor:pointer;max-width:170px}
.cari-teks{border:0;flex:1;font:inherit;font-size:15px;padding:0 14px;min-width:0}
.cari-teks:focus,.cari-kat:focus{outline:2px solid var(--cyan-tua);outline-offset:-2px}
.cari-btn{border:0;background:var(--cyan-tua);color:var(--putih);width:52px;display:flex;
  align-items:center;justify-content:center;cursor:pointer}
.kop-aksi{display:flex;align-items:center;gap:12px;margin-left:auto}
.btn-nav{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;
  color:var(--navy);text-decoration:none;font-weight:600;font-size:15px}
.cart-n{background:var(--navy);color:var(--putih);border-radius:var(--r-bulat);
  min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.kaki{background:var(--navy);color:var(--putih);margin-top:0}
.kaki-in{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding-top:64px;padding-bottom:48px}
.kaki .logo{color:var(--putih)}
.kaki-lead{color:var(--abu-navy);max-width:46ch}
.kaki-surat h3{color:var(--putih)}
.kaki-surat p{color:var(--abu-navy)}
.kaki .btn-garis{color:var(--putih);border-color:var(--garis-terang)}
.kaki .btn-garis:hover{border-color:var(--cyan)}
.kaki-bawah{display:flex;gap:16px;justify-content:space-between;padding-top:20px;padding-bottom:28px;
  border-top:1px solid var(--garis-terang);color:var(--abu-navy);font-size:14px}
@media(max-width:860px){
  .kop-in{flex-wrap:wrap;gap:12px}
  .cari{order:3;flex-basis:100%;max-width:none}
  .cari-kat{display:none}
  .btn-nav span:not(.ik){display:none}
  .kaki-in{grid-template-columns:1fr;gap:32px}
}
.hero{background:var(--putih);border-bottom:1px solid var(--garis)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  padding-top:72px;padding-bottom:72px}
.hero-lead{font-size:18px;color:var(--abu);max-width:52ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 24px}
.hero-chip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.hero-chip li{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--navy)}
.hero-chip .ik{color:var(--cyan-tua);width:18px;height:18px}
.hero-foto img{border-radius:var(--r-kartu);width:100%}
.kat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.kat-item a{display:block;padding:14px;text-align:center;text-decoration:none;color:var(--navy);
  font-weight:600;font-size:14px;min-height:44px}
.kat-item img{border-radius:6px;margin-bottom:10px;object-fit:cover;width:100%;height:110px}
@media(max-width:1000px){.kat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){
  .hero-in{grid-template-columns:1fr;gap:32px;padding-top:40px;padding-bottom:48px}
  .hero-foto{order:-1}
}
@media(max-width:560px){.kat-grid{grid-template-columns:repeat(2,1fr)}}
.garansi{background:var(--navy);color:var(--putih)}
.garansi h2{color:var(--putih)}
.garansi h2 + .garansi-lead{color:var(--abu-navy);max-width:58ch;margin-bottom:40px}
.garansi-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.garansi-kartu{border:1px solid var(--garis-terang);border-radius:var(--r-kartu);padding:28px}
.garansi-kartu .ik{color:var(--cyan);width:28px;height:28px;margin-bottom:14px}
.garansi-kartu h3{color:var(--putih);font-size:22px;margin-bottom:6px}
.garansi-status{color:var(--cyan);font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.garansi-klaim{color:var(--abu-navy);font-size:15px}
.garansi-tautan{color:var(--putih);font-size:14px;display:inline-block;min-height:44px;line-height:44px}
.garansi-tautan-mati{color:var(--abu-navy);font-size:14px}
.klaim-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.klaim-item{padding:28px}
.klaim-no{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border-radius:var(--r-bulat);background:var(--latar);color:var(--cyan-tua);font-size:16px;margin-bottom:14px}
.klaim-item p{color:var(--abu);margin-bottom:0}
.seksi-kop{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:32px}
.seksi-kop h2{margin-bottom:0}
.seksi-semua{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;
  text-decoration:none;min-height:44px}
.prod-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.prod-kartu{display:flex;flex-direction:column;overflow:hidden}
.prod-foto{position:relative;background:var(--putih);border-bottom:1px solid var(--garis)}
.prod-foto img{width:100%;height:220px;object-fit:contain;padding:16px}
.badge{position:absolute;top:12px;left:12px;background:var(--amber);color:var(--navy);
  font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--r-bulat);letter-spacing:.02em}
.prod-isi{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod-kat{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--abu);font-weight:600}
.prod-nama{font-size:16px;font-family:"IBM Plex Sans",sans-serif;font-weight:600;line-height:1.35;margin:0}
.prod-harga{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.harga{font-size:19px;color:var(--cyan-tua)}
.harga-coret{font-size:14px;color:var(--abu);text-decoration:line-through}
.chip-baris{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--navy);
  background:var(--latar);border-radius:var(--r-bulat);padding:4px 10px}
.chip .ik{width:14px;height:14px;color:var(--cyan-tua)}
.chip-tipis{font-weight:400;color:var(--abu);background:transparent;padding-left:0}
.prod-btn{margin-top:auto;justify-content:center}
.banner{background:var(--navy);color:var(--putih)}
.banner-in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
  padding-top:64px;padding-bottom:64px}
.banner h2{color:var(--putih)}
.banner p{color:var(--abu-navy);max-width:52ch}
.banner-foto img{border-radius:var(--r-kartu);width:100%}
.testi-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testi-item{padding:28px}
.testi-nama{margin-bottom:0;color:var(--abu);font-size:14px}
.trust{background:var(--navy-tua);color:var(--putih)}
.trust-grid{list-style:none;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:16px;
  padding-top:28px;padding-bottom:28px}
.trust-grid li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.trust-grid .ik{color:var(--cyan);flex:none}
.faq-in{max-width:800px}
.faq-item{border-bottom:1px solid var(--garis);padding:4px 0}
.faq-item summary{cursor:pointer;font-weight:600;font-size:17px;padding:16px 0;min-height:44px;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--cyan-tua);font-size:22px}
.faq-item[open] summary::after{content:"–"}
.faq-item p{color:var(--abu);padding-bottom:8px;max-width:70ch}
.cta-akhir{text-align:center}
.cta-in p{color:var(--abu);max-width:56ch;margin-left:auto;margin-right:auto}
@media(max-width:1000px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .banner-in{grid-template-columns:1fr;gap:28px;padding-top:48px;padding-bottom:48px}
  .seksi-kop{flex-direction:column;align-items:flex-start;gap:8px}
  .garansi-grid,.klaim-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){.prod-grid{grid-template-columns:1fr}}
/* Reset float bawaan WooCommerce. TANPA INI kartu produk cuma mengisi ~22%
   kolomnya di /koleksi/ dan di blok produk terkait. Tidak terlihat di harness
   lokal karena harness tidak memuat WooCommerce. */
.woocommerce ul.products,
.woocommerce-page ul.products{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  list-style:none;margin:0;padding:0}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{width:auto;float:none;margin:0;clear:none;
  background:var(--putih);border:1px solid var(--garis);border-radius:var(--r-kartu);padding:16px}
.woocommerce ul.products li.product:hover{box-shadow:var(--bayang-hover)}
.woocommerce ul.products li.product a img{margin-bottom:12px;border-radius:6px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:16px;font-weight:600;
  font-family:"IBM Plex Sans",sans-serif;line-height:1.35;padding:0;margin:0 0 6px}
.woocommerce .price{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.woocommerce ul.products li.product .price{color:var(--cyan-tua);font-size:19px;font-weight:500}
.woocommerce ul.products li.product .price del{color:var(--abu);font-size:14px}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce span.onsale{position:absolute;top:12px;left:12px;background:var(--amber);color:var(--navy);
  border-radius:var(--r-bulat);padding:4px 10px;font-size:12px;font-weight:600;min-height:0;line-height:1.5}
.woocommerce ul.products li.product .button{background:var(--cyan-tua);color:var(--putih);
  border-radius:var(--r-btn);font-weight:600;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;width:100%;margin-top:10px}
.woocommerce ul.products li.product .button:hover{background:var(--cyan-gelap)}
.woocommerce .star-rating span{color:var(--amber)}
.spek{margin-top:48px}
.spek-list{margin:0;padding:0;border-top:1px solid var(--garis);max-width:720px}
.spek-baris{display:flex;gap:20px;justify-content:space-between;padding:12px 0;
  border-bottom:1px solid var(--garis)}
.spek-baris dt{color:var(--abu);font-size:15px}
.spek-baris dd{margin:0;text-align:right;font-size:15px;color:var(--tinta)}
.akordion{margin-top:40px;max-width:720px}
.chip-single{margin:16px 0}
.wa-produk{margin-top:8px}
.product_meta .sku{font-family:"IBM Plex Mono",monospace}
/* Dropdown variasi (Kapasitas / Warna) — markup standar Woo, hanya di-styling. */
.woocommerce div.product form.cart .variations{border:0;margin-bottom:16px}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th{padding:6px 0;vertical-align:middle}
.woocommerce div.product form.cart .variations label{font-weight:600;color:var(--navy)}
.woocommerce div.product form.cart .variations select{min-height:44px;border:1px solid var(--garis);
  border-radius:var(--r-btn);background:var(--putih);font:inherit;font-size:15px;padding:0 12px}
.woocommerce div.product form.cart .variations select:focus{outline:2px solid var(--cyan-tua);outline-offset:-2px}
.woocommerce div.product .woocommerce-variation-price .price{color:var(--cyan-tua)}
@media(max-width:1000px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .woocommerce ul.products,.woocommerce-page ul.products{grid-template-columns:1fr}
  .spek-baris{flex-direction:column;gap:2px}
  .spek-baris dd{text-align:left}
}
/* Blok Woo Cart & Checkout — selector dibaca dari DOM sungguhan
   demo-gadget.tokonaik.com/keranjang/ & /checkout/ (keranjang terisi), bukan
   ditebak dari dokumentasi. */
.wc-block-cart,.wc-block-checkout{margin-top:24px}
.wc-block-components-sidebar-layout{gap:32px}
.wc-block-components-main{max-width:none}
.wc-block-cart-items{border-top:1px solid var(--garis)}
.wc-block-cart-items__header,.wc-block-cart-items__row{border-bottom:1px solid var(--garis);padding:16px 0}
.wc-block-cart-items__header{color:var(--abu);font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.wc-block-components-product-name{color:var(--tinta);font-weight:600}
.wc-block-components-product-metadata,.wc-block-components-product-details{color:var(--abu);font-size:14px}
.wc-block-cart-item__remove-link{color:var(--cyan-tua);font-size:14px}
.wc-block-components-formatted-money-amount,
.wc-block-formatted-money-amount,
.wc-block-components-product-price__value,
.wc-block-components-totals-item__value{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.wc-block-components-quantity-selector{border:1px solid var(--garis);border-radius:var(--r-btn);
  min-height:44px;overflow:hidden}
.wc-block-components-quantity-selector__button,
.wc-block-components-quantity-selector__input{min-height:44px;border:0;background:var(--putih);font:inherit}
.wc-block-components-quantity-selector__input{font-family:"IBM Plex Mono",monospace}
.wc-block-components-panel__button{min-height:44px;font-weight:600;color:var(--navy)}
.wc-block-components-totals-wrapper{border-top:1px solid var(--garis);padding-top:16px}
.wc-block-components-totals-item__label{color:var(--abu)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-weight:600;color:var(--tinta)}
.wc-block-components-totals-shipping .wc-block-components-totals-shipping__via{color:var(--abu);font-size:13px}
.wc-block-components-radio-control__option{border:1px solid var(--garis);border-radius:var(--r-btn);
  padding-top:12px;padding-bottom:12px;padding-right:14px;margin-bottom:8px}
.wc-block-components-radio-control__option--checked-option-highlighted{border-color:var(--cyan-tua)}
.wc-block-components-button{background:var(--cyan-tua);color:var(--putih);border-radius:var(--r-btn);
  min-height:44px;font-weight:600}
.wc-block-components-button:hover{background:var(--cyan-gelap)}
.wc-block-components-checkout-place-order-button{width:100%}
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-blocks-components-select select{border:1px solid var(--garis);border-radius:var(--r-btn);
  min-height:44px;font:inherit;font-size:15px}
.wc-block-components-text-input input:focus,
.wc-blocks-components-select select:focus{outline:2px solid var(--cyan-tua);outline-offset:-2px}
.wc-block-components-checkout-step__title{font-family:"Clash Display","IBM Plex Sans",sans-serif}
.wc-block-components-checkout-step__heading-content{color:var(--abu)}
.wc-block-components-notice-banner{border-radius:var(--r-btn)}
.wc-block-components-checkout-order-summary__title{border-bottom:1px solid var(--garis)}