/*
| Kartu produk & halaman katalog (beranda, Produk, Kontribusi, Source Code, Cari).
| Kartu: views/inc/_kartu.php · katalog: views/inc/katalog.php. Variabel warna dari modern.css.
*/

/* ---------- Kartu produk ---------- */
.bk-baris{ margin-left:-10px; margin-right:-10px; }
.bk-kol{ padding-left:10px; padding-right:10px; margin-bottom:20px; }
.bk-kartu{ height:100%; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--sh-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.bk-kartu:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:rgba(37,99,235,.3); }
.bk-gambar{ display:block; aspect-ratio:16/10; overflow:hidden; background:#f1f5f9; }
.bk-gambar img{ width:100%; height:100%; object-fit:cover; object-position:top center; transition:transform .4s ease; }
.bk-kartu:hover .bk-gambar img{ transform:scale(1.05); }
.bk-isi{ padding:12px 14px 14px; display:flex; flex-direction:column; flex:1; }
.bk-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.bk-chip{ font-size:.7rem; font-weight:600; color:#475569; background:#f1f5f9; padding:2px 8px; border-radius:999px; white-space:nowrap; }
.bk-chip-pro{ background:#f3e8ff; color:#7e22ce; }
.bk-chip-pro i{ font-size:.62rem; }
.bk-judul{ font-size:.93rem; font-weight:700; line-height:1.4; margin:0 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bk-judul a{ color:var(--ink); }
.bk-judul a:hover{ color:var(--brand); text-decoration:none; }
.bk-kaki{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:10px; border-top:1px solid var(--line); }
.bk-author{ font-size:.78rem; color:var(--muted); font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-author a{ color:var(--muted); }
.bk-author i{ margin-right:3px; }
.bk-gratis{ flex:0 0 auto; font-size:.75rem; font-weight:800; color:#15803d; background:#dcfce7; padding:3px 10px; border-radius:999px; }
.bk-harga{ flex:0 0 auto; font-size:.9rem; font-weight:800; color:var(--brand-ink); white-space:nowrap; }
@media (max-width:575px){
  .bk-baris{ margin-left:-6px; margin-right:-6px; }
  .bk-kol{ padding-left:6px; padding-right:6px; margin-bottom:12px; }
  .bk-isi{ padding:10px 10px 12px; }
  .bk-judul{ font-size:.85rem; }
  .bk-kaki{ flex-direction:column; align-items:flex-start; gap:6px; }
}

/* ---------- Halaman katalog ---------- */
.kt{ background:var(--bg); padding:28px 0 48px; }
/* sidebar filter (desktop) */
.kt-sisi{ position:sticky; top:90px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--sh-sm); }
.kt-sisi h6{ font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:4px 8px 8px; }
.kt-sisi ul{ list-style:none; margin:0 0 14px; padding:0; }
.kt-sisi ul:last-child{ margin-bottom:0; }
.kt-sisi a{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px; border-radius:10px; color:var(--ink-2); font-weight:600; font-size:.9rem; }
.kt-sisi a:hover{ background:var(--bg); color:var(--brand); text-decoration:none; }
.kt-sisi a.aktif{ background:rgba(37,99,235,.09); color:var(--brand); }
.kt-sisi a span{ font-size:.72rem; font-weight:700; color:var(--muted); background:var(--bg); border-radius:999px; padding:1px 8px; }
.kt-sisi a.aktif span{ background:#fff; color:var(--brand); }
/* alat: cari, chip filter (HP), info & urutan */
.kt-alat{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--sh-sm); margin-bottom:20px; }
.kt-cari{ display:flex; gap:8px; align-items:center; position:relative; }
.kt-cari > i{ position:absolute; left:14px; color:var(--muted); font-size:.9rem; }
.kt-cari input{ flex:1; min-width:0; height:46px; border:1px solid var(--line); border-radius:12px; padding:0 12px 0 38px; font-size:.95rem; outline:0; transition:border-color .15s, box-shadow .15s; }
.kt-cari input:focus{ border-color:#93c5fd; box-shadow:0 0 0 4px rgba(37,99,235,.1); }
.kt-cari button{ flex:0 0 auto; height:46px; border:0; border-radius:12px; padding:0 22px; font-weight:700; color:#fff; background:var(--grad); }
.kt-chip{ display:flex; gap:6px; overflow-x:auto; margin:12px -14px 0; padding:0 14px 2px; scrollbar-width:none; }
.kt-chip::-webkit-scrollbar{ display:none; }
.kt-chip a{ flex:0 0 auto; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink-2); font-weight:600; font-size:.82rem; white-space:nowrap; }
.kt-chip a.aktif{ background:var(--brand); border-color:var(--brand); color:#fff; }
.kt-info{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-size:.88rem; color:var(--muted); }
.kt-info b{ color:var(--ink); }
.kt-urut{ display:flex; align-items:center; gap:8px; margin:0; }
.kt-urut label{ margin:0; font-weight:600; }
.kt-urut select{ height:36px; border:1px solid var(--line); border-radius:10px; padding:0 30px 0 10px; font-weight:600; color:var(--ink); background:#fff; font-size:.85rem; cursor:pointer; }
.kt-kosong{ background:#fff; border:1px dashed #cbd5e1; border-radius:16px; padding:44px 20px; text-align:center; color:var(--muted); }
.kt-kosong > span{ width:54px; height:54px; border-radius:16px; margin:0 auto 12px; display:flex; align-items:center; justify-content:center; background:#eef2ff; color:#4f46e5; font-size:1.3rem; }
.kt-kosong h5{ color:var(--ink); font-weight:700; }
.kt-kosong p{ margin:0; }
.kt-halaman{ display:flex; justify-content:center; margin-top:12px; }
@media (max-width:575px){
  .kt{ padding:18px 0 36px; }
  .kt-alat{ padding:12px; border-radius:14px; }
  .kt-chip{ margin-left:-12px; margin-right:-12px; padding-left:12px; padding-right:12px; }
  .kt-cari button{ padding:0 16px; }
}

/* ---------- Bagian & judul bagian ---------- */
.bk-seksi{ background:var(--bg); padding:48px 0 24px; }
.bk-seksi-putih{ background:#fff; }
.bk-bagian{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px; }
.bk-label{ display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--brand); background:rgba(37,99,235,.08); padding:4px 10px; border-radius:999px; }
.bk-h2{ font-size:clamp(1.35rem,2.2vw,1.75rem); font-weight:800; color:var(--ink); margin:10px 0 4px; letter-spacing:-.3px; }
.bk-desc{ color:var(--muted); margin:0; font-size:.95rem; }
.bk-semua{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; font-weight:700; font-size:.9rem; color:var(--brand); padding:8px 14px; border:1px solid var(--line); border-radius:999px; background:#fff; transition:all .15s; }
.bk-semua:hover{ border-color:var(--brand); background:var(--brand); color:#fff; text-decoration:none; }
.bk-semua i{ font-size:.7rem; }
@media (max-width:575px){
  .bk-seksi{ padding:36px 0 16px; }
  .bk-bagian{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* ---------- Detail produk (views/sc_detail_view.php) ---------- */
.dt-kepala{ padding:18px 20px 14px !important; }
.dt-kepala .bk-chips{ margin-bottom:10px; }
.dt-kepala a.bk-chip:hover{ background:#e2e8f0; color:var(--ink); text-decoration:none; }
.dt-kepala .sc-detail-title{ font-size:clamp(1.25rem,2.2vw,1.6rem); font-weight:800; color:var(--ink); line-height:1.3; margin:0 0 10px; }
.dt-meta{ display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.86rem; font-weight:600; color:var(--muted); }
.dt-meta a{ color:var(--brand); }
.dt-meta i{ margin-right:5px; opacity:.8; }
/* kotak beli */
.dt-beli .card-header{ padding:18px 20px 12px; border-bottom:0; }
.dt-beli .card-header small{ display:block; margin-top:6px; font-size:.82rem; font-weight:600; color:var(--muted); }
.dt-harga{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1.75rem; font-weight:800; color:var(--brand-ink); line-height:1.1; }
.dt-gratis{ font-size:1rem; padding:5px 16px; }
.dt-aksi{ padding:4px 20px 18px !important; }
.dt-aksi .btn{ border-radius:12px !important; font-weight:700; font-size:1rem; padding:.7rem 1rem; }
.dt-aksi .btn-success{ background:#16a34a !important; border:0 !important; }
.dt-info{ list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line); font-size:.86rem; }
.dt-info li{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; }
.dt-info span{ color:var(--muted); }
.dt-info b{ color:var(--ink); text-align:right; }
/* garansi & penjual */
.dt-garansi .card-body{ display:flex; align-items:center; gap:14px; padding:16px 20px; }
.dt-garansi img{ flex:0 0 64px; }
.dt-garansi h6{ font-weight:800; color:var(--ink); margin:0 0 4px; font-size:.92rem; }
.dt-garansi p{ margin:0; font-size:.8rem; line-height:1.5; color:var(--muted); }
.dt-penjual .profile-user-img{ width:84px; height:84px !important; border:3px solid #fff; box-shadow:var(--sh); }
.dt-penjual .profile-username{ font-size:1.1rem; font-weight:800; margin-top:10px; }
.dt-penjual .btn{ border-radius:12px !important; font-weight:700; }
/* produk serupa */
.dt-serupa{ margin-top:36px; }
/* bilah beli HP */
.dt-bilah{ position:fixed; left:0; right:0; bottom:0; z-index:1030; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(16,24,40,.08); }
.dt-bilah > div{ min-width:0; }
.dt-bilah .dt-harga{ font-size:1.2rem; display:block; }
.dt-bilah small{ display:block; font-size:.72rem; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dt-bilah .btn{ flex:0 0 auto; border-radius:12px; font-weight:700; padding:.6rem 1.1rem; }
@media (max-width:991px){ body.ada-dt-bilah{ padding-bottom:76px; } }

/* paragraf kosong tempelan editor (<p><br></p>) di deskripsi */
.sc-deskripsi p:empty,.sc-deskripsi p:has(> br:only-child){ display:none; }

/* kartu di halaman detail: bayangan & garis setipis kartu di daftar (tanpa glow tombol) */
.dt-halaman .card{ box-shadow:var(--sh-sm) !important; border:1px solid var(--line) !important; }
.dt-halaman .card:hover{ box-shadow:var(--sh-sm) !important; transform:none !important; }
.dt-aksi .btn,.dt-penjual .btn,.dt-bilah .btn{ box-shadow:none !important; }
.dt-aksi .btn:hover,.dt-penjual .btn:hover{ transform:none !important; filter:brightness(1.05); }

/* teks deskripsi produk: font teks (Inter) 15px, judul tetap Plus Jakarta Sans */
.sc-deskripsi{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; font-size:.94rem; line-height:1.7; letter-spacing:0; }
.sc-deskripsi p{ margin-bottom:.85rem; }
.sc-deskripsi li{ line-height:1.65; margin:.3rem 0; }
.sc-deskripsi h1,.sc-deskripsi h2,.sc-deskripsi h3,.sc-deskripsi h4{ font-family:'Plus Jakarta Sans','Inter',sans-serif; }
@media (max-width:575px){ .sc-deskripsi{ font-size:.92rem; line-height:1.68; } }