/* ========================================================
   1. FONT & GLOBAL VARIABLES
   ======================================================== */
   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

   :root {
       --primary-blue: #1e3a8a;
       --secondary-blue: #3b82f6;
       --accent-yellow: #f59e0b;
       --text-gray: #64748b;
   }
   
   /* ========================================================
      SCROLLBAR MODERN & RAPI (Tipis & Elegan)
      ======================================================== */
   ::-webkit-scrollbar { width: 6px; height: 6px; }
   ::-webkit-scrollbar-track { background: transparent; }
   ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
   ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
   
   /* ========================================================
      2. DASHBOARD LAYOUT (SIDEBAR TERANG & MAIN CONTENT)
      ======================================================== */
   body:not(.bg-light):not(.auth-bg) { 
       margin: 0; 
       font-family: 'Inter', sans-serif; 
       background-color: #f8fafc; /* Latar belakang area konten (abu-abu sangat muda) */
       color: #334155; 
       display: flex; 
       height: 100vh; 
       overflow: hidden; 
   }
   
   /* SIDEBAR WARNA PUTIH */
   .sidebar { 
       width: 260px; 
       background: #ffffff; /* Latar belakang sidebar putih bersih */
       color: #334155; 
       display: flex; 
       flex-direction: column; 
       flex-shrink: 0; 
       box-shadow: 2px 0 15px rgba(0,0,0,0.03); /* Bayangan sangat halus */
       border-right: 1px solid #f1f5f9; /* Garis pembatas tipis */
       z-index: 20; 
   }
   
   /* HEADER SIDEBAR (LOGO) */
   .sidebar-header { 
       padding: 25px 20px; 
       font-size: 1.25rem; 
       font-weight: 800; 
       border-bottom: 1px solid #f1f5f9; 
       display: flex; 
       align-items: center; 
       gap: 10px; 
       letter-spacing: 0.5px; 
       color: var(--primary-blue); /* Teks Laporan warna biru */
   }
   .sidebar-header span { color: var(--accent-yellow); } /* Teks Kinerja warna kuning */
   
   /* MENU SIDEBAR */
   .sidebar-menu { flex: 1; padding: 15px 10px; overflow-y: auto; }
   .sidebar-menu a { 
       display: flex;           /* Menggunakan flex untuk ikon dan teks */
       align-items: center; 
       gap: 12px;               /* Jarak ikon dan teks */
       padding: 12px 15px; 
       margin-bottom: 4px; 
       color: #64748b; /* Warna teks menu abu-abu gelap */
       text-decoration: none; 
       font-size: 14px; 
       font-weight: 600; 
       border-radius: 8px; 
       transition: all 0.3s ease; 
   }
   .sidebar-menu a i { font-size: 1.1rem; }
   
   /* EFEK SAAT MOUSE DI ARAHKAN (HOVER) */
   .sidebar-menu a:hover:not(.parent-menu) { 
       background-color: #f8fafc; 
       color: var(--secondary-blue); 
       transform: translateX(4px); 
   }
   
   /* EFEK SAAT MENU AKTIF */
   .sidebar-menu a.active { 
       background-color: var(--secondary-blue); /* Biru menyala */
       color: #ffffff; /* Teks putih */
       font-weight: 600; 
       box-shadow: 0 4px 6px rgba(59,130,246,0.2); 
   }
   
   /* LABEL KATEGORI MENU */
   .menu-label { 
       padding: 15px 15px 5px 15px; 
       color: #94a3b8; 
       font-size: 11px; 
       font-weight: 800; 
       text-transform: uppercase; 
       letter-spacing: 1px; 
   }
   
   /* Menu Dropdown (Collapse) */
   .parent-menu { justify-content: space-between; margin-top: 10px; background: transparent !important; }
   .chevron { transition: transform 0.3s ease; font-size: 0.9rem; }
   .parent-menu[aria-expanded="true"] .chevron { transform: rotate(180deg); color: var(--primary-blue); }
   .submenu { padding-left: 5px; margin-left: 20px; border-left: 2px solid #e2e8f0; margin-bottom: 10px; }
   .submenu a { padding: 8px 15px; font-size: 13.5px; }
   
   /* FOOTER SIDEBAR (PROFIL USER) */
   .sidebar-footer { 
       padding: 15px 20px; 
       background-color: #f8fafc; 
       border-top: 1px solid #f1f5f9; 
       color: #475569;
       margin-top: auto;
   }
   .sidebar-footer strong { color: #1e293b !important; } /* Teks nama user jadi gelap */
   
   .btn-logout { 
       width: 100%; 
       padding: 10px; 
       margin-top: 12px; 
       background-color: rgba(239, 68, 68, 0.1); 
       color: #ef4444; 
       border: 1px solid rgba(239, 68, 68, 0.2); 
       border-radius: 6px; 
       cursor: pointer; 
       font-weight: 600; 
       font-size: 13px;
       transition: 0.2s; 
   }
   .btn-logout:hover { background-color: #ef4444; color: white; }
   
   /* AREA KONTEN UTAMA (KANAN) */
   .main-content { flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
   .top-header { background-color: rgba(255,255,255,0.9); backdrop-filter: blur(10px); padding: 15px 25px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); font-weight: 600; color: #1e293b; position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; }
   .content-area { padding: 25px; }
   
   /* ========================================================
      3. LANDING PAGE & OTHERS
      ======================================================== */
   
   /* --- PERBAIKAN LOGO & TEKS BERSAMASAMA --- */
   .navbar-brand-container {
       display: flex;
       align-items: center;
       gap: 10px;
       text-decoration: none; /* Mencegah garis bawah jika dibungkus link */
       pointer-events: none; /* MEMBUAT TEKS/LOGO TIDAK BISA DIKLIK */
   }
   .navbar-logo-img {
       height: 40px; /* Sesuaikan ukuran tinggi logo */
       width: auto;
   }
   .navbar-brand-text { 
       font-weight: 800; 
       color: var(--primary-blue); 
       font-size: 1.5rem; 
       margin: 0;
   }
   .navbar-brand-text span { 
       color: var(--accent-yellow); 
   }
   
   /* --- PERBAIKAN TOMBOL KUNING (Lebih Menonjol saat Hover) --- */
   .btn-yellow { 
       background-color: var(--accent-yellow); 
       color: white !important; /* Memaksa teks putih */
       font-weight: 600; 
       padding: 12px 30px; 
       border-radius: 30px; 
       transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Efek transisi lebih halus */
       border: none; 
       display: inline-block;
       box-shadow: 0 4px 6px rgba(245, 158, 11, 0.2); /* Bayangan awal */
   }
   .btn-yellow:hover { 
       background-color: #d97706; 
       color: white !important; 
       transform: translateY(-4px) scale(1.02); /* Bergerak ke atas dan membesar 2% */
       box-shadow: 0 10px 20px rgba(245, 158, 11, 0.4); /* Bayangan membesar */
   }

   /* Tombol Outline */
   .btn-outline-white { border: 2px solid white; color: white !important; font-weight: 600; padding: 10px 30px; border-radius: 30px; transition: 0.3s; display: inline-block;}
   .btn-outline-white:hover { background-color: white; color: var(--primary-blue) !important; transform: translateY(-3px); }
   
   /* =============================================
      HERO SECTION - PREMIUM
      ============================================= */
   .hero-section {
       background: linear-gradient(135deg, rgba(15,23,60,0.97), rgba(30,58,138,0.90), rgba(59,130,246,0.80)),
                   url('../images/Menara_Pandang_Banjarmasin.jpg') center/cover;
       padding: 160px 0 130px;
       color: white;
       position: relative;
       overflow: hidden;
   }
   .hero-section::before {
       content: '';
       position: absolute;
       top: -50%;
       left: -50%;
       width: 200%;
       height: 200%;
       background: radial-gradient(ellipse at 60% 40%, rgba(59,130,246,0.15) 0%, transparent 60%),
                   radial-gradient(ellipse at 20% 80%, rgba(245,158,11,0.08) 0%, transparent 50%);
       animation: ambientMove 12s ease-in-out infinite alternate;
   }
   @keyframes ambientMove {
       0% { transform: translate(0, 0); }
       100% { transform: translate(3%, 3%); }
   }
   .hero-section .container { position: relative; z-index: 2; }
   .hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -1px; }
   .hero-title .highlight-text {
       background: linear-gradient(90deg, #f59e0b, #fbbf24);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }
   .hero-badge {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: rgba(255,255,255,0.1);
       border: 1px solid rgba(255,255,255,0.2);
       backdrop-filter: blur(10px);
       padding: 8px 18px;
       border-radius: 50px;
       font-size: 0.85rem;
       font-weight: 600;
       color: #bfdbfe;
       margin-bottom: 24px;
   }
   .hero-badge .dot {
       width: 8px; height: 8px;
       background: #4ade80;
       border-radius: 50%;
       animation: pulse-dot 2s infinite;
   }
   @keyframes pulse-dot {
       0%, 100% { opacity: 1; transform: scale(1); }
       50% { opacity: 0.5; transform: scale(1.4); }
   }

   /* =============================================
      FEATURE CARDS - PREMIUM
      ============================================= */
   .features-section { background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%); }
   .section-badge {
       display: inline-block;
       background: linear-gradient(135deg, #eff6ff, #dbeafe);
       color: #1e3a8a;
       font-size: 0.8rem;
       font-weight: 700;
       padding: 6px 16px;
       border-radius: 50px;
       letter-spacing: 0.5px;
       text-transform: uppercase;
       margin-bottom: 12px;
   }
   .hover-lift {
       transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
       border-radius: 20px;
       border: 1px solid #f1f5f9;
       box-shadow: 0 4px 20px rgba(0,0,0,0.05);
       background: #ffffff;
   }
   .hover-lift:hover {
       transform: translateY(-12px);
       box-shadow: 0 25px 50px rgba(30,58,138,0.12) !important;
       border-color: transparent;
       background: linear-gradient(135deg, #ffffff, #f0f7ff);
   }
   .hover-lift:hover .feature-icon-box {
       transform: scale(1.15) rotate(-5deg);
       background: linear-gradient(135deg, #1e3a8a, #3b82f6) !important;
       color: #ffffff !important;
   }
   .feature-icon-box {
       width: 68px; height: 68px;
       display: flex; align-items: center; justify-content: center;
       background-color: #eff6ff;
       border-radius: 18px;
       font-size: 1.8rem;
       margin-bottom: 18px;
       color: var(--primary-blue);
       transition: all 0.35s ease;
   }

   /* =============================================
      STATS SECTION
      ============================================= */
   .stats-section {
       background: linear-gradient(135deg, #0f172a, #1e3a8a);
       padding: 60px 0;
       position: relative;
       overflow: hidden;
   }
   .stats-section::before {
       content: '';
       position: absolute; inset: 0;
       background: radial-gradient(ellipse at 30% 50%, rgba(59,130,246,0.15) 0%, transparent 70%);
   }
   .stat-card {
       text-align: center;
       padding: 30px 20px;
       border-radius: 16px;
       background: rgba(255,255,255,0.05);
       border: 1px solid rgba(255,255,255,0.1);
       backdrop-filter: blur(10px);
       transition: all 0.3s ease;
   }
   .stat-card:hover {
       background: rgba(255,255,255,0.08);
       transform: translateY(-5px);
       border-color: rgba(245,158,11,0.4);
   }
   .stat-number {
       font-size: 2.5rem;
       font-weight: 800;
       background: linear-gradient(135deg, #f59e0b, #fbbf24);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       display: block;
       line-height: 1;
       margin-bottom: 8px;
   }
   .stat-label {
       color: #94a3b8;
       font-size: 0.9rem;
       font-weight: 500;
   }

   /* =============================================
      ANALISIS DOKUMEN HIGHLIGHT SECTION
      ============================================= */
   .analisis-section {
       background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
       padding: 100px 0;
       position: relative;
       overflow: hidden;
   }
   .analisis-section::after {
       content: '';
       position: absolute;
       top: 0; right: 0;
       width: 500px; height: 500px;
       background: radial-gradient(ellipse, rgba(59,130,246,0.08) 0%, transparent 70%);
       pointer-events: none;
   }
   .feature-badge-premium {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       background: linear-gradient(135deg, #fef3c7, #fde68a);
       color: #92400e;
       font-size: 0.8rem;
       font-weight: 800;
       padding: 7px 18px;
       border-radius: 50px;
       letter-spacing: 0.5px;
       text-transform: uppercase;
       margin-bottom: 16px;
       border: 1px solid rgba(245,158,11,0.3);
   }
   .feature-badge-premium i { color: #f59e0b; }
   .benefit-list {
       list-style: none;
       padding: 0;
       margin: 0;
   }
   .benefit-list li {
       display: flex;
       align-items: flex-start;
       gap: 14px;
       padding: 14px 0;
       border-bottom: 1px solid #f1f5f9;
       font-size: 0.95rem;
       color: #475569;
   }
   .benefit-list li:last-child { border-bottom: none; }
   .benefit-icon {
       width: 36px; height: 36px;
       min-width: 36px;
       background: linear-gradient(135deg, #1e3a8a, #3b82f6);
       border-radius: 10px;
       display: flex; align-items: center; justify-content: center;
       color: white;
       font-size: 1rem;
   }
   .benefit-list li strong { color: #1e293b; display: block; margin-bottom: 3px; }

   /* Mockup Dokumen */
   .doc-mockup-wrapper {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   .doc-mockup-bg {
       position: absolute;
       width: 320px; height: 320px;
       background: radial-gradient(ellipse, rgba(59,130,246,0.12) 0%, transparent 70%);
       border-radius: 50%;
       animation: floatBg 6s ease-in-out infinite alternate;
   }
   @keyframes floatBg {
       0% { transform: scale(1); opacity: 0.7; }
       100% { transform: scale(1.15); opacity: 1; }
   }
   .doc-mockup {
       position: relative;
       width: 100%;
       max-width: 420px;
       background: #ffffff;
       border-radius: 20px;
       box-shadow: 0 30px 80px rgba(30,58,138,0.18), 0 0 0 1px rgba(30,58,138,0.06);
       overflow: hidden;
       animation: floatCard 6s ease-in-out infinite alternate;
   }
   @keyframes floatCard {
       0% { transform: translateY(0px) rotate(-1deg); }
       100% { transform: translateY(-14px) rotate(0.5deg); }
   }
   .doc-mockup-header {
       background: linear-gradient(135deg, #1e3a8a, #2563eb);
       padding: 16px 20px;
       display: flex;
       align-items: center;
       gap: 12px;
   }
   .doc-mockup-header .dot-red, .doc-mockup-header .dot-yellow, .doc-mockup-header .dot-green {
       width: 12px; height: 12px; border-radius: 50%;
   }
   .doc-mockup-header .dot-red { background: #ef4444; }
   .doc-mockup-header .dot-yellow { background: #f59e0b; }
   .doc-mockup-header .dot-green { background: #22c55e; }
   .doc-mockup-header .doc-title {
       color: rgba(255,255,255,0.85);
       font-size: 0.8rem;
       font-weight: 600;
       margin-left: 4px;
   }
   .doc-mockup-body { padding: 20px; }
   /* Alur Langkah Analisis Dokumen (Step 1-2-3) */
   .doc-step-row {
       display: flex;
       align-items: flex-start;
       gap: 12px;
       padding: 12px 0;
       border-bottom: 1px solid #f1f5f9;
   }
   .doc-step-row:last-of-type { border-bottom: none; }
   .doc-step-num {
       width: 30px; height: 30px; min-width: 30px;
       border-radius: 50%;
       background: #e2e8f0;
       color: #64748b;
       font-size: 0.8rem;
       font-weight: 800;
       display: flex; align-items: center; justify-content: center;
       transition: all 0.3s;
   }
   .doc-step-num.active {
       background: linear-gradient(135deg, #1e3a8a, #3b82f6);
       color: white;
       box-shadow: 0 4px 12px rgba(30,58,138,0.3);
   }
   .doc-step-content { flex: 1; }
   .doc-step-content strong { display: block; font-size: 0.82rem; color: #1e293b; margin-bottom: 2px; }
   .doc-step-content span { font-size: 0.75rem; color: #94a3b8; }
   .doc-result-row {
       display: flex; align-items: center; gap: 10px;
       padding: 10px 12px;
       background: #f8fafc;
       border-radius: 10px;
       margin-bottom: 10px;
       font-size: 0.82rem;
   }
   .doc-result-row .result-icon {
       width: 32px; height: 32px; min-width: 32px;
       border-radius: 8px;
       display: flex; align-items: center; justify-content: center;
       font-size: 0.9rem;
   }
   .result-icon.blue { background: #eff6ff; color: #1e3a8a; }
   .result-icon.green { background: #f0fdf4; color: #16a34a; }
   .result-icon.yellow { background: #fffbeb; color: #b45309; }
   .doc-result-row .result-text { flex: 1; }
   .doc-result-row .result-text strong { display: block; color: #1e293b; font-size: 0.8rem; }
   .doc-result-row .result-text span { color: #94a3b8; font-size: 0.75rem; }
   .progress-bar-container {
       background: #e2e8f0;
       border-radius: 50px;
       height: 5px;
       overflow: hidden;
       margin-top: 4px;
   }
   .progress-bar-fill {
       height: 100%;
       border-radius: 50px;
       background: linear-gradient(90deg, #1e3a8a, #3b82f6);
       animation: fillBar 2.5s ease-in-out infinite alternate;
   }
   @keyframes fillBar {
       0% { width: 30%; }
       100% { width: 95%; }
   }
   .progress-bar-fill.green-fill { background: linear-gradient(90deg, #16a34a, #4ade80); animation: fillBarGreen 3s ease-in-out infinite alternate; }
   @keyframes fillBarGreen {
       0% { width: 70%; }
       100% { width: 100%; }
   }
   .doc-badge-row {
       display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
   }
   .doc-badge {
       font-size: 0.72rem; font-weight: 700; padding: 5px 12px;
       border-radius: 50px;
   }
   .doc-badge.success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
   .doc-badge.info { background: #eff6ff; color: #1e3a8a; border: 1px solid #bfdbfe; }
   .doc-badge.warning { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }

   /* Kartu floating mini */
   .floating-mini-card {
       position: absolute;
       background: white;
       border-radius: 14px;
       padding: 12px 16px;
       box-shadow: 0 10px 40px rgba(0,0,0,0.12);
       font-size: 0.8rem;
       display: flex;
       align-items: center;
       gap: 10px;
       border: 1px solid #f1f5f9;
   }
   .floating-mini-card.card-top {
       top: -20px; right: -30px;
       animation: floatMini1 4s ease-in-out infinite alternate;
   }
   .floating-mini-card.card-bottom {
       bottom: 20px; left: -30px;
       animation: floatMini2 4.5s ease-in-out infinite alternate;
   }
   @keyframes floatMini1 {
       0% { transform: translateY(0); }
       100% { transform: translateY(-10px); }
   }
   @keyframes floatMini2 {
       0% { transform: translateY(0); }
       100% { transform: translateY(8px); }
   }
   .mini-icon {
       width: 32px; height: 32px;
       border-radius: 8px;
       display: flex; align-items: center; justify-content: center;
       font-size: 1rem;
   }
   .mini-icon.success { background: #f0fdf4; color: #16a34a; }
   .mini-icon.blue { background: #eff6ff; color: #1e3a8a; }
   .floating-mini-card strong { display: block; color: #1e293b; font-size: 0.8rem; }
   .floating-mini-card span { color: #94a3b8; font-size: 0.72rem; }

   /* =============================================
      PEMKO SECTION
      ============================================= */
   .pemko-img-box { background: url('../images/Menara_Pandang_Banjarmasin.jpg') center/cover; min-height: 420px; border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
   
   /* ========================================================
      4. GLOBAL COMPONENT
      ======================================================== */
   input, select, textarea { border: 1px solid #cbd5e1 !important; border-radius: 6px !important; padding: 10px 12px !important; }
   .btn { font-weight: 600 !important; border-radius: 6px !important; padding: 8px 16px !important; }