/* Swapy.id — gaya bersama semua halaman */

:root{
  --bg:#ffffff;
  --surface:#f5f7fa;
  --surface2:#eceff4;
  --border:rgba(10,20,50,.09);
  --bh:rgba(10,20,50,.18);
  --accent:#1552F0;
  --accent-dk:#0B41C9;
  --accent-bg:rgba(21,82,240,.09);
  --accent-br:rgba(21,82,240,.28);
  --gold:#FFC629;
  --text:#0B1B3F;
  --muted:#6B7A99;
  --dim:#3A4A6B;
  --red:#DC2626;
  --green:#16A34A;
  --r:16px;
  --rs:10px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:linear-gradient(145deg,#c7d9ff 0%,#dde7ff 20%,#eef3ff 50%,#f7faff 75%,#ffffff 100%);
  background-attachment:fixed;
  color:var(--text);
  font-family:'DM Sans',system-ui,sans-serif;
  min-height:100vh;font-size:15px;line-height:1.6;padding-bottom:100px;
  overflow-x:hidden;
}
h1,h2,h3,h4,.logo-text,.sc-title,.bs-label,.trust-title{font-family:'Sora',system-ui,sans-serif;letter-spacing:-.02em}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}

/* --- Header + navigasi ---------------------------------------------------- */
header{
  padding:16px 40px;border-bottom:.5px solid var(--border);display:flex;align-items:center;
  justify-content:space-between;gap:16px;position:sticky;top:0;
  background:rgba(255,255,255,.92);backdrop-filter:blur(20px);z-index:100
}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0}
.logo-img{height:34px;width:auto;object-fit:contain}
.logo-text{font-weight:800;font-size:19px;color:var(--accent);display:none}

.nav-tabs{
  display:flex;background:rgba(255,255,255,.25);backdrop-filter:blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);border-radius:50px;
  box-shadow:0 4px 16px rgba(10,20,50,.07),inset 0 1px 0 rgba(255,255,255,.8);
  padding:4px;white-space:nowrap
}
.nav-tab{
  font-weight:700;font-size:12.5px;padding:8px 16px;border-radius:40px;cursor:pointer;border:none;
  background:transparent;color:var(--dim);transition:all .2s;text-decoration:none;display:inline-flex;align-items:center
}
.nav-tab:hover{color:var(--accent)}
.nav-tab.active{background:var(--accent);color:#fff}

.head-act{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-mob{display:none}

/* --- Tombol ---------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;font-size:14px;padding:12px 22px;border-radius:var(--rs);
  text-decoration:none;border:none;cursor:pointer;transition:transform .15s,background .15s,border-color .15s
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dk)}
.btn-gold{background:var(--gold);color:var(--text)}
.btn-gold:hover{background:#E5A800}
.btn-ghost{background:transparent;color:var(--dim);border:.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--bh);color:var(--text)}
.btn-sm{font-size:12.5px;padding:9px 16px}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* --- Layout ---------------------------------------------------------------- */
.wrap{padding:24px 40px 60px;max-width:1000px;margin:0 auto}
.wrap-narrow{max-width:560px}
.sec{margin-bottom:28px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:12px}
.bs-label{font-size:16px;font-weight:800}
.see-all{font-size:12.5px;font-weight:700;color:var(--accent);text-decoration:none;flex-shrink:0}

.card{background:rgba(255,255,255,.75);border:.5px solid var(--border);border-radius:var(--r);padding:20px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid2>*{min-width:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid3>*{min-width:0}

/* --- Hero ------------------------------------------------------------------ */
.hero{text-align:center;padding:14px 0 26px}
.hero h1{font-size:clamp(25px,4.5vw,40px);font-weight:800;margin-bottom:12px;line-height:1.15}
.hero h1 em{color:var(--accent);font-style:normal}
.hero p{font-size:14.5px;color:var(--dim);max-width:540px;margin:0 auto 22px}
.hero-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* --- Poster carousel -------------------------------------------------------- */
.poster{position:relative;margin-bottom:26px}
.poster-track{position:relative;padding-top:calc(100% * 5 / 12);border-radius:var(--r);overflow:hidden;background:var(--surface2)}
.poster-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s;display:none}
.poster-slide.active{opacity:1;display:block}
.poster-slide img{width:100%;height:100%;object-fit:cover}
.poster-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  border:2px dashed var(--accent-br);background:var(--accent-bg);color:var(--accent);padding:24px;text-align:center;font-size:13px;font-weight:600}
.poster-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.poster-dot{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;cursor:pointer;transition:all .25s;padding:0}
.poster-dot.active{background:var(--accent);width:22px;border-radius:4px}

/* --- Trust strip ------------------------------------------------------------ */
.trust{display:flex;background:rgba(255,255,255,.7);border:.5px solid var(--border);border-radius:var(--r);margin-bottom:22px;overflow:hidden}
.trust-item{flex:1;padding:15px 14px;min-width:0}
.trust-div{width:.5px;background:var(--border);flex-shrink:0}
.trust-title{font-size:12px;font-weight:800;margin-bottom:3px}
.trust-desc{font-size:11px;color:var(--muted);line-height:1.5}

/* --- Kartu produk ----------------------------------------------------------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.prod-grid>*{min-width:0}
.prod-card{background:rgba(255,255,255,.85);border:.5px solid var(--border);border-radius:var(--r);
  overflow:hidden;text-decoration:none;display:block;transition:border-color .2s,transform .2s}
.prod-card:hover{border-color:var(--accent-br);transform:translateY(-2px)}
.prod-img{background:var(--surface2);display:flex;align-items:center;justify-content:center;padding:14px;height:145px;position:relative}
.prod-img img{max-width:78%;max-height:120px;object-fit:contain;mix-blend-mode:multiply}
.prod-info{padding:12px}
.prod-name{font-family:'Sora',sans-serif;font-size:13px;font-weight:700;margin-bottom:4px;line-height:1.35}
.prod-shop{font-size:11px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:4px}
.prod-price-label{font-size:10px;color:var(--muted);font-weight:600}
.prod-price{font-size:15px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.prod-moq{font-size:10px;color:var(--dim);margin-top:4px}

/* --- Badge ------------------------------------------------------------------ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:50px;font-size:10.5px;font-weight:700;white-space:nowrap}
.badge-ok{background:rgba(22,163,74,.12);color:var(--green)}
.badge-warn{background:rgba(217,119,6,.12);color:#B45309}
.badge-no{background:rgba(220,38,38,.1);color:var(--red)}
.badge-official{background:var(--accent);color:#fff}
.badge-neutral{background:var(--surface2);color:var(--dim)}
.badge-pos{position:absolute;top:10px;left:10px}
.badge-pos-r{position:absolute;top:10px;right:10px}

/* --- Price ladder (fitur signature) ----------------------------------------- */
.ladder{background:rgba(255,255,255,.85);border:.5px solid var(--border);border-radius:var(--r);overflow:hidden}
.ladder-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 16px;border-bottom:.5px solid var(--border);background:var(--accent-bg)}
.ladder-title{font-size:14px;font-weight:800}
.ladder-title span{display:block;font-family:'DM Sans',sans-serif;font-size:11.5px;font-weight:400;color:var(--dim)}
.qty-pick{display:inline-flex;background:#fff;border:.5px solid var(--border);border-radius:50px;padding:3px}
.qty-pick button{min-height:32px;padding:0 14px;border:none;background:none;border-radius:50px;
  font-size:12px;font-weight:700;color:var(--dim);cursor:pointer;font-variant-numeric:tabular-nums;transition:all .15s}
.qty-pick button.active{background:var(--accent);color:#fff}
.ladder-list{padding:10px;display:grid;gap:8px}
.ladder-row{display:grid;grid-template-columns:1fr;gap:10px;padding:14px;border:1px solid var(--border);
  border-radius:var(--r);background:#fff;transition:border-color .15s}
.ladder-row:hover{border-color:var(--accent-br)}
.ladder-row.best{border:1.5px solid var(--accent);box-shadow:0 6px 20px rgba(21,82,240,.12)}
.ladder-row.empty{opacity:.55}
.ladder-shop{min-width:0}
.ladder-shop b{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ladder-meta{font-size:11.5px;color:var(--muted);margin-top:3px}
.ladder-price{text-align:left}
.ladder-price b{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;display:block}
.ladder-price span{font-size:11px;color:var(--muted)}
.ladder-diff{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--red)}
.ladder-diff.zero{color:var(--green)}
.label-best{background:var(--accent);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;padding:3px 8px;border-radius:50px}
.ladder-foot{padding:12px 16px;border-top:.5px solid var(--border);font-size:11.5px;color:var(--muted);background:var(--surface)}

/* --- Tier harga -------------------------------------------------------------- */
.tier-grid{display:grid;gap:8px;grid-template-columns:repeat(3,1fr)}
.tier-box{border:1px solid var(--border);border-radius:var(--rs);padding:12px;background:#fff;text-align:center}
.tier-box.active{border-color:var(--accent);background:var(--accent-bg)}
.tier-qty{font-size:11px;color:var(--muted);font-weight:700}
.tier-harga{font-family:'Sora',sans-serif;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}

.nudge{display:flex;gap:8px;align-items:flex-start;background:var(--accent-bg);border:1px solid var(--accent-br);
  border-radius:var(--rs);padding:11px 13px;font-size:12.5px;color:var(--accent-dk);margin-top:10px}

/* --- Form -------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--dim)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:.5px solid var(--border);border-radius:var(--rs);
  font-size:16px;background:var(--surface);outline:none;transition:border-color .2s,background .2s
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent-br);background:#fff}
.field textarea{resize:vertical;min-height:80px}
.field .hint{font-size:11.5px;color:var(--muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row2>*{min-width:0}

/* --- Tabel sederhana ---------------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  padding:10px 12px;border-bottom:.5px solid var(--border);white-space:nowrap}
.tbl td{padding:12px;border-bottom:.5px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}

/* --- Empty state -------------------------------------------------------------- */
.empty{text-align:center;padding:40px 20px;border:1px dashed var(--border);border-radius:var(--r);background:rgba(255,255,255,.6)}
.empty h3{font-size:15px;font-weight:800;margin-bottom:6px}
.empty p{font-size:13px;color:var(--muted);max-width:360px;margin:0 auto 14px}

/* --- Footer -------------------------------------------------------------------- */
footer{border-top:.5px solid var(--border);padding:28px 40px;background:rgba(255,255,255,.6);font-size:12.5px;color:var(--muted)}
.foot-in{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between}
footer a{color:var(--dim);text-decoration:none;margin-right:14px}
footer a:hover{color:var(--accent)}

/* --- Mobile ------------------------------------------------------------------- */
@media(max-width:820px){
  header{padding:13px 16px}
  .wrap{padding:16px 18px 40px}
  .nav-tabs{display:none}
  .prod-grid{grid-template-columns:1fr 1fr}
  .grid3{grid-template-columns:1fr}
  .tier-grid{grid-template-columns:1fr 1fr 1fr}
  footer{padding:22px 18px}

  .nav-mob{
    display:flex;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:300;
    background:rgba(255,255,255,.35);backdrop-filter:blur(40px) saturate(180%) brightness(1.08);
    -webkit-backdrop-filter:blur(40px) saturate(180%) brightness(1.08);
    border:1px solid rgba(255,255,255,.75);border-radius:50px;
    box-shadow:0 8px 32px rgba(10,20,50,.14),inset 0 1.5px 0 rgba(255,255,255,.9);
    padding:5px;max-width:calc(100vw - 24px);overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch
  }
  .nav-mob::-webkit-scrollbar{display:none}
  .nav-mob-item{font-weight:700;font-size:12.5px;padding:10px 15px;border-radius:40px;text-decoration:none;
    color:var(--dim);transition:all .2s;display:inline-flex;align-items:center;flex-shrink:0}
  .nav-mob-item.active{background:var(--accent);color:#fff}
}

@media(min-width:821px){
  .ladder-row{grid-template-columns:2fr 1fr 1.1fr 1fr;align-items:center}
  .ladder-price{text-align:right}
}

@media(max-width:440px){
  .row2{grid-template-columns:1fr}
  .trust{flex-direction:column}
  .trust-div{width:auto;height:.5px}
}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}