/* Custom Global Setting */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #121212;
}

/* 1. Efek Glassmorphism Premium */
.glass-effect {
    background: rgba(18, 18, 18, 0.7);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.glass-card {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
}

/* 2. Efek Latar Belakang Mural Abstrak / Urban */
.bg-mural {
    background-image: linear-gradient(rgba(18, 18, 18, 0.3), rgba(18, 18, 18, 0.9)), 
    url('https://images.unsplash.com/photo-1579546929518-9e396f3cc809?q=80&w=1200'); /* Gunakan pola tekstur abstrak/mural disini jika ada lokal file */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* 3. Penataan Scroll Smooth Navigasi */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

/* ==========================================================================
   INJECT STYLE: Halaman Tentang Kami (About Us)
   ========================================================================== */

/* Background Mural Khusus Banner Halaman Tentang Kami */
.bg-mural-about {
    background-image: linear-gradient(rgba(18, 18, 18, 0.4), rgba(18, 18, 18, 1)), 
                      url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?q=80&w=1200'); /* Tekstur kafe bernuansa industrial mural */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Class pembantu untuk Trigger Efek Smooth Masuk Konten JavaScript */
.about-step {
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.about-step.show-animated {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ==========================================================================
   INJECT STYLE: Halaman Menu Katalog
   ========================================================================== */

/* Background Mural Khusus Banner Halaman Menu */
.bg-mural-menu {
    background-image: linear-gradient(rgba(18, 18, 18, 0.5), rgba(18, 18, 18, 1)), 
                      url('https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=1200'); /* Tekstur kopi premium */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Kustomisasi Tombol Filter Saat Aktif (Active State) */
.filter-btn.active-filter {
    background-color: #f59e0b; /* Warna Amber-500 */
    color: #121212;
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
}

/* Animasi Transisi Halus Saat Item Menu Disembunyikan/Ditampilkan */
.menu-item-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-item-card.hide-item {
    opacity: 0;
    transform: scale(0.9);
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
}

/* ==========================================================================
   INJECT STYLE: Halaman Galeri Foto Modern
   ========================================================================== */

/* Background Mural Khusus Banner Halaman Galeri */
.bg-mural-gallery {
    background-image: linear-gradient(rgba(18, 18, 18, 0.5), rgba(18, 18, 18, 1)), 
                      url('https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?q=80&w=1200'); /* Tekstur interaksi urban kafe */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Kustomisasi Tombol Filter Galeri Aktif */
.gallery-filter-btn.active-gallery-filter {
    background-color: #f59e0b;
    color: #121212;
    box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.3);
    border-color: #f59e0b;
}

/* Transisi Item Grid Galeri */
.gallery-item {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item.hide-gallery-item {
    opacity: 0;
    transform: scale(0.85);
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
}

/* ==========================================================================
   INJECT STYLE: Halaman Media Blog / Jurnal
   ========================================================================== */

/* Background Mural Khusus Banner Halaman Blog */
.bg-mural-blog {
    background-image: linear-gradient(rgba(18, 18, 18, 0.5), rgba(18, 18, 18, 1)), 
                      url('https://images.unsplash.com/photo-1511920170033-f8396924c348?q=80&w=1200'); /* Tekstur koran/kopi bernuansa literasi */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Animasi khusus kartu blog saat pertama kali dimuat */
.blog-card {
    opacity: 0;
    transform: translateY(15px);
    animation: blogFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes blogFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   INJECT STYLE: Halaman Kontak & Validasi Form
   ========================================================================== */

/* Background Mural Khusus Banner Halaman Kontak */
.bg-mural-contact {
    background-image: linear-gradient(rgba(18, 18, 18, 0.5), rgba(18, 18, 18, 1)), 
                      url('https://images.unsplash.com/photo-1461023058943-07fcbe16d735?q=80&w=1200'); /* Tekstur biji kopi makro */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Kustomisasi Efek Status Alert Box Form */
.alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
    color: #10b981; /* Hijau Sukses */
}

.alert-error {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444; /* Merah Gagal */
}

/* ==========================================================================
   INJECT STYLE: Halaman Autentikasi / Login Administrator
   ========================================================================== */

/* Background Mural & Grid Khusus untuk Portal Admin */
.bg-mural-admin {
    background-image: linear-gradient(rgba(15, 15, 15, 0.75), rgba(15, 15, 15, 0.95)), 
                      url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=1200'); /* Tekstur gelap ambient */
    background-size: cover;
    background-position: center;
}

/* Glassmorphism Spesifik untuk Box Login (Sedikit lebih padat buramnya demi keamanan privasi data) */
.glass-card-admin {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(24px) saturate(130%);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
}

/* ==========================================================================
   INJECT STYLE: Dashboard Administrator & Sidebar Grid Navigasi
   ========================================================================== */

/* Latar Belakang Kamuflase Panel Admin */
.bg-mural-admin-panel {
    background-image: linear-gradient(rgba(12, 12, 12, 0.95), rgba(12, 12, 12, 0.98)), 
                      url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=1200');
    background-size: cover;
    background-attachment: fixed;
}

/* Kustomisasi Tautan Menu Admin Terpilih (Active State) */
.admin-menu-link.active-admin-menu {
    background-color: #f59e0b; /* Amber 500 */
    color: #121212 !important;
    box-shadow: 0 4px 15px -3px rgba(245, 158, 11, 0.4);
}

.admin-menu-link:hover:not(.active-admin-menu) {
    background-color: rgba(255, 255, 255, 0.04);
    transform: translateX(4px);
}

/* ==========================================================================
   INJECT STYLE: Modul Kelola Konten CRUD Menu Kedai
   ========================================================================== */

/* Lapisan Khusus Box Form Modal Glassmorphism */
.glass-modal {
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* Modifikasi tabel agar mendukung baris yang rapi */
table th {
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ==========================================================================
   INJECT STYLE: Modul Kelola Konten Blog & Jurnal
   ========================================================================== */

/* Utilitas kustom pemotong teks multi-baris jika tailwind standar belum termuat penuh */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}

/* ==========================================================================
   INJECT STYLE: Modul Kelola Konten Galeri Foto
   ========================================================================== */

/* Animasi bayangan lembut khusus pada baris tabel ber-thumbnail */
table tbody tr img {
    will-change: transform;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   INJECT STYLE: Modul Kelola Konten Tim / Barista
   ========================================================================== */

/* Efek transisi halus khusus pada tombol manipulasi tabel */
table tbody tr button {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   INJECT STYLE: Modul Konfigurasi Umum Identitas Website
   ========================================================================== */

/* Efek transisi halus dan pembatasan gambar pratinjau media di konfigurasi */
#preview-logo, #preview-favicon {
    will-change: transform;
    transition: transform 0.3s ease;
}

#preview-logo:hover, #preview-favicon:hover {
    transform: scale(1.08);
}

/* ==========================================================================
   INJECT STYLE: Modul Konfigurasi Profil & Filosofi Kedai
   ========================================================================== */

/* Transisi halus khusus fokus area pengisian paragraf narasi */
textarea.focus-active-glow {
    border-color: rgba(245, 158, 11, 0.4) !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.05);
}

/* ==========================================================================
   INJECT STYLE: Modul Konfigurasi Kontak & Peta Lokasi
   ========================================================================== */

/* Memberikan transisi kehalusan efek filter map saat kursor diarahkan */
#preview-map {
    transition: all 0.5s ease;
}

#preview-map:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ==========================================================================
   INJECT STYLE: Modul Konfigurasi Jaringan Sosial Media Kedai
   ========================================================================== */

/* Transisi pergeseran ikon emoji indikator sosial media saat input aktif */
.relative flex items-center span {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
input:focus + span, .relative flex items-center input:focus ~ span {
    transform: scale(1.15) rotate(5deg);
}

/* ==========================================================================
   INJECT STYLE: Modul Konfigurasi Akun & Username Administrator
   ========================================================================== */

/* Transisi visual khusus masukan password konfirmasi keamanan berkilau */
#config-confirm-password:focus {
    background-color: rgba(245, 158, 11, 0.08);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.05);
}

/* ==========================================================================
   INJECT STYLE: Modul Konfigurasi Sistem Keamanan Kata Sandi
   ========================================================================== */

/* Kelas bantu untuk memberikan border merah instan via JS jika konfirmasi password tidak sesuai */
.border-danger-glow {
    border-color: rgba(239, 68, 68, 0.4) !important;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.1);
}

/* Kelas bantu untuk memberikan border hijau instan via JS jika konfirmasi password sesuai */
.border-success-glow {
    border-color: rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.1);
}

/* ==========================================================================
   INJECT STYLE: Modul Kelola Konten Jam Operasional Kedai
   ========================================================================== */

/* Memberikan tracking jarak tipis pada teks jam agar bergaya arsitektur digital */
table tbody tr font-mono {
    letter-spacing: 0.02em;
}

/* ==========================================================================
   INJECT STYLE: Modul Kelola Konten FAQ (Tanya Jawab)
   ========================================================================== */

/* Optimalisasi render teks baris paragraf agar tidak merusak layout tabel */
table tbody tr max-w-md p {
    word-break: break-word;
}

/* ==========================================================================
   INJECT STYLE: Modul Kotak Pesan Masuk (Inbox)
   ========================================================================== */

/* Kustomisasi scrollbar internal di dalam kotak detail pesan agar tetap minimalis */
#modal-msg-pesan::-webkit-scrollbar {
    width: 4px;
}
#modal-msg-pesan::-webkit-scrollbar-track {
    background: transparent;
}
#modal-msg-pesan::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.3);
    border-radius: 10px;
}