/* ============================================================
   PRATAMA — restyle global untuk halaman non-landing (course,
   blog, about us, contact us, faq, login, register, kebijakan, dll).

   Di-load HANYA saat template permanent aktif = 'pratama' (lihat
   layouts/default.blade.php). File ini menimpa token & komponen
   bersama yang dipakai style.css/custom_style.css di seluruh situs
   (--color-1, --color-2, --text-color, --box-shadow, .eBtn, .gradient,
   .form-control, .breadcum-area, dst.) supaya semua halaman sekunder
   ikut memakai warna/font/radius/shadow landing page PRATAMA TANPA
   mengubah struktur/markup halaman aslinya.
   ============================================================ */

:root {
    --font-family: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --color-1: #1d4ed8;
    --color-2: #152647;
    --text-color: #6b7a90;
    --box-shadow: 0 4px 24px rgba(16, 26, 46, .06);
    --box-shadow-2: 0 4px 24px rgba(16, 26, 46, .06);
}

body,
input,
textarea,
select,
button {
    font-family: var(--font-family);
}

/* Banyak heading (.g-title, .title-5, dst.) hardcode font-family sendiri
   dan tidak memakai var(--font-family), jadi ditimpa lewat selector luas. */
h1, h2, h3, h4, h5, h6,
[class*="title"] {
    font-family: var(--font-family) !important;
}

a {
    transition: color .2s ease;
}

/* ------------------------- Buttons ------------------------- */

.eBtn {
    border-radius: 999px;
}

.gradient,
.page-link:hover,
.page-item.active .page-link,
.entry-pagination .pagination li.active a {
    background-image: none !important;
    background-color: var(--color-1) !important;
    box-shadow: none !important;
}

.gradient:hover {
    background-color: #1e3a8a !important;
}

.btn-danger-1 {
    background-color: var(--color-1);
    border-color: var(--color-1);
    border-radius: 999px;
}

.btn-danger-1:hover {
    background-color: #1e3a8a;
    border-color: #1e3a8a;
}

/* ------------------------- Login / Register -------------------------
   .login-area (dipakai login DAN register) cuma punya margin-top,
   tanpa bottom spacing sama sekali. Di desktop ini tersamar karena
   kolom ilustrasi (height:630px) jauh lebih tinggi dari form, jadi
   row-nya "terlihat" longgar di bawah padahal itu cuma sisa tinggi
   gambar. Begitu kolom ditumpuk di mobile (<768px, ilustrasi di atas,
   form di bawah), sisa tinggi itu hilang dan footer nempel langsung
   di bawah tombol Login/Sign Up tanpa jarak sama sekali. */
.login-area {
    padding-bottom: 60px;
}

@media (max-width: 767px) {
    .login-area .login-img {
        margin-bottom: 24px;
    }
}

/* ------------------------- Forms ------------------------- */

.form-control,
.form-select,
.nice-select {
    border-radius: 12px;
}

.form-check-input:checked {
    background-color: var(--color-1);
    border-color: var(--color-1);
}

.form-check-input:focus,
.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}

/* ------------------------- Breadcrumb -------------------------
   PENTING: jangan sentuh padding di sini. style.css memberi
   .breadcum-area padding-bottom: 200px, lalu .eNtery-item (grid
   konten di bawahnya) ditarik naik margin-top: -180px supaya kartu
   "mengambang" di atas pita warna. Kalau tinggi breadcrumb dikecilkan
   tanpa menyesuaikan -180px itu, breadcrumb/judul akan ketutup kartu. */

.breadcum-area {
    background: linear-gradient(90deg, #1e3a8a 0%, #1d4ed8 55%, #4338ca 100%);
}

.breadcum-area::after {
    display: none;
}

.breadcum-area .breadcrumb-item a,
.breadcum-area .breadcrumb-item.active,
.breadcum-area .g-title,
.breadcum-area .showing-text {
    color: #fff;
}

.breadcum-area .breadcrumb-item a:hover {
    color: #cfe0ff;
}

.breadcum-area .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, .6);
}

/* ------------------------- Blog ------------------------- */

/* Chip kategori di kartu blog (mis. "Announcements"/"Career") hardcode
   #C664FF di style.css, tidak lewat var(--color-1). */
.b-card .card-head span {
    background-color: var(--color-1);
}

/* ------------------- Halaman konten sederhana -------------------
   About Us, FAQ, Privacy/Terms/Refund/Cookie Policy pakai breadcrumb
   dengan class utility (py-56, fz-*, fw-*, lh-*, cg-*, ul-ol) yang
   TIDAK PERNAH didefinisikan di style.css/custom_style.css, dan
   data-background menunjuk ke assets/frontend/images/... (tanpa
   "/default/") yang filenya tidak ada. Akibatnya breadcrumb selama
   ini kosong putih dengan judul putih di atas putih (tak kelihatan).
   Didefinisikan di sini murni lewat CSS, tanpa ubah markup blade. */

section[data-background] {
    background: linear-gradient(90deg, #1e3a8a 0%, #1d4ed8 55%, #4338ca 100%);
}

.py-56 {
    padding-top: 56px;
    padding-bottom: 56px;
}

.pb-15 { padding-bottom: 15px; }
.pb-17 { padding-bottom: 17px; }
.pb-20 { padding-bottom: 20px; }
.pb-100 { padding-bottom: 100px; }
.pb-120 { padding-bottom: 120px; }

.fz-13 { font-size: 13px; }
.fz-16 { font-size: 16px; }
/* 40px (bukan 56px literal) supaya selaras skala judul hero PRATAMA di halaman lain */
.fz-56 { font-size: 40px; }

.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

.lh-1 { line-height: 1; }
.lh-30 { line-height: 1.6; }
.lh-64 { line-height: 1.3; }

.cg-12 { column-gap: 12px; }
.cg-17 { column-gap: 17px; }

.ul-ol {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .fz-56 {
        font-size: 28px;
    }
}

/* ------------------------- Tutor Booking -------------------------
   Halaman tutor booking (cari tutor, jadwal, kalender, search box)
   punya keluarga tombol/aksen sendiri yang hardcode ungu #754FFE di
   ~50 selector berbeda (style.css baris 5271-6548), sama sekali tidak
   lewat var(--color-1). Ditimpa berdasarkan properti (bukan per file
   asal) supaya tetap tepat walau tidak tahu persis properti asli tiap
   selector — properti yang tidak berlaku pada elemen itu diabaikan. */

.lms1-breadcrumb-section {
    background: linear-gradient(270deg, rgba(29, 78, 216, 0.06) 1.37%, rgba(67, 56, 202, 0.06) 86.05%);
}

.btn-purple-sm2,
.btn-purple-sm3,
.btn-purple-md,
.sm-search-btn,
.date-check-input:checked ~ .date-check-btn,
.form-checkbox-input:checked,
.lms-btn-secondary:hover,
.lms-btn-secondary:active,
.lms-progress .progress-bar,
.tutor-tab-link.active::after,
.lms1-sidebar-btn:hover,
.lms1-sidebar-btn:active,
.lms-slider-range-wrapper .ui-widget-header,
.lms1-video-player .plyr--full-ui input[type="range"],
.flat-picker-dropdown .flatpickr-day.endRange.nextMonthDay,
.btn-outline-purple-sm:hover,
.btn-outline-purple-sm:active,
.btn-outline-purple-sm2:hover,
.btn-outline-purple-sm2:active {
    background: var(--color-1) !important;
    border-color: var(--color-1) !important;
}

.btn-outline-purple-sm:hover,
.btn-outline-purple-sm:active,
.btn-outline-purple-sm2:hover,
.btn-outline-purple-sm2:active {
    color: #fff !important;
}

.btn-outline-purple-sm,
.btn-outline-purple-sm2,
.date-picker-input:hover,
.date-picker-input:focus,
.lms-form-control:hover,
.lms-form-control:focus,
.sm-search-input:hover,
.sm-search-input:focus,
.sm-search-input:has(~ .sm-search-btn:hover),
.lms-sm-btn-outline-secondary:hover,
.lms-sm-btn-outline-secondary:active,
.tutor-single-service:hover .lms-sm-btn-outline-secondary,
.icontext-link:hover,
.icontext-link2:hover,
.text-link:hover,
.svg-link:hover path,
.form-checkbox-input:checked ~ .form-checkbox-label,
.nav-pills .nav-link.tutor-tab-link.active,
.nav-pills .nav-link.tutor-tab-link.active path,
.nav-pills .nav-link.tutor-tab-link.svg-fill.active path,
.flat-picker-dropdown .flatpickr-months .flatpickr-next-month:hover svg path,
.btn-outline-purple-sm path,
.btn-outline-purple-sm2 path {
    color: var(--color-1);
    border-color: var(--color-1);
    fill: var(--color-1);
    stroke: var(--color-1);
}

/* ------------------------- FAQ ------------------------- */

/* Ikon chevron accordion terbuka hardcode hijau (angle-up-green-20.svg),
   theme ini sudah punya versi biru (angle-up-blue-20.svg), tinggal pakai. */
.qnaaccordion-two .accordion-button:not(.collapsed)::after,
.qnaaccordion-one .accordion-button:not(.collapsed)::after {
    background-image: url(../image/angle-up-blue-20.svg) !important;
}

/* ------------------------- Dashboard akun (My Courses, Wishlist, Purchase
   History, Customer Support, Message, Badges, My Bookings, dst.) -------------------------
   Sidebar kiri (.gradient-border) tingginya tetap (profile + ~11 menu item),
   sementara kolom kanan sering jauh lebih pendek (state kosong "No data
   found", atau grid isinya sedikit). Karena .row Bootstrap men-stretch kedua
   kolom ke tinggi yang sama, kolom kanan jadi punya banyak ruang kosong di
   bawah kontennya sebelum footer — itu sumber gap di screenshot. Diperbaiki
   dengan membuat kolom kanan jadi flex-column supaya konten terakhirnya
   (tabel/grid/empty-state) mengisi & center di sisa ruang, bukan menggantung
   di atas dengan white-space besar di bawahnya. */
.wishlist-content .col-lg-9 {
    display: flex;
    flex-direction: column;
}

.wishlist-content .col-lg-9 > *:last-child {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Panel yang punya sub-navigasi sendiri (tab pills di My Bookings, sidebar
   chat di Message) TIDAK boleh ikut di-center sebagai satu blok utuh --
   itu yang bikin tab "Live & Upcoming"/"Archive" dan kotak "Search email"
   menggantung di tengah alih-alih menempel di pojok kiri atas. Panel-nya
   dibiarkan menempel atas, baru konten aktif di dalamnya (.tab-pane yang
   tampil, atau kolom chat kanan) yang mengisi & center sisa ruang. */
.wishlist-content .col-lg-9 > *:last-child:has(> .nav-pills),
.wishlist-content .col-lg-9 > *:last-child.message-panel {
    justify-content: flex-start;
}

.wishlist-content .col-lg-9 > *:last-child:has(> .nav-pills) > .tab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wishlist-content .col-lg-9 > *:last-child:has(> .nav-pills) > .tab-content > .tab-pane.active {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wishlist-content .col-lg-9 > *:last-child.message-panel > .row {
    flex: 1;
}

/* .profile-banner-area (div gradient kosong) sudah dihapus dari semua
   halaman dashboard akun. custom_style.css masih memberi
   .profile-banner-area-container margin-top:-280px yang tadinya dipakai
   untuk menarik konten naik & overlap ke banner itu — tanpa banner,
   margin negatif itu menarik konten sampai nabrak header. Dinetralkan
   dan diganti padding atas/bawah biasa supaya section dashboard punya
   jarak yang wajar dari header & footer. */
.profile-banner-area-container {
    margin-top: 0 !important;
    padding-top: 32px;
    padding-bottom: 48px;
}

/* ------------------------- Cards ------------------------- */

.c-card,
.lms-1-card,
.blog-post1-inner,
.list-view-details1,
.course-card,
.chat-card {
    border-radius: 12px;
}

/* ------------------------- Pagination ------------------------- */

.page-link {
    border-radius: 10px !important;
}