/* =====================================================================
   CariGuru — modern.css (Gelombang 5: poin 27+28+29)
   Refresh indigo/gradient, mobile-first. Menimpa kelas yang ada.
   Dimuat SETELAH style.css & cari-guru.css. Tidak mengubah PHP/markup.
   ===================================================================== */
:root{
  --cg-primary:#4f46e5; --cg-primary-dark:#4338ca; --cg-sky:#0ea5e9; --cg-violet:#7c3aed;
  --cg-grad:linear-gradient(135deg,#4f46e5 0%,#7c3aed 100%);
  --cg-grad-sky:linear-gradient(135deg,#0ea5e9 0%,#4f46e5 100%);
  --cg-ink:#1e293b; --cg-muted:#64748b; --cg-line:#e2e8f0;
  --cg-bg:#f1f5f9; --cg-card:#ffffff; --cg-radius:16px;
  --cg-shadow:0 4px 20px rgba(2,6,23,.06); --cg-shadow-lg:0 12px 32px rgba(2,6,23,.10);
}
body{ background:var(--cg-bg); color:var(--cg-ink); -webkit-font-smoothing:antialiased; }
.container{ max-width:1140px; }

/* ---------- NAVBAR ---------- */
.navbar{ background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px);
  box-shadow:0 1px 0 var(--cg-line); position:sticky; top:0; z-index:50; }
.menu a{ color:#334155; font-weight:600; transition:color .15s; }
.menu a:hover{ color:var(--cg-primary); }
/* btn-login = tombol SOLID (Login/Logout). Paksa teks putih agar terbaca. */
.btn-login{ background:var(--cg-grad)!important; color:#fff!important; border:none!important;
  border-radius:10px!important; font-weight:700!important; padding:9px 20px!important;
  box-shadow:0 4px 14px rgba(79,70,229,.35); transition:all .15s; }
.btn-login:hover{ filter:brightness(1.06); transform:translateY(-1px); }
/* btn-register = tombol OUTLINE (Daftar/Dashboard/Tanya AI). Paksa teks indigo. */
.btn-register{ background:#fff!important; color:var(--cg-primary)!important;
  border:1.5px solid var(--cg-primary)!important; border-radius:10px!important;
  font-weight:700!important; padding:9px 20px!important; box-shadow:none; transition:all .15s; }
.btn-register:hover{ background:var(--cg-primary)!important; color:#fff!important; }

/* ---------- HERO ---------- */
.hero{ background:var(--cg-grad); position:relative; overflow:hidden; padding:72px 20px; }
.hero::before{ content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 400px at 80% -10%, rgba(14,165,233,.35), transparent 60%); pointer-events:none; }
.hero-content{ position:relative; }
.hero-content h1{ color:#fff!important; font-weight:800; letter-spacing:-.02em; font-size:clamp(1.8rem,5vw,2.6rem); }
.hero-content p{ color:rgba(255,255,255,.9)!important; font-size:clamp(.95rem,2.5vw,1.1rem); }
.hero-search{ background:rgba(255,255,255,.98); border-radius:18px; padding:16px;
  box-shadow:var(--cg-shadow-lg); gap:12px; max-width:980px; margin:24px auto 0; }
.hero-search input, .hero-search select{ border:1.5px solid var(--cg-line); border-radius:12px;
  padding:13px 15px; font-size:.95rem; color:var(--cg-ink); background:#fff; transition:border-color .15s; }
.hero-search input:focus, .hero-search select:focus{ outline:none; border-color:var(--cg-primary);
  box-shadow:0 0 0 3px rgba(79,70,229,.12); }
.hero-search button{ background:var(--cg-grad)!important; color:#fff!important; border:none; border-radius:12px;
  font-weight:800; padding:13px 26px; box-shadow:0 6px 18px rgba(79,70,229,.4); transition:all .15s; }
.hero-search button:hover{ transform:translateY(-1px); filter:brightness(1.05); }

/* ---------- FEATURE CARDS ---------- */
.fc-card{ border-radius:var(--cg-radius); box-shadow:var(--cg-shadow); border:1px solid rgba(255,255,255,.15);
  transition:transform .18s, box-shadow .18s; color:#fff!important; padding:30px 24px; }
.fc-card:hover{ transform:translateY(-4px); box-shadow:var(--cg-shadow-lg); }
.fc-cari{ background:linear-gradient(135deg,#0ea5e9,#2563eb); }
.fc-tanya{ background:linear-gradient(135deg,#6366f1,#7c3aed); }
.fc-latihan{ background:linear-gradient(135deg,#f59e0b,#ea580c); }
.fc-icon{ font-size:2.2rem; filter:drop-shadow(0 4px 8px rgba(0,0,0,.2)); }
.fc-label{ font-weight:800; color:#fff!important; font-size:1.2rem; }
.fc-sub{ color:rgba(255,255,255,.92)!important; font-size:.9rem; }

/* ---------- STATS (perbesar padding + teks) ---------- */
.stats-row{ padding:44px 20px; }
.stats-grid{ gap:20px; }
.stat-card{ background:var(--cg-card)!important; border-radius:var(--cg-radius)!important;
  box-shadow:var(--cg-shadow)!important; border:1px solid var(--cg-line)!important;
  padding:36px 24px!important; transition:transform .18s; }
.stat-card:hover{ transform:translateY(-3px); }
.stat-card img{ width:56px!important; margin-bottom:14px!important; }
.stat-card .count, .stat-card h1{ color:var(--cg-primary)!important; font-weight:800!important;
  font-size:clamp(2rem,5vw,2.8rem)!important; line-height:1.1; }
.stat-card h3{ color:var(--cg-muted)!important; font-weight:600!important; font-size:1.05rem!important; margin-top:8px; }

/* ---------- VALUE PROP ---------- */
.value-text h1{ color:var(--cg-ink)!important; font-weight:800; letter-spacing:-.02em; }
.value-text h3{ color:var(--cg-primary)!important; font-weight:700; }
.value-text p{ color:var(--cg-muted)!important; line-height:1.85; }
.value-image img{ border-radius:20px!important; box-shadow:var(--cg-shadow-lg); }
.btn-primary{ background:var(--cg-grad)!important; color:#fff!important; border:none; border-radius:12px;
  font-weight:800; padding:14px 30px; box-shadow:0 6px 18px rgba(79,70,229,.35); transition:all .15s; display:inline-block; }
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.05); }

/* ---------- CHAT CTA ---------- */
.chat-cta{ background:var(--cg-grad-sky)!important; }
.chat-cta h3{ color:#fff!important; font-weight:700; }
.btn-chat{ background:#fff!important; color:var(--cg-primary)!important; border:none; border-radius:12px;
  font-weight:800; padding:14px 32px; box-shadow:0 6px 18px rgba(0,0,0,.15); transition:all .15s; display:inline-block; }
.btn-chat:hover{ transform:translateY(-2px); }

/* ---------- SECTION HEADER ---------- */
.section-header h2, .results-header h2{ color:var(--cg-ink); font-weight:800; letter-spacing:-.02em; font-size:1.5rem; }
.section-header a, .results-header a{ color:var(--cg-primary)!important; font-weight:700; }

/* ---------- GURU CARDS ---------- */
.guru-card{ background:var(--cg-card); border-radius:var(--cg-radius)!important; border:1px solid var(--cg-line);
  box-shadow:var(--cg-shadow); transition:transform .18s, box-shadow .18s; overflow:hidden; padding:22px 18px; }
.guru-card:hover{ transform:translateY(-4px); box-shadow:var(--cg-shadow-lg); border-color:#c7d2fe; }
.guru-avatar{ border-radius:50%; border:3px solid #eef2ff; box-shadow:0 4px 12px rgba(79,70,229,.15); object-fit:cover; }
.guru-info h3, .guru-card h3{ color:var(--cg-ink); font-weight:800; font-size:1.05rem; }
.guru-meta, .guru-info p{ color:var(--cg-muted); }
.guru-tarif{ color:var(--cg-primary)!important; font-weight:800; font-size:1.05rem; }
.jenjang-list{ gap:6px; }
.badge-jenjang{ background:#eef2ff!important; color:#4338ca!important; border-radius:999px; font-weight:700;
  font-size:.72rem; padding:4px 11px; border:none; }
.badge-premium{ background:linear-gradient(135deg,#6366f1,#7c3aed)!important; color:#fff!important;
  border-radius:999px!important; font-weight:800!important; padding:4px 11px!important; box-shadow:0 2px 8px rgba(99,102,241,.4); }
.badge-gold{ background:linear-gradient(135deg,#f59e0b,#d97706)!important; color:#fff!important;
  border-radius:999px!important; font-weight:800!important; padding:4px 11px!important; box-shadow:0 2px 8px rgba(245,158,11,.4); }
.badge-verified{ background:#ecfeff!important; color:#0891b2!important; border-radius:999px; font-weight:700; padding:4px 11px; }
.badge-fast{ background:#fef2f2!important; color:#dc2626!important; border-radius:999px; font-weight:700; padding:4px 11px; }
.badge-group{ background:#f0fdf4!important; color:#16a34a!important; border-radius:999px; font-weight:700; padding:4px 11px; }
.guru-distance{ color:var(--cg-muted); font-size:.8rem; }
.btn-lihat{ background:var(--cg-grad)!important; color:#fff!important; border:none; border-radius:11px; font-weight:800;
  padding:11px 16px; box-shadow:0 4px 14px rgba(79,70,229,.3); transition:all .15s; }
.btn-lihat:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.btn-wa-list, .btn-wa{ background:#22c55e!important; color:#fff!important; border:none; border-radius:11px; font-weight:800;
  padding:11px 16px; box-shadow:0 4px 14px rgba(34,197,94,.3); }

/* ---------- PAGINATION (inline body style → !important) ---------- */
.guru-pagination{ gap:8px!important; }
.page-btn{ border:1.5px solid var(--cg-line)!important; background:#fff!important; color:#475569!important;
  border-radius:10px!important; font-weight:700!important; padding:9px 15px!important; transition:all .15s; }
.page-btn:hover{ border-color:var(--cg-primary)!important; color:var(--cg-primary)!important; }
.page-btn.active{ background:var(--cg-grad)!important; color:#fff!important; border-color:transparent!important; }

/* ---------- GURU DETAIL ---------- */
.detail-box, .detail-content, .detail-sidebar{ background:var(--cg-card); border-radius:var(--cg-radius);
  box-shadow:var(--cg-shadow); border:1px solid var(--cg-line); }
.detail-avatar{ border-radius:50%; border:4px solid #eef2ff; box-shadow:0 6px 18px rgba(79,70,229,.18); object-fit:cover; }
.detail-content h1, .detail-box h1, .detail-content h2{ color:var(--cg-ink); font-weight:800; letter-spacing:-.01em; }
.detail-meta{ color:var(--cg-muted); }
.detail-tarif{ color:var(--cg-primary)!important; font-weight:800; }
.wa-note{ color:var(--cg-muted); }

/* ---------- DASHBOARD (poin 28) — polis ringan aman ---------- */
.dash-card, .paket-card-dash{ border-radius:var(--cg-radius)!important; box-shadow:var(--cg-shadow)!important; }
.quick-link{ border-radius:14px!important; box-shadow:var(--cg-shadow)!important; transition:transform .18s, box-shadow .18s!important; }
.quick-link:hover{ transform:translateY(-3px)!important; box-shadow:var(--cg-shadow-lg)!important; }
.dashboard-menu .menu-btn-edit, .menu-btn-edit{ border-radius:12px!important; transition:transform .15s; }
.menu-btn-edit:hover{ transform:translateY(-2px); }
.btn-upgrade{ box-shadow:0 4px 14px rgba(245,158,11,.35); }

/* ---------- MISC ---------- */
.no-result{ color:var(--cg-muted); }
.jumlah-guru{ color:var(--cg-muted); font-weight:600; }
a{ transition:color .15s; }

/* ---------- MOBILE-FIRST (poin 29) ---------- */
@media (max-width:768px){
  .hero{ padding:52px 16px; }
  .hero-search{ flex-direction:column; padding:14px; }
  .hero-search input, .hero-search select, .hero-search button{ width:100%; }
  .fc-container{ grid-template-columns:1fr; }
  .stats-grid{ grid-template-columns:1fr; }
  .value-grid{ gap:28px!important; }
  .section-header{ flex-direction:column; align-items:flex-start; gap:6px; }
}
@media (max-width:480px){
  .stat-card{ padding:28px 20px!important; }
  .guru-card{ padding:18px 14px; }
}

/* =====================================================================
   Gelombang 5b — auth notice, sidebar dashboard, float button (v=8)
   ===================================================================== */
/* Halaman notice auth memakai token indigo yang sama (dimuat via modern.css) */
/* Sidebar dashboard (siswa & guru) memakai kelas .dwrap/.dside/.dnav/.dmain
   yang di-scope di masing-masing halaman; token warna konsisten dgn --cg-*. */

/* Float button: pastikan selalu di atas konten & tidak nabrak safe-area */
.float-stack{ z-index:1000 !important; }
@media (max-width:640px){
  .float-stack{ bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important; }
}

/* Sidebar drawer helper (dipakai bila halaman lain mengadopsi pola sama) */
.dnav a:focus-visible{ outline:2px solid var(--cg-primary); outline-offset:2px; }

/* =====================================================================
   Gelombang 5c (v=9) — FIX ROOT CAUSE tombol float hilang di mobile.
   Penyebab: drawer .menu disembunyikan dgn right:-260px -> dokumen
   overflow horizontal 260px -> layout viewport Chrome Android melebar
   -> semua elemen fixed (right:12px) menempel di tepi kanan viewport
   yang melebar = DI LUAR layar sampai user scroll/pan.
   Solusi: drawer tertutup TIDAK PERNAH punya bounds di luar viewport:
   right:0 + scaleX(0) dari sisi kanan + visibility:hidden.
   Animasi buka/tutup jadi "squeeze" halus dari kanan.
   Jaring pengaman: overflow-x clip/hidden di html utk overflow lain. */
html{ overflow-x: clip; }
@supports not (overflow: clip){ html{ overflow-x: hidden; } }

@media (max-width: 768px){
  .menu{
    right: 0 !important;                  /* timpa right:-260px lama */
    transform: scaleX(0);                 /* tertutup: lebar visual 0, TANPA offscreen */
    transform-origin: right center;
    visibility: hidden;                   /* tak bisa difokus/tap saat tertutup */
    transition: transform .28s ease, visibility 0s linear .28s;
    will-change: transform;
    box-shadow: none;
  }
  .menu.active{
    right: 0 !important;                  /* timpa right:0 lama agar konsisten */
    transform: scaleX(1);
    visibility: visible;
    transition: transform .28s ease, visibility 0s;
    box-shadow: -2px 0 15px rgba(0,0,0,0.2);
  }
}