/* =====================================================================
   WARNA: cukup ubah --brand (di tag <html> tiap halaman).
   Semua warna lain dihitung otomatis dari --brand.
   ===================================================================== */
:root{
  --brand:#00968A; --hl:#FFC21A; --ink:#1d2b36; --line:#e6e9ee;
  --brand-dark:color-mix(in srgb,var(--brand) 78%,#000);   /* hover & ujung gradasi */
  --brand-light:color-mix(in srgb,var(--brand) 70%,#fff);  /* ujung terang gradasi ikon */
  --soft:color-mix(in srgb,var(--brand) 11%,#fff);         /* latar kotak lembut */
  --cover1:color-mix(in srgb,var(--brand) 9%,#fff);        /* sampul produk, sisi terang */
  --cover2:color-mix(in srgb,var(--brand) 22%,#fff);       /* sampul produk, sisi gelap */
  --bs-body-bg:#f4f6f8; --bs-body-color:var(--ink);
  --bs-body-font-family:'Inter',Roboto,'Helvetica Neue',Arial,sans-serif;
}
/* Cadangan untuk browser lama yang belum mendukung color-mix */
@supports not (color:color-mix(in srgb,red,blue)){
  :root{--brand-dark:#007A70;--brand-light:#4DB6AD;--soft:#E3F6F4;--cover1:#E9F8F6;--cover2:#CBEEEA}
}

/* ===== DASAR ===== */
h1,h2,h3,h4,h5,h6{font-weight:700}
.price,.text-brand{color:var(--brand)}
.text-hl{color:var(--hl)}
.bg-soft{background:var(--soft)}
.mw-920{max-width:920px}
.title{font-size:1.4rem}
.title::after{content:"";display:block;width:44px;height:4px;border-radius:4px;background:var(--hl);margin:.5rem 0 0}
.ph{background:#fff3b0;padding:0 5px;border-radius:4px;color:#5b4a00}
.qris{max-width:300px;width:100%}
.table{--bs-table-bg:transparent}

/* ===== MENU ATAS ===== */
.navbar{
  background:var(--brand);box-shadow:0 2px 6px rgba(0,0,0,.12);padding-top:.7rem;padding-bottom:.7rem;
  --bs-navbar-color:#fff;--bs-navbar-hover-color:#fff;--bs-navbar-active-color:#fff;
}
.navbar-brand{font-size:1.7rem;font-weight:800;letter-spacing:-.5px}
.navbar-brand small{font-size:.65em}
.navbar .nav-link{font-size:1.02rem;font-weight:600;padding:.55rem 1rem;margin:0 2px;border-radius:8px;opacity:1}
.navbar .nav-link:hover{background:rgba(255,255,255,.18)}
.navbar .nav-link.active{background:rgba(255,255,255,.25);box-shadow:inset 0 -3px 0 var(--hl)}
@media(max-width:575px){.navbar-brand{font-size:1.3rem}}

/* ===== TOMBOL (btn-brand & btn-hl tampil timbul) ===== */
.btn{font-weight:600;border-radius:8px}
.btn-brand{background:var(--brand);color:#fff;border:0}
.btn-brand:hover{background:var(--brand-dark);color:#fff}
.btn-hl{background:var(--hl);color:var(--ink);border:0;font-weight:700}
.btn-hl:hover{filter:brightness(.95);color:var(--ink)}
.btn-brand,.btn-hl{box-shadow:0 4px 0 rgba(0,0,0,.25);transition:transform .1s,box-shadow .1s}
.btn-brand:hover,.btn-hl:hover{transform:translateY(-1px)}
.btn-brand:active,.btn-hl:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.25)}
.btn-outline-ink{border:1px solid var(--ink);color:var(--ink)}
.btn-outline-ink:hover{background:var(--ink);color:#fff}

/* ===== KARTU, BANNER, SAMPUL PRODUK ===== */
.card{background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.hero{background:linear-gradient(120deg,var(--brand),var(--brand-dark));color:#fff;border-radius:16px}
.card-product{color:inherit;text-decoration:none;transition:.15s}
.card-product:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.1);border-color:var(--brand)}
.card-product h6{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;font-size:.9rem}
.cover{
  position:relative;aspect-ratio:3/3.3;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--cover1),var(--cover2));font-size:3rem;border-radius:7px 7px 0 0;
}
.cover.lg{border-radius:7px}
.cover img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.cover i,.icon i{color:var(--brand)}
.cover i{opacity:.85}
.card.locked .cover i{opacity:.35}
.lock{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:.95rem;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.icon{width:56px;height:56px;border-radius:14px;background:var(--soft);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:auto}
.badge-brand{background:var(--soft);color:var(--brand-dark);font-weight:600}
.badge-hl{background:var(--hl);color:var(--ink);font-weight:700}

/* ===== FORM, PAGING, FAQ ===== */
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--brand) 22%,transparent)}
.pagination{--bs-pagination-padding-x:1rem;--bs-pagination-padding-y:.65rem;--bs-pagination-font-size:1.1rem;--bs-pagination-border-radius:10px;gap:8px}
.page-link{color:var(--ink);border-color:var(--line);min-width:48px;text-align:center;font-weight:700;border-radius:10px!important}
.page-link:hover{background:var(--soft);color:var(--brand-dark)}
.page-link:focus{box-shadow:none}
.page-item.active .page-link{background:var(--brand);border-color:var(--brand);color:#fff}
.accordion{--bs-accordion-btn-focus-box-shadow:none}
.accordion-button:not(.collapsed){background:var(--soft);color:var(--ink);box-shadow:none}

/* ===== HALAMAN SALES (surat penawaran) ===== */
.letter{font-size:1.08rem;line-height:1.8}
.letter h3{margin:2rem 0 .8rem;font-size:1.5rem}
.letter ul.check{list-style:none;padding:0}
.letter ul.check li{margin-bottom:.6rem;padding-left:2rem;position:relative}
.letter ul.check li::before{content:"\f058";font-family:"Font Awesome 6 Free";font-weight:900;color:var(--brand);position:absolute;left:0}

/* ===== HALAMAN DAFTAR ===== */
.side{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--brand),var(--brand-dark))}
.side::before,.side::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.09)}
.side::before{width:240px;height:240px;right:-90px;top:-90px}
.side::after{width:180px;height:180px;left:-70px;bottom:-70px}
.side>*{position:relative;z-index:1}
.side-pill{padding:.3rem .85rem;border-radius:99px;font-size:.75rem;font-weight:800;letter-spacing:.04em;background:var(--hl);color:var(--ink)}
.side-title{font-size:2.1rem;font-weight:800;line-height:1.2;margin-bottom:.75rem;text-shadow:0 2px 0 rgba(0,0,0,.3),0 5px 12px rgba(0,0,0,.25)}
.side-title span{color:var(--hl)}
.side-sub{font-size:1.05rem;font-weight:600;color:#fff;margin-bottom:1.75rem;text-shadow:0 1px 0 rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.2)}
.side-list li{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem}
.side .side-list li i{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1.15rem;background:var(--hl);color:var(--ink);box-shadow:0 4px 10px rgba(0,0,0,.2)}
.side-list b{font-size:1.05rem;text-shadow:0 1px 0 rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.2)}

/* ===== HALAMAN HOME: banner utama (terang, ilustrasi produk di kanan) =====
   Memakai .hero-home (tambahan dari .hero) supaya banner .hero di halaman lain tidak ikut berubah. */
.hero-home{
  position:relative;overflow:hidden;border-radius:24px;padding:2rem;text-align:left;color:var(--ink);
  background:var(--soft);
  background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 35%,#fff) 0%,color-mix(in srgb,var(--brand) 70%,#fff) 55%,var(--brand) 100%);
  border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);
  box-shadow:0 20px 44px -22px color-mix(in srgb,var(--brand) 80%,transparent);
}
.hero-body{position:relative;z-index:1;max-width:540px}
.hero-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .95rem;margin-bottom:14px;border-radius:99px;font-size:.82rem;font-weight:800;color:var(--ink);background:#fff}
.hero-home h1{font-size:clamp(1.55rem,3.2vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:.75rem}
.hero-home h1 em{font-style:normal;color:var(--brand);background:#fff;padding:.02em .3em;border-radius:10px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero-home p{font-weight:500;margin-bottom:1.25rem}
.hero-btns{display:flex;flex-wrap:wrap;gap:10px}
.hero-home .btn-lihat{color:var(--brand);background:#fff;border:1px solid color-mix(in srgb,var(--brand) 35%,transparent)}
.hero-home .btn-lihat:hover{background:var(--soft);color:var(--brand)}

/* ilustrasi produk: samar seperti latar, memudar ke kiri */
.hero-art{
  position:absolute;top:0;right:0;bottom:0;width:50%;pointer-events:none;opacity:.9;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 45%);mask-image:linear-gradient(to right,transparent,#000 45%);
}
.hero-art .cv{
  position:absolute;width:128px;aspect-ratio:3/3.5;border-radius:14px;overflow:hidden;display:grid;place-items:center;
  font-size:2.4rem;color:var(--brand);background:linear-gradient(135deg,#fff,var(--cover2));
  box-shadow:0 18px 30px -14px color-mix(in srgb,var(--brand) 55%,transparent),0 0 0 1px color-mix(in srgb,var(--brand) 10%,transparent);
}
.hero-art .cv img{width:100%;height:100%;object-fit:cover}
/* susunan 2 baris bertingkat: 3 di atas, 3 di bawah (sebagian terpotong di tepi) */
.hero-art .cv1{right:44%;top:4%;width:112px;transform:rotate(-7deg)}
.hero-art .cv2{right:25%;top:10%;width:128px;transform:rotate(4deg)}
.hero-art .cv3{right:5%;top:2%;width:120px;transform:rotate(-3deg)}
.hero-art .cv4{right:34%;top:50%;width:118px;transform:rotate(6deg)}
.hero-art .cv5{right:14%;top:52%;width:130px;transform:rotate(-5deg)}
.hero-art .cv6{right:-4%;top:46%;width:116px;transform:rotate(9deg)}
@media(max-width:767.98px){
  .hero-home{padding:1.5rem 1.25rem}
  .hero-art{width:100%;opacity:.18}
  .hero-btns .btn{flex:1 1 100%}
}

/* ===== HALAMAN HOME: kartu Fitur Member, Program Affiliate, Cara Join ===== */
.ft,.step{position:relative;text-align:center;padding:1.5rem 1.25rem;transition:transform .25s,box-shadow .25s}
.ft:hover,.step:hover{transform:translateY(-4px);box-shadow:0 16px 30px -14px color-mix(in srgb,var(--brand) 35%,transparent)}
.ft-ico{width:54px;height:54px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;font-size:1.25rem;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-light))}
.ft-top{border:2px solid var(--hl)}
.ft-top .ft-ico{background:var(--hl);color:var(--ink)}
.ft-tag{position:absolute;top:12px;right:12px;padding:.2rem .6rem;border-radius:99px;font-size:.68rem;font-weight:700;background:var(--hl);color:var(--ink)}
.aff{border:0;color:#fff;background:linear-gradient(135deg,var(--brand-dark),var(--brand))}
.aff h3{font-weight:800;margin-bottom:.75rem}
.aff p{opacity:.9}
.aff-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.aff-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.12);font-weight:600}
.aff-list i{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--hl);color:var(--ink)}
.step-no{width:48px;height:48px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-light));box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 12%,transparent)}

@media(prefers-reduced-motion:reduce){.ft,.step,.card-product,.btn-brand,.btn-hl{transition:none}}

/* ===== POPUP (popyes / popnot) ===== */
#tampil_modal{padding-top:7em;background-color:rgba(0,0,0,.2);position:fixed;top:0;bottom:0;left:0;right:0;z-index:10;display:block}
#modal{padding:15px 15px 50px;font-size:16px;background:#fff;color:#000;width:350px;margin:0 auto 20px;border:solid 3px grey;border-radius:15px}
#modal_atas{width:350px;background:#337ab7;padding:15px;margin:-15px 0 0 -15px;font-size:18px;color:#fff;border:solid 3px grey;border-radius:15px}
#okenot,#okeyes{border:none;float:right;width:80px;height:30px;color:#fff;margin-right:5px;cursor:pointer;border-radius:20px}
#okenot{background:red}
#okeyes{background:green}

/* =====================================================================
   GAYA MARKETPLACE (huruf & jarak ala Tokopedia / Shopee)
   Blok ini sengaja di paling bawah supaya menimpa aturan di atasnya.
   Mau ganti gaya? Cukup ubah 4 variabel di bawah (lihat PRESET SHOPEE).
   ===================================================================== */
:root{
  --mp-font:'Inter',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mp-radius:4px;          /* Tokopedia: 8px | Shopee: 2px */
  --mp-ratio:3/3.3;         /* rasio gambar produk di daftar (home & produk lainnya); versi kotak: 1/1 */
  --mp-gap:.75rem;          /* jarak antar kartu produk (sebaris) */
  --mp-gap-row:1.5rem;      /* jarak antar baris produk */

  --bs-body-font-family:var(--mp-font);
  --bs-body-font-size:.9375rem;    /* 15px: huruf lebih besar & lega (ala Tokopedia). Shopee lebih kecil: .875rem */
  --bs-body-line-height:1.45;
}
/* PRESET SHOPEE: ganti isi variabel di atas menjadi
     --mp-font:Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;  --mp-radius:2px;  --mp-gap:.5rem;
   (Roboto perlu dimuat lewat Google Fonts di _head.php, Inter sudah termuat) */

/* ----- judul: lebih kecil & rapat ----- */
h1{font-size:1.9rem}
h2{font-size:1.45rem}
h3{font-size:1.25rem}
h4{font-size:1.15rem}
h5{font-size:1.05rem}
h6{font-size:.95rem}
.title{font-size:1.25rem;letter-spacing:-.01em}
.title::after{width:36px;height:3px;margin-top:.4rem}
.letter{font-size:1.05rem;line-height:1.7}

/* ----- lebar konten & jarak antar bagian ----- */
@media(min-width:1200px){.container{max-width:1200px}}
main .mb-5{margin-bottom:2rem!important}
main .mb-4{margin-bottom:1rem!important}

/* ----- menu atas: ukuran sama dengan menu member ----- */
.navbar .nav-link{font-size:.95rem}
.navbar .btn{padding-top:.375rem;padding-bottom:.375rem;border-radius:8px}  /* tombol Login = ukuran tombol Logout member */

/* ----- kartu & grid produk rapat ----- */
.card{border-radius:var(--mp-radius)}
.row[class*="row-cols-"].g-3{--bs-gutter-x:var(--mp-gap);--bs-gutter-y:var(--mp-gap-row)}
/* tanpa border: gambar memenuhi kartu sampai tepi (border transparan = bingkai putih) */
.card-product{border:0;overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.08)}
.card-product:hover{box-shadow:0 6px 16px rgba(0,0,0,.14)}
/* tag kategori di sudut kiri atas gambar (gaya label diskon marketplace: kotak solid, tebal, bayangan) */
.tag-kat{
  position:absolute;top:8px;left:0;z-index:1;max-width:calc(100% - 16px);padding:.3rem .65rem;border-radius:0 8px 8px 0;
  font-size:.72rem;font-weight:800;line-height:1.2;letter-spacing:.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--brand);box-shadow:0 4px 10px -2px rgba(0,0,0,.35);
}
.card-product .cover{aspect-ratio:var(--mp-ratio);border-radius:var(--mp-radius) var(--mp-radius) 0 0;font-size:2.4rem}
.card-product .card-body{padding:.55rem .6rem .65rem!important;gap:0!important}
.card-product h6{font-size:.750rem;font-weight:400;line-height:1.4;margin-bottom:.4rem!important}
.price{font-size:1.0625rem;font-weight:700}
.badge{font-size:.75rem;font-weight:600;padding:.32em .6em}

/* kartu Fitur / Cara Join di home (spesifisitas lebih tinggi dari CSS inline halaman) */
.card.ft,.card.step{padding:1rem .9rem}
.card.ft h5,.card.step b{font-size:1rem}

/* ----- tombol, form, paging: ukuran marketplace ----- */
.btn{font-size:.9375rem;padding:.55rem 1.1rem;border-radius:var(--mp-radius)}
.btn-lg{font-size:1.0625rem;padding:.7rem 1.35rem}
.btn-sm{font-size:.85rem;padding:.32rem .7rem}
.form-control,.form-select{font-size:.9375rem;padding:.55rem .8rem;border-radius:var(--mp-radius)}
.form-label{font-size:.9rem;font-weight:600;margin-bottom:.3rem}
.pagination{--bs-pagination-padding-x:.75rem;--bs-pagination-padding-y:.4rem;--bs-pagination-font-size:1rem;gap:6px}
.page-link{min-width:40px;border-radius:var(--mp-radius)!important}


/* =====================================================================
   LATAR HALAMAN MODERN (pakai: <body class="bg-tint">)
   1 warna turunan --brand: tint tipis + 2 cahaya lembut. Otomatis ikut st_warna.
   Dipakai di halaman publik; halaman admin/member tidak terpengaruh.
   ===================================================================== */
.bg-tint{
  background-color:color-mix(in srgb,var(--brand) 7%,#fff);
  background-image:
    radial-gradient(900px 420px at 85% -80px,color-mix(in srgb,var(--brand) 16%,transparent),transparent 70%),
    radial-gradient(700px 380px at -10% 38%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 70%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}
/* banner .hero (halaman sales) ikut timbul lembut seperti banner home */
.hero{box-shadow:0 20px 44px -24px color-mix(in srgb,var(--brand) 80%,transparent)}
/* kartu form & konten di atas latar berwarna: bayangan sedikit lebih tegas */
.bg-tint .card{box-shadow:0 2px 10px rgba(16,24,40,.06)}

/* ===== FOOTER ===== */
.fo{margin-top:3rem;padding:2rem 0 1.5rem;text-align:center;color:#fff;background:linear-gradient(160deg,var(--brand),var(--brand-dark));border-top:4px solid var(--hl)}
.fo-brand{font-size:1.25rem;font-weight:800;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.fo-brand i{color:var(--hl);margin-right:.4rem}
.fo-sub{margin:.25rem 0 1rem;opacity:.85}
.fo-links a{margin:0 .75rem;color:#fff;font-weight:600;text-decoration:none}
.fo-links a:hover{text-decoration:underline;text-decoration-color:var(--hl);text-underline-offset:5px}
.fo-love{display:inline-block;margin-top:1.1rem;padding:.3rem .95rem;border-radius:99px;font-size:.85rem;background:rgba(255,255,255,.15)}
.fo-love i{color:#ff6b81}
.fo-copy{margin-top:.9rem;font-size:.8rem;opacity:.75}