/* =============================================================================
   Dark mode overrides (tanpa rebuild Tailwind)
   ============================================================================= */
html.dark body {
  background-color: #111827; /* gray-900 */
  color: #f3f4f6;            /* gray-100 */
}

html.dark .bg-white      { background-color: #111827 !important; }
html.dark .text-gray-900 { color: #f3f4f6 !important; }

html.dark header,
html.dark nav,
html.dark .dark\:bg-gray-800 {
  background-color: #1f2937 !important; /* gray-800 */
}

/* Input & kotak */
html.dark input,
html.dark .ring-gray-300 {
  background-color: #1f2937 !important;
  color: #f3f4f6 !important;
  border-color: #374151 !important;
}

/* Badge/pill aktif (opsional) */
html.dark .pill-active {
  background-color: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* =============================================================================
   Theme tokens (light/dark)
   ============================================================================= */
:root {
  --bg-panel:     #ffffff;
  --bg-soft:      #f3f4f6;  /* gray-100 */
  --text-main:    #111827;  /* gray-900 */
  --border-soft:  rgba(0,0,0,.08);

  --pill-border:  rgba(0,0,0,.12);

  --indigo-500:   #6366f1;
  --violet-500:   #8b5cf6;

  --gray-700:     #374151;
  --gray-800:     #1f2937;
  --gray-900:     #111827;

  --white-08:     rgba(255,255,255,.08);
  --white-10:     rgba(255,255,255,.10);
  --white-12:     rgba(255,255,255,.12);
  --white-18:     rgba(255,255,255,.18);
  --white-28:     rgba(255,255,255,.28);
  --white-35:     rgba(255,255,255,.35);
  --white-65:     rgba(255,255,255,.65);
  --white-85:     rgba(255,255,255,.85);
}

html.dark {
  --bg-panel:     #111827;  /* gray-900 */
  --bg-soft:      #374151;  /* gray-700 */
  --text-main:    #f3f4f6;  /* gray-100 */
  --border-soft:  #4b5563;  /* gray-600 */
  --pill-border:  #475569;  /* slate-600 */
}

/* =============================================================================
   Box VVIP
   ============================================================================= */
.vvip-box {
  border-radius: 1rem;
  padding: 1rem;
  background: linear-gradient(90deg, rgba(79,70,229,.40), rgba(147,51,234,.40));
  box-shadow: inset 0 0 0 1px var(--white-10);
}
@media (min-width: 768px) {
  .vvip-box { padding: 1.5rem; }
}
html.dark .vvip-box {
  background: linear-gradient(90deg, rgba(99,102,241,.40), rgba(124,58,237,.45));
  box-shadow: inset 0 0 0 1px var(--white-12);
}

/* =============================================================================
   Input (dipakai juga dalam Box VVIP)
   ============================================================================= */
.vvip-input {
  border-radius: .75rem;
  padding: .75rem 1rem;
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--border-soft);
}
.vvip-input::placeholder { color: #9ca3af; }

/* =============================================================================
   Tombol CTA Glow
   ============================================================================= */
.btn-cta-glow {
  border-radius: .75rem;
  padding: .75rem 1.25rem;
  font-weight: 700;
  color: #fff !important;
  background: linear-gradient(135deg, var(--indigo-500), var(--violet-500));
  text-shadow: 0 0 8px var(--white-85);
  box-shadow:
    0 0 0 2px var(--white-18),
    0 0 16px rgba(139,92,246,.45);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-cta-glow:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px var(--white-22, rgba(255,255,255,.22)),
    0 4px 18px rgba(139,92,246,.55);
  opacity: .95;
}
.btn-cta-glow:active { transform: translateY(0); opacity: .90; }
.btn-cta-glow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =============================================================================
   Dropdown (x-dropdown / Jetstream)
   ============================================================================= */
html.dark .shadow-lg .ring-black { --tw-ring-color: rgb(55 65 81) !important; } /* gray-700 */

html.dark [role="menuitem"],
html.dark .dropdown-panel a,
html.dark .dropdown-panel button { color: #e5e7eb !important; }

html.dark [role="menuitem"]:hover,
html.dark .dropdown-panel a:hover,
html.dark .dropdown-panel button:hover {
  background-color: #374151 !important; /* gray-700 */
  color: #ffffff !important;
}

/* Panel */
.dropdown-panel {
  background: #ffffff;
  color: #111827;
  border-radius: .5rem;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
}
html.dark .dropdown-panel {
  background: #111827 !important;       /* gray-900 */
  color: #e5e7eb !important;             /* gray-200 */
  border: 1px solid #374151 !important;  /* gray-700 */
}

/* =============================================================================
   Filter Pill
   ============================================================================= */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  border-radius: 9999px;
  background: var(--bg-panel);
  color: var(--text-main);
  border: 1px solid var(--pill-border);
}
.filter-pill.is-active {
  background: transparent !important;
  color: #fff !important;
  border-color: var(--white-65) !important;
  text-shadow: 0 0 8px var(--white-85);
  box-shadow: inset 0 0 0 1px var(--white-28);
}
.filter-pill:is(:hover, :focus-visible) {
  box-shadow: inset 0 0 0 1px var(--white-35);
}

/* =============================================================================
   Spacer / garis pemisah
   ============================================================================= */
.filter-sep {
  border-top: 1px solid var(--white-10);
  padding-top: .75rem;
  margin-top: 1rem;
}
html.dark .filter-sep { border-top-color: var(--gray-700); }

/* =============================================================================
   Theme Switch
   ============================================================================= */
.theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .75rem;
}
.theme-label { font-size: .875rem; }

.theme-switch { position: relative; width: 44px; height: 24px; display: inline-block; }
.theme-switch input { opacity: 0; width: 0; height: 0; }

.theme-switch .switch-track {
  position: absolute; inset: 0;
  background: #cbd5e1; /* slate-300 */
  border-radius: 9999px;
  transition: background .2s ease;
}
html.dark .theme-switch .switch-track { background: #475569; /* slate-600 */ }

.theme-switch .switch-track::after {
  content: '';
  position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(73,73,73,0.25);
  transition: transform .2s ease;
}
.theme-switch input:checked + .switch-track { background: #000000; }
.theme-switch input:checked + .switch-track::after { transform: translateX(20px); }

/* =============================================================================
   Utilities
   ============================================================================= */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* =============================================================================
   Badge VCS++
   ============================================================================= */
.badge-vcs {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 10;
  background-color: #dc2626 !important; /* red-600 */
  color: #fff !important;
  font-size: .75rem;   /* text-xs */
  font-weight: 700;
  padding: .25rem .5rem;
  border-radius: .25rem;
  line-height: 1;
  display: inline-block;
}

/* =============================================================================
   Banner Surface (kontainer banner)
   ============================================================================= */
.banner-surface {
  border-radius: 1rem;
  box-shadow: inset 0 0 0 1px var(--white-10);
}

/* =============================================================================
   Admin Stories Thumbnail (ANTI ROBEK / ANTI STRETCH)
   ============================================================================= */
.admin-story-thumb {
  display: inline-block;
  overflow: hidden;
  border-radius: .5rem;
  border: 1px solid var(--pill-border);
}
html.dark .admin-story-thumb { border-color: #374151; } /* gray-700 */

.admin-story-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rasio helper opsional */
.admin-story-thumb.ar-1-1  { aspect-ratio: 1 / 1; }
.admin-story-thumb.ar-3-4  { aspect-ratio: 3 / 4; }
.admin-story-thumb.ar-9-16 { aspect-ratio: 9 / 16; }

/* Bulat penuh (untuk avatar) — gunakan dengan ar-1-1 */
.admin-story-thumb.is-round { border-radius: 9999px; }

/* =============================================================================
   Global page background (pakai <div class="bg-canvas"></div> di layout)
   ============================================================================= */
.bg-canvas{
  position: fixed;
  inset: 0;
  z-index: 0;                 /* di bawah konten */
  pointer-events: none;       /* tidak menghalangi klik */
  background-image: url('/images/background.jpg');
  background-size: cover;     /* responsif mobile/desktop */
  background-position: center;
  background-repeat: no-repeat;
  /* jangan pakai background-attachment: fixed; iOS suka bermasalah */
}
html.dark .bg-canvas::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 10%, rgba(0,0,0,.25), transparent 40%),
              linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
}

/* =============================================================================
   Header dengan background image (opsional)
   ============================================================================= */
.header-with-bg{ position: relative; overflow: hidden; background: transparent; }
.header-with-bg .header-bg{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(1.04);
}
.header-with-bg .header-bg::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.30));
}
html.dark .header-with-bg .header-bg::after{
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
}

/* =============================================================================
   Talent uniform thumbnails (portrait 3:4)
   ============================================================================= */
.talent-thumb-wrapper { position: relative; width: 100%; }
.talent-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center;
  border-radius: 1rem;
  display: block;
  background: rgba(0,0,0,.10);
}