/* =====================================================
   LOVIA PARTNER — Theme v3 "Rose Quartz / Midnight Velvet"
   Dimuat setelah style.css. Prinsip:
   - Ringan: tanpa backdrop-filter, tanpa animasi tak berhingga,
     tanpa fitur CSS baru (aman di Chrome 109 / Windows 7).
   - Kontras teks >= 4.5:1 di kedua mode.
   ===================================================== */

:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #fbf6f4;
  --bg-card: #ffffff;
  --bg-card2: #f6edea;
  --bg-soft: #f6edea;
  --border: #e8dad6;
  --text: #231019;
  --text-sec: #594550;
  --text-muted: #7d6770;
  --ink: #231019;
  --pink: #ec5f8a;
  --pink-deep: #c81e5b;
  --pink-light: #fde8ef;
  --purple: #7a4fd0;
  --purple-deep: #5b32a8;
  --purple-light: #efe9fb;
  --gold: #946417;
  --gold-light: #f8edd6;
  --cream: #f6edea;
  --cream-dark: #eddcd6;
  --shadow-sm: 0 1px 2px rgba(60,20,40,.06), 0 2px 10px rgba(60,20,40,.06);
  --shadow-md: 0 8px 28px rgba(60,20,40,.10);
  --shadow-lg: 0 20px 56px rgba(60,20,40,.16);
  --grad: linear-gradient(135deg, #f0719a 0%, #c81e5b 60%, #8f1d6b 100%);
  --grad-text: linear-gradient(100deg, #e0407a, #8f3bd0);
  --hero-a: rgba(240,113,154,.30);
  --hero-b: rgba(122,79,208,.20);
  --hero-c: rgba(233,176,92,.20);
  --nav-bg: rgba(251,246,244,.94);
  --side-bg: #2a1233;
  --focus: #c81e5b;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0a14;
  --bg-card: #181220;
  --bg-card2: #211829;
  --bg-soft: #211829;
  --border: #2e2338;
  --text: #f7edf2;
  --text-sec: #d9c3ce;
  --text-muted: #a48e9b;
  --ink: #0a060d;
  --pink: #ff7ba6;
  --pink-deep: #ff5f93;
  --pink-light: rgba(255,95,147,.14);
  --purple: #b49cff;
  --purple-deep: #a58bff;
  --purple-light: rgba(165,139,255,.14);
  --gold: #e8c48c;
  --gold-light: rgba(232,196,140,.12);
  --cream: #140e1a;
  --cream-dark: #1c1424;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.3);
  --shadow-md: 0 8px 28px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 56px rgba(0,0,0,.6);
  --grad: linear-gradient(135deg, #ff7ba6 0%, #e8447a 60%, #b02a78 100%);
  --grad-text: linear-gradient(100deg, #ff8fb3, #b49cff);
  --hero-a: rgba(255,95,147,.26);
  --hero-b: rgba(140,100,255,.24);
  --hero-c: rgba(232,196,140,.10);
  --nav-bg: rgba(15,10,20,.94);
  --side-bg: #120b19;
  --focus: #ff7ba6;
}

/* ── Dasar & performa ── */
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
*, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.cursor-dot, .cursor-ring { display: none !important; }      /* lingkaran nyasar di pojok HP */
.shape { filter: none !important; animation: none !important; }
.glow-btn { animation: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--pink); color: #fff; }
.grain, body::before { opacity: 0 !important; }

/* ── Navbar ── */
.navbar, .navbar.scrolled { background: var(--nav-bg); border-bottom: 1px solid var(--border); box-shadow: none; }
.nav-logo { font-family: var(--font-display); font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.nav-logo span { color: var(--pink-deep); font-style: italic; }
.nav-links a { color: var(--text-sec); font-weight: 600; }
.nav-links a:hover, .nav-links a.active { color: var(--pink-deep); }
.theme-toggle, .db-theme {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; transition: border-color .2s, color .2s;
}
.theme-toggle:hover, .db-theme:hover { border-color: var(--pink); color: var(--pink-deep); }
.btn-nav-login { background: var(--grad) !important; color: #fff !important; border: 0 !important; box-shadow: 0 4px 14px rgba(200,30,91,.35); }

/* ── Tombol ── */
.btn-primary { background: var(--grad); color: #fff; border: 0; box-shadow: 0 6px 20px rgba(200,30,91,.32); transition: transform .2s, box-shadow .2s; }
.btn-primary:hover { background: var(--grad); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(200,30,91,.42); }
.btn-outline, .btn-sm { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover, .btn-sm:hover { border-color: var(--pink); color: var(--pink-deep); background: var(--pink-light); }

/* ── Hero ── */
.hero {
  background:
    radial-gradient(60% 55% at 85% 8%, var(--hero-a), transparent 70%),
    radial-gradient(55% 55% at 5% 95%, var(--hero-b), transparent 70%),
    radial-gradient(40% 40% at 50% 60%, var(--hero-c), transparent 70%),
    var(--bg);
}
.hero-badge { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-sec); font-weight: 600; box-shadow: var(--shadow-sm); }
.hero-badge i { color: var(--pink-deep); }
.hero-title { color: var(--text); font-weight: 700; letter-spacing: -.035em; line-height: 1.06; font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
.hero-title em, .section-header h2 em { color: var(--pink-deep); background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-right: .06em; }
.hero-title em::after { -webkit-text-fill-color: var(--pink-deep); }
.hero-sub { color: var(--text-sec); line-height: 1.75; font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 34rem; }
.hero-stats { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-sm); width: fit-content; max-width: 100%; padding: 1rem 1.4rem; }
.hstat-num { font-family: var(--font-display); color: var(--gold); background: none; -webkit-text-fill-color: currentColor; font-weight: 700; opacity: 1 !important; }
.hstat-label { color: var(--text-muted); opacity: 1 !important; }
.hstat-div { background: var(--border); }

/* kartu talent di hero */
.hcard { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); }
.hcard-info strong { color: var(--text); } .hcard-info span { color: var(--text-muted); }
.hcard-avatar { width: 54px; height: 54px; border-radius: 50%; color: transparent; background-size: cover; background-position: center top; border: 2px solid var(--pink); }
.hcard-avatar-1 { background-image: url('img/03.jpg'); }
.hcard-avatar-2 { background-image: url('img/06.jpg'); }
.hcard-avatar-3 { background-image: url('img/09.jpg'); }

/* ── Section ── */
.section-badge { background: var(--pink-light); border: 1px solid transparent; color: var(--pink-deep); font-weight: 700; }
.section-header h2 { color: var(--text); letter-spacing: -.03em; font-size: clamp(1.8rem, 3.8vw, 2.9rem); }
.section-header p { color: var(--text-sec); }
.services-overview, .why-us, .faq-section { background: var(--bg); }
.talent-showcase { background: var(--cream); }
.testimonials { background: var(--bg-card2); }
.cta-section { background: linear-gradient(135deg, #3a1245 0%, #8f1d5b 100%); color: #fff; }
.cta-section h2, .cta-section p { color: #fff; }
.footer { background: var(--side-bg); color: #d9c3ce; }
.footer a, .footer h4, .footer h3 { color: #f7edf2; }

/* ── Kartu ── */
.service-card, .why-card, .faq-item, .testi-card, .talent-card, .price-item-card, .package-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-sm);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.service-card:hover, .why-card:hover, .talent-card:hover, .price-item-card:hover, .package-card:hover {
  transform: translateY(-4px); border-color: var(--pink); box-shadow: var(--shadow-md);
}
.service-card h3, .why-card h3, .tc-header strong { color: var(--text); }
.service-card p, .why-card p, .tc-meta { color: var(--text-sec); }
.service-card.featured { border: 1px solid transparent; background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, var(--pink), var(--purple), #d9a441) border-box; }
.talent-card { overflow: hidden; }
.tc-services span { background: var(--pink-light); color: var(--pink-deep); border-radius: 50px; font-weight: 600; }
.tc-rating { color: var(--text); }
.verified-badge, .tc-verified { background: var(--purple-light); color: var(--purple-deep); }

/* ── Form & modal ── */
input, select, textarea { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 12px; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus { border-color: var(--pink-deep); outline: 0; box-shadow: 0 0 0 3px var(--pink-light); }
.modal-overlay { background: rgba(15,6,20,.62); }
.modal-box { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow-lg); }

/* ── Widget melayang ── */
.float-wa { bottom: calc(5rem + env(safe-area-inset-bottom)); right: 1rem; width: 52px; height: 52px; background: var(--grad); box-shadow: 0 8px 22px rgba(200,30,91,.45); }
.float-music { bottom: calc(1.2rem + env(safe-area-inset-bottom)); right: 1.1rem; width: 46px; height: 46px; }
.proto-badge, .premium-notif { background: var(--bg-card); color: var(--text-sec); border: 1px solid var(--border); box-shadow: var(--shadow-md); }
.proto-badge { bottom: calc(.75rem + env(safe-area-inset-bottom)); left: .75rem; max-width: calc(100vw - 5.5rem); }
.premium-notif { bottom: calc(4.6rem + env(safe-area-inset-bottom)); left: .75rem; max-width: calc(100vw - 6rem); }
.toast { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow-md); }

/* ── Status badge (terbaca di kedua mode) ── */
.status-badge { border-radius: 50px; padding: .22rem .65rem; font-size: .72rem; font-weight: 700; white-space: nowrap; display: inline-block; }
.badge-pending  { background: #fff3d6; color: #8a5a00; border: 1px solid #f0d9a0; }
.badge-active   { background: #dcf5e6; color: #0b6b3a; border: 1px solid #aee3c4; }
.badge-rejected { background: #fde2e2; color: #a61b1b; border: 1px solid #f3b4b4; }
.badge-done     { background: #e1ecff; color: #1d4fb3; border: 1px solid #b9cff7; }
[data-theme="dark"] .badge-pending  { background: rgba(240,180,60,.16); color: #f6d27a; border-color: rgba(240,180,60,.3); }
[data-theme="dark"] .badge-active   { background: rgba(70,200,130,.16); color: #7de3ae; border-color: rgba(70,200,130,.3); }
[data-theme="dark"] .badge-rejected { background: rgba(255,100,100,.16); color: #ff9d9d; border-color: rgba(255,100,100,.3); }
[data-theme="dark"] .badge-done     { background: rgba(110,160,255,.16); color: #a9c6ff; border-color: rgba(110,160,255,.3); }

/* =====================================================
   DASBOR (admin & talent)
   ===================================================== */
.dashboard-page { background: var(--bg); }
.dashboard-sidebar { background: var(--side-bg); border-right: 0; color: #e9d9e3; }
.db-logo { color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.db-logo span { color: #ff8fb3; }
.db-sidebar-avatar { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }
.db-sidebar-avatar-label { color: #fff; } .db-sidebar-avatar-sub { color: #bfa5b4; }
.db-nav-label { color: #a68fa0; letter-spacing: .08em; }
.db-link { color: #e0cdd9; border-radius: 12px; }
.db-link i { opacity: .8; }
.db-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.db-link.active { background: rgba(255,123,166,.18); color: #fff; }
.db-link.active i { color: #ff8fb3; }
.db-logout { color: #ffb3c6; border-color: rgba(255,255,255,.14); background: transparent; }
.db-logout:hover { background: rgba(255,95,147,.16); color: #fff; }
.db-topbar { background: var(--bg-card); border-bottom: 1px solid var(--border); gap: .6rem; }
.db-topbar-title { color: var(--text); font-family: var(--font-display); font-weight: 700; }
.db-topbar-user { color: var(--text-sec); }
.db-hamburger, .btn-home { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.db-theme { margin-left: auto; width: 36px; height: 36px; }
.dashboard-content { background: var(--bg); }

.dash-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 1.25rem; box-shadow: var(--shadow-sm); margin-bottom: 1rem; }
.dash-section h3 { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: .9rem; color: var(--text); }
.dash-stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; }
.dash-stat-card::after { display: none; }
.dsc-val { color: var(--text); font-size: 1.7rem; } .dsc-label { color: var(--text-muted); font-weight: 600; }

/* KPI baru */
.kpi { display: flex; align-items: center; gap: .85rem; }
.kpi-ico { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.kpi-ico.a { background: var(--pink-light); color: var(--pink-deep); }
.kpi-ico.b { background: var(--gold-light); color: var(--gold); }
.kpi-ico.c { background: rgba(40,170,100,.14); color: #1f9a5b; }
.kpi-ico.d { background: var(--purple-light); color: var(--purple-deep); }
.kpi-val { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.kpi-lab { font-size: .76rem; color: var(--text-muted); font-weight: 600; margin-top: .15rem; }

.dh { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.dh h2 { font-family: var(--font-display); font-size: 1.55rem; color: var(--text); line-height: 1.15; }
.dh p { color: var(--text-muted); font-size: .84rem; margin-top: .2rem; }

.todo { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.todo:last-child { border-bottom: 0; }
.todo-av { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center top; background-color: var(--pink-light); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.todo-main { flex: 1; min-width: 0; }
.todo-main strong { display: block; font-size: .88rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-main span { font-size: .76rem; color: var(--text-muted); }
.todo-act { display: flex; gap: .4rem; flex-shrink: 0; }
.mini { border: 1px solid var(--border); background: var(--bg-card); color: var(--text); border-radius: 10px; padding: .4rem .7rem; font-size: .76rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.mini.ok { background: #1f9a5b; border-color: #1f9a5b; color: #fff; }
.mini.no { color: #c0392b; border-color: #e8b4ae; }
.empty-mini { text-align: center; color: var(--text-muted); font-size: .86rem; padding: 1.2rem 0; }

.meter { height: 8px; background: var(--border); border-radius: 8px; overflow: hidden; margin: .5rem 0 .4rem; }
.meter > i { display: block; height: 100%; background: var(--grad); border-radius: 8px; }
.switch { display: inline-flex; align-items: center; gap: .6rem; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); border-radius: 50px; padding: .35rem .9rem .35rem .4rem; cursor: pointer; font: 700 .82rem var(--font-body); }
.switch .knob { width: 34px; height: 20px; border-radius: 20px; background: var(--border); position: relative; transition: background .2s; }
.switch .knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch.on .knob { background: #1f9a5b; } .switch.on .knob::after { left: 16px; }

/* Tabel */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.admin-table th { background: var(--bg-card2); color: var(--text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: left; padding: .7rem .8rem; white-space: nowrap; }
.admin-table td { padding: .75rem .8rem; border-bottom: 1px solid var(--border); color: var(--text); font-size: .86rem; vertical-align: middle; }
.admin-table tr:hover td { background: var(--bg-card2); }
.admin-table .nw { white-space: nowrap; }
.who { display: flex; align-items: center; gap: .65rem; min-width: 190px; }
.who .todo-av { width: 38px; height: 38px; }
.who strong { display: block; white-space: nowrap; } .who small { color: var(--text-muted); font-size: .74rem; }
.row-act { display: flex; gap: .35rem; flex-wrap: nowrap; }
.sel { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: .35rem .5rem; font-size: .8rem; }

.inbox-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; }
.inbox-item.unread { border-left: 4px solid var(--pink-deep); }

/* ── HP ── */
@media (max-width: 768px) {
  .hero { padding: 5.5rem 1.25rem 3rem; text-align: center; }
  .hero-title { font-size: clamp(2.2rem, 10vw, 3rem); }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-actions { display: flex; flex-direction: column; gap: .8rem; }
  .hero-actions .btn-primary, .hero-actions .btn-outline { width: 100%; justify-content: center; }
  .hero-stats { margin: 0 auto; padding: .9rem 1rem; }
  .services-grid { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .service-card { padding: 1.1rem .9rem; }
  .section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}
@media (max-width: 720px) {
  .admin-table { min-width: 0; }
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; }
  .admin-table tr { background: var(--bg-card2); border: 1px solid var(--border); border-radius: 16px; padding: .4rem .85rem; margin-bottom: .75rem; }
  .admin-table td { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: right; border: 0; border-bottom: 1px dashed var(--border); padding: .55rem 0; }
  .admin-table td:last-child { border-bottom: 0; }
  .admin-table td::before { content: attr(data-label); color: var(--text-muted); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: left; flex-shrink: 0; }
  .admin-table td[data-label="Talent"], .admin-table td[data-label="Nama"] { display: block; text-align: left; }
  .admin-table td[data-label="Talent"]::before, .admin-table td[data-label="Nama"]::before { display: none; }
  .admin-table tr:hover td { background: transparent; }
  .who { min-width: 0; }
  .todo { flex-wrap: wrap; } .todo-act { width: 100%; }
  .todo-act .mini { flex: 1; padding: .55rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* perbaikan logo sidebar dasbor (menimpa gradasi terang dari style.css) */
[data-theme] .db-logo { background: transparent; color: #fff; }
[data-theme] .db-logo > span:first-child { color: #fff; }
[data-theme] .db-logo-close { color: #e0cdd9; }
[data-theme] .db-sidebar-avatar-icon { background: var(--grad); color: #fff; }

/* ── Perbaikan bug kontras (bagian lama mengasumsikan latar gelap) ── */
:root { --font-elegant: 'Fraunces', Georgia, serif; }
.testimonials { background: var(--bg-card2); }
.testimonials .section-header h2 { color: var(--text); }
.testimonials .section-header p { color: var(--text-sec); }
.testimonials .section-header h2 em { color: var(--pink-deep); }
.testi-card { padding: 1.5rem; }
.testi-header strong { color: var(--text); }
.testi-card p { color: var(--text-sec); font-style: normal; font-family: var(--font-body); font-size: .92rem; line-height: 1.7; }
.testi-card:hover { border-color: var(--pink); }
.cta-box { background: transparent; }
.footer-logo { color: #fff; }
.footer p, .footer li, .footer-bottom, .developer-credit { color: #cdb7c4; }
.footer-social a { color: #f7edf2; }
.why-icon { background: var(--pink-light); }
.package-card.featured, .package-card.featured h3, .package-card.featured p, .package-card.featured .pkg-price { color: #fff; }

/* ── Jam operasional ── */
.hours-bar { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; padding: .55rem 1rem; font-size: .84rem; font-weight: 600; background: var(--gold-light); color: var(--text); border-bottom: 1px solid var(--border); text-align: center; position: relative; z-index: 5; }
.hours-bar.open { background: rgba(31,154,91,.12); }
.hours-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: #d29a22; flex-shrink: 0; }
.hours-bar.open .dot { background: #1f9a5b; }
.hours-bar b { color: var(--pink-deep); }
body.dashboard-active .hours-bar { display: none; }
.hours-chip { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .4rem .9rem; border-radius: 50px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-sec); font-size: .8rem; font-weight: 600; }
.hours-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: #d29a22; }
.hours-chip.open .dot { background: #1f9a5b; }
body.closed .btn-book-disabled, body.closed .tc-info .btn-primary { opacity: .55; }

/* ── Label talent (Best Talent, dll) ── */
.tc-label { position: absolute; top: .7rem; left: .7rem; z-index: 3; display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .7rem; border-radius: 50px; font-size: .72rem; font-weight: 800; color: #3b2400; background: linear-gradient(135deg, #ffe08a, #e9a93a); box-shadow: 0 3px 10px rgba(180,110,10,.35); }
.talent-card.is-best { border: 1px solid transparent; background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box, linear-gradient(135deg, #f3c25a, var(--pink), var(--purple)) border-box; }
.sel-label { min-width: 130px; }