/* ==========================================================================
   1. GLOBAL DESIGN TOKENS (Variabel Utama)
   ========================================================================== */
:root {
    /* Color Palette */
    --color-primary: #00A651; /* Hijau TEIN Utama */
    --color-primary-hover: #00833F;
    --color-bg-light: #F9FAFB;
    --color-card-bg: #FFFFFF;
    --color-heading: #0D0F0D;
    --color-body: #6B7280;
    --color-border: #E5E7EB;
    
    /* Radius & Spacing */
    --radius-card: 1.5rem; /* 24px - Untuk container besar */
    --radius-box: 0.75rem; /* 12px - Untuk card kecil/menengah */
    --radius-btn: 0.5rem;  /* 8px - Untuk tombol */
    
    /* Shadows */
    --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 20px 50px rgba(0, 166, 81, 0.08);
    --shadow-floating: 0 10px 25px rgba(0, 0, 0, 0.15);
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms ease;
}

/* ==========================================================================
   2. BASE TYPOGRAPHY & RESET
   ========================================================================== */
body {
    background-color: #FFFFFF; /* Sesuai preferensi style lama Anda */
    color: var(--color-body);
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .section-heading {
    color: var(--color-heading);
    font-weight: 900;
    letter-spacing: -0.025em;
}

/* Utilities lama diselaraskan dengan variabel global */
.text-tein-green { color: var(--color-primary); }
.text-tein-green-dark { color: var(--color-primary-hover); }
.bg-tein-green-light { background-color: #E9F8EF; }

/* ==========================================================================
   3. UNIVERSAL COMPONENTS
   ========================================================================== */
/* Kartu Global (Gabungan .card lama dan .card-global) */
.card, .card-global {
    background-color: var(--color-card-bg);
    border-radius: var(--radius-box);
    border: 1px solid var(--color-border);
    transition: transform var(--transition-base), background-color var(--transition-base), box-shadow var(--transition-base);
}

.card:hover, .card-global:hover {
    transform: translateY(-5px);
    background-color: var(--color-bg-light);
    box-shadow: var(--shadow-hover);
    border-color: var(--color-primary);
}

/* Badge Fitur */
.feature-badge {
    background-color: #DC2626;
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   4. BUTTON COMPONENTS
   ========================================================================== */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-btn);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.75rem;
    transition: background-color var(--transition-base), transform var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 166, 81, 0.2);
}

/* ==========================================================================
   5. SLIDER STYLES
   ========================================================================== */
.slider-container {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card); /* Modernisasi slider dengan sudut bulat */
}

.slides {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.slide {
    min-width: 100%;
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
}

.slide-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(13, 15, 13, 0.5); /* Menggunakan warna dark global */
}

.slide-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: white;
    padding: 0 1rem;
}

.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px); /* Modern Glassmorphism */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-btn);
    cursor: pointer;
    z-index: 20;
    font-size: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all var(--transition-base);
}

.slider-nav-btn:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.prev-btn { left: 1.5rem; }
.next-btn { right: 1.5rem; }

.slider-dots {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 20;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-base);
}

.dot.active {
    background-color: var(--color-primary);
    transform: scale(1.2);
}

/* ==========================================================================
   6. FLOATING ACTION BUTTONS
   FIX: ID di-rename supaya jelas fungsinya (whatsapp-float, instagram-float,
   back-to-top). Ini SATU-SATUNYA tempat yang boleh mengatur posisi/opacity
   tombol-tombol ini — JANGAN tambahkan class Tailwind (bottom-[...], opacity-0,
   dst) untuk elemen ini di halaman manapun, karena selector ID di sini SELALU
   menang atas class Tailwind (spesifisitas CSS), jadi class Tailwind cuma
   akan diabaikan dan bikin bingung saat debug.

   Urutan tumpuk dari bawah ke atas: WhatsApp -> Instagram -> Back to Top.
   Back to Top disembunyikan lewat class ".show" yang ditambah/dilepas oleh
   JavaScript saat scroll (lihat footer.php), BUKAN lewat Tailwind opacity-0.
   ========================================================================== */
#back-to-top, #whatsapp-float, #instagram-float {
    position: fixed;
    right: 2rem;
    z-index: 99;
    border: none;
    border-radius: var(--radius-btn);
    padding: 1rem;
    cursor: pointer;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-floating);
    transition: all var(--transition-base);
}

/* WhatsApp — paling bawah, selalu tampil */
#whatsapp-float {
    bottom: 2rem;
    background-color: #25D366;
    color: white;
}
#whatsapp-float:hover { transform: scale(1.1) translateY(-5px); }

/* Instagram — di atas WhatsApp, selalu tampil */
#instagram-float {
    bottom: 6rem;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: white;
}
#instagram-float:hover { transform: scale(1.1) translateY(-5px); }

/* Back to Top — paling atas, hanya tampil saat scroll > 300px (class .show) */
#back-to-top {
    bottom: 10rem;
    background-color: var(--color-heading);
    color: white;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}
#back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#back-to-top:hover { background-color: var(--color-primary); }

/* ==========================================================================
   7. PAGE SPECIFIC STYLES
   ========================================================================== */
/* Page Banners */
.page-banner {
    position: relative;
    height: 350px; /* Diperbesar sedikit agar lebih proporsional */
    background-image: url('../images/page-banner.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.page-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(13, 15, 13, 0.8), rgba(13, 15, 13, 0.4));
}

.page-banner-content {
    position: relative;
    z-index: 10;
    padding: 0 1rem;
}

/* Custom Scrollbar untuk Sidebar */
#category-sidebar::-webkit-scrollbar { width: 6px; }
#category-sidebar::-webkit-scrollbar-track { background: var(--color-bg-light); border-radius: 8px; }
#category-sidebar::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 8px; }
#category-sidebar::-webkit-scrollbar-thumb:hover { background: var(--color-primary); }

/* Dealer Map */
.dealer-map {
    height: 250px;
    width: 100%;
    border-radius: var(--radius-box);
    overflow: hidden;
}

/* ==========================================================================
   8. MEDIA QUERIES (RESPONSIVE AJUSTMENTS)
   ========================================================================== */
@media (max-width: 768px) {
    #back-to-top, #whatsapp-float, #instagram-float { right: 1rem; padding: 0.75rem; }
    #whatsapp-float { bottom: 1rem; }
    #instagram-float { bottom: 5rem; }
    #back-to-top { bottom: 9rem; }

    .slide-content h1 { font-size: 2.5rem; }
    .slide-content p { font-size: 0.9rem; }
}

@media (max-width: 640px) {
    .slider-container { height: 350px; border-radius: 0; }
    .slide-content h1 { font-size: 2rem; }
}