/*!
 * OrangPerak — app.css  ·  SATU fail CSS untuk seluruh tapak
 * ============================================================
 * Disusun ikut seksyen. Lapisan SHELL dahulu (base, topbar, sidebar,
 * layout, footer). Seksyen modul ditambah semasa migrasi Fasa 1/2.
 *
 * PETA SEKSYEN:
 *   1. BASE / VARIABLES / GLOBAL   (dari style.css)
 *   2. TOPBAR                       (dari topbar.css)
 *   3. SIDEBAR                      (dari sidebar.css)
 *   4. LAYOUT (shell)               (baharu — dipusatkan)
 *   5. FOOTER (.op-foot*)           (baharu)
 *   -- MODUL akan disambung di bawah ini semasa Fasa 1/2 --
 */


/* ========================================================================
   1. BASE / VARIABLES / GLOBAL  —  asal: style.css
   ======================================================================== */

:root {
  /* === TEMA CERAH KUNING PUTIH === */
  --pt-kuning:      #F0B90B;
  --pt-kuning-dk:   #C99A0A;
  --pt-kuning-cerah:#FFFBEA;
  --pt-kuning-glow: rgba(240,185,11,.18);
  --pt-kuning-mid:  #FDE68A;
  --pt-kuning-pale: #FFFDF0;

  --pt-putih:       #FFFFFF;
  --pt-krim:        #FAFAF5;
  --pt-krim-2:      #FFFBEA;

  --pt-hitam:       #1A1A1A;
  --pt-hitam-2:     #2D2D2D;
  --pt-abu:         #7A7A7A;
  --pt-abu-muda:    #F5F5F0;
  --pt-border:      #E8E4D0;
  --pt-border-dk:   #D4CEB4;

  --pt-merah:       #DC2626;
  --pt-hijau:       #059669;
  --pt-biru:        #1D4ED8;

  --navbar-h:     64px;
  --wrap:         1200px;   /* lebar frame kanonikal — container + jalur header + footer */
  --r-card:       14px;
  --r-sm:         8px;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:    0 4px 20px rgba(0,0,0,.08);
  --shadow-lg:    0 8px 36px rgba(0,0,0,.12);
  --transition:   .18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  color: var(--pt-hitam);
  background: var(--pt-krim);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--pt-kuning); border-radius: 99px; }

/* ===== NAVBAR - CERAH ===== */
.pt-nav {
  background: var(--pt-putih);
  height: var(--navbar-h);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 3px solid var(--pt-kuning);
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* ===== LOGO BARU ===== */
.pt-brand {
  display: flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}
.pt-brand-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--pt-hitam);
  line-height: 1;
}
.pt-brand-text span {
  color: var(--pt-kuning-dk);
}
.pt-brand-dot {
  width: 8px;
  height: 8px;
  background: var(--pt-kuning);
  border-radius: 50%;
  margin-left: 2px;
  margin-bottom: 10px;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(240,185,11,.2);
}

.nav-link-pt {
  color: var(--pt-abu) !important;
  font-size: .82rem;
  font-weight: 600;
  padding: 5px 10px !important;
  border-radius: 6px;
  transition: var(--transition);
}
.nav-link-pt:hover { color: var(--pt-hitam) !important; background: var(--pt-kuning-cerah); }
.nav-link-pt.active { color: var(--pt-hitam) !important; font-weight: 700; }

.btn-nav-login {
  background: transparent;
  border: 1.5px solid var(--pt-border-dk);
  color: var(--pt-hitam);
  font-size: .78rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 7px;
  transition: var(--transition);
  cursor: pointer;
}
.btn-nav-login:hover { background: var(--pt-abu-muda); border-color: var(--pt-kuning); }

.btn-nav-daftar {
  background: var(--pt-kuning);
  border: none;
  color: var(--pt-hitam);
  font-size: .78rem;
  font-weight: 800;
  padding: 5px 16px;
  border-radius: 7px;
  transition: var(--transition);
  cursor: pointer;
}
.btn-nav-daftar:hover { background: var(--pt-kuning-dk); }

/* ===== TICKER MERAH ===== */
.pt-ticker {
  background: #DC2626;
  padding: 7px 0;
  overflow: hidden;
}
.pt-ticker-label {
  background: rgba(0,0,0,.2);
  color: #fff;
  font-size: .67rem;
  font-weight: 800;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 5px;
  flex-shrink: 0;
  letter-spacing: .7px;
  white-space: nowrap;
}
.ticker-track {
  display: flex;
  gap: 48px;
  animation: tickerScroll 45s linear infinite;
  white-space: nowrap;
  will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item { font-size: .78rem; color: #fff; font-weight: 600; flex: 0 0 auto; }
.ticker-item span { color: rgba(255,255,255,.5); font-weight: 800; margin-right: 6px; font-size: .6rem; }
.ticker-link { text-decoration: none; color: #fff; transition: color .15s ease; }
.ticker-link:hover,
.ticker-link:focus-visible { color: var(--pt-kuning-mid, #F0B90B); text-decoration: none; }
.ticker-link:hover span { color: rgba(255,255,255,.8); }

/* ===== INFO STRIP CERAH ===== */
.pt-infostrip {
  background: var(--pt-kuning-cerah);
  border-bottom: 1.5px solid var(--pt-kuning-mid);
  padding: 9px 0;
}
.solat-daerah-select {
  font-size: .76rem;
  font-weight: 700;
  border: 1.5px solid var(--pt-kuning-mid);
  border-radius: 7px;
  padding: 4px 10px;
  color: var(--pt-hitam);
  background: var(--pt-putih);
  cursor: pointer;
  transition: var(--transition);
  outline: none;
}
.solat-daerah-select:focus { border-color: var(--pt-kuning-dk); }

.waktu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 10px;
  border-radius: 8px;
  transition: var(--transition);
}
.waktu-item .name { font-size: .6rem; color: var(--pt-abu); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.waktu-item .time { font-size: .82rem; font-weight: 800; color: var(--pt-hitam); }
.waktu-item.solat-next { background: var(--pt-putih); padding: 4px 12px; border: 1.5px solid var(--pt-kuning); box-shadow: 0 2px 8px rgba(240,185,11,.25); }
.waktu-item.solat-next .name { color: var(--pt-kuning-dk); }
.waktu-item.solat-next .time { color: #7A5C00; }

.cuaca-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--pt-putih);
  border: 1.5px solid var(--pt-kuning-mid);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: .78rem;
  font-weight: 700;
  color: #7A5C00;
  white-space: nowrap;
}

/* ===== HERO CERAH ===== */
.pt-hero {
  background: linear-gradient(160deg, var(--pt-kuning-cerah) 0%, #FFF8D6 40%, var(--pt-putih) 100%);
  padding: 64px 0 52px;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--pt-kuning-mid);
}
.pt-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(ellipse at 80% 20%, rgba(240,185,11,.15) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 80%, rgba(240,185,11,.08) 0%, transparent 50%);
  pointer-events: none;
}
.pt-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23F0B90B' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
  pointer-events: none;
}

.pt-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(240,185,11,.15);
  border: 1px solid rgba(240,185,11,.4);
  color: #7A5C00;
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 99px;
  letter-spacing: .4px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.pt-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 5vw, 3.1rem);
  color: var(--pt-hitam);
  line-height: 1.18;
  margin-bottom: 16px;
  letter-spacing: -.5px;
}
.pt-hero h1 span { color: var(--pt-kuning-dk); }
.pt-hero p { color: var(--pt-abu); font-size: .93rem; max-width: 540px; margin: 0 auto 30px; line-height: 1.7; }

.pt-searchbar {
  background: var(--pt-putih);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.1), 0 0 0 2px rgba(240,185,11,.3);
  max-width: 760px;
  margin: 0 auto 28px;
  border: 1.5px solid var(--pt-kuning-mid);
}
.pt-searchbar input,
.pt-searchbar select { border: 0; background: transparent; font-size: .87rem; color: var(--pt-hitam); padding: 15px 4px; outline: none; font-family: 'Plus Jakarta Sans', sans-serif; }
.pt-searchbar select { cursor: pointer; }
.pt-searchbar .divider { width: 1px; background: var(--pt-border); margin: 10px 0; }
.btn-cari { background: var(--pt-kuning); color: var(--pt-hitam); font-weight: 800; font-size: .85rem; border: none; padding: 0 26px; transition: var(--transition); white-space: nowrap; cursor: pointer; }
.btn-cari:hover { background: var(--pt-kuning-dk); }

.hero-stat .val { font-size: 1.45rem; font-weight: 800; color: var(--pt-kuning-dk); line-height: 1; letter-spacing: -.5px; }
.hero-stat .lbl { font-size: .68rem; color: var(--pt-abu); font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: .6px; }
.hero-stat-div { width: 1px; height: 32px; background: var(--pt-border); }

/* ===== CATEGORY PILLS ===== */
.pt-catbar {
  background: var(--pt-putih);
  border-bottom: 1px solid var(--pt-border);
  padding: 10px 0;
  position: sticky;
  top: var(--navbar-h);
  z-index: 900;
}
.pt-catscroll { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.pt-catscroll::-webkit-scrollbar { display: none; }

.pt-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--pt-abu-muda);
  border: 1px solid var(--pt-border);
  color: var(--pt-abu);
  font-size: .76rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 99px;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
}
.pt-pill:hover { background: var(--pt-kuning-cerah); color: var(--pt-hitam); border-color: var(--pt-kuning-mid); }
.pt-pill.active { background: var(--pt-kuning); color: var(--pt-hitam); border-color: transparent; box-shadow: 0 2px 8px rgba(240,185,11,.3); }

/* ===== SECTION TITLES ===== */
.pt-sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.pt-sec-title { font-family: 'Playfair Display', serif; font-size: 1.35rem; color: var(--pt-hitam); line-height: 1.2; white-space: nowrap; letter-spacing: -.2px; }
.pt-sec-title span { color: var(--pt-kuning-dk); }
.pt-sec-line { flex: 1; height: 2px; background: linear-gradient(90deg, var(--pt-kuning) 0%, transparent 100%); min-width: 20px; }
.pt-sec-more {
  font-size: .76rem; font-weight: 700; color: var(--pt-hitam);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px;
  border: 1.5px solid var(--pt-border-dk);
  border-radius: 7px; transition: var(--transition); white-space: nowrap;
}
.pt-sec-more:hover { background: var(--pt-kuning); color: var(--pt-hitam); border-color: var(--pt-kuning); }

/* ===== BADGES ===== */
.pt-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .66rem; font-weight: 700; padding: 3px 9px; border-radius: 5px; text-transform: uppercase; letter-spacing: .4px; }
.pt-badge-kuning { background: #FEF3C7; color: #7A5C00; }
.pt-badge-biru   { background: #DBEAFE; color: #1E40AF; }
.pt-badge-merah  { background: #FEE2E2; color: #9B1C1C; }
.pt-badge-hijau  { background: #D1FAE5; color: #065F46; }
.pt-badge-kelabu { background: #F1F5F9; color: #374151; }
.pt-badge-ungu   { background: #EDE9FE; color: #5B21B6; }
.pt-badge-abs    { position: absolute; top: 8px; right: 8px; }
.pt-badge-strong { font-weight: 800; }
.pt-chip         { display: inline-block; font-size: .65rem; padding: 2px 8px; background: #F1F5F9; color: #475569; border-radius: 4px; }
.filter-tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 5px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  border-radius: 9px;
  background: rgba(0, 0, 0, .08);
}
.filter-tab.active .filter-tab-count { background: rgba(0, 0, 0, .18); }

/* ===== TETAPAN PASAR KARAT ===== */
.pk-set-head   { margin-bottom: 22px; }
.pk-set-head h1 { font-size: 1.35rem; font-weight: 800; margin: 0 0 4px; }
.pk-set-head p  { font-size: .85rem; color: var(--text-muted); margin: 0; }

.pk-set-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 22px;
}
.pk-set-panel h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: .95rem; font-weight: 700; margin: 0 0 6px;
}
.pk-set-hint { font-size: .82rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 18px; }

.pk-set-note {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 14px; border-radius: 9px;
  font-size: .82rem; line-height: 1.55; margin-bottom: 18px;
}
.pk-set-note a { color: inherit; font-weight: 700; text-decoration: underline; }
.pk-set-note.warn { background: #FEF3C7; color: #7A5C00; }
.pk-set-note.err  { background: #FEE2E2; color: #9B1C1C; }

.pk-courier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.pk-courier-item {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: .87rem; font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
.pk-courier-item:hover { border-color: var(--pt-kuning, #F0B90B); }
.pk-courier-item:has(input:checked) {
  border-color: var(--pt-kuning, #F0B90B);
  background: rgba(240, 185, 11, .09);
}
.pk-courier-item input { width: 16px; height: 16px; cursor: pointer; accent-color: #C99A0A; }

.pk-set-actions { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }

/* ===== PROSES PUKAL (Jualan Saya) ===== */
.pk-bulk-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 14px;
}
.pk-bulk-all {
  display: flex; align-items: center; gap: 7px;
  font-size: .83rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.pk-bulk-all input { width: 16px; height: 16px; cursor: pointer; accent-color: #C99A0A; }
.pk-bulk-count { font-size: .8rem; color: var(--text-muted); white-space: nowrap; }
.pk-bulk-sel   { width: auto; min-width: 150px; }
.pk-bulk-note  { font-size: .72rem; color: var(--text-muted); margin-left: auto; }

.pk-bulk-row { display: flex; align-items: flex-start; gap: 12px; }
.pk-bulk-chk {
  width: 17px; height: 17px;
  margin-top: 20px;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: #C99A0A;
}
.pk-bulk-chk:disabled { cursor: not-allowed; opacity: .35; }
.pk-bulk-gap { width: 17px; flex: 0 0 auto; }

@media (max-width: 640px) {
  .pk-bulk-note { margin-left: 0; width: 100%; }
  .pk-bulk-sel  { flex: 1; }
}

/* ===== CARDS ===== */
.pt-card { background: var(--pt-putih); border: 1px solid var(--pt-border); border-radius: var(--r-card); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.pt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--pt-kuning-mid); }
.pt-card-img { position: relative; overflow: hidden; background: var(--pt-abu-muda); }
.pt-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pt-card:hover .pt-card-img img { transform: scale(1.05); }
.pt-card-body { padding: 15px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pt-card-title { font-size: .88rem; font-weight: 700; color: var(--pt-hitam); line-height: 1.45; margin: 6px 0 4px; }
.pt-card-meta { font-size: .71rem; color: var(--pt-abu); display: flex; align-items: center; gap: 4px; }

/* ===== FEATURE ARTICLE ===== */
.pt-article-main { position: relative; border-radius: var(--r-card); overflow: hidden; min-height: 360px; box-shadow: var(--shadow-md); transition: transform var(--transition), box-shadow var(--transition); }
.pt-article-main:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pt-article-main img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .5s ease; }
.pt-article-main:hover img { transform: scale(1.03); }
.pt-article-main-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88) 35%, rgba(0,0,0,.15) 70%, transparent 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 26px; }
.pt-article-main-overlay h3 { font-size: 1.12rem; font-weight: 800; color: #fff; line-height: 1.35; margin: 8px 0 6px; }
.pt-article-main-overlay p { font-size: .76rem; color: rgba(255,255,255,.65); margin: 0; }

/* ===== HORIZONTAL CARD ===== */
.pt-card-h { background: var(--pt-putih); border: 1px solid var(--pt-border); border-radius: 10px; display: flex; gap: 12px; padding: 13px; align-items: flex-start; transition: var(--transition); box-shadow: var(--shadow-sm); }
.pt-card-h:hover { transform: translateX(3px); border-color: var(--pt-kuning-mid); background: var(--pt-kuning-pale); }
.pt-card-h img { width: 82px; height: 82px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--pt-abu-muda); }
.pt-card-h h4 { font-size: .82rem; font-weight: 700; line-height: 1.45; margin-bottom: 5px; color: var(--pt-hitam); }
.pt-card-h span { font-size: .69rem; color: var(--pt-abu); }

/* ===== PASAR KARAT ===== */
.pt-jb { background: var(--pt-putih); border: 1px solid var(--pt-border); border-radius: 10px; overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); box-shadow: var(--shadow-sm); }
.pt-jb:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--pt-kuning-mid); }
.pt-jb-img { position: relative; }
.pt-jb-img img { width: 100%; height: 145px; object-fit: cover; }
.pt-jb-price { position: absolute; bottom: 8px; left: 8px; background: var(--pt-kuning); color: var(--pt-hitam); font-size: .79rem; font-weight: 800; padding: 3px 10px; border-radius: 6px; }
.pt-jb-kondisi { position: absolute; top: 8px; right: 8px; font-size: .63rem; font-weight: 700; padding: 2px 8px; border-radius: 5px; }
.pt-jb-body { padding: 10px 12px 12px; }
.pt-jb-body h4 { font-size: .81rem; font-weight: 700; color: var(--pt-hitam); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.pt-jb-body .loc { font-size: .69rem; color: var(--pt-abu); margin-bottom: 8px; }
.btn-whatsapp { background: #22C55E; color: #fff; border: none; border-radius: 7px; font-size: .74rem; font-weight: 700; padding: 6px 0; width: 100%; cursor: pointer; transition: var(--transition); }
.btn-whatsapp:hover { background: #16A34A; }

/* ===== CUACA CERAH ===== */
.cuaca-card { background: linear-gradient(135deg, var(--pt-kuning) 0%, #F5C842 100%); border-radius: var(--r-card); color: var(--pt-hitam); padding: 22px; position: relative; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--pt-kuning-mid); }
.cuaca-card::before { content: ''; position: absolute; top: -30px; right: -30px; width: 140px; height: 140px; background: rgba(255,255,255,.2); border-radius: 50%; }
.cuaca-temp { font-size: 2.8rem; font-weight: 800; line-height: 1; letter-spacing: -2px; color: var(--pt-hitam); }
.cuaca-desc { font-size: .85rem; opacity: .75; margin-top: 4px; font-weight: 600; }
.cuaca-detail { font-size: .73rem; opacity: .7; font-weight: 600; }

/* ===== DIREKTORI ===== */
.pt-dir-card { background: var(--pt-putih); border: 1px solid var(--pt-border); border-radius: 10px; padding: 15px 16px; display: flex; gap: 13px; align-items: flex-start; transition: var(--transition); box-shadow: var(--shadow-sm); }
.pt-dir-card:hover { border-color: var(--pt-kuning); box-shadow: 0 0 0 2px var(--pt-kuning-glow), var(--shadow-md); }
.pt-dir-logo { width: 50px; height: 50px; border-radius: 10px; background: var(--pt-abu-muda); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0; }
.pt-dir-name { font-size: .87rem; font-weight: 700; margin-bottom: 2px; }
.pt-dir-sub { font-size: .71rem; color: var(--pt-abu); }
.pt-dir-rating { font-size: .72rem; color: var(--pt-kuning-dk); font-weight: 700; }
.btn-ws { background: #22C55E; color: #fff; border: none; padding: 6px 12px; border-radius: 7px; font-size: .75rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; gap: 4px; white-space: nowrap; transition: var(--transition); flex-shrink: 0; }
.btn-ws:hover { background: #16A34A; }

/* ===== KERJA KOSONG ===== */
.pt-job-card { background: var(--pt-putih); border: 1px solid var(--pt-border); border-radius: 10px; padding: 16px; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); box-shadow: var(--shadow-sm); border-left: 3px solid transparent; }
.pt-job-card:hover { border-left-color: var(--pt-kuning); transform: translateX(3px); box-shadow: var(--shadow-md); }
.pt-job-title { font-size: .88rem; font-weight: 700; color: var(--pt-hitam); margin-bottom: 3px; }
.pt-job-co { font-size: .76rem; color: var(--pt-abu); margin-bottom: 10px; }
.pt-job-pill { display: inline-flex; align-items: center; gap: 3px; font-size: .67rem; font-weight: 600; padding: 3px 9px; border-radius: 5px; background: var(--pt-abu-muda); color: var(--pt-abu); }
.pt-job-pill.urgent { background: #FEE2E2; color: var(--pt-merah); }
.pt-job-pill.fulltime { background: #D1FAE5; color: var(--pt-hijau); }
.pt-job-pill.parttime { background: #DBEAFE; color: var(--pt-biru); }

/* ===== SEWA ===== */
.pt-sewa-card { background: var(--pt-putih); border: 1px solid var(--pt-border); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.pt-sewa-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--pt-kuning-mid); }
.pt-sewa-card img { width: 100%; height: 170px; object-fit: cover; transition: transform .5s ease; }
.pt-sewa-card:hover img { transform: scale(1.04); }
.pt-sewa-body { padding: 15px; }
.pt-sewa-price { font-size: 1.05rem; font-weight: 800; color: var(--pt-hitam); letter-spacing: -.3px; }
.pt-sewa-title { font-size: .87rem; font-weight: 700; color: var(--pt-hitam); margin: 5px 0 7px; line-height: 1.4; }

/* ===== ACARA ===== */
.pt-event-card { background: var(--pt-putih); border: 1px solid var(--pt-border); border-radius: 10px; padding: 15px; display: flex; gap: 14px; align-items: center; box-shadow: var(--shadow-sm); transition: var(--transition); }
.pt-event-card:hover { border-color: var(--pt-kuning); box-shadow: 0 0 0 2px var(--pt-kuning-glow), var(--shadow-md); }
.pt-event-date { min-width: 54px; background: var(--pt-kuning); color: var(--pt-hitam); border-radius: 10px; text-align: center; padding: 9px 6px; flex-shrink: 0; }
.pt-event-date .day { font-size: 1.45rem; font-weight: 800; color: var(--pt-hitam); line-height: 1; letter-spacing: -.5px; }
.pt-event-date .mon { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-top: 2px; opacity: .65; }
.pt-event-title { font-size: .84rem; font-weight: 700; margin-bottom: 4px; line-height: 1.35; }
.pt-event-loc { font-size: .71rem; color: var(--pt-abu); }

/* ===== TABS ===== */
.pt-tabs { border-bottom: 1px solid var(--pt-border) !important; gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.pt-tabs::-webkit-scrollbar { display: none; }
.pt-tabs .nav-link { color: var(--pt-abu); font-size: .79rem; font-weight: 700; padding: 8px 16px; border: none; border-bottom: 2px solid transparent; border-radius: 0; white-space: nowrap; transition: var(--transition); background: transparent; cursor: pointer; }
.pt-tabs .nav-link:hover { color: var(--pt-hitam); }
.pt-tabs .nav-link.active { color: var(--pt-hitam); border-bottom-color: var(--pt-kuning); background: none; }

/* ===== CTA BANNER CERAH ===== */
.pt-cta { background: var(--pt-kuning); border-radius: 16px; padding: 40px 36px; position: relative; overflow: hidden; box-shadow: 0 8px 32px rgba(240,185,11,.25); border: 1px solid var(--pt-kuning-dk); }
.pt-cta::before { content: ''; position: absolute; top: -60px; right: -60px; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 70%); pointer-events: none; }
.pt-cta h3 { color: var(--pt-hitam) !important; }
.pt-cta p { color: rgba(0,0,0,.55) !important; }
.pt-cta .pt-hero-tag { background: rgba(0,0,0,.1); border-color: rgba(0,0,0,.2); color: var(--pt-hitam); }

.btn-pt-primary { background: var(--pt-hitam); color: var(--pt-putih); font-weight: 800; border: none; padding: 10px 24px; border-radius: 8px; font-size: .84rem; transition: var(--transition); display: inline-flex; align-items: center; gap: 7px; letter-spacing: .1px; cursor: pointer; }
.btn-pt-primary:hover { background: #333; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.25); }

.btn-pt-outline { background: rgba(255,255,255,.4); color: var(--pt-hitam); font-weight: 700; border: 1.5px solid rgba(0,0,0,.2); padding: 10px 24px; border-radius: 8px; font-size: .84rem; transition: var(--transition); display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.btn-pt-outline:hover { background: rgba(255,255,255,.7); border-color: rgba(0,0,0,.35); color: var(--pt-hitam); }

/* ===== FOOTER ===== */
.pt-footer { background: #1A1A1A; color: rgba(255,255,255,.5); padding: 52px 0 24px; border-top: 3px solid var(--pt-kuning); }
.pt-footer .brand { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.35rem; font-weight: 900; color: var(--pt-putih); letter-spacing: -1px; }
.pt-footer .brand span { color: var(--pt-kuning); }
.pt-footer h5 { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.28); margin-bottom: 16px; }
.pt-footer ul { list-style: none; padding: 0; }
.pt-footer ul li { margin-bottom: 9px; }
.pt-footer ul li a { font-size: .82rem; color: rgba(255,255,255,.5); transition: var(--transition); }
.pt-footer ul li a:hover { color: var(--pt-kuning); }
.pt-footer-bottom { font-size: .73rem; }
.social-icon { width: 34px; height: 34px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.45); font-size: .83rem; transition: var(--transition); }
.social-icon:hover { background: var(--pt-kuning); color: var(--pt-hitam); border-color: var(--pt-kuning); }

/* ===== STICKY MOBILE CTA ===== */
.pt-sticky { position: fixed; bottom: 0; left: 0; right: 0; background: var(--pt-putih); border-top: 2px solid var(--pt-kuning); padding: 10px 16px; z-index: 990; display: flex; gap: 8px; box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
@media (min-width: 992px) { .pt-sticky { display: none !important; } }

/* ===== SERVIS ICONS ===== */
.pt-servis-item { text-align: center; display: block; background: var(--pt-putih); border: 1px solid var(--pt-border); border-radius: 12px; padding: 18px 12px; box-shadow: var(--shadow-sm); transition: var(--transition); color: inherit; }
.pt-servis-item:hover { border-color: var(--pt-kuning); transform: translateY(-2px); box-shadow: 0 0 0 2px var(--pt-kuning-glow), var(--shadow-md); background: var(--pt-kuning-pale); }

/* ===== MISC ===== */
.obj-cover { object-fit: cover; }
.text-clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-clip-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pt-divider { height: 1px; background: linear-gradient(90deg, var(--pt-kuning-cerah), var(--pt-border), var(--pt-kuning-cerah)); }

.tab-pane { display: none; }
.tab-pane.active { display: block; }

@media (max-width: 768px) {
  .pt-hero { padding: 42px 0 36px; }
  .pt-hero h1 { font-size: 1.7rem; }
  .pt-searchbar { border-radius: 12px; }
  .pt-cta { padding: 28px 20px; }
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.solat-aktif { animation: pulse 2.2s ease infinite; }

/* ===== RESUME CARDS ===== */
.pt-resume-card {
  background: var(--pt-putih);
  border: 1px solid var(--pt-border);
  border-radius: var(--r-card);
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.pt-resume-card:hover { border-color: var(--pt-kuning-mid); box-shadow: var(--shadow-md); }
.pt-resume-avatar {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--pt-kuning-cerah);
  color: var(--pt-kuning-dk);
  font-weight: 800;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1.5px solid var(--pt-kuning-mid);
}
.pt-resume-name  { font-size: .87rem; font-weight: 700; color: var(--pt-hitam); line-height: 1.3; }
.pt-resume-title { font-size: .76rem; color: var(--pt-abu); margin: 2px 0; line-height: 1.4; }
.pt-resume-loc   { font-size: .71rem; color: var(--pt-abu); }
.pt-resume-btn {
  font-size: .74rem; font-weight: 700;
  background: var(--pt-kuning-cerah);
  color: var(--pt-kuning-dk);
  border: 1px solid var(--pt-kuning-mid);
  border-radius: 7px;
  padding: 5px 12px;
  text-decoration: none;
  transition: var(--transition);
  white-space: nowrap;
}
.pt-resume-btn:hover { background: var(--pt-kuning); color: var(--pt-hitam); }

/* ===== BTN OUTLINE DARK (untuk background cerah) ===== */
.btn-pt-outline-dark {
  background: transparent;
  color: var(--pt-hitam);
  font-weight: 700;
  border: 1.5px solid var(--pt-border-dk);
  padding: 10px 24px;
  border-radius: 8px;
  font-size: .84rem;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  text-decoration: none;
}
.btn-pt-outline-dark:hover { background: var(--pt-kuning-cerah); border-color: var(--pt-kuning); color: var(--pt-hitam); }

/* ===== NAV USER AVATAR & DROPDOWN ===== */
.nav-user-wrap { position: relative; }
.nav-user-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--pt-kuning);
  color: var(--pt-hitam);
  font-weight: 800;
  font-size: .82rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  border: 2px solid var(--pt-kuning-dk);
  transition: var(--transition);
  position: relative;
  flex-shrink: 0;
}
.nav-user-avatar:hover { box-shadow: 0 0 0 3px var(--pt-kuning-glow); }
.nav-user-dropdown {
  position: absolute;
  top: calc(var(--navbar-h) - 4px);
  right: 0;
  background: var(--pt-putih);
  border: 1.5px solid var(--pt-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  min-width: 210px;
  padding: 10px 0;
  z-index: 2000;
}
.nav-user-dropdown .nav-user-info {
  padding: 6px 16px 8px;
  font-size: .78rem;
  color: var(--pt-hitam);
  line-height: 1.5;
}
.nav-user-dropdown .nav-user-info span { color: var(--pt-abu); font-size: .72rem; }
.nav-user-dropdown a {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-size: .81rem;
  font-weight: 600;
  color: var(--pt-hitam);
  transition: background .15s;
  text-decoration: none;
}
.nav-user-dropdown a:hover { background: var(--pt-kuning-cerah); }

/* ===== STICKY WRAPPER ===== */
.pt-sticky .btn-pt-outline-dark {
  border: 1.5px solid var(--pt-border-dk);
  color: var(--pt-hitam);
  justify-content: center;
  flex-grow: 1;
}

/* ===== SOLAT WRAP MOBILE ===== */
@media (max-width: 576px) {
  .solat-wrap { max-width: calc(100vw - 200px); }
}

/* ===================================================
   ADSENSE AD SLOTS
   =================================================== */

/* Wrapper utama semua slot */
.ad-slot {
  position: relative;
  text-align: center;
  clear: both;
  overflow: hidden;
}

/* Label "Iklan" kecil atas setiap slot */
.ad-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--pt-abu);
  margin-bottom: 5px;
  opacity: .6;
}

/* Leaderboard — 728x90, responsive */
.ad-leaderboard {
  background: var(--pt-abu-muda);
  border: 1px dashed var(--pt-border-dk);
  border-radius: var(--r-card);
  padding: 14px 20px;
  margin: 0 0 32px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* In-Article — fluid, masuk dalam content flow */
.ad-inarticle {
  background: var(--pt-krim);
  border-top: 1px solid var(--pt-border);
  border-bottom: 1px solid var(--pt-border);
  padding: 18px 0;
  margin: 0 0 32px;
  min-height: 90px;
}

/* Multiplex / Discovery — grid gaya artikel */
.ad-multiplex {
  background: var(--pt-abu-muda);
  border: 1px dashed var(--pt-border-dk);
  border-radius: var(--r-card);
  padding: 16px;
  margin: 0 0 32px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Rectangle 300x250 — tengah halaman */
.ad-rect {
  margin: 0 auto 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 270px;
}

/* Preview placeholder (kelihatan sebelum AdSense load) */
.ad-slot ins.adsbygoogle {
  background: transparent;
}

/* Sembunyikan slot kosong supaya tak ada ruang putih */
.ad-slot:empty,
.ad-slot ins[data-ad-status="unfilled"] {
  display: none;
}

/* Mobile: leaderboard jadi responsive sepenuhnya */
@media (max-width: 767px) {
  .ad-leaderboard {
    padding: 10px;
    min-height: 70px;
  }
  .ad-rect {
    min-height: auto;
  }
  .ad-rect ins.adsbygoogle {
    width: 100% !important;
    height: auto !important;
  }
}

/* ===== STICKY BOTTOM AD (Mobile) ===== */
/* Letak sebelum .pt-sticky dalam HTML untuk anchor ad mobile */
.ad-sticky-mobile {
  display: none;
}
@media (max-width: 991px) {
  .ad-sticky-mobile {
    display: flex;
    position: fixed;
    bottom: 64px; /* atas .pt-sticky */
    left: 0; right: 0;
    background: rgba(255,255,255,.97);
    border-top: 1px solid var(--pt-border);
    justify-content: center;
    align-items: center;
    padding: 4px 0;
    z-index: 989;
    box-shadow: 0 -2px 8px rgba(0,0,0,.06);
    min-height: 54px;
  }
  .ad-sticky-mobile .ad-close {
    position: absolute;
    top: 3px; right: 8px;
    font-size: .65rem;
    color: var(--pt-abu);
    cursor: pointer;
    padding: 2px 6px;
    background: var(--pt-abu-muda);
    border-radius: 4px;
    font-weight: 700;
    line-height: 1.4;
  }
}

/* ============================================================
   Lapisan grid + utiliti + ikon (ganti Bootstrap & Font Awesome)
   Ditambah untuk PageSpeed — buang pergantungan CDN
   ============================================================ */

.ic{width:1em;height:1em;fill:currentColor;display:inline-block;vertical-align:-.125em;flex-shrink:0}
.ic-xs{width:.75em;height:.75em}
.ic-sm{width:.875em;height:.875em}
.ic-lg{width:1.333em;height:1.333em}
.ic-2x{width:2em;height:2em}
.ic-3x{width:3em;height:3em}

.container{width:100%;margin-right:auto;margin-left:auto;padding-right:12px;padding-left:12px}
@media(min-width:576px){.container{max-width:540px}}
@media(min-width:768px){.container{max-width:720px}}
@media(min-width:992px){.container{max-width:960px}}
@media(min-width:1200px){.container{max-width:var(--wrap)}}
@media(min-width:1400px){.container{max-width:var(--wrap)}}

.row{--g:1rem;display:flex;flex-wrap:wrap;margin-top:calc(-1*var(--g));margin-right:calc(-.5*var(--g));margin-left:calc(-.5*var(--g))}
.row>*{box-sizing:border-box;padding-right:calc(.5*var(--g));padding-left:calc(.5*var(--g));margin-top:var(--g)}
.g-0{--g:0}.g-1{--g:.25rem}.g-2{--g:.5rem}.g-3{--g:1rem}.g-4{--g:1.5rem}
/* Kolum asas */
.col-6{flex:0 0 auto;width:50%}
.col-12{flex:0 0 auto;width:100%}
@media(min-width:576px){
.col-sm-4{flex:0 0 auto;width:33.333333%}
.col-sm-6{flex:0 0 auto;width:50%}
}
@media(min-width:768px){
.col-md-2{flex:0 0 auto;width:16.666667%}
.col-md-3{flex:0 0 auto;width:25%}
.col-md-4{flex:0 0 auto;width:33.333333%}
.col-md-5{flex:0 0 auto;width:41.666667%}
.col-md-6{flex:0 0 auto;width:50%}
.col-md-7{flex:0 0 auto;width:58.333333%}
}
@media(min-width:992px){
.col-lg-2{flex:0 0 auto;width:16.666667%}
.col-lg-3{flex:0 0 auto;width:25%}
.col-lg-4{flex:0 0 auto;width:33.333333%}
.col-lg-5{flex:0 0 auto;width:41.666667%}
.col-lg-6{flex:0 0 auto;width:50%}
.col-lg-7{flex:0 0 auto;width:58.333333%}
.col-lg-9{flex:0 0 auto;width:75%}
}

.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}
.tab-content>.tab-pane{display:none}
.tab-content>.active{display:block}

.d-none{display:none!important}.d-block{display:block!important}.d-flex{display:flex!important}
.d-inline-flex{display:inline-flex!important}.d-inline-block{display:inline-block!important}
@media(min-width:576px){.d-sm-block{display:block!important}}
@media(min-width:768px){.d-md-flex{display:flex!important}.d-md-block{display:block!important}}
@media(min-width:992px){.d-lg-flex{display:flex!important}.d-lg-none{display:none!important}}

.flex-wrap{flex-wrap:wrap!important}.flex-column{flex-direction:column!important}
.flex-grow-1{flex-grow:1!important}.flex-fill{flex:1 1 auto!important}
.align-items-center{align-items:center!important}.align-items-start{align-items:flex-start!important}
.justify-content-between{justify-content:space-between!important}.justify-content-center{justify-content:center!important}
@media(min-width:768px){.justify-content-md-end{justify-content:flex-end!important}}
.gap-1{gap:.25rem!important}.gap-2{gap:.5rem!important}.gap-3{gap:1rem!important}.gap-4{gap:1.5rem!important}

.text-center{text-align:center!important}.text-nowrap{white-space:nowrap!important}
.text-muted{color:var(--pt-abu)!important}.text-warning{color:var(--pt-kuning-dk)!important}.text-white{color:#fff!important}
.fw-bold{font-weight:700!important}.small{font-size:.875em}
.m-0{margin:0!important}
.m-1{margin:.25rem!important}
.m-2{margin:.5rem!important}
.m-3{margin:1rem!important}
.m-4{margin:1.5rem!important}
.m-5{margin:3rem!important}
.mt-0{margin-top:0!important}
.mt-1{margin-top:.25rem!important}
.mt-2{margin-top:.5rem!important}
.mt-3{margin-top:1rem!important}
.mt-4{margin-top:1.5rem!important}
.mt-5{margin-top:3rem!important}
.mb-0{margin-bottom:0!important}
.mb-1{margin-bottom:.25rem!important}
.mb-2{margin-bottom:.5rem!important}
.mb-3{margin-bottom:1rem!important}
.mb-4{margin-bottom:1.5rem!important}
.mb-5{margin-bottom:3rem!important}
.ms-0{margin-left:0!important}
.ms-1{margin-left:.25rem!important}
.ms-2{margin-left:.5rem!important}
.ms-3{margin-left:1rem!important}
.ms-4{margin-left:1.5rem!important}
.ms-5{margin-left:3rem!important}
.me-0{margin-right:0!important}
.me-1{margin-right:.25rem!important}
.me-2{margin-right:.5rem!important}
.me-3{margin-right:1rem!important}
.me-4{margin-right:1.5rem!important}
.me-5{margin-right:3rem!important}
.mx-0{margin-left:0!important;margin-right:0!important}
.mx-1{margin-left:.25rem!important;margin-right:.25rem!important}
.mx-2{margin-left:.5rem!important;margin-right:.5rem!important}
.mx-3{margin-left:1rem!important;margin-right:1rem!important}
.mx-4{margin-left:1.5rem!important;margin-right:1.5rem!important}
.mx-5{margin-left:3rem!important;margin-right:3rem!important}
.my-0{margin-top:0!important;margin-bottom:0!important}
.my-1{margin-top:.25rem!important;margin-bottom:.25rem!important}
.my-2{margin-top:.5rem!important;margin-bottom:.5rem!important}
.my-3{margin-top:1rem!important;margin-bottom:1rem!important}
.my-4{margin-top:1.5rem!important;margin-bottom:1.5rem!important}
.my-5{margin-top:3rem!important;margin-bottom:3rem!important}
.p-0{padding:0!important}
.p-1{padding:.25rem!important}
.p-2{padding:.5rem!important}
.p-3{padding:1rem!important}
.p-4{padding:1.5rem!important}
.p-5{padding:3rem!important}
.pt-0{padding-top:0!important}
.pt-1{padding-top:.25rem!important}
.pt-2{padding-top:.5rem!important}
.pt-3{padding-top:1rem!important}
.pt-4{padding-top:1.5rem!important}
.pt-5{padding-top:3rem!important}
.pb-0{padding-bottom:0!important}
.pb-1{padding-bottom:.25rem!important}
.pb-2{padding-bottom:.5rem!important}
.pb-3{padding-bottom:1rem!important}
.pb-4{padding-bottom:1.5rem!important}
.pb-5{padding-bottom:3rem!important}
.ps-0{padding-left:0!important}
.ps-1{padding-left:.25rem!important}
.ps-2{padding-left:.5rem!important}
.ps-3{padding-left:1rem!important}
.ps-4{padding-left:1.5rem!important}
.ps-5{padding-left:3rem!important}
.pe-0{padding-right:0!important}
.pe-1{padding-right:.25rem!important}
.pe-2{padding-right:.5rem!important}
.pe-3{padding-right:1rem!important}
.pe-4{padding-right:1.5rem!important}
.pe-5{padding-right:3rem!important}
.px-0{padding-left:0!important;padding-right:0!important}
.px-1{padding-left:.25rem!important;padding-right:.25rem!important}
.px-2{padding-left:.5rem!important;padding-right:.5rem!important}
.px-3{padding-left:1rem!important;padding-right:1rem!important}
.px-4{padding-left:1.5rem!important;padding-right:1.5rem!important}
.px-5{padding-left:3rem!important;padding-right:3rem!important}
.py-0{padding-top:0!important;padding-bottom:0!important}
.py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}
.py-2{padding-top:.5rem!important;padding-bottom:.5rem!important}
.py-3{padding-top:1rem!important;padding-bottom:1rem!important}
.py-4{padding-top:1.5rem!important;padding-bottom:1.5rem!important}
.py-5{padding-top:3rem!important;padding-bottom:3rem!important}
.mx-auto{margin-left:auto!important;margin-right:auto!important}

.w-100{width:100%!important}.h-100{height:100%!important}
.position-relative{position:relative!important}
.border{border:1px solid var(--pt-border)!important}.border-0{border:0!important}
.border-top{border-top:1px solid var(--pt-border)!important}.border-bottom{border-bottom:1px solid var(--pt-border)!important}
.rounded{border-radius:.375rem!important}.rounded-3{border-radius:.5rem!important}
.overflow-hidden{overflow:hidden!important}

/* Lang switch — home nav */
.home-lang-switch { display:inline-flex; border:1px solid var(--pt-border-dk); border-radius:20px; overflow:hidden; background:#fff; }
.home-lang-switch a { padding:3px 10px; font-size:.72rem; font-weight:700; color:var(--pt-abu); text-decoration:none; transition:background .2s,color .2s; }
.home-lang-switch a.active { background:#F0B90B; color:#1a1a2e; }

/* ── WIDGET PROMO PASAR KARAT (sidebar kanan sticky) ── */
.pk-promo { position: fixed; top: calc(var(--op-head-h, 176px) + 12px); right: 14px; width: 234px; z-index: 40; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 10px 30px rgba(15,23,42,.12); overflow: hidden; font-family: 'Plus Jakarta Sans', sans-serif; }
.pk-promo-head { display: flex; align-items: center; justify-content: space-between; background: #FFFBEA; border-bottom: 1px solid #F5E6B8; padding: .55rem .8rem; font-size: .8rem; font-weight: 800; color: #92700a; }
.pk-promo-x { background: none; border: none; font-size: 1.1rem; line-height: 1; color: #b8860b; cursor: pointer; padding: 0 2px; }
.pk-promo-list { max-height: 58vh; overflow-y: auto; padding: .5rem; display: flex; flex-direction: column; gap: 6px; }
.pk-promo-item { display: flex; gap: 6px; align-items: center; padding: 5px; border-radius: 9px; transition: background .15s; }
.pk-promo-item:hover { background: #f8fafc; }
.pk-promo-link { display: flex; gap: 8px; align-items: center; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.pk-promo-cart { flex-shrink: 0; width: 28px; height: 28px; border: 1.5px solid #F0B90B; border-radius: 7px; background: #FFFBEB; color: #C99A0A; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .72rem; transition: all .15s; }
.pk-promo-cart:hover { background: #F0B90B; color: #1a1a2e; }
.pk-promo-img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #f1f5f9; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.pk-promo-noimg { font-size: 1rem; }
.pk-promo-info { min-width: 0; display: flex; flex-direction: column; }
.pk-promo-name { font-size: .76rem; font-weight: 600; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-promo-price { font-size: .74rem; font-weight: 800; color: #C99A0A; }
.pk-promo-all { display: block; text-align: center; font-size: .74rem; font-weight: 700; color: #92700a; text-decoration: none; padding: .55rem; border-top: 1px solid #f1f5f9; }
.pk-promo-all:hover { background: #FFFBEA; }
@media (max-width: 1279px) { .pk-promo { display: none; } }

/* ========================================================================
   2. TOPBAR  —  asal: topbar.css
   ======================================================================== */


/* ── Mod public: brand + nav links + butang tetamu ───────── */
.tb-brand{font-weight:800;font-size:1.05rem;color:#1a1a2e;text-decoration:none;display:flex;align-items:center;gap:6px;flex-shrink:0}
.tb-brand span{color:#F0B90B}
.tb-navlinks{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.tb-navlinks a{font-size:.78rem;font-weight:600;color:#64748b;text-decoration:none;padding:6px 10px;border-radius:6px;white-space:nowrap;transition:color .15s,background .15s}
.tb-navlinks a:hover{color:#1a1a2e;background:#f8fafc}
.tb-navlinks a.active{color:#1a1a2e;background:#FEF9E7;font-weight:700}
.tb-guest-btn{font-size:.78rem;font-weight:700;text-decoration:none;padding:6px 14px;border-radius:8px;transition:all .15s}
.tb-login{color:#1a1a2e;border:1.5px solid #e5e7ef}
.tb-login:hover{border-color:#F0B90B;color:#F0B90B}
.tb-daftar{color:#1a1a2e;background:#F0B90B}
.tb-daftar:hover{opacity:.85}
@media(max-width:900px){.tb-navlinks{display:none}}

/* ── Pautan ikon (cart / notifikasi) ─────────────────────── */
.tb-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:6px;color:var(--text,#1a1a2e);text-decoration:none;background:none;border:none;cursor:pointer}
.tb-cart i{font-size:1.05rem}
.tb-notif-btn i{font-size:1.1rem}

/* ── Lencana (badge) ─────────────────────────────────────── */
.tb-badge{position:absolute;top:0;right:0;font-size:.6rem;min-width:16px;height:16px;border-radius:20px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.tb-badge--gold{background:#F0B90B;color:#1a1a2e;font-weight:800}
.tb-badge--red{background:#EF4444;color:#fff}

/* ── Dropdown notifikasi ─────────────────────────────────── */
.tb-notif-wrap{position:relative}
.tb-notif-dropdown{position:absolute;right:0;top:calc(100% + 8px);background:var(--white,#fff);border:1px solid var(--border,#E5E7EB);border-radius:12px;box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.12));width:340px;max-height:440px;overflow-y:auto;z-index:200}
.tb-notif-head{padding:12px 16px;border-bottom:1px solid var(--border,#E5E7EB);display:flex;align-items:center;justify-content:space-between}
.tb-notif-title{font-weight:700;font-size:.88rem}
.tb-notif-markall{background:none;border:none;cursor:pointer;font-size:.75rem;color:var(--gold,#C99A0A);font-weight:600}
.tb-notif-empty{padding:24px;text-align:center;color:var(--muted,#6B7280);font-size:.82rem}
.tb-notif-empty i{margin-bottom:8px;opacity:.3;display:block}

/* ── Item notifikasi ─────────────────────────────────────── */
.tb-notif-item{padding:12px 16px;border-bottom:1px solid var(--border,#E5E7EB);cursor:pointer;transition:background .15s}
.tb-notif-item.unread{background:#FEF3C7}
.tb-notif-row{display:flex;align-items:flex-start;gap:10px}
.tb-notif-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.85rem}
.tb-notif-body{flex:1;min-width:0}
.tb-notif-name{font-weight:600;font-size:.82rem;margin-bottom:2px}
.tb-notif-text{font-size:.75rem;color:var(--muted,#6B7280);line-height:1.4}
.tb-notif-time{font-size:.68rem;color:var(--muted,#6B7280);margin-top:4px}
.tb-notif-dot{width:8px;height:8px;border-radius:50%;background:#EF4444;flex-shrink:0;margin-top:4px}

/* ── Asas topbar: supaya topbar.php lengkap walau tanpa dashboard.css (cth page awam) ── */
.topbar{height:var(--topbar-h,64px);background:var(--card,#fff);border-bottom:1px solid var(--border,#E5E7EB);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;position:sticky;top:0;z-index:1000}
.topbar-right{display:flex;align-items:center;gap:1rem}
.topbar-lang{display:inline-flex;border:1px solid var(--border,#E5E7EB);border-radius:20px;overflow:hidden;background:#fff}
.topbar-lang a{padding:4px 12px;font-size:.78rem;font-weight:700;color:var(--muted,#6B7280);text-decoration:none;transition:background .2s,color .2s}
.topbar-lang a.active{background:#F0B90B;color:#1a1a2e}
.sidebar-toggle{background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--muted,#6B7280);display:none}
.user-menu{display:flex;align-items:center;gap:.6rem}
.user-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover}
.user-name{font-weight:600;font-size:.9rem}

/* ── Dropdown avatar (kaya macam home) ── */
.tb-user-wrap{position:relative}
.tb-user-dropdown{position:absolute;right:0;top:calc(100% + 8px);background:var(--white,#fff);border:1px solid var(--border,#E5E7EB);border-radius:12px;box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.12));min-width:210px;padding:8px 0;z-index:200}
.tb-user-head{padding:10px 16px;border-bottom:1px solid var(--border,#E5E7EB);display:flex;flex-direction:column;gap:2px}
.tb-user-head strong{font-size:.88rem;color:#1a1a2e}
.tb-user-head span{font-size:.74rem;color:var(--muted,#6B7280);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-user-item{display:flex;align-items:center;gap:9px;padding:9px 16px;text-decoration:none;color:#1a1a2e;font-size:.85rem;transition:background .15s}
.tb-user-item:hover{background:#F8FAFC}
.tb-user-item i{width:16px;text-align:center;color:#94a3b8}
.tb-user-divider{border-top:1px solid var(--border,#E5E7EB);margin:4px 0}
.tb-user-logout{color:#DC2626}
.tb-user-logout i{color:#DC2626}

/* ── Menu hamburger mobile ── */
.tb-burger{display:none;background:none;border:none;font-size:1.2rem;color:#1a1a2e;cursor:pointer;padding:6px}
.tb-mobnav{display:none;flex-direction:column;background:#fff;border-bottom:1px solid var(--border,#E5E7EB);box-shadow:0 6px 16px rgba(0,0,0,.06)}
.tb-mobnav.open{display:flex}
.tb-mobnav a{padding:12px 20px;text-decoration:none;color:#1a1a2e;font-size:.9rem;font-weight:600;border-bottom:1px solid #f1f5f9}
.tb-mobnav a:hover{background:#f8fafc}
.tb-mobnav a.active{color:#92700a;background:#FEF9E7;border-left:3px solid #F0B90B}
@media(max-width:900px){.tb-burger{display:inline-flex;align-items:center}}

/* ========================================================================
   3. SIDEBAR  —  asal: sidebar.css
   ======================================================================== */


/* ── Sidebar Nav — polish & professional ─────────────────────── */
.sidebar-nav { padding: 6px 8px 16px; }

.nav-group { margin-bottom: 2px; }

.nav-section-label.nav-group-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    padding: 11px 12px;
    margin-top: 6px;
    border-radius: 8px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    transition: background .15s, color .15s;
}
.nav-section-label.nav-group-toggle:hover {
    background: #F8FAFC;
    color: #475569;
}
.nav-section-label.nav-group-toggle--active {
    color: #C99A0A;
    font-weight: 800;
}

.nav-group-chevron {
    font-size: .62rem;
    color: currentColor;
    opacity: .7;
    transition: transform .25s ease;
    flex-shrink: 0;
}
.nav-group-toggle--active .nav-group-chevron { transform: rotate(0deg); }
.nav-group-toggle:not(.nav-group-toggle--active) .nav-group-chevron { transform: rotate(-90deg); }

.nav-group-items {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .28s ease, opacity .2s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 0 6px;
}
.nav-group-items.is-open {
    max-height: 600px;
    opacity: 1;
}

.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 0 2px;
    border-radius: 9px;
    font-size: .86rem;
    color: #475569;
    text-decoration: none;
    transition: background .15s, color .15s;
    line-height: 1.3;
}
.sidebar-nav .nav-item:hover {
    background: #F8FAFC;
    color: #1a1a2e;
}
.sidebar-nav .nav-item.active {
    background: #FFF3E0;
    color: #C2610A;
    font-weight: 700;
}
.sidebar-nav .nav-item .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
    font-size: .95rem;
}
.sidebar-nav .nav-item .nav-label { flex: 1; }

.nav-divider {
    height: 1px;
    background: #EEF0F4;
    margin: 12px 12px 10px;
}

.nav-logout { color: #B45309; }
.nav-logout:hover { background: #FEF3C7 !important; color: #92400E !important; }

/* ========================================================================
   4. LAYOUT (shell)  —  dipusatkan
   ======================================================================== */

:root { --sidebar-w: 240px; }

/* Dashboard shell */
.main-wrap { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
.main-content { padding: 2rem 1.5rem; max-width: 1200px; width: 100%; margin: 0 auto; }

/* Halaman statik awam (privasi, tentang, kecemasan, dll) */
.op-page { max-width: 820px; margin: 0 auto; padding: 2.2rem 1.2rem 4rem; color: #1a1a1a; line-height: 1.7; }
.op-page h1 { font-size: 1.7rem; font-weight: 800; margin: 0 0 .4rem; }
.op-page .op-lead { color: #64748b; margin: 0 0 1.8rem; font-size: .95rem; }
.op-page h2 { font-size: 1.12rem; font-weight: 700; margin: 1.8rem 0 .6rem; color: #0f172a; }
.op-page p { margin: 0 0 .9rem; color: #334155; font-size: .95rem; }
.op-page ul { margin: 0 0 1rem; padding-left: 1.2rem; color: #334155; }
.op-page li { margin-bottom: .45rem; }
.op-crumb { max-width: 820px; margin: 1rem auto 0; padding: 0 1.2rem; font-size: .78rem; color: #94a3b8; }
.op-crumb a { color: #64748b; text-decoration: none; }

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-wrap { margin-left: 0; }
    .sidebar-toggle { display: block; }
}


/* ========================================================================
   5. FOOTER (.op-foot*)  —  baharu
   ======================================================================== */

/* Footer kongsi global (dipapar oleh foot.php, layout awam) */
.op-foot { background: #1a1a2e; color: #cbd5e1; margin-top: 3rem; }
.op-foot-inner { max-width: var(--wrap); margin: 0 auto; padding: 3rem 1.2rem 1.6rem; }
.op-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.op-foot-logo { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.15rem; font-weight: 800; color: #fff; text-decoration: none; }
.op-foot-logo span { color: var(--pt-kuning, #F0B90B); }
.op-foot-tag { margin: .7rem 0 1rem; font-size: .85rem; color: #94a3b8; line-height: 1.6; max-width: 30ch; }
.op-foot-social { display: flex; gap: .6rem; }
.op-foot-ic { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.08); color: #cbd5e1; transition: background .2s, color .2s; }
.op-foot-ic:hover { background: var(--pt-kuning, #F0B90B); color: #1a1a2e; }
.op-foot-ic .ic { width: 16px; height: 16px; fill: currentColor; }
.op-foot-col h5 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; margin: 0 0 .9rem; }
.op-foot-col ul { list-style: none; margin: 0; padding: 0; }
.op-foot-col li { margin-bottom: .55rem; }
.op-foot-col a { color: #94a3b8; text-decoration: none; font-size: .88rem; transition: color .2s; }
.op-foot-col a:hover { color: var(--pt-kuning, #F0B90B); }
.op-foot-sep { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 2rem 0 1.2rem; }
.op-foot-bottom { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center; font-size: .82rem; color: #94a3b8; }
.op-foot-bottom p { margin: 0; }
.op-foot-links { display: flex; gap: 1.2rem; }
.op-foot-links a { color: #94a3b8; text-decoration: none; }
.op-foot-links a:hover { color: var(--pt-kuning, #F0B90B); }
.op-foot-ad { text-align: center; margin: 1.2rem auto 0; max-width: 970px; }

@media (max-width: 820px) {
    .op-foot-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
    .op-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .op-foot-grid { grid-template-columns: 1fr; }
    .op-foot-bottom { flex-direction: column; align-items: flex-start; }
}


/* ========================================================================
   6. PAGES — jadual kecemasan (.op-emerg)   ·  asal: pages.css
   ======================================================================== */
.op-emerg { width: 100%; border-collapse: collapse; margin: .5rem 0 1.5rem; }
.op-emerg th, .op-emerg td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid #eef2f7; font-size: .9rem; }
.op-emerg th { background: #f8fafc; font-weight: 700; color: #475569; }
.op-emerg .op-num { font-weight: 800; color: #dc2626; font-variant-numeric: tabular-nums; white-space: nowrap; }


/* ========================================================================
   7. ARTIKEL — senarai (.art-*)   ·  asal: artikel-senarai.css
   ======================================================================== */
body.page-artikel { background: #F8FAFC; }
.art-wrap{max-width:1100px;margin:0 auto;padding:24px 16px 80px}
.art-header{margin-bottom:1.5rem}
.art-header h1{font-size:1.6rem;font-weight:800;margin:.2rem 0 0}
.art-header p{font-size:.86rem;color:#64748B;margin:.35rem 0 0}
.art-back{font-size:.82rem;color:#64748B;text-decoration:none}
.art-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem;align-items:center}
.art-search{flex:1;min-width:220px;position:relative}
.art-search input{width:100%;padding:10px 14px 10px 36px;border:1.5px solid #E2E8F0;border-radius:10px;font-size:.85rem;font-family:inherit;box-sizing:border-box}
.art-search input:focus{outline:none;border-color:#F0B90B}
.art-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94A3B8;font-size:.8rem}
.art-select{padding:9px 12px;border:1.5px solid #E2E8F0;border-radius:10px;font-size:.82rem;font-family:inherit;background:#fff;min-width:160px}
.art-count{font-size:.78rem;color:#94A3B8;margin-bottom:1rem}
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.art-card{background:#fff;border:1px solid #E2E8F0;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.art-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08);transform:translateY(-2px)}
.art-thumb{aspect-ratio:16/9;background:#EEF2F7;overflow:hidden}
.art-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.art-thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#CBD5E1;font-size:2rem;background:linear-gradient(135deg,#F1F5F9,#E2E8F0)}
.art-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.art-cat{align-self:flex-start;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:3px 8px;border-radius:5px;background:#FEF3C7;color:#92400E;margin-bottom:8px}
.art-title{font-size:.95rem;font-weight:700;line-height:1.35;color:#1E293B;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-excerpt{font-size:.78rem;color:#64748B;line-height:1.5;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.art-meta{display:flex;align-items:center;gap:10px;font-size:.7rem;color:#94A3B8;margin-top:auto;padding-top:10px}
.art-empty{text-align:center;padding:4rem 1rem;color:#94A3B8}
@media(max-width:640px){.art-grid{grid-template-columns:1fr}}



/* ========================================================================
   8. ARTIKEL — baca + editor blok + pembetulan (.art-*/.corr-*/.block-*/.toc-*)
   ·  asal: artikel.css + artikel-baca.css  (dashboard.css digugurkan: redundan)
   ======================================================================== */
/* ==========================================
   LOKASI FOLDER ASAL : /templates/default/assets/css
   NAMA FAIL ASAL     : artikel-baca.css
   NOTA               : Gaya khusus halaman BACA artikel sahaja.
                        Dimuat SELEPAS dashboard.css supaya override menang.
                        JANGAN letak dalam artikel.css (dikongsi 7 template).
   ========================================== */

:root {
    --primary: #F0B90B;
    --text: #1a1a2e;
    --muted: #64748b;
    --border: #e5e7ef;
    --bg: #f4f6fb;
}
body.page-baca * { box-sizing:border-box; }
.artikel-body > *         { margin-bottom:1.4rem; }
.artikel-body > *:last-child { margin-bottom:0; }
/* ── Kandungan artikel ── */
.artikel-body .ab-p { line-height:1.9; text-align:justify; hyphens:auto; }

/* Media: auto tengah + responsif */
.artikel-body .ab-figure { margin:2rem auto; text-align:center; }
.artikel-body .ab-figure img,
.artikel-body img { display:block; max-width:100%; height:auto; margin:0 auto; border-radius:10px; }
.artikel-body .ab-figure figcaption { margin-top:.5rem; font-size:.82rem; color:var(--muted); text-align:center; }

/* YouTube: 16:9 responsif, di tengah */
.artikel-body .ab-youtube { width:100%; max-width:720px; margin:2rem auto; aspect-ratio:16/9; border-radius:12px; overflow:hidden; }
.artikel-body .ab-youtube iframe { width:100%; height:100%; border:0; display:block; }
.artikel-body iframe { display:block; max-width:100%; margin:0 auto; }

/* Senarai kemas */
.artikel-body ul, .artikel-body ol, .artikel-body .ab-list { margin:1.2rem 0; padding-left:1.6rem; text-align:left; }
.artikel-body li { margin-bottom:.55rem; line-height:1.75; }
.artikel-body a { color:var(--primary); text-decoration:none; }
.artikel-body a:hover { text-decoration:underline; }

/* Kutipan & callout */
.artikel-body .ab-quote { border-left:4px solid var(--primary); padding:.5rem 0 .5rem 1.2rem; margin:1.6rem 0; font-style:italic; color:var(--muted); text-align:left; }
.artikel-body .ab-callout { background:#fff8e6; border:1px solid #fde68a; border-radius:10px; padding:1rem 1.2rem; text-align:left; }
body.page-baca { background:#fff; color:var(--text); }

/* ── Komen artikel: class kongsi (ganti inline berulang) ── */
.ba-label { font-size:.75rem; font-weight:600; display:block; margin-bottom:4px; }
.ba-input { width:100%; padding:8px 10px; border:1.5px solid var(--border); border-radius:8px; font-size:.82rem; font-family:inherit; outline:none; }
textarea.ba-input { resize:vertical; }
.ba-alert { padding:10px 14px; border-radius:8px; font-size:.82rem; margin-bottom:1rem; }
.ba-alert--ok   { background:#D1FAE5; color:#065F46; }
.ba-alert--warn { background:#FEF3C7; color:#92400E; }
.ba-alert--err  { background:#FEE2E2; color:#991B1B; }

/* Topnav */
.art-nav {
    background:#fff; border-bottom:1px solid var(--border);
    padding:0 1.5rem; height:56px;
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:50;
}
.art-nav-brand {
    font-weight:800; font-size:1rem; color:var(--text);
    text-decoration:none; display:flex; align-items:center; gap:8px;
}
.art-nav-brand span { color:var(--primary); }
.art-nav-right { display:flex; align-items:center; gap:10px; }
.art-lang-btn {
    padding:4px 10px; border-radius:6px; font-size:.75rem; font-weight:600;
    text-decoration:none; border:1.5px solid var(--border); color:var(--muted);
    transition:all .15s;
}
.art-lang-btn.active, .art-lang-btn:hover { background:var(--primary); border-color:var(--primary); color:#fff; }

/* Progress bar */
.reading-progress {
    position:fixed; top:0; left:0; height:3px;
    background:var(--primary); z-index:200;
    transition:width .1s; width:0%;
}

/* Layout */
.art-container {
    display:grid;
    grid-template-columns:1fr 280px;
    gap:2rem;
    max-width:1060px;
    margin:0 auto;
    padding:2rem 1.5rem 4rem;
}
@media(max-width:768px) {
    .art-container { grid-template-columns:1fr; }
    .art-sticky-sidebar { display:none; }
}

/* Author card */
.author-card {
    background:#f8fafc; border-radius:12px;
    padding:1.2rem; margin:2rem 0;
    display:flex; align-items:center; gap:12px;
    border:1px solid var(--border);
}
.author-card-avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.author-card-name { font-weight:700; font-size:.9rem; }
.author-card-bio  { font-size:.78rem; color:var(--muted); margin-top:2px; line-height:1.5; }

/* Share buttons */
.share-wrap {
    display:flex; align-items:center; gap:8px;
    margin:2rem 0; flex-wrap:wrap;
    padding:1.2rem; background:#f8fafc;
    border-radius:10px; border:1px solid var(--border);
}
.share-label { font-size:.8rem; font-weight:700; color:var(--muted); margin-right:4px; }
.share-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 14px; border-radius:7px;
    font-size:.78rem; font-weight:600;
    text-decoration:none; border:none; cursor:pointer;
    font-family:inherit; transition:opacity .15s;
}
.share-btn:hover { opacity:.85; }
.share-fb  { background:#1877F2; color:#fff; }
.share-wa  { background:#25D366; color:#fff; }
.share-tw  { background:#000; color:#fff; }
.share-tg  { background:#26A5E4; color:#fff; }
.share-copy{ background:#f1f5f9; color:var(--text); }

/* Related articles */
.related-wrap { margin-top:2.5rem; }
.related-title { font-size:1rem; font-weight:800; margin-bottom:1rem; padding-bottom:.6rem; border-bottom:2px solid var(--border); }
.related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; }
.related-card {
    border-radius:10px; overflow:hidden;
    border:1px solid var(--border); text-decoration:none;
    color:var(--text); transition:box-shadow .15s;
    display:flex; flex-direction:column;
}
.related-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); }
.related-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; background:#f1f5f9; }
.related-thumb-ph { width:100%; aspect-ratio:16/9; background:#f1f5f9; display:flex; align-items:center; justify-content:center; color:#cbd5e1; font-size:1.5rem; }
.related-info { padding:10px 12px; flex:1; }
.related-card-title { font-size:.82rem; font-weight:700; line-height:1.4; margin-bottom:4px; }
.related-card-meta  { font-size:.72rem; color:var(--muted); }

/* Sticky sidebar */
.art-sticky-sidebar { position:sticky; top:calc(var(--op-head-h, 176px) + 12px); max-height:calc(100vh - var(--op-head-h, 176px) - 24px); overflow-y:auto; }
.sidebar-toc { background:#f8fafc; border-radius:10px; padding:14px; border:1px solid var(--border); margin-bottom:14px; }
.sidebar-toc-title { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:10px; }
.toc-list { list-style:none; }
.toc-item { padding:3px 0; }
.toc-item a { font-size:.78rem; color:var(--muted); text-decoration:none; display:block; padding:2px 0 2px 8px; border-left:2px solid transparent; transition:all .15s; }
.toc-item a:hover, .toc-item a.active { color:var(--primary); border-left-color:var(--primary); }
.toc-item.toc-h3 a { padding-left:18px; font-size:.74rem; }

/* --- editor blok + pembetulan (artikel.css) --- */
/* ============================================================
   OrangPerak — Artikel Modul CSS
   ============================================================ */

/* ── Layout Editor ── */
.editor-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; max-width: 1200px; margin: 0 auto; }
@media(max-width:900px) { .editor-wrap { grid-template-columns: 1fr; } }

/* ── Lang tabs ── */
.lang-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid var(--border); }
.lang-tab { padding: 8px 20px; font-size: .82rem; font-weight: 700; border: none; background: none; cursor: pointer; font-family: inherit; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .2s, border-color .2s; }
.lang-tab.active { color: #C99A0A; border-bottom-color: #F0B90B; }

/* ── Editor pane ── */
.editor-pane { display: none; }
.editor-pane.active { display: block; }

/* ── Title input ── */
.title-input { width: 100%; border: none; outline: none; font-size: 1.6rem; font-weight: 800; font-family: inherit; color: var(--text); padding: 12px 0; border-bottom: 2px solid var(--border); margin-bottom: 16px; background: transparent; resize: none; overflow: hidden; transition: border-color .2s; }
.title-input:focus { border-bottom-color: var(--primary); }
.title-input::placeholder { color: #CBD5E1; }

/* ── Block editor ── */
.blocks-wrap { min-height: 300px; }
.block-item { position: relative; margin-bottom: 4px; border-radius: 8px; padding-left: 40px; min-height: 40px; }
.block-item.drag-over { border-top: 2px solid #F0B90B; }

/* Block controls — sentiasa visible */
.block-controls { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; z-index: 2; }
.block-ctrl-btn { width: 26px; height: 26px; border: 1px solid #e2e8f0; background: #fff; border-radius: 6px; cursor: pointer; font-size: .75rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.15); color: #475569; transition: background .1s, color .1s; }
.block-ctrl-btn:hover { background: #f1f5f9; color: #C99A0A; }
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }

/* Block content */
.block-content [contenteditable] { outline: none; width: 100%; min-height: 1.5em; padding: 8px 10px; border-radius: 6px; font-size: .95rem; line-height: 1.7; font-family: inherit; transition: background .15s; }
.block-content [contenteditable]:focus { background: #FFFBEB; }
.block-content [contenteditable]:empty::before { content: attr(data-placeholder); color: #CBD5E1; pointer-events: none; }

/* Block type styles */
.block-h2 [contenteditable] { font-size: 1.4rem; font-weight: 800; }
.block-h3 [contenteditable] { font-size: 1.15rem; font-weight: 700; }
.block-h4 [contenteditable] { font-size: 1rem; font-weight: 700; }
.block-quote [contenteditable] { border-left: 4px solid #F0B90B; padding-left: 16px; font-style: italic; color: #64748B; }
.block-callout [contenteditable] { background: #FFFBEB; border: 1.5px solid #FCD34D; border-radius: 8px; padding: 12px 14px; }
.block-code [contenteditable] { background: #1e293b; color: #e2e8f0; font-family: monospace; font-size: .85rem; border-radius: 8px; padding: 14px; }
.block-divider { padding: 8px 0; text-align: center; }
.block-divider hr { border: none; border-top: 2px solid var(--border); }

/* Image block */
.block-image { padding: 4px 0; }
.block-image img { max-width: 100%; border-radius: 10px; display: block; }
.block-image .img-placeholder { border: 2px dashed var(--border); border-radius: 10px; padding: 2rem; text-align: center; cursor: pointer; transition: border-color .15s, color .15s; color: var(--text-muted); }
.block-image .img-placeholder:hover { border-color: #F0B90B; color: #C99A0A; }
.block-image .img-caption { font-size: .78rem; color: var(--text-muted); text-align: center; padding: 4px; outline: none; margin-top: 6px; width: 100%; border: none; font-family: inherit; background: transparent; }
.block-image .img-caption:empty::before { content: attr(data-placeholder); }

/* YouTube block */
.block-youtube { padding: 4px 0; }
.block-youtube .yt-input-wrap { display: flex; gap: 8px; align-items: center; }
.block-youtube .yt-input { flex: 1; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-size: .85rem; font-family: inherit; transition: border-color .2s; }
.block-youtube .yt-input:focus { outline: none; border-color: var(--primary); }
.block-youtube .yt-embed { border-radius: 10px; overflow: hidden; aspect-ratio: 16/9; }
.block-youtube .yt-embed iframe { width: 100%; height: 100%; border: none; }

/* List block */
.block-list ul, .block-list ol { padding-left: 1.4rem; margin: 0; }
.block-list li { padding: 2px 0; }

/* Add block button */
.add-block-wrap { position: relative; margin: 6px 0; }
.add-block-btn { width: 100%; padding: 8px; border: 1.5px dashed var(--border); border-radius: 8px; background: none; cursor: pointer; font-size: .78rem; color: var(--text-muted); font-family: inherit; transition: all .15s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.add-block-btn:hover { border-color: #F0B90B; color: #C99A0A; background: #FFFBEB; }

/* Block type picker */
.block-picker { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 100; padding: 8px; display: none; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.block-picker.open { display: grid; }
.block-type-btn { padding: 8px 4px; border: none; background: none; border-radius: 7px; cursor: pointer; font-size: .72rem; font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: background .1s; color: var(--text); }
.block-type-btn:hover { background: #FEF3C7; }
.block-type-btn i { font-size: 1rem; color: #C99A0A; }

/* Autosave indicator */
.autosave-status { font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.autosave-status.saving { color: #C99A0A; }
.autosave-status.saved  { color: #10B981; }
.autosave-status.error  { color: #EF4444; }

/* ── Editor Sidebar ── */
.editor-sidebar { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; }
.sidebar-card { background: #fff; border-radius: 12px; border: 1px solid var(--border); padding: 16px; }
.sidebar-card h4 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 12px; }

/* Featured image */
.featured-wrap { position: relative; }
.featured-img { width: 100%; border-radius: 8px; object-fit: cover; max-height: 180px; display: block; }
.featured-ph { width: 100%; height: 120px; border: 2px dashed var(--border); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; gap: 6px; color: var(--text-muted); font-size: .8rem; transition: all .15s; }
.featured-ph:hover { border-color: #F0B90B; color: #C99A0A; }
.featured-remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; background: rgba(0,0,0,.6); border: none; border-radius: 50%; color: #fff; cursor: pointer; font-size: .7rem; display: flex; align-items: center; justify-content: center; }

/* Form controls dalam editor */
.form-label { display: block; font-size: .78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.form-control { width: 100%; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-size: .85rem; font-family: inherit; color: var(--text); background: var(--bg); transition: border-color .2s; }
.form-control:focus { outline: none; border-color: var(--primary); background: #fff; }
.form-hint { font-size: .7rem; color: var(--text-muted); margin-top: 3px; }

/* Status badge editor */
.status-badge-editor { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 20px; font-size: .78rem; font-weight: 700; }

/* ── Gaya Pembetulan (Corrections) ── */
.diff-old { background: #FEE2E2; color: #991B1B; text-decoration: line-through; padding: 2px 4px; border-radius: 3px; }
.diff-new { background: #D1FAE5; color: #065F46; padding: 2px 4px; border-radius: 3px; font-weight: 600; }
.corr-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
.corr-head { padding: 14px 18px; display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.corr-diff { padding: 0 18px 14px; display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.corr-diff-box { flex: 1; min-width: 200px; padding: 10px 14px; border-radius: 8px; font-size: .84rem; line-height: 1.7; }
.corr-actions { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Badge Status Pembetulan */
.corr-status { font-size: .65rem; font-weight: 700; padding: 3px 8px; border-radius: 6px; flex-shrink: 0; }
.corr-status.pending { background: #FEF3C7; color: #92400E; }
.corr-status.accepted { background: #D1FAE5; color: #065F46; }
.corr-status.edited { background: #DBEAFE; color: #1E40AF; }
.corr-status.rejected { background: #FEE2E2; color: #991B1B; }



/* ========================================================================
   9. HOME (.hm-*/.hero-*/.pt-* tambahan) + WIDGET SOLAT
   ·  asal: home.css + solat-widget.css
   ======================================================================== */
/* ==========================================
   LOKASI FOLDER ASAL : /templates/default/assets/css
   NAMA FAIL ASAL     : home.css
   NOTA               : Kelas util halaman utama (dulu inline style). Render identik.
                        Dimuat selepas style.css.
   ========================================== */

.hm-abs { position:absolute; width:0; height:0; overflow:hidden; }  /* sprite SVG (icons.php) — jangan ambil ruang layout */
.hm-s01 { flex:1; overflow:hidden; }  /* x1 */
.hm-minh-42px { min-height:42px; }  /* x1 */
.hm-fz-8rem { font-size:.8rem; }  /* x1 */
.hm-s02 { overflow-x:auto; scrollbar-width:none; }  /* x1 */
.hm-fz-6rem { font-size:.6rem; }  /* x5 */
.hm-s03 { font-size:.75rem; font-weight:700; color:var(--pt-abu); }  /* x1 */
.hm-fz-65rem { font-size:.65rem; }  /* x1 */
.hm-fz-85rem { font-size:.85rem; }  /* x3 */
.hm-w100 { width:100%; }  /* x1 */
.hm-mw-165px { min-width:165px; }  /* x1 */
.hm-fz-72rem { font-size:.72rem; }  /* x2 */
.hm-c-abu { color:var(--pt-abu); }  /* x12 */
.hm-s04 { color:var(--pt-kuning-dk);font-weight:600; }  /* x5 */
.hm-block { display:block; }  /* x4 */
.hm-smt-140px { scroll-margin-top:140px; }  /* x10 */
.hm-s05 { text-align:center;padding:3rem 1rem;color:var(--text-muted,#64748b);background:#fff;border:1px solid var(--border,#e5e7ef);border-radius:14px; }  /* x2 */
.hm-s06 { font-size:2rem;opacity:.5; }  /* x4 */
.hm-m-8rem00 { margin:.8rem 0 0; }  /* x4 */
.hm-minh-300px { min-height:300px; }  /* x1 */
.hm-h-140px { height:140px; }  /* x1 */
.hm-h-160px { height:160px; }  /* x3 */
.hm-minh-240px { min-height:240px; }  /* x1 */
.hm-s07 { display:block; text-align:center; }  /* x3 */
.hm-h-180px { height:180px; }  /* x7 */
.hm-fz-7rem { font-size:.7rem; }  /* x4 */
.hm-s08 { font-size:.75rem; font-weight:700; }  /* x4 */
.hm-s09 { font-size:.7rem; color:var(--pt-abu); }  /* x10 */
.hm-s10 { font-size:.8rem; opacity:.7; font-weight:600; }  /* x1 */
.hm-op3 { opacity:.3; }  /* x1 */
.hm-fz-78rem { font-size:.78rem; }  /* x11 */
.hm-fw7 { font-weight:700; }  /* x11 */
.hm-s11 { font-size:1.1rem; font-weight:800; }  /* x11 */
.hm-s12 { font-weight:700; color:var(--pt-hitam); }  /* x1 */
.hm-s13 { font-size:.78rem; padding:7px 16px; }  /* x1 */
.hm-s14 { display:flex;gap:6px;margin-bottom:1.2rem; }  /* x1 */
.hm-pointer { cursor:pointer; }  /* x2 */
.hm-c-hitam { color:var(--pt-hitam); }  /* x2 */
.hm-s15 { text-decoration:none;color:inherit; }  /* x4 */
.hm-s16 { width:100%;aspect-ratio:4/3;background:#F1F5F9;display:flex;align-items:center;justify-content:center;color:#94A3B8;font-size:2rem; }  /* x2 */
.hm-d-none { display:none; }  /* x1 */
.hm-s17 { display:flex;gap:8px;justify-content:center;flex-wrap:wrap; }  /* x1 */
.hm-s18 { font-size:2rem; margin-bottom:8px; }  /* x6 */
.hm-s19 { font-size:.8rem; font-weight:700; }  /* x6 */
.hm-bord-dashed { border-style:dashed; }  /* x1 */
.hm-s20 { font-size:.72rem; }  /* x1 */
.hm-s21 { margin-top:1rem;display:inline-flex;font-size:.8rem;padding:8px 20px; }  /* x1 */
.hm-s22 { width:48px;height:48px;border-radius:10px;object-fit:cover;flex-shrink:0; }  /* x1 */
.hm-s23 { background:#FEF3C7;font-size:1rem;font-weight:800;color:#C99A0A; }  /* x1 */
.hm-s24 { display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }  /* x1 */
.hm-s25 { font-size:.65rem;color:var(--pt-abu); }  /* x1 */
.hm-c-990 { color:#C99A0A; }  /* x1 */
.hm-s26 { justify-content:center;text-align:center;border-style:dashed;background:var(--pt-abu-muda); }  /* x1 */
.hm-tac { text-align:center; }  /* x1 */
.hm-s27 { display:inline-block;width:300px;height:250px; }  /* x1 */
.hm-s28 { text-align:center;padding:3rem 1rem;color:var(--pt-abu); }  /* x2 */
.hm-nowrap { white-space:nowrap; }  /* x1 */
.hm-s29 { background:#EDE9FE;color:#5B21B6; }  /* x2 */
.hm-s30 { background:#DBEAFE;color:#1E40AF; }  /* x1 */
.hm-s31 { text-align:center;padding:2rem;color:var(--pt-abu); }  /* x3 */
.hm-s32 { width:44px;height:44px;border-radius:50%;object-fit:cover; }  /* x1 */
.hm-s33 { font-size:.76rem; color:var(--pt-abu); margin-top:6px; }  /* x3 */
.hm-s34 { font-family:'Playfair Display',serif; font-size:clamp(1.3rem,3vw,1.8rem); color:var(--pt-hitam); margin-bottom:8px; }  /* x1 */
.hm-s35 { color:rgba(0,0,0,.55); font-size:.88rem; margin:0; }  /* x1 */
.hm-s36 { font-size:.83rem; color:rgba(255,255,255,.55); max-width:280px; line-height:1.7; }  /* x1 */
.hm-s37 { border-color:rgba(255,255,255,.07); margin:0 0 20px; }  /* x1 */
.hm-s38 { font-size:.72rem; color:rgba(255,255,255,.4); }  /* x4 */
.hm-s39 { display:inline-block;width:320px;height:50px; }  /* x1 */
.hm-jcc { justify-content:center; }  /* x2 */

/* ===== HERO v2 ===== */
.hero-v2{position:relative;padding:56px 20px 64px;background:radial-gradient(1100px 380px at 50% -80px,#FFF3CE 0%,rgba(255,243,206,0) 70%),linear-gradient(180deg,#FFFBEF 0%,#FFFFFF 100%);border-bottom:1px solid #F3ECD6;overflow:hidden}
.hero-v2-inner{max-width:820px;margin:0 auto;text-align:center;position:relative}
.hero-v2-badge{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a6d0b;background:#fff;border:1px solid #F0DFA0;padding:7px 16px;border-radius:999px;box-shadow:0 2px 8px rgba(240,185,11,.12);margin-bottom:22px}
.hero-v2-badge .ic{width:14px;height:14px}
.hero-v2-title{font-size:clamp(2rem,5vw,3.15rem);line-height:1.1;font-weight:800;color:#171726;margin:0 0 16px;letter-spacing:-.01em}
.hero-v2-sub{font-size:1.02rem;color:#5b6472;max-width:600px;margin:0 auto 30px;line-height:1.6}
.hero-v2-search{display:flex;align-items:stretch;background:#fff;border:1px solid #ECE3CB;border-radius:16px;box-shadow:0 12px 40px rgba(120,90,0,.10);padding:6px;max-width:720px;margin:0 auto 18px}
.hv2-field{display:flex;align-items:center;gap:10px;padding:0 14px;flex:1;min-width:0}
.hv2-field .ic{width:18px;height:18px;color:#9aa2af;flex-shrink:0}
.hv2-field input,.hv2-field select{border:0;outline:0;background:none;font-size:.95rem;color:#171726;width:100%;font-family:inherit;padding:14px 0}
.hv2-field--d{flex:0 0 auto;border-left:1px solid #EEE7D6}
.hv2-field--d select{cursor:pointer;max-width:180px}
.hv2-btn{display:inline-flex;align-items:center;gap:8px;background:#F0B90B;color:#171726;font-weight:700;font-size:.92rem;border:0;border-radius:12px;padding:0 24px;cursor:pointer;transition:background .15s,transform .05s;white-space:nowrap}
.hv2-btn:hover{background:#e0aa06}
.hv2-btn:active{transform:translateY(1px)}
.hv2-btn .ic{width:16px;height:16px;color:#171726}
.hero-v2-tags{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:.82rem;margin-bottom:38px}
.hv2-tags-label{color:#8a93a0;font-weight:600}
.hero-v2-tags a{color:#5b6472;text-decoration:none;background:#fff;border:1px solid #EAE3D2;padding:5px 12px;border-radius:999px;transition:all .15s}
.hero-v2-tags a:hover{color:#8a6d0b;border-color:#F0B90B;background:#FFFBEF}
.hero-v2-stats{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:12px}
.hv2-stat{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #EEE7D6;border-radius:12px;padding:12px 18px;box-shadow:0 2px 10px rgba(120,90,0,.05);min-width:132px}
.hv2-stat .ic{width:22px;height:22px;color:#F0B90B;flex-shrink:0}
.hv2-stat-txt{display:flex;flex-direction:column;text-align:left;line-height:1.1}
.hv2-stat-val{font-size:1.25rem;font-weight:800;color:#171726}
.hv2-stat-lbl{font-size:.68rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8a93a0;margin-top:2px}
@media (max-width:640px){
  .hero-v2{padding:36px 16px 44px}
  .hero-v2-search{flex-wrap:wrap;border-radius:14px}
  .hv2-field--q{flex:1 1 100%;padding:6px 12px}
  .hv2-field--d{flex:1 1 100%;border-left:0;border-top:1px solid #EEE7D6}
  .hv2-field--d select{max-width:none}
  .hv2-btn{flex:1 1 100%;justify-content:center;padding:14px}
  .hv2-stat{flex:1 1 calc(50% - 12px);min-width:0}
}
/* Berita Terkini — imbang kad utama & grid, gambar lebih generous */
#berita .pt-article-main { min-height: 420px; }
#berita .pt-card-img { height: 168px; }
#berita .pt-article-main img,
#berita .pt-card-img img { object-position: center; }

/* --- widget waktu solat (solat-widget.css) --- */
/* LOKASI: /templates/default/assets/css/solat-widget.css */
.solat-picker { position: relative; }
.solat-picker-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--pt-putih, #fff); border: 1.5px solid var(--pt-kuning-mid, #e5c76b);
  border-radius: 8px; padding: 4px 12px; font: inherit; font-size: .78rem; font-weight: 700;
  color: #7A5C00; cursor: pointer; white-space: nowrap; line-height: 1.5;
}
.solat-picker-btn:hover { border-color: var(--pt-kuning, #F0B90B); }
.solat-picker-btn .caret { font-size: .55rem; color: #b8912f; }

.solat-picker-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 300; width: 250px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14); padding: .5rem;
  max-height: 340px; display: flex; flex-direction: column;
}
.solat-picker-panel[hidden] { display: none; }

.solat-picker-search {
  width: 100%; box-sizing: border-box; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: .45rem .6rem; font: inherit; font-size: .82rem; margin-bottom: .4rem;
}
.solat-picker-search:focus { outline: none; border-color: #F0B90B; box-shadow: 0 0 0 3px rgba(240, 185, 11, .15); }

.solat-picker-list { overflow-y: auto; }
.sp-group {
  font-size: .66rem; font-weight: 700; color: #94a3b8; text-transform: uppercase;
  padding: .45rem .5rem .2rem; letter-spacing: .5px;
}
.sp-item {
  display: block; width: 100%; text-align: left; background: none; border: none;
  border-radius: 6px; padding: .42rem .6rem; font: inherit; font-size: .82rem; color: #334155; cursor: pointer;
}
.sp-item:hover { background: #fef9e7; color: #1a1a2e; }

/* ── Strip infostrip (center, kemas) ── */
.solat-strip { display: flex; align-items: center; justify-content: center; gap: .6rem 1rem; flex-wrap: wrap; min-height: 44px; padding: .4rem 0; }
.solat-picker-btn .ic { width: .85rem; height: .85rem; opacity: .7; }

.solat-next-pill { display: inline-flex; align-items: center; gap: .4rem; background: linear-gradient(135deg, #1a1a2e, #2f2f52); color: #fff; border-radius: 8px; padding: 4px 12px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.solat-next-pill .snp-label { color: #cbd5e1; font-weight: 600; }
.solat-next-pill strong { color: #F0B90B; }
.solat-next-pill .snp-time { font-variant-numeric: tabular-nums; letter-spacing: .3px; }

.solat-times { display: flex; align-items: center; gap: 0; }
.solat-times .waktu-item { padding: 2px 12px; border-left: 1px solid #ecdca8; border-radius: 0; }
.solat-times .waktu-item:first-child { border-left: none; }
.solat-times .waktu-item.solat-next { border-radius: 10px; padding: 4px 12px; border: 1.5px solid var(--pt-kuning); margin: 0 5px; }
.solat-times .waktu-item.solat-next + .waktu-item { border-left: none; }

.solat-strip-end { display: inline-flex; align-items: center; gap: .5rem; }
.strip-clock { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; color: #7A5C00; }
.strip-clock .ic { width: .8rem; height: .8rem; }
@media (max-width: 575px) { .strip-clock { display: none; } }
.hm-s01 { flex: 1; overflow: hidden; }
.hm-fz-8rem { font-size: .8rem; }

/* ── Ikon + utiliti subheader (untuk halaman yg tak muat style.css penuh) ── */
.pt-ticker .ic, .pt-infostrip .ic { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -.125em; flex-shrink: 0; }
.pt-ticker .ic-xs, .pt-infostrip .ic-xs { width: .75em; height: .75em; }
.pt-ticker .container, .pt-infostrip .container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.pt-ticker .d-flex, .pt-infostrip .d-flex { display: flex; }
.pt-ticker .align-items-center, .pt-infostrip .align-items-center { align-items: center; }
.pt-ticker .gap-2, .pt-infostrip .gap-2 { gap: .5rem; }
.pt-ticker .gap-3, .pt-infostrip .gap-3 { gap: 1rem; }
.pt-ticker .overflow-hidden, .pt-infostrip .overflow-hidden { overflow: hidden; }
.pt-ticker .me-1, .pt-infostrip .me-1 { margin-right: .25rem; }
.pt-ticker .text-muted, .pt-infostrip .text-muted { color: #6b7280; }



/* ========================================================================
   10. PASARKARAT (.pk-*/.pkb-*) — browse/item/cart/checkout/jual
   ·  asal: pasarkarat.css
   ======================================================================== */
/* ============================================================
   Pasar Karat — Marketplace CSS
   ============================================================ */

/* ── Layout ────────────────────────────────────────────── */
.pk-wrap { max-width:1200px; margin:0 auto; padding:0 1rem; }
.pk-header { margin-bottom:1.5rem; }
.pk-header h2 { font-size:1.4rem; font-weight:800; margin:0 0 .3rem; }
.pk-header p  { color:var(--text-muted); font-size:.88rem; margin:0; }

/* ── Filter Bar ────────────────────────────────────────── */
.pk-filter-bar {
    display:flex; gap:10px; flex-wrap:wrap; align-items:center;
    background:#fff; border:1px solid var(--border); border-radius:12px;
    padding:12px 16px; margin-bottom:1.5rem;
}
.pk-search-wrap {
    flex:1; min-width:200px; position:relative;
}
.pk-search-wrap input {
    width:100%; padding:8px 12px 8px 36px; border:1px solid var(--border);
    border-radius:8px; font-size:.85rem; background:#FAFAFA;
}
.pk-search-wrap i {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:var(--text-muted); font-size:.8rem;
}
.pk-filter-select {
    padding:8px 12px; border:1px solid var(--border); border-radius:8px;
    font-size:.82rem; background:#FAFAFA; color:var(--text); min-width:140px;
}

/* ── Category pills ────────────────────────────────────── */
.pk-cat-pills {
    display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1.5rem;
}
.pk-cat-pill {
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 14px; border-radius:20px; font-size:.78rem; font-weight:600;
    text-decoration:none; border:1px solid var(--border); color:var(--text);
    background:#fff; transition:all .2s;
}
.pk-cat-pill:hover, .pk-cat-pill.active {
    background:#F0B90B; color:#1a1a2e; border-color:#F0B90B;
}

/* ── Listing Grid ──────────────────────────────────────── */
.pk-grid {
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:16px; margin-bottom:2rem;
}
.pk-card {
    background:#fff; border:1px solid var(--border); border-radius:14px;
    overflow:hidden; transition:box-shadow .2s, transform .2s;
    text-decoration:none; color:inherit; display:flex; flex-direction:column;
}
.pk-card:hover {
    box-shadow:0 4px 20px rgba(0,0,0,.08); transform:translateY(-2px);
}
.pk-card-img {
    width:100%; aspect-ratio:4/3; object-fit:cover; background:#F1F5F9;
}
.pk-card-img-ph {
    width:100%; aspect-ratio:4/3; background:#F1F5F9;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted); font-size:2rem;
}
.pk-card-body { padding:14px 16px; flex:1; display:flex; flex-direction:column; }
.pk-card-cat {
    font-size:.68rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; color:var(--text-muted); margin-bottom:6px;
}
.pk-card-title {
    font-size:.92rem; font-weight:700; line-height:1.35;
    margin-bottom:8px; display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
}
.pk-card-price {
    font-size:1.05rem; font-weight:800; color:#C99A0A; margin-bottom:8px;
}
.pk-card-price small {
    font-size:.72rem; font-weight:500; color:var(--text-muted);
}
.pk-card-meta {
    display:flex; gap:10px; font-size:.72rem; color:var(--text-muted);
    margin-top:auto; padding-top:8px; border-top:1px solid var(--border);
}
.pk-card-meta span { display:inline-flex; align-items:center; gap:4px; }
.pk-card-badge {
    position:absolute; top:10px; left:10px; padding:3px 10px;
    border-radius:6px; font-size:.68rem; font-weight:700;
    background:#F0B90B; color:#1a1a2e;
}
.pk-card-wrap { position:relative; }
.pk-card-cond {
    position:absolute; top:10px; right:10px; padding:3px 8px;
    border-radius:6px; font-size:.65rem; font-weight:600;
    background:rgba(255,255,255,.9); color:var(--text); backdrop-filter:blur(4px);
}

/* ── Item Detail ───────────────────────────────────────── */
.pk-detail { display:grid; grid-template-columns:1fr 380px; gap:2rem; margin-bottom:2rem; }
.pk-gallery { position:relative; }
.pk-gallery-main {
    width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px;
    background:#F1F5F9;
}
.pk-gallery-thumbs {
    display:flex; gap:8px; margin-top:10px;
}
.pk-gallery-thumbs img {
    width:68px; height:52px; object-fit:cover; border-radius:8px;
    border:2px solid transparent; cursor:pointer; transition:border-color .2s;
}
.pk-gallery-thumbs img.active, .pk-gallery-thumbs img:hover {
    border-color:#F0B90B;
}
.pk-detail-info {
    background:#fff; border:1px solid var(--border); border-radius:14px;
    padding:1.5rem; height:fit-content; position:sticky; top:1rem;
}
.pk-detail-price {
    font-size:1.6rem; font-weight:800; color:#C99A0A; margin-bottom:4px;
}
.pk-detail-title {
    font-size:1.15rem; font-weight:700; margin-bottom:1rem; line-height:1.4;
}
.pk-detail-meta {
    display:flex; flex-direction:column; gap:8px;
    font-size:.82rem; color:var(--text-muted); margin-bottom:1.2rem;
    padding-bottom:1.2rem; border-bottom:1px solid var(--border);
}
.pk-detail-meta span { display:flex; align-items:center; gap:8px; }
.pk-detail-meta i { width:16px; text-align:center; color:#C99A0A; }

/* ── Buttons ───────────────────────────────────────────── */
.pk-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:10px 20px; border-radius:10px; font-size:.85rem; font-weight:700;
    border:none; cursor:pointer; text-decoration:none; transition:all .2s;
}
.pk-btn-primary { background:#F0B90B; color:#1a1a2e; }
.pk-btn-primary:hover { background:#D4A30A; }
.pk-btn-success { background:#059669; color:#fff; }
.pk-btn-success:hover { background:#047857; }
.pk-btn-wa { background:#25D366; color:#fff; }
.pk-btn-wa:hover { background:#1FB855; }
.pk-btn-outline {
    background:transparent; border:1px solid var(--border); color:var(--text);
}
.pk-btn-outline:hover { background:#F8FAFC; }
.pk-btn-danger { background:#FEE2E2; color:#991B1B; }
.pk-btn-danger:hover { background:#FECACA; }
.pk-btn-sm { padding:6px 14px; font-size:.78rem; }
.pk-btn-block { width:100%; }
.pk-btn-group { display:flex; gap:8px; }

/* ── Seller card ───────────────────────────────────────── */
.pk-seller-card {
    display:flex; align-items:center; gap:12px;
    padding:12px; background:#FAFAFA; border-radius:10px; margin-bottom:1rem;
}
.pk-seller-avatar {
    width:44px; height:44px; border-radius:50%; object-fit:cover;
}
.pk-seller-name { font-weight:700; font-size:.88rem; }
.pk-seller-badge {
    display:inline-flex; align-items:center; gap:4px;
    font-size:.68rem; font-weight:600; color:#059669;
}
.pk-seller-rating {
    font-size:.78rem; color:var(--text-muted);
}

/* ── Cart ──────────────────────────────────────────────── */
.pk-cart-item {
    display:grid; grid-template-columns:80px 1fr auto; gap:14px;
    align-items:center; padding:14px 0;
    border-bottom:1px solid var(--border);
}
.pk-cart-img {
    width:80px; height:60px; object-fit:cover; border-radius:8px;
    background:#F1F5F9;
}
.pk-cart-title { font-weight:700; font-size:.88rem; margin-bottom:4px; }
.pk-cart-price { font-weight:700; color:#C99A0A; font-size:.9rem; }
.pk-cart-qty {
    display:inline-flex; align-items:center; gap:0; border:1px solid var(--border);
    border-radius:8px; overflow:hidden;
}
.pk-cart-qty button {
    width:32px; height:32px; border:none; background:#F8FAFC;
    cursor:pointer; font-size:.85rem; font-weight:700;
}
.pk-cart-qty button:hover { background:#F1F5F9; }
.pk-cart-qty span {
    width:36px; text-align:center; font-size:.85rem; font-weight:700;
}
.pk-cart-summary {
    background:#fff; border:1px solid var(--border); border-radius:14px;
    padding:1.5rem; position:sticky; top:1rem;
}
.pk-cart-summary h3 { font-size:1rem; font-weight:800; margin:0 0 1rem; }
.pk-cart-row {
    display:flex; justify-content:space-between; font-size:.88rem;
    padding:6px 0;
}
.pk-cart-row.total {
    font-weight:800; font-size:1.05rem; border-top:2px solid var(--border);
    margin-top:8px; padding-top:12px;
}
.pk-cart-layout {
    display:grid; grid-template-columns:1fr 340px; gap:2rem;
}

/* ── Order card ────────────────────────────────────────── */
.pk-order-card {
    background:#fff; border:1px solid var(--border); border-radius:14px;
    padding:1.2rem 1.5rem; margin-bottom:1rem;
}
.pk-order-header {
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:8px; margin-bottom:1rem;
    padding-bottom:.8rem; border-bottom:1px solid var(--border);
}
.pk-order-ref {
    font-weight:800; font-size:.92rem; color:#1a1a2e;
}
.pk-order-date { font-size:.78rem; color:var(--text-muted); }
.pk-order-status {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700;
}
.pk-status-pending_payment { background:#FEF3C7; color:#92400E; }
.pk-status-paid            { background:#D1FAE5; color:#065F46; }
.pk-status-processing      { background:#DBEAFE; color:#1E40AF; }
.pk-status-shipped         { background:#E0E7FF; color:#3730A3; }
.pk-status-delivered       { background:#D1FAE5; color:#065F46; }
.pk-status-completed       { background:#D1FAE5; color:#065F46; }
.pk-status-cancelled       { background:#FEE2E2; color:#991B1B; }
.pk-status-refunded        { background:#F1F5F9; color:#64748B; }

/* ── Receipt ───────────────────────────────────────────── */
.pk-receipt-card {
    background:#FAFAFA; border:1px solid var(--border); border-radius:10px;
    padding:1rem; margin-bottom:.8rem;
}
.pk-receipt-img {
    max-width:200px; border-radius:8px; cursor:pointer;
}
.pk-receipt-status {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 8px; border-radius:10px; font-size:.7rem; font-weight:700;
}
.pk-receipt-pending  { background:#FEF3C7; color:#92400E; }
.pk-receipt-verified { background:#D1FAE5; color:#065F46; }
.pk-receipt-rejected { background:#FEE2E2; color:#991B1B; }

/* ── Reviews ───────────────────────────────────────────── */
.pk-review {
    padding:1rem 0; border-bottom:1px solid var(--border);
}
.pk-review-header {
    display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.pk-review-stars { color:#F0B90B; font-size:.8rem; }
.pk-review-name  { font-weight:700; font-size:.85rem; }
.pk-review-date  { font-size:.72rem; color:var(--text-muted); }
.pk-review-text  { font-size:.88rem; line-height:1.6; }

/* ── Form ──────────────────────────────────────────────── */
.pk-form-card {
    background:#fff; border:1px solid var(--border); border-radius:14px;
    padding:1.8rem; margin-bottom:1.5rem; transition: box-shadow 0.2s;
}
.pk-form-card:hover {
    box-shadow: var(--shadow);
}
.pk-form-card h3 {
    font-size:.95rem; font-weight:800; margin:0 0 1rem;
    padding-bottom:.8rem; border-bottom:1px solid var(--border);
}
.pk-field { margin-bottom:1rem; }
.pk-field label {
    display:block; font-size:.82rem; font-weight:700; margin-bottom:6px;
}
.pk-field label span { color:#EF4444; }
.pk-field input, .pk-field select, .pk-field textarea {
    width:100%; padding:9px 12px; border:1px solid var(--border);
    border-radius:8px; font-size:.85rem; background:#FAFAFA;
    font-family:inherit;
}
.pk-field textarea { min-height:100px; resize:vertical; }
.pk-field-hint {
    font-size:.72rem; color:var(--text-muted); margin-top:4px;
}
.pk-field-row {
    display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.pk-field-row-3 {
    display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;
}

/* ── Empty state ───────────────────────────────────────── */
.pk-empty {
    text-align:center; padding:4rem 1rem; color:var(--text-muted);
}
.pk-empty > i {
    font-size:2.5rem; opacity:.2; display:block; margin-bottom:1rem;
}
.pk-empty p { margin-bottom:1rem; }

/* ── Alerts ────────────────────────────────────────────── */
.pk-alert {
    display:flex; align-items:center; gap:10px;
    padding:12px 16px; border-radius:10px; font-size:.85rem;
    margin-bottom:1rem;
}
.pk-alert-success { background:#D1FAE5; color:#065F46; }
.pk-alert-error   { background:#FEE2E2; color:#991B1B; }
.pk-alert-warning { background:#FEF3C7; color:#92400E; }
.pk-alert-info    { background:#DBEAFE; color:#1E40AF; }

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:768px) {
    .pk-detail         { grid-template-columns:1fr; }
    .pk-cart-layout    { grid-template-columns:1fr; }
    .pk-field-row      { grid-template-columns:1fr; }
    .pk-field-row-3    { grid-template-columns:1fr; }
    .pk-grid           { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
    .pk-card-title     { font-size:.82rem; }
    .pk-card-price     { font-size:.9rem; }
    .pk-filter-bar     { flex-direction:column; }
    .pk-detail-info    { position:static; }
}

/* ── Tambahan UX UI ────────────────────────────────────────────── */
.pk-sticky-actions {
    position: sticky; bottom: 0; background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px); padding: 1.2rem; border: 1px solid var(--border);
    display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
    z-index: 50; border-radius: 12px; margin-top: 2rem; box-shadow: 0 -4px 20px rgba(0,0,0,.05);
}
.pk-file-dropzone {
    border: 2px dashed #CBD5E1; border-radius: 12px; padding: 2.5rem 1rem;
    text-align: center; background: #FAFAFA; transition: all 0.2s; cursor: pointer;
    margin-top: 10px;
}
.pk-file-dropzone:hover { border-color: var(--primary); background: #FFFBEB; }
.pk-file-dropzone input[type="file"] { display: block; margin: 10px auto 0; max-width: 100%; }
.pk-hint-box {
    background: #F8FAFC; border-left: 3px solid #94A3B8; padding: 12px 16px;
    border-radius: 0 8px 8px 0; font-size: .8rem; color: #475569; margin-bottom: 1rem;
}

/* ── Sortable image gallery ── */
.pk-sortable-img { position: relative; }
.pk-sortable-img.dragging { opacity: 0.4; }
.pk-sortable-img.drag-over { outline: 2px dashed #F0B90B; outline-offset: 3px; border-radius: 10px; }
.pk-img-badge {
    position: absolute; bottom: 6px; left: 6px; z-index: 2;
    background: #F0B90B; color: #1a1a1a; font-size: .65rem; font-weight: 800;
    padding: 2px 8px; border-radius: 6px; letter-spacing: .3px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.pk-sortable-img img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.pk-sortable-img button { pointer-events: auto; }

/* State aktif varian (dikongsi: item pasar karat awam + dashboard) */
.pk-variant-active { background:#F0B90B !important; color:#1a1a2e !important; border-color:#F0B90B !important; }

/* ===== Pasar Karat — Browse page (/pasarkarat/) ===== */
.pkb-hero { background:linear-gradient(135deg,#1a1a2e 0%,#2d2d4e 60%,#F0B90B 180%); padding:2.5rem 1rem; text-align:center; color:#fff; }
.pkb-hero h1 { font-size:clamp(1.4rem,3.5vw,2rem); font-weight:800; margin:0 0 .3rem; }
.pkb-hero p { font-size:.9rem; opacity:.75; max-width:520px; margin:0 auto; }
.pkb-wrap { padding-top:1.5rem; padding-bottom:3rem; }
.pkb-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.pkb-search { flex:1; min-width:180px; padding:10px 14px; border:1.5px solid var(--border,#e5e7ef); border-radius:10px; font-family:inherit; font-size:.85rem; }
.pkb-select { padding:10px 12px; border:1.5px solid var(--border,#e5e7ef); border-radius:10px; font-family:inherit; font-size:.82rem; background:#fff; cursor:pointer; }
.pkb-btn { padding:10px 18px; border:none; border-radius:10px; background:#F0B90B; color:#1a1a2e; font-weight:700; font-size:.82rem; cursor:pointer; font-family:inherit; }
.pkb-btn:hover { background:#d9a60a; }
.pkb-cats { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.pkb-cat { padding:6px 14px; border-radius:20px; border:1.5px solid var(--border,#e5e7ef); font-size:.78rem; font-weight:600; text-decoration:none; color:var(--pt-abu,#64748b); background:#fff; transition:all .15s; }
.pkb-cat:hover { border-color:#F0B90B; color:#1a1a2e; }
.pkb-cat.active { background:#F0B90B; border-color:#F0B90B; color:#1a1a2e; }
.pkb-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.pkb-count { font-size:.8rem; color:var(--pt-abu,#64748b); font-weight:600; }
.pkb-reset { font-size:.78rem; color:#dc2626; text-decoration:none; font-weight:600; }
.pkb-cardlink { text-decoration:none; color:inherit; display:block; }
.pkb-noimg { width:100%; aspect-ratio:4/3; background:#F1F5F9; display:flex; align-items:center; justify-content:center; color:#94A3B8; font-size:2rem; }
.pkb-empty { text-align:center; padding:4rem 1rem; color:var(--pt-abu,#64748b); }
.pkb-empty i { font-size:2.5rem; opacity:.4; margin-bottom:12px; display:block; }

/* Seksyen pengirim (dropship) di checkout */
.pk-sender-head { margin-top:1.6rem; }
.pk-sender-hint { font-size:.78rem; color:#94A3B8; margin:-4px 0 12px; }


/* --- item detail (.pk-pub-*) — asal: pasarkarat-item.css (override neutralize digugurkan) --- */
body.page-item { background:#fff; }
.pk-variant-active{background:#F0B90B !important;color:#1a1a2e !important;border-color:#F0B90B !important}
.pk-pub-nav{background:#fff;border-bottom:1px solid #E8E4D0;padding:12px 0;position:sticky;top:0;z-index:100}
.pk-pub-nav .container{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:0 1rem}
.pk-pub-brand{font-size:1.1rem;font-weight:800;color:#1a1a2e;text-decoration:none}
.pk-pub-brand span{color:#F0B90B}
.pk-pub-actions{display:flex;align-items:center;gap:10px}
.pk-pub-actions a{font-size:.8rem;font-weight:600;text-decoration:none;padding:6px 14px;border-radius:8px}
.pk-pub-login{color:#1a1a2e;border:1.5px solid #E8E4D0}
.pk-pub-login:hover{background:#F9F9F6}
.pk-pub-dash{background:#F0B90B;color:#1a1a2e}
.pk-pub-body{max-width:1200px;margin:0 auto;padding:1.5rem 1rem 3rem}
@media(max-width:768px){.pk-detail{grid-template-columns:1fr !important}}



/* ========================================================================
   11. PASARKARAT GUEST (.gc-*) — cart + checkout guest
   ·  asal: pasarkarat-guest.css  (body diskop ke .page-guest)
   ======================================================================== */
/* ==========================================
   LOKASI FOLDER ASAL : /templates/default/assets/css
   NAMA FAIL ASAL     : pasarkarat-guest.css
   NOTA               : Gaya halaman GUEST pasar karat (checkout, cart).
                        Dimuat selepas style.css.
   ========================================== */

body.page-guest { background:#F8FAFC; }

/* ── Checkout ── */
.gco-wrap { max-width:900px; margin:0 auto; padding:24px 16px 80px; display:grid; grid-template-columns:1fr 340px; gap:20px; }
.gco-card { background:#fff; border:1px solid #E2E8F0; border-radius:14px; padding:22px; }
.gco-span2 { grid-column:1/-1; }
.gco-selfstart { align-self:start; }
.gco-h { font-size:1.05rem; font-weight:800; margin:0 0 14px; }
.gco-mt { margin-top:18px; }
.gco-center { text-align:center; }
.gco-req { color:#DC2626; }

.gco-field { margin-bottom:12px; }
.gco-field label { display:block; font-size:.8rem; font-weight:600; margin-bottom:5px; }
.gco-field input, .gco-field select, .gco-field textarea { width:100%; padding:10px 12px; border:1.5px solid #E2E8F0; border-radius:9px; font-size:.86rem; font-family:inherit; box-sizing:border-box; }
.gco-field input:focus, .gco-field select:focus, .gco-field textarea:focus { outline:none; border-color:#F0B90B; }
.gco-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.gco-pay { display:flex; align-items:center; gap:10px; border:1.5px solid #E2E8F0; border-radius:10px; padding:11px 14px; margin-bottom:8px; cursor:pointer; }
.gco-pay.sel { border-color:#F0B90B; background:#FFFBEB; }
.gco-pay-label { font-weight:700; font-size:.86rem; }

.gco-sum-row { display:flex; justify-content:space-between; font-size:.85rem; padding:6px 0; }
.gco-sum-sub { border-top:1px solid #EEF2F7; margin-top:8px; padding-top:10px; }
.gco-sum-total { display:flex; justify-content:space-between; font-weight:800; font-size:1rem; border-top:1px solid #EEF2F7; padding-top:10px; margin-top:6px; }
.gco-item { display:flex; justify-content:space-between; font-size:.82rem; padding:6px 0; gap:10px; }
.gco-multiseller { font-size:.75rem; color:#94A3B8; margin-top:12px; }

.gco-btn { width:100%; background:#F0B90B; color:#1a1a2e; border:none; border-radius:10px; padding:13px; font-weight:800; font-size:.9rem; cursor:pointer; margin-top:12px; }
.gco-btn-inline { display:inline-block; width:auto; text-decoration:none; margin-top:16px; padding:11px 26px; }

.gco-alert { background:#FEF2F2; border:1px solid #FCA5A5; color:#991B1B; border-radius:10px; padding:12px 14px; font-size:.84rem; margin-bottom:14px; }
.gco-login-hint { font-size:.8rem; color:#64748B; margin-bottom:14px; }
.gco-login-hint a { color:#C99A0A; font-weight:700; }

/* Success state */
.gco-ok { background:#F0FDF4; border:1px solid #86EFAC; color:#166534; border-radius:12px; padding:22px; text-align:center; }
.gco-ok-icon { font-size:2.5rem; }
.gco-ok-ref { font-size:.9rem; }
.gco-ok-note { font-size:.82rem; color:#166534; margin-top:14px; }
.gco-bank { text-align:left; max-width:360px; margin:16px auto 0; background:#fff; border:1px solid #E2E8F0; border-radius:10px; padding:14px; }
.gco-bank-title { font-weight:700; margin-bottom:6px; }
.gco-bank-line { font-size:.85rem; }
.gco-bank-no { font-size:.85rem; font-weight:700; }
.gco-bank-name { font-size:.85rem; color:#64748B; }

@media (max-width:760px) { .gco-wrap { grid-template-columns:1fr; } }

/* ── Cart (guest) ── */
.gc-wrap { max-width:800px; margin:0 auto; padding:24px 16px 80px; }
.gc-back { font-size:.82rem; color:#64748B; text-decoration:none; display:inline-flex; align-items:center; gap:4px; margin-bottom:1rem; }
.gc-heading { font-size:1.3rem; font-weight:800; margin-bottom:1.5rem; }
.gc-heading-ic { color:#F0B90B; }

.gc-card { background:#fff; border:1px solid #E2E8F0; border-radius:12px; padding:16px; margin-bottom:10px; display:flex; gap:12px; align-items:flex-start; }
.gc-img { width:60px; height:60px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.gc-noimg { display:flex; align-items:center; justify-content:center; background:#F1F5F9; color:#94A3B8; font-size:1.2rem; }
.gc-info { flex:1; min-width:0; }
.gc-title { font-size:.88rem; font-weight:700; text-decoration:none; color:inherit; display:block; }
.gc-price { font-size:.82rem; color:#F0B90B; font-weight:700; margin-top:2px; }

.gc-qtyform { display:flex; align-items:center; gap:8px; margin-top:8px; }
.gc-qbtn { width:28px; height:28px; border:1.5px solid #E2E8F0; background:#fff; border-radius:7px; cursor:pointer; font-weight:800; font-size:1rem; line-height:1; color:#1E293B; font-family:inherit; }
.gc-qbtn:hover:not(:disabled) { border-color:#F0B90B; }
.gc-qbtn:disabled { opacity:.4; cursor:not-allowed; }
.gc-qval { min-width:26px; text-align:center; font-weight:700; font-size:.9rem; }
.gc-stock { font-size:.72rem; color:#94A3B8; margin-top:4px; }
.gc-stock-warn { color:#DC2626; }

.gc-right { text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.gc-total { font-size:.85rem; font-weight:800; }
.gc-removeform { margin:0; }
.gc-remove { background:none; border:none; color:#EF4444; cursor:pointer; font-size:.8rem; padding:2px; }

.gc-btn { padding:8px 20px; border-radius:8px; font-size:.82rem; font-weight:700; text-decoration:none; border:none; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:6px; }
.gc-btn-gold { background:#F0B90B; color:#1a1a2e; }
.gc-btn-outline { background:transparent; border:1.5px solid #E2E8F0; color:#1E293B; }

.gc-empty { text-align:center; padding:4rem 1rem; color:#94A3B8; }
.gc-empty-ic { font-size:2.5rem; opacity:.3; display:block; margin-bottom:.8rem; }
.gc-empty-btn { display:inline-block; margin-top:1rem; }

.gc-foot { background:#fff; border:1px solid #E2E8F0; border-radius:12px; padding:16px; margin-top:1rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.gc-foot-total { font-size:1rem; font-weight:800; }
.gc-foot-amount { color:#F0B90B; }
.gc-foot-actions { display:flex; gap:8px; align-items:center; }

/* Kumpulan ikut penjual (cart bersatu) */
.gc-seller { border:1px solid #E2E8F0; border-radius:14px; background:#fff; margin-bottom:14px; overflow:hidden; }
.gc-seller-head { display:flex; align-items:center; gap:8px; padding:10px 14px; background:#F8FAFC; border-bottom:1px solid #E2E8F0; font-size:.82rem; font-weight:700; color:#1E293B; }
.gc-seller-sub { padding:10px 14px; border-top:1px dashed #E2E8F0; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:.82rem; color:#475569; }
.gc-btn-sm { padding:7px 14px; font-size:.78rem; }
.gc-multinote { font-size:.8rem; color:#64748B; }
.gco-readonly { padding:10px 12px; border:1.5px solid #E2E8F0; border-radius:8px; background:#F8FAFC; color:#475569; font-size:.88rem; }
.gco-hint { display:block; margin-top:4px; font-size:.72rem; color:#94A3B8; }

/* ── Jejak Pesanan (track) ── */
.jt-wrap { max-width:560px; margin:2rem auto 3rem; padding:0 16px; display:flex; flex-direction:column; gap:16px; }
.jt-card { background:#fff; border:1px solid #E2E8F0; border-radius:16px; padding:24px; box-shadow:0 2px 12px rgba(15,23,42,.05); }
.jt-h { font-size:1.15rem; font-weight:800; color:#1a1a2e; margin-bottom:4px; }
.jt-sub { font-size:.82rem; color:#64748B; margin-bottom:16px; }
.jt-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:2px; }
.jt-ref { font-size:1.05rem; font-weight:800; color:#1a1a2e; }
.jt-status { font-size:.7rem; font-weight:800; padding:4px 14px; border-radius:20px; background:#EEF2FF; color:#3730A3; white-space:nowrap; }
.jt-date { font-size:.74rem; color:#94A3B8; margin-bottom:12px; }
.jt-item { display:flex; justify-content:space-between; gap:10px; font-size:.85rem; padding:9px 0; border-bottom:1px dashed #E2E8F0; }
.jt-total { display:flex; justify-content:space-between; font-size:.92rem; font-weight:800; padding:12px 0 4px; }
.jt-total span:last-child { color:#C99A0A; }
.jt-track { margin-top:10px; padding:12px 14px; background:#FFFBEB; border:1px solid #FDE68A; border-radius:10px; font-size:.84rem; }
.jt-btn-link { display:block; text-align:center; margin-top:14px; padding:12px; border-radius:10px; background:#F0B90B; color:#1a1a2e; font-weight:800; font-size:.86rem; text-decoration:none; }
.gc-seller .gc-card { border:0; border-radius:0; margin:0; border-bottom:1px solid #F1F5F9; }
.gc-seller .gc-card:last-of-type { border-bottom:0; }
.gc-tag-drop { display:inline-block; margin-left:6px; padding:2px 7px; border-radius:5px; background:#DBEAFE; color:#1D4ED8; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.gc-variant { font-size:.75rem; color:#64748B; margin-top:2px; }


/* ========================================================================
   12. KEDAI browse (.kb-*) — direktori
   ·  asal: kedai-browse.css  (body diskop ke .page-kedai)
   ======================================================================== */
/* ==========================================
   LOKASI FOLDER ASAL : /templates/default/assets/css
   NAMA FAIL ASAL     : kedai-browse.css
   NOTA               : Gaya khusus halaman DIREKTORI/BROWSE kedai (public).
                        Dimuat selepas style.css.
   ========================================== */

        body.page-kedai{background:#F5F3EE}

    /* Nav */
    .kb-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid #E8E4D0;height:56px}
    .kb-nav .inner{max-width:1100px;margin:0 auto;padding:0 1rem;height:100%;display:flex;align-items:center;justify-content:space-between}
    .kb-brand{font-weight:800;font-size:1.1rem;color:#1a1a2e;text-decoration:none}
    .kb-brand span{color:#C99A0A}
    .kb-actions{display:flex;align-items:center;gap:8px}
    .kb-actions a{font-size:.78rem;font-weight:600;padding:6px 14px;border-radius:8px;text-decoration:none;transition:background .15s}
    .kb-btn-o{border:1.5px solid #E8E4D0;color:#1a1a2e}.kb-btn-o:hover{background:#F5F3EE}
    .kb-btn-g{background:#F0B90B;color:#1a1a2e}.kb-btn-g:hover{background:#D4A30A}
    .kb-lang{display:flex;border:1.5px solid #E8E4D0;border-radius:6px;overflow:hidden;font-size:.72rem;font-weight:700}
    .kb-lang a{padding:4px 10px;color:#64748B;text-decoration:none}.kb-lang a.active{background:#F0B90B;color:#1a1a2e}

    /* Hero */
    .kb-hero{background:linear-gradient(135deg,#1a1a2e 0%,#2d2d4e 60%,#C99A0A 180%);padding:3rem 1rem;text-align:center;color:#fff}
    .kb-hero h1{font-size:clamp(1.4rem,3.5vw,2rem);font-weight:800;margin-bottom:.3rem}
    .kb-hero p{font-size:.9rem;opacity:.7;max-width:500px;margin:0 auto}

    /* Search bar */
    .kb-search{max-width:700px;margin:-26px auto 0;position:relative;z-index:2;padding:0 1rem}
    .kb-search form{display:flex;background:#fff;border:2px solid #E8E4D0;border-radius:14px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.06)}
    .kb-search input{flex:1;padding:14px 18px;border:none;font-size:.88rem;font-family:inherit;outline:none;min-width:0}
    .kb-search select{border:none;border-left:1px solid #E8E4D0;padding:14px 12px;font-size:.82rem;font-family:inherit;color:#64748B;background:#FAFAF8;cursor:pointer;outline:none}
    .kb-search button{background:#F0B90B;border:none;padding:14px 24px;cursor:pointer;font-weight:700;font-size:.85rem;font-family:inherit;color:#1a1a2e;transition:background .15s}
    .kb-search button:hover{background:#D4A30A}

    /* Content */
    .kb-body{max-width:1100px;margin:0 auto;padding:2rem 1rem 3rem}

    /* Category pills */
    .kb-cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;margin-bottom:1.5rem}
    .kb-cats::-webkit-scrollbar{display:none}
    .kb-cat{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;border-radius:20px;font-size:.78rem;font-weight:600;white-space:nowrap;background:#fff;border:1.5px solid #E8E4D0;color:#64748B;text-decoration:none;transition:all .15s}
    .kb-cat:hover{border-color:#C99A0A;color:#1a1a2e}
    .kb-cat.active{background:#F0B90B;border-color:#F0B90B;color:#1a1a2e}

    /* Grid */
    .kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
    @media(max-width:500px){.kb-grid{grid-template-columns:1fr}}

    /* Card */
    .kb-card{display:flex;gap:14px;padding:16px;background:#fff;border:1px solid #E8E4D0;border-radius:14px;text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}
    .kb-card:hover{border-color:#F0B90B;box-shadow:0 4px 16px rgba(240,185,11,.12)}
    .kb-logo{width:60px;height:60px;border-radius:12px;object-fit:cover;flex-shrink:0;background:#F1F5F9}
    .kb-logo-ph{width:60px;height:60px;border-radius:12px;flex-shrink:0;background:#FEF3C7;display:flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;color:#C99A0A}
    .kb-name{font-weight:700;font-size:.9rem;margin-bottom:3px}
    .kb-tagline{font-size:.76rem;color:#64748B;line-height:1.4;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
    .kb-meta{display:flex;align-items:center;gap:10px;font-size:.72rem;color:#64748B;margin-top:6px;flex-wrap:wrap}
    .kb-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:.6rem;font-weight:700}
    .kb-wa{width:36px;height:36px;border-radius:10px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem;margin-left:auto;transition:transform .15s}
    .kb-wa:hover{transform:scale(1.08)}

    /* Sort bar */
    .kb-sort{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:8px}
    .kb-sort-label{font-size:.82rem;color:#64748B;font-weight:600}
    .kb-sort select{border:1.5px solid #E8E4D0;border-radius:8px;padding:6px 12px;font-size:.78rem;font-family:inherit;background:#fff;cursor:pointer}

    /* Empty */
    .kb-empty{text-align:center;padding:3rem 1rem;color:#64748B}
    .kb-empty i{font-size:2.5rem;opacity:.3;display:block;margin-bottom:.8rem}

    /* CTA daftar */
    .kb-cta{background:linear-gradient(135deg,#1a1a2e,#2d2d4e);border-radius:16px;padding:2rem;text-align:center;color:#fff;margin-top:2rem}
    .kb-cta h3{font-size:1.1rem;font-weight:800;margin-bottom:.5rem}
    .kb-cta p{font-size:.84rem;opacity:.6;margin-bottom:1.2rem}
    .kb-cta a{display:inline-flex;align-items:center;gap:6px;background:#F0B90B;color:#1a1a2e;padding:12px 24px;border-radius:10px;font-weight:700;font-size:.88rem;text-decoration:none}

    /* Footer */
    .kb-footer{background:#1a1a2e;color:rgba(255,255,255,.4);text-align:center;padding:2rem 1rem;font-size:.75rem}



/* ========================================================================
   13. KEDAI landing (.kd-*) — profil kedai
   ·  asal: inline <style> dalam kedai.php (dikeluarkan ke sini)
   ======================================================================== */
    /* ── Nav ── */
    .kd-nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid #E8E4D0;height:56px}
    .kd-nav .inner{max-width:1000px;margin:0 auto;padding:0 1rem;height:100%;display:flex;align-items:center;justify-content:space-between}
    .kd-brand{font-weight:800;font-size:1.1rem;color:#1a1a2e}
    .kd-brand span{color:#C99A0A}
    .kd-nav-actions{display:flex;align-items:center;gap:8px}
    .kd-nav-actions a{font-size:.78rem;font-weight:600;padding:6px 14px;border-radius:8px;transition:background .15s}
    .kd-btn-outline{border:1.5px solid #E8E4D0;color:#1a1a2e}.kd-btn-outline:hover{background:#F5F3EE}
    .kd-btn-gold{background:#F0B90B;color:#1a1a2e;border:none}.kd-btn-gold:hover{background:#D4A30A}
    .kd-lang{display:flex;border:1.5px solid #E8E4D0;border-radius:6px;overflow:hidden;font-size:.72rem;font-weight:700}
    .kd-lang a{padding:4px 10px;color:#64748B}.kd-lang a.active{background:#F0B90B;color:#1a1a2e}

    /* ── Hero Cover ── */
    .kd-hero{position:relative;height:320px;overflow:hidden;background:#1a1a2e}
    .kd-hero img{width:100%;height:100%;object-fit:cover;opacity:.85}
    .kd-hero-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(26,26,46,.85) 100%)}
    .kd-hero-ph{width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e 0%,#2d2d4e 50%,#C99A0A 150%);display:flex;align-items:center;justify-content:center}
    .kd-hero-ph i{font-size:4rem;color:rgba(255,255,255,.08)}

    /* ── Profile strip ── */
    .kd-profile{max-width:1000px;margin:-48px auto 0;padding:0 1rem;position:relative;z-index:2}
    .kd-profile-inner{display:flex;align-items:flex-end;gap:20px}
    .kd-logo{width:96px;height:96px;border-radius:18px;object-fit:cover;border:4px solid #fff;box-shadow:0 4px 20px rgba(0,0,0,.15);background:#fff;flex-shrink:0}
    .kd-logo-ph{width:96px;height:96px;border-radius:18px;border:4px solid #fff;box-shadow:0 4px 20px rgba(0,0,0,.15);background:linear-gradient(135deg,#F0B90B,#C99A0A);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;color:#fff;flex-shrink:0}
    .kd-name{font-size:1.5rem;font-weight:800;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3);line-height:1.2}
    .kd-tagline{font-size:.88rem;color:rgba(255,255,255,.8);margin-top:2px;text-shadow:0 1px 4px rgba(0,0,0,.2)}
    .kd-badges{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
    .kd-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;font-size:.7rem;font-weight:700;backdrop-filter:blur(8px)}
    .kd-badge-verified{background:rgba(5,150,105,.9);color:#fff}
    .kd-badge-open{background:rgba(5,150,105,.85);color:#fff}
    .kd-badge-closed{background:rgba(220,38,38,.85);color:#fff}
    .kd-badge-featured{background:rgba(240,185,11,.9);color:#1a1a2e}
    .kd-badge-cat{background:rgba(255,255,255,.2);color:#fff}

    /* ── Content ── */
    .kd-body{max-width:1000px;margin:0 auto;padding:1.5rem 1rem 3rem}
    .kd-grid{display:grid;grid-template-columns:1fr 340px;gap:1.5rem}
    .kd-card{background:#fff;border:1px solid #E8E4D0;border-radius:16px;padding:1.5rem;margin-bottom:1rem}
    .kd-card h3{font-size:.92rem;font-weight:800;margin-bottom:1rem;display:flex;align-items:center;gap:8px}
    .kd-card h3 i{color:#C99A0A;font-size:.8rem}
    .kd-desc{font-size:.88rem;line-height:1.9;color:#334155}

    /* ── Stats bar ── */
    .kd-stats{display:flex;gap:1px;background:#E8E4D0;border-radius:12px;overflow:hidden;margin-bottom:1rem}
    .kd-stat{flex:1;text-align:center;padding:14px 8px;background:#fff}
    .kd-stat:first-child{border-radius:12px 0 0 12px}.kd-stat:last-child{border-radius:0 12px 12px 0}
    .kd-stat .val{font-size:1.1rem;font-weight:800;color:#1a1a2e}
    .kd-stat .lbl{font-size:.65rem;color:#64748B;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}

    /* ── CTA button ── */
    .kd-cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:12px;font-size:.9rem;font-weight:700;transition:transform .1s,box-shadow .15s;border:none;cursor:pointer;width:100%}
    .kd-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
    .kd-cta-wa{background:#25D366;color:#fff}.kd-cta-wa:hover{background:#1DAE54}
    .kd-cta-call{background:#059669;color:#fff}
    .kd-cta-outline{background:#fff;border:1.5px solid #E8E4D0;color:#1a1a2e}.kd-cta-outline:hover{border-color:#C99A0A}

    /* ── Quick links ── */
    .kd-link{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:10px;font-size:.82rem;font-weight:600;transition:background .12s;color:#1a1a2e}
    .kd-link:hover{background:#F5F3EE}
    .kd-link i{width:18px;text-align:center;font-size:.85rem}
    .kd-link .arrow{margin-left:auto;color:#CBD5E1;font-size:.7rem}

    /* ── Hours ── */
    .kd-hours-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.82rem;border-bottom:1px solid #F5F3EE}
    .kd-hours-row:last-child{border:none}
    .kd-hours-day{font-weight:700;width:80px}
    .kd-hours-time{color:#64748B}
    .kd-hours-today{background:#FEF3C7;margin:0 -14px;padding:8px 14px;border-radius:8px;border:none}

    /* ── Gallery ── */
    .kd-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
    .kd-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;transition:transform .2s;cursor:pointer}
    .kd-gallery img:hover{transform:scale(1.03)}

    /* ── Reviews ── */
    .kd-review{padding:16px 0;border-bottom:1px solid #F5F3EE}
    .kd-review:last-child{border:none}
    .kd-stars{display:flex;gap:2px}
    .kd-stars i{font-size:.65rem}
    .kd-review-form{background:#FAFAF8;border:1px solid #E8E4D0;border-radius:12px;padding:16px}
    .kd-review-form textarea{width:100%;border:1px solid #E8E4D0;border-radius:8px;padding:10px 12px;font-size:.84rem;font-family:inherit;resize:vertical;min-height:60px}
    .kd-review-form textarea:focus{outline:none;border-color:#F0B90B}

    /* ── Social icons ── */
    .kd-social{display:flex;gap:8px}
    .kd-social a{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:transform .15s}
    .kd-social a:hover{transform:scale(1.1)}

    /* ── Footer ── */
    .kd-footer{background:#1a1a2e;color:rgba(255,255,255,.4);text-align:center;padding:2rem 1rem;font-size:.75rem}

    /* ── Alert ── */
    .kd-alert{padding:12px 16px;border-radius:10px;font-size:.82rem;font-weight:600;margin-bottom:1rem;display:flex;align-items:center;gap:8px}
    .kd-alert-ok{background:#D1FAE5;color:#059669}
    .kd-alert-err{background:#FEE2E2;color:#DC2626}

    /* ── Map ── */
    .kd-map{height:220px;border-radius:12px;overflow:hidden;border:1px solid #E8E4D0}

    @media(max-width:768px){
        .kd-grid{grid-template-columns:1fr}
        .kd-hero{height:200px}
        .kd-profile-inner{gap:14px}
        .kd-logo,.kd-logo-ph{width:72px;height:72px;border-radius:14px}
        .kd-name{font-size:1.15rem}
        .kd-stats{flex-wrap:wrap}.kd-stat{min-width:calc(50% - 1px)}
    }



/* ========================================================================
   14. KERJA browse (.kj-*) — jobs
   ·  asal: kerja-index.css  (body diskop ke .page-kerja)
   ======================================================================== */
/* ==========================================
   LOKASI FOLDER ASAL : /templates/default/assets/css
   NAMA FAIL ASAL     : kerja-index.css
   NOTA               : Gaya khusus halaman SENARAI kerja (public).
                        Dimuat selepas style.css.
   ========================================== */

body.page-kerja{background:#F8FAFC}
.kj-wrap{max-width:1000px;margin:0 auto;padding:24px 16px 80px}
.kj-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:1.5rem}
.kj-header h1{font-size:1.5rem;font-weight:800;margin:0}
.kj-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:1.5rem;align-items:center}
.kj-search{flex:1;min-width:200px;position:relative}
.kj-search input{width:100%;padding:10px 14px 10px 36px;border:1.5px solid #E2E8F0;border-radius:10px;font-size:.85rem;font-family:inherit}
.kj-search input:focus{outline:none;border-color:#F0B90B}
.kj-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#94A3B8;font-size:.8rem}
.kj-select{padding:9px 12px;border:1.5px solid #E2E8F0;border-radius:10px;font-size:.82rem;font-family:inherit;background:#fff;min-width:140px}
.kj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.kj-card{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:18px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;transition:box-shadow .2s}
.kj-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.kj-title{font-size:.92rem;font-weight:700;color:#1E293B}
.kj-co{font-size:.78rem;color:#64748B}
.kj-pills{display:flex;flex-wrap:wrap;gap:5px}
.kj-pill{font-size:.68rem;font-weight:600;padding:3px 8px;border-radius:5px;background:#F1F5F9;color:#475569}
.kj-pill.type{background:#D1FAE5;color:#065F46}
.kj-pill.urgent{background:#FEE2E2;color:#991B1B}
.kj-pill.wfh{background:#EDE9FE;color:#5B21B6}
.kj-pill.salary{background:#FEF3C7;color:#92400E;font-size:.75rem}
.kj-empty{text-align:center;padding:4rem 1rem;color:#94A3B8}
.kj-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:10px;font-size:.85rem;font-weight:700;text-decoration:none;background:#F0B90B;color:#1a1a2e}
.kj-btn:hover{opacity:.85}
@media(max-width:640px){.kj-grid{grid-template-columns:1fr}}



/* ========================================================================
   15. KERJA lihat (.jd-*) — detail kerja
   ·  asal: kerja-lihat.css  (body digugur — guna .page-kerja section 14)
   ======================================================================== */
/* ==========================================
   LOKASI FOLDER ASAL : /templates/default/assets/css
   NAMA FAIL ASAL     : kerja-lihat.css
   NOTA               : Gaya khusus halaman LIHAT kerja (public).
                        Dimuat selepas style.css.
   ========================================== */
.jb-wrap { max-width:840px; margin:0 auto; padding:24px 16px 80px }
.jb-back { font-size:.82rem; color:#64748B; text-decoration:none; display:inline-flex; align-items:center; gap:4px; margin-bottom:1rem }
.jb-back:hover { color:#1E293B }
.jb-card { background:#fff; border:1px solid #E2E8F0; border-radius:14px; overflow:hidden }
.jb-header { padding:24px; border-bottom:1px solid #E2E8F0 }
.jb-logo { width:56px; height:56px; border-radius:12px; object-fit:cover; border:1px solid #E2E8F0; flex-shrink:0 }
.jb-logo-ph { width:56px; height:56px; border-radius:12px; background:#FEF3C7; color:#C99A0A; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; flex-shrink:0 }
.jb-title { font-size:1.3rem; font-weight:800; margin:0 0 4px }
.jb-meta { font-size:.82rem; color:#64748B; display:flex; flex-wrap:wrap; gap:12px; margin-top:6px }
.jb-meta svg { width:12px; height:12px }
.jb-pills { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px }
.jb-pill { font-size:.72rem; font-weight:600; padding:4px 10px; border-radius:6px; background:#F1F5F9; color:#475569 }
.jb-pill.urgent { background:#FEE2E2; color:#991B1B }
.jb-pill.type { background:#D1FAE5; color:#065F46 }
.jb-pill.mode { background:#EDE9FE; color:#5B21B6 }
.jb-pill.salary { background:#FEF3C7; color:#92400E; font-size:.78rem }
.jb-body { padding:24px; display:flex; flex-direction:column; gap:24px }
.jb-section h3 { font-size:.88rem; font-weight:700; margin:0 0 10px; display:flex; align-items:center; gap:6px }
.jb-section h3 i { color:#C99A0A; font-size:.75rem }
.jb-text { font-size:.85rem; color:#475569; line-height:1.8; white-space:pre-line }
.jb-apply-box { background:#FFFBEB; border:1px solid #FDE68A; border-radius:12px; padding:20px }
.jb-apply-box h3 { margin:0 0 12px; font-size:.9rem; font-weight:700 }
.jb-btn { display:inline-flex; align-items:center; gap:6px; padding:10px 20px; border-radius:8px; font-size:.82rem; font-weight:700; text-decoration:none; border:none; cursor:pointer; transition:opacity .2s }
.jb-btn:hover { opacity:.85 }
.jb-btn-gold { background:#F0B90B; color:#1a1a2e }
.jb-btn-wa { background:#25D366; color:#fff }
.jb-btn-outline { background:transparent; border:1.5px solid #E2E8F0; color:#1E293B }
.jb-applied { padding:12px 16px; background:#D1FAE5; border-radius:8px; font-size:.82rem; font-weight:600; color:#065F46 }
.jb-textarea { width:100%; padding:10px 14px; border:1px solid #E2E8F0; border-radius:8px; font-size:.82rem; font-family:inherit; resize:vertical; min-height:80px }
.jb-alert-ok { padding:12px 16px; background:#D1FAE5; border-radius:8px; font-size:.82rem; color:#065F46; margin-bottom:1rem }
.jb-alert-err { padding:12px 16px; background:#FEE2E2; border-radius:8px; font-size:.82rem; color:#991B1B; margin-bottom:1rem }
@media (max-width:640px) { .jb-header { padding:16px } .jb-body { padding:16px } .jb-title { font-size:1.1rem } }



/* ========================================================================
   16. ACARA (.ev-*/.evb-*) — browse/detail/tiket
   ·  asal: acara.css
   ======================================================================== */
/* ==========================================
   NAMA FAIL : acara.css
   NOTA      : Gaya modul Acara (dashboard + awam).
   ========================================== */

.ev-hidden { display:none; }
.ev-wrap { max-width:1100px; }
.ev-strava { color:#FC4C02; }

.ev-alert { padding:12px 16px; border-radius:10px; font-size:.85rem; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.ev-alert-success { background:#F0FDF4; border:1px solid #86EFAC; color:#166534; }
.ev-alert-danger { background:#FEF2F2; border:1px solid #FCA5A5; color:#991B1B; }

.ev-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.ev-filter { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.ev-input { flex:1; min-width:180px; padding:9px 13px; border:1.5px solid var(--border,#e5e7ef); border-radius:9px; font-family:inherit; font-size:.85rem; }
.ev-select { padding:9px 12px; border:1.5px solid var(--border,#e5e7ef); border-radius:9px; font-family:inherit; font-size:.82rem; background:#fff; cursor:pointer; }

.ev-table-card { background:#fff; border:1px solid var(--border,#e5e7ef); border-radius:12px; overflow:hidden; }
.ev-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.ev-table thead th { text-align:left; padding:12px 16px; background:var(--bg,#f4f6fb); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#64748b); border-bottom:1px solid var(--border,#e5e7ef); }
.ev-table td { padding:12px 16px; border-bottom:1px solid var(--border,#eef2f7); vertical-align:middle; }
.ev-table tbody tr:last-child td { border-bottom:none; }
.ev-table tbody tr:hover { background:#F9FAFB; }
.ev-th-action { text-align:right; white-space:nowrap; }
.ev-cell { display:flex; align-items:center; gap:12px; }
.ev-thumb { width:46px; height:46px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.ev-thumb-ph { background:#F1F5F9; display:flex; align-items:center; justify-content:center; color:#94A3B8; }
.ev-cell-title { font-weight:700; font-size:.86rem; }
.ev-cell-sub { font-size:.72rem; color:var(--muted,#64748b); }

.ev-empty { text-align:center; padding:4rem 1rem; color:var(--muted,#64748b); background:#fff; border:1px solid var(--border,#e5e7ef); border-radius:12px; }
.ev-empty i { font-size:2.5rem; opacity:.35; display:block; margin-bottom:12px; }
.ev-empty p { margin-bottom:16px; }

/* Borang */
.ev-backhead { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.ev-back { color:var(--muted,#64748b); text-decoration:none; font-size:1rem; }
.ev-card { background:#fff; border:1px solid var(--border,#e5e7ef); border-radius:12px; padding:18px 20px; margin-bottom:16px; }
.ev-card-title { font-size:.9rem; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--border,#eef2f7); }
.ev-card-title i { color:var(--gold,#F0B90B); }
.ev-strava-card .ev-card-title i { color:#FC4C02; }
.ev-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ev-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:700px){ .ev-grid2, .ev-grid3 { grid-template-columns:1fr; } }
.ev-check { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.85rem; font-weight:600; }
.ev-check input { width:16px; height:16px; accent-color:#FC4C02; }
.ev-preview { max-width:240px; border-radius:10px; margin-bottom:12px; display:block; }
.ev-mb { margin-bottom:12px; }
.ev-mt { margin-top:14px; }
.ev-formfoot { display:flex; justify-content:flex-end; gap:10px; margin:20px 0 40px; }

/* Peserta / leaderboard */
.ev-stats { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.ev-stat { flex:1; min-width:120px; background:#fff; border:1px solid var(--border,#e5e7ef); border-radius:12px; padding:16px 18px; text-align:center; }
.ev-stat-n { display:block; font-size:1.6rem; font-weight:800; color:var(--text,#1a1a2e); }
.ev-stat-l { font-size:.72rem; color:var(--muted,#64748b); text-transform:uppercase; letter-spacing:.04em; }
.ev-lb-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.ev-title-plain { border:none !important; margin:0 !important; padding:0 !important; }
.ev-table-nested { border:none !important; }
.ev-link-plain { text-decoration:none; color:inherit; }
.ev-lb-val { font-weight:800; color:#FC4C02; }
.ev-rank { font-weight:800; white-space:nowrap; }
.ev-type { font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:20px; }
.ev-type-rsvp { background:#EFF6FF; color:#1D4ED8; }
.ev-type-ticket { background:#FFF7ED; color:#C2410C; }
.ev-pay { font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:20px; }
.ev-pay-paid { background:#F0FDF4; color:#166534; }
.ev-pay-unpaid { background:#FEF2F2; color:#991B1B; }
.ev-pay-refunded { background:#F1F5F9; color:#475569; }
.ev-status-form { margin:0; }
.ev-status-sel { border:none; cursor:pointer; font-family:inherit; font-weight:700; }

/* ══════════ AWAM: Browse /acara/ ══════════ */
.evb-hero { background:linear-gradient(135deg,#7C2D12 0%,#C2410C 55%,#F0B90B 200%); padding:3rem 1rem; text-align:center; color:#fff; }
.evb-hero h1 { font-size:clamp(1.5rem,4vw,2.2rem); font-weight:800; margin:0 0 .4rem; }
.evb-hero p { font-size:.92rem; opacity:.9; max-width:560px; margin:0 auto 1rem; }
.evb-cta { display:inline-flex; align-items:center; gap:8px; background:#fff; color:#C2410C; padding:9px 18px; border-radius:24px; font-weight:700; font-size:.85rem; text-decoration:none; }
.evb-wrap { padding-top:1.5rem; padding-bottom:3rem; }
.evb-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.evb-search { flex:1; min-width:160px; padding:11px 15px; border:1.5px solid #e5e7ef; border-radius:10px; font-family:inherit; font-size:.86rem; }
.evb-select { padding:11px 13px; border:1.5px solid #e5e7ef; border-radius:10px; font-family:inherit; font-size:.83rem; background:#fff; cursor:pointer; }
.evb-btn { padding:11px 18px; border:none; border-radius:10px; background:#C2410C; color:#fff; font-weight:700; cursor:pointer; }
.evb-cats { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.evb-cat { padding:7px 15px; border-radius:22px; border:1.5px solid #e5e7ef; font-size:.79rem; font-weight:600; text-decoration:none; color:#64748b; background:#fff; display:inline-flex; align-items:center; gap:6px; }
.evb-cat:hover { border-color:#C2410C; color:#C2410C; }
.evb-cat.active { background:#C2410C; border-color:#C2410C; color:#fff; }
.evb-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.evb-count { font-size:.82rem; color:#64748b; font-weight:600; }
.evb-reset { font-size:.79rem; color:#dc2626; text-decoration:none; font-weight:600; }
.evb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:18px; }
.evb-card { display:flex; flex-direction:column; background:#fff; border:1px solid #E8E4D0; border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .18s,transform .18s; }
.evb-card:hover { box-shadow:0 10px 28px rgba(194,65,12,.14); transform:translateY(-3px); }
.evb-card-img { position:relative; aspect-ratio:16/9; background:#F1F5F9; }
.evb-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.evb-noimg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#94A3B8; font-size:2rem; }
.evb-date { position:absolute; top:12px; left:12px; background:#fff; border-radius:10px; padding:6px 10px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.12); line-height:1; }
.evb-date-d { display:block; font-size:1.2rem; font-weight:800; color:#C2410C; }
.evb-date-m { display:block; font-size:.62rem; font-weight:700; text-transform:uppercase; color:#64748b; }
.evb-strava { position:absolute; top:12px; right:12px; background:#FC4C02; color:#fff; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.82rem; }
.evb-card-body { padding:16px; display:flex; flex-direction:column; flex:1; }
.evb-card-cat { font-size:.68rem; font-weight:700; color:#C2410C; text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; }
.evb-card-body h3 { font-size:1rem; font-weight:800; margin:0 0 8px; line-height:1.3; }
.evb-card-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:.75rem; color:#64748b; margin-bottom:14px; }
.evb-card-meta i { color:#C2410C; }
.evb-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px; border-top:1px solid #F1F5F9; }
.evb-price { font-size:1.05rem; font-weight:800; color:#C2410C; }
.evb-free { font-size:.8rem; font-weight:700; color:#16a34a; background:#F0FDF4; padding:3px 10px; border-radius:20px; }
.evb-card-arrow { width:32px; height:32px; border-radius:50%; background:#FFF7ED; color:#C2410C; display:flex; align-items:center; justify-content:center; font-size:.78rem; }
.evb-empty { text-align:center; padding:4rem 1rem; color:#64748b; }
.evb-empty i { font-size:2.8rem; opacity:.35; display:block; margin-bottom:14px; }

/* ══════════ AWAM: Detail /acara/<slug> ══════════ */
.evd-hero { position:relative; background:#7C2D12; background-size:cover; background-position:center; color:#fff; padding:3.5rem 0 2.5rem; }
.evd-crumb { color:rgba(255,255,255,.85); text-decoration:none; font-size:.82rem; display:inline-flex; gap:6px; align-items:center; margin-bottom:14px; }
.evd-hero-cat { display:inline-block; background:#F0B90B; color:#1a1a2e; font-size:.7rem; font-weight:700; padding:4px 12px; border-radius:20px; margin-bottom:10px; }
.evd-hero h1 { font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; margin:0 0 12px; max-width:800px; }
.evd-hero-meta { display:flex; gap:18px; flex-wrap:wrap; font-size:.85rem; opacity:.92; }
.evd-wrap { padding:2rem 0 4rem; }
.evd-grid { display:grid; grid-template-columns:1fr 350px; gap:28px; align-items:start; }
@media (max-width:860px){ .evd-grid { grid-template-columns:1fr; } }
.evd-section { margin-bottom:28px; }
.evd-section h2 { font-size:1.2rem; font-weight:800; margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.evd-desc { font-size:.9rem; line-height:1.7; color:#334155; }
.evd-addr { font-size:.88rem; color:#475569; }
.evd-addr i { color:#C2410C; margin-right:6px; }
.evd-lb-empty { font-size:.85rem; color:#94a3b8; }
.evd-lb-card { border:1px solid #E8E4D0; border-radius:12px; overflow:hidden; }
.evd-side { position:sticky; top:20px; display:flex; flex-direction:column; gap:16px; }
.evd-join { background:#fff; border:1px solid #E8E4D0; border-radius:16px; padding:22px; box-shadow:0 4px 20px rgba(0,0,0,.05); }
.evd-price-box { margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #F1F5F9; }
.evd-price-val { font-size:1.7rem; font-weight:800; color:#C2410C; }
.evd-per { font-size:.75rem; color:#94a3b8; font-weight:600; }
.evd-free-big { font-size:1.4rem; font-weight:800; color:#16a34a; }
.evd-spots { font-size:.8rem; color:#64748b; margin-top:6px; }
.evd-form { display:flex; flex-direction:column; gap:10px; }
.evd-form input { padding:10px 13px; border:1.5px solid #e5e7ef; border-radius:9px; font-family:inherit; font-size:.85rem; width:100%; box-sizing:border-box; }
.evd-flabel { font-size:.76rem; font-weight:700; color:#64748b; margin-top:4px; }
.evd-paymethods { display:flex; flex-direction:column; gap:6px; }
.evd-pay { display:flex; align-items:center; gap:8px; border:1.5px solid #e5e7ef; border-radius:9px; padding:9px 12px; cursor:pointer; font-size:.84rem; font-weight:600; }
.evd-pay input { accent-color:#C2410C; }
.evd-wbal { color:#16a34a; font-weight:700; font-size:.78rem; }
.evd-btn-primary { background:#C2410C; color:#fff; border:none; border-radius:10px; padding:13px; font-weight:800; font-size:.9rem; cursor:pointer; font-family:inherit; margin-top:6px; }
.evd-btn-primary:hover { background:#9A3412; }
.evd-btn-ghost { display:block; text-align:center; background:#fff; color:#C2410C; border:1.5px solid #C2410C; border-radius:10px; padding:11px; font-weight:700; font-size:.86rem; cursor:pointer; font-family:inherit; text-decoration:none; }
.evd-wa { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; background:#25D366; color:#fff; text-decoration:none; padding:12px; border-radius:10px; font-weight:700; font-size:.86rem; }
.evd-jerr { background:#FEF2F2; border:1px solid #FCA5A5; color:#991B1B; border-radius:9px; padding:10px 13px; font-size:.8rem; margin-bottom:12px; }
.evd-full-msg { font-size:.86rem; color:#991B1B; text-align:center; padding:10px; }
.evd-success, .evd-joined { text-align:center; padding:12px 4px; }
.evd-success i, .evd-joined i { font-size:2.6rem; color:#16a34a; }
.evd-success h3 { font-size:1.15rem; font-weight:800; margin:12px 0 8px; }
.evd-success-note { font-size:.82rem; color:#64748b; margin-top:8px; }
.evd-joined p { font-size:.9rem; font-weight:600; margin:10px 0 14px; }
.evd-strava-box { background:#fff; border:1px solid #E8E4D0; border-radius:16px; padding:20px; text-align:center; }
.evd-strava-title { font-weight:800; font-size:.95rem; margin-bottom:10px; display:flex; align-items:center; justify-content:center; gap:8px; }
.evd-strava-title i { color:#FC4C02; }
.evd-strava-box p { font-size:.82rem; color:#64748b; margin-bottom:12px; }
.evd-strava-ok { color:#166534 !important; font-weight:700; }
.evd-strava-btn { display:inline-flex; align-items:center; gap:8px; background:#FC4C02; color:#fff; text-decoration:none; padding:11px 18px; border-radius:10px; font-weight:700; font-size:.86rem; }

/* ══════════ AWAM: Return bayaran tiket ══════════ */
.evr-wrap { max-width:520px; margin:0 auto; padding:48px 16px; }
.evr-card { background:#fff; border:1px solid #E8E4D0; border-radius:16px; padding:36px 28px; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.05); }
.evr-icon { font-size:3rem; margin-bottom:14px; }
.evr-ok { color:#16a34a; }
.evr-pending { color:#F0B90B; }
.evr-cancel { color:#dc2626; }
.evr-muted { color:#94a3b8; }
.evr-card h1 { font-size:1.3rem; font-weight:800; margin:0 0 8px; }
.evr-card p { font-size:.9rem; color:#64748b; line-height:1.6; margin:0 0 18px; }
.evr-ref { display:inline-block; background:#F1F5F9; border-radius:8px; padding:7px 16px; font-size:.88rem; margin-bottom:22px; }
.evr-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.evr-btn { text-decoration:none; display:inline-block; }



/* ========================================================================
   17. PELANCONGAN (.tv-*/.tvb-*) — browse/detail/return
   ·  asal: travel.css
   ======================================================================== */
/* ==========================================
   LOKASI FOLDER ASAL : /templates/default/assets/css
   NAMA FAIL ASAL     : travel.css
   NOTA               : Gaya modul Pelancongan (dashboard + awam).
   ========================================== */

.tv-hidden { display:none; }
.tv-wrap { max-width:1100px; }

.tv-alert { padding:12px 16px; border-radius:10px; font-size:.85rem; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.tv-alert-success { background:#F0FDF4; border:1px solid #86EFAC; color:#166534; }

.tv-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }

.tv-filter { display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.tv-input { flex:1; min-width:180px; padding:9px 13px; border:1.5px solid var(--border,#e5e7ef); border-radius:9px; font-family:inherit; font-size:.85rem; }
.tv-select { padding:9px 12px; border:1.5px solid var(--border,#e5e7ef); border-radius:9px; font-family:inherit; font-size:.82rem; background:#fff; cursor:pointer; }

.tv-table-card { background:#fff; border:1px solid var(--border,#e5e7ef); border-radius:12px; overflow:hidden; }
.tv-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.tv-table thead th { text-align:left; padding:12px 16px; background:var(--bg,#f4f6fb); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted,#64748b); border-bottom:1px solid var(--border,#e5e7ef); }
.tv-table td { padding:12px 16px; border-bottom:1px solid var(--border,#eef2f7); vertical-align:middle; }
.tv-table tbody tr:last-child td { border-bottom:none; }
.tv-table tbody tr:hover { background:#F9FAFB; }
.tv-th-action { text-align:right; white-space:nowrap; }

.tv-cell-pkg { display:flex; align-items:center; gap:12px; }
.tv-thumb { width:46px; height:46px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.tv-thumb-ph { background:#F1F5F9; display:flex; align-items:center; justify-content:center; color:#94A3B8; }
.tv-cell-title { font-weight:700; font-size:.86rem; }
.tv-cell-sub { font-size:.72rem; color:var(--muted,#64748b); }

.tv-empty { text-align:center; padding:4rem 1rem; color:var(--muted,#64748b); background:#fff; border:1px solid var(--border,#e5e7ef); border-radius:12px; }
.tv-empty i { font-size:2.5rem; opacity:.35; display:block; margin-bottom:12px; }
.tv-empty p { margin-bottom:16px; }

/* ── Borang pakej (dashboard) ── */
.tv-backhead { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.tv-back { color:var(--muted,#64748b); text-decoration:none; font-size:1rem; }
.tv-card { background:#fff; border:1px solid var(--border,#e5e7ef); border-radius:12px; padding:18px 20px; margin-bottom:16px; }
.tv-card-title { font-size:.9rem; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--border,#eef2f7); }
.tv-card-title i { color:var(--gold,#F0B90B); }
.tv-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tv-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media (max-width:700px) { .tv-grid2, .tv-grid3 { grid-template-columns:1fr; } }
.tv-check-wrap { display:flex; align-items:flex-end; }
.tv-check { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:.85rem; font-weight:600; padding-bottom:8px; }
.tv-check input { width:16px; height:16px; accent-color:var(--gold,#F0B90B); }
.tv-preview { max-width:220px; border-radius:10px; margin-bottom:12px; display:block; }
.tv-mb { margin-bottom:12px; }
.tv-formfoot { display:flex; justify-content:flex-end; gap:10px; margin:20px 0 40px; }
.tv-alert-danger { background:#FEF2F2; border:1px solid #FCA5A5; color:#991B1B; }
.tv-later { background:#F8FAFC; border-style:dashed; }

/* ── Itinerari / Galeri / Tarikh (edit) ── */
.tv-itin-row { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--border,#e5e7ef); border-radius:10px; margin-bottom:10px; background:#F8FAFC; }
.tv-itin-day { width:72px; flex-shrink:0; }
.tv-itin-body { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.tv-itin-del { background:none; border:none; color:#EF4444; cursor:pointer; font-size:1rem; padding:4px; flex-shrink:0; }
.tv-itin-foot { display:flex; justify-content:space-between; gap:10px; margin-top:6px; }

.tv-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-bottom:14px; }
.tv-gitem { position:relative; }
.tv-gitem img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; }
.tv-gdel { position:absolute; top:6px; right:6px; margin:0; }
.tv-gdel button { background:rgba(0,0,0,.6); color:#fff; border:none; border-radius:6px; width:26px; height:26px; cursor:pointer; }
.tv-gupload { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.tv-gupload .form-control { flex:1; }

.tv-note { background:#EFF6FF; border:1px solid #BFDBFE; color:#1E40AF; padding:10px 14px; border-radius:9px; font-size:.82rem; margin-bottom:14px; display:flex; gap:8px; align-items:center; }
.tv-dep-list { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.tv-dep-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.tv-dep-row .form-control { flex:0 1 auto; width:auto; min-width:130px; }
.tv-dep-booked { font-size:.75rem; color:var(--muted,#64748b); white-space:nowrap; }
.tv-dep-add { border-top:1px dashed var(--border,#e5e7ef); padding-top:14px; }

/* ── Tempahan (dashboard) ── */
.tv-kv { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--border,#eef2f7); font-size:.84rem; }
.tv-kv:last-child { border-bottom:none; }
.tv-kv span { color:var(--muted,#64748b); }
.tv-msg { font-size:.85rem; line-height:1.6; margin:0; }
.tv-inline-form { display:flex; gap:8px; align-items:center; }
.tv-inline-form .form-control { flex:1; }
.tv-mt { margin-top:8px; }
.tv-type { font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:20px; }
.tv-type-enquiry { background:#EFF6FF; color:#1E40AF; }
.tv-type-order { background:#F0FDF4; color:#166534; }
.tv-clickrow { cursor:pointer; }

/* ══════════ AWAM: Browse /pelancongan/ ══════════ */
.tvb-hero { background:linear-gradient(135deg,#0d3b66 0%,#1a5a8a 55%,#F0B90B 200%); padding:3rem 1rem; text-align:center; color:#fff; }
.tvb-hero h1 { font-size:clamp(1.5rem,4vw,2.2rem); font-weight:800; margin:0 0 .4rem; }
.tvb-hero p { font-size:.92rem; opacity:.85; max-width:560px; margin:0 auto; }
.tvb-wrap { padding-top:1.5rem; padding-bottom:3rem; }

.tvb-filter { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tvb-search { flex:1; min-width:180px; padding:11px 15px; border:1.5px solid #e5e7ef; border-radius:10px; font-family:inherit; font-size:.86rem; }
.tvb-select { padding:11px 13px; border:1.5px solid #e5e7ef; border-radius:10px; font-family:inherit; font-size:.83rem; background:#fff; cursor:pointer; }
.tvb-btn { padding:11px 20px; border:none; border-radius:10px; background:#0d3b66; color:#fff; font-weight:700; font-size:.83rem; cursor:pointer; font-family:inherit; }
.tvb-btn:hover { background:#0a2f52; }

.tvb-cats { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.tvb-cat { padding:7px 15px; border-radius:22px; border:1.5px solid #e5e7ef; font-size:.79rem; font-weight:600; text-decoration:none; color:#64748b; background:#fff; transition:all .15s; display:inline-flex; align-items:center; gap:6px; }
.tvb-cat:hover { border-color:#0d3b66; color:#0d3b66; }
.tvb-cat.active { background:#0d3b66; border-color:#0d3b66; color:#fff; }

.tvb-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.tvb-count { font-size:.82rem; color:#64748b; font-weight:600; }
.tvb-reset { font-size:.79rem; color:#dc2626; text-decoration:none; font-weight:600; }

.tvb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.tvb-card { display:flex; flex-direction:column; background:#fff; border:1px solid #E8E4D0; border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; transition:box-shadow .18s,transform .18s; }
.tvb-card:hover { box-shadow:0 10px 28px rgba(13,59,102,.14); transform:translateY(-3px); }
.tvb-card-img { position:relative; aspect-ratio:16/10; background:#F1F5F9; }
.tvb-card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.tvb-noimg { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#94A3B8; font-size:2rem; }
.tvb-card-cat { position:absolute; top:12px; left:12px; background:rgba(255,255,255,.92); color:#0d3b66; font-size:.68rem; font-weight:700; padding:4px 10px; border-radius:20px; }
.tvb-card-feat { position:absolute; top:12px; right:12px; background:#F0B90B; color:#1a1a2e; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.7rem; }
.tvb-card-body { padding:16px; display:flex; flex-direction:column; flex:1; }
.tvb-card-body h3 { font-size:1rem; font-weight:800; margin:0 0 6px; line-height:1.3; }
.tvb-card-sum { font-size:.8rem; color:#64748b; line-height:1.5; margin:0 0 12px; }
.tvb-card-meta { display:flex; gap:14px; flex-wrap:wrap; font-size:.75rem; color:#64748b; margin-bottom:14px; }
.tvb-card-meta i { color:#0d3b66; }
.tvb-card-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:12px; border-top:1px solid #F1F5F9; }
.tvb-card-price { font-size:1.15rem; font-weight:800; color:#0d3b66; }
.tvb-from { display:block; font-size:.62rem; font-weight:600; color:#94A3B8; text-transform:uppercase; letter-spacing:.05em; }
.tvb-per { font-size:.68rem; font-weight:600; color:#94A3B8; }
.tvb-card-arrow { width:34px; height:34px; border-radius:50%; background:#F0B90B; color:#1a1a2e; display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.tvb-empty { text-align:center; padding:4rem 1rem; color:#64748b; }
.tvb-empty i { font-size:2.8rem; opacity:.35; display:block; margin-bottom:14px; }

/* ══════════ AWAM: Detail /pelancongan/<slug> ══════════ */
.tvd-hero { position:relative; background:#0d3b66; background-size:cover; background-position:center; color:#fff; padding:3.5rem 0 2.5rem; }
.tvd-crumb { color:rgba(255,255,255,.85); text-decoration:none; font-size:.82rem; display:inline-flex; gap:6px; align-items:center; margin-bottom:14px; }
.tvd-hero-cat { display:inline-block; background:#F0B90B; color:#1a1a2e; font-size:.7rem; font-weight:700; padding:4px 12px; border-radius:20px; margin-bottom:10px; }
.tvd-hero h1 { font-size:clamp(1.6rem,4vw,2.4rem); font-weight:800; margin:0 0 12px; max-width:800px; }
.tvd-hero-meta { display:flex; gap:20px; flex-wrap:wrap; font-size:.85rem; opacity:.92; }
.tvd-wrap { padding:2rem 0 4rem; }
.tvd-grid { display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start; }
@media (max-width:860px){ .tvd-grid { grid-template-columns:1fr; } }
.tvd-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; margin-bottom:24px; }
.tvd-gitem img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; }
.tvd-section { margin-bottom:28px; }
.tvd-section h2 { font-size:1.2rem; font-weight:800; margin:0 0 14px; }
.tvd-desc { font-size:.9rem; line-height:1.7; color:#334155; }
.tvd-itin-item { display:flex; gap:16px; padding-bottom:18px; }
.tvd-itin-day { flex-shrink:0; background:#0d3b66; color:#fff; font-size:.72rem; font-weight:700; padding:6px 12px; border-radius:8px; height:fit-content; white-space:nowrap; }
.tvd-itin-content h4 { font-size:.92rem; font-weight:700; margin:0 0 4px; }
.tvd-itin-content p { font-size:.84rem; line-height:1.6; color:#475569; margin:0; }
.tvd-inex { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:560px){ .tvd-inex { grid-template-columns:1fr; } }
.tvd-inex-col h3 { font-size:.95rem; font-weight:700; margin:0 0 10px; display:flex; align-items:center; gap:8px; color:#166534; }
.tvd-inex-col h3 i { color:#16a34a; }
.tvd-x { color:#dc2626 !important; }
.tvd-inex-col ul { margin:0; padding-left:0; list-style:none; }
.tvd-inex-col li { font-size:.84rem; padding:5px 0 5px 22px; position:relative; color:#475569; }
.tvd-inex-col li:before { content:'•'; position:absolute; left:6px; color:#94a3b8; }
.tvd-side { position:sticky; top:20px; }
.tvd-book { background:#fff; border:1px solid #E8E4D0; border-radius:16px; padding:22px; box-shadow:0 4px 20px rgba(0,0,0,.05); }
.tvd-price { margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid #F1F5F9; }
.tvd-price-val { font-size:1.7rem; font-weight:800; color:#0d3b66; }
.tvd-form { display:flex; flex-direction:column; gap:10px; }
.tvd-form input, .tvd-form select, .tvd-form textarea { padding:10px 13px; border:1.5px solid #e5e7ef; border-radius:9px; font-family:inherit; font-size:.85rem; width:100%; box-sizing:border-box; }
.tvd-flabel { font-size:.76rem; font-weight:700; color:#64748b; margin-top:4px; }
.tvd-btn-primary { background:#F0B90B; color:#1a1a2e; border:none; border-radius:10px; padding:13px; font-weight:800; font-size:.9rem; cursor:pointer; font-family:inherit; margin-top:6px; }
.tvd-btn-primary:hover { background:#d9a60a; }
.tvd-btn-ghost { background:#fff; color:#0d3b66; border:1.5px solid #0d3b66; border-radius:10px; padding:12px; font-weight:700; font-size:.86rem; cursor:pointer; font-family:inherit; }
.tvd-wa { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; background:#25D366; color:#fff; text-decoration:none; padding:12px; border-radius:10px; font-weight:700; font-size:.86rem; }
.tvd-berr { background:#FEF2F2; border:1px solid #FCA5A5; color:#991B1B; border-radius:9px; padding:10px 13px; font-size:.8rem; margin-bottom:12px; }
.tvd-nodate { font-size:.8rem; color:#94a3b8; }
.tvd-success { text-align:center; padding:14px 4px; }
.tvd-success i { font-size:2.6rem; color:#16a34a; }
.tvd-success h3 { font-size:1.15rem; font-weight:800; margin:12px 0 8px; }
.tvd-success-note { font-size:.82rem; color:#64748b; margin-top:8px; }

/* ══════════ AWAM: Return bayaran ══════════ */
.tvr-wrap { max-width:520px; margin:0 auto; padding:48px 16px; }
.tvr-card { background:#fff; border:1px solid #E8E4D0; border-radius:16px; padding:36px 28px; text-align:center; box-shadow:0 8px 24px rgba(0,0,0,.05); }
.tvr-icon { font-size:3rem; margin-bottom:14px; }
.tvr-ok { color:#16a34a; }
.tvr-pending { color:#F0B90B; }
.tvr-cancel { color:#dc2626; }
.tvr-muted { color:#94a3b8; }
.tvr-card h1 { font-size:1.3rem; font-weight:800; margin:0 0 8px; }
.tvr-card p { font-size:.9rem; color:#64748b; line-height:1.6; margin:0 0 18px; }
.tvr-ref { display:inline-block; background:#F1F5F9; border-radius:8px; padding:7px 16px; font-size:.88rem; margin-bottom:22px; }
.tvr-actions { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.tvr-btn { text-decoration:none; display:inline-block; }

/* Pemilih kaedah bayaran (detail) */
.tvd-paymethods { display:flex; flex-direction:column; gap:6px; }
.tvd-pay { display:flex; align-items:center; gap:8px; border:1.5px solid #e5e7ef; border-radius:9px; padding:9px 12px; cursor:pointer; font-size:.84rem; font-weight:600; }
.tvd-pay input { accent-color:#0d3b66; }
.tvd-wbal { color:#16a34a; font-weight:700; font-size:.78rem; }



/* ========================================================================
   18. CUACA (.cx-*) + WIDGET SOLAT (.ws-*)
   ·  asal: cuaca.css + waktu-solat.css
   ======================================================================== */
/* LOKASI: /templates/default/assets/css/cuaca.css */
.cx-hero {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: radial-gradient(120% 140% at 0% 0%, #0284c7 0%, #0369a1 55%, #075985 100%);
  color: #fff; border-radius: 20px; padding: 1.5rem 1.7rem; margin-bottom: 1.6rem;
  box-shadow: 0 12px 34px rgba(3, 105, 161, .3);
}
.cx-hero-main { display: flex; align-items: center; gap: 1.2rem; }
.cx-hero-ic { font-size: 3.2rem; color: #fde68a; }
.cx-hero-place { font-size: .95rem; font-weight: 600; opacity: .92; }
.cx-hero-temp { font-size: 2.8rem; font-weight: 800; line-height: 1; }
.cx-hero-desc { font-size: .9rem; opacity: .92; }
.cx-hero-meta { display: flex; flex-direction: column; gap: .5rem; font-size: .85rem; }
.cx-hero-meta i { color: #fde68a; margin-right: .3rem; }

/* Senarai daerah + strip 7 hari */
.cx-dist-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 2rem; }
.cx-dist { border: 1px solid #e5e7eb; border-radius: 14px; background: #fff; padding: .9rem 1rem; }
.cx-dist-name { font-size: .92rem; font-weight: 700; color: #0f172a; margin-bottom: .7rem; }
.cx-dist-name i { color: #0284c7; margin-right: .3rem; }
.cx-dist-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cx-d { text-align: center; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; padding: .55rem .2rem; }
.cx-d.is-today { background: linear-gradient(135deg, #e0f2fe, #f0f9ff); border-color: #7dd3fc; }
.cx-d-name { font-size: .68rem; font-weight: 700; color: #475569; }
.cx-d-ic { font-size: 1.15rem; color: #0284c7; margin: .3rem 0; }
.cx-d-temp { font-size: .74rem; color: #64748b; }
.cx-d-temp strong { color: #0f172a; margin-right: 3px; }
.cx-d-rain { font-size: .64rem; color: #0284c7; margin-top: .15rem; }

@media (max-width: 720px) {
  .cx-dist-strip { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(58px, 1fr); overflow-x: auto; }
  .cx-hero-temp { font-size: 2.2rem; }
}

/* ── PEMILIH LOKASI (varian terang) ── */
.cx-picker-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.cx-picker-label { font-size: .82rem; font-weight: 700; color: #475569; }
.cx-picker-label i { color: #0284c7; margin-right: .3rem; }
.cx-picker-bar .ws-picker-btn { background: #fff; border: 1px solid #e5e7eb; color: #0f172a; max-width: 260px; }
.cx-picker-bar .ws-picker-btn:hover { background: #f8fafc; border-color: #0284c7; }
.cx-picker-bar .ws-picker-btn:focus-visible { border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2,132,199,.18); }
.cx-picker-bar .ws-picker-btn svg { stroke: #0284c7; }
.cx-picker-bar .ws-picker-search:focus { border-color: #0284c7; box-shadow: 0 0 0 3px rgba(2,132,199,.15); }
.cx-picker-bar .ws-pk-group { color: #075985; background: #e0f2fe; }
.cx-picker-bar .ws-pk-item.is-active { background: #0284c7; color: #fff; }

/* ── HERO TERPERINCI + STATISTIK ── */
.cx-hero-sel { flex-direction: column; align-items: stretch; }
.cx-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.16); }
.cx-stat { display: flex; flex-direction: column; gap: .1rem; }
.cx-stat i { color: #fde68a; font-size: .95rem; margin-bottom: .2rem; }
.cx-stat span { font-size: .72rem; opacity: .85; }
.cx-stat b { font-size: .9rem; font-weight: 700; }
@media (max-width: 640px) { .cx-stats { grid-template-columns: repeat(2, 1fr); } }

/* ── RAMALAN SETIAP JAM ── */
.cx-hourly { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(66px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 2rem; }
.cx-hr { text-align: center; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: .6rem .3rem; }
.cx-hr-time { font-size: .72rem; font-weight: 700; color: #475569; }
.cx-hr-ic { font-size: 1.1rem; color: #0284c7; margin: .35rem 0; }
.cx-hr-temp { font-size: .9rem; font-weight: 800; color: #0f172a; }
.cx-hr-rain { font-size: .64rem; color: #0284c7; margin-top: .15rem; }

/* ── RAMALAN 7 HARI (terperinci) ── */
.cx-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 2rem; }
.cx-wk { text-align: center; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: .7rem .3rem; }
.cx-wk.is-today { background: linear-gradient(135deg,#e0f2fe,#f0f9ff); border-color: #7dd3fc; }
.cx-wk-day { font-size: .72rem; font-weight: 700; color: #475569; }
.cx-wk-ic { font-size: 1.3rem; color: #0284c7; margin: .35rem 0; }
.cx-wk-desc { font-size: .62rem; color: #64748b; line-height: 1.3; min-height: 2.4em; }
.cx-wk-temp { font-size: .76rem; color: #64748b; margin-top: .2rem; }
.cx-wk-temp strong { color: #0f172a; }
.cx-wk-rain { font-size: .64rem; color: #0284c7; margin-top: .1rem; }
@media (max-width: 640px) { .cx-week { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 380px) { .cx-week { grid-template-columns: repeat(3, 1fr); } }

/* ── INFO / FAQ ── */
.cx-info { margin: 2.6rem 0 1rem; }
.cx-info-p { font-size: .88rem; color: #475569; line-height: 1.7; margin: 0 0 1.2rem; }

/* ── LOADING OVERLAY ── */
.cx-loading { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); }
.cx-loading[hidden] { display: none; }
.cx-loading-box { background: #fff; border-radius: 16px; padding: 1.6rem 2rem; display: flex; flex-direction: column; align-items: center; gap: .9rem; box-shadow: 0 18px 44px rgba(15,23,42,.3); }
.cx-spinner { width: 38px; height: 38px; border: 4px solid #e0f2fe; border-top-color: #0284c7; border-radius: 50%; animation: cx-spin .8s linear infinite; }
.cx-loading-txt { font-size: .85rem; font-weight: 600; color: #0f172a; }
@keyframes cx-spin { to { transform: rotate(360deg); } }

/* --- widget waktu solat (waktu-solat.css) --- */
/* LOKASI: /templates/default/assets/css/waktu-solat.css */
.ws-wrap { max-width: 940px; margin: 0 auto; padding: 1.25rem 1rem 3rem; font-family: 'Plus Jakarta Sans', sans-serif; color: #0f172a; }

.ws-crumb { font-size: .78rem; color: #94a3b8; margin-bottom: 1.1rem; }
.ws-crumb a { color: #64748b; text-decoration: none; }
.ws-crumb a:hover { color: #F0B90B; }
.ws-crumb span { margin: 0 .3rem; }

/* HERO + COUNTDOWN */
.ws-hero {
  background: radial-gradient(120% 140% at 0% 0%, #1e293b 0%, #0f172a 55%, #0b1120 100%);
  border-radius: 20px; padding: 1.5rem 1.6rem; color: #fff; margin-bottom: 1.4rem;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .28);
}
.ws-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; }
.ws-hero-loc { font-size: 1.55rem; font-weight: 800; margin: 0 0 .25rem; line-height: 1.15; }
.ws-hero-date { font-size: .82rem; color: #cbd5e1; }
.ws-hero-zone { flex-shrink: 0; background: rgba(240,185,11,.15); color: #F0B90B; font-weight: 700; font-size: .78rem; padding: .35rem .7rem; border-radius: 999px; border: 1px solid rgba(240,185,11,.35); }
.ws-count { text-align: center; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.08); }
.ws-count-label { font-size: .82rem; color: #cbd5e1; margin-bottom: .3rem; }
.ws-count-label strong { color: #F0B90B; }
.ws-count-time { font-size: 2.6rem; font-weight: 800; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) { .ws-hero-loc { font-size: 1.25rem; } .ws-count-time { font-size: 2rem; } }

.ws-h2 { display: flex; align-items: center; gap: 12px; font-family: 'Playfair Display', 'Plus Jakarta Sans', serif; font-size: 1.35rem; font-weight: 700; color: var(--pt-hitam, #1a1a1a); line-height: 1.2; letter-spacing: -.2px; margin: 0 0 1rem; }
.ws-h2::after { content: ''; flex: 1; height: 2px; min-width: 20px; background: linear-gradient(90deg, var(--pt-kuning, #F0B90B), transparent); }

/* WAKTU HARI INI */
.ws-today { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 2rem; }
.ws-cell { text-align: center; padding: .8rem .3rem; border-radius: 14px; background: #f8fafc; border: 1px solid #eef2f7; transition: transform .15s; }
.ws-cell-name { font-size: .7rem; color: #64748b; font-weight: 600; margin-bottom: .35rem; }
.ws-cell-time { font-size: 1.05rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.ws-cell.is-next { background: linear-gradient(135deg, #F0B90B, #f59e0b); border-color: #F0B90B; box-shadow: 0 6px 18px rgba(240,185,11,.4); transform: translateY(-3px); }
.ws-cell.is-next .ws-cell-name { color: #78350f; }
.ws-cell.is-next .ws-cell-time { color: #1a1a2e; }
@media (max-width: 640px) { .ws-today { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 400px) { .ws-today { grid-template-columns: repeat(3, 1fr); } }

/* BERBUKA */
.ws-iftar { position: relative; display: flex; align-items: center; justify-content: center; gap: 2rem; background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff; border-radius: 16px; padding: 1.4rem 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.ws-iftar-tag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: #F0B90B; color: #1a1a2e; font-size: .68rem; font-weight: 800; padding: .22rem .8rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .5px; }
.ws-iftar-item { text-align: center; }
.ws-iftar-label { font-size: .78rem; opacity: .9; margin-bottom: .3rem; }
.ws-iftar-time { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ws-iftar-sep { width: 1px; height: 42px; background: rgba(255,255,255,.25); }

/* 7 HARI */
.ws-week { margin-bottom: 2.5rem; }
.ws-table-wrap { overflow-x: auto; border: 1px solid #e5e7eb; border-radius: 14px; }
.ws-table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 580px; }
.ws-table th { background: #f8fafc; padding: .75rem .5rem; text-align: center; font-weight: 700; color: #475569; border-bottom: 1px solid #e5e7eb; }
.ws-table td { padding: .68rem .5rem; text-align: center; border-bottom: 1px solid #f1f5f9; color: #334155; font-variant-numeric: tabular-nums; }
.ws-table td:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.ws-table tbody tr:last-child td { border-bottom: none; }
.ws-row-today { background: #fffbeb; }
.ws-row-today td { font-weight: 700; color: #92400e; }

/* GUIDE */
.ws-guide { margin-bottom: 2.5rem; }
.ws-niat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; }
.ws-niat { border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.05rem; background: #fff; }
.ws-niat-head { font-weight: 700; color: #0f172a; margin-bottom: .55rem; display: flex; justify-content: space-between; align-items: center; }
.ws-niat-head span { font-size: .7rem; font-weight: 700; color: #0f766e; background: #f0fdfa; padding: .18rem .55rem; border-radius: 999px; }
.ws-niat-rumi { font-size: .85rem; font-style: italic; color: #334155; margin-bottom: .35rem; }
.ws-niat-mns { font-size: .8rem; color: #64748b; line-height: 1.5; }

.ws-rukun { columns: 2; column-gap: 2rem; padding-left: 1.3rem; margin: 0; }
.ws-rukun li { margin-bottom: .5rem; font-size: .86rem; color: #334155; break-inside: avoid; }
@media (max-width: 560px) { .ws-rukun { columns: 1; } }

.ws-doa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ws-doa { border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.15rem; background: linear-gradient(180deg, #fffdf7, #fff); }
.ws-doa-title { font-weight: 700; color: #0f172a; margin-bottom: .7rem; }
.ws-doa-ar { font-size: 1.5rem; line-height: 2.2; text-align: right; color: #1a1a2e; margin-bottom: .6rem; }
.ws-doa-rumi { font-size: .85rem; font-style: italic; color: #334155; margin-bottom: .3rem; }
.ws-doa-mns { font-size: .8rem; color: #64748b; line-height: 1.5; }

/* FAQ */
.ws-faq { margin-bottom: 2.5rem; }
.ws-faq-item { border: 1px solid #e5e7eb; border-radius: 12px; padding: .1rem .95rem; margin-bottom: .6rem; background: #fff; transition: border-color .15s; }
.ws-faq-item[open] { border-color: #F0B90B; }
.ws-faq-item summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: #0f172a; padding: .8rem 0; list-style: none; }
.ws-faq-item summary::-webkit-details-marker { display: none; }
.ws-faq-item summary::after { content: '+'; float: right; color: #F0B90B; font-weight: 800; font-size: 1.1rem; line-height: 1; }
.ws-faq-item[open] summary::after { content: '\2212'; }
.ws-faq-item p { font-size: .84rem; color: #475569; margin: 0 0 .8rem; line-height: 1.6; }

/* LOKASI */
.ws-locs { margin-bottom: 2rem; }
.ws-loc-search { width: 100%; box-sizing: border-box; border: 1px solid #e5e7eb; border-radius: 10px; padding: .6rem .85rem; font: inherit; font-size: .88rem; margin-bottom: 1.2rem; }
.ws-loc-search:focus { outline: none; border-color: #F0B90B; box-shadow: 0 0 0 3px rgba(240,185,11,.15); }
.ws-state { margin-bottom: 1.25rem; }
.ws-state-name { font-size: .92rem; font-weight: 700; color: #0f172a; margin: 0 0 .6rem; padding-bottom: .3rem; border-bottom: 2px solid #F0B90B; display: inline-block; }
.ws-town-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.ws-town { font-size: .8rem; padding: .42rem .85rem; background: #f1f5f9; border-radius: 999px; color: #334155; text-decoration: none; transition: background .15s, color .15s; }
.ws-town:hover { background: #F0B90B; color: #1a1a2e; }
.ws-town.is-active { background: #F0B90B; color: #1a1a2e; font-weight: 700; }

.ws-empty { text-align: center; padding: 2.5rem; background: #f8fafc; border-radius: 14px; color: #64748b; margin-bottom: 2rem; }
.ws-credit { text-align: center; font-size: .75rem; color: #94a3b8; margin-top: 1.5rem; }
.ws-footer { background: #0f172a; color: #94a3b8; text-align: center; padding: 1.5rem; font-size: .8rem; margin-top: 2rem; }

/* ── PEMILIH LOKASI (SELECT) ── */
.ws-loc-hint { font-size: .84rem; color: #64748b; margin: 0 0 .9rem; }
.ws-select-wrap { display: flex; flex-direction: column; gap: .4rem; max-width: 460px; }
.ws-select-label { font-size: .78rem; font-weight: 700; color: #475569; }
.ws-select { width: 100%; box-sizing: border-box; appearance: none; -webkit-appearance: none; border: 1px solid #e5e7eb; border-radius: 12px; background-color: #fff; padding: .7rem 2.6rem .7rem .9rem; font: inherit; font-size: .9rem; color: #0f172a; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F0B90B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.ws-select:focus { outline: none; border-color: #F0B90B; box-shadow: 0 0 0 3px rgba(240,185,11,.15); }

/* ── KAWASAN ZON ── */
.ws-coverage { margin-bottom: 2.5rem; }
.ws-coverage-intro { font-size: .86rem; color: #475569; line-height: 1.6; margin: 0 0 1rem; }
.ws-coverage-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.ws-chip { font-size: .8rem; padding: .42rem .9rem; background: #f1f5f9; border: 1px solid #eef2f7; border-radius: 999px; color: #334155; text-decoration: none; transition: background .15s, color .15s, border-color .15s; }
.ws-chip:hover { background: var(--pt-kuning-cerah, #FFFBEA); border-color: #F0B90B; color: #92400e; }
.ws-chip.is-active { background: #F0B90B; border-color: #F0B90B; color: #1a1a2e; font-weight: 700; }

/* ── PANDUAN BELAJAR SOLAT ── */
.ws-learn { margin-bottom: 2.5rem; }
.ws-learn-intro { font-size: .9rem; color: #475569; line-height: 1.7; margin: 0 0 1.4rem; }
.ws-learn-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 1.6rem; }
.ws-learn-card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 1.15rem 1.25rem; background: #fff; }
.ws-learn-card.ws-learn-warn { background: linear-gradient(180deg, #fff7f7, #fff); border-color: #fecaca; }
.ws-learn-h3 { font-size: .98rem; font-weight: 700; color: #0f172a; margin: 0 0 .8rem; padding-bottom: .35rem; border-bottom: 2px solid #F0B90B; display: inline-block; }
.ws-learn-warn .ws-learn-h3 { border-bottom-color: #ef4444; }
.ws-learn-h3-mt { margin-top: .4rem; }
.ws-learn-list { margin: 0; padding-left: 1.2rem; }
.ws-learn-list li { font-size: .86rem; color: #334155; line-height: 1.55; margin-bottom: .45rem; }
.ws-learn-note { font-size: .82rem; color: #64748b; line-height: 1.6; margin: 0 0 .7rem; }

/* ── LANGKAH SOLAT ── */
.ws-steps { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: 10px; }
.ws-step { display: flex; gap: .9rem; align-items: flex-start; border: 1px solid #eef2f7; border-radius: 14px; padding: .9rem 1rem; background: #f8fafc; }
.ws-step-num { flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; background: linear-gradient(135deg, #F0B90B, #f59e0b); color: #1a1a2e; font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(240,185,11,.35); }
.ws-step-body { flex: 1; }
.ws-step-title { font-weight: 700; font-size: .9rem; color: #0f172a; margin-bottom: .18rem; }
.ws-step-desc { font-size: .84rem; color: #475569; line-height: 1.55; }

/* ── SELECT DALAM HERO ── */
.ws-hero-top { flex-wrap: wrap; }
.ws-hero-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.ws-hero-select {
  appearance: none; -webkit-appearance: none; max-width: 220px;
  background-color: rgba(255,255,255,.08); border: 1px solid rgba(240,185,11,.4);
  border-radius: 999px; color: #fff; font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.2;
  padding: .42rem 2.1rem .42rem .95rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23F0B90B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
}
.ws-hero-select:hover { background-color: rgba(240,185,11,.15); }
.ws-hero-select:focus { outline: none; border-color: #F0B90B; box-shadow: 0 0 0 3px rgba(240,185,11,.2); }
.ws-hero-select option { color: #0f172a; background: #fff; font-weight: 500; }
.ws-hero-select optgroup,
.ws-select optgroup { font-style: normal; font-weight: 800; color: #1a1a2e; background: #FFFBEA; padding: .25rem 0; letter-spacing: .3px; }
.ws-hero-select optgroup option,
.ws-select optgroup option { font-weight: 500; color: #0f172a; background: #fff; }
@media (max-width: 560px) {
  .ws-hero-right { width: 100%; justify-content: space-between; margin-top: .3rem; }
  .ws-hero-select { flex: 1; max-width: none; }
}

/* ── DROPDOWN LOKASI BOLEH-SEARCH (HERO) ── */
.ws-picker { position: relative; }
.ws-picker-btn {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 230px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(240,185,11,.4); border-radius: 999px;
  color: #fff; font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.2;
  padding: .42rem .95rem; cursor: pointer; transition: background .15s;
}
.ws-picker-btn:hover { background: rgba(240,185,11,.15); }
.ws-picker-btn:focus-visible { outline: none; border-color: #F0B90B; box-shadow: 0 0 0 3px rgba(240,185,11,.2); }
.ws-picker-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-picker-btn svg { width: 13px; height: 13px; flex-shrink: 0; stroke: #F0B90B; }
.ws-picker-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 286px; max-width: 82vw;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
  box-shadow: 0 18px 42px rgba(15,23,42,.3); z-index: 60; padding: .6rem; text-align: left;
}
.ws-picker-search {
  width: 100%; box-sizing: border-box; border: 1px solid #e5e7eb; border-radius: 9px;
  padding: .5rem .75rem; font: inherit; font-size: .82rem; margin-bottom: .5rem;
}
.ws-picker-search:focus { outline: none; border-color: #F0B90B; box-shadow: 0 0 0 3px rgba(240,185,11,.15); }
.ws-picker-list { max-height: 300px; overflow-y: auto; }
.ws-pk-group {
  font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: #92400e; background: #FFFBEA; padding: .32rem .6rem; border-radius: 6px; margin: .4rem 0 .2rem;
}
.ws-pk-item {
  display: block; font-size: .84rem; color: #334155; text-decoration: none;
  padding: .48rem .6rem; border-radius: 8px; transition: background .12s, color .12s;
}
.ws-pk-item:hover { background: #f1f5f9; color: #0f172a; }
.ws-pk-item.is-active { background: #F0B90B; color: #1a1a2e; font-weight: 700; }
@media (max-width: 560px) {
  .ws-picker { width: 100%; }
  .ws-picker-btn { width: 100%; max-width: none; justify-content: space-between; }
  .ws-picker-panel { width: 100%; }
}



/* ========================================================================
   19. JEJAK WARISAN (.jk-*) — peta warisan
   ·  asal: jejak.css
   ======================================================================== */
/* ── Jejak Warisan — peta awam ── */
.jw-hero {
  text-align: center;
  padding: 34px 20px 18px;
  background: linear-gradient(180deg, #FFF9E9 0%, #FFFFFF 100%);
  border-bottom: 1px solid #F1E7C8;
}
.jw-hero h1 {
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0 0 6px;
  color: #1a1a2e;
}
.jw-hero h1::first-line { }
.jw-hero p {
  color: #6b7280;
  font-size: .95rem;
  margin: 0;
}

.jw-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}

.jw-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}
.jw-chip {
  border: 1px solid #E5E7EB;
  background: #fff;
  color: #374151;
  font-size: .8rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  display: inline-block;
}
.jw-chip:hover { border-color: #F0B90B; color: #92700a; }
.jw-chip.active {
  background: #F0B90B;
  border-color: #F0B90B;
  color: #1a1a2e;
}

.jw-map {
  height: 70vh;
  min-height: 420px;
  border-radius: 14px;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

.jw-count {
  text-align: center;
  margin-top: 10px;
  font-size: .78rem;
  color: #6b7280;
}

/* Popup */
.jw-pop-title {
  font-size: 1rem;
  font-weight: 800;
  color: #1a1a2e;
  margin-bottom: 6px;
  line-height: 1.3;
}
.jw-pop-body { font-size: .84rem; line-height: 1.55; color: #374151; }
.jw-pop-body h4 { margin: 8px 0 2px; font-size: .88rem; font-weight: 700; color: #1a1a2e; }
.jw-pop-body p { margin: 2px 0 0; }
.jw-pop-body a { color: #b8860b; font-weight: 600; text-decoration: none; }
.jw-pop-body a:hover { text-decoration: underline; }
.jw-pop-act {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.jw-pop-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .76rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  background: #F3F4F6;
  color: #374151;
  transition: all .15s;
}
.jw-pop-btn:hover { background: #E5E7EB; }
.jw-pop-btn--map { background: #F0B90B; color: #1a1a2e; }
.jw-pop-btn--map:hover { background: #d9a806; }

@media (max-width: 640px) {
  .jw-hero h1 { font-size: 1.45rem; }
  .jw-map { height: 62vh; }
}

/* ── SUSUN ATUR PETA + SENARAI ── */
.jw-layout { display: grid; grid-template-columns: 360px 1fr; gap: 14px; align-items: start; }
.jw-list { height: 70vh; min-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.jw-item { border: 1px solid #E5E7EB; border-radius: 12px; background: #fff; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; }
.jw-item:hover { border-color: #F0B90B; }
.jw-item.active { border-color: #F0B90B; box-shadow: 0 0 0 3px rgba(240,185,11,.18); }
.jw-item-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.jw-item-ic { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.jw-item-title { font-size: .92rem; font-weight: 800; color: #1a1a2e; line-height: 1.25; }
.jw-item-badge { display: inline-block; font-size: .66rem; font-weight: 700; color: #92700a; background: #FFFBEA; border: 1px solid #F5E6B8; padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
.jw-item-desc { font-size: .8rem; color: #4b5563; line-height: 1.5; margin: 0 0 10px; }
.jw-item-act { display: flex; flex-wrap: wrap; gap: 8px; }
.jw-item-btn { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 1px solid #E5E7EB; background: #fff; color: #374151; cursor: pointer; text-decoration: none; transition: all .15s; }
.jw-item-btn:hover { border-color: #F0B90B; color: #92700a; }
.jw-item-btn--gps { background: #0f9d58; border-color: #0f9d58; color: #fff; }
.jw-item-btn--gps:hover { background: #0c8043; border-color: #0c8043; color: #fff; }
.jw-list-empty { font-size: .82rem; color: #6b7280; text-align: center; padding: 2rem 1rem; }
@media (max-width: 900px) {
  .jw-layout { grid-template-columns: 1fr; }
  .jw-list { height: auto; min-height: 0; max-height: 60vh; order: 2; }
  .jw-map { order: 1; }
}


/* ========================================================================
   20. SEGERA (coming soon) — page splash standalone
   ·  asal: segera.css  (semua selector elemen diskop ke .page-segera)
   ======================================================================== */
body.page-segera { font-family:'Segoe UI',system-ui,sans-serif; background:#f4f6fb; display:flex; align-items:center; justify-content:center; min-height:100vh; margin:0; padding:1.5rem; }
.segera-box { text-align:center; padding:3rem 2rem; max-width:460px; background:#fff; border-radius:16px; box-shadow:0 8px 30px rgba(0,0,0,.06); }
.segera-icon { font-size:3.5rem; margin-bottom:.5rem; }
.segera-tag { display:inline-block; background:#FEF3C7; color:#92400E; font-size:.72rem; font-weight:700; padding:.3rem .8rem; border-radius:999px; letter-spacing:.5px; text-transform:uppercase; margin-bottom:1rem; }
.segera-box h1 { font-size:1.6rem; margin:.3rem 0 .5rem; color:#1a1a2e; }
.segera-box p  { color:#64748b; margin-bottom:1.8rem; line-height:1.6; font-size:.95rem; }
.segera-box a.btn { background:#e67e22; color:#fff; padding:.75rem 1.6rem; border-radius:10px; text-decoration:none; font-weight:600; display:inline-block; }



/* ========================================================================
   21. DASHBOARD (semua diskop bawah .op-dashboard — TIDAK bocor ke page awam)
   ·  asal: dashboard.css  (*-reset dibuang: redundan; :root->body.op-dashboard)
   ======================================================================== */
body.op-dashboard {    --primary:      #F0B90B;
    --primary-dark: #C99A0A;
    --primary-ink:  #C99A0A;
    --on-primary:   #1a1a2e;
    --sidebar-w:    240px;
    --sidebar-bg:   #ffffff;
    --sidebar-txt:  #4a5568;
    --sidebar-act:  rgba(240,185,11,0.14);
    --topbar-h:     60px;
    --bg:           #f4f6fb;
    --card:         #ffffff;
    --border:       #e5e7ef;
    --text:         #1a1a2e;
    --text-muted:   #6c757d;
    --success:      #27ae60;
    --danger:       #e74c3c;
    --warning:      #f39c12;
    --radius:       12px;
    --shadow:       0 2px 12px rgba(0,0,0,.07); }
body.op-dashboard {    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    min-height: 100vh; }
.op-dashboard .sidebar {    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform 0.3s;
    border-right: 1px solid var(--border);
    box-shadow: 2px 0 8px rgba(0,0,0,.04); }
.op-dashboard .sidebar-brand {    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.2rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border); }
.op-dashboard .brand-icon { font-size: 1.5rem;  }
.op-dashboard .sidebar-nav { flex: 1; padding: 1rem 0; overflow-y: auto;  }
.op-dashboard .nav-item {    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.5rem;
    color: var(--sidebar-txt);
    text-decoration: none;
    font-size: .95rem;
    transition: background .2s, color .2s; }
.op-dashboard .nav-item:hover, .op-dashboard .nav-item.active {    background: var(--sidebar-act);
    color: var(--primary-ink); }
.op-dashboard .nav-icon { font-size: 1.1rem; width: 1.5rem; text-align: center;  }
.op-dashboard .nav-divider { height: 1px; background: var(--border); margin: .75rem 1.5rem;  }
.op-dashboard .nav-logout:hover { background: rgba(231,76,60,.15); color: #e74c3c;  }
.op-dashboard .nav-section-label {    padding: .5rem 1.5rem .3rem;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #94a3b8; }
.op-dashboard .main-wrap {    margin-left: var(--sidebar-w);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; }
.op-dashboard .topbar {    height: var(--topbar-h);
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 50; }
.op-dashboard .sidebar-toggle {    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--text-muted);
    display: none; }
.op-dashboard .topbar-right { display: flex; align-items: center; gap: 1rem;  }
.op-dashboard .lang-btn {    padding: .35rem .8rem;
    border-radius: 20px;
    background: var(--bg);
    color: var(--text);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    border: 1px solid var(--border);
    transition: background .2s; }
.op-dashboard .lang-btn:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary);  }
.op-dashboard .user-menu { display: flex; align-items: center; gap: .6rem;  }
.op-dashboard .user-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover;  }
.op-dashboard .user-name { font-weight: 600; font-size: .9rem;  }
.op-dashboard .main-content {    padding: 2rem 1.5rem;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto; }
.op-dashboard .page-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem;  }
.op-dashboard .welcome-card {    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: var(--on-primary);
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow); }
.op-dashboard .welcome-avatar img {    width: 70px; height: 70px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.4);
    object-fit: cover; }
.op-dashboard .welcome-info h1 { font-size: 1.3rem; margin-bottom: .25rem;  }
.op-dashboard .welcome-info .user-email { opacity: .85; font-size: .9rem; margin-bottom: .5rem;  }
.op-dashboard .user-roles { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem;  }
.op-dashboard .role-badge {    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap; }
.op-dashboard .card-grid {    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem; }
.op-dashboard .quick-card {    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem 1rem;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    transition: transform .2s, box-shadow .2s;
    box-shadow: var(--shadow); }
.op-dashboard .quick-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1);  }
.op-dashboard .quick-card--danger { color: var(--danger);  }
.op-dashboard .qc-icon { font-size: 1.8rem;  }
.op-dashboard .qc-label { font-size: .85rem; font-weight: 600;  }
.op-dashboard .info-card {    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow); }
.op-dashboard .info-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem;  }
.op-dashboard .info-table { width: 100%; border-collapse: collapse; font-size: .9rem;  }
.op-dashboard .info-table td { padding: .6rem .4rem; border-bottom: 1px solid var(--border);  }
.op-dashboard .info-table td:first-child { color: var(--text-muted); width: 40%;  }
.op-dashboard .badge { display: inline-block; padding: .2rem .6rem; border-radius: 20px; font-size: .8rem; font-weight: 600;  }
.op-dashboard .badge-success { background: #d4edda; color: #155724;  }
.op-dashboard .badge-danger { background: #f8d7da; color: #721c24;  }
.op-dashboard .badge-warning { background: #fff3cd; color: #856404;  }
.op-dashboard .alert { padding: .9rem 1.1rem; border-radius: 8px; margin-bottom: 1.2rem; font-size: .9rem;  }
.op-dashboard .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb;  }
.op-dashboard .alert-danger { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;  }
.op-dashboard .profile-card {    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow); }
.op-dashboard .profile-avatar-wrap { position: relative; cursor: pointer; flex-shrink: 0;  }
.op-dashboard .profile-avatar {    width: 100px; height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border);
    display: block; }
.op-dashboard .avatar-overlay {    position: absolute; inset: 0; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; font-size: .72rem;
    display: flex; align-items: center; justify-content: center;
    text-align: center; opacity: 0; transition: opacity .2s;
    pointer-events: none; }
.op-dashboard .profile-avatar-wrap:hover .avatar-overlay { opacity: 1;  }
.op-dashboard .profile-meta h3 { font-size: 1.1rem; margin-bottom: .2rem;  }
.op-dashboard .profile-meta p { color: var(--text-muted); font-size: .9rem; margin-bottom: .5rem;  }
.op-dashboard .tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; border-bottom: 2px solid var(--border);  }
.op-dashboard .tab {    padding: .6rem 1.2rem; background: none; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    font-weight: 600; font-size: .9rem; cursor: pointer;
    color: var(--text-muted); transition: color .2s, border-color .2s; }
.op-dashboard .tab.active { color: var(--primary-ink); border-bottom-color: var(--primary);  }
.op-dashboard .tab-content {    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.op-dashboard .tab-content.hidden { display: none;  }
.op-dashboard .form-group { margin-bottom: 1.2rem;  }
.op-dashboard .form-group label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .4rem;  }
.op-dashboard .form-group input, .op-dashboard .form-group textarea, .op-dashboard .form-group select {    width: 100%; padding: .65rem .9rem; border: 1.5px solid var(--border);
    border-radius: 8px; font-size: .9rem; background: var(--bg);
    transition: border-color .2s; color: var(--text); font-family: inherit; }
.op-dashboard .form-group input:focus, .op-dashboard .form-group textarea:focus {    outline: none; border-color: var(--primary); background: #fff; }
.op-dashboard .form-group input:disabled { opacity: .6; cursor: not-allowed; background: var(--border);  }
.op-dashboard .form-group small { color: var(--text-muted); font-size: .8rem; display: block; margin-top: .3rem;  }
.op-dashboard .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;  }
.op-dashboard .input-wrap { position: relative; display: flex;  }
.op-dashboard .input-wrap input { padding-right: 3rem; width: 100%;  }
.op-dashboard .toggle-pw {    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; font-size: 1rem; padding: .25rem; }
.op-dashboard .strength-bar { height: 4px; background: var(--border); border-radius: 4px; margin-top: .5rem; overflow: hidden;  }
.op-dashboard .strength-fill { height: 100%; width: 0; border-radius: 4px; transition: width .3s, background .3s;  }
.op-dashboard .strength-label { display: block; margin-top: .3rem; font-size: .8rem; font-weight: 600;  }
.op-dashboard .btn-primary {    padding: .75rem 1.5rem; background: var(--primary); color: var(--on-primary);
    border: none; border-radius: 8px; font-size: .95rem; font-weight: 600;
    cursor: pointer; transition: background .2s, transform .1s; font-family: inherit; }
.op-dashboard .btn-primary:hover { background: var(--primary-dark);  }
.op-dashboard .btn-primary:active { transform: scale(.98);  }
.op-dashboard .btn {    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 7px;
    border: 1.5px solid var(--border);
    background: #fff;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
    text-decoration: none;
    color: var(--text); }
.op-dashboard .btn:hover { background: var(--bg);  }
.op-dashboard .btn-ghost { border-color: transparent; background: transparent;  }
.op-dashboard .btn-ghost:hover { background: var(--bg);  }
.op-dashboard .btn-danger { background: #FEE2E2; color: #991B1B; border-color: #FECACA;  }
.op-dashboard .btn-danger:hover { background: #FECACA;  }
.op-dashboard .btn-sm { padding: 4px 8px; font-size: .75rem;  }
.op-dashboard .btn-icon { width: 30px; height: 30px; padding: 0; justify-content: center;  }
.op-dashboard .stat-grid {    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 18px 0; }
.op-dashboard .stat-card {    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s; }
.op-dashboard .stat-card--link:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .06);  }
.op-dashboard .stat-card--dashed { border-style: dashed; border-color: #F59E0B;  }
.op-dashboard .stat-icon {    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0; }
.op-dashboard .stat-icon--orange { background: #FFFBEA; color: #C99A0A;  }
.op-dashboard .stat-icon--blue { background: #E0F2FE; color: #0369A1;  }
.op-dashboard .stat-icon--blue2 { background: #DBEAFE; color: #1E40AF;  }
.op-dashboard .stat-icon--purple { background: #EDE9FE; color: #6D28D9;  }
.op-dashboard .stat-icon--green { background: #D1FAE5; color: #065F46;  }
.op-dashboard .stat-icon--red { background: #FEE2E2; color: #991B1B;  }
.op-dashboard .stat-icon--amber { background: #FEF3C7; color: #92400E;  }
.op-dashboard .stat-icon--gray { background: #F1F5F9; color: #475569;  }
.op-dashboard .stat-value { font-size: 1.25rem; font-weight: 800; color: #1a1a2e; line-height: 1.2;  }
.op-dashboard .stat-value--sm { font-size: 1rem;  }
.op-dashboard .stat-label { font-size: .75rem; color: var(--text-muted); font-weight: 600;  }
.op-dashboard .stat-card--vertical { flex-direction: column; justify-content: center; height: 100%; text-align: center;  }
.op-dashboard .activity-list { display: flex; flex-direction: column; gap: 2px;  }
.op-dashboard .activity-row {    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid #F1F3F6; }
.op-dashboard .activity-row:last-child { border-bottom: none;  }
.op-dashboard .activity-icon {    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0; }
.op-dashboard .activity-title { font-size: .82rem; font-weight: 600; color: #1a1a2e;  }
.op-dashboard .activity-meta { font-size: .7rem; color: var(--text-muted);  }
.op-dashboard .activity-empty {    padding: 20px 4px;
    text-align: center;
    color: var(--text-muted);
    font-size: .82rem; }
.op-dashboard .activity-empty i { font-size: 1.4rem; opacity: .35; display: block; margin-bottom: 8px;  }
.op-dashboard .op-pagination {    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 1.2rem;
    flex-wrap: wrap; }
.op-dashboard .op-page-btn {    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
    color: var(--text);
    background: #fff; }
.op-dashboard .op-page-btn--active { background: #F0B90B; border-color: #F0B90B; color: #1a1a2e;  }
.op-dashboard .op-page-btn--disabled { opacity: .4; pointer-events: none;  }
.op-dashboard .op-page-ellipsis { color: var(--text-muted); font-size: .8rem; padding: 0 4px;  }
.op-dashboard .op-page-summary { text-align: center; margin-top: .6rem; font-size: .72rem; color: var(--text-muted);  }
.op-dashboard .status-tabs { display: flex; gap: 6px; margin-bottom: 1.2rem; flex-wrap: wrap;  }
.op-dashboard .status-tab {    padding: 5px 14px; border-radius: 20px; font-size: .8rem; font-weight: 600;
    border: 1.5px solid var(--border); background: #fff; cursor: pointer;
    text-decoration: none; color: var(--text); transition: all .15s;
    display: flex; align-items: center; gap: 5px; }
.op-dashboard .status-tab.active, .op-dashboard .status-tab:hover { background: #F0B90B; border-color: #F0B90B; color: #1a1a2e;  }
.op-dashboard .status-count { background: rgba(0,0,0,.12); color: inherit; font-size: .68rem; padding: 1px 6px; border-radius: 10px;  }
.op-dashboard .roles-page { max-width: 100%; margin: 0 auto;  }
.op-dashboard .current-roles-wrap {    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 1.2rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap; }
.op-dashboard .current-roles-label {    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    white-space: nowrap; }
.op-dashboard .role-grid {    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
    margin-bottom: 2rem; }
.op-dashboard .role-card {    background: #fff;
    border-radius: 14px;
    border: 2px solid var(--border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: border-color .2s, box-shadow .2s;
    position: relative;
    overflow: hidden; }
.op-dashboard .role-card:hover { border-color: #F0B90B; box-shadow: 0 4px 20px rgba(240,185,11,.18);  }
.op-dashboard .role-card.owned { border-color: #10B981;  }
.op-dashboard .role-card.pending { border-color: #F59E0B;  }
.op-dashboard .role-ribbon {    position: absolute;
    top: 12px;
    right: -1px;
    font-size: .65rem;
    font-weight: 800;
    padding: 2px 10px 2px 8px;
    border-radius: 4px 0 0 4px;
    letter-spacing: .04em;
    text-transform: uppercase; }
.op-dashboard .ribbon-owned { background: #D1FAE5; color: #065F46;  }
.op-dashboard .ribbon-pending { background: #FEF3C7; color: #92400E;  }
.op-dashboard .role-icon {    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 14px;
    flex-shrink: 0; }
.op-dashboard .role-name { font-size: 1rem; font-weight: 800; margin-bottom: 2px;  }
.op-dashboard .role-type-label { font-size: .72rem; color: var(--text-muted); margin-bottom: 14px;  }
.op-dashboard .free-role-form {    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border); }
.op-dashboard .free-role-form input[type=text] {    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .8rem;
    font-family: inherit;
    margin-bottom: 8px;
    transition: border-color .2s; }
.op-dashboard .free-role-form input[type=text]:focus { outline: none; border-color: #F0B90B;  }
.op-dashboard .paid-tiers {    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px; }
.op-dashboard .tier-row { background: var(--bg); border-radius: 10px; padding: 10px 12px;  }
.op-dashboard .tier-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;  }
.op-dashboard .tier-name { font-size: .82rem; font-weight: 700;  }
.op-dashboard .tier-meta { font-size: .7rem; color: var(--text-muted);  }
.op-dashboard .tier-price { font-size: 1rem; font-weight: 800; color: #C99A0A;  }
.op-dashboard .tier-btns { display: flex; gap: 5px; flex-wrap: wrap;  }
.op-dashboard .tier-btn {    flex: 1;
    padding: 6px 8px;
    border: none;
    border-radius: 7px;
    font-size: .73rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: opacity .15s;
    white-space: nowrap; }
.op-dashboard .tier-btn:hover { opacity: .87;  }
.op-dashboard .tier-btn-wallet { background: #F0B90B; color: #1a1a2e;  }
.op-dashboard .tier-btn-fpx { background: #1a1a2e; color: #fff;  }
.op-dashboard .tier-btn-card { background: #635BFF; color: #fff;  }
.op-dashboard .history-wrap {    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden; }
.op-dashboard .history-row {    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border); }
.op-dashboard .history-row:last-child { border-bottom: none;  }
.op-dashboard .wallet-balance-card {    background: linear-gradient(135deg, #F0B90B, #C99A0A);
    border-radius: 14px;
    padding: 2rem;
    color: #1a1a2e;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between; }
.op-dashboard .wallet-balance-label { font-size: .85rem; opacity: .8; margin-bottom: .3rem;  }
.op-dashboard .wallet-balance-amount { font-size: 2.2rem; font-weight: 800;  }
.op-dashboard .wallet-balance-icon { font-size: 3rem; opacity: .3;  }
.op-dashboard .quick-amounts { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem;  }
.op-dashboard .quick-amt-btn {    padding: .4rem .9rem;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
    font-size: .85rem;
    font-family: inherit;
    transition: all .15s; }
.op-dashboard .quick-amt-btn:hover { border-color: #F0B90B; color: #C99A0A;  }
.op-dashboard .tx-type-topup { color: #065F46; font-weight: 600; font-size: .8rem;  }
.op-dashboard .tx-type-deduct { color: #991B1B; font-weight: 600; font-size: .8rem;  }
.op-dashboard .tx-type-refund { color: #0369A1; font-weight: 600; font-size: .8rem;  }
.op-dashboard .tx-amount-in { font-weight: 700; font-size: .88rem; color: #065F46;  }
.op-dashboard .tx-amount-out { font-weight: 700; font-size: .88rem; color: #991B1B;  }
.op-dashboard .art-list { display: flex; flex-direction: column; gap: 12px;  }
.op-dashboard .art-row {    background: #fff; border-radius: 12px; border: 1px solid var(--border);
    padding: 16px 18px; display: flex; align-items: center; gap: 14px;
    transition: box-shadow .15s; }
.op-dashboard .art-row:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07);  }
.op-dashboard .art-thumb {    width: 72px; height: 54px; border-radius: 8px; object-fit: cover;
    background: var(--bg); flex-shrink: 0; }
.op-dashboard .art-thumb-ph {    width: 72px; height: 54px; border-radius: 8px;
    background: var(--bg); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 1.2rem; }
.op-dashboard .art-info { flex: 1; min-width: 0;  }
.op-dashboard .art-title { font-weight: 700; font-size: .9rem; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
.op-dashboard .art-meta { font-size: .75rem; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap;  }
.op-dashboard .art-actions { display: flex; gap: 6px; flex-shrink: 0;  }
.op-dashboard .status-badge {    display: inline-flex; align-items: center; gap: 3px;
    font-size: .7rem; font-weight: 700; padding: 2px 8px;
    border-radius: 20px; white-space: nowrap; }
.op-dashboard .status-draft { background: #F1F5F9; color: #64748B;  }
.op-dashboard .status-pending { background: #FEF3C7; color: #92400E;  }
.op-dashboard .status-published { background: #D1FAE5; color: #065F46;  }
.op-dashboard .status-rejected { background: #FEE2E2; color: #991B1B;  }
.op-dashboard .filter-tabs { display: flex; gap: 6px; margin-bottom: 1.2rem; flex-wrap: wrap;  }
.op-dashboard .filter-tab {    padding: 5px 14px; border-radius: 20px; font-size: .8rem; font-weight: 600;
    border: 1.5px solid var(--border); background: #fff; cursor: pointer;
    text-decoration: none; color: var(--text);
    transition: all .15s; }
.op-dashboard .filter-tab.active, .op-dashboard .filter-tab:hover { background: #F0B90B; border-color: #F0B90B; color: #1a1a2e;  }
.op-dashboard .delete-confirm {    display: none; background: #FEE2E2; padding: 8px 12px;
    border-radius: 8px; margin-top: 8px; font-size: .8rem;
    align-items: center; gap: 8px; }
.op-dashboard .delete-confirm.show { display: flex;  }
.op-dashboard .art-editor-wrap { max-width: 1100px; margin: 0 auto;  }
.op-dashboard .art-table { width: 100%; border-collapse: collapse;  }
.op-dashboard .art-table th {    padding: 10px 14px; text-align: left; font-size: .7rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-muted); border-bottom: 2px solid var(--border);
    background: #f8fafc; }
.op-dashboard .art-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle;  }
.op-dashboard .art-table tr:last-child td { border-bottom: none;  }
.op-dashboard .art-table tr:hover td { background: #fafafa;  }
.op-dashboard .author-cell { display: flex; align-items: center; gap: 8px;  }
.op-dashboard .author-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover;  }
.op-dashboard .action-wrap { display: flex; gap: 4px; align-items: center;  }
.op-dashboard .reject-form {    display: none; background: #FEF2F2; border: 1px solid #FECACA;
    border-radius: 8px; padding: 10px 12px; margin-top: 6px; }
.op-dashboard .reject-form.show { display: block;  }
.op-dashboard .reject-form textarea {    width: 100%; padding: 6px 8px; border: 1px solid var(--border);
    border-radius: 6px; font-size: .8rem; font-family: inherit;
    margin-bottom: 6px; resize: vertical; }
.op-dashboard .featured-btn { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 2px 4px;  }
.op-dashboard .featured-btn.on { color: #F59E0B;  }
.op-dashboard .featured-btn.off { color: #CBD5E1;  }
.op-dashboard .komen-wrap { max-width: 100%; margin: 0 auto;  }
.op-dashboard .komen-card {    background: #fff; border-radius: 12px; border: 1px solid var(--border);
    padding: 16px 18px; margin-bottom: 10px; }
.op-dashboard .komen-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;  }
.op-dashboard .komen-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0;  }
.op-dashboard .komen-name { font-weight: 700; font-size: .85rem;  }
.op-dashboard .komen-date { font-size: .72rem; color: var(--text-muted);  }
.op-dashboard .komen-artikel { font-size: .75rem; color: #C99A0A; text-decoration: none; font-weight: 600;  }
.op-dashboard .komen-content {    font-size: .88rem; line-height: 1.7; color: #334155;
    background: #f8fafc; border-radius: 8px; padding: 10px 14px;
    margin-bottom: 12px; border-left: 3px solid var(--border); }
.op-dashboard .komen-actions { display: flex; gap: 6px; flex-wrap: wrap;  }
.op-dashboard .komen-parent {    font-size: .75rem; color: var(--text-muted); margin-bottom: 8px;
    padding: 6px 10px; background: #f1f5f9; border-radius: 6px; }
.op-dashboard .editor-wrap {    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 20px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto; }
@media(max-width:900px) {
.op-dashboard .editor-wrap { grid-template-columns: 1fr;  }
}
.op-dashboard .lang-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid var(--border);  }
.op-dashboard .lang-tab {    padding: 8px 20px;
    font-size: .82rem;
    font-weight: 700;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s; }
.op-dashboard .lang-tab.active { color: #C99A0A; border-bottom-color: #F0B90B;  }
.op-dashboard .editor-pane { display: none;  }
.op-dashboard .editor-pane.active { display: block;  }
.op-dashboard .title-input {    width: 100%;
    border: none;
    outline: none;
    font-size: 1.6rem;
    font-weight: 800;
    font-family: inherit;
    color: var(--text);
    padding: 12px 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 16px;
    background: transparent;
    resize: none;
    overflow: hidden;
    transition: border-color .2s; }
.op-dashboard .title-input:focus { border-bottom-color: var(--primary);  }
.op-dashboard .title-input::placeholder { color: #CBD5E1;  }
.op-dashboard .blocks-wrap { min-height: 300px;  }
.op-dashboard .block-item {    position: relative;
    margin-bottom: 4px;
    border-radius: 8px;
    transition: background .15s; }
.op-dashboard .block-item:hover .block-controls { opacity: 1;  }
.op-dashboard .block-item.drag-over { border-top: 2px solid #F0B90B;  }
.op-dashboard .block-controls {    position: absolute;
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transition: opacity .15s; }
.op-dashboard .block-ctrl-btn {    width: 28px;
    height: 28px;
    border: none;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.1);
    color: #64748B;
    transition: background .1s, color .1s; }
.op-dashboard .block-ctrl-btn:hover { background: #f1f5f9; color: #C99A0A;  }
.op-dashboard .drag-handle { cursor: grab;  }
.op-dashboard .drag-handle:active { cursor: grabbing;  }
.op-dashboard .block-content [contenteditable] {    outline: none;
    width: 100%;
    min-height: 1.5em;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: .95rem;
    line-height: 1.7;
    font-family: inherit;
    transition: background .15s; }
.op-dashboard .block-content [contenteditable]:focus { background: #FFFBEB;  }
.op-dashboard .block-content [contenteditable]:empty::before {    content: attr(data-placeholder);
    color: #CBD5E1;
    pointer-events: none; }
.op-dashboard .block-h2 [contenteditable] { font-size: 1.4rem; font-weight: 800;  }
.op-dashboard .block-h3 [contenteditable] { font-size: 1.15rem; font-weight: 700;  }
.op-dashboard .block-h4 [contenteditable] { font-size: 1rem; font-weight: 700;  }
.op-dashboard .block-quote [contenteditable] {    border-left: 4px solid #F0B90B;
    padding-left: 16px;
    font-style: italic;
    color: #64748B; }
.op-dashboard .block-callout [contenteditable] {    background: #FFFBEB;
    border: 1.5px solid #FCD34D;
    border-radius: 8px;
    padding: 12px 14px; }
.op-dashboard .block-code [contenteditable] {    background: #1e293b;
    color: #e2e8f0;
    font-family: monospace;
    font-size: .85rem;
    border-radius: 8px;
    padding: 14px; }
.op-dashboard .block-divider { padding: 8px 0; text-align: center;  }
.op-dashboard .block-divider hr { border: none; border-top: 2px solid var(--border);  }
.op-dashboard .block-image { padding: 4px 0;  }
.op-dashboard .block-image img { max-width: 100%; border-radius: 10px; display: block;  }
.op-dashboard .block-image .img-placeholder {    border: 2px dashed var(--border);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    color: var(--text-muted); }
.op-dashboard .block-image .img-placeholder:hover { border-color: #F0B90B; color: #C99A0A;  }
.op-dashboard .block-image .img-caption {    font-size: .78rem;
    color: var(--text-muted);
    text-align: center;
    padding: 4px;
    outline: none;
    margin-top: 6px;
    width: 100%;
    border: none;
    font-family: inherit;
    background: transparent; }
.op-dashboard .block-image .img-caption:empty::before { content: attr(data-placeholder);  }
.op-dashboard .block-youtube { padding: 4px 0;  }
.op-dashboard .block-youtube .yt-input-wrap { display: flex; gap: 8px; align-items: center;  }
.op-dashboard .block-youtube .yt-input {    flex: 1;
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .85rem;
    font-family: inherit;
    transition: border-color .2s; }
.op-dashboard .block-youtube .yt-input:focus { outline: none; border-color: var(--primary);  }
.op-dashboard .block-youtube .yt-embed { border-radius: 10px; overflow: hidden; aspect-ratio: 16/9;  }
.op-dashboard .block-youtube .yt-embed iframe { width: 100%; height: 100%; border: none;  }
.op-dashboard .block-list ul, .op-dashboard .block-list ol { padding-left: 1.4rem; margin: 0;  }
.op-dashboard .block-list li { padding: 2px 0;  }
.op-dashboard .add-block-wrap { position: relative; margin: 6px 0;  }
.op-dashboard .add-block-btn {    width: 100%;
    padding: 8px;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    background: none;
    cursor: pointer;
    font-size: .78rem;
    color: var(--text-muted);
    font-family: inherit;
    transition: all .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; }
.op-dashboard .add-block-btn:hover { border-color: #F0B90B; color: #C99A0A; background: #FFFBEB;  }
.op-dashboard .block-picker {    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 100;
    padding: 8px;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px; }
.op-dashboard .block-picker.open { display: grid;  }
.op-dashboard .block-type-btn {    padding: 8px 4px;
    border: none;
    background: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: .72rem;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: background .1s;
    color: var(--text); }
.op-dashboard .block-type-btn:hover { background: #FEF3C7;  }
.op-dashboard .block-type-btn i { font-size: 1rem; color: #C99A0A;  }
.op-dashboard .autosave-status {    font-size: .72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px; }
.op-dashboard .autosave-status.saving { color: #C99A0A;  }
.op-dashboard .autosave-status.saved { color: #10B981;  }
.op-dashboard .autosave-status.error { color: #EF4444;  }
.op-dashboard .editor-sidebar {    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 20px; }
.op-dashboard .sidebar-card {    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 16px; }
.op-dashboard .sidebar-card h4 {    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    margin-bottom: 12px; }
.op-dashboard .featured-wrap { position: relative;  }
.op-dashboard .featured-img {    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    max-height: 180px;
    display: block; }
.op-dashboard .featured-ph {    width: 100%;
    height: 120px;
    border: 2px dashed var(--border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 6px;
    color: var(--text-muted);
    font-size: .8rem;
    transition: all .15s; }
.op-dashboard .featured-ph:hover { border-color: #F0B90B; color: #C99A0A;  }
.op-dashboard .featured-remove {    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,.6);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: .7rem;
    display: flex;
    align-items: center;
    justify-content: center; }
.op-dashboard .form-label {    display: block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .04em; }
.op-dashboard .form-control {    width: 100%;
    padding: 7px 10px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: .85rem;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    transition: border-color .2s; }
.op-dashboard .form-control:focus { outline: none; border-color: var(--primary); background: #fff;  }
.op-dashboard .form-hint { font-size: .7rem; color: var(--text-muted); margin-top: 3px;  }
.op-dashboard .status-badge-editor {    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .78rem;
    font-weight: 700; }
.op-dashboard .int-wrap { max-width: 100%; margin: 0 auto;  }
.op-dashboard .int-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem;  }
.op-dashboard .int-tab {    padding: 8px 18px; font-size: .83rem; font-weight: 600;
    border: none; background: none; cursor: pointer; font-family: inherit;
    color: var(--text-muted); border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all .15s; display: flex; align-items: center; gap: 6px; }
.op-dashboard .int-tab.active { color: #C99A0A; border-bottom-color: #F0B90B;  }
.op-dashboard .int-tab:hover { color: #C99A0A;  }
.op-dashboard .int-pane { display: none;  }
.op-dashboard .int-pane.active { display: block;  }
.op-dashboard .svc-card {    background: #fff; border-radius: 12px; border: 1px solid var(--border);
    margin-bottom: 16px; overflow: hidden; }
.op-dashboard .svc-header {    padding: 16px 20px; display: flex; align-items: center; gap: 14px;
    cursor: pointer; transition: background .15s; user-select: none; }
.op-dashboard .svc-header:hover { background: #fafafa;  }
.op-dashboard .svc-logo {    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.op-dashboard .svc-name { font-size: .92rem; font-weight: 700; margin-bottom: 2px;  }
.op-dashboard .svc-desc { font-size: .75rem; color: var(--text-muted);  }
.op-dashboard .svc-badge {    margin-left: auto; font-size: .72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 20px; white-space: nowrap;
    display: flex; align-items: center; gap: 4px; }
.op-dashboard .svc-chevron { color: var(--text-muted); transition: transform .2s; margin-left: 8px;  }
.op-dashboard .svc-chevron.open { transform: rotate(180deg);  }
.op-dashboard .svc-body { display: none; border-top: 1px solid var(--border);  }
.op-dashboard .svc-body.open { display: block;  }
.op-dashboard .svc-inner-tabs { display: flex; background: #f8fafc; border-bottom: 1px solid var(--border);  }
.op-dashboard .svc-inner-tab {    padding: 10px 16px; font-size: .78rem; font-weight: 600;
    border: none; background: none; cursor: pointer; font-family: inherit;
    color: var(--text-muted); border-bottom: 2px solid transparent;
    transition: all .15s; }
.op-dashboard .svc-inner-tab.active { color: #C99A0A; border-bottom-color: #F0B90B; background: #fff;  }
.op-dashboard .svc-content { padding: 20px;  }
.op-dashboard .svc-guide-content { padding: 20px;  }
.op-dashboard .svc-test-btns { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap;  }
.op-dashboard .mp-test-result { margin-top: 12px;  }
.op-dashboard .guide-step {    display: flex; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--border); }
.op-dashboard .guide-step:last-child { border-bottom: none;  }
.op-dashboard .guide-num {    width: 28px; height: 28px; border-radius: 50%;
    background: #F0B90B; color: #1a1a2e; font-size: .78rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    margin-top: 1px; }
.op-dashboard .guide-text { font-size: .82rem; line-height: 1.6; color: #334155;  }
.op-dashboard .guide-text strong { color: #1a1a2e;  }
.op-dashboard .guide-link {    display: inline-flex; align-items: center; gap: 4px;
    color: #C99A0A; font-weight: 600; text-decoration: none; font-size: .8rem; }
.op-dashboard .guide-link:hover { text-decoration: underline;  }
.op-dashboard .field-group { margin-bottom: 14px;  }
.op-dashboard .field-label {    font-size: .78rem; font-weight: 600; display: block;
    margin-bottom: 5px; color: #1a1a2e; }
.op-dashboard .field-label span { color: #EF4444;  }
.op-dashboard .field-input {    width: 100%; padding: 9px 12px; border: 1.5px solid var(--border);
    border-radius: 8px; font-size: .83rem; font-family: inherit;
    color: #1a1a2e; background: #fff; outline: none; transition: border-color .2s; }
.op-dashboard .field-input:focus { border-color: #F0B90B;  }
.op-dashboard .field-hint { font-size: .71rem; color: var(--text-muted); margin-top: 4px;  }
.op-dashboard .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;  }
@media(max-width:600px) {
.op-dashboard .field-grid { grid-template-columns: 1fr;  }
}
.op-dashboard .mode-toggle { display: flex; gap: 6px; margin-bottom: 16px;  }
.op-dashboard .mode-btn {    flex: 1; padding: 8px; border-radius: 8px; border: 1.5px solid var(--border);
    background: #fff; cursor: pointer; font-size: .8rem; font-weight: 600;
    font-family: inherit; display: flex; align-items: center; justify-content: center;
    gap: 6px; transition: all .15s; }
.op-dashboard .mode-btn.live { border-color: #10B981; background: #F0FDF4; color: #065F46;  }
.op-dashboard .mode-btn.sandbox { border-color: #F59E0B; background: #FFFBEB; color: #92400E;  }
.op-dashboard .int-alert {    padding: 10px 14px; border-radius: 8px; font-size: .8rem;
    display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.op-dashboard .int-alert > i { flex-shrink: 0; margin-top: 2px;  }
.op-dashboard .int-alert > i { flex-shrink: 0; line-height: 1.5; }
.op-dashboard .int-alert-warn { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D;  }
.op-dashboard .int-alert-info { background: #DBEAFE; color: #1E40AF; border: 1px solid #BFDBFE;  }
.op-dashboard .locked-card {    background: #fff; border-radius: 12px; border: 1.5px dashed #CBD5E1;
    padding: 20px; display: flex; align-items: center; gap: 14px;
    margin-bottom: 16px; opacity: .8; }
.op-dashboard .locked-icon {    width: 46px; height: 46px; border-radius: 12px; background: #F1F5F9;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: #94A3B8; flex-shrink: 0; }
.op-dashboard .btn-test { display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:.82rem;font-weight:600;border:1px solid var(--border);background:#fff;color:#475569;cursor:pointer;transition:all .2s;  }
.op-dashboard .btn-test:hover { background:#F8FAFC;border-color:#CBD5E1;  }
.op-dashboard .btn-test-conn { color:#0369A1;border-color:#BAE6FD;  }
.op-dashboard .btn-test-conn:hover { background:#E0F2FE;border-color:#7DD3FC;  }
.op-dashboard .btn-test-ship { color:#7C3AED;border-color:#DDD6FE;  }
.op-dashboard .btn-test-ship:hover { background:#EDE9FE;border-color:#C4B5FD;  }
.op-dashboard .btn-test:disabled { opacity:.5;cursor:not-allowed;  }
.op-dashboard .bank-empty { text-align:center;padding:2rem 1rem;color:var(--muted);  }
.op-dashboard .bank-empty i { font-size:2rem;opacity:.2;display:block;margin-bottom:.8rem;  }
.op-dashboard .bank-card { display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:10px;transition:box-shadow .2s;  }
.op-dashboard .bank-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.04);  }
.op-dashboard .bank-icon { width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;  }
.op-dashboard .bank-info { flex:1;min-width:0;  }
.op-dashboard .bank-name { font-weight:700;font-size:.88rem;  }
.op-dashboard .bank-acno { font-size:.78rem;color:var(--muted);font-family:monospace;letter-spacing:.5px;  }
.op-dashboard .bank-holder { font-size:.75rem;color:var(--muted);  }
.op-dashboard .bank-actions { display:flex;align-items:center;gap:6px;flex-shrink:0;  }
.op-dashboard .bank-badge-default { font-size:.68rem;font-weight:700;background:#F0B90B;color:#1a1a2e;padding:3px 10px;border-radius:10px;  }
.op-dashboard .bank-btn-default { font-size:.68rem;font-weight:600;background:#F1F5F9;color:#64748B;padding:3px 10px;border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:background .2s;  }
.op-dashboard .bank-btn-default:hover { background:#E2E8F0;  }
.op-dashboard .bank-btn-icon { width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;  }
.op-dashboard .bank-btn-icon:hover { background:#F8FAFC;  }
.op-dashboard .bank-btn-icon.danger { border-color:#FECACA;background:#FEF2F2;  }
.op-dashboard .bank-btn-icon.danger:hover { background:#FEE2E2;  }
.op-dashboard .bank-form-wrap { padding:16px;background:#FAFAFA;border:1px solid var(--border);border-radius:10px;margin-top:12px;  }
.op-dashboard .bank-btn-add { display:inline-flex;align-items:center;gap:6px;padding:8px 20px;background:#F0B90B;color:#1a1a2e;border:none;border-radius:8px;font-size:.82rem;font-weight:700;cursor:pointer;transition:background .2s;  }
.op-dashboard .bank-btn-add:hover { background:#D4A30A;  }
.op-dashboard .bank-btn-save { display:inline-flex;align-items:center;gap:6px;padding:8px 20px;background:#059669;color:#fff;border:none;border-radius:8px;font-size:.82rem;font-weight:700;cursor:pointer;transition:background .2s;  }
.op-dashboard .bank-btn-save:hover { background:#047857;  }
.op-dashboard .bank-btn-cancel { display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#F1F5F9;color:#64748B;border:1px solid var(--border);border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;  }
.op-dashboard .bank-btn-cancel:hover { background:#E2E8F0;  }
.op-dashboard .topbar-lang { display:inline-flex; border:1px solid var(--border); border-radius:20px; overflow:hidden; background:#fff;  }
.op-dashboard .topbar-lang a { padding:4px 12px; font-size:.78rem; font-weight:700; color:var(--muted); text-decoration:none; transition:background .2s,color .2s;  }
.op-dashboard .topbar-lang a.active { background:#F0B90B; color:#1a1a2e;  }
@media (max-width: 768px) {
.op-dashboard .sidebar { transform: translateX(-100%);  }
.op-dashboard .sidebar.open { transform: translateX(0);  }
.op-dashboard .main-wrap { margin-left: 0;  }
.op-dashboard .sidebar-toggle { display: block;  }
.op-dashboard .form-grid { grid-template-columns: 1fr;  }
.op-dashboard .welcome-card { flex-direction: column; text-align: center;  }
.op-dashboard .profile-card { flex-direction: column; text-align: center;  }
/* ── Pembetulan mesra telefon ── */
.op-dashboard .main-content { padding: 1rem .9rem; overflow-x: hidden; }
.op-dashboard .page-title { font-size: 1.15rem; margin-bottom: 1rem; }
.op-dashboard .topbar { padding: 0 .8rem; }
.op-dashboard .topbar-right { gap: .5rem; }
.op-dashboard .user-name { display: none; }
.op-dashboard table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.op-dashboard table th, .op-dashboard table td { white-space: nowrap; }
.op-dashboard .info-table td:first-child { width: auto; }
.op-dashboard .stat-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
.op-dashboard .card-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
.op-dashboard .role-grid { grid-template-columns: 1fr; }
.op-dashboard .welcome-card { padding: 1.2rem; }
.op-dashboard input, .op-dashboard select, .op-dashboard textarea { font-size: 16px; }
.op-dashboard .btn, .op-dashboard button { min-height: 40px; }
}



/* ========================================================================
   22. PREVIEW artikel (standalone) — diskop bawah .page-preview
   ·  asal: preview.css  (elak clobber rendering artikel-baca awam)
   ======================================================================== */
body.page-preview {    --art-max-width: 760px;
    --art-text: #334155;
    --art-heading: #0f172a;
    --art-muted: #64748B;
    --art-border: #E2E8F0;
    --art-primary: #F0B90B; }
body.page-preview {    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    color: var(--art-text);
    background: #fff;
    line-height: 1.7;
    margin: 0;
    padding: 0; }
.page-preview .artikel-wrap {    background: #fff;
    min-height: 100vh;
    padding-bottom: 4rem; }
.page-preview .artikel-hero {    width: 100%;
    max-width: 1000px;
    margin: 0 auto 2rem; }
.page-preview .artikel-hero-img {    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    display: block;
    background: #f8fafc; }
@media (min-width: 1024px) {
.page-preview .artikel-hero-img {        border-radius: 0 0 16px 16px;
     }
}
.page-preview .artikel-content-wrap {    max-width: var(--art-max-width);
    margin: 0 auto;
    padding: 0 1.5rem; }
.page-preview .artikel-breadcrumb {    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--art-muted);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap; }
.page-preview .artikel-breadcrumb a {    color: var(--art-muted);
    text-decoration: none;
    transition: color .2s; }
.page-preview .artikel-breadcrumb a:hover {    color: var(--art-primary); }
.page-preview .artikel-title {    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 800;
    color: var(--art-heading);
    line-height: 1.25;
    margin: 0 0 1.5rem;
    letter-spacing: -0.02em; }
.page-preview .artikel-meta {    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-top: 1px solid var(--art-border);
    border-bottom: 1px solid var(--art-border);
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem; }
.page-preview .artikel-author {    display: flex;
    align-items: center;
    gap: 12px; }
.page-preview .artikel-author-avatar {    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #f1f5f9; }
.page-preview .artikel-author-name {    font-size: .95rem;
    font-weight: 700;
    color: var(--art-heading);
    margin-bottom: 2px; }
.page-preview .artikel-date {    font-size: .8rem;
    color: var(--art-muted); }
.page-preview .artikel-excerpt {    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--art-muted);
    font-style: italic;
    border-left: 4px solid var(--art-primary);
    padding-left: 1.2rem;
    margin-bottom: 2.5rem; }
.page-preview .artikel-body {    font-size: 1.05rem; }
.page-preview .artikel-body > * {    margin-bottom: 1.5rem; }
.page-preview .artikel-body > *:last-child {    margin-bottom: 0; }
.page-preview .ab-p {    margin-top: 0;
    line-height: 1.8; }
.page-preview .ab-h2 {    font-size: 1.75rem;
    font-weight: 800;
    color: var(--art-heading);
    margin: 2.5rem 0 1rem;
    line-height: 1.3; }
.page-preview .ab-h3 {    font-size: 1.4rem;
    font-weight: 700;
    color: var(--art-heading);
    margin: 2rem 0 1rem;
    line-height: 1.4; }
.page-preview .ab-h4 {    font-size: 1.15rem;
    font-weight: 700;
    color: var(--art-heading);
    margin: 1.5rem 0 1rem; }
.page-preview .ab-quote {    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;
    color: var(--art-heading);
    border-left: 4px solid var(--art-primary);
    margin: 2rem 0;
    padding: 0.5rem 0 0.5rem 1.5rem;
    background: linear-gradient(90deg, rgba(240,185,11,0.08) 0%, rgba(255,255,255,0) 100%); }
.page-preview .ab-callout {    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: 10px;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    color: #92400E;
    display: flex;
    align-items: flex-start;
    gap: 12px; }
.page-preview .ab-callout i {    color: #F59E0B;
    margin-top: 4px;
    font-size: 1.1rem; }
.page-preview .ab-code {    background: #1e293b;
    color: #e2e8f0;
    padding: 1.2rem;
    border-radius: 10px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .9rem;
    line-height: 1.5; }
.page-preview .ab-code code {    font-family: inherit; }
.page-preview .ab-divider {    border: none;
    border-top: 2px solid var(--art-border);
    margin: 2.5rem auto;
    width: 50%; }
.page-preview .ab-list {    padding-left: 1.5rem;
    margin-top: 0; }
.page-preview .ab-list li {    margin-bottom: 0.5rem;
    line-height: 1.7; }
.page-preview .ab-figure {    margin: 2rem 0; }
.page-preview .ab-figure img {    max-width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
    background: #f1f5f9; }
.page-preview .ab-figure figcaption {    text-align: center;
    font-size: .85rem;
    color: var(--art-muted);
    margin-top: 10px;
    font-style: italic; }
.page-preview .ab-youtube {    position: relative;
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
    margin: 2rem 0;
    border-radius: 12px;
    background: #000; }
.page-preview .ab-youtube iframe {    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }
.page-preview .artikel-tags {    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--art-border); }
.page-preview .artikel-tag {    display: inline-flex;
    padding: 6px 14px;
    background: #f1f5f9;
    color: #475569;
    font-size: .8rem;
    font-weight: 600;
    border-radius: 20px;
    transition: background .2s, color .2s; }
.page-preview .artikel-tag:hover {    background: var(--art-primary);
    color: #1a1a2e; }
@media (max-width: 768px) {
.page-preview .artikel-title {        font-size: 1.8rem;
     }
.page-preview .artikel-excerpt {        font-size: 1.05rem;
        padding-left: 1rem;
     }
.page-preview .ab-h2 {        font-size: 1.5rem;
     }
.page-preview .ab-h3 {        font-size: 1.25rem;
     }
.page-preview .ab-quote {        font-size: 1.1rem;
     }
}



/* ========================================================================
   23. DASHBOARD tambahan — direktori kedai (.shop-dir-*) + role gate (.rg-*)
   ·  asal: dashboard-kedai-browse.css + role-gate.css
   ======================================================================== */
/* ==========================================
   LOKASI FOLDER ASAL : /templates/default/assets/css
   NAMA FAIL ASAL     : dashboard-kedai-browse.css
   NOTA               : Gaya khusus direktori kedai (dashboard).
                        Dimuat selepas pasarkarat.css.
   ========================================== */

.shop-dir-card{display:flex;gap:14px;padding:14px;background:#fff;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}
.shop-dir-card:hover{border-color:#F0B90B;box-shadow:0 4px 16px rgba(240,185,11,.12)}
.shop-dir-logo{width:64px;height:64px;border-radius:12px;object-fit:cover;flex-shrink:0;background:#F1F5F9}
.shop-dir-logo-ph{width:64px;height:64px;border-radius:12px;flex-shrink:0;background:#FEF3C7;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:#C99A0A}
.shop-dir-name{font-weight:700;font-size:.9rem;margin-bottom:2px;color:#1a1a2e}
.shop-dir-tagline{font-size:.76rem;color:#64748B;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-dir-meta{display:flex;align-items:center;gap:10px;font-size:.72rem;color:#64748B;margin-top:6px;flex-wrap:wrap}
.shop-dir-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:20px;font-size:.62rem;font-weight:700}
.shop-dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
@media(max-width:500px){.shop-dir-grid{grid-template-columns:1fr}}

/* --- role gate (role-gate.css) --- */
/* ==========================================
   LOKASI FOLDER ASAL : /templates/default/assets/css
   NAMA FAIL ASAL     : role-gate.css
   ========================================== */

.rg-wrap {
    max-width: 540px;
    margin: 3.5rem auto;
    padding: 0 1rem;
}

.rg-card {
    background: #fff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 18px;
    padding: 2.25rem 2rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}

.rg-icon {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.4rem;
    font-size: 1.9rem;
}

.rg-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: .6rem;
    color: var(--text, #111827);
}

.rg-desc {
    color: var(--text-muted, #6B7280);
    font-size: .9rem;
    line-height: 1.7;
    margin-bottom: 1.6rem;
}

/* Banner flash */
.rg-banner {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: center;
    font-size: .82rem;
    font-weight: 600;
    padding: .6rem .9rem;
    border-radius: 10px;
    margin-bottom: 1.2rem;
}
.rg-banner--ok  { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; }
.rg-banner--err { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

/* Status card */
.rg-status {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    text-align: left;
    padding: .95rem 1.05rem;
    border-radius: 12px;
    margin-bottom: 1.3rem;
}
.rg-status i { font-size: 1.15rem; margin-top: .1rem; }
.rg-status strong { display: block; font-size: .9rem; margin-bottom: .15rem; }
.rg-status span   { display: block; font-size: .8rem; line-height: 1.55; opacity: .9; }
.rg-status--pending  { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.rg-status--rejected { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }

/* Form */
.rg-form { text-align: left; margin-bottom: 1.2rem; }
.rg-label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text, #374151);
    margin-bottom: .4rem;
}
.rg-textarea {
    width: 100%;
    border: 1px solid var(--border, #D1D5DB);
    border-radius: 10px;
    padding: .7rem .8rem;
    font: inherit;
    font-size: .85rem;
    resize: vertical;
    box-sizing: border-box;
    margin-bottom: .9rem;
}
.rg-textarea:focus {
    outline: none;
    border-color: var(--gold, #F0B90B);
    box-shadow: 0 0 0 3px rgba(240, 185, 11, .15);
}
.rg-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    justify-content: center;
    background: var(--gold, #F0B90B);
    color: #1a1a1a;
    border: none;
    border-radius: 10px;
    padding: .8rem 1.5rem;
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s ease;
}
.rg-btn:hover { filter: brightness(.95); }

.rg-link {
    display: inline-block;
    margin-top: .3rem;
    color: var(--text-muted, #6B7280);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}
.rg-link:hover { color: var(--gold, #C99A0A); }



/* ========================================================================
   24. AUTH (login/daftar/reset) — diskop bawah .auth-page
   ·  asal: auth.css  (*-reset dibuang; :root & body -> body.auth-page)
   ======================================================================== */
body.auth-page {    --op-primary:   #F0B90B;
    --op-primary-d: #C99A0A;
    --op-ink:       #1a1a2e;
    --op-bg:        #f4f6fb;
    --op-card:      #ffffff;
    --op-border:    #e5e7ef;
    --op-text:      #1a1a2e;
    --op-muted:     #64748B;
    --op-danger:    #EF4444;
    --op-success:   #10B981;
    --op-radius:    16px;
    --op-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; }
body.auth-page {    font-family: var(--op-font);
    background:
        radial-gradient(1200px 500px at 100% -10%, rgba(240,185,11,.10), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(240,185,11,.08), transparent 55%),
        var(--op-bg);
    color: var(--op-text);
    min-height: 100vh; }
.auth-page .auth-nav {    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 12px; }
.auth-page .auth-nav-brand {    display: inline-flex;
    align-items: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--op-ink);
    text-decoration: none;
    letter-spacing: -.02em; }
.auth-page .auth-nav-brand span { color: var(--op-primary-d);  }
.auth-page .auth-nav-brand-dot {    width: 7px; height: 7px; border-radius: 50%;
    background: var(--op-primary); margin-left: 3px; align-self: flex-end;
    margin-bottom: 5px; }
.auth-page .nav-brand {    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--op-ink);
    text-decoration: none; }
.auth-page .brand-icon { font-size: 1.4rem;  }
.auth-page .nav-links { display: flex; align-items: center; gap: 18px;  }
.auth-page .nav-links a {    color: var(--op-muted);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: color .2s; }
.auth-page .nav-links a:hover { color: var(--op-primary-d);  }
.auth-page .lang-switch {    padding: 5px 12px;
    border: 1px solid var(--op-border);
    border-radius: 20px;
    background: #fff; }
.auth-page .auth-nav-link {    color: var(--op-muted);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    transition: color .2s; }
.auth-page .auth-nav-link:hover { color: var(--op-primary-d);  }
.auth-page .auth-lang-switch {    display: inline-flex;
    border: 1px solid var(--op-border);
    border-radius: 20px;
    overflow: hidden;
    background: #fff; }
.auth-page .auth-lang-switch a {    padding: 5px 12px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--op-muted);
    text-decoration: none;
    transition: background .2s, color .2s; }
.auth-page .auth-lang-switch a.active { background: var(--op-primary); color: var(--op-ink);  }
.auth-page .auth-wrap, .auth-page .auth-container {    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 60px;
    min-height: calc(100vh - 80px); }
.auth-page .auth-card {    width: 100%;
    max-width: 420px;
    background: var(--op-card);
    border: 1px solid var(--op-border);
    border-radius: var(--op-radius);
    padding: 36px 32px;
    box-shadow: 0 10px 40px rgba(26,26,46,.08); }
.auth-page .auth-icon-wrap, .auth-page .auth-icon {    width: 64px; height: 64px;
    margin: 0 auto 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #FFF7DB, #FDE9A9);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; }
.auth-page .auth-header { text-align: center; margin-bottom: 22px;  }
.auth-page .auth-header h1, .auth-page .auth-title {    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    text-align: center;
    color: var(--op-ink);
    margin-bottom: 6px; }
.auth-page .auth-header p, .auth-page .auth-sub {    text-align: center;
    color: var(--op-muted);
    font-size: .9rem;
    line-height: 1.5;
    margin-bottom: 24px; }
.auth-page .auth-header p { margin-bottom: 0;  }
.auth-page .auth-steps {    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 26px; }
.auth-page .auth-step { display: flex; flex-direction: column; align-items: center; gap: 5px;  }
.auth-page .auth-step-num {    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem; font-weight: 800;
    background: #F1F5F9; color: var(--op-muted);
    border: 2px solid transparent;
    transition: all .2s; }
.auth-page .auth-step-label { font-size: .68rem; font-weight: 600; color: var(--op-muted);  }
.auth-page .auth-step.active .auth-step-num {    background: var(--op-primary); color: var(--op-ink); }
.auth-page .auth-step.active .auth-step-label { color: var(--op-primary-d);  }
.auth-page .auth-step.done .auth-step-num {    background: #D1FAE5; color: var(--op-success); }
.auth-page .auth-step-line {    flex: 1; max-width: 46px; height: 2px;
    background: var(--op-border); border-radius: 2px;
    transition: background .2s; }
.auth-page .auth-step-line.done { background: var(--op-primary);  }
.auth-page .auth-field { margin-bottom: 16px;  }
.auth-page .auth-field label, .auth-page .form-group label {    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--op-ink);
    margin-bottom: 6px; }
.auth-page .auth-field label span { color: var(--op-danger);  }
.auth-page .form-group { margin-bottom: 18px;  }
.auth-page .auth-input-wrap, .auth-page .input-wrap { position: relative; display: flex; align-items: center;  }
.auth-page .field-icon, .auth-page .input-icon {    position: absolute;
    left: 14px;
    color: #94A3B8;
    font-size: .95rem;
    pointer-events: none; }
.auth-page .auth-input, .auth-page .form-group input, .auth-page .input-wrap input {    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid var(--op-border);
    border-radius: 10px;
    font-size: .92rem;
    font-family: inherit;
    color: var(--op-text);
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s; }
.auth-page .auth-input:focus, .auth-page .form-group input:focus, .auth-page .input-wrap input:focus {    border-color: var(--op-primary);
    box-shadow: 0 0 0 3px rgba(240,185,11,.16); }
.auth-page .auth-input.is-invalid, .auth-page .form-group input.is-invalid {    border-color: var(--op-danger); }
.auth-page .auth-input.has-toggle, .auth-page .input-wrap input { padding-right: 44px;  }
.auth-page .toggle-pw {    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: #94A3B8;
    padding: 6px;
    line-height: 1; }
.auth-page .field-err {    color: var(--op-danger);
    font-size: .76rem;
    font-weight: 600;
    margin-top: 5px; }
.auth-page .pw-strength-bar, .auth-page .strength-bar {    height: 4px;
    background: #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px; }
.auth-page .strength-fill {    height: 100%;
    width: 0;
    border-radius: 4px;
    transition: width .3s, background .3s; }
.auth-page .strength-label {    display: block;
    margin-top: 5px;
    font-size: .74rem;
    font-weight: 600; }
.auth-page .auth-check-wrap {    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px; }
.auth-page .auth-check {    width: 16px; height: 16px;
    accent-color: var(--op-primary);
    cursor: pointer;
    flex-shrink: 0; }
.auth-page .auth-check-label {    font-size: .85rem;
    color: var(--op-muted);
    cursor: pointer;
    line-height: 1.4; }
.auth-page .auth-forgot {    display: block;
    text-align: right;
    font-size: .82rem;
    font-weight: 600;
    color: var(--op-primary-d);
    text-decoration: none;
    margin: -6px 0 16px; }
.auth-page .auth-forgot:hover { text-decoration: underline;  }
.auth-page .btn-auth, .auth-page .btn-primary {    width: 100%;
    padding: 13px 18px;
    background: var(--op-primary);
    color: var(--op-ink);
    border: none;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background .2s, transform .08s; }
.auth-page .btn-auth:hover, .auth-page .btn-primary:hover { background: var(--op-primary-d);  }
.auth-page .btn-auth:active, .auth-page .btn-primary:active { transform: scale(.98);  }
.auth-page .btn-link {    display: inline-block;
    color: var(--op-primary-d);
    font-weight: 700;
    text-decoration: none;
    font-size: .9rem; }
.auth-page .btn-link:hover { text-decoration: underline;  }
.auth-page .auth-or {    text-align: center;
    color: var(--op-muted);
    font-size: .8rem;
    margin: 20px 0 14px;
    position: relative; }
.auth-page .auth-or::before, .auth-page .auth-or::after {    content: "";
    position: absolute;
    top: 50%;
    width: 32%;
    height: 1px;
    background: var(--op-border); }
.auth-page .auth-or::before { left: 0;  }
.auth-page .auth-or::after { right: 0;  }
.auth-page .btn-social {    width: 100%;
    padding: 11px 16px;
    background: #fff;
    border: 1.5px solid var(--op-border);
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--op-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    transition: background .2s, border-color .2s; }
.auth-page .btn-social:hover { background: var(--op-bg); border-color: #CBD5E1;  }
.auth-page a.btn-social { text-decoration: none; }
.auth-page a.btn-social:hover { text-decoration: none; color: var(--op-text); }
.auth-page .auth-alert, .auth-page .alert {    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: .85rem;
    line-height: 1.5;
    margin-bottom: 18px; }
.auth-page .auth-alert.success, .auth-page .alert-success {    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0; }
.auth-page .auth-alert.error, .auth-page .alert-danger {    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA; }
.auth-page .alert strong { font-weight: 700;  }
.auth-page .alert small { opacity: .85;  }
.auth-page .auth-footer, .auth-page .auth-footer-link {    text-align: center;
    margin-top: 22px;
    font-size: .88rem;
    color: var(--op-muted); }
.auth-page .auth-footer a, .auth-page .auth-footer-link a {    color: var(--op-primary-d);
    font-weight: 700;
    text-decoration: none; }
.auth-page .auth-footer a:hover, .auth-page .auth-footer-link a:hover { text-decoration: underline;  }
@media (max-width: 480px) {
.auth-page .auth-card { padding: 28px 22px; border-radius: 14px;  }
.auth-page .auth-nav { padding: 14px 18px;  }
.auth-page .auth-step-label { display: none;  }
.auth-page .auth-step-line { max-width: 30px;  }
}



/* ========================================================================
   25. PROFIL AWAM (.pub-*) — standalone  ·  asal: profil-awam.css
   ======================================================================== */
body.page-profil { background:#f4f6fb; }
.page-profil .pub-wrap { max-width:680px; margin:3rem auto; padding:0 1.5rem; }
.page-profil .pub-card {
    background:#fff; border-radius:16px; padding:2rem;
    box-shadow:0 2px 16px rgba(0,0,0,.08); text-align:center;
    margin-bottom:1.5rem;
}
.page-profil .pub-avatar { width:100px; height:100px; border-radius:50%; object-fit:cover; border:3px solid #e5e7ef; margin-bottom:1rem; }
.page-profil .pub-name { font-size:1.4rem; font-weight:800; margin-bottom:.2rem; }
.page-profil .pub-username { color:#6c757d; font-size:.9rem; margin-bottom:.5rem; }
.page-profil .pub-bio { color:#4a5568; font-size:.9rem; margin:.8rem 0; line-height:1.6; }
.page-profil .pub-joined { font-size:.78rem; color:#94a3b8; margin-top:.5rem; }
.page-profil .pub-roles { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin:.6rem 0; }
.page-profil .pub-back { display:inline-flex; align-items:center; gap:.4rem; color:#e67e22; font-weight:600; font-size:.85rem; text-decoration:none; margin-bottom:1.5rem; }
.page-profil .pub-back:hover { text-decoration:underline; }
.page-profil .pub-share {
    background:#fff; border-radius:12px; padding:1.2rem 1.5rem;
    box-shadow:0 2px 16px rgba(0,0,0,.08);
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.page-profil .pub-url { font-size:.82rem; color:#4a5568; background:#f4f6fb; padding:.5rem .8rem; border-radius:6px; font-family:monospace; flex:1; word-break:break-all; }
.page-profil .pub-copy { padding:.5rem 1rem; background:#e67e22; color:#fff; border:none; border-radius:6px; font-size:.8rem; font-weight:700; cursor:pointer; white-space:nowrap; }
.page-profil .pub-copy:hover { background:#d35400; }



/* ========================================================================
   26. ADMIN PANEL — diskop bawah .op-admin (elak clash .sidebar/.topbar awam)
   ·  asal: admin.css (+ <style> inline acara-kategori)
   ======================================================================== */
body.op-admin {  --gold:   #F0B90B;
  --gold-dk:#C99A0A;
  --gold-lt:#FEF3C7;
  --dark:   #0F172A;
  --sidebar:#111827;
  --sidebar-w: 240px;
  --white:  #FFFFFF;
  --bg:     #F8FAFC;
  --border: #E2E8F0;
  --text:   #1E293B;
  --muted:  #64748B;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10); }
body.op-admin { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; display: flex;  }
.op-admin .sidebar {  width: var(--sidebar-w); min-height: 100vh;
  background: var(--sidebar); color: #CBD5E1;
  display: flex; flex-direction: column;
  position: fixed; left: 0; top: 0; bottom: 0;
  z-index: 100; overflow-y: auto; }
.op-admin .sidebar-brand {  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; gap: 10px; }
.op-admin .sidebar-brand-logo {  width: 36px; height: 36px; border-radius: 8px;
  background: var(--gold); display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 800; color: #fff; }
.op-admin .sidebar-brand-name { font-size: 1rem; font-weight: 700; color: #fff;  }
.op-admin .sidebar-brand-sub { font-size: .68rem; color: #94A3B8; margin-top: 1px;  }
.op-admin .sidebar-section { padding: 20px 12px 6px; font-size: .65rem; font-weight: 700; letter-spacing: .08em; color: #475569; text-transform: uppercase;  }
.op-admin .sidebar-nav { padding: 0 8px; flex: 1;  }
.op-admin .sidebar-link {  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 8px;
  font-size: .82rem; font-weight: 500; color: #94A3B8;
  text-decoration: none; margin-bottom: 2px;
  transition: background .15s, color .15s; }
.op-admin .sidebar-link:hover, .op-admin .sidebar-link.active {  background: rgba(255,255,255,.06); color: #fff; }
.op-admin .sidebar-link.active { background: rgba(201,154,10,.15); color: var(--gold);  }
.op-admin .sidebar-link i { width: 16px; text-align: center; font-size: .85rem;  }
.op-admin .sidebar-footer {  padding: 12px 8px;
  border-top: 1px solid rgba(255,255,255,.06); }
.op-admin .sidebar-user {  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; cursor: pointer;
  transition: background .15s; }
.op-admin .sidebar-user:hover { background: rgba(255,255,255,.06);  }
.op-admin .sidebar-user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover;  }
.op-admin .sidebar-user-name { font-size: .8rem; font-weight: 600; color: #fff;  }
.op-admin .sidebar-user-role { font-size: .68rem; color: #64748B;  }
.op-admin .main { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; display: flex; flex-direction: column;  }
.op-admin .topbar {  background: var(--white); border-bottom: 1px solid var(--border);
  padding: 0 28px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 50; }
.op-admin .topbar-title { font-size: 1rem; font-weight: 700; color: var(--text);  }
.op-admin .topbar-right { display: flex; align-items: center; gap: 12px;  }
.op-admin .topbar-lang {  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--border); border-radius: 6px;
  overflow: hidden; font-size: .75rem; }
.op-admin .topbar-lang a {  padding: 4px 10px; text-decoration: none; color: var(--muted);
  transition: background .15s; }
.op-admin .topbar-lang a.active { background: var(--gold); color: #fff; font-weight: 600;  }
.op-admin .topbar-avatar {  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; cursor: pointer; border: 2px solid var(--border); }
.op-admin .content { padding: 28px; flex: 1;  }
.op-admin .card {  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--border); box-shadow: var(--shadow); }
.op-admin .card-header {  padding: 18px 22px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; }
.op-admin .card-title { font-size: .9rem; font-weight: 700;  }
.op-admin .card-body { padding: 22px;  }
.op-admin .stat-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 16px; margin-bottom: 24px;  }
.op-admin .stat-card {  background: var(--white); border-radius: var(--radius);
  border: 1px solid var(--border); padding: 18px 20px;
  display: flex; align-items: center; gap: 14px; }
.op-admin .stat-icon {  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0; }
.op-admin .stat-value { font-size: 1.4rem; font-weight: 800; line-height: 1;  }
.op-admin .stat-label { font-size: .73rem; color: var(--muted); margin-top: 3px;  }
.op-admin .table-wrap { overflow-x: auto;  }
.op-admin table { width: 100%; border-collapse: collapse; font-size: .82rem;  }
.op-admin th { padding: 11px 14px; text-align: left; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--bg); border-bottom: 1px solid var(--border);  }
.op-admin td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle;  }
.op-admin tr:last-child td { border-bottom: none;  }
.op-admin tr:hover td { background: #F8FAFC;  }
.op-admin .user-cell { display: flex; align-items: center; gap: 10px;  }
.op-admin .user-cell-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--gold-lt); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; color: var(--gold);  }
.op-admin .user-cell-name { font-weight: 600; font-size: .83rem;  }
.op-admin .user-cell-email { font-size: .72rem; color: var(--muted);  }
.op-admin .role-badge {  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px; font-size: .68rem; font-weight: 600;
  border: 1px solid; margin: 2px 2px 2px 0;
  white-space: nowrap; }
.op-admin .roles-cell { display: flex; flex-wrap: wrap; gap: 2px; max-width: 260px;  }
.op-admin .status-badge {  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px; font-size: .71rem; font-weight: 600; }
.op-admin .status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%;  }
.op-admin .status-active { background: #D1FAE5; color: #065F46;  }
.op-admin .status-active::before { background: #10B981;  }
.op-admin .status-pending { background: #FEF3C7; color: #92400E;  }
.op-admin .status-pending::before { background: #F59E0B;  }
.op-admin .status-banned { background: #FEE2E2; color: #991B1B;  }
.op-admin .status-banned::before { background: #EF4444;  }
.op-admin .status-inactive { background: #F1F5F9; color: #475569;  }
.op-admin .status-inactive::before { background: #94A3B8;  }
.op-admin .filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;  }
.op-admin .filter-bar input, .op-admin .filter-bar select {  padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px;
  font-size: .82rem; outline: none; background: var(--white);
  font-family: inherit; }
.op-admin .filter-bar input:focus, .op-admin .filter-bar select:focus { border-color: var(--gold);  }
.op-admin .filter-bar input { min-width: 220px;  }
.op-admin .btn {  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 7px; font-size: .8rem; font-weight: 600;
  border: none; cursor: pointer; text-decoration: none; transition: opacity .15s, background .15s;
  font-family: inherit; }
.op-admin .btn:hover { opacity: .88;  }
.op-admin .btn-primary { background: var(--gold); color: #fff;  }
.op-admin .btn-danger { background: #EF4444; color: #fff;  }
.op-admin .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text);  }
.op-admin .btn-sm { padding: 5px 10px; font-size: .73rem;  }
.op-admin .btn-icon { padding: 6px 8px;  }
.op-admin .form-group { margin-bottom: 18px;  }
.op-admin .form-label { display: block; font-size: .78rem; font-weight: 600; margin-bottom: 6px; color: var(--text);  }
.op-admin .form-label span { color: #EF4444;  }
.op-admin .form-control {  width: 100%; padding: 9px 13px; border: 1px solid var(--border);
  border-radius: 7px; font-size: .83rem; font-family: inherit;
  outline: none; background: var(--white); color: var(--text);
  transition: border-color .15s; }
.op-admin .form-control:focus { border-color: var(--gold);  }
.op-admin .form-hint { font-size: .72rem; color: var(--muted); margin-top: 4px;  }
.op-admin .form-section { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 0 14px; border-bottom: 1px solid var(--border); margin-bottom: 20px;  }
.op-admin .toggle-wrap { display: flex; align-items: center; gap: 10px;  }
.op-admin .toggle { position: relative; width: 40px; height: 22px; cursor: pointer;  }
.op-admin .toggle input { opacity: 0; width: 0; height: 0;  }
.op-admin .toggle-slider {  position: absolute; inset: 0; border-radius: 22px;
  background: #CBD5E1; transition: background .2s; }
.op-admin .toggle-slider::before {  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px; transition: transform .2s; }
.op-admin .toggle input:checked + .toggle-slider { background: var(--gold);  }
.op-admin .toggle input:checked + .toggle-slider::before { transform: translateX(18px);  }
.op-admin .template-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 16px;  }
.op-admin .template-card { border: 2px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color .15s;  }
.op-admin .template-card.active { border-color: var(--gold);  }
.op-admin .template-preview { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: linear-gradient(135deg,#1E293B,#334155); display: flex; align-items: center; justify-content: center; color: #475569; font-size: .8rem;  }
.op-admin .template-info { padding: 14px 16px;  }
.op-admin .template-name { font-weight: 700; font-size: .85rem; margin-bottom: 4px;  }
.op-admin .template-meta { font-size: .72rem; color: var(--muted); margin-bottom: 10px;  }
.op-admin .plugin-list .plugin-row {  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--border); }
.op-admin .plugin-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0;  }
.op-admin .plugin-name { font-weight: 700; font-size: .85rem;  }
.op-admin .plugin-meta { font-size: .72rem; color: var(--muted);  }
.op-admin .config-group { margin-bottom: 28px;  }
.op-admin .config-group-title { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border);  }
.op-admin .pagination { display: flex; align-items: center; gap: 6px; margin-top: 18px;  }
.op-admin .pagination a, .op-admin .pagination span {  padding: 6px 11px; border-radius: 6px; font-size: .78rem; font-weight: 500;
  border: 1px solid var(--border); text-decoration: none; color: var(--text);
  transition: background .15s; }
.op-admin .pagination a:hover { background: var(--bg);  }
.op-admin .pagination span.cur { background: var(--gold); color: #fff; border-color: var(--gold);  }
.op-admin .pagination span.dots { border: none; color: var(--muted);  }
.op-admin .modal-overlay {  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: none; align-items: center; justify-content: center;
  z-index: 200; padding: 20px; }
.op-admin .modal-overlay.open { display: flex;  }
.op-admin .modal {  background: var(--white); border-radius: 14px; width: 100%; max-width: 480px;
  box-shadow: var(--shadow-md); overflow: hidden; }
.op-admin .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between;  }
.op-admin .modal-title { font-weight: 700; font-size: .95rem;  }
.op-admin .modal-close { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 1rem;  }
.op-admin .modal-body { padding: 22px;  }
.op-admin .modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px;  }
.op-admin #toast {  position: fixed; bottom: 24px; right: 24px;
  background: var(--dark); color: #fff; border-radius: 8px;
  padding: 12px 18px; font-size: .82rem; font-weight: 500;
  display: none; align-items: center; gap: 10px;
  z-index: 999; max-width: 320px; box-shadow: var(--shadow-md); }
.op-admin #toast.show { display: flex; animation: slideIn .25s ease;  }
.op-admin #toast.success { background: #065F46;  }
.op-admin #toast.error { background: #991B1B;  }
@keyframes slideIn { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
.op-admin .alert { padding: 12px 16px; border-radius: 8px; font-size: .82rem; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px;  }
.op-admin .alert-success { background: #D1FAE5; color: #065F46;  }
.op-admin .alert-error { background: #FEE2E2; color: #991B1B;  }
.op-admin .alert-info { background: #DBEAFE; color: #1E40AF;  }
@media (max-width: 768px) {
.op-admin .sidebar { transform: translateX(-100%); transition: transform .25s;  }
.op-admin .sidebar.open { transform: none;  }
.op-admin .main { margin-left: 0;  }
}
.op-admin .role-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:28px;  }
.op-admin .role-item {    background:var(--white); border:2px solid var(--border);
    border-radius:var(--radius); padding:16px;
    cursor:pointer; transition:border-color .2s, box-shadow .2s; }
.op-admin .role-item:hover { border-color:var(--gold); box-shadow:0 4px 16px rgba(201,154,10,.1);  }
.op-admin .role-item-icon {    width:40px; height:40px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; margin-bottom:10px; }
.op-admin .role-item-name { font-weight:700; font-size:.88rem; margin-bottom:2px;  }
.op-admin .role-item-slug { font-size:.72rem; color:var(--muted); font-family:monospace; margin-bottom:8px;  }
.op-admin .role-item-meta { display:flex; align-items:center; justify-content:space-between;  }
.op-admin .perm-table { width:100%; border-collapse:collapse; font-size:.78rem;  }
.op-admin .perm-table th { padding:8px 10px; background:var(--bg); border:1px solid var(--border); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);  }
.op-admin .perm-table th.role-col { min-width:90px; text-align:center;  }
.op-admin .perm-table td { padding:7px 10px; border:1px solid var(--border); vertical-align:middle;  }
.op-admin .perm-table td.perm-label { font-weight:500; white-space:nowrap;  }
.op-admin .perm-table td.perm-check { text-align:center;  }
.op-admin .perm-group-row td { background:var(--bg); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:6px 10px;  }
.op-admin .perm-cb { width:16px; height:16px; cursor:pointer; accent-color:var(--gold);  }
.op-admin .matrix-save-bar {    position:sticky; bottom:0; background:var(--white);
    border-top:1px solid var(--border); padding:12px 0;
    display:flex; align-items:center; gap:12px; margin-top:16px; }
.op-admin .rm-tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:18px;  }
.op-admin .rm-tab { padding:7px 16px; font-size:.82rem; font-weight:600; border:none; background:none; cursor:pointer; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-2px; font-family:inherit;  }
.op-admin .rm-tab.active { color:var(--gold); border-bottom-color:var(--gold);  }
.op-admin .rm-pane { display:none;  }
.op-admin .rm-pane.active { display:block;  }
.op-admin .price-row { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--bg); border-radius:8px; margin-bottom:6px;  }
.op-admin .re-wrap { display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start;  }
@media (max-width:1024px) {
.op-admin .re-wrap { grid-template-columns:1fr;  }
}
.op-admin .re-section-title {    font-size:.68rem; font-weight:800; text-transform:uppercase;
    letter-spacing:.08em; color:var(--muted);
    padding-bottom:10px; border-bottom:1px solid var(--border);
    margin-bottom:16px; }
.op-admin .re-toggle-row {    display:flex; align-items:center; justify-content:space-between;
    padding:12px 14px; background:var(--bg); border-radius:8px; cursor:pointer; }
.op-admin .re-toggle-row + .re-toggle-row { margin-top:6px;  }
.op-admin .re-toggle-info .re-toggle-label { font-size:.82rem; font-weight:600; margin-bottom:2px;  }
.op-admin .re-toggle-info .re-toggle-hint { font-size:.72rem; color:var(--muted);  }
.op-admin .re-switch { position:relative; width:44px; height:24px; flex-shrink:0;  }
.op-admin .re-switch input { opacity:0; width:0; height:0; position:absolute;  }
.op-admin .re-switch-track {    position:absolute; inset:0; border-radius:24px;
    background:#CBD5E1; transition:background .2s;
    cursor:pointer; }
.op-admin .re-switch-track::after {    content:''; position:absolute;
    width:18px; height:18px; border-radius:50%;
    background:#fff; top:3px; left:3px;
    transition:transform .2s;
    box-shadow:0 1px 3px rgba(0,0,0,.2); }
.op-admin .re-switch input:checked ~ .re-switch-track { background:var(--gold);  }
.op-admin .re-switch input:checked ~ .re-switch-track::after { transform:translateX(20px);  }
.op-admin .re-price-row {    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:8px;
    background:var(--bg); margin-bottom:6px;
    transition:background .15s; }
.op-admin .re-price-row:hover { background:#F1F5F9;  }
.op-admin .re-price-info { flex:1; min-width:0;  }
.op-admin .re-price-name { font-size:.82rem; font-weight:600; margin-bottom:2px;  }
.op-admin .re-price-meta { font-size:.72rem; color:var(--muted);  }
.op-admin .re-price-form {    background:var(--bg); border-radius:10px;
    padding:14px; margin-top:10px;
    border:1.5px dashed var(--border); }
.op-admin .re-price-form.editing { border-style:solid; border-color:var(--gold); background:var(--gold-lt);  }
.op-admin .re-color-input { display:flex; gap:6px; align-items:center;  }
.op-admin .re-color-input input[type=color] {    width:42px; height:38px; padding:2px 3px;
    border:1.5px solid var(--border); border-radius:7px;
    cursor:pointer; background:none; flex-shrink:0; }
.op-admin .re-color-input input[type=text] { flex:1;  }
.op-admin .re-preview-box {    background:var(--bg); border-radius:8px;
    padding:12px 14px; display:flex; align-items:center; gap:10px;
    margin-top:14px; }
.op-admin .req-tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:20px;  }
.op-admin .req-tab {    padding:8px 18px; font-size:.82rem; font-weight:600;
    border:none; background:none; cursor:pointer;
    color:var(--muted); border-bottom:2px solid transparent;
    margin-bottom:-2px; font-family:inherit; transition:color .15s; }
.op-admin .req-tab.active { color:var(--gold); border-bottom-color:var(--gold);  }
.op-admin .req-pane { display:none;  }
.op-admin .req-pane.active { display:block;  }
.op-admin .req-card {    background:var(--white); border:1px solid var(--border);
    border-radius:var(--radius); padding:16px 20px;
    display:flex; align-items:center; gap:16px;
    margin-bottom:10px; }
.op-admin .req-avatar { width:40px; height:40px; border-radius:50%; object-fit:cover; background:var(--gold-lt); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--gold); flex-shrink:0; font-size:.9rem; overflow:hidden;  }
.op-admin .req-role-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:.75rem; font-weight:600;  }
.op-admin .int-section { margin-bottom: 28px;  }
.op-admin .int-section-title {    font-size: .7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--muted);
    margin-bottom: 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px; }
.op-admin .int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px;  }
.op-admin .int-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 18px;  }
.op-admin .int-tab {    padding: 7px 16px; font-size: .8rem; font-weight: 600;
    border: none; background: none; cursor: pointer;
    color: var(--muted); border-bottom: 2px solid transparent;
    margin-bottom: -2px; font-family: inherit; transition: color .15s; }
.op-admin .int-tab.active { color: var(--gold); border-bottom-color: var(--gold);  }
.op-admin .int-pane { display: none;  }
.op-admin .int-pane.active { display: block;  }
.op-admin .int-toggle-row {    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.op-admin .int-hint {    font-size: .75rem; color: var(--muted); margin-top: 4px;
    padding: 8px 10px; background: var(--bg); border-radius: 6px;
    margin-bottom: 14px; line-height: 1.5; }
.op-admin .etpl-grid {    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px; }
.op-admin .etpl-card {    background: var(--white);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    text-decoration: none;
    color: var(--text);
    display: block; }
.op-admin .etpl-card:hover {    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(201,154,10,.12);
    color: var(--text); }
.op-admin .etpl-icon {    width: 46px; height: 46px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 14px;
    flex-shrink: 0; }
.op-admin .etpl-name { font-weight: 700; font-size: .88rem; margin-bottom: 2px;  }
.op-admin .etpl-slug { font-size: .72rem; color: var(--muted); font-family: monospace;  }
.op-admin .etpl-subject { font-size: .78rem; color: var(--muted); margin: 12px 0 14px; line-height: 1.4;  }
.op-admin .etpl-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--border);  }
.op-admin .etpl-editor { display: grid; grid-template-columns: 1fr 400px; gap: 20px; align-items: start;  }
@media (max-width: 1100px) {
.op-admin .etpl-editor { grid-template-columns: 1fr;  }
}
.op-admin .etpl-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 20px;  }
.op-admin .etpl-tab {    padding: 8px 18px; font-size: .82rem; font-weight: 600;
    border: none; background: none; cursor: pointer;
    color: var(--muted); border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: color .15s;
    font-family: inherit; }
.op-admin .etpl-tab.active { color: var(--gold); border-bottom-color: var(--gold);  }
.op-admin .etpl-tabpane { display: none;  }
.op-admin .etpl-tabpane.active { display: block;  }
.op-admin .etpl-var {    display: inline-block;
    padding: 3px 9px; margin: 3px 3px 3px 0;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: 5px; font-size: .73rem; font-family: monospace;
    cursor: pointer; transition: background .15s, border-color .15s; }
.op-admin .etpl-var:hover { background: var(--gold-lt); border-color: var(--gold);  }
.op-admin .etpl-preview-subject {    padding: 8px 12px;
    background: var(--bg);
    border-radius: 6px;
    font-size: .8rem;
    color: var(--muted);
    margin-bottom: 10px; }
.op-admin #previewFrame {    width: 100%; height: 420px;
    border: 1px solid var(--border);
    border-radius: 8px; }
.op-admin .lang-toggle { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden;  }
.op-admin .lang-toggle button {    padding: 5px 14px; font-size: .75rem; font-weight: 600;
    border: none; background: none; cursor: pointer;
    color: var(--muted); font-family: inherit; transition: background .15s; }
.op-admin .lang-toggle button.active { background: var(--gold); color: #fff;  }
.op-admin .etpl-test { display: flex; flex-direction: column; gap: 12px;  }
.op-admin .cat-grid { display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start;  }
@media(max-width:900px) {
.op-admin .cat-grid { grid-template-columns:1fr;  }
}
.op-admin .cat-row {    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border-radius:10px;
    background:var(--bg); margin-bottom:6px;
    transition:background .15s; }
.op-admin .cat-row:hover { background:#F1F5F9;  }
.op-admin .cat-icon-box {    width:38px; height:38px; border-radius:10px;
    background:#fff; border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-size:.9rem; flex-shrink:0; color:#e67e22; }
.op-admin .cat-info { flex:1; min-width:0;  }
.op-admin .cat-name { font-size:.88rem; font-weight:700;  }
.op-admin .cat-slug { font-size:.72rem; color:var(--muted); font-family:monospace;  }
.op-admin .cat-actions { display:flex; gap:6px;  }
.op-admin .icon-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; max-height:160px; overflow-y:auto;  }
.op-admin .icon-opt {    border:1.5px solid var(--border); border-radius:7px; padding:6px;
    cursor:pointer; text-align:center; font-size:.9rem; transition:all .15s;
    background:#fff; }
.op-admin .icon-opt:hover, .op-admin .icon-opt.selected { border-color:#e67e22; background:#FEF3C7;  }
.op-admin .sort-handle { cursor:grab; color:var(--muted); font-size:.8rem;  }

/* --- kategori acara (dari <style> inline partial) --- */
.op-admin .cat-grid { display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:start;  }
@media(max-width:900px) {
.op-admin .cat-grid { grid-template-columns:1fr;  }
}
.op-admin .cat-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; background:var(--bg); margin-bottom:6px;  }
.op-admin .cat-row:hover { background:#F1F5F9;  }
.op-admin .cat-icon-box { width:38px; height:38px; border-radius:10px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:.9rem; flex-shrink:0; color:#C2410C;  }
.op-admin .cat-info { flex:1; min-width:0;  }
.op-admin .cat-name { font-size:.88rem; font-weight:700;  }
.op-admin .cat-slug { font-size:.72rem; color:var(--muted); font-family:monospace;  }
.op-admin .cat-actions { display:flex; gap:6px;  }
.op-admin .icon-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; max-height:160px; overflow-y:auto;  }
.op-admin .icon-opt { border:1.5px solid var(--border); border-radius:7px; padding:6px; cursor:pointer; text-align:center; font-size:.9rem; background:#fff;  }
.op-admin .icon-opt:hover, .op-admin .icon-opt.selected { border-color:#C2410C; background:#FFF7ED;  }
.op-admin .cat-sport { font-size:.68rem; padding:2px 8px; border-radius:20px; background:#FFF7ED; color:#C2410C; font-weight:700;  }


/* ========================================================================
   27. PAGINATION KONGSI (.op-pagination) — versi GLOBAL untuk page awam
   ·  dipakai oleh partials/pagination.php
   ·  versi .op-dashboard (seksyen 21) kekal sebagai override — rupa sama
   ======================================================================== */
.op-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 2rem 0 1.2rem; flex-wrap: wrap; }
.op-page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; font-size: .8rem; font-weight: 600; text-decoration: none; border: 1px solid var(--border, #e5e7ef); color: var(--text, #1a1a2e); background: #fff; transition: background .15s, border-color .15s; }
.op-page-btn:hover { background: #F8FAFC; border-color: #CBD5E1; }
.op-page-btn--active { background: #F0B90B; border-color: #F0B90B; color: #1a1a2e; }
.op-page-btn--active:hover { background: #F0B90B; border-color: #F0B90B; }
.op-page-btn--disabled { opacity: .4; pointer-events: none; }
.op-page-ellipsis { color: var(--text-muted, #64748b); font-size: .8rem; padding: 0 4px; }
.op-page-summary { text-align: center; margin-top: .6rem; font-size: .72rem; color: var(--text-muted, #64748b); }



/* ========================================================================
   28. HEADER STICKY KONGSI (.op-headwrap) — topbar + ticker + jalur solat
   ·  layout awam sahaja; dashboard/admin kekal guna sticky sendiri
   ======================================================================== */
:root { --op-head-h: 176px; }   /* tinggi headwrap: topbar + ticker + jalur solat */
.op-headwrap { position: sticky; top: 0; z-index: 1000; display: flex; flex-direction: column; }
.op-headwrap .topbar { position: static; top: auto; z-index: auto; }

/* ========================================================================
   RESPONSIF TAMBAHAN — jadual scroll, iOS zoom, overflow teks
   ======================================================================== */

/* A — Jadual boleh scroll mendatar pada skrin kecil */
@media (max-width: 768px) {
  .ev-table,
  .tv-table,
  .op-dashboard .art-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .op-emerg {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* B — Halang iOS auto-zoom pada input (font mesti >= 16px pada mobile) */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* C — URL / perkataan panjang tidak melimpah keluar skrin */
.artikel-body,
.op-page {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* D — Blok kod editor: baris panjang wrap, tidak melimpah */
.block-code [contenteditable],
.op-dashboard .block-code [contenteditable] {
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}

/* ── Payment Order Return (scoped: body.page-order-return) ── */
body.page-order-return { background: #F8FAFC; color: #1E293B; margin: 0; }
.page-order-return .or-wrap  { max-width: 520px; margin: 0 auto; padding: 48px 16px; }
.page-order-return .or-card  { background: #fff; border: 1px solid #E2E8F0; border-radius: 16px; padding: 32px 28px; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.05); }
.page-order-return .or-emoji { font-size: 3rem; line-height: 1; margin-bottom: 12px; }
.page-order-return .or-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 6px; }
.page-order-return .or-sub   { font-size: .9rem; color: #64748B; line-height: 1.6; margin: 0 0 20px; }
.page-order-return .or-ref   { display: inline-block; background: #F1F5F9; border-radius: 8px; padding: 6px 14px; font-weight: 700; font-size: .9rem; letter-spacing: .02em; margin-bottom: 20px; }
.page-order-return .or-btn   { display: inline-block; background: #F0B90B; color: #1a1a2e; text-decoration: none; font-weight: 700; font-size: .88rem; padding: 11px 22px; border-radius: 10px; border: none; cursor: pointer; }
.page-order-return .or-btn.ghost { background: #fff; border: 1.5px solid #E2E8F0; color: #1E293B; margin-left: 8px; }
.page-order-return .or-row   { display: flex; justify-content: space-between; font-size: .85rem; padding: 8px 0; border-top: 1px solid #EEF2F7; }
.page-order-return .or-row span:last-child { font-weight: 700; }
.page-order-return .or-actions { margin-top: 20px; }

.page-order-return .or-alert { padding: 10px 14px; border-radius: 8px; font-size: .85rem; margin: 14px 0; }
.page-order-return .or-alert-ok  { background: #D1FAE5; color: #065F46; }
.page-order-return .or-alert-err { background: #FEE2E2; color: #9B1C1C; }
.page-order-return .or-receipt {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border, #E5E7EB);
  text-align: left;
}
.page-order-return .or-receipt h3 { font-size: .95rem; font-weight: 700; margin-bottom: 14px; }
.page-order-return .or-receipt label {
  display: block; font-size: .78rem; font-weight: 600; margin: 12px 0 5px;
}
.page-order-return .or-receipt input {
  width: 100%; padding: 9px 11px; font-size: .85rem;
  border: 1px solid var(--border, #E5E7EB); border-radius: 8px;
  font-family: inherit; box-sizing: border-box;
}
.page-order-return .or-receipt input:focus {
  outline: none; border-color: var(--pt-kuning, #F0B90B);
}
.page-order-return .or-receipt button { margin-top: 18px; }

/* ===== HALAMAN RALAT (403 / 404 / 500) ===== */
body.page-error {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--pt-krim, #FAFAF5);
  color: var(--pt-hitam, #1A1A1A);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
  padding: 24px;
}
.page-error .err-box   { text-align: center; max-width: 460px; }
.page-error .err-code  {
  font-size: 6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--pt-kuning, #F0B90B);
  text-shadow: 0 4px 18px var(--pt-kuning-glow, rgba(240,185,11,.18));
}
.page-error .err-title { font-size: 1.5rem; font-weight: 800; margin: 14px 0 8px; }
.page-error .err-desc  { color: var(--pt-abu, #7A7A7A); font-size: .95rem; line-height: 1.65; margin-bottom: 26px; }
.page-error .err-btn   {
  display: inline-block;
  background: var(--pt-kuning, #F0B90B);
  color: var(--pt-hitam, #1A1A1A);
  padding: 12px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  transition: background .15s ease, transform .15s ease;
}
.page-error .err-btn:hover { background: var(--pt-kuning-dk, #C99A0A); transform: translateY(-1px); }
@media (max-width: 480px) {
  .page-error .err-code  { font-size: 4.2rem; }
  .page-error .err-title { font-size: 1.25rem; }
}

/* ── Admin sidebar: kumpulan boleh lipat ─────────────────────────── */
.op-admin .sidebar-section--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.op-admin .sidebar-section--toggle .grp-chev {
  font-size: .58rem;
  opacity: .55;
  transition: transform .2s ease;
}
.op-admin .sidebar-section--toggle.collapsed .grp-chev {
  transform: rotate(-90deg);
}
.op-admin .sidebar-group.collapsed {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   BORANG PELANCONGAN (.tp-*) — dashboard: group-edit / pakej-edit /
   availability / partner / group-lihat. Class ini sebelum ni TIADA
   CSS (borang render mentah); di-scope .op-dashboard supaya tak bocor.
   ═══════════════════════════════════════════════════════════════ */
.op-dashboard .tp-edit,
.op-dashboard .tp-form,
.op-dashboard .tp-avail { max-width: 860px; margin: 0 auto; }

.op-dashboard .tp-card {
  border: 1px solid var(--border, #e5e7ef);
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1.25rem;
  margin: 0 0 1.1rem;
  background: #fff;
}
.op-dashboard .tp-card legend {
  font-size: .9rem; font-weight: 700;
  color: var(--text, #1a1a2e); padding: 0 .4rem;
}

.op-dashboard .tp-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: .9rem; margin-bottom: .9rem;
}
.op-dashboard .tp-row {
  display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: .9rem;
}
.op-dashboard .tp-row > * { flex: 1 1 200px; min-width: 0; }

.op-dashboard .tp-card label {
  display: flex; flex-direction: column; gap: .3rem;
  font-size: .78rem; font-weight: 600;
  color: var(--text, #1a1a2e); margin-bottom: .9rem;
}
.op-dashboard .tp-grid label,
.op-dashboard .tp-row  label { margin-bottom: 0; }
.op-dashboard .tp-full { display: block; }

.op-dashboard .tp-card input:not([type=checkbox]):not([type=radio]),
.op-dashboard .tp-card select,
.op-dashboard .tp-card textarea {
  width: 100%; padding: 9px 11px;
  border: 1.5px solid var(--border, #e5e7ef); border-radius: 8px;
  font-size: .85rem; font-family: inherit;
  color: var(--text, #1a1a2e); background: #fff;
  outline: none; transition: border-color .15s;
}
.op-dashboard .tp-card input:focus,
.op-dashboard .tp-card select:focus,
.op-dashboard .tp-card textarea:focus { border-color: var(--primary, #F0B90B); }
.op-dashboard .tp-card textarea { resize: vertical; min-height: 90px; }
.op-dashboard .tp-card input[readonly] {
  background: #F8FAFC; color: var(--text-muted, #6c757d); cursor: not-allowed;
}

.op-dashboard .tp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }

@media (max-width: 640px) {
  .op-dashboard .tp-grid { grid-template-columns: 1fr; }
}