/* ==================== TRAKITA PREMIUM v2 ==================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --green: #22c55e; --green-light: #dcfce7; --green-dark: #16a34a; --green-bg: #f0fdf4;
  --orange: #f97316; --orange-light: #ffedd5; --orange-dark: #ea580c; --orange-bg: #fff7ed;
  --blue: #3b82f6; --blue-light: #dbeafe; --blue-dark: #2563eb; --blue-bg: #eff6ff;
  --red: #ef4444; --red-light: #fee2e2; --red-dark: #dc2626; --red-bg: #fef2f2;
  --whatsapp: #25D366;
  --g50:#f9fafb; --g100:#f3f4f6; --g200:#e5e7eb; --g300:#d1d5db; --g400:#9ca3af;
  --g500:#6b7280; --g600:#4b5563; --g700:#374151; --g800:#1f2937; --g900:#111827;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);
  --shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,0.1),0 8px 10px -6px rgba(0,0,0,0.05);
  --shadow-glow-green:0 8px 32px rgba(34,197,94,0.25);
  --shadow-glow-orange:0 8px 32px rgba(249,115,22,0.25);
  --shadow-glow-blue:0 8px 32px rgba(59,130,246,0.25);
  --shadow-glow-red:0 8px 32px rgba(239,68,68,0.25);
  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px; --r-2xl:28px; --r-full:9999px;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}

html { font-size:16px; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body { font-family:var(--font); background:#f8fafc; color:var(--g800); line-height:1.5; overflow-x:hidden; -webkit-font-smoothing:antialiased; min-height:100vh; min-height:100dvh; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
input { font-family:inherit; outline:none; }
img { max-width:100%; height:auto; display:block; }
img[src*="trakita.png"], img[src*="beca.png"], img[src*="ojek.png"], img[src*="tiket.png"], img[src*="hotel.png"] { height:auto; }
.hidden { display:none !important; }

/* ==================== SPLASH SCREEN ==================== */
.splash-screen { position:fixed; inset:0; background:linear-gradient(135deg,#f0fdf4,#eff6ff,#fff7ed); display:flex; align-items:center; justify-content:center; z-index:9999; transition:opacity 0.5s,visibility 0.5s; }
.splash-screen.fade-out { opacity:0; visibility:hidden; }
.splash-content { text-align:center; animation:splashIn 0.6s ease; }
@keyframes splashIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.splash-logo-wrap { width:90px; height:90px; margin:0 auto; animation:splashLogoIn 0.8s ease; overflow:hidden; }
.splash-logo-img { width:90px; height:90px; max-width:90px; max-height:90px; object-fit:contain; filter:drop-shadow(0 4px 16px rgba(34,197,94,0.3)); }
@keyframes splashLogoIn { from{opacity:0;transform:scale(0.7)} to{opacity:1;transform:scale(1)} }

.splash-title { font-size:32px; font-weight:800; color:var(--g900); margin-top:20px; letter-spacing:-1px; }
.splash-subtitle { font-size:13px; color:var(--g400); margin-top:4px; font-weight:500; }
.splash-loader { margin-top:32px; width:120px; height:3px; background:var(--g200); border-radius:3px; overflow:hidden; margin-left:auto; margin-right:auto; }
.splash-loader-bar { width:0; height:100%; background:linear-gradient(90deg,var(--green),var(--blue),var(--orange)); border-radius:3px; animation:splashLoad 1.5s ease-in-out forwards; }
@keyframes splashLoad { 0%{width:0} 60%{width:70%} 100%{width:100%} }

/* ==================== APP CONTAINER ==================== */
.app { max-width:480px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:white; position:relative; }

/* ==================== HEADER ==================== */
.app-header { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:rgba(255,255,255,0.88); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid rgba(0,0,0,0.04); }
.header-left { display:flex; align-items:center; gap:8px; }
.logo-mark-img { width:36px !important; height:36px !important; max-width:36px !important; max-height:36px !important; object-fit:contain; border-radius:8px; flex-shrink:0; }
.logo-mark svg { width:32px; height:32px; }
.logo-text { font-size:20px; font-weight:800; color:var(--g900); letter-spacing:-0.5px; }
.header-right { display:flex; align-items:center; gap:8px; }
.header-icon-btn { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--g600); position:relative; transition:all 0.2s; }
.header-icon-btn:hover { background:var(--g100); }
.notif-dot { position:absolute; top:6px; right:6px; width:7px; height:7px; background:var(--red); border-radius:50%; border:1.5px solid white; }
.btn-mitra { display:flex; align-items:center; gap:5px; padding:8px 14px; border-radius:var(--r-full); background:linear-gradient(135deg,var(--green),var(--green-dark)); color:white; font-size:12px; font-weight:700; box-shadow:var(--shadow-glow-green); transition:all 0.2s; }
.btn-mitra:active { transform:scale(0.96); }

/* ==================== MAIN CONTENT ==================== */
.main-content { flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:80px; -webkit-overflow-scrolling:touch; }
.page { display:none; animation:pageIn 0.3s ease; }
.page.active { display:block; }
@keyframes pageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ==================== HERO COMPACT ==================== */
.hero-compact { position:relative; overflow:hidden; margin:10px 16px 0; border-radius:var(--r-xl); box-shadow:var(--shadow-md); }
.hero-track { display:flex; transition:transform 0.6s cubic-bezier(0.4,0,0.2,1); will-change:transform; }
.hero-slide { min-width:100%; position:relative; overflow:hidden; padding:18px 20px; max-height:38vh; }

.hero-slide.slide-green { background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%); }
.hero-slide.slide-orange { background:linear-gradient(135deg,#f97316 0%,#ea580c 100%); }
.hero-slide.slide-green-dark { background:linear-gradient(135deg,#059669 0%,#047857 100%); }
.hero-slide.slide-blue { background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%); }

.hero-glow { position:absolute; width:100px; height:100px; border-radius:50%; filter:blur(50px); opacity:0.3; pointer-events:none; }
.hero-glow-green { background:#4ade80; top:-20px; right:-20px; }
.hero-glow-orange { background:#fb923c; top:-20px; right:-20px; }
.hero-glow-wa { background:#34d399; top:-20px; right:-20px; }
.hero-glow-blue { background:#60a5fa; top:-20px; right:-20px; }

.hero-slide-inner { display:flex; align-items:center; gap:12px; position:relative; z-index:2; }
.hero-text { flex:1; min-width:0; }
.hero-title { font-size:18px; font-weight:800; color:white; line-height:1.25; letter-spacing:-0.3px; margin-bottom:4px; }
.hero-subtitle { font-size:11.5px; color:rgba(255,255,255,0.8); line-height:1.4; margin-bottom:8px; }
.hero-pills { display:flex; gap:6px; flex-wrap:wrap; }
.hero-pill { display:flex; align-items:center; gap:3px; padding:3px 8px; border-radius:var(--r-full); background:rgba(255,255,255,0.18); backdrop-filter:blur(4px); color:white; font-size:10px; font-weight:600; }
.hero-pill.pill-orange { background:rgba(255,255,255,0.2); }
.hero-pill.pill-wa { background:rgba(37,211,102,0.3); }
.hero-pill.pill-blue { background:rgba(255,255,255,0.2); }

.hero-illustration { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.hero-illust-img { filter:drop-shadow(0 2px 6px rgba(0,0,0,0.15)); }
.hero-illust-offset { margin-top:-8px; margin-left:16px; }
.hero-illust-single { border-radius:var(--r); background:rgba(255,255,255,0.15); backdrop-filter:blur(4px); padding:6px; }

/* Slider Dots */
.hero-dots { display:flex; justify-content:center; gap:5px; padding:8px 0 4px; }
.hero-dot { width:5px; height:5px; border-radius:50%; background:var(--g300); transition:all 0.3s; cursor:pointer; }
.hero-dot.active { width:18px; border-radius:3px; background:var(--green); }

/* ==================== SEARCH BAR ==================== */
.search-section { padding:10px 16px 0; }
.search-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; background:rgba(255,255,255,0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:var(--r-full); border:1.5px solid var(--g200); box-shadow:var(--shadow); transition:all 0.2s; }
.search-bar:focus-within { border-color:var(--green); box-shadow:0 4px 20px rgba(0,0,0,0.06),0 0 0 3px rgba(34,197,94,0.1); }
.search-icon { color:var(--g400); flex-shrink:0; }
.search-input { flex:1; border:none; background:none; font-size:14px; color:var(--g800); }
.search-input::placeholder { color:var(--g300); }
.search-location-btn { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--green),var(--green-dark)); display:flex; align-items:center; justify-content:center; color:white; flex-shrink:0; box-shadow:0 2px 8px rgba(34,197,94,0.3); transition:all 0.2s; }
.search-location-btn:active { transform:scale(0.94); }

/* ==================== SERVICE CARDS (PREMIUM) ==================== */
.section-services { padding:12px 16px 0; }
.section-header { margin-bottom:10px; }
.section-header h3 { font-size:16px; font-weight:800; color:var(--g900); letter-spacing:-0.3px; }

.service-card { position:relative; border-radius:var(--r-xl); padding:14px 16px; margin-bottom:8px; cursor:pointer; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); overflow:hidden; }
.service-card:active { transform:scale(0.98); }

.sc-green { background:linear-gradient(135deg,#22c55e 0%,#4ade80 100%); box-shadow:0 4px 16px rgba(34,197,94,0.2); }
.sc-orange { background:linear-gradient(135deg,#f97316 0%,#fb923c 100%); box-shadow:0 4px 16px rgba(249,115,22,0.2); }
.sc-blue { background:linear-gradient(135deg,#3b82f6 0%,#60a5fa 100%); box-shadow:0 4px 16px rgba(59,130,246,0.2); }
.sc-red { background:linear-gradient(135deg,#ef4444 0%,#f87171 100%); box-shadow:0 4px 16px rgba(239,68,68,0.2); }

.sc-green:hover { box-shadow:0 8px 24px rgba(34,197,94,0.3); transform:translateY(-1px); }
.sc-orange:hover { box-shadow:0 8px 24px rgba(249,115,22,0.3); transform:translateY(-1px); }
.sc-blue:hover { box-shadow:0 8px 24px rgba(59,130,246,0.3); transform:translateY(-1px); }
.sc-red:hover { box-shadow:0 8px 24px rgba(239,68,68,0.3); transform:translateY(-1px); }

.sc-glow { position:absolute; width:90px; height:90px; border-radius:50%; filter:blur(40px); opacity:0.25; pointer-events:none; top:-15px; right:-15px; }
.sc-green .sc-glow { background:#bbf7d0; }
.sc-orange .sc-glow { background:#fed7aa; }
.sc-blue .sc-glow { background:#bfdbfe; }
.sc-red .sc-glow { background:#fecaca; }

.sc-content { display:flex; align-items:center; gap:12px; position:relative; z-index:2; }
.sc-icon-wrap { width:46px; height:46px; border-radius:var(--r); background:rgba(255,255,255,0.25); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.sc-icon-wrap svg { width:30px; height:30px; }
.sc-icon-img { width:36px !important; height:36px !important; max-width:36px !important; max-height:36px !important; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.15)); flex-shrink:0; }
.sc-text { flex:1; }
.sc-text h4 { font-size:15px; font-weight:800; color:white; letter-spacing:-0.2px; }
.sc-text p { font-size:11px; color:rgba(255,255,255,0.85); margin-top:1px; }
.sc-arrow { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.2); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; color:white; flex-shrink:0; transition:all 0.2s; }
.service-card:hover .sc-arrow { background:rgba(255,255,255,0.35); transform:translateX(2px); }

/* ==================== TENTANG TRAKITA ==================== */
.section-about { padding:8px 16px 0; }
.about-card { background:white; border-radius:var(--r-xl); padding:16px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,0.04); }
.about-header { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.about-icon-main { width:40px; height:40px; border-radius:var(--r); background:linear-gradient(135deg,var(--green),var(--green-dark)); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:var(--shadow-glow-green); }
.about-header-text { flex:1; }
.about-header-text h3 { font-size:14px; font-weight:800; color:var(--g900); letter-spacing:-0.2px; }
.about-header-text p { font-size:11.5px; color:var(--g500); margin-top:2px; line-height:1.4; }
.about-steps { display:flex; flex-direction:column; gap:0; }
.about-step { display:flex; align-items:center; gap:10px; padding:8px 0; }
.about-step-num { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--green),#4ade80); color:white; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.about-step-content { flex:1; }
.about-step-content span { display:block; font-size:13px; font-weight:700; color:var(--g800); }
.about-step-content small { display:block; font-size:11px; color:var(--g400); margin-top:1px; }
.about-step-line { width:1px; height:8px; background:var(--g200); margin-left:12.5px; }

/* ==================== TRUST BADGES ==================== */
.section-trust { padding:14px 16px 0; }
.trust-badges { display:flex; justify-content:center; gap:20px; }
.trust-badge { display:flex; flex-direction:column; align-items:center; gap:8px; }
.trust-icon { width:44px; height:44px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; transition:transform 0.2s; }
.trust-icon:hover { transform:translateY(-2px); }
.ti-connect { background:linear-gradient(135deg,#8b5cf6,#6d28d9); box-shadow:0 3px 12px rgba(139,92,246,0.35); }
.ti-shield { background:linear-gradient(135deg,var(--green),var(--green-dark)); box-shadow:0 3px 12px rgba(34,197,94,0.35); }
.ti-local { background:linear-gradient(135deg,var(--orange),var(--orange-dark)); box-shadow:0 3px 12px rgba(249,115,22,0.35); }
.trust-badge span { font-size:11px; font-weight:700; color:var(--g600); letter-spacing:0.2px; }

.bottom-spacer { height:20px; }

/* ==================== FLOATING BOTTOM NAV ==================== */
.bottom-nav-float { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); width:calc(100% - 32px); max-width:448px; display:flex; align-items:center; justify-content:space-around; padding:10px 8px; padding-bottom:max(10px,env(safe-area-inset-bottom)); background:rgba(255,255,255,0.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-radius:var(--r-2xl); box-shadow:0 8px 32px rgba(0,0,0,0.12); border:1px solid rgba(0,0,0,0.04); z-index:100; }
.nav-float-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 16px; color:var(--g400); transition:all 0.2s; border-radius:var(--r); position:relative; }
.nav-float-item span { font-size:10px; font-weight:600; letter-spacing:0.2px; }
.nav-float-item.active { color:var(--green); }
.nav-float-item.active .nav-float-icon { background:var(--green-bg); border-radius:var(--r); padding:4px 14px; }

/* ==================== EMPTY STATE ==================== */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 40px; text-align:center; }
.empty-icon-wrap { margin-bottom:20px; }
.empty-state h3 { font-size:18px; font-weight:700; color:var(--g800); margin-bottom:8px; }
.empty-state p { font-size:13px; color:var(--g400); line-height:1.5; margin-bottom:24px; max-width:260px; }
.btn-primary { padding:12px 28px; background:linear-gradient(135deg,var(--green),var(--green-dark)); color:white; font-size:14px; font-weight:700; border-radius:var(--r-full); box-shadow:var(--shadow-glow-green); transition:all 0.2s; }
.btn-primary:active { transform:scale(0.96); }

/* ==================== ACCOUNT PAGE ==================== */
.account-page { padding:24px 16px; }
.account-header { display:flex; align-items:center; gap:14px; padding:20px; background:var(--g50); border-radius:var(--r-2xl); margin-bottom:20px; }
.account-avatar { width:52px; height:52px; background:white; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--g200); }
.account-header h3 { font-size:16px; font-weight:700; color:var(--g900); }
.account-header p { font-size:12px; color:var(--g400); margin-top:2px; }
.account-menu { display:flex; flex-direction:column; gap:2px; background:white; border-radius:var(--r-2xl); box-shadow:var(--shadow); overflow:hidden; }
.account-menu-item { display:flex; align-items:center; gap:14px; padding:14px 16px; transition:background 0.15s; cursor:pointer; }
.account-menu-item:active { background:var(--g100); }
.account-menu-icon { width:40px; height:40px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.account-menu-icon.green-light { background:var(--green-light); }
.account-menu-icon.blue-light { background:var(--blue-light); }
.account-menu-icon.orange-light { background:var(--orange-light); }
.account-menu-text { flex:1; }
.account-menu-text span { display:block; font-size:14px; font-weight:600; color:var(--g800); }
.account-menu-text small { display:block; font-size:12px; color:var(--g400); margin-top:1px; }
.account-version { text-align:center; margin-top:32px; }
.account-version p { font-size:12px; color:var(--g300); }

/* ==================== MODAL ==================== */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); z-index:200; display:none; align-items:flex-end; justify-content:center; animation:overlayIn 0.25s ease; }
.modal-overlay.show { display:flex; }
@keyframes overlayIn { from{opacity:0} to{opacity:1} }
.modal-container { width:100%; max-width:480px; max-height:92vh; background:white; border-radius:var(--r-2xl) var(--r-2xl) 0 0; overflow-y:auto; animation:modalSlideUp 0.35s cubic-bezier(0.16,1,0.3,1); padding-bottom:max(20px,env(safe-area-inset-bottom)); }
@keyframes modalSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 20px 0; position:sticky; top:0; background:white; z-index:10; }
.modal-header h2 { font-size:20px; font-weight:800; color:var(--g900); letter-spacing:-0.3px; }
.modal-close { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--g400); transition:all 0.15s; }
.modal-close:hover { background:var(--g100); color:var(--g600); }

/* ==================== MITRA TABS ==================== */
.mitra-tabs { display:flex; gap:4px; padding:16px 20px 0; background:white; position:sticky; top:60px; z-index:9; }
.mitra-tab { flex:1; padding:10px 16px; font-size:14px; font-weight:600; color:var(--g400); border-radius:var(--r); transition:all 0.2s; text-align:center; }
.mitra-tab.active { background:linear-gradient(135deg,var(--green),var(--green-dark)); color:white; box-shadow:var(--shadow-glow-green); }

/* ==================== FORM ==================== */
.mitra-form { display:none; padding:20px; animation:formIn 0.3s ease; }
.mitra-form.active { display:block; }
@keyframes formIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; color:var(--g700); margin-bottom:6px; }
.form-group input[type="text"],.form-group input[type="email"],.form-group input[type="tel"],.form-group input[type="password"],.form-group input[type="number"] { width:100%; padding:12px 16px; border:1.5px solid var(--g200); border-radius:var(--r); font-size:14px; color:var(--g800); transition:all 0.2s; background:white; }
.form-group input:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,0.1); }
.form-group input::placeholder { color:var(--g300); }
.form-textarea { width:100%; padding:12px 16px; border:1.5px solid var(--g200); border-radius:var(--r); font-size:14px; color:var(--g800); font-family:var(--font); resize:vertical; transition:all 0.2s; }
.form-textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,0.1); }
.form-hint { font-size:11px; color:var(--g400); margin-top:4px; display:block; }
.form-note { text-align:center; font-size:12px; color:var(--g400); margin-top:12px; }

/* Demo Accounts Box */
.demo-accounts-box { margin-top:16px; background:linear-gradient(135deg,#f0fdf4,#eff6ff); border-radius:var(--r-xl); padding:14px 16px; border:1px solid rgba(34,197,94,0.15); }
.demo-title { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--g700); margin-bottom:10px; }
.demo-title svg { color:var(--green); flex-shrink:0; }
.demo-list { display:flex; flex-direction:column; gap:6px; }
.demo-item { display:flex; align-items:center; gap:8px; padding:8px 12px; background:white; border-radius:var(--r); cursor:pointer; transition:all 0.15s; border:1px solid rgba(0,0,0,0.04); }
.demo-item:active { transform:scale(0.98); background:var(--g50); }
.demo-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.demo-dot-green { background:var(--green); box-shadow:0 0 6px rgba(34,197,94,0.4); }
.demo-dot-orange { background:var(--orange); box-shadow:0 0 6px rgba(249,115,22,0.4); }
.demo-dot-blue { background:var(--blue); box-shadow:0 0 6px rgba(59,130,246,0.4); }
.demo-dot-red { background:var(--red); box-shadow:0 0 6px rgba(239,68,68,0.4); }
.demo-item span { font-size:12px; font-weight:700; color:var(--g800); }
.demo-item small { font-size:11px; color:var(--g400); font-family:'Plus Jakarta Sans',monospace; }

.service-select { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.service-option { cursor:pointer; }
.service-option input { display:none; }
.option-card { padding:12px; border:2px solid var(--g200); border-radius:var(--r); text-align:center; transition:all 0.2s; position:relative; }
.option-card span { display:block; font-size:13px; font-weight:700; color:var(--g700); }
.option-card small { display:block; font-size:11px; color:var(--g400); margin-top:2px; }
.option-dot { width:8px; height:8px; border-radius:50%; border:2px solid var(--g300); margin:0 auto 8px; transition:all 0.2s; }
.service-option input:checked + .option-card { border-width:2px; }
.service-option input:checked + .option-card .option-dot { border-width:4px; }
.service-option input:checked + .green-opt { border-color:var(--green); background:var(--green-bg); }
.service-option input:checked + .green-opt .option-dot { border-color:var(--green); }
.service-option input:checked + .orange-opt { border-color:var(--orange); background:var(--orange-bg); }
.service-option input:checked + .orange-opt .option-dot { border-color:var(--orange); }
.service-option input:checked + .blue-opt { border-color:var(--blue); background:var(--blue-bg); }
.service-option input:checked + .blue-opt .option-dot { border-color:var(--blue); }
.service-option input:checked + .red-opt { border-color:var(--red); background:var(--red-bg); }
.service-option input:checked + .red-opt .option-dot { border-color:var(--red); }

.btn-full { width:100%; padding:14px 24px; border-radius:var(--r); font-size:15px; font-weight:700; transition:all 0.2s; margin-top:4px; }
.btn-full.green { background:linear-gradient(135deg,var(--green),var(--green-dark)); color:white; box-shadow:var(--shadow-glow-green); }
.btn-full.green:active { transform:scale(0.98); }
.btn-outline { width:auto; padding:14px 24px; border-radius:var(--r); font-size:15px; font-weight:700; border:1.5px solid var(--g200); color:var(--g600); background:white; }
.form-row-btn { display:flex; gap:10px; margin-top:8px; }
.form-row-btn .btn-full { flex:1; }
.form-row-btn .btn-outline { flex:0; }
.form-footer { text-align:center; font-size:13px; color:var(--g400); margin-top:16px; }
.form-footer a { color:var(--green); font-weight:600; }

/* Reg Steps */
.reg-steps { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; }
.reg-step { display:flex; flex-direction:column; align-items:center; gap:4px; }
.reg-step-num { width:28px; height:28px; border-radius:50%; background:var(--g200); color:var(--g500); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:all 0.2s; }
.reg-step.active .reg-step-num { background:linear-gradient(135deg,var(--green),var(--green-dark)); color:white; box-shadow:var(--shadow-glow-green); }
.reg-step.completed .reg-step-num { background:var(--green); color:white; }
.reg-step span { font-size:10px; font-weight:600; color:var(--g400); }
.reg-step.active span { color:var(--green-dark); }
.reg-step-line { width:30px; height:2px; background:var(--g200); border-radius:2px; }
.reg-form-step { display:none; animation:formIn 0.3s ease; }
.reg-form-step.active { display:block; }

/* Photo Upload */
.photo-upload { cursor:pointer; }
.photo-upload-preview { width:80px; height:80px; border-radius:var(--r-lg); border:2px dashed var(--g300); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--g400); transition:all 0.2s; }
.photo-upload-preview:hover { border-color:var(--green); background:var(--green-bg); }
.photo-upload-preview.has-photo { border:none; overflow:hidden; padding:0; }
.photo-upload-preview img { width:100%; height:100%; object-fit:cover; border-radius:var(--r-lg); }

/* ==================== SERVICE DETAIL PAGE ==================== */
.service-detail { padding:0; }
.service-detail-header { padding:16px 20px; display:flex; align-items:center; gap:12px; }
.service-detail-back { width:40px; height:40px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; color:var(--g600); transition:all 0.15s; }
.service-detail-back:hover { background:var(--g100); }
.service-detail-title { font-size:20px; font-weight:800; letter-spacing:-0.3px; }
.service-detail-map { width:100%; height:200px; background:var(--g100); position:relative; overflow:hidden; }
.service-detail-map-map { width:100%; height:100%; background:linear-gradient(180deg,#e0f2fe 0%,#dbeafe 40%,#bfdbfe 100%); position:relative; }
.map-grid { position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 30px,rgba(0,0,0,0.03) 30px,rgba(0,0,0,0.03) 31px),repeating-linear-gradient(90deg,transparent,transparent 30px,rgba(0,0,0,0.03) 30px,rgba(0,0,0,0.03) 31px); }
.map-road { position:absolute; background:rgba(255,255,255,0.8); }
.map-road-h { height:3px; left:0; right:0; }
.map-road-v { width:3px; top:0; bottom:0; }
.map-pin { position:absolute; width:28px; height:28px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.15); animation:pinBounce 0.5s ease; }
@keyframes pinBounce { 0%{transform:rotate(-45deg) translateY(-20px);opacity:0} 60%{transform:rotate(-45deg) translateY(3px)} 100%{transform:rotate(-45deg) translateY(0);opacity:1} }
.map-pin-inner { transform:rotate(45deg); width:12px; height:12px; border-radius:50%; background:white; }
.map-pin.green-pin { background:var(--green); }
.map-pin.orange-pin { background:var(--orange); }
.map-pin.blue-pin { background:var(--blue); }
.map-pin.red-pin { background:var(--red); }
.map-location-label { position:absolute; bottom:12px; left:12px; right:12px; background:rgba(255,255,255,0.95); backdrop-filter:blur(8px); border-radius:var(--r); padding:10px 14px; display:flex; align-items:center; gap:8px; box-shadow:var(--shadow-md); }
.map-location-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.map-location-text { flex:1; }
.map-location-text span { display:block; font-size:12px; font-weight:600; color:var(--g800); }
.map-location-text small { font-size:11px; color:var(--g400); }

/* Provider List */
.provider-list { padding:16px; }
.provider-list-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.provider-list-header h3 { font-size:16px; font-weight:700; color:var(--g900); }
.provider-list-header span { font-size:12px; color:var(--g400); }
.provider-card { background:white; border-radius:var(--r-xl); padding:16px; box-shadow:var(--shadow); margin-bottom:10px; display:flex; align-items:center; gap:14px; border:1px solid rgba(0,0,0,0.04); transition:all 0.2s; cursor:pointer; }
.provider-card:active { transform:scale(0.99); }
.provider-avatar { width:48px; height:48px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:white; flex-shrink:0; }
.provider-avatar.green-bg { background:linear-gradient(135deg,#22c55e,#16a34a); }
.provider-avatar.orange-bg { background:linear-gradient(135deg,#f97316,#ea580c); }
.provider-avatar.blue-bg { background:linear-gradient(135deg,#3b82f6,#2563eb); }
.provider-avatar.red-bg { background:linear-gradient(135deg,#ef4444,#dc2626); }
.provider-info { flex:1; min-width:0; }
.provider-name { font-size:14px; font-weight:700; color:var(--g800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.provider-detail { font-size:12px; color:var(--g400); margin-top:2px; display:flex; align-items:center; gap:4px; }
.provider-status { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:3px 8px; border-radius:var(--r-full); margin-top:4px; }
.provider-status.online { background:var(--green-light); color:var(--green-dark); }
.provider-status.offline { background:var(--g100); color:var(--g400); }
.status-dot { width:6px; height:6px; border-radius:50%; }
.status-dot.online { background:var(--green); }
.status-dot.offline { background:var(--g300); }
.provider-bio { font-size:12px; color:var(--g500); margin-top:6px; line-height:1.5; }
.provider-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.provider-tag { font-size:11px; font-weight:600; padding:3px 10px; border-radius:var(--r-full); background:var(--g100); color:var(--g600); }
.provider-tag.green-tag { background:var(--green-light); color:var(--green-dark); }
.provider-tag.orange-tag { background:var(--orange-light); color:var(--orange-dark); }
.provider-tag.blue-tag { background:var(--blue-light); color:var(--blue-dark); }
.provider-tag.red-tag { background:var(--red-light); color:var(--red-dark); }
.provider-wa-btn { width:42px; height:42px; border-radius:50%; background:var(--whatsapp); display:flex; align-items:center; justify-content:center; color:white; flex-shrink:0; transition:all 0.2s; box-shadow:0 3px 10px rgba(37,211,102,0.3); }
.provider-wa-btn:active { transform:scale(0.94); }

/* Hotel card layout */
.provider-card.hotel-card { flex-direction:column; align-items:stretch; }
.hotel-card-top { display:flex; align-items:center; gap:14px; }
.provider-card.hotel-card .provider-wa-btn { align-self:flex-end; margin-top:-36px; }

/* Info Box */
.info-box { display:flex; align-items:flex-start; gap:14px; padding:16px 18px; background:linear-gradient(135deg,#f0fdf4,#ecfdf5); border-radius:var(--r-xl); border:1px solid rgba(34,197,94,0.12); }
.info-icon { flex-shrink:0; width:40px; height:40px; background:rgba(34,197,94,0.12); border-radius:var(--r); display:flex; align-items:center; justify-content:center; }
.info-content { flex:1; }
.info-title { font-size:13px; font-weight:600; color:var(--green-dark); margin-bottom:2px; }
.info-desc { font-size:12px; color:var(--g500); line-height:1.5; }

/* GPS Toggle */
.gps-toggle { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:white; border-radius:var(--r-xl); box-shadow:var(--shadow); border:1px solid rgba(0,0,0,0.04); }
.gps-toggle-info { display:flex; align-items:center; gap:10px; }
.gps-toggle-icon { width:36px; height:36px; border-radius:var(--r); background:var(--orange-light); color:var(--orange); display:flex; align-items:center; justify-content:center; }
.gps-toggle-text span { display:block; font-size:13px; font-weight:600; color:var(--g800); }
.gps-toggle-text small { font-size:11px; color:var(--g400); }
.toggle-switch { width:48px; height:28px; border-radius:14px; background:var(--g300); position:relative; cursor:pointer; transition:all 0.3s; }
.toggle-switch::after { content:''; width:22px; height:22px; border-radius:50%; background:white; position:absolute; top:3px; left:3px; transition:all 0.3s; box-shadow:var(--shadow-sm); }
.toggle-switch.active { background:var(--green); }
.toggle-switch.active::after { left:23px; }

/* ==================== DASHBOARD APP ==================== */
.dashboard-app { max-width:480px; margin:0 auto; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:var(--g50); position:relative; }
.dashboard-app.hidden { display:none !important; }

.dash-header { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); border-bottom:1px solid rgba(0,0,0,0.05); }
.dash-header-left { display:flex; align-items:center; gap:10px; }
.dash-header-logo-img { width:32px !important; height:32px !important; max-width:32px !important; max-height:32px !important; object-fit:contain; border-radius:6px; flex-shrink:0; }
.dash-header-logo { font-size:18px; font-weight:800; letter-spacing:-0.5px; }
.dash-header-badge { font-size:10px; font-weight:700; padding:3px 10px; border-radius:var(--r-full); color:white; }
.dash-header-badge.green-badge { background:var(--green); }
.dash-header-badge.orange-badge { background:var(--orange); }
.dash-header-badge.blue-badge { background:var(--blue); }
.dash-header-badge.red-badge { background:var(--red); }
.dash-logout-btn { display:flex; align-items:center; gap:5px; padding:8px 14px; border-radius:var(--r-full); border:1.5px solid var(--red); color:var(--red-dark); font-size:12px; font-weight:600; transition:all 0.2s; background:white; }
.dash-logout-btn:hover { background:var(--red-bg); }

.dash-main { flex:1; overflow-y:auto; overflow-x:hidden; padding-bottom:72px; -webkit-overflow-scrolling:touch; }
.dash-page { display:none; padding:20px; animation:dashPageIn 0.3s ease; }
.dash-page.active { display:block; }
@keyframes dashPageIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.dash-bottom-nav { position:fixed; bottom:16px; left:50%; transform:translateX(-50%); width:calc(100% - 32px); max-width:448px; display:flex; align-items:center; justify-content:space-around; padding:10px 8px; padding-bottom:max(10px,env(safe-area-inset-bottom)); background:rgba(255,255,255,0.92); backdrop-filter:blur(24px); border-radius:var(--r-2xl); box-shadow:0 8px 32px rgba(0,0,0,0.12); border:1px solid rgba(0,0,0,0.04); z-index:100; }
.dash-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 12px; color:var(--g400); transition:all 0.2s; border-radius:var(--r); position:relative; }
.dash-nav-item span { font-size:10px; font-weight:600; letter-spacing:0.2px; }
.dash-nav-item.active { color:var(--green); }
.dash-nav-item.active.green-nav { color:var(--green); }
.dash-nav-item.active.orange-nav { color:var(--orange); }
.dash-nav-item.active.blue-nav { color:var(--blue); }
.dash-nav-item.active.red-nav { color:var(--red); }

/* Dashboard Components */
.dash-welcome { padding:24px; border-radius:var(--r-2xl); margin-bottom:20px; position:relative; overflow:hidden; }
.dash-welcome.green-dash { background:linear-gradient(135deg,#22c55e,#16a34a); color:white; box-shadow:var(--shadow-glow-green); }
.dash-welcome.orange-dash { background:linear-gradient(135deg,#f97316,#ea580c); color:white; box-shadow:var(--shadow-glow-orange); }
.dash-welcome.blue-dash { background:linear-gradient(135deg,#3b82f6,#2563eb); color:white; box-shadow:var(--shadow-glow-blue); }
.dash-welcome.red-dash { background:linear-gradient(135deg,#ef4444,#dc2626); color:white; box-shadow:var(--shadow-glow-red); }
.dash-welcome h3 { font-size:20px; font-weight:800; letter-spacing:-0.3px; }
.dash-welcome p { font-size:13px; opacity:0.85; margin-top:4px; line-height:1.5; }

.dash-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.dash-stat-card { background:white; border-radius:var(--r-xl); padding:16px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,0.04); }
.dash-stat-card .label { font-size:12px; color:var(--g400); font-weight:500; }
.dash-stat-card .value { font-size:24px; font-weight:800; color:var(--g900); margin-top:4px; letter-spacing:-0.5px; }
.dash-stat-card .change { font-size:11px; color:var(--green); font-weight:600; margin-top:2px; }

.dash-section { background:white; border-radius:var(--r-2xl); padding:20px; margin-bottom:16px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,0.04); }
.dash-section h4 { font-size:15px; font-weight:700; color:var(--g800); margin-bottom:12px; display:flex; align-items:center; gap:8px; }

.dash-specific-info { display:flex; flex-direction:column; gap:2px; }
.dash-specific-row { display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--g100); }
.dash-specific-row:last-child { border-bottom:none; }
.dash-specific-row .label { font-size:13px; color:var(--g500); font-weight:500; }
.dash-specific-row .value { font-size:13px; font-weight:600; color:var(--g800); text-align:right; max-width:60%; }

.dash-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.dash-quick-action { background:white; border-radius:var(--r-xl); padding:16px; display:flex; flex-direction:column; align-items:center; gap:8px; box-shadow:var(--shadow); border:1px solid rgba(0,0,0,0.04); cursor:pointer; transition:all 0.2s; }
.dash-quick-action:active { transform:scale(0.97); }
.dash-quick-action-icon { width:44px; height:44px; border-radius:var(--r); display:flex; align-items:center; justify-content:center; }
.dash-quick-action span { font-size:12px; font-weight:600; color:var(--g700); }

/* Photo Gallery */
.dash-photo-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dash-photo-item { aspect-ratio:1; border-radius:var(--r); border:2px dashed var(--g300); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; overflow:hidden; }
.dash-photo-item:hover { border-color:var(--green); }
.dash-photo-item.has-photo { border:none; }
.dash-photo-item img { width:100%; height:100%; object-fit:cover; }
.add-icon { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--g400); }
.add-icon span { font-size:10px; }
.remove-photo { position:absolute; top:4px; right:4px; width:20px; height:20px; background:rgba(0,0,0,0.6); color:white; border-radius:50%; font-size:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* Profile form in dashboard */
.dash-profile-form { display:flex; flex-direction:column; gap:14px; }
.dash-profile-avatar { width:80px; height:80px; border-radius:50%; margin:0 auto 8px; display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; color:white; position:relative; }
.dash-profile-avatar .edit-badge { position:absolute; bottom:0; right:0; width:24px; height:24px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; border:2px solid white; }

.dash-subscription { background:var(--g50); border-radius:var(--r-xl); padding:16px; }
.dash-sub-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--g200); }
.dash-sub-row:last-child { border-bottom:none; }
.dash-sub-row .label { font-size:13px; color:var(--g500); }
.dash-sub-row .value { font-size:13px; font-weight:600; color:var(--g800); }
.dash-sub-row .value.active { color:var(--green-dark); }
.dash-sub-row .value.inactive { color:var(--red); }

/* Toggle in dashboard */
.dash-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--g100); }
.dash-toggle-row:last-child { border-bottom:none; }
.dash-toggle-info { display:flex; align-items:center; gap:10px; }
.dash-toggle-info span { font-size:14px; font-weight:600; color:var(--g800); }

/* ==================== TOAST ==================== */
.toast { position:fixed; bottom:100px; left:50%; transform:translateX(-50%); padding:12px 24px; background:var(--g800); color:white; font-size:13px; font-weight:600; border-radius:var(--r-full); box-shadow:var(--shadow-xl); z-index:9999; opacity:0; transition:all 0.3s; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(-8px); }

/* ==================== RESPONSIVE ==================== */
@media (max-width:360px) {
  .hero-title { font-size:16px; }
  .hero-slide { padding:14px 16px; }
  .hero-illust-img { width:42px !important; height:42px !important; max-width:42px !important; max-height:42px !important; }
  .hero-illust-offset { width:36px !important; height:36px !important; max-width:36px !important; max-height:36px !important; }
  .sc-icon-wrap { width:40px; height:40px; }
  .sc-icon-img { width:32px !important; height:32px !important; max-width:32px !important; max-height:32px !important; }
  .service-card { padding:12px 14px; }
}