/* ==========================================================================
   Tutorinku - stylesheet kustom
   Dimuat setelah Tailwind. Berisi hal-hal yang tidak praktis dibuat dengan
   utility class: gradien bertingkat, animasi, dan penyesuaian aksesibilitas.
   ========================================================================== */

/* ---------- Lapisan di atas background hero ----------
   Dibuat seringan mungkin supaya foto tetap TAJAM dan detailnya (tumpukan
   buku, tanaman, doodle) tidak terlihat pudar. Area tulisan memakai "halo"
   putih berbentuk elips, bukan pita vertikal penuh, sehingga bagian bawah-kiri
   dan seluruh sisi kanan gambar tetap bersih tanpa kabut putih. */
.hero-fade {
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.78) 0%,
            rgba(255, 255, 255, 0.42) 28%,
            rgba(255, 255, 255, 0.10) 52%,
            rgba(255, 255, 255, 0) 70%),
        radial-gradient(ellipse 48% 54% at 22% 45%,
            rgba(255, 255, 255, 0.70) 0%,
            rgba(255, 255, 255, 0.46) 46%,
            rgba(255, 255, 255, 0) 78%);
}

/* Di layar kecil tulisan memakai lebar penuh, jadi lapisannya dibuat lebih merata */
@media (max-width: 767px) {
    .hero-fade {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(255, 255, 255, 0.86) 55%,
            rgba(255, 255, 255, 0.60) 100%);
    }
}

/* ---------- Ketajaman gambar hero ----------
   Sedikit kontras dan saturasi supaya foto tampil lebih tegas/tajam,
   serta mempercepat rendering dengan memaksa komposisi di lapisan GPU. */
.hero-media {
    filter: contrast(1.06) saturate(1.05) brightness(1.02);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* ---------- Underline melengkung pada kata "Masa Depanmu" ---------- */
.curved-underline::after {
    content: "";
    position: absolute;
    left: -2%;
    right: -2%;
    bottom: -0.28em;
    height: 0.28em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M4 9C56 4 132 2 200 4c30 1 60 3 96 6' stroke='%234F7DF9' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* ---------- Kartu hasil pencarian tutor ---------- */
.tutor-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tutor-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.10);
}

/* Sembunyikan scrollbar pada baris filter yang bisa di-scroll di mobile */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---------- Animasi masuk untuk konten yang dirender via JS ---------- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 0.35s ease both; }

@keyframes popIn {
    0%   { opacity: 0; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}
.animate-pop-in { animation: popIn 0.2s ease both; }

/* ---------- Aksesibilitas ---------- */
/* Fokus keyboard selalu terlihat jelas, termasuk pada tombol ikon */
:focus-visible {
    outline: 3px solid #635bff;
    outline-offset: 2px;
    border-radius: 6px;
}

/* Hormati preferensi pengguna yang membatasi animasi */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Sembunyikan elemen dari tampilan tapi tetap terbaca screen reader */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Honeypot anti-bot: tidak terlihat manusia, tetap ada di DOM agar robot mengisinya */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---------- Scrollbar halaman ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

html { -webkit-tap-highlight-color: transparent; }

/* Isi halaman tidak bisa di-scroll saat modal terbuka (diatur via JS) */
body.modal-open { overflow: hidden; }