/* ================================================================
 * karind.css — Karya Indonesia Unified Stylesheet
 * Merge dari: style.css, extras.css, desktop.css, borders.css,
 *             redesign-v14.css, fixes-v14.15.css,
 *             patch-v14.19.css, patch-v14.21.css
 * Ganti semua referensi CSS di index.html dengan 1 file ini.
 * ================================================================ */



/* ============================================================
 * BASE STYLES — Layout, variabel, komponen utama
 * Source: style.css
 * ============================================================ */

/* ═══════════════════════════════════════════
   KARIND — Customer App
   style.css
═══════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

/* ── TOKENS ── */
:root {
  --bg: #060606;
  --card: #1a1a1a;
  --card2: #262626;
  --card3: #333333;
  --red: #e50914;
  --red-d: #b2070f;
  --red-glow: rgba(229,9,20,.18);
  --tx: #ffffff;
  --tx2: #c0c0cc;
  --tx-2: #c0c0cc;
  --tx-3: #888898;
  --tx-4: #555566;
  --muted: #888898;
  --border: rgba(255,255,255,0.12);
  --border2: rgba(255,255,255,0.20);
  --green: #1db954;
  --gold: #f5c518;
  --purple: #7c6fff;
  --play-accent: #ff3c5c;
  --sh-bg: #0f0f0f;
  --bnav-bg: rgb(10,10,10);
  --inp-bg: #1e1e1e;
  --inp-ph: #444;
  --profile-grad: linear-gradient(140deg, rgba(229,9,20,.14) 0%, rgba(229,9,20,.04) 100%);
  --profile-bor: rgba(229,9,20,.25);
  --play-grad: linear-gradient(140deg, rgba(255,60,92,.16) 0%, rgba(229,9,20,.06) 100%);
  --play-bor: rgba(255,60,92,.3);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.5);
}

[data-theme="light"] {
  --bg: #f2f2f7;
  --card: #ffffff;
  --card2: #e8e8ed;
  --card3: #d8d8df;
  --tx: #0d0d0d;
  --tx-2: #444;
  --tx-3: #888;
  --tx-4: #aaa;
  --tx2: #3a3a4a;
  --muted: #6e6e80;
  --border: rgba(0,0,0,0.07);
  --border2: rgba(0,0,0,0.12);
  --gold: #b8940a;
  --sh-bg: #ffffff;
  --bnav-bg: rgba(242,242,247,0.96);
  --inp-bg: #e4e4ea;
  --inp-ph: #9999aa;
  --profile-grad: linear-gradient(140deg, rgba(229,9,20,.07) 0%, rgba(229,9,20,.02) 100%);
  --profile-bor: rgba(229,9,20,.12);
  --play-grad: linear-gradient(140deg, rgba(255,60,92,.08) 0%, rgba(229,9,20,.03) 100%);
  --play-bor: rgba(255,60,92,.15);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--tx);
  -webkit-tap-highlight-color: transparent;
  transition: background .25s, color .25s;
  cursor: default;
}
* { cursor: inherit; }
button, [onclick], .sc-card, .li, .news-card, .news-hero, .ry-mini,
.menu-item, .pl-item, .gchip, .vchip, .pkg-card:not(.pkg-locked),
.li-img, .li-bd, .sc-play, .bcard, a { cursor: pointer !important; }
input, textarea, select { cursor: text !important; }

.screen {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  transition: background .25s;
}

/* ── PAGES ── */
.page { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.page.active { display: flex; }
.scroll { flex: 1; overflow-y: scroll; scrollbar-width: none; padding-bottom: 20px; }
.scroll::-webkit-scrollbar { display: none; }

/* ── TOPBAR ── */
.topbar {
  flex-shrink: 0;
  background: var(--bg);
  border-bottom: .5px solid transparent;
  transition: border-color .3s, background .25s;
  padding-top: max(13px, env(safe-area-inset-top));
}
.topbar.sc { border-bottom-color: var(--border2); }
.tb-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 15px 0; }
.tb-brand { display: flex; align-items: center; gap: 8px; }
.tb-logo {
  width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(135deg, #e50914, #8f0609);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(229,9,20,.32);
  flex-shrink: 0;
}
.tb-bname { font-size: 14px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; letter-spacing: -.3px; }
.tb-bsub { font-size: 8px; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; font-family: 'Plus Jakarta Sans', sans-serif; margin-top: 1px; }
.tb-auth { display: flex; gap: 6px; }
.greet { padding: 11px 16px 4px; overflow: hidden; max-height: 66px; opacity: 1; transition: max-height .3s, opacity .3s, padding .3s; }
.topbar.sc .greet { max-height: 0; opacity: 0; padding: 0 16px; }
.g-label { font-size: 9px; color: var(--muted); letter-spacing: 2px; text-transform: uppercase; font-family: 'Plus Jakarta Sans', sans-serif; margin-bottom: 2px; }
.g-name { font-size: 19px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; letter-spacing: -.3px; }
.srow { padding: 5px 12px 10px; }
.srch { background: var(--card2); border-radius: 12px; border: .5px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 9px 13px; transition: background .25s; }
.srch input { flex: 1; background: none; border: none; outline: none; font-size: 13px; color: var(--tx); font-family: 'Inter', sans-serif; }
.srch input::placeholder { color: var(--inp-ph); }

/* ── PILLS ── */
.pill { padding: 7px 13px; border-radius: 20px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; border: none; white-space: nowrap; transition: transform .12s, background .15s; }
.pill:active { transform: scale(.93); }
.pill-primary { background: var(--red); color: #fff; }
.pill-outline { background: transparent; color: var(--tx); border: 1px solid var(--border2); }

/* ── BOTTOM NAV ── */
.bnav {
  flex-shrink: 0;
  background: var(--bnav-bg);
  border-top: .5px solid var(--border2);
  padding: 7px 0 max(10px, env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-around;
  align-items: center;
  transition: background .25s;
  /* FIX v14.21: bnav harus selalu di ATAS mini-player (z-index:95) dan elemen lain */
  position: relative;
  z-index: 100;
}
.ni { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; user-select: none; background: none; border: none; padding: 2px 6px; min-width: 0; flex: 1; }
.nico { width: 38px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 12px; transition: background .15s; }
.nico.on { background: var(--red-glow); }
.nico.on-play { background: rgba(255,60,92,.18); }
.nl { font-size: 9px; color: var(--muted); font-family: 'Inter', sans-serif; transition: color .15s; white-space: nowrap; }
.nl.on { color: var(--red); font-weight: 700; }
.nl.on-play { color: var(--play-accent); font-weight: 700; }

/* ── PLAY NAV BADGE ── */
.play-dot { width: 5px; height: 5px; background: var(--play-accent); border-radius: 50%; position: absolute; top: -1px; right: -1px; }

/* ── BANNER ── */
.bwrap { overflow: hidden; margin-bottom: 16px; }
.btrack { display: flex; transition: transform .42s cubic-bezier(.4,0,.2,1); }
.bslide { min-width: 100%; padding: 0 13px; }
.bcard { border-radius: 20px; height: 162px; position: relative; overflow: hidden; cursor: pointer; }
.bbg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.bol { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.3) 55%, transparent 100%); }
.bcont { position: absolute; inset: 0; padding: 14px 17px; display: flex; flex-direction: column; justify-content: flex-end; }
.btag { font-size: 9px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; padding: 3px 9px; border-radius: 5px; margin-bottom: 7px; display: inline-block; width: fit-content; }
.btit { font-size: 18px; font-weight: 900; color: #fff; font-family: 'Poppins', sans-serif; line-height: 1.2; margin-bottom: 4px; }
.bsub { font-size: 10px; color: rgba(255,255,255,.7); margin-bottom: 10px; }
.bacts { display: flex; align-items: center; gap: 10px; }
.bbt { padding: 7px 17px; background: var(--red); color: #fff; border: none; border-radius: 20px; font-size: 11px; font-weight: 800; cursor: pointer; font-family: 'Inter', sans-serif; transition: background .15s; }
.bbt:active { background: var(--red-d); }
.bgh { font-size: 11px; color: rgba(255,255,255,.72); cursor: pointer; }
.dots { display: flex; justify-content: center; gap: 5px; margin-top: 9px; }
.dot { width: 6px; height: 6px; border-radius: 3px; background: var(--card2); transition: .3s; cursor: pointer; }
.dot.on { width: 18px; background: var(--red); }

/* ── EQ ANIMATION ── */
@keyframes eq1 { 0%,100%{height:5px} 50%{height:16px} }
@keyframes eq2 { 0%,100%{height:12px} 50%{height:4px} }
@keyframes eq3 { 0%,100%{height:8px} 50%{height:18px} }
@keyframes eq4 { 0%,100%{height:15px} 50%{height:6px} }
@keyframes eq5 { 0%,100%{height:6px} 50%{height:14px} }
.eq { width: 3px; border-radius: 2px; display: inline-block; }
.eq:nth-child(1) { animation: eq1 .9s ease-in-out infinite; }
.eq:nth-child(2) { animation: eq2 .7s ease-in-out infinite; }
.eq:nth-child(3) { animation: eq3 1.1s ease-in-out infinite; }
.eq:nth-child(4) { animation: eq4 .8s ease-in-out infinite; }
.eq:nth-child(5) { animation: eq5 1s ease-in-out infinite; }

/* ── SECTIONS ── */
.sec-hd { display: flex; justify-content: space-between; align-items: center; padding: 0 15px 9px; }
.sec-t { font-size: 14px; font-weight: 700; color: var(--tx); font-family: 'Poppins', sans-serif; }
.sec-a { font-size: 11px; color: var(--red); font-weight: 600; cursor: pointer; }
.hs { display: flex; gap: 11px; padding: 0 13px; overflow-x: scroll; scrollbar-width: none; margin-bottom: 16px; }
.hs::-webkit-scrollbar { display: none; }

/* ── SONG CARD ── */
.sc-card { min-width: 112px; max-width: 112px; flex-shrink: 0; cursor: pointer; }
.sc-img {
  width: 112px; height: 112px; border-radius: 13px;
  background-size: cover; background-position: center;
  margin-bottom: 7px; position: relative; overflow: hidden;
  background-color: var(--card2);
}
.sc-play { position: absolute; inset: 0; background: rgba(0,0,0,.42); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s; }
.sc-card:active .sc-play { opacity: 1; }
.sc-rank { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.74); backdrop-filter: blur(6px); border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 800; color: var(--gold); font-family: 'Poppins', sans-serif; }
.sc-badge { position: absolute; top: 6px; right: 6px; font-size: 7px; font-weight: 800; padding: 2px 5px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px; }
.sc-badge-genre { background: rgba(229,9,20,.22); border: .5px solid rgba(229,9,20,.35); color: #ff8080; }
.sc-badge-new { background: rgba(29,158,117,.28); border: .5px solid rgba(29,158,117,.45); color: #5dd9a0; }
.sc-badge-locked { background: rgba(255,60,92,.2); border: .5px solid rgba(255,60,92,.4); color: #ff7a8a; }
.sc-tt { font-size: 11.5px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-ar { font-size: 10px; color: var(--tx2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── LIST ITEM ── */
.lwrap { padding: 0 13px 8px; }
.li {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: 15px;
  padding: 11px 12px; margin-bottom: 7px;
  border: .5px solid var(--border); cursor: pointer;
  transition: transform .12s, background .15s;
}
.li:active { transform: scale(.98); background: var(--card2); }
.li-img { width: 52px; height: 52px; border-radius: 11px; background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--card2); position: relative; overflow: hidden; }
.li-play-ov { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .18s; }
.li:active .li-play-ov { opacity: 1; }
.li-bd { flex: 1; min-width: 0; }
.li-row1 { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.li-tt { font-size: 13px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.li-genre { flex-shrink: 0; font-size: 7px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: rgba(124,111,255,.18); color: #a29aff; border: .5px solid rgba(124,111,255,.28); text-transform: uppercase; letter-spacing: .5px; }
.li-sub { font-size: 10.5px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-chev { flex-shrink: 0; opacity: .28; }

/* ── GENRE CHIPS ── */
.gchips { display: flex; gap: 7px; padding: 0 13px 12px; overflow-x: scroll; scrollbar-width: none; }
.gchips::-webkit-scrollbar { display: none; }
.gchip { flex-shrink: 0; padding: 6px 13px; background: var(--card); border: .5px solid var(--border); border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: .15s; }
.gchip.on { background: var(--red); color: #fff; border-color: var(--red); }

/* ── VENUE CHIPS ── */
.vchips { display: flex; gap: 7px; padding: 0 13px 12px; overflow-x: scroll; scrollbar-width: none; }
.vchips::-webkit-scrollbar { display: none; }
.vchip { flex-shrink: 0; padding: 7px 13px; background: var(--card); border: .5px solid var(--border); border-radius: 20px; font-size: 11px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; transition: .15s; }
.vchip.on { background: var(--red-glow); color: var(--red); border-color: rgba(229,9,20,.3); }

/* ── VENUE SECTION ── */
.venue-hd { display: flex; align-items: center; gap: 9px; padding: 0 15px 9px; }
.venue-ic { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.venue-title { font-size: 14px; font-weight: 700; color: var(--tx); font-family: 'Poppins', sans-serif; }
.venue-sub { font-size: 10px; color: var(--muted); }

/* ── SHEETS ── */
.sh-ov { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.74); opacity: 0; pointer-events: none; transition: opacity .3s; }
.sh-ov.on { opacity: 1; pointer-events: all; }
.sh-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--sh-bg); border-radius: 26px 26px 0 0;
  border-top: .5px solid var(--border2);
  z-index: 901;
  /* FIX v14.21: Gunakan translateY(110%) bukan 100% supaya sheet benar-benar
     turun di bawah viewport dan pojok atasnya yang melengkung tidak "nongol".
     Tambah visibility:hidden saat tidak aktif supaya tidak bisa di-highlight.  */
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .36s cubic-bezier(.25,.46,.45,.94), background .25s, visibility 0s .36s;
  max-height: 93%; display: flex; flex-direction: column;
  padding-bottom: max(env(safe-area-inset-bottom), 14px);
}
.sh-sheet.on { transform: translateY(0); visibility: visible; transition: transform .36s cubic-bezier(.25,.46,.45,.94), background .25s, visibility 0s 0s; }
.sh-handle { width: 38px; height: 4px; background: var(--card3); border-radius: 2px; margin: 12px auto 0; flex-shrink: 0; }
.sh-hd { padding: 14px 18px 8px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.sh-title { font-size: 16px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; }
.sh-close { width: 28px; height: 28px; background: var(--card2); border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.sh-body { padding: 6px 18px 22px; overflow-y: auto; scrollbar-width: none; flex: 1; }
.sh-body::-webkit-scrollbar { display: none; }
.sh-sub { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }

/* ── FORM ELEMENTS ── */
.f-group { margin-bottom: 10px; }
.f-label { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 6px; display: block; }
.f-inp {
  width: 100%; background: var(--inp-bg); border-radius: 11px;
  border: .5px solid var(--border); padding: 12px 14px;
  font-size: 13px; color: var(--tx); font-family: 'Inter', sans-serif;
  outline: none; transition: border-color .2s, background .25s;
}
.f-inp:focus { border-color: rgba(229,9,20,.5); }
.f-inp::placeholder { color: var(--inp-ph); }
.f-tabs { display: flex; background: var(--card2); border-radius: 12px; padding: 3px; margin-bottom: 13px; }
.f-tab { flex: 1; padding: 8px; border: none; background: none; border-radius: 10px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; transition: .15s; }
.f-tab.on { background: var(--card); color: var(--tx); box-shadow: 0 1px 6px rgba(0,0,0,.25); }
.f-err { font-size: 10.5px; color: #ff6b6b; margin-top: 4px; display: none; }
.f-err.on { display: block; }
.f-link { font-size: 11px; color: var(--red); font-weight: 600; cursor: pointer; }
.f-footer { text-align: center; font-size: 11px; color: var(--muted); margin-top: 13px; }
.f-footer span { color: var(--red); font-weight: 700; cursor: pointer; }
.pw-wrap { position: relative; }
.pw-eye { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 4px; }
.sh-div { text-align: center; font-size: 10px; color: var(--muted); margin: 11px 0; position: relative; }
.sh-div::before, .sh-div::after { content: ''; position: absolute; top: 50%; width: 42%; height: .5px; background: var(--border); }
.sh-div::before { left: 0; } .sh-div::after { right: 0; }

/* ── BUTTONS ── */
.btn-p { width: 100%; padding: 13px; background: var(--red); color: #fff; border: none; border-radius: 13px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; margin-bottom: 9px; transition: background .15s; }
.btn-p:active { background: var(--red-d); }
.btn-s { width: 100%; padding: 13px; background: var(--card); color: var(--tx); border: .5px solid var(--border2); border-radius: 13px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; transition: background .15s; }
.btn-s:active { background: var(--card2); }
.btn-ghost { width: 100%; padding: 11px; background: none; color: var(--muted); border: .5px solid var(--border); border-radius: 13px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }

/* ── OTP ── */
.otp-row { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }
.otp-box { width: 44px; height: 52px; background: var(--inp-bg); border: .5px solid var(--border); border-radius: 11px; font-size: 21px; font-weight: 800; color: var(--tx); text-align: center; font-family: 'Poppins', sans-serif; outline: none; transition: border-color .2s; }
.otp-box:focus { border-color: var(--red); }
.step-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 18px; }
.step-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--card2); transition: .3s; }
.step-dot.on { width: 22px; background: var(--red); }
.step-dot.done { background: var(--green); }

/* ── DETAIL SHEET ── */
.ds-hero { width: 100%; aspect-ratio: 1; max-height: 190px; border-radius: 17px; background-size: cover; background-position: center; margin-bottom: 15px; position: relative; overflow: hidden; }
.ds-hero-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.4), transparent 55%); }
.ds-title { font-size: 20px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 3px; }
.ds-artist { font-size: 13px; color: var(--tx2); margin-bottom: 12px; }
.ds-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ds-chip { font-size: 9px; font-weight: 700; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; letter-spacing: .5px; }
.ds-info { background: var(--card); border-radius: 15px; padding: 4px 14px; border: .5px solid var(--border); margin-bottom: 14px; }
.ds-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: .5px solid var(--border); }
.ds-row:last-child { border-bottom: none; }
.ds-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-lbl { font-size: 9px; color: var(--muted); letter-spacing: 1.3px; text-transform: uppercase; font-weight: 600; margin-bottom: 2px; }
.ds-val { font-size: 13px; color: var(--tx); font-weight: 700; }
.preview-box { background: var(--card); border-radius: 15px; padding: 12px 14px; border: .5px solid var(--border); margin-bottom: 14px; }
.preview-lbl { font-size: 9px; color: var(--muted); letter-spacing: 1.3px; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.preview-player { display: flex; align-items: center; gap: 11px; }
.preview-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--red); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform .1s; }
.preview-btn:active { transform: scale(.88); }
.preview-prog { flex: 1; }
.preview-bar { width: 100%; height: 3px; background: var(--card2); border-radius: 2px; overflow: hidden; margin-bottom: 5px; }
.preview-fill { height: 100%; background: var(--red); border-radius: 2px; width: 0%; transition: width .22s linear; }
.preview-times { display: flex; justify-content: space-between; font-size: 9px; color: var(--muted); }
.preview-notice { font-size: 9px; color: var(--muted); margin-top: 8px; text-align: center; opacity: .7; }

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  left: 50%; transform: translateX(-50%) translateY(16px);
  background: var(--card2); color: var(--tx);
  padding: 10px 20px; border-radius: 22px;
  font-size: 12px; font-weight: 600;
  opacity: 0; transition: all .28s; z-index: 1100;
  pointer-events: none;
  box-shadow: 0 4px 22px rgba(0,0,0,.32);
  border: .5px solid var(--border2);
  white-space: nowrap; max-width: 90vw;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════
   PAGE: BERITA
══════════════════════════════════ */
.pg-header { flex-shrink: 0; padding: max(14px, env(safe-area-inset-top)) 15px 12px; background: var(--bg); border-bottom: .5px solid var(--border2); transition: background .25s; }
.pg-h1 { font-size: 20px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; }
.pg-h2 { font-size: 11px; color: var(--muted); margin-top: 2px; }
.news-hero { margin: 10px 13px 14px; border-radius: 20px; overflow: hidden; position: relative; cursor: pointer; }
.news-hero-img { height: 172px; background-size: cover; background-position: center; }
.news-hero-ov { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.86), transparent 52%); }
.news-hero-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 16px; }
.news-tag { display: inline-block; font-size: 8.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; margin-bottom: 7px; }
.news-hero-t { font-size: 16px; font-weight: 800; color: #fff; font-family: 'Poppins', sans-serif; line-height: 1.3; margin-bottom: 3px; }
.news-hero-d { font-size: 10px; color: rgba(255,255,255,.58); }
.news-list { padding: 0 13px; }
.news-card { display: flex; gap: 11px; background: var(--card); border-radius: 15px; padding: 11px; margin-bottom: 9px; border: .5px solid var(--border); cursor: pointer; transition: transform .12s, background .15s; }
.news-card:active { transform: scale(.98); background: var(--card2); }
.news-card-img { width: 68px; height: 68px; border-radius: 11px; background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--card2); }
.news-card-bd { flex: 1; min-width: 0; }
.news-card-t { font-size: 12.5px; font-weight: 700; color: var(--tx); line-height: 1.4; margin-bottom: 3px; font-family: 'Plus Jakarta Sans', sans-serif; }
.news-card-d { font-size: 10px; color: var(--muted); }
.news-sh-img { width: 100%; height: 168px; border-radius: 15px; background-size: cover; background-position: center; margin-bottom: 14px; }
.news-sh-t { font-size: 19px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; line-height: 1.3; margin-bottom: 5px; margin-top: 8px; }
.news-sh-meta { font-size: 10px; color: var(--muted); margin-bottom: 14px; }
.news-sh-p { font-size: 12.5px; color: var(--tx2); line-height: 1.75; margin-bottom: 11px; }
.news-hl { background: rgba(229,9,20,.06); border: .5px solid rgba(229,9,20,.2); border-radius: 13px; padding: 13px 15px; font-size: 12px; color: var(--red); line-height: 1.6; margin-bottom: 10px; }
[data-theme="light"] .news-hl { background: rgba(229,9,20,.04); }

/* ══════════════════════════════════
   PAGE: PROFIL
══════════════════════════════════ */
.prof-topbar { flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; padding: max(14px, env(safe-area-inset-top)) 15px 12px; background: var(--bg); border-bottom: .5px solid var(--border2); transition: background .25s; }
.prof-topbar-title { font-size: 18px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; }
.prof-topbar-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
.prof-toggles { display: flex; gap: 7px; }
.toggle-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: .5px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: background .15s; flex-shrink: 0; }
.toggle-btn:active { transform: scale(.9); }
.toggle-btn.lang { font-size: 10px; font-weight: 800; font-family: 'Inter', sans-serif; color: var(--tx); }

/* Profile Card */
.profile-card { margin: 14px; background: var(--profile-grad); border-radius: 20px; padding: 20px; border: .5px solid var(--profile-bor); }
.profile-av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg, #e50914, #8f0609); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: #fff; font-family: 'Poppins', sans-serif; margin-bottom: 11px; }
.profile-name { font-size: 17px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 2px; }
.profile-email { font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.role-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; background: rgba(124,111,255,.16); color: #a29aff; border: .5px solid rgba(124,111,255,.28); }

/* Active License Card */
.license-card { margin: 0 14px 14px; background: linear-gradient(135deg, rgba(29,185,84,.14), rgba(29,185,84,.04)); border-radius: 18px; padding: 16px; border: .5px solid rgba(29,185,84,.22); }
.license-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; background: rgba(29,185,84,.18); color: var(--green); border: .5px solid rgba(29,185,84,.3); margin-bottom: 10px; }
.license-name { font-size: 16px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 3px; }
.license-meta { font-size: 11px; color: var(--muted); margin-bottom: 12px; }
.slot-bar-wrap { margin-bottom: 4px; }
.slot-bar { height: 5px; background: var(--card2); border-radius: 3px; overflow: hidden; }
.slot-fill { height: 100%; background: linear-gradient(90deg, var(--green), #1ed760); border-radius: 3px; transition: width .4s ease; }
.slot-txt { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); margin-top: 5px; }

/* Section block */
.section-block { margin: 0 14px 14px; }
.section-label { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 1.3px; text-transform: uppercase; margin-bottom: 9px; padding-left: 1px; }

/* Upgrade Cards */
.upg-card { background: var(--card); border-radius: 15px; padding: 13px 14px; border: .5px solid var(--border); margin-bottom: 7px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: transform .12s, background .15s; }
.upg-card:active { transform: scale(.98); background: var(--card2); }
.upg-ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; }
.upg-t { font-size: 13px; font-weight: 700; color: var(--tx); margin-bottom: 2px; font-family: 'Plus Jakarta Sans', sans-serif; }
.upg-s { font-size: 10.5px; color: var(--muted); line-height: 1.4; }

/* Menu Items */
.menu-item { display: flex; align-items: center; gap: 11px; background: var(--card); border-radius: 13px; padding: 12px 13px; margin-bottom: 6px; cursor: pointer; border: .5px solid var(--border); transition: transform .12s, background .15s; }
.menu-item:active { transform: scale(.98); }
.menu-ic { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.menu-t { font-size: 13px; font-weight: 600; color: var(--tx); flex: 1; }

/* Hero (logged out) */
.prof-hero { padding: 22px 18px 18px; text-align: center; }
.prof-logo-big { width: 62px; height: 62px; border-radius: 18px; background: linear-gradient(135deg, #e50914, #8f0609); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: 0 6px 22px rgba(229,9,20,.28); }
.prof-hero-t { font-size: 21px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 6px; }
.prof-hero-s { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 22px; }
.prof-btns { display: flex; gap: 9px; padding: 0 18px 18px; }
.prof-btns .btn-s, .prof-btns .btn-p { flex: 1; margin-bottom: 0; }
.ben-card { margin: 0 14px 14px; background: var(--card); border-radius: 18px; padding: 13px 15px; border: .5px solid var(--border); }
.ben-title { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px; }
.ben-item { display: flex; align-items: center; gap: 11px; padding: 8px 0; border-bottom: .5px solid var(--border); }
.ben-item:last-child { border-bottom: none; }
.ben-ic { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ben-t { font-size: 12.5px; font-weight: 700; color: var(--tx); margin-bottom: 1px; }
.ben-s { font-size: 10.5px; color: var(--muted); }

/* Package Cards */
.pkg-card {
  background: var(--card); border-radius: 18px; padding: 16px;
  border: .5px solid var(--border); margin-bottom: 10px; cursor: pointer;
  transition: transform .12s, background .15s, border-color .15s;
  position: relative; overflow: hidden;
}
.pkg-card:active { transform: scale(.98); }
.pkg-card.selected { border-color: var(--red); background: var(--red-glow); }
.pkg-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pkg-ic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.pkg-name { font-size: 15px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 2px; }
.pkg-price { font-size: 12px; color: var(--muted); }
.pkg-price b { color: var(--tx); font-size: 16px; }
.pkg-slots { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 8px; font-size: 10px; font-weight: 700; }
.pkg-desc { font-size: 11px; color: var(--muted); line-height: 1.5; margin-top: 7px; }
.pkg-check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--red); display: none; align-items: center; justify-content: center; }
.pkg-card.selected .pkg-check { display: flex; }

/* ══════════════════════════════════
   PAGE: PLAY
══════════════════════════════════ */
.play-topbar { flex-shrink: 0; padding: max(14px, env(safe-area-inset-top)) 15px 12px; background: var(--bg); border-bottom: .5px solid var(--border2); transition: background .25s; }
.play-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.play-header-ic { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--play-accent), #e50914); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(255,60,92,.3); }
.play-h1 { font-size: 18px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; }
.play-h2 { font-size: 10px; color: var(--muted); margin-top: 1px; }

/* License Info strip */
.play-license-strip { background: var(--play-grad); border: .5px solid var(--play-bor); border-radius: 16px; padding: 14px 16px; margin: 10px 13px 14px; }
.pls-row1 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.pls-name { font-size: 14px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; }
.pls-expiry { font-size: 10px; color: var(--muted); }
.pls-expiry b { color: var(--tx); }
.pls-slot-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pls-slot-label { font-size: 10px; color: var(--muted); }
.pls-slot-count { font-size: 10px; font-weight: 700; color: var(--tx); }
.pls-bar { height: 4px; background: var(--card2); border-radius: 2px; overflow: hidden; }
.pls-fill { height: 100%; background: linear-gradient(90deg, var(--play-accent), #e50914); border-radius: 2px; transition: width .4s ease; }

/* Play list header */
.play-list-hd { display: flex; justify-content: space-between; align-items: center; padding: 0 15px 9px; }
.play-list-t { font-size: 14px; font-weight: 700; color: var(--tx); font-family: 'Poppins', sans-serif; }
.play-add-btn { display: flex; align-items: center; gap: 5px; padding: 7px 13px; background: var(--red); color: #fff; border: none; border-radius: 20px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: 'Inter', sans-serif; transition: background .15s; }
.play-add-btn:active { background: var(--red-d); }

/* Play list item */
.pl-item { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: 15px; padding: 11px 12px; margin-bottom: 7px; border: .5px solid var(--border); cursor: pointer; transition: transform .12s, background .15s; }
.pl-item:active { transform: scale(.98); background: var(--card2); }
.pl-img { width: 52px; height: 52px; border-radius: 11px; background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--card2); position: relative; overflow: hidden; }
.pl-playing-ov { position: absolute; inset: 0; background: rgba(229,9,20,.55); display: none; align-items: center; justify-content: center; }
.pl-item.is-playing .pl-playing-ov { display: flex; }
.pl-bd { flex: 1; min-width: 0; }
.pl-row1 { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.pl-tt { font-size: 13px; font-weight: 700; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.pl-lock { flex-shrink: 0; display: flex; align-items: center; gap: 3px; font-size: 9px; color: var(--play-accent); font-weight: 700; opacity: .8; }
.pl-ar { font-size: 10.5px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mini Player */
.mini-player {
  position: fixed; left: 0; right: 0;
  /* FIX v14.21: Naikkan bottom supaya mini-player duduk tepat di ATAS bnav, tidak overlap.
     bnav tingginya ~65px (padding 7px + icon 48px + padding bawah 10px).
     Tambah 4px buffer = 69px. safe-area-inset ditambahkan dua kali karena bnav juga
     pakai safe-area-inset di padding bawahnya → total bottom sama dengan bnav top.        */
  bottom: calc(69px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(135deg, rgba(26,10,11,.96), rgba(30,10,16,.98));
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: .5px solid rgba(255,60,92,.2);
  border-radius: 0; padding: 10px 16px;
  display: none; align-items: center; gap: 12px;
  /* FIX v14.21: Turunkan z-index mini-player ke 95 supaya BNAV (z-index:100) selalu
     tampil di ATAS mini-player dan tidak tertutup/ter-overlap.                          */
  z-index: 95;
  transition: opacity .3s, transform .3s;
  transform: translateY(100%); opacity: 0;
}
.mini-player.on { display: flex; transform: translateY(0); opacity: 1; }
.mini-player.hide { opacity: 0; transform: translateY(100%); pointer-events: none; }
.mp-img { width: 42px; height: 42px; border-radius: 10px; background-size: cover; background-position: center; flex-shrink: 0; background-color: var(--card2); }
.mp-bd { flex: 1; min-width: 0; }
.mp-tt { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-ar { font-size: 10px; color: rgba(255,255,255,.55); }
.mp-controls { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mp-btn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.1); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.mp-btn:active { background: rgba(255,255,255,.2); }
.mp-btn.play-pause { background: var(--play-accent); }
.mp-btn.play-pause:active { background: #e0253f; }
.mp-btn.mp-close { width: 26px; height: 26px; background: rgba(255,255,255,.06); margin-left: 4px; }
.mp-btn.mp-close:hover { background: rgba(255,60,92,.3); }
.mp-prog { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.08); border-radius: 0 0 18px 18px; overflow: hidden; }
.mp-prog-fill { height: 100%; background: var(--play-accent); width: 0%; transition: width .25s linear; border-radius: 0 0 18px 18px; }

/* Play empty state */
.play-empty { padding: 40px 28px; text-align: center; }
.play-empty-icon { font-size: 52px; margin-bottom: 14px; opacity: .6; }
.play-empty-t { font-size: 16px; font-weight: 700; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 6px; }
.play-empty-s { font-size: 12px; color: var(--muted); line-height: 1.6; }

/* No-package state */
.no-pkg-banner { margin: 14px 13px; background: var(--play-grad); border: .5px solid var(--play-bor); border-radius: 20px; padding: 22px 20px; text-align: center; }
.no-pkg-icon { font-size: 42px; margin-bottom: 12px; }
.no-pkg-t { font-size: 17px; font-weight: 800; color: var(--tx); font-family: 'Poppins', sans-serif; margin-bottom: 6px; }
.no-pkg-s { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 18px; }


/* ============================================================
 * EXTRAS — Komponen tambahan, form, modal, card
 * Source: extras.css
 * ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   EXTRAS — komponen tambahan untuk Karind MVP
   (calendar, time picker, beranda ry-cards, package info-mode,
    transaction filter, invoice stamp, back button, currency input)
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   BERANDA — Royalty type cards (Mechanical / Performance)
   ────────────────────────────────────────────── */
.ry-head{
  font-size:14px;font-weight:800;color:var(--tx);font-family:'Poppins',sans-serif;
  padding:16px 16px 8px;letter-spacing:.2px;
}
.ry-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px;
}
.ry-card{
  position:relative;overflow:hidden;cursor:pointer;
  background:var(--card);border:.5px solid var(--border);border-radius:16px;
  padding:14px 12px 12px;transition:transform .15s ease;
}
.ry-card:active{transform:scale(.97);}
.ry-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--c1,#e50914),var(--c2,#8f0609));
}
.ry-card-mech{--c1:#1db954;--c2:#1a9a5f;}
.ry-card-perf{--c1:#ff3c5c;--c2:#e50914;}
.ry-ic{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:10px;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 4px 12px rgba(0,0,0,.28);
}
.ry-t{
  font-size:14px;font-weight:800;color:var(--tx);
  font-family:'Poppins',sans-serif;margin-bottom:4px;
}
.ry-s{
  font-size:10.5px;color:var(--muted);line-height:1.45;
  margin-bottom:10px;min-height:30px;
}
.ry-go{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:var(--c1);
  font-family:'Inter',sans-serif;
}

/* ──────────────────────────────────────────────
   CALENDAR POPUP (.cal-ov overlay + .cal-pop card)
   ────────────────────────────────────────────── */
.cal-ov{
  display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.68);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
}
.cal-ov.on{display:flex;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.cal-pop{
  width:100%;max-width:340px;
  background:var(--card);border:.5px solid var(--border);
  border-radius:20px;padding:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:popUp .22s cubic-bezier(.25,1.4,.5,1);
}
@keyframes popUp{from{opacity:0;transform:translateY(12px) scale(.95)}to{opacity:1;transform:none}}

.cal-hd{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:2px 4px 14px;
}
.cal-title{
  font-size:15px;font-weight:800;color:var(--tx);
  font-family:'Poppins',sans-serif;flex:1;text-align:center;
  letter-spacing:.2px;
}
.cal-nav{
  width:34px;height:34px;border-radius:10px;border:none;
  background:var(--card2,rgba(255,255,255,.06));
  color:var(--tx);font-size:18px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s;
}
.cal-nav:hover{background:rgba(229,9,20,.12);color:var(--red);}
.cal-nav:active{transform:scale(.92);}

.cal-wd{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;
}
.cal-wd>div{
  text-align:center;font-size:10px;color:var(--muted);
  font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:6px 0;
}

.cal-days{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
}
.cal-day{
  aspect-ratio:1;border-radius:10px;border:.5px solid transparent;
  background:transparent;color:var(--tx);
  font-size:13px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;position:relative;
  transition:background .12s,border .12s,color .12s;
}
.cal-day:hover:not(.dis){background:var(--card2,rgba(255,255,255,.05));}
.cal-day.dis{color:var(--muted);opacity:.28;cursor:not-allowed;}
.cal-day.today{border-color:rgba(229,9,20,.45);}
.cal-day.today::after{
  content:'';position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--red);
}
.cal-day.sel{
  background:linear-gradient(135deg,#e50914,#8f0609);
  color:#fff;border-color:transparent;
  box-shadow:0 4px 12px rgba(229,9,20,.38);
}
.cal-day.sel.today::after{background:#fff;}

.cal-foot{
  display:flex;gap:8px;margin-top:14px;padding-top:14px;
  border-top:.5px solid var(--border);
}
.cal-btn{
  flex:1;padding:10px 8px;border-radius:11px;
  font-size:12px;font-weight:700;cursor:pointer;
  font-family:'Inter',sans-serif;transition:.12s;
}
.cal-btn:active{transform:scale(.96);}
.cal-btn-s{
  background:var(--card2,rgba(255,255,255,.05));
  color:var(--muted);border:.5px solid var(--border);
}
.cal-btn-s:hover{color:var(--tx);}
.cal-btn-p{
  flex:1.3;border:none;color:#fff;font-weight:800;
  background:linear-gradient(135deg,#e50914,#8f0609);
  box-shadow:0 4px 12px rgba(229,9,20,.32);
}

/* ──────────────────────────────────────────────
   TIME PICKER POPUP (.tp-ov overlay + .tp-pop card)
   ────────────────────────────────────────────── */
.tp-ov{
  display:none;position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.68);backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:20px;
}
.tp-ov.on{display:flex;animation:fadeIn .2s ease;}

.tp-pop{
  width:100%;max-width:320px;
  background:var(--card);border:.5px solid var(--border);
  border-radius:20px;padding:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:popUp .22s cubic-bezier(.25,1.4,.5,1);
}

.tp-title{
  font-size:13px;font-weight:700;color:var(--muted);
  text-align:center;letter-spacing:1.5px;text-transform:uppercase;
  font-family:'Poppins',sans-serif;margin-bottom:6px;
}
.tp-disp{
  font-size:44px;font-weight:900;color:var(--red);
  text-align:center;letter-spacing:4px;
  font-family:'Poppins',sans-serif;margin-bottom:14px;
  text-shadow:0 2px 14px rgba(229,9,20,.28);
}
.tp-split{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-bottom:4px;
}
.tp-col-lbl{
  font-size:9px;color:var(--muted);letter-spacing:1.3px;
  text-transform:uppercase;font-weight:700;text-align:center;
  padding:6px 0 4px;
}
.tp-items{
  background:var(--card2,rgba(255,255,255,.03));
  border:.5px solid var(--border);border-radius:12px;
  max-height:170px;overflow-y:auto;padding:4px;
  scroll-behavior:smooth;scrollbar-width:thin;
}
.tp-items::-webkit-scrollbar{width:3px;}
.tp-items::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

.tp-item{
  display:block;width:100%;padding:8px 0;
  background:transparent;border:.5px solid transparent;
  color:var(--tx);font-size:13px;font-weight:600;
  cursor:pointer;border-radius:8px;margin-bottom:2px;
  font-family:'Inter',sans-serif;text-align:center;
  transition:.12s;
}
.tp-item:hover{background:rgba(255,255,255,.05);}
.tp-item.on{
  background:linear-gradient(135deg,#e50914,#8f0609);
  color:#fff;font-weight:800;
  box-shadow:0 3px 10px rgba(229,9,20,.28);
}

/* ──────────────────────────────────────────────
   CUSTOM DATE/TIME DISPLAY BUTTON (pengganti native input)
   ────────────────────────────────────────────── */
.dt-input,.tm-input{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;width:100%;padding:12px 14px;
  background:var(--card);border:.5px solid var(--border);
  border-radius:12px;cursor:pointer;
  font-size:13px;color:var(--tx);
  font-family:'Inter',sans-serif;transition:.15s;
}
.dt-input:hover,.tm-input:hover{border-color:rgba(229,9,20,.42);}
.dt-input .ph,.tm-input .ph{color:var(--muted);}
.dt-input::after{content:'📅';flex-shrink:0;opacity:.65;font-size:14px;}
.tm-input::after{content:'🕐';flex-shrink:0;opacity:.65;font-size:14px;}

/* ──────────────────────────────────────────────
   CURRENCY INPUT — visual polish
   ────────────────────────────────────────────── */
input.currency-inp{
  font-family:'Inter',sans-serif;font-weight:600;letter-spacing:.3px;
}
input.currency-inp::placeholder{
  color:var(--muted);font-weight:400;letter-spacing:0;
}

/* ──────────────────────────────────────────────
   PACKAGE CARD — info-mode (lihat harga saja, tanpa transaksi)
   ────────────────────────────────────────────── */
.pkg-card.info-mode{cursor:default;}
.pkg-card.info-mode .pkg-check{display:none!important;}
.pkg-card.info-mode:active{transform:none;}

.pkg-info-cta{
  margin-top:16px;padding:14px 16px;border-radius:14px;
  background:linear-gradient(135deg,#e50914,#8f0609);
  color:#fff;border:none;cursor:pointer;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  box-shadow:0 6px 18px rgba(229,9,20,.32);
  transition:transform .12s;
}
.pkg-info-cta:active{transform:scale(.98);}
.pkg-info-cta-t{
  font-size:13px;font-weight:800;letter-spacing:.3px;
  font-family:'Poppins',sans-serif;
}
.pkg-info-cta-s{
  font-size:10px;opacity:.85;font-family:'Inter',sans-serif;
}

/* ──────────────────────────────────────────────
   TRANSACTION PAGE — filter bar + chips + status badges
   ────────────────────────────────────────────── */
.tx-filter-bar{
  position:sticky;top:0;z-index:5;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:10px 14px 10px;
  background:var(--bg);border-bottom:.5px solid var(--border);
  flex-wrap:wrap;
}
.tx-chips{display:flex;gap:6px;flex:1;min-width:0;flex-wrap:wrap;}
.tx-chip{
  padding:6px 11px;background:var(--card);color:var(--tx);
  border:.5px solid var(--border);border-radius:20px;
  font-size:11px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Inter',sans-serif;transition:.12s;
}
.tx-chip:active{transform:scale(.95);}
.tx-chip.on{
  background:var(--red);color:#fff;border-color:var(--red);
  box-shadow:0 3px 10px rgba(229,9,20,.3);
}
.tx-chip-count{
  font-size:9px;padding:1.5px 5px;
  background:rgba(255,255,255,.17);border-radius:8px;
  font-weight:800;min-width:16px;text-align:center;
}
.tx-chip:not(.on) .tx-chip-count{
  background:rgba(255,255,255,.06);color:var(--muted);
}
.tx-sort-btn{
  padding:6px 11px;background:var(--card);color:var(--tx);
  border:.5px solid var(--border);border-radius:20px;
  font-size:11px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-family:'Inter',sans-serif;
}
.tx-sort-btn:active{transform:scale(.95);}

/* Transaction list items + status badges */
.tx-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-bottom:.5px solid var(--border);
  cursor:pointer;transition:background .12s;
}
.tx-item:hover{background:rgba(255,255,255,.02);}
.tx-item:active{background:rgba(229,9,20,.05);}
.tx-avatar{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.tx-avatar-perf{background:linear-gradient(135deg,#ff3c5c,#e50914);}
.tx-avatar-mech{background:linear-gradient(135deg,#1db954,#1a9a5f);}
.tx-body{flex:1;min-width:0;}
.tx-label-row{display:flex;align-items:center;gap:6px;margin-bottom:3px;}
.tx-label{
  font-size:10px;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
}
.tx-stat{
  font-size:9px;font-weight:800;padding:2px 7px;border-radius:6px;
  letter-spacing:.4px;
}
.tx-stat-sukses{
  background:rgba(29,185,84,.18);color:#5dd9a0;
  border:.5px solid rgba(29,185,84,.32);
}
.tx-stat-pending{
  background:rgba(245,197,24,.18);color:#f5c518;
  border:.5px solid rgba(245,197,24,.32);
  animation:pendingPulse 1.8s ease-in-out infinite;
}
@keyframes pendingPulse{
  0%,100%{opacity:1;}
  50%{opacity:.6;}
}
.tx-name{
  font-size:13px;color:var(--tx);font-weight:700;
  font-family:'Poppins',sans-serif;margin-bottom:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tx-inv{
  font-size:10px;color:var(--muted);
  font-family:'Courier New',monospace;letter-spacing:.2px;
}
.tx-amt{
  font-size:13px;font-weight:800;color:var(--red);
  font-family:'Poppins',sans-serif;flex-shrink:0;
}

.tx-empty{text-align:center;padding:60px 24px;}
.tx-empty-ic{font-size:48px;margin-bottom:14px;opacity:.5;}
.tx-empty-t{
  font-size:15px;font-weight:800;color:var(--tx);
  font-family:'Poppins',sans-serif;margin-bottom:6px;
}
.tx-empty-s{font-size:11px;color:var(--muted);line-height:1.55;}

/* ──────────────────────────────────────────────
   BACK BUTTON (untuk page riwayat)
   ────────────────────────────────────────────── */
.back-btn{
  width:36px;height:36px;border-radius:10px;
  background:var(--card);border:.5px solid var(--border);
  color:var(--tx);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;transition:.12s;
}
.back-btn:hover{background:rgba(229,9,20,.1);color:var(--red);}
.back-btn:active{transform:scale(.92);}

/* ──────────────────────────────────────────────
   INVOICE — stamp LUNAS / MENUNGGU + layout
   ────────────────────────────────────────────── */
.inv-stamp{
  transform:rotate(-8deg);padding:5px 12px;border:2px solid;
  border-radius:6px;font-size:13px;font-weight:900;
  letter-spacing:2px;font-family:'Poppins',sans-serif;flex-shrink:0;
}
.inv-stamp-lunas{border-color:#5dd9a0;color:#5dd9a0;}
.inv-stamp-pending{
  border-color:#f5c518;color:#f5c518;
  animation:stampPulse 1.8s ease-in-out infinite;
}
@keyframes stampPulse{
  0%,100%{opacity:1;transform:rotate(-8deg) scale(1);}
  50%{opacity:.72;transform:rotate(-8deg) scale(.97);}
}

.inv-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;padding:14px;background:linear-gradient(135deg,#18181b,#0f0f12);
  border-radius:14px;margin-bottom:14px;
}
.inv-logo{
  font-size:18px;font-weight:900;color:#fff;
  font-family:'Poppins',sans-serif;letter-spacing:.5px;
}
.inv-logo small{
  display:block;font-size:9px;color:#999;font-weight:500;
  letter-spacing:1px;margin-top:2px;
}
.inv-meta{
  display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;
  padding:12px 14px;background:var(--card);
  border:.5px solid var(--border);border-radius:12px;margin-bottom:12px;
}
.inv-meta-lbl{
  font-size:9px;color:var(--muted);letter-spacing:.5px;
  text-transform:uppercase;font-weight:700;margin-bottom:2px;
}
.inv-meta-val{
  font-size:12px;color:var(--tx);font-weight:700;
  font-family:'Inter',sans-serif;
}
.inv-meta-val.inv-no{font-family:'Courier New',monospace;}

.inv-section{
  padding:12px 14px;background:var(--card);
  border:.5px solid var(--border);border-radius:12px;margin-bottom:12px;
}
.inv-sec-title{
  font-size:10px;color:var(--muted);letter-spacing:.8px;
  text-transform:uppercase;font-weight:800;margin-bottom:10px;
}
.inv-artist-box{
  padding:10px 12px;background:rgba(255,255,255,.02);
  border:.5px dashed var(--border);border-radius:10px;margin-bottom:8px;
}
.inv-artist-box:last-child{margin-bottom:0;}
.inv-artist-name{
  font-size:12.5px;font-weight:800;color:var(--tx);
  font-family:'Poppins',sans-serif;margin-bottom:6px;
}
.inv-artist-row{
  display:flex;justify-content:space-between;font-size:11px;
  padding:4px 0;color:var(--muted);
}
.inv-artist-row strong{color:var(--tx);font-weight:700;}
.inv-song-list{
  margin-top:8px;padding-top:8px;border-top:.5px solid var(--border);
  font-size:11px;color:var(--muted);line-height:1.6;
}
.inv-song-list div{padding:2px 0;}
.inv-total{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px;background:linear-gradient(135deg,rgba(229,9,20,.08),rgba(229,9,20,.04));
  border:.5px solid rgba(229,9,20,.25);border-radius:14px;
  margin-bottom:14px;
}
.inv-total-lbl{
  font-size:12px;font-weight:700;color:var(--tx);
  font-family:'Poppins',sans-serif;
}
.inv-total-val{
  font-size:19px;font-weight:900;color:var(--red);
  font-family:'Poppins',sans-serif;letter-spacing:.5px;
}
.inv-footer{
  text-align:center;font-size:10px;color:var(--muted);
  line-height:1.6;padding:10px 4px;
}
.inv-actions{display:flex;gap:8px;margin-top:14px;}
.inv-btn{
  flex:1;padding:12px;border-radius:12px;
  font-size:12px;font-weight:800;cursor:pointer;
  font-family:'Inter',sans-serif;transition:.12s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.inv-btn:active{transform:scale(.97);}
.inv-btn-p{
  border:none;color:#fff;
  background:linear-gradient(135deg,#e50914,#8f0609);
  box-shadow:0 4px 14px rgba(229,9,20,.35);
}
.inv-btn-s{
  background:var(--card);color:var(--tx);
  border:.5px solid var(--border);
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP TOP NAVBAR (.dt-nav) — hidden by default on mobile
   ══════════════════════════════════════════════════════════════ */
.dt-nav{display:none;}
.dt-nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;max-width:1200px;margin:0 auto;padding:12px 24px;height:64px;
}
.dt-brand{display:flex;align-items:center;gap:10px;cursor:pointer;}
.dt-logo{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#e50914,#8f0609);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(229,9,20,.3);flex-shrink:0;
}
.dt-bname{
  font-size:16px;font-weight:900;color:var(--tx);
  font-family:'Poppins',sans-serif;letter-spacing:.3px;line-height:1.1;
}
.dt-bsub{
  font-size:9px;color:var(--muted);letter-spacing:1.5px;
  text-transform:uppercase;font-weight:700;margin-top:2px;
}
.dt-menu{display:flex;align-items:center;gap:4px;flex:1;justify-content:center;}
.dt-link{
  padding:8px 16px;background:transparent;border:none;
  color:rgba(255,255,255,0.80);font-size:13px;font-weight:600;
  cursor:pointer;border-radius:10px;font-family:'Inter',sans-serif;
  transition:color .15s,background .15s;
}
.dt-link:hover{color:#fff;background:rgba(255,255,255,.05);}
.dt-link-on{color:#fff !important;font-weight:800;background:rgba(229,9,20,.12);}
.dt-auth{display:flex;align-items:center;gap:8px;}

/* ══════════════════════════════════════════════════════════════
   RY-MINI — kompak icon row (ganti ry-grid lama)
   ══════════════════════════════════════════════════════════════ */
.ry-mini-wrap{
  display:flex;gap:8px;padding:12px 14px 4px;
  overflow-x:auto;scrollbar-width:none;
}
.ry-mini-wrap::-webkit-scrollbar{display:none;}
.ry-mini{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:5px;padding:10px 6px;background:var(--card);
  border:.5px solid var(--border);border-radius:14px;cursor:pointer;
  transition:transform .12s,border-color .12s;
}
.ry-mini:active{transform:scale(.96);}
.ry-mini-mech:hover{border-color:rgba(29,185,84,.4);}
.ry-mini-perf:hover{border-color:rgba(229,9,20,.4);}
.ry-mini-info:hover{border-color:rgba(245,197,24,.4);}
.ry-mini-sawer:hover{border-color:rgba(245,197,24,.5);box-shadow:0 0 16px rgba(245,197,24,.15);}
.ry-mini-ic{
  width:36px;height:36px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:19px;
}
.ry-mini-mech .ry-mini-ic{background:linear-gradient(135deg,rgba(29,185,84,.22),rgba(29,185,84,.08));}
.ry-mini-perf .ry-mini-ic{background:linear-gradient(135deg,rgba(229,9,20,.22),rgba(229,9,20,.08));}
.ry-mini-info .ry-mini-ic{background:linear-gradient(135deg,rgba(245,197,24,.22),rgba(245,197,24,.08));}
.ry-mini-sawer .ry-mini-ic{background:linear-gradient(135deg,rgba(245,197,24,.28),rgba(196,154,13,.1));}
.ry-mini-lbl{
  font-size:10.5px;font-weight:700;color:var(--tx);
  font-family:'Inter',sans-serif;letter-spacing:.2px;text-align:center;
  white-space:nowrap;
}

/* ══════════════════════════════════════════════════════════════
   LI-PREVIEW-BTN — tombol play 15s di setiap item lagu
   ══════════════════════════════════════════════════════════════ */
.li-preview-btn{
  width:32px;height:32px;border-radius:50%;border:none;flex-shrink:0;
  background:linear-gradient(135deg,#e50914,#8f0609);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(229,9,20,.35);
  transition:transform .12s;margin-left:6px;
}
.li-preview-btn:hover{transform:scale(1.08);}
.li-preview-btn:active{transform:scale(.92);}
.li-preview-btn.playing{
  background:linear-gradient(135deg,#f5c518,#d4a817);
  box-shadow:0 3px 10px rgba(245,197,24,.4);
  animation:btnPulse 1.2s ease-in-out infinite;
}
@keyframes btnPulse{
  0%,100%{box-shadow:0 3px 10px rgba(245,197,24,.4);}
  50%{box-shadow:0 3px 18px rgba(245,197,24,.7);}
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP LAYOUT — >= 900px
   ══════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  /* Fix scroll & klik di desktop */
  html{height:auto;overflow-y:auto;}
  body{background:var(--bg);min-height:100vh;height:auto;overflow-y:auto;}

  /* Desktop top nav */
  .dt-nav{
    display:block;position:sticky;top:0;z-index:100;
    background:rgba(10,10,10,.95);backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:.5px solid var(--border2);
  }
  .bnav{display:none!important;}
  .topbar{display:none!important;}

  /* Screen & pages */
  .screen{
    width:100%!important;max-width:100%!important;
    height:auto;min-height:calc(100vh - 64px);
    overflow:visible;display:block;
  }
  .page{display:none;overflow:visible!important;}
  .page.active{display:block!important;}

  /* === TWO-COLUMN DESKTOP LAYOUT === */
  /* Beranda: sidebar (280px) + main content */
  #page-beranda .scroll,
  #page-lagu .scroll,
  #page-berita .scroll,
  #page-profil .scroll,
  #page-riwayat .scroll {
    overflow:visible;
    padding:32px 32px 80px;
    max-width:1280px;
    margin:0 auto;
    width:100%;
    box-sizing:border-box;
  }
  #page-play .scroll {
    overflow:visible;padding:32px 32px 120px;
    max-width:980px;margin:0 auto;width:100%;box-sizing:border-box;
  }

  /* Search bar: proper max width, not full stretch */
  .srow{margin-bottom:18px;max-width:680px;}
  .srch{max-width:100%;border-radius:14px;}
  .g-name{font-size:28px;}
  .g-label{font-size:13px;}
  .greet{padding:10px 0 16px;}

  /* Banner */
  .bwrap{margin-bottom:32px;}
  .bcard{height:300px;}
  .btit{font-size:30px;}
  .bsub{font-size:14px;}

  /* Ry-mini grid */
  .ry-mini-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:100%;padding:0 0 24px;}
  .ry-mini{padding:16px 14px;}
  .ry-mini-ic{width:44px;height:44px;font-size:22px;}

  /* Music grid */
  .hs{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
    gap:16px;overflow:visible;padding:0 0 8px;
  }
  .sc-card{width:auto!important;min-width:0;}
  .sec-t{font-size:18px;font-weight:800;}
  .sec-hd{margin-bottom:14px;}

  /* Venue sections */
  .venue-hd{padding:18px 0 12px;}
  .venue-title{font-size:16px;}

  /* List-all 2-column grid */
  #list-all{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
    gap:10px;
  }
  .li{border-radius:14px;}

  /* Genre chips */
  .gchips,.vchips{flex-wrap:wrap;overflow:visible;gap:8px 6px;padding:0 0 14px;}

  /* News: 2-col grid for cards */
  #page-berita .scroll .news-cards{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:14px;
  }
  .news-card{flex-direction:column;}

  /* Play page: nicer layout */
  .play-license-strip{max-width:640px;margin:0 auto 20px;}
  .play-list-hd{max-width:640px;margin:0 auto 12px;}
  #play-list{max-width:640px;margin:0 auto;}
  #play-list-empty{max-width:640px;margin:0 auto;}

  /* Sheets → centered modals */
  .sh-sheet{
    left:50%!important;right:auto!important;bottom:auto!important;
    top:50%!important;transform:translate(-50%,-50%) scale(.96)!important;
    width:92%;max-width:520px;
    max-height:88vh;border-radius:20px;
    opacity:0;transition:opacity .22s,transform .22s cubic-bezier(.25,1.4,.5,1);
  }
  .sh-sheet.on{transform:translate(-50%,-50%) scale(1)!important;opacity:1;}
  .sh-handle{display:none;}
  #invSheet{max-width:660px;}
  #certSheet{max-width:720px!important;}

  /* Beranda topbar inline */
  #page-beranda .topbar{
    display:block!important;background:transparent;
    padding:28px 32px 0;max-width:1280px;margin:0 auto;
    box-sizing:border-box;width:100%;
  }
  #page-beranda .topbar .tb-top{display:none;}
  #page-beranda .topbar.sc{border-bottom:none;}
  #page-beranda .greet{padding:0 0 12px;}
  #page-beranda .srow{padding:0;}
  .page:not(#page-beranda) .topbar{display:none!important;}

  /* Mini player desktop — centered, above viewport bottom */
  .mini-player{
    position:fixed!important;top:auto;bottom:20px;
    left:50%!important;transform:translateX(-50%)!important;
    width:600px;max-width:calc(100vw - 48px);
    border-radius:18px!important;
    box-shadow:0 8px 40px rgba(0,0,0,.65);
    border:.5px solid rgba(255,60,92,.25)!important;
  }
  .mini-player.on{transform:translateX(-50%)!important;opacity:1;}

  /* Banner lebih tinggi di desktop */
  .bwrap{margin-bottom:28px;}
  .bcard{height:320px;}
  .btit{font-size:32px;}
  .bsub{font-size:14px;}

  /* Ry-mini: kasih lebih banyak breathing room, tetap kompak */
  .ry-mini-wrap{max-width:600px;margin:0 auto;padding:0 0 20px;}
  .ry-mini{padding:14px 10px;}
  .ry-mini-ic{width:42px;height:42px;font-size:22px;}
  .ry-mini-lbl{font-size:12px;}

  /* Kategori lagu (beranda + musik) jadi grid multi-column di desktop */
  .hs{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:14px;overflow:visible;padding:0 0 8px;
  }
  .sc-card{width:auto!important;min-width:0;}

  /* Section header lebih besar */
  .sec-t{font-size:17px;}

  /* Venue sections di page musik */
  .venue-hd{padding:16px 0 10px;}
  .venue-title{font-size:15px;}

  /* List item (page musik list-all) pake grid 2 kolom */
  #list-all{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:10px;
  }
  .li{border-radius:12px;}

  /* Sheet bottom → modal centered di desktop */
  .sh-sheet{
    left:50%!important;right:auto!important;bottom:auto!important;
    top:50%!important;transform:translate(-50%,-50%) scale(.96)!important;
    width:92%;max-width:520px;
    max-height:86vh;border-radius:20px;
    opacity:0;transition:opacity .22s,transform .22s cubic-bezier(.25,1.4,.5,1);
  }
  .sh-sheet.on{
    transform:translate(-50%,-50%) scale(1)!important;opacity:1;
  }
  .sh-handle{display:none;}

  /* Invoice sheet lebar sedikit lebih besar */
  #invSheet{max-width:640px;}

  /* Topbar mobile hidden, tapi greet masih ditampilkan inline di beranda */
  #page-beranda .topbar{
    display:block!important;background:transparent;
    padding:24px 24px 0;max-width:1100px;margin:0 auto;
    box-sizing:border-box;width:100%;
  }
  #page-beranda .topbar .tb-top{display:none;} /* brand + auth di desktop nav */
  #page-beranda .topbar.sc{border-bottom:none;}
  #page-beranda .greet{padding:0 0 10px;}
  #page-beranda .srow{padding:0;}

  /* Topbar non-beranda (header page) — hide di desktop karena dt-nav sudah ada */
  .page:not(#page-beranda) .topbar{display:none!important;}


  /* Map picker, disclaimer, cert sheet on desktop */
  #mapPickerOv { align-items: center !important; }
  #mapPickerBox { border-radius: 20px !important; max-width: 600px !important; max-height: 80vh !important; }
  #mapLeaflet { min-height: 300px !important; }
  #disclaimerOv > div { max-width: 500px !important; }
  #certSheet { max-width: 720px !important; }
  #dsSheet { max-width: 560px !important; }
  #artSheet { max-width: 540px !important; }
  #perfSheet { max-width: 540px !important; }

}

/* ══════════════════════════════════════════════════════════════
   TABLET — 600px to 899px
   ══════════════════════════════════════════════════════════════ */
@media (min-width:600px) and (max-width:899px){
  .hs{
    display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
    overflow:visible;padding:0 14px;
  }
  .sc-card{width:auto!important;min-width:0;}
}

/* ══════════════════════════════════════════════════════════════
   PRINT (invoice → print to PDF)
   ══════════════════════════════════════════════════════════════ */
@media print{
  .dt-nav,.bnav,.topbar,.inv-actions,.sh-close,.sh-handle{display:none!important;}
  body{background:#fff;color:#000;}
  .inv-stamp-pending{animation:none;}
  .sh-sheet{
    position:static!important;transform:none!important;
    width:100%!important;max-width:100%!important;
    max-height:none!important;opacity:1!important;
  }
}

/* ═══════════════════════════════════════════════
   PACKAGE LOCK — paket di bawah kategori terkunci
   ═══════════════════════════════════════════════ */
.pkg-card.pkg-locked{
  opacity:.55;cursor:not-allowed;position:relative;
  filter:grayscale(.4);
}
.pkg-card.pkg-locked:active{transform:none;}
.pkg-card.pkg-locked .pkg-check{display:none;}
.pkg-lock-ov{
  position:absolute;top:8px;right:8px;
  display:flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:16px;
  background:rgba(0,0,0,.58);backdrop-filter:blur(6px);
  border:.5px solid rgba(255,255,255,.12);
  pointer-events:none;
}
.pkg-lock-ic{font-size:12px;}
.pkg-lock-msg{
  font-size:9.5px;color:#fff;font-weight:700;
  letter-spacing:.2px;font-family:'Inter',sans-serif;
}

/* ═══════════════════════════════════════════════
   CHECKOUT SHEET
   ═══════════════════════════════════════════════ */
.co-hero{
  display:flex;align-items:center;gap:12px;
  padding:14px;background:linear-gradient(135deg,rgba(229,9,20,.1),rgba(229,9,20,.03));
  border:.5px solid rgba(229,9,20,.22);border-radius:14px;margin-bottom:14px;
}
.co-hero-ic{
  width:50px;height:50px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:25px;
  border:.5px solid var(--border);
}
.co-hero-bd{flex:1;min-width:0;}
.co-hero-t{
  font-size:16px;font-weight:800;color:var(--tx);
  font-family:'Poppins',sans-serif;margin-bottom:2px;
}
.co-hero-s{font-size:11px;color:var(--muted);line-height:1.45;}

.co-section{
  margin-bottom:12px;padding:12px 14px;
  background:var(--card);border:.5px solid var(--border);
  border-radius:12px;
}
.co-section-t{
  font-size:10px;color:var(--muted);letter-spacing:.8px;
  text-transform:uppercase;font-weight:800;margin-bottom:8px;
}
.co-row{
  display:flex;justify-content:space-between;gap:10px;
  font-size:12px;padding:4px 0;
}
.co-row-l{color:var(--muted);}
.co-row-r{color:var(--tx);text-align:right;font-weight:600;}

.co-notice{
  padding:14px;background:rgba(245,197,24,.08);
  border:.5px solid rgba(245,197,24,.3);border-radius:14px;
  margin-bottom:14px;
}
.co-notice-hd{
  font-size:12px;font-weight:800;color:#f5c518;
  font-family:'Poppins',sans-serif;margin-bottom:8px;
}
.co-notice-ul{
  margin:0;padding:0 0 0 18px;
  font-size:11px;color:var(--tx);line-height:1.7;
}
.co-notice-ul li{margin-bottom:4px;}
.co-notice-ul li:last-child{margin-bottom:0;}
.co-notice-ul b{color:#f5c518;font-weight:800;}

.co-topup{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;
  background:linear-gradient(135deg,rgba(124,111,255,.12),rgba(124,111,255,.04));
  border:.5px solid rgba(124,111,255,.3);border-radius:14px;margin-bottom:14px;
  cursor:pointer;transition:transform .12s;
}
.co-topup:active{transform:scale(.98);}
.co-topup-ic{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:19px;
  background:rgba(124,111,255,.2);
}
.co-topup-bd{flex:1;min-width:0;}
.co-topup-t{
  font-size:12.5px;font-weight:800;color:#a29dff;
  font-family:'Poppins',sans-serif;margin-bottom:2px;
}
.co-topup-s{font-size:10.5px;color:var(--muted);line-height:1.45;}

.co-total{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 16px;
  background:linear-gradient(135deg,rgba(229,9,20,.1),rgba(229,9,20,.04));
  border:.5px solid rgba(229,9,20,.3);border-radius:14px;margin-bottom:12px;
}
.co-total-l{
  font-size:13px;font-weight:700;color:var(--tx);
  font-family:'Poppins',sans-serif;
}
.co-total-r{
  font-size:22px;font-weight:900;color:var(--red);
  font-family:'Poppins',sans-serif;letter-spacing:.5px;
}
.co-pay-btn{
  width:100%;padding:14px;font-size:14px!important;
  letter-spacing:.4px;margin-top:4px;
}
.co-footer{
  text-align:center;font-size:10px;color:var(--muted);
  margin-top:10px;line-height:1.5;
}

/* ═══════════════════════════════════════════════
   PROFILE EDIT SHEET — note styling
   ═══════════════════════════════════════════════ */
.pe-note{
  font-size:11px;color:var(--muted);line-height:1.55;
  padding:10px 12px;background:rgba(127,119,221,.05);
  border:.5px dashed rgba(127,119,221,.2);border-radius:10px;
  margin-top:4px;
}

/* ═══════════════════════════════════════════════
   PROFILE CARD — center avatar & info (mobile & desktop)
   ═══════════════════════════════════════════════ */
.profile-card{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.profile-av{
  width:68px!important;height:68px!important;
  font-size:28px!important;
  margin:0 0 12px!important;
  box-shadow:0 6px 20px rgba(229,9,20,.35);
}
.profile-name{margin-bottom:4px!important;}
.profile-email{margin-bottom:12px!important;}
.role-badge{display:inline-flex;}

/* ═══════════════════════════════════════════════
   PREVIEW BTN di "Tambah ke Playlist" sheet items
   ═══════════════════════════════════════════════ */
.add-preview-btn{
  width:30px;height:30px;border-radius:50%;border:none;flex-shrink:0;
  background:linear-gradient(135deg,#f5c518,#d4a817);color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(245,197,24,.35);
  transition:transform .12s;margin-right:4px;
}
.add-preview-btn:hover{transform:scale(1.08);}
.add-preview-btn:active{transform:scale(.92);}
.add-preview-btn.playing{
  background:linear-gradient(135deg,#ff3c5c,#e50914);
  box-shadow:0 3px 10px rgba(229,9,20,.45);
  animation:btnPulse 1.2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════
   DEMO ACCOUNT CARD — di login sheet untuk quick-fill
   ═══════════════════════════════════════════════ */
.demo-acc-card{
  margin:0 0 14px;padding:11px 13px;
  background:linear-gradient(135deg,rgba(124,111,255,.12),rgba(124,111,255,.04));
  border:.5px dashed rgba(124,111,255,.32);border-radius:12px;
  cursor:pointer;transition:transform .12s,border-color .12s;
}
.demo-acc-card:hover{border-color:rgba(124,111,255,.5);}
.demo-acc-card:active{transform:scale(.98);}
.demo-acc-hd{
  display:flex;align-items:center;gap:6px;margin-bottom:6px;
  font-size:10.5px;font-weight:800;color:#a29dff;
  font-family:'Poppins',sans-serif;letter-spacing:.5px;text-transform:uppercase;
}
.demo-acc-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;color:var(--tx);font-family:'Inter',sans-serif;padding:2px 0;
}
.demo-acc-row-l{color:var(--muted);}
.demo-acc-row-r{font-weight:700;font-family:'Courier New',monospace;}
.demo-acc-hint{
  font-size:9.5px;color:var(--muted);margin-top:6px;line-height:1.5;
}

/* ══════════════════════════════════════════════════════════════
   MAP PICKER MODAL
   ══════════════════════════════════════════════════════════════ */
#mapPickerOv { display: none; }
#mapLeaflet .leaflet-container { background: var(--card2); }
/* Override Leaflet tile attribution for dark mode */
.leaflet-control-attribution { background: rgba(0,0,0,.5) !important; color: rgba(255,255,255,.4) !important; }
.leaflet-control-attribution a { color: rgba(255,255,255,.5) !important; }
/* Map search results scrollbar */
#mapSearchResults::-webkit-scrollbar { display: none; }
/* Desktop — map picker becomes a centered modal */

/* ══════════════════════════════════════════════════════════════
   CONTRACT UPLOAD
   ══════════════════════════════════════════════════════════════ */
#aa-contract-preview { display: none; }

/* ══════════════════════════════════════════════════════════════
   DISCLAIMER MODAL
   ══════════════════════════════════════════════════════════════ */
#disclaimerOv { display: none; }

/* ══════════════════════════════════════════════════════════════
   CERTIFICATE SHEET
   ══════════════════════════════════════════════════════════════ */
#certSheet .sh-body { padding-bottom: 32px; }

/* ══════════════════════════════════════════════════════════════
   ARTIST TYPE BADGE in form
   ══════════════════════════════════════════════════════════════ */
#aa-type-solo, #aa-type-duet { transition: background .15s, color .15s; }

/* ══════════════════════════════════════════════════════════════
   SOLO COUNTER HINT — colored urgency
   ══════════════════════════════════════════════════════════════ */
#aa-solo-hint { font-size: 10px; line-height: 1.5; }

/* ══════════════════════════════════════════════════════════════
   BRAND LOGO IMG — fully transparent container, no border/bg/shadow
   Logo hanya menampilkan gambar PNG-nya saja, tanpa kotak berwarna.
   ══════════════════════════════════════════════════════════════ */
.tb-logo, .dt-logo, .prof-logo-big, .dt-footer-logo {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.brand-logo {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.tb-logo .brand-logo { width: 28px; height: 28px; }
/* FIX v14.21: Naikkan ukuran logo di desktop navbar dari 30px ke 40px
   supaya pas memenuhi container .dt-logo yang 40×40px                */
.dt-logo .brand-logo { width: 40px; height: 40px; border-radius: 11px; }
.prof-logo-big .brand-logo { width: 62px; height: 62px; }
.dt-footer-logo .brand-logo { width: 34px; height: 34px; }

/* ══════════════════════════════════════════════════════════════
   SETTINGS LIST (Tokopedia-style) — icon kiri, judul + subjudul kanan
   ══════════════════════════════════════════════════════════════ */
.settings-list {
  background: var(--card);
  border-radius: 14px;
  border: .5px solid var(--border);
  overflow: hidden;
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  cursor: pointer;
  transition: background .15s;
  border-bottom: .5px solid var(--border);
}
.settings-item:last-child { border-bottom: none; }
.settings-item:hover { background: var(--card2); }
.settings-item:active { background: var(--card2); }
.settings-item .s-ic {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: var(--tx);
  opacity: .85;
}
.settings-item .s-bd { flex: 1; min-width: 0; }
.settings-item .s-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.3;
  font-family: 'Poppins', sans-serif;
}
.settings-item .s-s {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 3px;
}
.settings-item .s-chev {
  flex-shrink: 0;
  opacity: .25;
}
.settings-item.danger .s-t { color: var(--red); }
.settings-item.danger .s-ic { color: var(--red); opacity: 1; }

/* Accordion group for secondary settings (Seputar Karind, dll.) */
.settings-accordion {
  background: var(--card);
  border-radius: 12px;
  border: .5px solid var(--border);
  margin-top: 8px;
}
.settings-accordion-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px;
  cursor: pointer;
  user-select: none;
}
.settings-accordion-hd .s-t {
  font-size: 13px; font-weight: 700; color: var(--tx);
  font-family: 'Poppins', sans-serif;
}
.settings-accordion-hd .s-caret {
  transition: transform .2s;
  opacity: .5;
}
.settings-accordion.open .s-caret { transform: rotate(180deg); }
.settings-accordion-bd {
  display: none;
  border-top: .5px solid var(--border);
}
.settings-accordion.open .settings-accordion-bd { display: block; }
.settings-accordion-bd .settings-item:last-child { border-bottom: none; }

.settings-version {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  opacity: .6;
  margin: 18px 0 8px;
}

/* ══════════════════════════════════════════════════════════════
   RIWAYAT TRANSAKSI — Stack Cards di Profil
   Kartu-kartu overlap (stack) yang bisa diklik untuk lihat detail
   ══════════════════════════════════════════════════════════════ */
.tx-see-all-btn {
  background: transparent;
  border: 0;
  color: var(--red);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  letter-spacing: .2px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.tx-see-all-btn:hover { opacity: .8; }

.tx-stack-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tx-stack-empty {
  padding: 22px 16px;
  background: var(--card);
  border: .5px dashed var(--border);
  border-radius: 14px;
  text-align: center;
}
.tx-stack-empty-ic { font-size: 28px; margin-bottom: 6px; opacity: .7; }
.tx-stack-empty-t { font-size: 12.5px; font-weight: 700; color: var(--tx); margin-bottom: 3px; font-family: 'Poppins', sans-serif; }
.tx-stack-empty-s { font-size: 10.5px; color: var(--muted); line-height: 1.5; max-width: 260px; margin: 0 auto 10px; }
.tx-stack-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  background: linear-gradient(135deg, #e50914, #b8070f);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Stack card — offset layering effect */
.tx-stack-card {
  position: relative;
  background: var(--card);
  border: .5px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.tx-stack-card::before {
  /* left accent bar */
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent, #e50914);
}
.tx-stack-card.perf { --accent: #ff3c5c; }
.tx-stack-card.mech { --accent: #1db954; }
.tx-stack-card:hover {
  transform: translateY(-1px);
  border-color: rgba(229,9,20,.3);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.tx-stack-card:active { transform: translateY(0); }

.tx-stack-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.tx-stack-ic {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.tx-stack-ic.perf { background: rgba(255,60,92,.15); }
.tx-stack-ic.mech { background: rgba(29,185,84,.15); }
.tx-stack-title {
  flex: 1; min-width: 0;
}
.tx-stack-kind {
  font-size: 8.5px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase;
}
.tx-stack-kind.perf { color: #ff8fa0; }
.tx-stack-kind.mech { color: #5dd9a0; }
.tx-stack-name {
  font-size: 13px; font-weight: 700; color: var(--tx);
  font-family: 'Poppins', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.tx-stack-amt {
  text-align: right; flex-shrink: 0;
}
.tx-stack-amt-n {
  font-size: 12.5px; font-weight: 800; color: var(--tx);
  font-family: 'Poppins', sans-serif;
}
.tx-stack-status {
  display: inline-block;
  font-size: 8px; font-weight: 800; padding: 1.5px 5px;
  border-radius: 4px; letter-spacing: .5px; margin-top: 2px;
}
.tx-stack-status.sukses {
  background: rgba(29,185,84,.15); color: #1db954;
}
.tx-stack-status.pending {
  background: rgba(245,197,24,.15); color: var(--gold);
}

.tx-stack-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; color: var(--muted);
  padding-top: 8px;
  border-top: .5px dashed var(--border);
  margin-top: 4px;
}
.tx-stack-meta-item { display: flex; align-items: center; gap: 4px; }
.tx-stack-meta-sep { opacity: .4; }
.tx-stack-chev {
  margin-left: auto; opacity: .35;
}

/* ══════════════════════════════════════════════════════════════
   TX KATEGORI (v14) — Mechanical / Performance click-to-expand
   ══════════════════════════════════════════════════════════════ */
.txcat-wrap { display: flex; flex-direction: column; gap: 10px; }

.txcat-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: var(--card);
  border: .5px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  overflow: hidden;
}
.txcat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent, #1db954);
}
.txcat-card.mech { --accent: #1db954; }
.txcat-card.perf { --accent: #ff3c5c; }
.txcat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.1);
}
.txcat-card.on {
  border-color: rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
}
.txcat-card.on.mech { border-color: rgba(29,185,84,.35); }
.txcat-card.on.perf { border-color: rgba(255,60,92,.35); }

.txcat-ic {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.txcat-ic.mech { background: rgba(29,185,84,.15); }
.txcat-ic.perf { background: rgba(255,60,92,.15); }

.txcat-body { flex: 1; min-width: 0; }
.txcat-kind {
  font-size: 9px; font-weight: 800; letter-spacing: 1.3px;
  color: var(--muted);
  margin-bottom: 2px;
}
.txcat-card.mech .txcat-kind { color: #5dd9a0; }
.txcat-card.perf .txcat-kind { color: #ff8fa0; }
.txcat-title {
  font-size: 14px; font-weight: 800; color: var(--tx);
  font-family: 'Poppins', sans-serif;
  line-height: 1.2;
  margin-bottom: 2px;
}
.txcat-sub {
  font-size: 11px; color: var(--muted); line-height: 1.4;
}
.txcat-chev {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform .25s ease, color .2s ease;
}
.txcat-card.on .txcat-chev { transform: rotate(180deg); color: var(--tx); }

/* Expanded list under the kartu */
.txcat-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 2px 6px;
  margin-top: -4px;
  animation: txcat-slide .22s ease;
}
@keyframes txcat-slide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.txcat-row {
  position: relative;
  padding: 10px 12px 10px 16px;
  background: rgba(255,255,255,.02);
  border: .5px solid var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.txcat-row::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent, #1db954);
  opacity: .65;
}
.txcat-row.mech { --accent: #1db954; }
.txcat-row.perf { --accent: #ff3c5c; }
.txcat-row:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }

.txcat-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.txcat-row-name {
  font-size: 13px; font-weight: 700; color: var(--tx);
  font-family: 'Poppins', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.txcat-row-amt {
  font-size: 12.5px; font-weight: 800; color: var(--tx);
  font-family: 'Poppins', sans-serif;
  flex-shrink: 0;
}
.txcat-row-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; color: var(--muted);
  flex-wrap: wrap;
}

.txcat-empty {
  padding: 14px 14px;
  background: rgba(255,255,255,.02);
  border: .5px dashed var(--border);
  border-radius: 11px;
  text-align: center;
}
.txcat-empty-t {
  font-size: 11px; color: var(--muted); line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   TX CATEGORY ICON BUTTONS (Profil) — v15
   Kompak, hanya ikon + label singkat. Klik buka halaman dedicated.
   ══════════════════════════════════════════════════════════════ */
.txcat-iconrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.txcat-iconbtn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  background: var(--card);
  border: .5px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  color: var(--tx);
}
.txcat-iconbtn::before {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent, #1db954);
}
.txcat-iconbtn.mech { --accent: #1db954; }
.txcat-iconbtn.perf { --accent: #ff3c5c; }
.txcat-iconbtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.12);
}
.txcat-iconbtn:active { transform: translateY(0); }
.txcat-iconbtn.mech:hover { border-color: rgba(29,185,84,.35); }
.txcat-iconbtn.perf:hover { border-color: rgba(255,60,92,.35); }

.txcat-iconbtn-ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.txcat-iconbtn.mech .txcat-iconbtn-ic { background: rgba(29,185,84,.15); }
.txcat-iconbtn.perf .txcat-iconbtn-ic { background: rgba(255,60,92,.15); }

.txcat-iconbtn-bd { flex: 1; min-width: 0; }
.txcat-iconbtn-kind {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.2px;
  margin-bottom: 3px;
  line-height: 1;
}
.txcat-iconbtn.mech .txcat-iconbtn-kind { color: #5dd9a0; }
.txcat-iconbtn.perf .txcat-iconbtn-kind { color: #ff8fa0; }
.txcat-iconbtn-sub {
  font-size: 10.5px; color: var(--muted); line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.txcat-iconbtn-chev {
  flex-shrink: 0;
  color: var(--muted);
  opacity: .7;
  transition: transform .2s ease, opacity .2s ease;
}
.txcat-iconbtn:hover .txcat-iconbtn-chev {
  transform: translateX(2px);
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   TX CATEGORY PAGE (page-txcat) — hero + filter bar + list + empty
   ══════════════════════════════════════════════════════════════ */
.txcat-page-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 14px 14px;
  padding: 14px 14px;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.txcat-page-hero.mech {
  background: linear-gradient(135deg, rgba(29,185,84,.16), rgba(29,185,84,.04));
  border: .5px solid rgba(29,185,84,.32);
}
.txcat-page-hero.perf {
  background: linear-gradient(135deg, rgba(255,60,92,.16), rgba(229,9,20,.05));
  border: .5px solid rgba(255,60,92,.32);
}
.txcat-page-hero-ic {
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.txcat-page-hero-bd { flex: 1; min-width: 0; }
.txcat-page-hero-count {
  font-size: 10.5px; color: var(--muted); letter-spacing: .5px;
  text-transform: uppercase; font-weight: 700; margin-bottom: 2px;
}
.txcat-page-hero-total {
  font-size: 18px; font-weight: 800; color: var(--tx);
  font-family: 'Poppins', sans-serif; line-height: 1.1;
}

.txcat-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 14px 10px;
}
.txcat-filter-bar .tx-chips {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.txcat-sort-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: .5px solid var(--border);
}
.txcat-sort-lbl {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-right: 2px;
}
.txcat-filter-bar .tx-sort-btn {
  padding: 6px 10px;
  background: var(--card);
  color: var(--muted);
  border: .5px solid var(--border);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  transition: all .15s;
}
.txcat-filter-bar .tx-sort-btn:hover {
  color: var(--tx);
  border-color: rgba(255,255,255,.15);
}
.txcat-filter-bar .tx-sort-btn.on {
  background: rgba(229,9,20,.12);
  color: var(--red);
  border-color: rgba(229,9,20,.4);
}

#txcat-list {
  padding: 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#txcat-list .txcat-row {
  padding: 12px 14px 12px 18px;
  background: var(--card);
  border: .5px solid var(--border);
  border-radius: 12px;
  margin: 0;
}
#txcat-list .txcat-row::before {
  top: 14px; bottom: 14px;
  opacity: .8;
}

.txcat-empty-full {
  margin: 20px 14px;
  padding: 28px 16px;
  background: var(--card);
  border: .5px dashed var(--border);
  border-radius: 14px;
  text-align: center;
}
.txcat-empty-full-ic {
  font-size: 36px;
  margin-bottom: 8px;
  opacity: .7;
}
.txcat-empty-full-t {
  font-size: 13px; font-weight: 700;
  color: var(--tx);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 4px;
}
.txcat-empty-full-s {
  font-size: 11px; color: var(--muted);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   TX DETAIL SHEET — Detail paket + log lagu
   ══════════════════════════════════════════════════════════════ */
.txd-hero {
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 12px;
}
.txd-hero.perf {
  background: linear-gradient(135deg, rgba(255,60,92,.18), rgba(229,9,20,.06));
  border: .5px solid rgba(255,60,92,.35);
}
.txd-hero.mech {
  background: linear-gradient(135deg, rgba(29,185,84,.18), rgba(29,185,84,.04));
  border: .5px solid rgba(29,185,84,.35);
}
.txd-hero-top {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.txd-hero-ic {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(255,255,255,.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.txd-hero-kind {
  font-size: 9px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; opacity: .85;
}
.txd-hero-name {
  font-size: 16px; font-weight: 800; color: var(--tx);
  font-family: 'Poppins', sans-serif;
  margin-top: 2px;
}
.txd-hero-amt {
  font-size: 22px; font-weight: 900; color: var(--tx);
  font-family: 'Poppins', sans-serif; letter-spacing: -.3px;
  margin-top: 4px;
}

.txd-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card);
  border: .5px solid var(--border);
  border-radius: 12px;
  margin-bottom: 14px;
}
.txd-meta-item {}
.txd-meta-lb {
  font-size: 8.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 3px;
}
.txd-meta-v {
  font-size: 11.5px; font-weight: 600; color: var(--tx);
  word-break: break-word;
}

.txd-section-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 800;
  color: var(--tx);
  font-family: 'Poppins', sans-serif;
  margin: 14px 0 8px;
}
.txd-section-h-count {
  margin-left: auto;
  font-size: 9.5px; font-weight: 700; color: var(--muted);
  background: var(--card2);
  padding: 2px 7px; border-radius: 6px;
}

.txd-log-list {
  background: var(--card);
  border: .5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.txd-log-day {
  font-size: 8.5px; font-weight: 700; color: var(--muted);
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 10px 14px 4px;
  background: var(--card2);
  border-bottom: .5px solid var(--border);
}
.txd-log-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: .5px solid var(--border);
}
.txd-log-item:last-child { border-bottom: 0; }
.txd-log-ic {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(229,9,20,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--red);
  flex-shrink: 0;
}
.txd-log-bd { flex: 1; min-width: 0; }
.txd-log-t {
  font-size: 12px; font-weight: 700; color: var(--tx);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: 'Poppins', sans-serif;
}
.txd-log-a {
  font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.txd-log-tm {
  font-size: 9.5px; color: var(--muted);
  font-family: monospace;
  flex-shrink: 0;
}

.txd-log-empty {
  padding: 20px 16px;
  background: var(--card);
  border: .5px dashed var(--border);
  border-radius: 12px;
  text-align: center;
}
.txd-log-empty-ic { font-size: 24px; margin-bottom: 4px; opacity: .6; }
.txd-log-empty-t { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

.txd-actions {
  display: flex; gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: .5px solid var(--border);
}
.txd-act-btn {
  flex: 1;
  padding: 10px 0;
  background: var(--card2);
  color: var(--tx);
  border: .5px solid var(--border);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.txd-act-btn.gold {
  background: rgba(245,197,24,.1);
  color: var(--gold);
  border-color: rgba(245,197,24,.3);
}
.txd-act-btn:hover { opacity: .88; }

/* ══════════════════════════════════════════════════════════════
   SHOP LIST CARDS (v16) — Play page & Log page
   Long rectangular cards, one per cabang (Business Music tx).
   ══════════════════════════════════════════════════════════════ */
.shop-list-hd {
  padding: 12px 14px 4px;
}
.shop-list-t {
  font-size: 15px;
  font-weight: 800;
  color: var(--tx);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 2px;
}
.shop-list-s {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.shop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px 20px;
}
.shop-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 14px 14px;
  background: var(--card);
  border: .5px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  color: var(--tx);
}
.shop-card::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #1db954;
}
.shop-card.pending::before {
  background: #f5c518;
}
.shop-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  border-color: rgba(29,185,84,.35);
}
.shop-card:active { transform: translateY(0); }
.shop-card.pending:hover { border-color: rgba(245,197,24,.38); }

.shop-card-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 4px;
}
.shop-card-ic {
  width: 42px; height: 42px; border-radius: 11px;
  background: rgba(29,185,84,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.shop-card.pending .shop-card-ic {
  background: rgba(245,197,24,.15);
}
.shop-card-body { flex: 1; min-width: 0; }
.shop-card-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--tx);
  font-family: 'Poppins', sans-serif;
  line-height: 1.2;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--muted);
  flex-wrap: wrap;
  line-height: 1.4;
}
.shop-card-cat {
  display: inline-block;
  padding: 1.5px 7px;
  background: rgba(29,185,84,.1);
  color: #5dd9a0;
  border-radius: 6px;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: .3px;
}
.shop-card-sep { opacity: .45; }
.shop-card-status.pending {
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(245,197,24,.14);
  color: #f5c518;
  border-radius: 6px;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.shop-card-chev {
  flex-shrink: 0;
  color: var(--muted);
  opacity: .6;
  transition: transform .2s ease, opacity .2s ease;
}
.shop-card:hover .shop-card-chev {
  transform: translateX(2px);
  opacity: 1;
}
.shop-card-bar {
  margin: 10px 0 0 46px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.shop-card-fill {
  height: 100%;
  background: linear-gradient(90deg, #1db954, #2ecf68);
  border-radius: 2px;
  transition: width .3s ease;
}
.shop-card.pending .shop-card-fill {
  background: linear-gradient(90deg, #f5c518, #ffd54d);
}

/* ══════════════════════════════════════════════════════════════
   LOG PAGE — per-shop log rows
   ══════════════════════════════════════════════════════════════ */
.log-empty {
  margin: 20px 14px;
  padding: 28px 16px;
  background: var(--card);
  border: .5px dashed var(--border);
  border-radius: 14px;
  text-align: center;
}
.log-empty-ic { font-size: 36px; margin-bottom: 8px; opacity: .7; }
.log-empty-t {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 4px;
}
.log-empty-s {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}
.log-date {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 0 6px;
}
.log-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: .5px solid var(--border);
}
.log-row-ic {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(229,9,20,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.log-row-body { flex: 1; min-width: 0; }
.log-row-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tx);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Poppins', sans-serif;
}
.log-row-sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
}
.log-row-time {
  font-size: 9.5px;
  color: var(--muted);
  flex-shrink: 0;
  font-family: monospace;
}

/* ══════════════════════════════════════════════════════════════
   EXPLORE — Social feed musisi (v18)
   ══════════════════════════════════════════════════════════════ */
.exp-filter {
  display: flex;
  gap: 7px;
  padding: 10px 14px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.exp-filter::-webkit-scrollbar { display: none; }
.exp-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  background: var(--card);
  color: var(--muted);
  border: .5px solid var(--border);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
}
.exp-chip:hover { color: var(--tx); border-color: rgba(255,255,255,.15); }
.exp-chip.on {
  background: linear-gradient(135deg, rgba(229,9,20,.9), rgba(143,6,9,.9));
  color: #fff;
  border-color: rgba(229,9,20,.5);
  box-shadow: 0 2px 10px rgba(229,9,20,.25);
}

/* Composer */
.exp-composer {
  margin: 4px 14px 12px;
  padding: 12px;
  background: var(--card);
  border: .5px solid var(--border);
  border-radius: 14px;
}
.exp-composer-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.exp-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e50914;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  flex-shrink: 0;
}
.exp-avatar-me {
  background: linear-gradient(135deg, #e50914, #8f0609);
  box-shadow: 0 2px 8px rgba(229,9,20,.3);
}
.exp-composer-input {
  flex: 1;
  padding: 9px 14px;
  background: var(--card2);
  border: .5px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s;
}
.exp-composer-input:hover { border-color: rgba(255,255,255,.15); }
.exp-composer-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: .5px solid var(--border);
}
.exp-ca-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.exp-ca-btn:hover { background: var(--card2); color: var(--tx); }

/* Feed */
.exp-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px;
}
.exp-post {
  background: var(--card);
  border: .5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.exp-post-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px 10px;
}
.exp-post-author { flex: 1; min-width: 0; }
.exp-post-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--tx);
  font-family: 'Poppins', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.exp-verified { flex-shrink: 0; }
.exp-post-meta {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 1px;
}
.exp-role {
  padding: 1.5px 7px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 8.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.exp-role-musik { background: rgba(229,9,20,.15); color: #ff8080; }
.exp-role-event { background: rgba(245,197,24,.15); color: #f5c518; }
.exp-role-studio { background: rgba(255,60,92,.15); color: #ff8fa0; }
.exp-role-gear { background: rgba(124,111,255,.15); color: #a29aff; }
.exp-role-kolaborasi { background: rgba(29,185,84,.15); color: #5dd9a0; }
.exp-post-sep { opacity: .45; }
.exp-post-mood {
  font-size: 10px;
  color: var(--tx);
  font-weight: 600;
}
.exp-more {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.exp-more:hover { background: var(--card2); color: var(--tx); }
.exp-post-body { padding: 0 14px 10px; }
.exp-post-text {
  font-size: 12.5px;
  color: var(--tx);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.exp-post-tags {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.exp-post-genre {
  font-size: 10px;
  color: var(--red);
  font-weight: 700;
  background: rgba(229,9,20,.08);
  padding: 2px 8px;
  border-radius: 6px;
}
.exp-post-img {
  width: 100%;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: var(--card2);
}
.exp-post-cta {
  margin: 10px 14px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 11px;
  border: .5px solid var(--border);
}
.exp-cta-event {
  background: linear-gradient(135deg, rgba(245,197,24,.1), rgba(229,9,20,.05));
  border-color: rgba(245,197,24,.3);
}
.exp-cta-gear {
  background: linear-gradient(135deg, rgba(124,111,255,.1), rgba(255,60,92,.05));
  border-color: rgba(124,111,255,.3);
}
.exp-cta-ic {
  font-size: 22px;
  flex-shrink: 0;
}
.exp-cta-body { flex: 1; min-width: 0; }
.exp-cta-t {
  font-size: 12px;
  font-weight: 800;
  color: var(--tx);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.exp-cta-s {
  font-size: 10.5px;
  color: var(--muted);
}
.exp-cta-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .15s;
}
.exp-cta-btn:hover { opacity: .88; }
.exp-post-actions {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-top: .5px solid var(--border);
}
.exp-pa-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 6px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.exp-pa-btn:hover { background: var(--card2); color: var(--tx); }
.exp-pa-btn.liked {
  color: #ff3c5c;
}
.exp-pa-btn.liked svg path { fill: #ff3c5c; stroke: #ff3c5c; }

/* Empty state */
.exp-empty {
  margin: 20px 14px;
  padding: 32px 16px;
  background: var(--card);
  border: .5px dashed var(--border);
  border-radius: 14px;
  text-align: center;
}
.exp-empty-ic { font-size: 36px; margin-bottom: 8px; opacity: .7; }
.exp-empty-t {
  font-size: 13px;
  font-weight: 700;
  color: var(--tx);
  font-family: 'Poppins', sans-serif;
  margin-bottom: 4px;
}
.exp-empty-s {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}

/* Composer sheet contents */
.exp-compose-area {
  width: 100%;
  padding: 12px 14px;
  background: var(--card2);
  border: .5px solid var(--border);
  border-radius: 12px;
  color: var(--tx);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  min-height: 90px;
  line-height: 1.5;
}
.exp-compose-area:focus { outline: none; border-color: rgba(229,9,20,.4); }
.exp-mood-chips, .exp-genre-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.exp-mood-chip, .exp-genre-chip {
  padding: 6px 11px;
  background: var(--card2);
  color: var(--tx);
  border: .5px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
}
.exp-mood-chip:hover, .exp-genre-chip:hover { border-color: rgba(255,255,255,.2); }
.exp-mood-chip.on, .exp-genre-chip.on {
  background: rgba(229,9,20,.15);
  color: #ff8080;
  border-color: rgba(229,9,20,.4);
}

/* ══════════════════════════════════════════════════════════════
   BERITA GRID (v19) — Layout ala Kompas, rapi dengan tanggal
   ══════════════════════════════════════════════════════════════ */
.news-section-label {
  padding: 18px 15px 10px;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--tx);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  gap: 10px;
}
.news-section-label::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--red);
  border-radius: 2px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 4px 15px 10px;
}
@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; gap: 10px; }
}

.news-gcard {
  background: var(--card);
  border: .5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
  display: flex;
  flex-direction: column;
}
.news-gcard:hover {
  transform: translateY(-2px);
  border-color: rgba(229,9,20,.3);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.news-gcard-img {
  width: 100%;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: var(--card2);
  flex-shrink: 0;
}
.news-gcard-bd {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.news-gcard-t {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--tx);
  font-family: 'Poppins', sans-serif;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.news-gcard-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.news-gcard-cat {
  font-weight: 700;
  color: var(--red);
}
.news-gcard-sep { opacity: .5; }
.news-gcard-date { font-family: monospace; font-size: 9.5px; }

/* ═══ Registrasi role selector + sawer ═══ */
.reg-role-card {
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.reg-role-card:hover { background: rgba(255,255,255,0.03); }
.reg-role-card.on {
  background: rgba(229,9,20,0.08);
  border-color: rgba(229,9,20,0.4);
}
.reg-role-card.on-composer {
  background: rgba(245,197,24,0.08);
  border-color: rgba(245,197,24,0.4);
}

/* ═══ Sawer composer ═══ */
.sawer-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 10px;
}
.sawer-card:hover { background: rgba(255,255,255,0.03); border-color: rgba(245,197,24,0.3); }
.sawer-av {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #f5c518, #c49a0d);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; color: #000;
}
.sawer-info { flex: 1; min-width: 0; }
.sawer-name {
  font-size: 14px; font-weight: 700; color: var(--tx);
  font-family: 'Poppins', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sawer-meta {
  font-size: 11px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sawer-btn {
  padding: 8px 14px; background: linear-gradient(135deg, #f5c518, #c49a0d);
  color: #000; border: none; border-radius: 20px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  font-family: inherit;
}
.sawer-amount-chip {
  display: inline-block; padding: 8px 14px;
  background: rgba(245,197,24,0.08);
  border: 1px solid rgba(245,197,24,0.25);
  border-radius: 20px;
  font-size: 12px; font-weight: 600; color: #f5c518;
  cursor: pointer; margin: 4px;
  font-family: inherit;
  transition: all 0.15s;
}
.sawer-amount-chip:hover, .sawer-amount-chip.on {
  background: rgba(245,197,24,0.15);
  border-color: rgba(245,197,24,0.5);
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE FIXES (zoom lock + scroll) — ditambahkan untuk fix bug
   ════════════════════════════════════════════════════════════════════ */

/* Fix iOS auto-zoom saat tap input — font MINIMAL 16px di mobile
   (iOS Safari akan auto-zoom jika input font < 16px, abaikan user-scalable=no) */
@media (max-width: 900px) {
  .f-inp,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
  }
  /* Topbar search box juga dinaikkan */
  .srch input { font-size: 16px !important; }
}

/* Fix bottom sheet scroll terjebak di iOS */
.sh-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* News sheet detail: pastikan scrollable dengan jelas + padding bawah aman */
#newsBody {
  padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
}

/* Cegah pinch-zoom menggeser seluruh body */
html, body {
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Explore: lokasi di post ── */
.exp-post-loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 5px;
}

/* ── Explore: komentar preview di feed ── */
.exp-comments-preview {
  padding: 8px 14px 2px;
  border-top: .5px solid var(--border);
}
.exp-comment-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 6px;
}
.exp-comment-av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.exp-comment-body {
  flex: 1;
  min-width: 0;
  background: var(--card2);
  border-radius: 10px;
  padding: 5px 9px;
  font-size: 11.5px;
  line-height: 1.4;
}
.exp-comment-name {
  font-weight: 800;
  color: var(--tx);
  margin-right: 5px;
  font-family: 'Poppins', sans-serif;
}
.exp-comment-text {
  color: var(--tx);
  opacity: .85;
}
.exp-comment-more {
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  padding: 2px 0 4px;
}
.exp-comment-more:hover { color: var(--tx); }

/* ── Komentar full sheet ── */
.exp-cmt-full-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 12px;
}
.exp-cmt-full-body {
  flex: 1;
  background: var(--card2);
  border-radius: 12px;
  padding: 7px 11px;
  font-size: 12px;
  line-height: 1.45;
}

/* ── Multi-foto grid di post ── */
.exp-img-grid { margin-top: 0; border-radius: 12px; overflow: hidden; display: grid; gap: 2px; }
.exp-img-grid.grid-1 { grid-template-columns: 1fr; }
.exp-img-grid.grid-2 { grid-template-columns: 1fr 1fr; }
.exp-img-grid.grid-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 180px 140px; }
.exp-img-grid.grid-3 .img-cell:first-child { grid-column: 1 / -1; }
.exp-img-grid.grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px; }
.exp-img-grid.grid-5plus { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px; }
.img-cell { position: relative; overflow: hidden; background: var(--card2); min-height: 160px; }
.grid-1 .img-cell { min-height: 220px; max-height: 380px; }
.img-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; cursor: pointer; }
.img-cell img:hover { transform: scale(1.03); }
.img-more-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 800; pointer-events: none; }

/* ── Preview grid di compose ── */
.exp-prev-grid { display: grid; gap: 4px; border-radius: 10px; overflow: hidden; }
.exp-prev-grid.pg-1 { grid-template-columns: 1fr; }
.exp-prev-grid.pg-2 { grid-template-columns: 1fr 1fr; }
.exp-prev-grid.pg-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 130px 100px; }
.exp-prev-grid.pg-3 .pc:first-child { grid-column: 1 / -1; }
.exp-prev-grid.pg-4plus { grid-template-columns: 1fr 1fr; }
.pc { position: relative; overflow: hidden; border-radius: 6px; background: var(--card2); min-height: 100px; }
.pg-1 .pc { min-height: 160px; }
.pc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-del { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.7); border: none; color: #fff; border-radius: 50%; width: 22px; height: 22px; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
.exp-add-more-btn { border: 1.5px dashed var(--border); background: none; border-radius: 8px; color: var(--muted); font-size: 20px; cursor: pointer; min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-family: inherit; transition: border-color .15s; }
.exp-add-more-btn:hover { border-color: var(--red); color: var(--red); }
.exp-add-more-btn span:last-child { font-size: 10px; }

/* ══════════════════════════════════════
   SOCIAL — Profile, Follow, Feed
══════════════════════════════════════ */

/* Profile card redesign */
.profile-av-wrap { position:relative; display:inline-block; cursor:pointer; margin-bottom:8px; }
.profile-av-wrap .profile-av { width:80px; height:80px; border-radius:50%; font-size:30px; border:2.5px solid var(--red); }
.profile-av-edit-badge { position:absolute; bottom:2px; right:2px; background:var(--red); color:#fff; border-radius:50%; width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:11px; border:2px solid var(--bg); }

/* Stats row */
.pstat { display:flex; flex-direction:column; align-items:center; flex:1; gap:1px; cursor:pointer; padding:4px 0; }
.pstat:hover .pstat-n { color:var(--red); }
.pstat-n { font-size:17px; font-weight:800; color:var(--tx); font-family:'Poppins',sans-serif; }
.pstat-l { font-size:10px; color:var(--muted); }
.pstat-div { width:1px; height:32px; background:var(--border); }

/* Edit profile photo circle */
.ep-av-circle { width:90px; height:90px; border-radius:50%; background:var(--card2); border:2px dashed var(--border); display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; overflow:hidden; transition:border-color .2s; }
.ep-av-circle:hover { border-color:var(--red); }
.ep-av-letter { font-size:36px; font-weight:800; color:var(--tx); }
.ep-av-cam { position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.6); border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:12px; }
.f-err.on { display:block !important; }

/* Follow button */
.follow-btn { background:var(--red); color:#fff; border:none; border-radius:20px; padding:7px 18px; font-size:12px; font-weight:700; cursor:pointer; transition:all .15s; font-family:inherit; }
.follow-btn-on { background:var(--card2); color:var(--tx); border:.5px solid var(--border); }

/* Follow list item */
.follow-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:.5px solid var(--border); }
.follow-item:last-child { border-bottom:none; }
.follow-av { width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; color:#fff; flex-shrink:0; cursor:pointer; }
.follow-info { flex:1; min-width:0; cursor:pointer; }
.follow-name { font-size:13px; font-weight:600; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.follow-uname { font-size:11px; color:var(--muted); }

/* User profile sheet */
.up-header { padding:20px 16px 0; text-align:center; }
.up-av { width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:800; color:#fff; margin:0 auto 10px; border:2.5px solid var(--red); }
.up-name { font-size:17px; font-weight:800; color:var(--tx); }
.up-uname { font-size:12px; color:var(--muted); margin-top:1px; }
.up-bio { font-size:12px; color:var(--muted); margin:6px auto 0; max-width:260px; line-height:1.5; }
.up-stats { display:flex; justify-content:center; gap:0; margin:14px 0 10px; border-top:.5px solid var(--border); border-bottom:.5px solid var(--border); padding:12px 0; }

/* Post grid in user profile */
.up-post-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:2px; padding:0 0 16px; }
.up-post-thumb { aspect-ratio:1; overflow:hidden; background:var(--card2); cursor:pointer; position:relative; }
.up-post-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .2s; }
.up-post-thumb:hover img { transform:scale(1.05); }
.up-post-text-thumb { padding:8px; font-size:10px; color:var(--muted); line-height:1.4; display:flex; align-items:flex-start; }

/* Beranda social feed */
.beranda-post { background:var(--card); border:.5px solid var(--border); border-radius:14px; padding:14px; margin:0 15px 12px; }
.beranda-post-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.beranda-compose { display:flex; align-items:center; gap:10px; background:var(--card); border:.5px solid var(--border); border-radius:14px; padding:11px 14px; margin:6px 15px 12px; cursor:pointer; }
.beranda-compose-av { width:34px; height:34px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; flex-shrink:0; }
.beranda-compose-ph { flex:1; font-size:12.5px; color:var(--muted); }
.beranda-compose-btn { background:var(--red); color:#fff; border:none; border-radius:20px; padding:6px 14px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; }
.beranda-feed-empty { text-align:center; padding:24px 16px; margin:0 15px 16px; background:var(--card); border:.5px solid var(--border); border-radius:14px; }


/* ============================================================
 * DESKTOP — Responsive desktop layout
 * Source: desktop.css
 * ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   DESKTOP WEB STYLES — matches reference index design
   Only active at min-width: 900px
   All mobile styles preserved (below this breakpoint)
   ═══════════════════════════════════════════════════════════════ */

@media (min-width: 900px) {

  /* ── UNLOCK BODY SCROLL (this was the clickable/scroll bug) ── */
  html {
    height: auto !important;
    overflow: visible !important;
    overflow-y: auto !important;
  }
  body {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
    overflow-y: auto !important;
    background-image:
      radial-gradient(circle at 10% 20%, rgba(229, 9, 20, 0.035) 0%, transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(20, 50, 200, 0.03) 0%, transparent 40%);
    background-attachment: fixed;
  }

  /* ── HIDE MOBILE CHROME ── */
  .bnav { display: none !important; }
  .topbar { display: none !important; }

  /* ── SCREEN: normal document flow ── */
  .screen {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: calc(100vh - 74px);
    overflow: visible !important;
    display: block !important;
    padding-top: 74px; /* nav height */
  }

  /* ── PAGES: block layout with auto height ── */
  .page {
    display: none !important;
    overflow: visible !important;
    flex: none !important;
    min-height: 0 !important;
  }
  .page.active {
    display: block !important;
  }

  /* ── SCROLL containers: no flex, no fixed height ── */
  .scroll {
    overflow: visible !important;
    flex: none !important;
    padding: 0 0 120px !important;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  /* ══════════════════════════════════════════════════════════════
     DESKTOP NAVBAR — premium redesign (v14)
     Soft gradient background + subtle bottom glow + polished states
     ══════════════════════════════════════════════════════════════ */
  .dt-nav {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 74px;
    z-index: 1000;
    background:
      linear-gradient(180deg, rgba(18,10,12,0.92) 0%, rgba(10,10,10,0.82) 100%) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid rgba(245, 197, 24, 0.08);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.03) inset,
      0 6px 24px -8px rgba(0, 0, 0, 0.55);
  }
  /* Thin red/gold gradient accent line on the very bottom edge */
  .dt-nav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(229,9,20,.55) 25%,
      rgba(245,197,24,.55) 50%,
      rgba(229,9,20,.55) 75%,
      transparent 100%);
    opacity: .75;
    pointer-events: none;
  }

  .dt-nav-inner {
    max-width: 1400px !important;
    height: 100%;
    padding: 0 4% !important;
    display: flex;
    align-items: center;
    gap: 20px;
  }

  .dt-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-right: 14px;
    cursor: pointer;
    white-space: nowrap;
    padding: 5px 8px 5px 4px;
    border-radius: 12px;
    transition: background .25s ease, transform .25s ease;
  }
  .dt-brand:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  .dt-brand:hover .dt-logo {
    transform: rotate(-6deg) scale(1.06);
    box-shadow:
      0 6px 20px rgba(229, 9, 20, 0.55),
      0 0 0 3px rgba(229, 9, 20, 0.12);
  }

  .dt-logo {
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    /* FIX v14.21: Hapus red gradient background supaya logo.png tampil bersih.
       Sebelumnya background merah menutupi gambar logo.                        */
    background: transparent !important;
    box-shadow: none !important;
    display: flex; align-items: center; justify-content: center;
    transition: transform .3s ease;
    position: relative;
    padding: 0 !important;
  }
  /* Hapus pseudo-element overlay yang menambahkan efek shine di atas logo */
  .dt-logo::after {
    display: none !important;
  }

  .dt-bname {
    font-family: 'Poppins', sans-serif !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    line-height: 1.1 !important;
    background: linear-gradient(135deg, #ffffff 0%, #f5c518 140%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .dt-bsub {
    font-size: 8.5px !important;
    letter-spacing: 1.8px !important;
    color: rgba(245, 197, 24, 0.7) !important;
    font-weight: 600;
    margin-top: 1px;
  }

  /* ── Search bar — more refined ── */
  .dt-search {
    flex: 0 1 360px;
    position: relative;
  }
  .dt-search i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 13px;
    pointer-events: none;
    transition: color .25s;
  }
  .dt-search input {
    width: 100%;
    padding: 10px 16px 10px 40px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: .25s;
  }
  .dt-search input::placeholder { color: var(--muted); }
  .dt-search input:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .dt-search input:focus {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(229, 9, 20, .55);
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.18);
  }
  .dt-search:focus-within i { color: var(--red); }

  /* ── Nav menu — animated underline indicator ── */
  .dt-menu {
    display: flex !important;
    align-items: center;
    gap: 4px !important;
    flex: none !important;
    justify-content: flex-end !important;
    margin-left: auto;
  }

  .dt-link {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    background: transparent !important;
    border: none;
    border-radius: 10px !important;
    cursor: pointer;
    font-family: 'Inter', sans-serif !important;
    transition: color .25s ease, background .25s ease, transform .25s ease;
  }

  .dt-link i {
    font-size: 14px;
    color: inherit;
    transition: transform .3s cubic-bezier(.4,.2,.2,1.2), color .25s;
  }

  /* Animated underline indicator */
  .dt-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #e50914, #f5c518);
    transform: translateX(-50%);
    transition: width .28s cubic-bezier(.4,.2,.2,1);
    pointer-events: none;
  }

  .dt-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.04) !important;
  }
  .dt-link:hover::after { width: 60%; }
  .dt-link:hover i { color: var(--red); transform: scale(1.15) rotate(-4deg); }

  .dt-link-on {
    color: #fff !important;
    background: rgba(229, 9, 20, 0.14) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 1px rgba(229, 9, 20, 0.18) inset;
  }
  .dt-link-on::after { width: 70%; }
  .dt-link-on i { color: var(--red); }

  .dt-auth {
    display: none !important;
  }

  /* ══════════════════════════════════════════════════════════════
     BERANDA TOPBAR: hide (dt-nav replaces it)
     ══════════════════════════════════════════════════════════════ */
  #page-beranda .topbar { display: none !important; }

  /* ══════════════════════════════════════════════════════════════
     HERO / JUMBOTRON (reference-style)
     ══════════════════════════════════════════════════════════════ */
  #page-beranda .scroll {
    max-width: none !important;
    padding: 0 !important;
  }

  .bwrap {
    position: relative;
    width: 100vw;
    height: calc(100vh - 74px);
    min-height: 520px;
    max-height: 780px;
    margin: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Netflix red-glow look from reference */
    background: radial-gradient(circle, rgba(148, 15, 22, 0.85) 0%, rgba(10, 10, 10, 1) 75%);
    -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  }

  .btrack {
    width: 100%;
    height: 100%;
    display: block !important;
    transition: none !important;
    transform: none !important;
    position: relative;
  }

  .bslide {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    min-width: 0 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.5s ease-in-out;
  }

  .bslide.active {
    opacity: 1 !important;
    pointer-events: auto;
  }

  .bcard {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }

  .bbg {
    mix-blend-mode: multiply;
    filter: brightness(0.95) contrast(1.1);
    transform: scale(1.05);
    transition: transform 6s ease;
  }

  .bslide.active .bbg { transform: scale(1); }

  .bol {
    background: linear-gradient(180deg,
      rgba(10, 10, 10, 0.35) 0%,
      rgba(10, 10, 10, 0.55) 50%,
      rgba(10, 10, 10, 0.9) 100%) !important;
  }

  .bcont {
    position: absolute !important;
    inset: 0 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    padding: 20px !important;
    max-width: 820px;
    width: 90% !important;
    text-align: center;
    justify-content: center !important;
    align-items: center !important;
    height: auto !important;
  }

  .btag {
    font-size: 11px !important;
    padding: 5px 16px !important;
    border-radius: 24px !important;
    margin-bottom: 18px !important;
    letter-spacing: 2.5px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--red) !important;
  }

  .btit {
    font-size: 4rem !important;
    line-height: 1.05 !important;
    margin-bottom: 20px !important;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 1);
    font-weight: 800 !important;
  }

  .bsub {
    font-size: 1.05rem !important;
    max-width: 640px;
    margin: 0 auto 28px !important;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
  }

  .bacts { justify-content: center; }

  .bbt {
    padding: 14px 36px !important;
    font-size: 14px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 24px rgba(229, 9, 20, 0.45);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .bbt:hover {
    background: #fff !important;
    color: var(--red) !important;
    transform: translateY(-2px);
  }

  .bgh {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 12px 18px;
  }

  /* Dots: centered inside the jumbotron at bottom */
  .dots {
    position: absolute !important;
    bottom: 60px !important;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 !important;
    z-index: 20;
  }
  .dot {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.3) !important;
  }
  .dot.on {
    width: 12px !important;
    background: var(--red) !important;
    transform: scale(1.25);
  }

  /* ══════════════════════════════════════════════════════════════
     CONTENT CONTAINER — normal padded layout after hero
     (Apply horizontal padding to the scroll ITSELF, not children,
      so scroll-arrows at -22px don't get clipped)
     ══════════════════════════════════════════════════════════════ */
  #page-beranda .scroll {
    padding: 0 4% 140px !important;
    max-width: none !important;
  }
  #page-beranda .scroll > .bwrap {
    /* Cancel the 4% padding for full-bleed hero */
    margin-left: calc(-4% - 1px) !important;
    margin-right: calc(-4% - 1px) !important;
    width: calc(100% + 8% + 2px) !important;
  }
  #page-beranda .scroll > *:not(.bwrap) {
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Other pages: normal padding */
  #page-berita .scroll,
  #page-lagu .scroll,
  #page-play .scroll,
  #page-profil .scroll,
  #page-riwayat .scroll {
    padding: 40px 4% 140px !important;
    max-width: 1400px;
  }

  /* ══════════════════════════════════════════════════════════════
     RY-MINI — pill row (like reference trust badges)
     ══════════════════════════════════════════════════════════════ */
  .ry-mini-wrap {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 820px;
    margin: 44px auto 20px !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .ry-mini {
    padding: 22px 14px !important;
    border-radius: 18px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    text-align: left;
    background: rgba(24, 24, 24, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
  }
  .ry-mini:hover {
    background: rgba(30, 30, 30, 0.9) !important;
    transform: translateY(-2px);
    border-color: rgba(229, 9, 20, 0.3) !important;
  }
  .ry-mini-ic {
    width: 48px !important;
    height: 48px !important;
    font-size: 24px !important;
    border-radius: 14px !important;
    flex-shrink: 0;
  }
  .ry-mini-lbl {
    font-size: 14px !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* ══════════════════════════════════════════════════════════════
     SECTION HEADER (reference-style with "Lihat Semua" pill)
     ══════════════════════════════════════════════════════════════ */
  .sec-hd {
    padding: 0 !important;
    margin: 56px 0 22px !important;
    align-items: center;
    border-bottom: 1px solid #222;
    padding-bottom: 15px !important;
  }
  .sec-t {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.3px;
  }
  .sec-a {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #888 !important;
    padding: 7px 20px;
    border: 1px solid #333;
    border-radius: 20px;
    transition: 0.3s;
    background: transparent;
  }
  .sec-a:hover {
    background: #fff !important;
    color: var(--red) !important;
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
  }

  /* ══════════════════════════════════════════════════════════════
     HORIZONTAL SLIDERS with prev/next arrow buttons
     ══════════════════════════════════════════════════════════════ */
  .hs-section {
    position: relative;
    margin-bottom: 40px;
  }
  .hs {
    display: flex !important;
    gap: 20px !important;
    padding: 0 !important;
    overflow-x: auto !important;
    scroll-behavior: smooth;
    scrollbar-width: none;
    margin-bottom: 0 !important;
  }
  .hs::-webkit-scrollbar { display: none; }

  /* Scroll arrow buttons (injected by JS) */
  .hs-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
  }
  .hs-section:hover .hs-arrow {
    opacity: 1;
    pointer-events: auto;
  }
  .hs-arrow:hover {
    background: var(--red);
    border-color: var(--red);
    transform: translateY(-50%) scale(1.08);
  }
  .hs-arrow i { font-size: 14px; }
  .hs-arrow.prev { left: -22px; }
  .hs-arrow.next { right: -22px; }

  /* ══════════════════════════════════════════════════════════════
     SC-CARD (song card in horizontal slider) — reference style
     ══════════════════════════════════════════════════════════════ */
  .sc-card {
    min-width: 190px !important;
    max-width: 190px !important;
    padding: 16px !important;
    border: 1px solid #1a1a1a;
    border-radius: 8px !important;
    background: transparent !important;
    transition: background-color .3s ease;
    flex-shrink: 0;
  }
  .sc-card:hover {
    background-color: rgba(30, 30, 30, 0.6) !important;
  }
  .sc-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    border-radius: 6px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  }
  .sc-tt {
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 4px;
  }
  .sc-ar {
    font-size: 12px !important;
    color: var(--muted) !important;
  }
  /* "Play button overlay" on hover — keep existing structure */
  .sc-card:hover .sc-play {
    opacity: 1;
    background: rgba(0, 0, 0, 0.35);
  }

  /* ══════════════════════════════════════════════════════════════
     LIST ITEMS (li) — music list on page-lagu, etc.
     Multi-column grid at desktop width
     ══════════════════════════════════════════════════════════════ */
  #list-all,
  .lwrap {
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
    gap: 12px;
  }
  .li {
    margin-bottom: 0 !important;
    border-radius: 14px !important;
    padding: 14px !important;
    transition: background .2s, transform .2s, border-color .2s;
  }
  .li:hover {
    background: rgba(30, 30, 30, 0.9) !important;
    border-color: rgba(229, 9, 20, 0.3);
    transform: translateY(-2px);
  }

  /* ══════════════════════════════════════════════════════════════
     GENRE / VENUE CHIPS — wrap instead of scroll
     ══════════════════════════════════════════════════════════════ */
  .gchips,
  .vchips {
    flex-wrap: wrap !important;
    overflow: visible !important;
    padding: 0 0 18px !important;
    gap: 8px !important;
  }

  /* ══════════════════════════════════════════════════════════════
     VENUE SECTION
     ══════════════════════════════════════════════════════════════ */
  .venue-hd {
    padding: 0 !important;
    margin: 32px 0 16px !important;
  }
  .venue-ic {
    width: 44px !important;
    height: 44px !important;
    font-size: 22px !important;
    border-radius: 12px !important;
  }
  .venue-title { font-size: 16px !important; }
  .venue-sub { font-size: 11.5px !important; }

  /* ══════════════════════════════════════════════════════════════
     BERITA PAGE
     ══════════════════════════════════════════════════════════════ */
  #page-berita .pg-header {
    max-width: 1400px;
    margin: 0 auto 24px;
    padding: 40px 4% 16px !important;
  }
  #page-berita .pg-h1 {
    font-size: 2.2rem !important;
    font-family: 'Poppins', sans-serif;
  }

  .news-hero {
    max-width: 100%;
    height: 400px !important;
    border-radius: 20px !important;
    overflow: hidden;
    margin-bottom: 32px !important;
  }
  .news-hero-t { font-size: 1.8rem !important; }

  .news-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
    padding: 0 !important;
  }
  .news-card {
    flex-direction: column !important;
    border-radius: 14px !important;
    overflow: hidden;
    transition: transform .3s, border-color .3s;
  }
  .news-card:hover {
    transform: translateY(-4px);
    border-color: rgba(229, 9, 20, 0.35) !important;
    box-shadow: 0 14px 30px rgba(229, 9, 20, 0.08);
  }
  .news-card-img {
    width: 100% !important;
    height: 180px !important;
  }

  /* ══════════════════════════════════════════════════════════════
     PLAY PAGE — centered and narrower on desktop
     ══════════════════════════════════════════════════════════════ */
  .play-topbar {
    max-width: 900px !important;
    margin: 0 auto !important;
  }
  #page-play .scroll {
    max-width: 900px !important;
  }
  .play-license-strip,
  .play-list-hd,
  #play-list,
  #play-list-empty {
    max-width: 100% !important;
    margin: 0 0 16px !important;
  }

  /* ══════════════════════════════════════════════════════════════
     PROFIL PAGE — centered, polished layout at desktop
     ══════════════════════════════════════════════════════════════ */

  /* Scroll container: centered, proper padding */
  #page-profil .scroll {
    max-width: 820px !important;
    padding-top: 0 !important;
    padding-left: 4% !important;
    padding-right: 4% !important;
  }

  /* Sembunyikan prof-topbar mobile (sudah ada dt-nav di atas) */
  #page-profil .prof-topbar {
    display: none !important;
  }

  /* fb-cover: beri border-radius, tinggi lebih rapi, tidak perlu overflow cut */
  #page-profil .fb-cover-section {
    border-radius: 16px;
    overflow: visible;
    margin-top: 20px;
    margin-bottom: 64px;
  }
  #page-profil .fb-cover {
    border-radius: 16px;
    height: 180px !important;
    overflow: hidden;
  }

  /* Avatar posisi absolut di dalam cover-section */
  #page-profil .fb-av-outer {
    left: 20px !important;
  }

  /* profile-info: left-aligned, lebar penuh */
  #page-profil .fb-profile-info {
    padding: 8px 0 16px !important;
    background: transparent !important;
    border-bottom: none !important;
  }

  /* Actions row: inline flex */
  #page-profil .fb-profile-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 8px;
  }
  #page-profil .fb-profile-actions #themeBtn2,
  #page-profil .fb-profile-actions #langBtn2 {
    display: flex !important;
  }

  /* view-out (login CTA): larger, more prominent */
  #view-out .prof-hero {
    padding: 44px 24px 26px !important;
    max-width: 520px;
    margin: 0 auto;
  }
  #view-out .prof-logo-big {
    width: 84px !important;
    height: 84px !important;
    border-radius: 22px !important;
    margin-bottom: 20px !important;
  }
  #view-out .prof-logo-big svg { width: 40px; height: 40px; }
  #view-out .prof-hero-t {
    font-size: 28px !important;
    font-family: 'Poppins', sans-serif;
  }
  #view-out .prof-hero-s {
    font-size: 14px !important;
    max-width: 420px;
    margin: 0 auto 20px !important;
    line-height: 1.6;
  }
  #view-out .prof-btns {
    display: flex !important;
    gap: 14px !important;
    max-width: 520px;
    margin: 0 auto !important;
    padding: 0 24px 28px !important;
  }
  #view-out .btn-s,
  #view-out .btn-p {
    flex: 1;
    padding: 15px !important;
    font-size: 14px !important;
    border-radius: 50px !important;
    cursor: pointer;
  }
  #view-out .btn-s {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
    transition: .3s;
  }
  #view-out .btn-s:hover {
    background: #fff !important;
    color: var(--red) !important;
    border-color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.25);
  }
  #view-out .btn-p {
    background: var(--red) !important;
    transition: .3s;
  }
  #view-out .btn-p:hover {
    background: #ff1f2f !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(229, 9, 20, 0.5);
  }
  #view-out .ben-card {
    max-width: 520px;
    margin: 0 auto 28px !important;
    padding: 22px 24px !important;
    border-radius: 20px !important;
  }

  /* ══════════════════════════════════════════════════════════════
     RIWAYAT PAGE
     ══════════════════════════════════════════════════════════════ */
  #page-riwayat .scroll { max-width: 1100px !important; }

  /* ══════════════════════════════════════════════════════════════
     MINI PLAYER — centered, floating
     ══════════════════════════════════════════════════════════════ */
  .mini-player {
    position: fixed !important;
    top: auto !important;
    bottom: 24px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) translateY(120%) !important;
    width: 600px !important;
    max-width: calc(100vw - 48px);
    border-radius: 18px !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 60, 92, 0.25) !important;
    /* FIX v14.21: di desktop, bnav sudah hidden. z-index di bawah dt-nav (z-index:100) */
    z-index: 95 !important;
  }
  .mini-player.on {
    transform: translateX(-50%) translateY(0) !important;
  }
  .mini-player.hide {
    transform: translateX(-50%) translateY(120%) !important;
  }

  /* ══════════════════════════════════════════════════════════════
     MODAL SHEETS → centered on desktop
     CRITICAL: pointer-events:none when inactive so invisible sheets
     don't block clicks on page content behind them.
     Also: raise z-index above navbar (1000) so they show on top.
     ══════════════════════════════════════════════════════════════ */
  .sh-sheet {
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) scale(.96) !important;
    width: 92%;
    max-width: 560px;
    max-height: 88vh;
    border-radius: 22px !important;
    z-index: 1200 !important;
    opacity: 0;
    pointer-events: none !important;
    transition: opacity .22s, transform .22s cubic-bezier(.25, 1.4, .5, 1);
  }
  .sh-sheet.on {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1;
    pointer-events: auto !important;
  }
  .sh-ov {
    z-index: 1199 !important;
  }
  .sh-handle { display: none !important; }
  #invSheet { max-width: 680px !important; }
  #certSheet { max-width: 740px !important; }
  #dsSheet { max-width: 580px !important; }
  #artSheet { max-width: 560px !important; }
  #perfSheet { max-width: 560px !important; }

  /* Map picker on desktop: center modal */
  #mapPickerOv { align-items: center !important; }
  #mapPickerBox {
    border-radius: 22px !important;
    max-width: 640px !important;
    max-height: 82vh !important;
  }
  #mapLeaflet { min-height: 320px !important; }
  #disclaimerOv > div { max-width: 520px !important; }

  /* Disclaimer must sit above .sh-sheet (z-index 1200) on desktop.
     Without this, clicking "Bayar Sekarang" seems to do nothing because
     the disclaimer modal opens BEHIND the checkout sheet. */
  #disclaimerOv { z-index: 1300 !important; }

  /* ══════════════════════════════════════════════════════════════
     FOOTER (desktop only, added via HTML)
     ══════════════════════════════════════════════════════════════ */
  .dt-footer {
    display: block !important;
    background: var(--bg);
    padding: 60px 4% 20px;
    border-top: 1px solid #222;
    margin-top: 40px;
    -webkit-mask-image: linear-gradient(to top, black 90%, transparent 100%);
    mask-image: linear-gradient(to top, black 90%, transparent 100%);
  }
  .dt-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
  }
  .dt-footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
  }
  .dt-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    text-decoration: none;
  }
  .dt-footer-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e50914, #8f0609);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(229, 9, 20, 0.35);
  }
  .dt-footer-logotext {
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--red);
    letter-spacing: 0.3px;
  }
  .dt-footer-logotext .w { color: #fff; }
  .dt-footer-desc {
    color: #777;
    font-size: 0.9rem;
    margin-top: 14px;
    line-height: 1.6;
  }
  .dt-footer-col h3 {
    font-size: 1.1rem;
    margin-bottom: 18px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
  }
  .dt-footer-col ul { list-style: none; padding: 0; margin: 0; }
  .dt-footer-col li { margin-bottom: 12px; }
  .dt-footer-col a {
    color: var(--muted);
    text-decoration: none;
    transition: 0.25s;
    font-size: 0.9rem;
  }
  .dt-footer-col a:hover { color: var(--red); }
  .dt-social {
    display: flex;
    gap: 12px;
    margin-top: 18px;
  }
  .dt-social a {
    width: 40px;
    height: 40px;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    font-size: 16px;
    transition: 0.3s;
  }
  .dt-social a:hover { background: var(--red); }
  .dt-copyright {
    text-align: center;
    padding-top: 22px;
    border-top: 1px solid #222;
    color: #555;
    font-size: 0.85rem;
  }

  /* ══════════════════════════════════════════════════════════════
     LAGU PAGE TOPBAR (header area)
     ══════════════════════════════════════════════════════════════ */
  #page-lagu > div:first-child {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 40px 4% 16px !important;
  }
  #page-lagu > div:first-child > div:first-child {
    font-size: 2.2rem !important;
    font-family: 'Poppins', sans-serif;
  }
  /* v19: Make search bar + chips stretch full container width, not "setengah" */
  #page-lagu .srow {
    padding: 0 !important;
    margin-top: 8px;
  }
  #page-lagu .srch {
    width: 100%;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }
  #page-lagu .srch input {
    font-size: 14px !important;
  }
  #page-lagu .srch svg {
    width: 16px !important;
    height: 16px !important;
  }
  /* Chips wider & centered */
  #page-lagu .vchips,
  #page-lagu .gchips {
    max-width: 100% !important;
    padding: 8px 0 18px !important;
  }
  /* Center-align the scroll content */
  #page-lagu .scroll {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   HIDE DESKTOP FOOTER ON MOBILE (default)
   ══════════════════════════════════════════════════════════════ */
.dt-footer { display: none; }
/* ══════════════════════════════════════════════════════════════
   TABLET — smaller desktop (reduce hero sizes)
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) and (max-width: 1200px) {
  .btit { font-size: 3rem !important; }
  .bsub { font-size: 1rem !important; }
  .dt-search { flex: 0 1 260px; }
  .dt-link { padding: 8px 10px !important; font-size: 12.5px !important; }
  .dt-link span { display: inline !important; }
}

/* Narrow desktop — hide label, keep icon */
@media (min-width: 900px) and (max-width: 1080px) {
  .dt-link .dt-link-label { display: none !important; }
  .dt-link { padding: 8px 11px !important; }
  .dt-link i { font-size: 17px; }
  .dt-search { flex: 0 1 220px; }
}

/* ═══════════════════════════════════════════════════════════════
   FIX v14.20 — NAVBAR DESKTOP: teks link terlihat jelas
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Override extras.css yang pakai var(--muted) → terlalu gelap di dark mode */
  .dt-link {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
  }
  .dt-link i {
    color: rgba(255, 255, 255, 0.7) !important;
  }
  .dt-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.06) !important;
  }
  .dt-link:hover i {
    color: var(--red) !important;
  }
  .dt-link-on,
  .dt-link.dt-link-on {
    color: #fff !important;
    background: rgba(229, 9, 20, 0.15) !important;
    font-weight: 700 !important;
  }
  .dt-link-on i { color: var(--red) !important; }

  /* Search bar teks terlihat */
  .dt-search input {
    color: rgba(255, 255, 255, 0.9) !important;
  }
  .dt-search input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
  }
}

/* Light mode: dt-nav background putih, teks gelap */
@media (min-width: 900px) {
  [data-theme="light"] .dt-nav {
    background: rgba(255, 249, 249, 0.97) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07) !important;
  }
  [data-theme="light"] .dt-nav::after { opacity: 0.3; }
  [data-theme="light"] .dt-link {
    color: #3a1a1a !important;
  }
  [data-theme="light"] .dt-link i {
    color: #5a3a3a !important;
  }
  [data-theme="light"] .dt-link:hover {
    color: #e50914 !important;
    background: rgba(229, 9, 20, 0.06) !important;
  }
  [data-theme="light"] .dt-link-on {
    color: #e50914 !important;
    background: rgba(229, 9, 20, 0.10) !important;
  }
  [data-theme="light"] .dt-search {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
  }
  [data-theme="light"] .dt-search input {
    color: #18080a !important;
  }
  [data-theme="light"] .dt-search input::placeholder {
    color: #907272 !important;
  }
  [data-theme="light"] .dt-bname {
    /* FIX v14.21: -webkit-text-fill-color:transparent dari dark mode harus di-reset.
       Tanpa ini, color:#18080a tidak efektif karena webkit-text-fill-color menang. */
    -webkit-text-fill-color: #18080a !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    background: none !important;
    color: #18080a !important;
  }
  [data-theme="light"] .dt-bsub {
    color: #b85c5c !important;
    -webkit-text-fill-color: #b85c5c !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX v14.20 — Title Musik center + Explore form center
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Title halaman Musik / Katalog */
  #page-musik .pg-header,
  #page-musik > .scroll > div:first-child {
    max-width: 1400px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 4% !important;
    padding-right: 4% !important;
  }
  #page-musik .pg-h1 {
    font-size: 2.2rem !important;
    font-family: 'Poppins', sans-serif;
  }

  /* Explore: post form & feed terpusat */
  #page-explore #exp-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #page-explore #exp-scroll > * {
    width: 100%;
    max-width: 680px;
  }
  #page-explore .exp-brand-hdr,
  #page-explore .exp-main-tabs {
    max-width: 680px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   FIX v14.20 — Profil desktop: hide theme/lang btn in topbar
   (tombol dipindah ke fb-profile-actions)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Theme/lang di topbar mobile → sembunyikan (sudah ada di fb-profile-actions) */
  #page-profil .prof-toggles {
    display: none !important;
  }
}


/* ============================================================
 * BORDERS — Border utilities
 * Source: borders.css
 * ============================================================ */

/* ═══════════════════════════════════════════
   KARIND — borders.css  (v9 visual enhancement)
   Tambah border/outline tegas untuk semua elemen
   yang sebelumnya "menyatu" dengan background
═══════════════════════════════════════════ */

/* ── TOKEN TAMBAHAN ── */
:root {
  --bor-song:    rgba(229,9,20,.28);       /* merah untuk song card / list item */
  --bor-news:    rgba(124,111,255,.28);    /* ungu untuk news card */
  --bor-pkg-w:   rgba(29,185,84,.45);     /* hijau warung */
  --bor-pkg-k:   rgba(229,9,20,.40);      /* merah kafe */
  --bor-pkg-p:   rgba(245,197,24,.42);    /* gold premium */
  --bor-mini-m:  rgba(29,185,84,.40);     /* hijau mech */
  --bor-mini-pf: rgba(229,9,20,.38);      /* merah perf */
  --bor-mini-s:  rgba(245,197,24,.42);    /* gold sawer */
  --bor-li:      rgba(255,255,255,.10);   /* list item default */
  --bor-banner:  rgba(229,9,20,.22);      /* banner card */
  --shadow-card: 0 2px 12px rgba(0,0,0,.28), 0 0 0 .5px rgba(255,255,255,.04);
}

[data-theme="light"] {
  --bor-song:    rgba(229,9,20,.35);
  --bor-news:    rgba(124,111,255,.32);
  --bor-pkg-w:   rgba(29,185,84,.50);
  --bor-pkg-k:   rgba(229,9,20,.42);
  --bor-pkg-p:   rgba(180,140,0,.45);
  --bor-mini-m:  rgba(29,185,84,.45);
  --bor-mini-pf: rgba(229,9,20,.40);
  --bor-mini-s:  rgba(180,140,0,.45);
  --bor-li:      rgba(0,0,0,.10);
  --bor-banner:  rgba(229,9,20,.18);
  --shadow-card: 0 2px 10px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.05);
}

/* ══════════════════════════════════
   1. SONG CARD (horizontal scroll)
══════════════════════════════════ */
.sc-img {
  border: 1.5px solid var(--bor-song) !important;
  box-shadow: 0 0 0 .5px rgba(229,9,20,.10), var(--shadow-card);
}

/* ══════════════════════════════════
   2. LIST ITEM (halaman Musik / Playlist)
══════════════════════════════════ */
.li {
  border: 1px solid var(--bor-li) !important;
  box-shadow: var(--shadow-card);
}
.li:hover {
  border-color: var(--bor-song) !important;
  box-shadow: 0 0 0 1px rgba(229,9,20,.12), var(--shadow-card);
}
/* image thumbnail punya border sendiri */
.li-img {
  border: 1px solid rgba(255,255,255,.08) !important;
}
[data-theme="light"] .li-img {
  border-color: rgba(0,0,0,.08) !important;
}

/* ══════════════════════════════════
   3. BANNER CARD
══════════════════════════════════ */
.bcard {
  border: 1.5px solid var(--bor-banner) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.45), 0 0 0 .5px rgba(229,9,20,.08);
}

/* ══════════════════════════════════
   4. NEWS HERO
══════════════════════════════════ */
.news-hero {
  border: 1.5px solid rgba(124,111,255,.28) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.35), 0 0 0 .5px rgba(124,111,255,.08);
}

/* ══════════════════════════════════
   5. NEWS CARD (list)
══════════════════════════════════ */
.news-card {
  border: 1px solid var(--bor-news) !important;
  box-shadow: var(--shadow-card);
}
.news-card:hover {
  border-color: rgba(124,111,255,.50) !important;
}
.news-card-img {
  border: 1px solid rgba(124,111,255,.18) !important;
}

/* ══════════════════════════════════
   6. PACKAGE CARDS — warna berbeda tiap paket
══════════════════════════════════ */
/* Warung — hijau */
.pkg-card[data-pkg="warung"],
.pkg-card:nth-child(1) {
  border: 1.5px solid var(--bor-pkg-w) !important;
  box-shadow: 0 0 16px rgba(29,185,84,.08), var(--shadow-card);
}
.pkg-card[data-pkg="warung"]:hover,
.pkg-card:nth-child(1):hover {
  box-shadow: 0 0 24px rgba(29,185,84,.18), var(--shadow-card);
}

/* Kafe — merah */
.pkg-card[data-pkg="kafe"],
.pkg-card:nth-child(2) {
  border: 1.5px solid var(--bor-pkg-k) !important;
  box-shadow: 0 0 16px rgba(229,9,20,.08), var(--shadow-card);
}
.pkg-card[data-pkg="kafe"]:hover,
.pkg-card:nth-child(2):hover {
  box-shadow: 0 0 24px rgba(229,9,20,.18), var(--shadow-card);
}

/* Premium — gold */
.pkg-card[data-pkg="premium"],
.pkg-card:nth-child(3) {
  border: 1.5px solid var(--bor-pkg-p) !important;
  box-shadow: 0 0 16px rgba(245,197,24,.08), var(--shadow-card);
}
.pkg-card[data-pkg="premium"]:hover,
.pkg-card:nth-child(3):hover {
  box-shadow: 0 0 24px rgba(245,197,24,.18), var(--shadow-card);
}

/* Selected state tetap merah */
.pkg-card.selected {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 2px rgba(229,9,20,.22), 0 4px 20px rgba(229,9,20,.15) !important;
}

/* ══════════════════════════════════
   7. RY-MINI cards (Business / Event / Info / Sawer)
══════════════════════════════════ */
.ry-mini {
  border: 1.5px solid rgba(255,255,255,.10) !important;
  box-shadow: var(--shadow-card);
  transition: border-color .2s, box-shadow .2s, transform .12s !important;
}
[data-theme="light"] .ry-mini {
  border-color: rgba(0,0,0,.09) !important;
}

.ry-mini-mech {
  border-color: var(--bor-mini-m) !important;
  box-shadow: 0 0 12px rgba(29,185,84,.08), var(--shadow-card);
}
.ry-mini-mech:hover {
  border-color: rgba(29,185,84,.65) !important;
  box-shadow: 0 0 20px rgba(29,185,84,.18), var(--shadow-card);
}

.ry-mini-perf {
  border-color: var(--bor-mini-pf) !important;
  box-shadow: 0 0 12px rgba(229,9,20,.08), var(--shadow-card);
}
.ry-mini-perf:hover {
  border-color: rgba(229,9,20,.60) !important;
  box-shadow: 0 0 20px rgba(229,9,20,.18), var(--shadow-card);
}

.ry-mini-sawer,
.ry-mini-info {
  border-color: var(--bor-mini-s) !important;
  box-shadow: 0 0 12px rgba(245,197,24,.06), var(--shadow-card);
}
.ry-mini-sawer:hover,
.ry-mini-info:hover {
  border-color: rgba(245,197,24,.65) !important;
  box-shadow: 0 0 20px rgba(245,197,24,.18), var(--shadow-card);
}

/* ══════════════════════════════════
   8. TOPBAR search bar
══════════════════════════════════ */
.srch {
  border: 1px solid rgba(229,9,20,.22) !important;
  transition: border-color .2s !important;
}
.srch:focus-within {
  border-color: rgba(229,9,20,.55) !important;
  box-shadow: 0 0 0 2px rgba(229,9,20,.10);
}

/* ══════════════════════════════════
   9. BOTTOM NAV aktif indicator
══════════════════════════════════ */
.nico.on {
  border: 1px solid rgba(229,9,20,.35) !important;
  box-shadow: 0 0 8px rgba(229,9,20,.18);
}
.nico.on-play {
  border: 1px solid rgba(255,60,92,.40) !important;
  box-shadow: 0 0 8px rgba(255,60,92,.18);
}

/* ══════════════════════════════════
   10. PLAYLIST items & menu items
══════════════════════════════════ */
.pl-item {
  border-bottom: 1px solid var(--border) !important;
}
.menu-item {
  border: 1px solid transparent;
  transition: border-color .15s;
}
.menu-item:hover {
  border-color: rgba(229,9,20,.18) !important;
  border-radius: 12px;
}

/* ══════════════════════════════════
   11. GENRE / VENUE chips
══════════════════════════════════ */
.gchip, .vchip {
  border-width: 1px !important;
}

/* ══════════════════════════════════
   12. PROFILE / DASHBOARD cards
══════════════════════════════════ */
.dashboard-card,
.stat-card,
.prof-card,
[class*="-card"]:not(.sc-card):not(.pkg-card):not(.news-card):not(.bcard):not(.ry-card) {
  border: 1px solid var(--border2) !important;
  box-shadow: var(--shadow-card);
}


/* ============================================================
 * REDESIGN v14 — Visual refresh v14
 * Source: redesign-v14.css
 * ============================================================ */

/* ════════════════════════════════════════════════════════════════
   KARYA INDONESIA — redesign-v14.css
   Beranda grid · Explore 2-tab · Profile FB-style · Lightbox
   ════════════════════════════════════════════════════════════════ */

/* ── BERANDA: Hide social feed ── */
#beranda-social-wrap { display: none !important; }

/* ── BERANDA: Song grid 3 cols × 2 rows ── */
.beranda-song-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 10px; padding: 0 14px; margin-bottom: 16px;
}
.beranda-song-grid .sc-card  { min-width:unset; max-width:unset; width:100%; }
.beranda-song-grid .sc-img   { width:100%; height:auto; aspect-ratio:1/1; border-radius:10px; }
.beranda-song-grid .sc-tt,
.beranda-song-grid .sc-ar    { font-size:10.5px; }

/* ════════════════════════════════════════════════════════════════
   EXPLORE — 2 Tab layout
   ════════════════════════════════════════════════════════════════ */

/* Brand header */
.exp-brand-hdr {
  display:flex; align-items:center; gap:10px;
  padding: max(12px,env(safe-area-inset-top)) 14px 10px;
  background: var(--bg);
  border-bottom: .5px solid var(--border);
  flex-shrink: 0;
}
.exp-brand-name { font-size:15px; font-weight:800; color:var(--tx); font-family:'Poppins',sans-serif; letter-spacing:-.3px; }
.exp-brand-name span { color:var(--red); }

/* Main tabs */
.exp-main-tabs {
  display: flex; background: var(--bg);
  border-bottom: .5px solid var(--border);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 20;
}
.exp-main-tab {
  flex:1; padding: 11px 8px;
  background: transparent; color: var(--muted);
  border: none; border-bottom: 3px solid transparent;
  font-size: 13px; font-weight: 800;
  cursor: pointer; font-family: 'Poppins',sans-serif;
  letter-spacing:-.2px; white-space: nowrap;
  transition: color .15s, border-color .15s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.exp-main-tab.on { color: var(--tx); border-bottom-color: var(--red); }
.exp-main-tab:hover { color: var(--tx); }

/* Posts header */
.exp-posts-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  background: var(--bg);
  border-bottom: .5px solid var(--border);
}
.exp-posts-hdr-title { font-size:16px; font-weight:800; color:var(--tx); font-family:'Poppins',sans-serif; }

/* List/Grid icon toggle */
.exp-view-toggle { display:flex; gap:4px; }
.exp-vtoggle {
  width:32px; height:32px; border-radius:8px;
  background: var(--card); color: var(--muted);
  border: .5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: all .15s;
}
.exp-vtoggle.on  { background:var(--tx); color:var(--bg); border-color:var(--tx); }
.exp-vtoggle:hover { background:var(--card2); color:var(--tx); }
.exp-vtoggle.on:hover { background:var(--tx); }

/* Filter chips */
.exp-filter {
  display:flex; gap:8px; padding:10px 14px;
  overflow-x:auto; scrollbar-width:none;
  background: var(--bg);
  border-bottom: .5px solid var(--border);
}
.exp-filter::-webkit-scrollbar { display:none; }
.exp-chip {
  flex-shrink:0; display:inline-flex; align-items:center; gap:5px;
  padding:6px 13px; background:var(--card); color:var(--muted);
  border:.5px solid var(--border); border-radius:8px;
  font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:all .15s; white-space:nowrap;
}
.exp-chip:hover { color:var(--tx); }
.exp-chip.on { background:var(--tx); color:var(--bg); border-color:var(--tx); }

/* Feed */
.exp-feed { display:flex; flex-direction:column; gap:0; padding:0; }

/* Post card */
.exp-post {
  background: var(--card);
  border: none; border-top:.5px solid var(--border); border-bottom:.5px solid var(--border);
  border-radius:0; margin-bottom:8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.exp-post-head { padding:13px 14px 8px; display:flex; gap:11px; align-items:flex-start; }
.exp-post-author { flex:1; min-width:0; padding-top:2px; }
.exp-post-name { font-size:14px; font-weight:800; color:var(--tx); display:inline-flex; align-items:center; gap:4px; font-family:'Poppins',sans-serif; }
.exp-verified { flex-shrink:0; }
.exp-post-meta { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px; flex-wrap:wrap; margin-top:2px; }
.exp-post-sep { opacity:.45; }
.exp-role { padding:2px 8px; border-radius:6px; font-weight:800; font-size:9px; letter-spacing:.3px; text-transform:uppercase; }
.exp-role-musik     { background:rgba(229,9,20,.15); color:#ff8080; }
.exp-role-event     { background:rgba(245,197,24,.15); color:#f5c518; }
.exp-role-studio    { background:rgba(255,60,92,.15); color:#ff8fa0; }
.exp-role-gear      { background:rgba(124,111,255,.15); color:#a29aff; }
.exp-role-kolaborasi{ background:rgba(29,185,84,.15); color:#5dd9a0; }
.exp-more {
  width:34px; height:34px; border-radius:50%;
  background:transparent; color:var(--muted); border:none;
  cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.exp-more:hover { background:rgba(128,128,128,.12); }
.exp-post-body { padding:2px 14px 10px; }
.exp-post-text { font-size:14px; color:var(--tx); line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.exp-post-tags { margin-top:6px; display:flex; flex-wrap:wrap; gap:5px; }
.exp-post-genre { font-size:11px; color:var(--red); font-weight:700; background:rgba(229,9,20,.08); padding:3px 10px; border-radius:99px; }
.exp-post-loc { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; color:var(--muted); margin-top:5px; }

/* Avatar */
.exp-avatar {
  width:42px; height:42px; border-radius:50%; font-size:15px; font-weight:800; color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px rgba(229,9,20,.5);
}
.exp-avatar-me { background:linear-gradient(135deg,#e50914,#8f0609); }

/* Image grids */
.exp-img-grid { border-radius:0!important; margin-top:8px; display:grid; gap:2px; }
.exp-img-grid.grid-1 { grid-template-columns:1fr; }
.exp-img-grid.grid-2 { grid-template-columns:1fr 1fr; grid-template-rows:200px; }
.exp-img-grid.grid-3 { grid-template-columns:1fr 1fr; grid-template-rows:210px 150px; }
.exp-img-grid.grid-3 .img-cell:first-child { grid-column:1/-1; }
.exp-img-grid.grid-4 { grid-template-columns:1fr 1fr; grid-template-rows:180px 180px; }
.exp-img-grid.grid-5plus { grid-template-columns:1fr 1fr; grid-template-rows:160px 160px; }
.img-cell { position:relative; overflow:hidden; background:var(--card2); min-height:160px; }
.grid-1 .img-cell { min-height:260px; max-height:460px; }
.img-cell img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; cursor:pointer; }
.img-cell img:hover { transform:scale(1.03); }
.img-more-overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; font-weight:800; pointer-events:none; }

/* Like bar */
.exp-post-likebar { padding:8px 14px 4px; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px; }
.exp-post-likebar-ic { width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg,#ff3c5c,#e50914); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.exp-post-likebar-ic svg { width:11px; height:11px; }

/* Action row */
.exp-post-actions { display:flex; gap:0; padding:0; border-top:.5px solid var(--border); margin-top:2px; }
.exp-pa-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 6px; background:transparent; color:var(--muted);
  border:none; border-right:.5px solid var(--border); border-radius:0;
  font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:background .15s,color .15s;
}
.exp-pa-btn:last-child { border-right:none; }
.exp-pa-btn:hover { background:rgba(128,128,128,.08); color:var(--tx); }
.exp-pa-btn.liked { color:#ff3c5c; }
.exp-pa-btn.liked svg path { fill:#ff3c5c; stroke:#ff3c5c; }
.exp-pa-btn svg { width:17px; height:17px; flex-shrink:0; }

/* Comments */
.exp-comments-preview { padding:4px 14px 10px; border-top:none; }
.exp-comment-item { display:flex; align-items:flex-start; gap:7px; margin-bottom:6px; }
.exp-comment-av { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex-shrink:0; }
.exp-comment-body { flex:1; min-width:0; background:rgba(128,128,128,.1); border-radius:12px; padding:6px 10px; font-size:11.5px; line-height:1.4; }
.exp-comment-name { font-weight:800; color:var(--tx); margin-right:5px; font-family:'Poppins',sans-serif; font-size:12px; }
.exp-comment-text { color:var(--tx); opacity:.85; font-size:12px; }
.exp-comment-more { font-size:11px; color:var(--muted); cursor:pointer; padding:2px 0 4px; }
.exp-cmt-full-item { display:flex; align-items:flex-start; gap:9px; margin-bottom:12px; }
.exp-cmt-full-body { flex:1; background:var(--card2); border-radius:14px; padding:8px 12px; font-size:12.5px; line-height:1.45; }

/* Empty */
.exp-empty { margin:16px 0; padding:40px 20px; background:var(--card); border-top:.5px solid var(--border); border-bottom:.5px solid var(--border); text-align:center; }
.exp-empty-ic { font-size:36px; margin-bottom:8px; opacity:.7; }
.exp-empty-t  { font-size:13px; font-weight:700; color:var(--tx); font-family:'Poppins',sans-serif; margin-bottom:4px; }
.exp-empty-s  { font-size:11px; color:var(--muted); line-height:1.5; max-width:280px; margin:0 auto; }

/* Grid view */
.exp-feed-grid { display:grid!important; grid-template-columns:repeat(3,1fr); gap:2px; padding:2px; }
.exp-grid-cell { position:relative; cursor:pointer; aspect-ratio:1/1; overflow:hidden; background:var(--card2); }
.exp-grid-img { width:100%; height:100%; background-size:cover; background-position:center; transition:transform .2s; }
.exp-grid-cell:hover .exp-grid-img { transform:scale(1.05); }
.exp-grid-text-only { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:10px; background:var(--card); }
.exp-grid-av { width:36px; height:36px; border-radius:50%; background:#e50914; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; }
.exp-grid-txt { font-size:10.5px; color:var(--tx); text-align:center; line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.exp-grid-stats { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(0,0,0,.65),transparent); padding:16px 6px 5px; display:flex; gap:8px; font-size:10.5px; font-weight:700; color:#fff; }

/* Composer */
.exp-composer { margin:0; padding:12px 14px; border-radius:0; border:none; border-top:.5px solid var(--border); border-bottom:.5px solid var(--border); background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.06); }
.exp-composer-row { display:flex; align-items:center; gap:10px; }
.exp-composer-divider { height:.5px; background:var(--border); margin:10px 0; }
.exp-composer-actions { display:flex; gap:0; }
.exp-ca-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 6px; background:transparent; color:var(--muted); border:none; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s; }
.exp-ca-btn:hover { background:rgba(128,128,128,.1); color:var(--tx); }
.exp-ca-icon { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.exp-composer-input { flex:1; padding:10px 16px; background:rgba(128,128,128,.1); border:.5px solid var(--border); border-radius:999px; font-size:13px; color:var(--muted); cursor:pointer; transition:border-color .15s; }
.exp-composer-input:hover { border-color:rgba(128,128,128,.3); }

/* Compose sheet */
.exp-compose-area { width:100%; padding:12px 14px; background:var(--card2); border:.5px solid var(--border); border-radius:12px; color:var(--tx); font-size:13px; font-family:inherit; resize:vertical; min-height:90px; line-height:1.5; }
.exp-compose-area:focus { outline:none; border-color:rgba(229,9,20,.4); }
.exp-genre-chips { display:flex; flex-wrap:wrap; gap:6px; }
.exp-genre-chip { padding:8px 14px; background:var(--card2); color:var(--tx); border:.5px solid var(--border); border-radius:99px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap; }
.exp-genre-chip:hover { border-color:rgba(128,128,128,.3); }
.exp-genre-chip.on { background:rgba(229,9,20,.15); color:#ff6060; border-color:rgba(229,9,20,.5); }
.exp-prev-grid { display:grid; gap:4px; border-radius:10px; overflow:hidden; }
.exp-prev-grid.pg-1 { grid-template-columns:1fr; }
.exp-prev-grid.pg-2 { grid-template-columns:1fr 1fr; }
.exp-prev-grid.pg-3 { grid-template-columns:1fr 1fr; grid-template-rows:130px 100px; }
.exp-prev-grid.pg-3 .pc:first-child { grid-column:1/-1; }
.exp-prev-grid.pg-4plus { grid-template-columns:1fr 1fr; }
.pc { position:relative; overflow:hidden; border-radius:6px; background:var(--card2); min-height:100px; }
.pg-1 .pc { min-height:160px; }
.pc img { width:100%; height:100%; object-fit:cover; display:block; }
.pc-del { position:absolute; top:4px; right:4px; background:rgba(0,0,0,.7); border:none; color:#fff; border-radius:50%; width:22px; height:22px; font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* Profil Saya panel */
.expp-inner { width:100%; max-width:640px; margin:0 auto; }
.expp-profile-card {
  display:flex; align-items:center; gap:14px; padding:16px;
  background:var(--card); border-bottom:.5px solid var(--border);
  max-width:640px; margin:0 auto;
}
.expp-av-wrap { position:relative; flex-shrink:0; }
.expp-av {
  width:64px; height:64px; border-radius:50%; background:#e50914; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:800; font-family:'Poppins',sans-serif; overflow:hidden;
  box-shadow:0 0 0 2.5px var(--bg),0 0 0 4px rgba(229,9,20,.5);
}
.expp-edit-ic { position:absolute; bottom:0; right:0; width:24px; height:24px; border-radius:50%; background:var(--card); border:2px solid var(--bg); display:flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; }
.expp-info { flex:1; min-width:0; }
.expp-name { font-size:16px; font-weight:800; color:var(--tx); font-family:'Poppins',sans-serif; line-height:1.2; }
.expp-username { font-size:12px; color:var(--muted); margin-top:2px; }
.expp-stats { font-size:11.5px; color:var(--muted); margin-top:6px; line-height:1.5; }
.expp-stats b { color:var(--tx); }
#exp-panel-profil .exp-composer { max-width:640px; margin:8px auto 0; }
#exp-panel-profil .exp-posts-hdr { max-width:640px; margin:8px auto 0; }
#expp-feed { max-width:640px; margin:0 auto; }
#expp-photos-grid { max-width:640px; margin:0 auto; }

/* Desktop centering for Beranda */
@media (min-width:900px) {
  /* FIX v14.14.9 #B: Sebelumnya hanya composer/posts-hdr/filter yang max-width 660px,
     sedangkan brand-hdr & main-tabs full screen width — bikin layout tidak sejajar.
     Sekarang SEMUA elemen di page-explore center 660px supaya semua align. */
  #page-explore .exp-brand-hdr,
  #page-explore .exp-main-tabs {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  #exp-panel-beranda .exp-composer,
  #exp-panel-beranda .exp-posts-hdr,
  #exp-panel-beranda .exp-filter { max-width:660px; margin-left:auto; margin-right:auto; }
  #exp-panel-beranda .exp-feed { max-width:660px; margin:0 auto; }
  .exp-post { border-radius:12px!important; border:.5px solid var(--border)!important; margin-bottom:10px; }
  .exp-img-grid { border-radius:8px!important; }
  .exp-composer { border-radius:12px!important; border:.5px solid var(--border)!important; }
  .expp-profile-card { border-radius:12px; border:.5px solid var(--border); }
  #exp-panel-profil .exp-composer { border-radius:12px!important; border:.5px solid var(--border)!important; }
}

/* ════════════════════════════════════════════════════════════════
   PROFILE PAGE — Facebook style
   ════════════════════════════════════════════════════════════════ */

.prof-topbar { display:none!important; }
#page-profil .scroll { padding:0!important; }

/* Cover */
.fb-cover-section { position:relative; margin-bottom:56px; }
.fb-cover {
  height:160px;
  background:linear-gradient(135deg,#e50914 0%,#8f0609 40%,#1a0000 100%);
  position:relative; overflow:hidden;
}
.fb-cover::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 50%,rgba(0,0,0,.4)); }
.fb-cover-edit { position:absolute; bottom:10px; right:12px; z-index:2; background:rgba(0,0,0,.5); border:none; border-radius:8px; color:#fff; font-size:13px; padding:5px 10px; cursor:pointer; }
.fb-av-outer { position:absolute; bottom:-52px; left:16px; cursor:pointer; z-index:3; }
.fb-av-big { width:96px!important; height:96px!important; border-radius:50%!important; border:3.5px solid var(--bg)!important; font-size:36px!important; font-weight:800!important; box-shadow:0 4px 16px rgba(0,0,0,.4)!important; background:#e50914!important; display:flex; align-items:center; justify-content:center; }
.fb-av-cam { position:absolute; bottom:2px; right:2px; width:28px; height:28px; border-radius:50%; background:var(--card); border:2px solid var(--bg); display:flex; align-items:center; justify-content:center; font-size:13px; }

/* Profile info */
.fb-profile-info { padding:0 16px 14px; border-bottom:.5px solid var(--border); background:var(--bg); }
.fb-profile-name { font-size:22px; font-weight:800; color:var(--tx); font-family:'Poppins',sans-serif; line-height:1.2; margin-bottom:3px; }
.fb-profile-username { font-size:13px; color:var(--muted); margin-bottom:4px; }
.fb-profile-bio { font-size:13px; color:var(--tx); line-height:1.55; margin-bottom:8px; max-width:400px; }
.fb-profile-info .profile-email { display:none!important; }
.fb-profile-info .role-badge { display:inline-block; margin-bottom:10px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:99px; }
.fb-profile-info .profile-stats-row { display:flex!important; gap:0!important; justify-content:flex-start!important; border-top:none!important; padding-top:0!important; margin-top:0!important; margin-bottom:12px; }
.pstat { display:flex; flex-direction:column; align-items:center; min-width:72px; cursor:pointer; padding:4px 8px; }
.pstat:first-child { padding-left:0; }
.pstat-n { font-size:15px; font-weight:800; color:var(--tx); font-family:'Poppins',sans-serif; }
.pstat-l { font-size:10.5px; color:var(--muted); margin-top:1px; }
.pstat-div { width:.5px; height:28px; background:var(--border); align-self:center; margin:0 4px; }
.fb-profile-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.fb-btn-edit { flex:1; padding:9px 16px; background:var(--card); color:var(--tx); border:.5px solid var(--border); border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s; min-width:120px; }
.fb-btn-edit:hover { background:var(--card2); }

/* Profile tabs */
.fb-profile-tabs { display:flex; background:var(--bg); border-bottom:.5px solid var(--border); overflow-x:auto; scrollbar-width:none; position:sticky; top:0; z-index:10; }
.fb-profile-tabs::-webkit-scrollbar { display:none; }
.fb-ptab { flex-shrink:0; padding:12px 16px; background:transparent; color:var(--muted); border:none; border-bottom:3px solid transparent; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:color .15s,border-color .15s; white-space:nowrap; }
.fb-ptab.on { color:#1877f2; border-bottom-color:#1877f2; }
.fb-ptab:hover { background:rgba(128,128,128,.06); color:var(--tx); }
#ptc-semua,#ptc-tentang,#ptc-postingan,#ptc-pengaturan { background:var(--bg); }
#ptc-postingan { padding:0; }

/* Profile page icon in explore nav (hidden — no longer needed) */
.exp-myprofile-btn { display:none!important; }

/* ════════════════════════════════════════════════════════════════
   PROFILE — About + Photos sections
   ════════════════════════════════════════════════════════════════ */

.fb-about-card { background:var(--card); border-top:.5px solid var(--border); border-bottom:.5px solid var(--border); padding:16px 16px 14px; }
.fb-about-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:18px; font-weight:800; color:var(--tx); font-family:'Poppins',sans-serif; }
.fb-about-edit-btn { width:36px; height:36px; border-radius:50%; background:var(--card2); border:.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; transition:background .15s; }
.fb-about-row { display:flex; align-items:flex-start; gap:14px; padding:10px 0; border-bottom:.5px solid var(--border); }
.fb-about-row:last-of-type { border-bottom:none; }
.fb-about-ic { font-size:20px; flex-shrink:0; width:28px; text-align:center; margin-top:1px; }
.fb-about-val { font-size:14px; font-weight:600; color:var(--tx); line-height:1.4; word-break:break-all; }
.fb-about-sub { font-size:11px; color:var(--muted); margin-top:2px; }
.fb-about-more-btn { display:block; width:100%; margin-top:14px; padding:10px; background:var(--card2); color:var(--tx); border:.5px solid var(--border); border-radius:10px; font-size:13px; font-weight:700; text-align:center; cursor:pointer; font-family:inherit; transition:background .15s; }
.fb-about-more-btn:hover { background:rgba(128,128,128,.1); }
.fb-about-action-btn { flex:1; padding:9px 12px; background:var(--card2); color:var(--tx); border:.5px solid var(--border); border-radius:10px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s; }

/* Photos */
.fb-photos-section { background:var(--card); border-top:.5px solid var(--border); border-bottom:.5px solid var(--border); padding:16px 16px 12px; margin-top:8px; }
.fb-photos-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; font-size:18px; font-weight:800; color:var(--tx); font-family:'Poppins',sans-serif; }
.fb-photos-see-all { background:none; border:none; color:#1877f2; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; padding:4px 0; }
.fb-photos-see-all:hover { text-decoration:underline; }
.fb-photos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; border-radius:10px; overflow:hidden; }
.fb-photo-cell { aspect-ratio:1/1; overflow:hidden; cursor:pointer; background:var(--card2); transition:opacity .15s; }
.fb-photo-cell:hover { opacity:.88; }
.fb-photo-cell img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.fb-photo-cell:hover img { transform:scale(1.05); }

/* pposts styles */
.pposts-hdr { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; background:var(--bg); border-top:.5px solid var(--border); border-bottom:.5px solid var(--border); }
.pposts-hdr-title { font-size:18px; font-weight:800; color:var(--tx); font-family:'Poppins',sans-serif; }
.pposts-hdr-right { display:flex; gap:8px; }
.pposts-hdr-manage { display:flex; align-items:center; gap:6px; padding:7px 13px; background:var(--card); color:var(--tx); border:.5px solid var(--border); border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s; }
.pposts-tabs { display:flex; background:var(--bg); border-bottom:.5px solid var(--border); }
.pposts-tab { flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 8px; background:transparent; color:var(--muted); border:none; border-bottom:2.5px solid transparent; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:color .15s,border-color .15s; }
.pposts-tab.on { color:#1877f2; border-bottom-color:#1877f2; }
.pposts-empty { text-align:center; padding:40px 20px; color:var(--muted); }
.profile-posts-list { display:flex; flex-direction:column; gap:0; }
.pposts-card { background:var(--card); border-top:.5px solid var(--border); border-bottom:.5px solid var(--border); margin-bottom:8px; }
.pposts-card-head { display:flex; align-items:center; gap:10px; padding:13px 14px 8px; }
.pposts-av { width:42px; height:42px; border-radius:50%; background:#e50914; color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex-shrink:0; overflow:hidden; box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px rgba(229,9,20,.45); }
.pposts-card-meta { flex:1; min-width:0; }
.pposts-name { font-size:14px; font-weight:800; color:var(--tx); font-family:'Poppins',sans-serif; }
.pposts-time { font-size:11px; color:var(--muted); margin-top:1px; display:flex; align-items:center; gap:4px; }
.pposts-card-actions { display:flex; gap:6px; }
.pposts-act-btn { padding:5px 10px; background:var(--card2); color:var(--tx); border:.5px solid var(--border); border-radius:7px; font-size:11px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s; }
.pposts-act-btn.danger { color:#ff4444; }
.pposts-text { padding:2px 14px 10px; font-size:14px; color:var(--tx); line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.pposts-img-wrap { position:relative; }
.pposts-img { width:100%; max-height:400px; object-fit:cover; display:block; cursor:pointer; }
.pposts-img-more { position:absolute; bottom:10px; right:12px; background:rgba(0,0,0,.7); color:#fff; padding:4px 10px; border-radius:8px; font-size:12px; font-weight:700; }
.pposts-stats { display:flex; align-items:center; gap:10px; padding:7px 14px 2px; font-size:12.5px; color:var(--muted); border-top:.5px solid var(--border); }
.pposts-stat-item { display:flex; align-items:center; gap:4px; cursor:pointer; }
.pposts-like-ic { color:#ff3c5c; font-size:13px; }
.pposts-action-row { display:flex; gap:0; border-top:.5px solid var(--border); }
.pposts-action-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 6px; background:transparent; color:var(--muted); border:none; border-right:.5px solid var(--border); border-radius:0; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s,color .15s; }
.pposts-action-btn:last-child { border-right:none; }
.pposts-action-btn:hover { background:rgba(128,128,128,.08); color:var(--tx); }
.profile-posts-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:2px; }
.pposts-grid-cell { position:relative; aspect-ratio:1/1; overflow:hidden; cursor:pointer; background:var(--card2); }
.pposts-grid-img { width:100%; height:100%; background-size:cover; background-position:center; transition:transform .2s; }
.pposts-grid-cell:hover .pposts-grid-img { transform:scale(1.05); }
.pposts-grid-text { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:10px; background:var(--card); }
.pposts-grid-av { width:34px; height:34px; border-radius:50%; background:#e50914; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; }
.pposts-grid-txt { font-size:10px; color:var(--tx); text-align:center; line-height:1.4; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.pposts-grid-multi { position:absolute; top:6px; right:6px; background:rgba(0,0,0,.6); color:#fff; padding:2px 6px; border-radius:4px; font-size:11px; font-weight:700; }
.pposts-grid-overlay { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(0,0,0,.65),transparent); padding:14px 6px 5px; display:flex; gap:8px; font-size:10.5px; font-weight:700; color:#fff; opacity:0; transition:opacity .18s; }
.pposts-grid-cell:hover .pposts-grid-overlay { opacity:1; }

/* Photos grid in expp panel */
#expp-photos-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }

/* ════════════════════════════════════════════════════════════════
   PHOTO LIGHTBOX
   ════════════════════════════════════════════════════════════════ */

#photoLightboxOv { flex-direction:column; overflow:hidden; }
.plb-av { width:40px; height:40px; border-radius:50%; background:#e50914; color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex-shrink:0; overflow:hidden; }
.plb-action-btn { display:flex; align-items:center; gap:7px; padding:10px 18px; background:rgba(255,255,255,.1); color:#fff; border:.5px solid rgba(255,255,255,.2); border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .15s; }
.plb-action-btn:hover { background:rgba(255,255,255,.18); }
.plb-action-btn.plb-liked svg path { fill:#ff3c5c; stroke:#ff3c5c; }
.plb-action-btn.plb-liked { color:#ff3c5c; }

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME overrides
   ════════════════════════════════════════════════════════════════ */

[data-theme="light"] .exp-post { background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06); }
[data-theme="light"] .exp-composer { background:#fff; }
[data-theme="light"] .exp-pa-btn:hover { background:rgba(0,0,0,.04); }
[data-theme="light"] .exp-more:hover { background:rgba(0,0,0,.06); }
[data-theme="light"] .exp-comment-body { background:rgba(0,0,0,.05); }
[data-theme="light"] .exp-chip.on { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
[data-theme="light"] .exp-vtoggle.on { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
[data-theme="light"] .exp-main-tab.on { border-bottom-color:#e50914; }
[data-theme="light"] .expp-profile-card { background:#fff; }
[data-theme="light"] .fb-about-card { background:#fff; }
[data-theme="light"] .fb-photos-section { background:#fff; }
[data-theme="light"] .pposts-card { background:#fff; }
[data-theme="light"] .fb-profile-tabs { background:#f0f2f5; }
[data-theme="light"] .fb-profile-info { background:#f0f2f5; }
[data-theme="light"] .exp-composer-input { background:rgba(0,0,0,.06); }
[data-theme="light"] #page-profil { background:#f0f2f5; }
[data-theme="light"] .exp-composer { background:#fff; }

/* ════════════════════════════════════════════════════════════════
   v14.7 — Force-hide social stubs di profile page
   ════════════════════════════════════════════════════════════════
   `redesign-v14.css` L292 punya `.fb-profile-info .profile-stats-row { display:flex!important; }`
   yang menang dari inline `style="display:none;"`. Override pakai !important + selector lebih
   spesifik agar element social benar-benar hidden di profile page.

   Selain itu, fb-profile-actions theme/lang toggle (themeBtn2/langBtn2) di-hide karena
   user mau toggle tema/bahasa cuma di prof-topbar (pojok kanan atas), bukan inline.
*/
#page-profil .profile-stats-row,
#page-profil #profile-stats-row,
#page-profil #fb-photos-section,
#page-profil #profile-my-posts-block,
#page-profil #profile-posts-feed,
#page-profil #profile-posts-feed-full,
#page-profil .fb-photos-section,
#page-profil .pposts-empty,
#page-profil #profile-email {
  display: none !important;
}

/* Hide duplicate theme/lang toggles inside fb-profile-actions — keep only prof-topbar ones */
#page-profil .fb-profile-actions #themeBtn2,
#page-profil .fb-profile-actions #langBtn2 {
  display: none !important;
}

/* Make Edit Profil button full-width since toggles inline removed */
#page-profil .fb-profile-actions {
  display: block;
}
#page-profil .fb-profile-actions .fb-btn-edit {
  width: 100%;
  display: block;
}

/* Make sure prof-topbar (with theme/lang toggles) stays visible & sticky at top of profile.
   FIX v14.20: prof-topbar ditampilkan di mobile, disembunyikan di desktop (dt-nav sudah ada) */
#page-profil .prof-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: max(14px, env(safe-area-inset-top)) 15px 12px !important;
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: .5px solid var(--border);
}
/* HIDE di desktop — dt-nav sudah menggantikan */
@media (min-width: 900px) {
  #page-profil .prof-topbar {
    display: none !important;
  }
}
#page-profil .prof-topbar .prof-toggles { display: flex !important; gap: 7px; }
[data-theme="light"] #page-profil .prof-topbar {
  background: #f0f2f5;
}

/* ════════════════════════════════════════════════════════════════
   v14.8 — Visual Polish: Disc Music Cards + Better Shadows + Less Lines
   ════════════════════════════════════════════════════════════════
   User feedback:
   1. "kayak menyatu kan" — cards merge with background, no clear elevation
   2. "garis garis grid mengganggu" — too many separator lines
   3. "stack card... gambar template seperti disc music" — vinyl-style for songs

   Strategy:
   • Replace divider lines (.5px borders) with gap-based separation
   • Add proper shadow elevation in BOTH light & dark
   • Vinyl/disc visual using CSS pseudo-element behind album cover
   ════════════════════════════════════════════════════════════════ */

/* ── v14.13: BRIGHT half-disc vinyl (silver/white) — Refined desktop ──
   User feedback v14.10/v14.12:
   • Mobile bagus, desktop "jelek" (cover tiny, disc dominate)
   • Disc warna bright (silver/white) bukan dark vinyl black
   
   Perubahan:
   • Disc gradient ulang dengan warna SILVER/CREAM/WHITE (bright) + red label center
   • Desktop pakai EXPLICIT PIXEL values (no calc/percentage) untuk avoid math errors
   • Desktop card diperbesar 240px dengan padding yang jelas → cover 168px proper visible */

/* Common: card structure for both mobile + desktop */
.sc-card {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
  transition: transform .25s cubic-bezier(.2,.7,.4,1.4);
}
.sc-card:hover { transform: translateY(-3px); }

/* Common: badges & play button always on top */
.sc-rank, .sc-badge, .sc-play { z-index: 3 !important; }

/* Common: album cover styling */
.sc-img {
  position: relative !important;
  z-index: 2 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.20);
  border-radius: 6px !important;
}
[data-theme="light"] .sc-img {
  box-shadow: 0 4px 14px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
}

/* Common: BRIGHT VINYL gradient (silver/cream + red center label) */
.sc-card::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  background:
    /* Top-left highlight gleam */
    radial-gradient(ellipse 55% 50% at 30% 28%,
      rgba(255,255,255,.55) 0%,
      rgba(255,255,255,.20) 35%,
      transparent 65%),
    /* Bright vinyl base — silver/white with subtle grooves */
    radial-gradient(circle at center,
      var(--red) 0%, var(--red) 10%,                    /* red center label */
      #ffffff 10.5%, #f5f5f5 12.8%,                      /* white label rim */
      #c0c0c0 13.2%,                                       /* outer label edge */
      #d8d8d8 17%,  #e8e8e8 21%,                           /* groove 1 (silver) */
      #c8c8c8 25%,  #dcdcdc 30%,                           /* groove 2 */
      #c0c0c0 35%,  #d8d8d8 41%,                           /* groove 3 */
      #b8b8b8 47%,  #d0d0d0 54%,                           /* groove 4 */
      #b0b0b0 61%,  #c8c8c8 70%,                           /* groove 5 */
      #a8a8a8 80%,  #989898 100%);                         /* outer light gray */
  z-index: -1;
  box-shadow:
    0 6px 18px rgba(0,0,0,.18),                            /* soft drop shadow */
    inset 0 0 0 1px rgba(0,0,0,.08);                       /* subtle outer rim */
  transition: transform .4s cubic-bezier(.2,.7,.4,1.4);
}
.sc-card:hover::before { transform: rotate(15deg); }
[data-theme="dark"] .sc-card::before {
  box-shadow:
    0 6px 20px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.10);
}

/* ────────────────────────────────────────────────────────────────
   MOBILE (max-width:899px): card 156px, sc-img 112x112, disc 112x112 peek 44px
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .sc-card {
    min-width: 156px !important;
    max-width: 156px !important;
    padding-right: 0 !important;
  }
  .sc-card::before {
    top: 0;
    left: 44px;
    width: 112px;
    height: 112px;
  }
  .sc-card:hover::before { transform: rotate(15deg); }
  .sc-card .sc-tt,
  .sc-card .sc-ar {
    width: 112px !important;
    max-width: 112px !important;
  }

  /* Beranda grid layout (mobile): percentage-based */
  .beranda-song-grid .sc-card {
    min-width: unset !important;
    max-width: unset !important;
    width: 100% !important;
  }
  .beranda-song-grid .sc-card::before {
    width: 75%;
    height: 0;
    padding-bottom: 75%;
    left: 25%;
    top: 0;
  }
  .beranda-song-grid .sc-img {
    width: 75% !important;
    height: auto !important;
    aspect-ratio: 1/1;
  }
  .beranda-song-grid .sc-card .sc-tt,
  .beranda-song-grid .sc-card .sc-ar {
    width: 75% !important;
    max-width: unset !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   DESKTOP (min-width:900px): card 240px, sc-img 168x168, disc 168x168 peek 60px
   Pakai EXPLICIT PIXEL values — no calc/percentage to avoid math errors.
   ──────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .sc-card {
    min-width: 240px !important;
    max-width: 240px !important;
    padding: 12px 60px 14px 12px !important;     /* top right bottom left — explicit */
    /* Card width: 240, content area: 240 - 12 - 60 = 168px */
  }

  .sc-img {
    width: 168px !important;        /* explicit, no aspect-ratio confusion */
    height: 168px !important;
    aspect-ratio: 1/1;
    margin-bottom: 12px !important;
  }

  .sc-card::before {
    /* Disc same size as sc-img, positioned to peek 60px out to the right */
    top: 12px;                        /* match padding-top */
    left: 72px;                       /* 12 (left padding) + 60 (peek offset) */
    width: 168px;
    height: 168px;
    /* Result: disc.right = 72 + 168 = 240 = card right edge ✓
       sc-img.right = 12 + 168 = 180
       Overlap: 72 to 180 = 108px (~64% of disc behind cover)
       Peek: 180 to 240 = 60px (~36% of disc visible) */
  }

  .sc-card:hover::before { transform: rotate(15deg); }

  /* sc-tt and sc-ar — match sc-img width (168px) */
  .sc-card .sc-tt,
  .sc-card .sc-ar {
    width: 168px !important;
    max-width: 168px !important;
  }
}

/* ── Reduce divider line noise ── */
/* Cards instead of flat sections with borders → use gap + shadow */
[data-theme="light"] {
  /* Soften most border-bottom dividers in light mode */
  --border: rgba(0,0,0,.06);
  --border2: rgba(0,0,0,.05);
}

/* Replace harsh borders on key sections with subtle shadow */
.exp-composer,
.exp-empty,
.fb-profile-info {
  border: none !important;
  border-bottom: 1px solid transparent !important;
}
[data-theme="light"] .exp-composer,
[data-theme="light"] .exp-post,
[data-theme="light"] .beranda-post,
[data-theme="light"] .fb-about-card,
[data-theme="light"] .pposts-card,
[data-theme="light"] .section-block,
[data-theme="light"] .li,
[data-theme="light"] .news-card {
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04) !important;
  border: 1px solid rgba(0,0,0,.05) !important;
}
[data-theme="dark"] .exp-composer,
[data-theme="dark"] .exp-post,
[data-theme="dark"] .beranda-post,
[data-theme="dark"] .fb-about-card,
[data-theme="dark"] .pposts-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.2);
}

/* Remove harsh top/bottom borders on action rows (like → comment → share) */
.exp-post-actions,
.beranda-post .exp-post-actions {
  border-top: 1px solid rgba(128,128,128,.08) !important;
}
.exp-post-action {
  border-right: 1px solid rgba(128,128,128,.08) !important;
}

/* Reduce divider visibility on profile info bottom */
.fb-profile-info {
  border-bottom: 1px solid rgba(128,128,128,.08) !important;
}

/* Section blocks: spacing instead of borders */
.section-block {
  border-radius: 14px;
  margin: 12px 14px !important;
  overflow: hidden;
}
[data-theme="light"] .section-block {
  background: #fff;
}

/* Posts as elevated cards with proper margin */
.exp-post, .beranda-post {
  border-radius: 14px !important;
  margin: 10px 14px !important;
  overflow: hidden;
}
[data-theme="light"] .exp-post,
[data-theme="light"] .beranda-post {
  background: #fff !important;
}

/* Hide the embedded screenshot post that's leaking — defensive */
#page-explore .exp-post .exp-post-text img,
#page-explore .exp-post img[src*="data:image/png"][height] {
  max-height: 220px;
  object-fit: cover;
  border-radius: 8px;
}

/* Better compose box visual */
.exp-composer {
  margin: 12px 14px !important;
  border-radius: 14px !important;
}

/* ── Light mode page background — softer, less white-on-white ── */
[data-theme="light"] body,
[data-theme="light"] #page-explore,
[data-theme="light"] #page-beranda,
[data-theme="light"] #page-lagu {
  background: #f0f2f5 !important;
}

/* Beranda song grid — better card design */
[data-theme="light"] .beranda-song-grid .sc-card .sc-img {
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.05);
}

/* Hero/banner card on beranda — proper elevation */
[data-theme="light"] .bslide,
[data-theme="light"] .news-card,
[data-theme="light"] .news-hero {
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.04);
}

/* Music section labels — better spacing without harsh dividers */
.section-label,
.beranda-section-title,
[data-i18n="reco_t"],
[data-i18n="popular_t"],
[data-i18n="new_t"] {
  margin-top: 4px !important;
}

/* sc-tt and sc-ar — better typography for readability */
.sc-tt { letter-spacing: -.1px; }
.sc-ar { opacity: .82; }

/* ── Tabs minimal — less line noise ── */
.exp-main-tab {
  border-bottom-width: 2px !important;
}

/* Profile topbar — clean shadow instead of border */
#page-profil .prof-topbar {
  border-bottom: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

/* Remove sticky-tabs harsh border at chips/category bar */
.exp-categories,
.exp-filter,
#exp-filter,
.gchip-row,
.vchip-row {
  border: none !important;
}

/* Clean light-mode bottom nav */
[data-theme="light"] .bnav,
[data-theme="light"] .bottom-nav {
  background: #fef9f9 !important;
  /* FIX v14.21: Hapus backdrop-filter — menyebabkan konten halaman "tembus" di bawah nav */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-top: none !important;
}

/* Top bar in light mode — clean */
[data-theme="light"] .topbar,
[data-theme="light"] .pg-header,
[data-theme="light"] #page-profil .prof-topbar {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


/* ════════════════════════════════════════════════════════════════
   v14.12 — MINIMAL targeted styling for sub-settings sheet only
   (No global selectors — narrowly scoped to #subSettingsSheet to
   avoid breaking other layouts. v14.11 had aggressive .hs / .sc-card
   global rules yang bikin layout berantakan; di v14.12 dihapus.)
   ════════════════════════════════════════════════════════════════ */

#subSettingsSheet { background: var(--card); }
[data-theme="light"] #subSettingsSheet { background: #ffffff; }

#subSettingsSheet .sh-back {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--tx);
  padding: 0 10px;
  font-size: 18px;
  line-height: 1;
  opacity: .7;
  transition: opacity .15s;
}
#subSettingsSheet .sh-back:hover { opacity: 1; }

#subSettings-body {
  padding: 14px;
}
#subSettings-body .settings-list {
  margin-top: 4px;
}
[data-theme="light"] #subSettings-body .settings-item {
  background: #f5f6f8;
}
[data-theme="dark"] #subSettings-body .settings-item {
  background: rgba(255,255,255,.04);
}
#subSettings-body .settings-item {
  margin-bottom: 6px;
  border-radius: 11px;
}
#subSettings-body .settings-item:last-child { margin-bottom: 0; }
[data-theme="light"] #subSettings-body .settings-item.danger {
  background: rgba(229,9,20,.05);
}
[data-theme="dark"] #subSettings-body .settings-item.danger {
  background: rgba(229,9,20,.08);
}

/* Info card at top of sub-sheet (current info / status keamanan / preferensi) — light mode */
[data-theme="light"] #subSettings-body > div[style*="background:rgba(128,128,128,.06)"] {
  background: #f5f6f8 !important;
}


/* ============================================================
 * FIXES v14.15 — Bug fixes layout
 * Source: fixes-v14.15.css
 * ============================================================ */

/*
 * fixes-v14.15.css
 * Comprehensive layout & UX fixes for Karya Indonesia v14.14.9
 * Fixes: mobile header overlap, tablet popup centering, preview bar,
 *        sawer desktop layout, lazy load hints, profile page icons
 * ──────────────────────────────────────────────────────────────────
 */

/* ══════════════════════════════════════════════════════════════════
   FIX 1 — Mobile topbar: hide Masuk/Daftar pills when floating
   notif & DM icons are present (they overlap at top-right)
   Pills are still accessible via /profil page (prof-btns section)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* Hide auth pills in topbar — use profil page for login/register */
  #topbar-auth .pill {
    display: none !important;
  }

  /* Keep the topbar-auth div itself for JS (setLoggedIn writes into it),
     but make it shrink so it doesn't push the brand logo */
  #topbar-auth {
    min-width: 0;
    flex-shrink: 1;
  }

  /* When user is logged in, topbar-auth shows a username pill — keep it
     but make sure it doesn't overlap the 2 floating icons (DM at right:14,
     bell at right:60). Give enough right padding on tb-top */
  .tb-top {
    padding-right: 112px !important; /* 14+38+6+38+6 = space for 2 icons */
  }

  /* Profile page topbar: add right padding so theme/lang toggle buttons
     don't sit under the floating notif/DM icons */
  #page-profil .prof-topbar {
    padding-right: 112px !important;
  }

  /* Profil page: the floating icons shift down (see dm.js body[data-page] rule),
     so when on beranda/explore/etc they remain at top:14px as normal */
}

/* ══════════════════════════════════════════════════════════════════
   FIX 2 — Tablet / iPad (600–899px): center the song detail popup
   On mobile it's a bottom sheet. On desktop it's centered modal.
   In the 600–899px gap it was left:0;right:0;bottom:0 — very wide
   and mepet ke pinggir on iPad. Now center it nicely.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 600px) and (max-width: 899px) {
  .sh-sheet {
    left: 50% !important;
    right: auto !important;
    bottom: 24px !important;
    top: auto !important;
    transform: translateX(-50%) translateY(100%) !important;
    width: 90% !important;
    max-width: 540px !important;
    border-radius: 22px !important;
  }

  .sh-sheet.on {
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Song detail sheet: slightly taller on tablet */
  #dsSheet {
    max-height: 85vh !important;
  }

  /* Register/login sheets */
  #regSheet, #loginSheet {
    max-width: 480px !important;
  }

  /* Sawer modal */
  #sawerSheet {
    max-width: 460px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 3 — Preview bar: fix orphan CSS classes & make seekbar
   work properly. The HTML now uses .preview-box / .preview-player /
   .preview-prog / .preview-fill / .preview-seek / .preview-times
   ══════════════════════════════════════════════════════════════════ */

/* Seekbar track styling */
.preview-seek {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--card2, #2a2a2a);
  outline: none;
  cursor: pointer;
  margin-bottom: 0;
  display: block;
  position: relative;
  z-index: 2;
}

.preview-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red, #e50914);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(229, 9, 20, 0.25);
  transition: transform .1s;
}

.preview-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--red, #e50914);
  cursor: pointer;
  border: none;
}

.preview-seek::-webkit-slider-thumb:hover {
  transform: scale(1.25);
}

/* Hide the static fill bar when seekbar is present */
.preview-bar {
  display: none !important; /* old progress bar — replaced by .preview-seek + .preview-fill */
}

/* Ensure preview-box sections are properly visible and not clipped */
.preview-box {
  background: var(--card, #1a1a1a);
  border-radius: 15px;
  padding: 14px 16px 12px;
  border: .5px solid var(--border, #2a2a2a);
  margin-bottom: 14px;
}

.preview-player {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.preview-prog {
  flex: 1;
  min-width: 0;
}

.preview-fill {
  height: 4px;
  background: var(--red, #e50914);
  border-radius: 2px;
  width: 0%;
  transition: width .22s linear;
  /* Hidden — seekbar thumb shows position instead */
  display: none;
}

.preview-times {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--muted, #888);
  margin-top: 4px;
}

.preview-notice {
  font-size: 9px;
  color: var(--muted, #888);
  margin-top: 10px;
  text-align: center;
  opacity: .7;
}

/* Ensure sh-body has enough padding so preview section isn't hidden */
.sh-body {
  padding-bottom: 28px !important;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 4 — Desktop: Sawer page content was full-width (menyebar ke
   pinggir). Add max-width centering like other pages.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  #page-sawer .scroll {
    max-width: 860px !important;
    margin: 0 auto !important;
    padding: 40px 4% 140px !important;
  }

  /* Sawer topbar alignment */
  #tb-sawer {
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  /* Sawer card: on desktop show 2 columns */
  #sawer-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
  }

  .sawer-card {
    margin-bottom: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 5 — Overall layout alignment fixes: mobile ↔ desktop
   ══════════════════════════════════════════════════════════════════ */

/* Beranda: catalog section cards consistent padding */
@media (max-width: 899px) {
  .lwrap {
    padding: 0 12px 8px !important;
  }

  /* Section headings aligned with cards */
  .sec-hd {
    padding: 0 13px !important;
  }
}

/* Berita page: consistent card width */
@media (min-width: 900px) {
  #page-berita .scroll {
    max-width: 900px !important;
  }

  .news-card {
    max-width: 100% !important;
  }
}

/* Lagu / Katalog Musik page: consistent centering */
@media (min-width: 900px) {
  #page-lagu .scroll {
    max-width: 1100px !important;
    margin: 0 auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 6 — Lazy loading visual improvement:
   Album covers use background-image (no <img> tag) so add a
   placeholder shimmer animation while they load.
   ══════════════════════════════════════════════════════════════════ */
@keyframes ki-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Shimmer placeholder for covers — only when no image set yet.
   Elements that have style="background-image:url(...)" skip this
   because the [style*="url("] selector (below) overrides animation. */
.sc-img:not([style*="url("]),
.li-img:not([style*="url("]),
.pl-img:not([style*="url("]),
.ds-hero:not([style*="url("]) {
  background-color: var(--card2, #222);
  background-image: linear-gradient(
    90deg,
    var(--card2, #222) 25%,
    var(--card3, #2e2e2e) 50%,
    var(--card2, #222) 75%
  ) !important;
  background-size: 800px 100% !important;
  animation: ki-shimmer 1.4s ease-in-out infinite;
}

/* News image placeholders */
.news-hero-img,
.news-gcard-img {
  background-color: var(--card2, #222);
}

/* ══════════════════════════════════════════════════════════════════
   FIX 7 — Desktop: prevent any content bleeding to the far edges
   when content is centered. Add a safe container around pages
   that don't yet have max-width set.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  /* Explore page scroll centering */
  #page-explore .scroll {
    max-width: 860px !important;
    margin: 0 auto !important;
  }

  /* Topbar elements (beranda's topbar is hidden on desktop, but others
     like tb-sawer and custom topbars need centering) */
  .tb, .topbar {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Floating notification sheet position (relative to viewport, fine) */
  /* Floating DM sheet fine too */

  /* Detail sheet on desktop: ensure it's not too tall */
  #dsSheet {
    max-height: 82vh !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 8 — Mobile bottom nav: ensure it never overlaps content
   that's centered or has padding issues
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* Add a bit more breathing room at bottom for scroll containers */
  .scroll {
    padding-bottom: max(90px, calc(70px + env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 9 — Profile page: when user is logged in, make sure the
   prof-topbar doesn't create a visual collision with floating icons.
   The floating icons are shifted to top:62px via body[data-page="profil"]
   in dm.js injected CSS. This ensures the topbar content is visible.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  #page-profil .prof-topbar {
    /* Give enough right clearance for theme + lang toggles WITHOUT
       floating icons overlapping them */
    padding-right: 16px !important;
  }

  /* When on profil page, shift both floating icons below the header */
  body[data-page="profil"] .notif-bell-floating,
  body[data-page="profil"] .dm-bell-floating {
    top: calc(max(14px, env(safe-area-inset-top)) + 52px) !important;
    background: var(--card, rgba(20,20,20,.92)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 10 — Image lazy-load: native loading=lazy added to <img> tags
   where possible. For background-image covers, the shimmer above
   handles the placeholder state. No JS needed.
   ══════════════════════════════════════════════════════════════════ */

/* Ensure img tags that have loading=lazy don't cause layout shift */
img[loading="lazy"] {
  content-visibility: auto;
}

/* Brand logo images — don't shimmer (they're always fast) */
.brand-logo {
  animation: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 11 — emp-* classes: "Profil Saya" mini-card in Explore sheet
   These classes were used in HTML but never defined in any CSS file.
   ══════════════════════════════════════════════════════════════════ */
.emp-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--card);
  border-bottom: .5px solid var(--border);
}

.emp-av {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e50914, #8f0609);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 4px rgba(229,9,20,.4);
}

.emp-info {
  flex: 1;
  min-width: 0;
}

.emp-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--tx);
  font-family: 'Poppins', sans-serif;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-username {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-stats {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.5;
}

.emp-stats b { color: var(--tx); }

.emp-edit-btn {
  padding: 7px 14px;
  background: transparent;
  border: .5px solid var(--border2);
  border-radius: 20px;
  color: var(--tx);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}

.emp-edit-btn:hover {
  background: var(--card2);
  border-color: var(--red);
  color: var(--red);
}

/* emp-tabs: tab row inside "Profil Saya" sheet */
.emp-tabs {
  display: flex;
  background: var(--bg);
  border-bottom: .5px solid var(--border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.emp-tab {
  flex: 1;
  padding: 10px 8px;
  background: transparent;
  color: var(--muted);
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  letter-spacing: -.1px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.emp-tab.on {
  color: var(--tx);
  border-bottom-color: var(--red);
}

.emp-tab:hover { color: var(--tx); }

/* emp activity items */
.emp-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: .5px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}

.emp-activity-item:hover { background: var(--card2); }

.emp-activity-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.emp-activity-body { flex: 1; min-width: 0; }

.emp-activity-text {
  font-size: 13px;
  color: var(--tx);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-activity-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 12 — pg-hd-row: page header row with back button + title
   Used in playshop, log, logshop, riwayat, txcat pages
   ══════════════════════════════════════════════════════════════════ */
.pg-hd-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pg-hd-row .pg-h1 {
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 13 — ds-genre-row: genre chip row in song detail popup
   ══════════════════════════════════════════════════════════════════ */
.ds-genre-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 2px;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 14 — pe-disc-label: discount label in performance event sheet
   ══════════════════════════════════════════════════════════════════ */
.pe-disc-label {
  font-size: 11px;
  color: var(--gold, #f5c518);
  font-weight: 700;
  background: rgba(245,197,24,.1);
  padding: 2px 8px;
  border-radius: 6px;
  border: .5px solid rgba(245,197,24,.3);
}

/* ══════════════════════════════════════════════════════════════════
   FIX 15 — dt-footer-col: desktop footer column base rule
   Exists in desktop.css only with child selectors (h3, ul, a)
   but the base .dt-footer-col rule is missing
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .dt-footer-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 16 — reg-otp: OTP boxes in register flow need consistent
   display (this is a container ID, but also used as class)
   ══════════════════════════════════════════════════════════════════ */
.reg-otp {
  /* OTP single digit input box styling */
  width: 42px !important;
  height: 48px !important;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 17 — Accessibility: sh-close and back-btn focus states
   Now that aria-labels are added, also ensure visible focus ring
   ══════════════════════════════════════════════════════════════════ */
.sh-close:focus-visible,
.back-btn:focus-visible,
.emp-edit-btn:focus-visible,
.preview-btn:focus-visible,
.emp-tab:focus-visible {
  outline: 2px solid var(--red, #e50914);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 18 — Light theme: ensure emp-* and new components respect
   the light theme variables
   ══════════════════════════════════════════════════════════════════ */
[data-theme="light"] .emp-profile-card {
  background: #fff;
}

[data-theme="light"] .emp-edit-btn {
  border-color: #ddd;
  color: #333;
}

[data-theme="light"] .emp-tabs {
  background: #f8f8f8;
}

[data-theme="light"] .emp-tab.on {
  color: #111;
}

/* ══════════════════════════════════════════════════════════════════
   FIX 19 — Desktop: sawer topbar shouldn't be wider than content
   Ensure the tb heading is inside the max-width container
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  #tb-sawer > div {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 4%;
    box-sizing: border-box;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX 20 — Mobile: OTP boxes row wrap properly on narrow screens
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .otp-row {
    gap: 6px !important;
  }
  .otp-box,
  .reg-otp {
    width: 36px !important;
    height: 42px !important;
    font-size: 18px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX — Profile "Postingan Saya" layout: remove double border lines,
   clean card spacing, consistent with explore feed style
   ══════════════════════════════════════════════════════════════════ */

/* Remove duplicate border (top+bottom = double lines between cards) */
.pposts-card {
  border-top: none !important;
  border-bottom: .5px solid var(--border) !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

/* First card: add top border for clean separation from header */
.profile-posts-list .pposts-card:first-child {
  border-top: .5px solid var(--border) !important;
}

/* Action buttons: remove right border from last child properly */
.pposts-action-btn {
  border-right: .5px solid var(--border2) !important;
}
.pposts-action-btn:last-child {
  border-right: none !important;
}

/* Consistent padding for profile posts list container */
.profile-posts-list {
  width: 100%;
}

/* pposts-img-wrap: ensure proper border radius on images */
.pposts-img-wrap {
  margin: 0 !important;
  overflow: hidden;
}
.pposts-img {
  border-radius: 0 !important;
}

/* Desktop: contain profile posts in max-width */
@media (min-width: 900px) {
  .profile-posts-list,
  .profile-posts-grid {
    max-width: 680px;
    margin: 0 auto;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX v14.18 — Profile page: center avatar + name on mobile
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* Center the avatar (fb-av-outer) within the cover section */
  #page-profil .fb-av-outer {
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: -52px !important;
  }

  /* Center the profile name, username, bio */
  #page-profil .fb-profile-name,
  #page-profil .fb-profile-username,
  #page-profil .fb-profile-bio {
    text-align: center !important;
  }

  /* Center role badge */
  #page-profil .fb-profile-info .role-badge {
    display: block !important;
    width: fit-content !important;
    margin: 0 auto 10px !important;
  }

  /* Center stats row */
  #page-profil .fb-profile-info .profile-stats-row {
    justify-content: center !important;
  }

  /* Center action buttons */
  #page-profil .fb-profile-actions {
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX v14.18 — Bell & DM floating icons: only show on beranda
   Hide on profil, explore, berita, lagu, play, sawer pages
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* Only show floating icons when on beranda page */
  body:not([data-page="beranda"]) .notif-bell-floating,
  body:not([data-page="beranda"]) .dm-bell-floating {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FIX v14.18 — v13 form: password eye toggle styling
   ══════════════════════════════════════════════════════════════════ */
.v13-pw-wrap {
  position: relative;
  width: 100%;
}

.v13-pw-wrap .v13-input {
  width: 100%;
  padding-right: 44px !important;
  box-sizing: border-box;
}

.v13-pw-eye {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted, #888);
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  z-index: 2;
}

.v13-pw-eye:hover { color: var(--tx, #fff); }

/* ══════════════════════════════════════════════════════════════════
   FIX v14.18 — v13 register role selector: interactive styles
   ══════════════════════════════════════════════════════════════════ */
#v13-role-customer,
#v13-role-composer {
  transition: border-color .15s, background .15s, transform .1s;
}

#v13-role-customer:hover,
#v13-role-composer:hover {
  transform: scale(1.02);
}


/* ============================================================
 * PATCH v14.19 — Patch kumulatif v14.19
 * Source: patch-v14.19.css
 * ============================================================ */

/* ════════════════════════════════════════════════════════════════
   patch-v14.19.css — FINAL v4
   ① Image carousel + fullscreen lightbox
   ② Karind Light Mode — "Warm White"
      --border NETRAL. Merah hanya pada elemen aksen spesifik.
   ③ Mini player light mode
   ④ Play tab selalu tersembunyi di navbar (dipindah ke profil)
   ════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   § CAROUSEL
   ────────────────────────────────────────────────────────────── */
.exp-carousel {
  position:relative; overflow:hidden; border-radius:0;
  margin-top:8px; touch-action:pan-y; user-select:none;
}
.exp-car-track { display:flex; transition:transform .28s cubic-bezier(.25,.46,.45,.94); will-change:transform; }
.exp-car-slide { flex:0 0 100%; min-width:0; position:relative; min-height:220px; max-height:420px; overflow:hidden; background:var(--card2); }
.exp-car-slide img { width:100%; height:100%; object-fit:cover; display:block; min-height:220px; max-height:420px; }
.exp-car-dots { position:absolute; bottom:8px; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:5px; z-index:2; pointer-events:none; }
.exp-car-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45); transition:background .2s, width .2s; cursor:pointer; pointer-events:all; flex-shrink:0; }
.exp-car-dot.on { background:#fff; width:18px; border-radius:3px; }
.exp-car-counter { position:absolute; top:8px; right:10px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); color:#fff; font-size:11px; font-weight:700; padding:3px 8px; border-radius:20px; pointer-events:none; z-index:2; }
@media (min-width:480px) { .exp-carousel { border-radius:12px; } }

/* ──────────────────────────────────────────────────────────────
   § LIGHTBOX DOTS
   ────────────────────────────────────────────────────────────── */
.exp-lb-dot { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); cursor:pointer; transition:background .18s, width .18s; flex-shrink:0; }
.exp-lb-dot.on { background:#fff; width:20px; border-radius:3.5px; }

/* ──────────────────────────────────────────────────────────────
   § PLAY TAB — selalu sembunyi di navbar (dipindah ke profil)
   ────────────────────────────────────────────────────────────── */
#nav-play-btn  { display:none !important; }
#dt-link-play  { display:none !important; }

/* ──────────────────────────────────────────────────────────────
   § CENTER NAV FAB — Musik (bunderan merah di tengah navbar)
   ────────────────────────────────────────────────────────────── */

/* Navbar harus overflow:visible agar tombol bisa naik ke atas */
.bnav {
  overflow: visible !important;
  align-items: flex-end !important;
}

/* Wrapper tombol tengah — naik tipis aja biar nggak terlalu menonjol/lucu di navbar.
   Sebelumnya -20px bikin FAB kelihatan jauh lebih tinggi dari item lain. */
.ni-core {
  position: relative;
  margin-top: -12px;
  flex: 1.1 !important;
  padding-bottom: 2px !important;
}

/* Lingkaran FAB — Default: dark gradient (untuk dark mode).
   Pakai eksplisit warna gelap (bukan cuma var()) supaya nggak terpengaruh
   urutan cascade & cache. Gradient halus bikin FAB kelihatan lebih premium. */
.ni-core .nico {
  width:  46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #262626, #141414) !important;
  box-shadow: none !important;
  border: 2px solid var(--red) !important;
  transition: transform .15s cubic-bezier(.2,.8,.4,1.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* Light mode override — putih bersih dengan gradient halus. */
[data-theme="light"] .ni-core .nico,
[data-theme="light"] .ni-core .nico.on {
  background: linear-gradient(145deg, #ffffff, #f7f2f2) !important;
}

/* Dark mode active state — gradient sedikit lebih terang. */
.ni-core .nico.on {
  background: linear-gradient(145deg, #2a2a2a, #181818) !important;
  border: 2.5px solid var(--red) !important;
  box-shadow: none !important;
}

.ni-core:active .nico {
  transform: scale(.92) !important;
  box-shadow: none !important;
}

/* Override aturan global `.nico.on` di borders.css yang menambah box-shadow merah —
   khusus untuk FAB tengah, kita selalu tanpa shadow. */
.ni-core .nico,
.ni-core .nico.on {
  box-shadow: none !important;
}

/* Logo brand di dalam FAB — sizing turun mengikuti FAB yang lebih kecil. */
.ni-core .nico .nico-brand-img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  display: block !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Icon putih di dalam bunderan — HANYA untuk inline SVG icons (bukan brand img logo).
   Karena FAB sekarang putih dengan logo merah, kalau ada SVG fallback strokenya pakai merah. */
.ni-core .nico > svg path,
.ni-core .nico > svg circle,
.ni-core .nico > svg rect {
  stroke: var(--red) !important;
  fill: none !important;
}

/* Label teks di bawah bunderan */
.ni-core .nl {
  font-size: 9px !important;
  font-weight: 800 !important;
  color: var(--red) !important;
  margin-top: 4px !important;
}

/* Light mode — FAB sekarang putih di kedua mode, tidak butuh override khusus border. */

/* Desktop sidebar — Musik tetap tampil normal (.bnav memang `display:none` di desktop,
   tapi defensif: kalau muncul, jangan render gaya FAB) */
@media (min-width: 769px) {
  .ni-core            { margin-top: 0 !important; }
  .ni-core .nico      { width: 38px !important; height: 24px !important; border-radius: 12px !important; border: none !important; background: none !important; box-shadow: none !important; }
  .ni-core .nico.on   { background: var(--red-glow) !important; border: none !important; }
  .ni-core .nico > svg path,
  .ni-core .nico > svg circle { stroke: var(--red) !important; }
  .ni-core .nico.on > svg path,
  .ni-core .nico.on > svg circle { stroke: var(--red) !important; }
  .ni-core .nico .nico-brand-img { width: 18px !important; height: 18px !important; }
  .ni-core .nl        { color: var(--muted) !important; font-weight: 600 !important; font-size: 9px !important; margin-top: 0 !important; }
  .ni-core .nl.on     { color: var(--red) !important; }
}

/* ════════════════════════════════════════════════════════════════
   § LIGHT DESIGN SYSTEM
   ════════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg:       #fef9f9;
  --card:     #ffffff;
  --card2:    #f7f2f2;
  --card3:    #efe6e6;
  --tx:       #18080a;
  --tx2:      #4a2424;
  --muted:    #907272;
  --border:   rgba(0,0,0,.07);      /* NETRAL — tidak merah */
  --border2:  rgba(0,0,0,.11);      /* NETRAL */
  --sh-bg:    #ffffff;
  --bnav-bg:  rgba(254,249,249,.97);
  --red-glow: rgba(229,9,20,.10);
}

/* ── Page background ── */
[data-theme="light"] body,
[data-theme="light"] .page,
[data-theme="light"] .pg-body { background:#fef9f9; }

/* ── Topbar ── */
[data-theme="light"] .topbar { background:rgba(254,249,249,.97) !important; backdrop-filter:blur(14px); }
[data-theme="light"] .topbar.sc { box-shadow:0 2px 6px rgba(0,0,0,.07) !important; }
[data-theme="light"] .tb-bname { color:#18080a !important; }

/* ── Bottom nav ── (fully opaque, no transparency to prevent dark bleed-through
   pada area safe-area-inset bawah yang sebelumnya kelihatan seperti "strip gelap") */
[data-theme="light"] .bnav {
  background: #fef9f9 !important;        /* full opaque, sama persis dengan body bg */
  border-top: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 -1px 0 rgba(0,0,0,.05) !important;
  /* FIX v14.21: Hapus backdrop-filter + paksa overflow hidden supaya
     konten halaman di bawah nav tidak "tembus" / "nongol" */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
  isolation: isolate;
}
[data-theme="light"] .nico.on  { background:rgba(229,9,20,.09) !important; }
[data-theme="light"] .nl       { color:#b09090 !important; }
[data-theme="light"] .nl.on    { color:#e50914 !important; font-weight:800 !important; }

/* ──────────────────────────────────────────────────────────────
   § MINI PLAYER — light mode (sebelumnya selalu dark)
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] .mini-player {
  background:rgba(255,255,255,.98) !important;
  backdrop-filter:blur(20px) !important;
  border-top:1px solid rgba(0,0,0,.08) !important;   /* tidak ada border hitam tebal */
  box-shadow:0 -2px 12px rgba(0,0,0,.10) !important;
}
[data-theme="light"] .mp-tt { color:#18080a !important; font-weight:700 !important; }
[data-theme="light"] .mp-ar { color:#907272 !important; }
[data-theme="light"] .mp-btn {
  background:rgba(0,0,0,.07) !important;
  color:#18080a !important;
}
[data-theme="light"] .mp-btn svg path { fill:#18080a !important; stroke:#18080a !important; }
[data-theme="light"] .mp-btn.play-pause {
  background:var(--play-accent, #e50914) !important;
  color:#fff !important;
}
[data-theme="light"] .mp-btn.play-pause svg path { fill:#fff !important; stroke:#fff !important; }
[data-theme="light"] .mp-btn.mp-close { background:rgba(0,0,0,.05) !important; }
[data-theme="light"] .mp-btn.mp-close:hover { background:rgba(229,9,20,.12) !important; }
[data-theme="light"] .mp-prog { background:rgba(0,0,0,.10) !important; }

/* ──────────────────────────────────────────────────────────────
   § FLOATING BELL & DM (notif + inbox di pojok kanan atas mobile)
   Sebelumnya: hard-coded `rgba(20,20,20,.85)` + border putih → jelek di light mode.
   Sekarang: pakai surface theme yang adaptif untuk kedua mode.
   ────────────────────────────────────────────────────────────── */
.notif-bell-floating,
.dm-bell-floating {
  background: var(--card) !important;
  border: 1px solid var(--border2, rgba(0,0,0,.08)) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
  color: var(--tx) !important;
}
.notif-bell-floating:hover,
.dm-bell-floating:hover {
  background: var(--card2) !important;
}

/* SVG ikon (bell + chat) ikut warna teks/muted theme — jangan hard-coded putih. */
.notif-bell-floating svg,
.dm-bell-floating svg {
  color: var(--tx) !important;
}
.notif-bell-floating svg path,
.notif-bell-floating svg circle,
.dm-bell-floating svg path,
.dm-bell-floating svg circle {
  stroke: var(--tx) !important;
}

/* Light mode: warna icon sedikit muted supaya nggak terlalu hitam pekat. */
[data-theme="light"] .notif-bell-floating,
[data-theme="light"] .dm-bell-floating {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.07) !important;
}
[data-theme="light"] .notif-bell-floating svg path,
[data-theme="light"] .notif-bell-floating svg circle,
[data-theme="light"] .dm-bell-floating svg path,
[data-theme="light"] .dm-bell-floating svg circle {
  stroke: #18080a !important;
}
[data-theme="light"] .notif-bell-floating:hover,
[data-theme="light"] .dm-bell-floating:hover {
  background: #f7f2f2 !important;
}

/* ──────────────────────────────────────────────────────────────
   § SECTION LABEL (merah = satu-satunya aksen warna di labels)
   ────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────
   § SECTION LABEL — muted seperti .ben-title (untuk konsistensi).
   Sebelumnya: red `#e50914` + font-weight 900 → terlalu loud, beda jauh dari
   header public page "KENAPA BERGABUNG..." yang muted gray.
   Sekarang: warna muted theme + weight 700 + spacing lebih halus.
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] .section-label {
  font-size:10px !important; font-weight:700 !important;
  color:#907272 !important; letter-spacing:1.2px !important; opacity:1 !important;
  text-transform:uppercase !important;
}
[data-theme="dark"] .section-label {
  font-size:10px !important; font-weight:700 !important;
  color:var(--muted) !important; letter-spacing:1.2px !important; opacity:1 !important;
  text-transform:uppercase !important;
}

/* ──────────────────────────────────────────────────────────────
   § SETTINGS LIST
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] .settings-list,
[data-theme="light"] .settings-accordion {
  background:#fff !important; border:1px solid rgba(0,0,0,.07) !important;
  border-radius:16px !important; box-shadow:0 2px 8px rgba(0,0,0,.06) !important; overflow:hidden !important;
}
[data-theme="light"] .settings-item {
  border-bottom:1px solid rgba(0,0,0,.06) !important;
  border-left:3px solid transparent !important;
  transition:background .12s, border-left-color .12s !important;
}
[data-theme="light"] .settings-item:last-child { border-bottom:none !important; }
[data-theme="light"] .settings-item:hover,
[data-theme="light"] .settings-item:active { background:rgba(229,9,20,.04) !important; border-left-color:#e50914 !important; }
[data-theme="light"] .settings-item .s-t  { color:#18080a !important; font-weight:700 !important; }
[data-theme="light"] .settings-item .s-s  { color:#907272 !important; }
[data-theme="light"] .settings-item .s-ic { color:#b22020 !important; opacity:.75 !important; }
[data-theme="light"] .settings-item .s-chev { opacity:.28 !important; }

/* ──────────────────────────────────────────────────────────────
   § SHOP CARDS — Playlist Saya / Cabang Usaha
   Fix: Hapus garis "kotak" dengan shadow-only (tidak ada border keras)
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] .shop-card {
  background:#ffffff !important;
  border:none !important;                                    /* ← tidak ada border = tidak ada "kotak" */
  box-shadow:0 2px 14px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05) !important;
  border-radius:14px !important;
}
[data-theme="light"] .shop-card:hover {
  box-shadow:0 6px 20px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.06) !important;
}
[data-theme="light"] .shop-card-name  { color:#18080a !important; font-weight:800 !important; }
[data-theme="light"] .shop-card-cat   { background:rgba(21,128,61,.12) !important; color:#15803d !important; font-weight:700 !important; }
[data-theme="light"] .shop-card-bar   { background:rgba(0,0,0,.08) !important; }
[data-theme="light"] .shop-card-ic    { background:rgba(21,128,61,.10) !important; }
[data-theme="light"] .shop-card-chev  { color:#b09090 !important; }
[data-theme="light"] .shop-card-meta  { color:#907272 !important; }

/* ──────────────────────────────────────────────────────────────
   § SHEETS / MODALS
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] .sh-sheet { background:#fff !important; border-top:1px solid rgba(0,0,0,.08) !important; box-shadow:0 -4px 20px rgba(0,0,0,.10) !important; }
[data-theme="light"] .sh-hd    { border-bottom:1px solid rgba(0,0,0,.06) !important; }
[data-theme="light"] .sh-title { color:#18080a !important; font-weight:800 !important; }
[data-theme="light"] .sh-close { background:rgba(0,0,0,.06) !important; color:#4a2424 !important; }
[data-theme="light"] .sh-handle { background:rgba(0,0,0,.14) !important; }
[data-theme="light"] .sh-sub   { color:#907272 !important; }

/* ──────────────────────────────────────────────────────────────
   § EXPLORE
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] .exp-brand-hdr { background:#fff !important; border-bottom:1px solid rgba(0,0,0,.08) !important; box-shadow:0 1px 6px rgba(0,0,0,.07) !important; }
[data-theme="light"] .exp-main-tabs { background:#fff !important; border-bottom:1px solid rgba(0,0,0,.08) !important; }
[data-theme="light"] .exp-main-tab    { color:#a08080 !important; }
[data-theme="light"] .exp-main-tab.on { color:#18080a !important; border-bottom-color:#e50914 !important; }
[data-theme="light"] .exp-composer { background:#fff !important; border:1px solid rgba(0,0,0,.08) !important; box-shadow:0 2px 8px rgba(0,0,0,.06) !important; border-radius:16px !important; margin:12px 14px !important; }
[data-theme="light"] .exp-composer-input { background:rgba(0,0,0,.04) !important; color:#18080a !important; }
[data-theme="light"] .exp-composer-input::placeholder { color:#b09090 !important; }
[data-theme="light"] .exp-post { background:#fff !important; border:1px solid rgba(0,0,0,.07) !important; box-shadow:0 2px 10px rgba(0,0,0,.07) !important; border-radius:16px !important; margin:10px 14px !important; }
[data-theme="light"] .exp-post-name  { color:#18080a !important; font-weight:800 !important; }
[data-theme="light"] .exp-post-text  { color:#280f0f !important; line-height:1.65 !important; }
[data-theme="light"] .exp-post-meta  { color:#a08080 !important; }
[data-theme="light"] .exp-post-genre { background:rgba(229,9,20,.08) !important; color:#c0060f !important; font-weight:700 !important; }
[data-theme="light"] .exp-post-likebar { background:rgba(0,0,0,.025) !important; border-top:1px solid rgba(0,0,0,.06) !important; color:#a08080 !important; }
[data-theme="light"] .exp-post-actions { border-top:1px solid rgba(0,0,0,.06) !important; }
[data-theme="light"] .exp-pa-btn       { color:#a08080 !important; }
[data-theme="light"] .exp-pa-btn:hover { background:rgba(0,0,0,.04) !important; }
[data-theme="light"] .exp-pa-btn.liked { color:#e50914 !important; }
[data-theme="light"] .exp-more:hover   { background:rgba(0,0,0,.06) !important; }
[data-theme="light"] .exp-role-musik,
[data-theme="light"] .exp-role-music   { background:rgba(229,9,20,.08)!important; color:#991b1b!important; }
[data-theme="light"] .exp-role-event   { background:rgba(202,138,4,.10)!important; color:#78400a!important; }
[data-theme="light"] .exp-role-studio  { background:rgba(99,88,229,.09)!important; color:#4338ca!important; }
[data-theme="light"] .exp-role-berita,
[data-theme="light"] .exp-role-news    { background:rgba(21,128,61,.09)!important; color:#15803d!important; }
[data-theme="light"] .exp-chip { background:#fff !important; color:#4a2424 !important; border:1.5px solid rgba(0,0,0,.12) !important; font-weight:700 !important; }
[data-theme="light"] .exp-chip.on { background:#e50914 !important; color:#fff !important; border-color:#e50914 !important; box-shadow:0 2px 8px rgba(229,9,20,.28) !important; }
[data-theme="light"] .exp-vtoggle    { background:#fff !important; color:#4a2424 !important; border:1.5px solid rgba(0,0,0,.10) !important; }
[data-theme="light"] .exp-vtoggle.on { background:#e50914 !important; color:#fff !important; }
[data-theme="light"] .exp-comment-body { background:rgba(0,0,0,.04) !important; border-radius:12px !important; }
[data-theme="light"] .exp-grid-cell { background:#fff !important; border:1px solid rgba(0,0,0,.07) !important; box-shadow:0 1px 4px rgba(0,0,0,.05) !important; }

/* ──────────────────────────────────────────────────────────────
   § PROFILE PAGE POSTS — hapus border "kotak" di nama
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] .pposts-card { background:#fff !important; border-top:1px solid rgba(0,0,0,.06) !important; border-bottom:none !important; }
[data-theme="light"] .pposts-act-btn { background:rgba(0,0,0,.05) !important; border:none !important; color:#4a2424 !important; border-radius:8px !important; }
[data-theme="light"] .pposts-act-btn:hover { background:rgba(229,9,20,.08) !important; color:#c0060f !important; }
[data-theme="light"] .pposts-act-btn.danger { color:#e50914 !important; }
[data-theme="light"] .pposts-stats { border-top:1px solid rgba(0,0,0,.06) !important; }
[data-theme="light"] .pposts-action-row { border-top:1px solid rgba(0,0,0,.06) !important; }
[data-theme="light"] .pposts-action-btn { color:#a08080 !important; border-right:1px solid rgba(0,0,0,.06) !important; }
[data-theme="light"] .pposts-action-btn:hover { background:rgba(0,0,0,.04) !important; color:#18080a !important; }
[data-theme="light"] .pposts-name { color:#18080a !important; }
[data-theme="light"] .pposts-time { color:#a08080 !important; }
[data-theme="light"] .pposts-text { color:#280f0f !important; }

/* ──────────────────────────────────────────────────────────────
   § SEARCH BAR
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] .srch { background:#fff !important; border:1.5px solid rgba(0,0,0,.12) !important; box-shadow:0 1px 4px rgba(0,0,0,.06) !important; }
[data-theme="light"] .srch input { background:transparent !important; color:#18080a !important; }
[data-theme="light"] .srch input::placeholder { color:#b09090 !important; }

/* ──────────────────────────────────────────────────────────────
   § FORM INPUTS
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] .f-input,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] textarea,
[data-theme="light"] select { background:#fff !important; color:#18080a !important; border:1.5px solid rgba(0,0,0,.14) !important; border-radius:10px !important; }
[data-theme="light"] .f-input:focus,
[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus { border-color:rgba(229,9,20,.45) !important; box-shadow:0 0 0 3px rgba(229,9,20,.09) !important; outline:none !important; }
[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder { color:#b09090 !important; }
[data-theme="light"] .f-label { color:#4a2424 !important; font-weight:700 !important; }
[data-theme="light"] .f-tabs  { background:rgba(0,0,0,.06) !important; }
[data-theme="light"] .f-tab   { color:#a08080 !important; }
[data-theme="light"] .f-tab.on { background:#fff !important; color:#18080a !important; font-weight:800 !important; box-shadow:0 1px 4px rgba(0,0,0,.14) !important; }

/* ──────────────────────────────────────────────────────────────
   § TX STACK (Riwayat Transaksi)
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] div[style*="background:var(--card)"][style*="border-radius:14px"] {
  background:#fff !important; border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.06) !important; margin:0 0 12px !important;
}
[data-theme="light"] div[style*="background:var(--card2)"][style*="border-radius:10px"],
[data-theme="light"] div[onclick*="openInvoice"][style*="background:var(--card2)"] {
  background:#fff !important; border:1px solid rgba(0,0,0,.07) !important; box-shadow:0 1px 3px rgba(0,0,0,.05) !important;
}
[data-theme="light"] div[onclick*="openInvoice"]:hover { background:rgba(229,9,20,.03) !important; }
[data-theme="light"] select[onchange*="setProfStackStatus"],
[data-theme="light"] button[onclick*="setProfStackSort"] { background:#fff !important; border:1px solid rgba(0,0,0,.12) !important; color:#4a2424 !important; font-weight:600 !important; }

/* ──────────────────────────────────────────────────────────────
   § PROFILE PAGE
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] #page-profil              { background:#fef9f9 !important; }
[data-theme="light"] .fb-profile-info          { background:#fef9f9 !important; border-bottom:1px solid rgba(0,0,0,.07) !important; }
[data-theme="light"] .fb-about-card,
[data-theme="light"] .fb-photos-section        { background:#fff !important; }
[data-theme="light"] .fb-profile-tabs          { background:#fef9f9 !important; border-bottom:1px solid rgba(0,0,0,.07) !important; }
[data-theme="light"] #page-profil .prof-topbar { background:#fef9f9 !important; border-bottom:1px solid rgba(0,0,0,.07) !important; }
[data-theme="light"] #profile-name             { color:#18080a !important; font-weight:900 !important; }

/* ──────────────────────────────────────────────────────────────
   § OTHER COMPONENTS
   ────────────────────────────────────────────────────────────── */
[data-theme="light"] .dm-thread-item       { background:#fff !important; border-bottom:1px solid rgba(0,0,0,.06) !important; }
[data-theme="light"] .dm-thread-item:hover { background:rgba(0,0,0,.025) !important; }
[data-theme="light"] .dm-bubble-in         { background:rgba(0,0,0,.07) !important; color:#18080a !important; }
[data-theme="light"] .dm-bubble-out        { background:#e50914 !important; color:#fff !important; }
[data-theme="light"] .notif-item           { background:#fff !important; border-bottom:1px solid rgba(0,0,0,.06) !important; }
[data-theme="light"] .notif-item:hover     { background:rgba(0,0,0,.025) !important; }
[data-theme="light"] .notif-item.unread    { background:rgba(229,9,20,.04) !important; border-left:3px solid rgba(229,9,20,.4) !important; }
[data-theme="light"] .news-card            { background:#fff !important; border:1px solid rgba(0,0,0,.07) !important; box-shadow:0 2px 8px rgba(0,0,0,.06) !important; }
[data-theme="light"] .sawer-card           { background:#fff !important; border:1px solid rgba(0,0,0,.07) !important; box-shadow:0 2px 6px rgba(0,0,0,.06) !important; }
[data-theme="light"] .sawer-name           { color:#18080a !important; font-weight:700 !important; }
[data-theme="light"] .sc-card              { background:#fff !important; }
[data-theme="light"] .sc-tt                { color:#18080a !important; font-weight:700 !important; }
[data-theme="light"] .sc-ar                { color:#907272 !important; }
[data-theme="light"] .toast-msg            { background:#180808 !important; color:#fff !important; box-shadow:0 8px 24px rgba(0,0,0,.22) !important; }
[data-theme="light"] .inv-stamp-lunas      { border-color:#15803d !important; color:#15803d !important; background:rgba(21,128,61,.08) !important; }
[data-theme="light"] .inv-stamp-pending    { border-color:#b45309 !important; color:#b45309 !important; background:rgba(202,138,4,.08) !important; }
[data-theme="light"] .pkg-card             { background:#fff !important; border:1.5px solid rgba(0,0,0,.10) !important; box-shadow:0 2px 8px rgba(0,0,0,.06) !important; }
[data-theme="light"] .pkg-card:hover       { border-color:rgba(229,9,20,.30) !important; box-shadow:0 4px 14px rgba(229,9,20,.10) !important; }
[data-theme="light"] .pkg-card.active,
[data-theme="light"] .pkg-card.selected    { border-color:#e50914 !important; }
[data-theme="light"] #post-action-menu,
[data-theme="light"] #user-search-dd       { background:#fff !important; border:1px solid rgba(0,0,0,.09) !important; box-shadow:0 8px 24px rgba(0,0,0,.14) !important; }
[data-theme="light"] .beranda-post         { background:#fff !important; border:1px solid rgba(0,0,0,.07) !important; box-shadow:0 2px 10px rgba(0,0,0,.07) !important; border-radius:16px !important; margin:10px 14px !important; }
[data-theme="light"] .li                   { background:#fff !important; border:1px solid rgba(0,0,0,.07) !important; }
[data-theme="light"] .sec-t                { color:#18080a !important; }
[data-theme="light"] .sec-a                { color:#e50914 !important; }

/* Desktop sidebar */
@media (min-width:769px) {
  [data-theme="light"] .dt-sidebar  { background:rgba(254,249,249,.98) !important; border-right:1px solid rgba(0,0,0,.08) !important; }
  [data-theme="light"] .dt-link     { color:#4a2424 !important; }
  [data-theme="light"] .dt-link.on  { background:rgba(229,9,20,.08) !important; color:#e50914 !important; }
  [data-theme="light"] .dt-link:hover { background:rgba(0,0,0,.04) !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FIX v14.20 — Light Mode: teks samar, hover, button login, menu
   ═══════════════════════════════════════════════════════════════ */

/* ── Login button di halaman profil sebelum login ── */
[data-theme="light"] #page-profil .bbt,
[data-theme="light"] .prof-guest .bbt {
  background: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(229,9,20,.25) !important;
}
[data-theme="light"] .bbt:hover {
  background: var(--red-d, #c0000a) !important;
}

/* ── Hover nama album / judul lagu di card musik ── */
[data-theme="light"] .sc-tt {
  color: #18080a !important;
}
[data-theme="light"] .sc-card:hover .sc-tt {
  color: var(--red, #e50914) !important;
}

/* ── 3 Menu beranda (Sawer, Event Music, Business Music) ── */
[data-theme="light"] .ry-mini-lbl {
  color: #18080a !important;
  font-weight: 600;
}
[data-theme="light"] .ry-mini {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.09) !important;
}
[data-theme="light"] .ry-mini:hover {
  background: #f5f0f0 !important;
}

/* ── Footer text ── */
[data-theme="light"] .footer,
[data-theme="light"] footer,
[data-theme="light"] .footer-wrap,
[data-theme="light"] .footer * {
  color: #4a2424 !important;
}
[data-theme="light"] .footer a,
[data-theme="light"] footer a {
  color: #907272 !important;
}
[data-theme="light"] .footer a:hover,
[data-theme="light"] footer a:hover {
  color: var(--red) !important;
}

/* ── Reset pencarian button (musik) ── */
[data-theme="light"] #btn-reset-search {
  background: #ece6e6 !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #4a2424 !important;
}

/* ── Reg role card hover di light mode ── */
[data-theme="light"] .reg-role-card:hover {
  background: rgba(0,0,0,.03) !important;
}
[data-theme="light"] .reg-role-card.on {
  background: rgba(229,9,20,.07) !important;
  border-color: rgba(229,9,20,.35) !important;
}
[data-theme="light"] .reg-role-card.on-composer {
  background: rgba(245,197,24,.10) !important;
  border-color: rgba(200,155,0,.35) !important;
}

/* ── Topbar / Navbar mode toggle & language button ── */
[data-theme="light"] .tb-theme-btn,
[data-theme="light"] .tb-lang-btn,
[data-theme="light"] .theme-toggle-btn,
[data-theme="light"] .lang-toggle-btn {
  color: #18080a !important;
  background: rgba(0,0,0,.05) !important;
  border-color: rgba(0,0,0,.1) !important;
}

/* ── Topbar home: theme & lang btn ukuran lebih kecil supaya tidak makan ruang ── */
#themeBtnHome, #langBtnHome {
  width: 30px !important;
  height: 30px !important;
  font-size: 13px !important;
}
/* Sembunyikan di desktop karena sudah ada di sidebar profile */
@media (min-width: 768px) {
  #themeBtnHome, #langBtnHome { display: none !important; }
}


/* ============================================================
 * PATCH v14.21 — Patch kumulatif v14.21
 * Source: patch-v14.21.css
 * ============================================================ */

/*
 * patch-v14.21.css — Fix kumulatif v14.21
 * ════════════════════════════════════════════════════════════
 *
 * BUGFIX #1 — KRITIS: .btn-s "Masuk" tidak terlihat di light mode
 *   Penyebab: background: var(--card) = #ffffff di light mode, tidak ada
 *   kontras dengan background halaman/section yang juga putih.
 *   Border .5px solid rgba(0,0,0,0.12) terlalu tipis dan transparan.
 *   Fix: Gunakan transparent background + border visible di kedua mode.
 *
 * BUGFIX #2 — pill-outline (tombol Masuk di topbar) tidak terlihat
 *   sama seperti #1 karena border2 terlalu faint di light mode.
 *
 * BUGFIX #3 — Song cards tanpa cover_url menampilkan placeholder
 *   yang terlalu gelap di light mode.
 *
 * IMPROVEMENT: focus state, transition halus, profil btn layout.
 * ════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════
   #1  TOMBOL SEKUNDER (.btn-s) — FIX VISIBILITY
   ══════════════════════════════════════════════════════════ */
.btn-s {
  background: transparent !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  border-color: var(--border2) !important;
  transition: background .15s, border-color .15s, transform .1s !important;
}

/* Light mode: perkuat border agar tidak invisible */
[data-theme="light"] .btn-s {
  border-color: rgba(0, 0, 0, 0.28) !important;
  color: #1a1a1a !important;
}

/* Dark mode: border sudah cukup tapi perkuat sedikit */
[data-theme="dark"] .btn-s {
  border-color: rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
}

.btn-s:active,
.btn-s:focus-visible {
  background: var(--card2) !important;
  border-color: var(--red) !important;
  outline: none;
}

.btn-s:hover {
  background: var(--card2) !important;
  border-color: rgba(229, 9, 20, 0.5) !important;
}

/* ══════════════════════════════════════════════════════════
   #1b  PROFIL PAGE — btn area layout
   ══════════════════════════════════════════════════════════ */
.prof-btns {
  gap: 10px !important;
}

/* Pastikan kedua tombol di profil punya tinggi sama */
.prof-btns .btn-s,
.prof-btns .btn-p {
  flex: 1 !important;
  margin-bottom: 0 !important;
  min-height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 13px !important;
}

/* ══════════════════════════════════════════════════════════
   #2  PILL OUTLINE (topbar Masuk button) — FIX VISIBILITY
   ══════════════════════════════════════════════════════════ */
.pill-outline {
  background: transparent !important;
  border-width: 1.5px !important;
  transition: background .15s, border-color .15s !important;
}

[data-theme="light"] .pill-outline {
  border-color: rgba(0, 0, 0, 0.28) !important;
  color: #1a1a1a !important;
}

[data-theme="dark"] .pill-outline {
  border-color: rgba(255, 255, 255, 0.30) !important;
  color: #ffffff !important;
}

.pill-outline:hover,
.pill-outline:focus-visible {
  background: var(--card2) !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
  outline: none;
}

/* ══════════════════════════════════════════════════════════
   #3  SONG CARD PLACEHOLDER — lebih baik di light mode
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .sc-img[style*="svg+xml"],
[data-theme="light"] .li-img[style*="svg+xml"] {
  background-color: #e8e8ed !important;
}

/* ══════════════════════════════════════════════════════════
   #4  FORM INPUTS — pastikan visible di light mode
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .f-inp,
[data-theme="light"] .f-sel,
[data-theme="light"] .f-ta {
  background: #f7f7f9 !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
  color: #0d0d0d !important;
}

[data-theme="light"] .f-inp:focus,
[data-theme="light"] .f-sel:focus,
[data-theme="light"] .f-ta:focus {
  border-color: var(--red) !important;
  background: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════
   #5  BTN-P (tombol primer merah) — pastikan konsisten
   ══════════════════════════════════════════════════════════ */
.btn-p {
  transition: background .15s, transform .1s !important;
}

.btn-p:hover {
  background: var(--red-d) !important;
}

.btn-p:active {
  transform: scale(0.98) !important;
}

/* ══════════════════════════════════════════════════════════
   #6  TOGGLE BUTTONS (theme/lang) — lebih visible
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .toggle-btn {
  background: rgba(0, 0, 0, 0.07) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
  color: #0d0d0d !important;
}

/* ══════════════════════════════════════════════════════════
   #7  BERANDA SECTION — judul section visible
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .sec-t {
  color: #0d0d0d !important;
}

[data-theme="light"] .sec-a {
  color: var(--red) !important;
}

/* ══════════════════════════════════════════════════════════
   #8  TOPBAR — prof-topbar di light mode
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .prof-topbar-title {
  color: #0d0d0d !important;
}

[data-theme="light"] .prof-topbar-sub {
  color: #6e6e80 !important;
}

/* ══════════════════════════════════════════════════════════
   #9  BEN-CARD (benefits section di profil) — border visible
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .ben-card {
  border-color: rgba(0, 0, 0, 0.10) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

[data-theme="light"] .ben-t {
  color: #0d0d0d !important;
  font-weight: 700 !important;
}

[data-theme="light"] .ben-s {
  color: #6e6e80 !important;
}

/* ══════════════════════════════════════════════════════════
   #10  PROFIL HERO — logo & teks visible
   ══════════════════════════════════════════════════════════ */
.prof-hero-t {
  line-height: 1.25 !important;
  letter-spacing: -0.3px !important;
}

/* ══════════════════════════════════════════════════════════
   #11  GENERAL — pastikan card di light mode punya shadow
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .card,
[data-theme="light"] .ben-card,
[data-theme="light"] .li {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06) !important;
}

/* ══════════════════════════════════════════════════════════
   #12  BOTTOM NAV — label visible di light mode
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] .nl {
  color: #6e6e80 !important;
}

[data-theme="light"] .nl.on {
  color: var(--red) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════
   #13  SCROLLBAR — hilangkan di light mode (lebih bersih)
   ══════════════════════════════════════════════════════════ */
[data-theme="light"] ::-webkit-scrollbar {
  width: 3px;
}

[data-theme="light"] ::-webkit-scrollbar-track {
  background: transparent;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}


/* Utility */
.pad { padding: 16px; }
.pad-sm { padding: 8px; }
.pad-lg { padding: 24px; }