/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    --primary: #00a8ff;
    --primary-dark: #0062cc;
    --accent: #2ecc71; /* Warna hijau WA */
    --dark-bg: #060b18; /* Background utama */
    --glass: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --neon-shadow: 0 0 15px rgba(0, 168, 255, 0.5); /* Efek cahaya */
    --text-main: #e2e8f0;
    --text-muted: #cbd5e1;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
    
body {
    text-align: center;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
    padding-top: 70px; /* Sudah disesuaikan agar lebih rapat */
    color: var(--text-main);
    overflow-x: hidden;
    background-color: #060b18; /* Biru Gelap Luar Angkasa */
        background-image: 
            url('img/world-map.png');
        background-attachment: fixed;
        position: relative;
        overflow-x: hidden;
}

/* Menambahkan Elemen Cahaya Laser yang Berjalan */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1.5px;
    background: linear-gradient(90deg, 
        transparent, 
        #2ecc71, /* Hijau */
        #ffffff, /* Putih */
        #00a8ff, /* Biru */
        transparent);
    animation: internetFlow 5s linear infinite;
    z-index: -1;
    opacity: 0.6;
}

/* Animasi Cahaya Tambahan (Acak) */
body::after {
    content: "";
    position: fixed;
    top: -100%;
    right: 10%;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, var(--accent), transparent);
    animation: dataStreamVertical 6s linear infinite;
    z-index: -1;
    opacity: 0.3;
}

/* CSS KHUSUS UNTUK BACKGROUND CANVAS */

/* =========================================
   BACKGROUND ANIMATION (CANVAS)
   ========================================= */
#tech-bg {
    position: fixed; /* Agar tetap diam saat discroll */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* PENTING: Agar ada di BELAKANG konten */
    pointer-events: none; /* Agar klik tembus ke tombol/link */
    background: transparent; /* Latar transparan */
}


/* Animasi Cahaya Laser Mengalir (Fiber Optic) */
.laser-line {
    position: fixed;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, #2ecc71, #ffffff, #00a8ff, transparent);
    z-index: -3;
    opacity: 0.5;
    left: -100%;
}

/* Posisi laser yang berbeda-beda */
.l1 { top: 20%; animation: flow 6s linear infinite; }
.l2 { top: 50%; animation: flow 8s linear infinite 2s; }
.l3 { top: 80%; animation: flow 10s linear infinite 1s; }

@keyframes flow {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Animasi Pergerakan Cahaya */
@keyframes internetFlow {
    0% { left: -100%; top: 10%; }
    100% { left: 100%; top: 15%; }
}

@keyframes verticalFlow {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* Keyframes Cahaya Berjalan */
@keyframes dataStream {
    0% { left: -100%; top: 20%; }
    100% { left: 100%; top: 25%; }
}

@keyframes dataStreamVertical {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* Tambahkan Dot Cahaya Statis seperti Node Internet */
.bg-nodes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--primary) 1px, transparent 1px);
    background-size: 100px 100px;
    opacity: 0.1;
    z-index: -4;
    pointer-events: none;
}

.bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 1. Tambahkan warna dasar gelap (biru tua khas JDS-NET) */
    background-color: #060b18; 
    /* 2. Gunakan multiple background: pola bintang di atas warna gelap */
    background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
    /* 3. Atur agar gambar tidak terlalu transparan secara keseluruhan */
    opacity: 0.8; 
    pointer-events: none;
    z-index: -5;
}

/* Container untuk tulisan agar presisi */
.welcome-container {
    padding: 20px;
    margin-top: 10px;
}

.welcome-container-top {
    position: absolute;
    top: 20px;      /* Jarak dari atas */
    left: 70px;     /* Posisi tetap dari kiri, tidak persentase */
    right: 10px;    /* Batas kanan agar tidak terpotong */
    z-index: 1002;  /* Pastikan di atas overlay video */
    pointer-events: none; /* Agar tidak menghalangi klik */
}

/* Animasi Tulisan JDS-NET SUKAMULYA */
.moving-text {
    font-size: 1.2rem; /* Ukuran teks besar */
    font-weight: 800;
    margin: 0;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: uppercase;
    
    /* Membuat Gradasi Biru, Hijau, Putih */
    background: linear-gradient(
        to right, 
        #00a8ff 0%,   /* Biru */
        #2ecc71 25%,  /* Hijau */
        #ffffff 50%,  /* Putih */
        #2ecc71 75%,  /* Hijau */
        #00a8ff 100%  /* Biru Kembali */
    );
    
    /* Ukuran background diperlebar untuk animasi */
    background-size: 200% auto;
    
    /* Memotong warna agar hanya muncul di teks */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Menjalankan Animasi */
    animation: shine 3s linear infinite;
    
    /* Efek Glow Neon di sekitar teks */
    text-shadow: 0 0 10px rgba(0,0,0,0.5); /* Agar teks terbaca jelas di atas video */
}

/* Keyframes untuk menggerakkan gradasi */
@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* =========================================
   ANIMASI NOTIFIKASI
   ========================================= */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

@keyframes ring {
    0%, 100% {
        transform: rotate(0deg);
    }
    10%, 30% {
        transform: rotate(-10deg);
    }
    20%, 40% {
        transform: rotate(10deg);
    }
}

/* =========================================
   2. TYPOGRAPHY & BUTTONS
   ========================================= */
h1, h2, h3, h4, h5, h6, p, span {
    text-align: center;
    justify-content: center;
    margin-top: 0;
    color: white;
}

a {
    text-decoration: none;
    transition: 0.3s;
}

/* Efek Teks Bercahaya */
.glow-text {
    color: #fff;
    text-shadow: 0 0 10px var(--primary), 0 0 20px rgba(0, 168, 255, 0.4);
}

/* Button Styles */
.btn-primary, .btn-wa, .btn-submit, .btn-cta {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 168, 255, 0.3);
    cursor: pointer;
}

.btn-primary:hover, .btn-wa:hover, .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 168, 255, 0.5);
}

.btn-wa:hover {
    background: linear-gradient(135deg, #25d366, #1e8449);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
}

.btn-secondary {
    display: inline-block;
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: bold;
}

.btn-secondary:hover {
    background: white;
    color: var(--primary);
}

/* =========================================
   3. LAYOUT & CONTAINERS
   ========================================= */
.container {
    position: relative;
    z-index: 1;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(5px); /* Memberikan efek kaca buram */
    border-radius: 20px;
    margin: 10px;
}

/* =========================================
   4. HEADER & LOGO
   ========================================= */
.top-logo-container {
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    
}

.header-logo {
    height: auto;           /* Biarkan tinggi mengikuti lebar secara otomatis */
    width: 140px;           /* Perpanjang lebar (sebelumnya mungkin hanya 80px) */
    max-width: 180px;       /* Batas maksimal agar tidak terlalu memenuhi layar */
    filter: drop-shadow(0 0 12px rgba(0, 168, 255, 0.6));
    transition: transform 0.3s ease;
    object-fit: contain;    /* Memastikan gambar tetap rapi di dalam wadah */
}

.header-logo:hover {
    transform: scale(1.05);
}

/* =========================================
   5. NAVIGATION (BOTTOM TOOLBAR)
   ========================================= */
.bottom-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background: rgba(15, 23, 42, 0.95); /* Dark Navy */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid var(--glass-border);
    display: none; /* Hidden on desktop by default */
    justify-content: space-around;
    align-items: center;
    z-index: 2000;
    padding-bottom: env(safe-area-inset-bottom);
}

.toolbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #64748b;
    font-size: 0.75rem;
    flex: 1;
}

.toolbar-item i {
    font-size: 1.2rem;
    margin-bottom: 4px;
    transition: 0.3s;
}

.toolbar-item.active {
    color: var(--primary);
}

.toolbar-item.active i {
    text-shadow: 0 0 10px var(--primary);
}

/* Floating Action Button (Center) */
.fab-item {
    position: relative;
    top: -25px;
}

.fab-icon {
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid var(--dark-bg);
    box-shadow: 0 0 15px rgba(0, 168, 255, 0.5);
}

.fab-icon i {
    color: white;
    font-size: 1.4rem;
    margin-bottom: 0;
}

/* =========================================
   6. GLASS CARDS (Core Component)
   ========================================= */
/* Semua elemen kartu menggunakan style dasar ini */
.card, .price-card, .feature-card, .form-container, .about-card, .table-container {
    background: var(--glass) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid white;
    border-radius: 20px;
    padding: 30px;
    color: white;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.card:hover, .price-card:hover, .feature-card:hover {
    border-color: var(--primary);
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 168, 255, 0.15);
}

/* Teks di dalam kartu */
.card p, .price-card p, .feature-card p, .about-card p {
    color: var(--text-muted);
    line-height: 1.6;
}

.card h3, .price-card h3, .feature-card h3 {
    color: var(--primary);
    margin-bottom: 15px;
}

/* =========================================
   7. PAGE SPECIFIC: HOME
   ========================================= */
.hero-home {
    min-height: vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* --- UPDATE UKURAN BANNER --- */
/* Styling untuk Banner Video */
/* Kontainer Utama Banner */
.banner-logo-container {
    position: relative;
    width: 100%;
    /* Tinggi untuk Komputer/Laptop */
    height: 500px; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* Warna cadangan jika video loading */
}

/* Video agar memenuhi layar (Responsive) */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover; /* Ini penting agar video tidak tertarik/gepeng */
    z-index: 1;
}

/* Overlay transparan agar logo lebih menonjol */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Hitam transparan 40% */
    z-index: 2;
}

/* Logo di atas video */
.hero-banner-logo {
    position: relative;
    z-index: 3;
    /* PERBESAR DI SINI: Sesuaikan angkanya sampai pas */
    width: 550px; 
    max-width: 100%; /* Menjaga agar tidak meluber keluar layar di tablet */
    height: auto;
    padding: 20px;
    /* Efek bayangan agar logo lebih 'menyala' di atas video */
    filter: drop-shadow(0 0 20px rgba(0, 168, 255, 0.8)); 
    transition: transform 0.3s ease;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.badge {
    background: rgba(0, 168, 255, 0.2);
    color: var(--primary);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    border: 1px solid var(--primary);
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 15px;
}

.features-grid {
    display: grid;
    /* Membuat grid otomatis menyesuaikan jumlah card */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 20px;
    padding: 20px 0;
}

.feature-card i {
    font-size: 2.5rem;
    color: var(--primary);
    margin-bottom: 20px;
}

/* CTA Banner */
.cta-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--glass);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    width: 100%;
    max-width: 650px;
    /* Sedikit dilebarkan agar lebih elegan */
    box-shadow: var(--neon-shadow);
}

.cta-text h2 {
    margin-bottom: 5px;
}

.cta-text p {
    margin-bottom: 20px;
    color: var(--text-muted);
}

.btn-cta {
    background: white;
    color: var(--primary-dark);
}

/* =========================================
   8. PAGE SPECIFIC: PAKET
   ========================================= */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
}

.price-card.featured {
    background: rgba(0, 168, 255, 0.1) !important;
    border: 2px solid var(--primary);
    transform: scale(1.05);
}

.price-card .amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    display: block;
    margin: 15px 0;
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.price-card .period {
    font-size: 1rem;
    color: var(--text-muted);
}

/* Ribbon Paling Laris */
.price-card.featured::before {
    content: "FAVORIT";
    position: absolute;
    top: 25px;
    right: -30px;
    background: #ff4757;
    color: white;
    padding: 5px 35px;
    transform: rotate(45deg);
    font-size: 0.7rem;
    font-weight: bold;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* =========================================
   9. PAGE SPECIFIC: REGISTRASI & FORMS
   ========================================= */
.form-container {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.form-group label {
    display: block;
    color: var(--text-muted);
    margin-bottom: 8px;
    margin-top: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 12px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    font-family: inherit;
    transition: 0.3s;
}

.form-group input:focus, 
.form-group select:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.2);
}

.btn-submit {
    width: 100%;
    background: var(--accent); /* Warna Hijau untuk tombol kirim */
    margin-top: 10px;
}
.btn-submit:hover {
    background: #27ae60;
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.3);
}

/* =========================================
   10. PAGE SPECIFIC: MIKHMON & TABLES
   ========================================= */
/* --- TAMPILAN BARU MIKHMON DASHBOARD --- */
.mikhmon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 30px;
    padding: 10px;
}

.mikhmon-item-card {
    background: var(--glass) !important;
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 30px;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mikhmon-item-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 10px 30px rgba(0, 168, 255, 0.2);
}

.server-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 15px;
    filter: drop-shadow(0 0 10px rgba(0, 168, 255, 0.4));
}

.status-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
}

.status-indicator.online {
    background: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
    border: 1px solid #2ecc71;
}

.btn-open {
    margin-top: 20px;
    background: linear-gradient(45deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 10px 25px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 0.9rem;
    width: 100%;
    text-align: center;
    transition: 0.3s;
}

.btn-open:hover {
    box-shadow: 0 0 15px var(--primary);
    letter-spacing: 1px;
}

/* Ukuran kolom spesifik */
.mikhmon-table td:nth-child(1) { width: 50px; } /* Kolom No */
.mikhmon-table td:nth-child(3) { width: 150px; } /* Kolom Aksi */

/* Tombol di dalam tabel agar ukurannya pas */
.btn-table {
    display: inline-block;
    padding: 6px 15px;
    background: var(--primary);
    color: white;
    border-radius: 5px;
    font-size: 0.8rem;
    transition: 0.3s;
}

.btn-table:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

/* =========================================
   11. PAGE SPECIFIC: TENTANG & STATS
   ========================================= */

/* --- HERO SECTION --- */
.hero-about {
    text-align: center;
    padding: 40px 20px;
    max-width: 900px;
    margin: 0 auto 40px auto;
}

.hero-about h2 {
    font-size: 2.5rem;
    color: var(--primary);
    text-shadow: var(--neon-shadow);
    margin-bottom: 15px;
}

.hero-about p {
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* --- FEATURE LIST (Grid System) --- */
.feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 60px auto;
    padding: 0 20px;
}

/* Wrapper item (Hanya untuk layout) */
.feature-item {
    height: 100%; /* Agar tinggi kartu sama rata */
}

/* Kartu Utama (Visual Style) */
.card.feature-text {
    display: flex;
    flex-direction: column;
    align-items: center; /* Rata tengah horizontal */
    justify-content: flex-start;
    text-align: center;
    background: rgba(255, 255, 255, 0.03); /* Latar transparan */
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 40px 30px;
    border-radius: 15px;
    transition: all 0.3s ease;
    height: 100%;
}

/* Efek Hover Kartu */
.card.feature-text:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--primary);
    box-shadow: 0 10px 40px rgba(0, 168, 255, 0.15);
}

/* --- ICON STYLING --- */
.feature-icon {
    width: 80px;
    height: 80px;
    background: rgba(0, 168, 255, 0.05);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 25px auto; /* Margin auto biar tengah */
    border: 1px solid var(--primary);
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.2);
    font-size: 2.2rem;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.card.feature-text:hover .feature-icon {
    transform: rotateY(180deg); /* Efek putar saat hover */
    background: var(--primary);
    color: #fff;
}

/* Teks dalam Feature */
.feature-text h4 {
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.feature-text p {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* --- STATS GRID (Angka Statistik) --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 50px auto;
    padding: 0 20px;
}

/* Kartu Statistik */
.stats-grid .card {
    background: rgba(6, 11, 24, 0.8);
    border: 1px solid var(--glass-border);
    padding: 30px 20px;
    text-align: center;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Garis aksen di kiri kartu stats */
.stats-grid .card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
}

.stats-grid .card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
}

/* Angka Besar */
.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    text-shadow: 0 0 25px rgba(0, 168, 255, 0.4);
    margin-bottom: 5px;
    font-family: 'Segoe UI', sans-serif;
}

/* Label Bawah Angka */
.stat-label {
    color: var(--text-main);
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    opacity: 0.9;
}

/* Khusus untuk Bagian Partnership/Teks di dalam Grid */
.stats-grid .card h3 {
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 15px;
    text-shadow: var(--neon-shadow);
}

.stats-grid .card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* WADAH UTAMA (GRID) */
.feature-list {
    display: grid;
    /* Ini membuat 2 kolom sama besar, atau 1 kolom di HP */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    /* KUNCI: Items stretch biar tinggi sama rata */
    align-items: stretch; 
}

/* KARTU (ISINYA) */
.card.feature-text {
    height: 100%; /* Memaksa kartu memenuhi tinggi grid */
    display: flex;
    flex-direction: column;
    align-items: center; /* Rata tengah horizontal */
    text-align: center;
    padding: 40px 30px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    transition: all 0.3s ease;
}

/* JUDUL & PARAGRAF */
.card.feature-text h4 {
    margin-top: 15px;
    margin-bottom: 10px;
    color: #fff;
}

.card.feature-text p {
    flex-grow: 1; /* Jika teks pendek, dia tetap mendorong bawah */
}


/* Responsif Mobile */
@media (max-width: 768px) {
    .feature-list, 
    .stats-grid {
        grid-template-columns: 1fr; /* Satu kolom di HP */
        padding: 0 15px;
    }
    
    .hero-about h2 {
        font-size: 2rem;
    }
}


/* =========================================
   12. FOOTER
   ========================================= */
footer {
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
    border-top: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* =========================================
   SIDEBAR & NAVIGATION STYLE
   ========================================= */

/* Posisi Awal Sidebar (Tersembunyi di Kiri) */
.sidebar-toggle {
    position: fixed;        
    top: 15px;              
    left: 10px;             
    z-index: 9999;          
    background: rgba(6, 11, 24, 0.2); 
    color: #ffffff;         
    border: 1px solid rgba(255, 255, 255, 0.8); 
    padding: 10px 15px;     
    border-radius: 8px;    
    cursor: pointer;
    backdrop-filter: blur(5px); 
    transition: all 0.3s ease;
}

.sidebar-toggle:hover {
    background: var(--primary); /* Berubah warna saat disorot */
    transform: scale(1.1);      /* Efek membesar sedikit */
    box-shadow: 0 0 15px var(--primary); /* Efek cahaya neon */
}

.sidebar-theme-control {
    padding: 15px 20px;
    border-bottom: 1px solid var(--glass-border);
}

.sidebar {
    position: fixed;
    top: 0;
    left: -280px; /* Sembunyi */
    width: 280px;
    height: 100vh;
    background: linear-gradient(180deg, rgba(10, 15, 30, 0.95), rgba(15, 20, 40, 0.95));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--glass-border);
    box-shadow: 5px 0 25px rgba(0, 168, 255, 0.15);
    z-index: 9999;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Class Aktif (Dimunculkan JS) */
.sidebar.active {
    left: 0px;
    box-shadow: 0px 0 35px rgba(0, 168, 255, 0.2);
}

/* Header Sidebar */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    border-bottom: 2px solid var(--primary);
    background: linear-gradient(135deg, rgba(0, 168, 255, 0.1), transparent);
}

.sidebar-logo {
    width: auto;
    height: 80px;
    filter: drop-shadow(0 2px 8px rgba(0, 168, 255, 0.3));
}

.close-sidebar {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: 0.3s;
}

.close-sidebar:hover {
    color: var(--primary); /* Merah saat hover */
    transform: rotate(90deg);
}

/* Links Style */
.sidebar-links {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1; /* Biar ngisi ruang kosong */
    padding: 10px 0;
}

.sidebar-links li a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    color: var(--text-main);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 15px;
    border-left: 4px solid transparent;
    position: relative;
}

.sidebar-links li a span {
    display: flex;
    align-items: center;
}

.sidebar-links li a:hover {
    background: rgba(0, 168, 255, 0.15);
    color: var(--primary);
    border-left: 4px solid var(--primary);
    padding-left: 20px;
    transform: translateX(3px);
}

.sidebar-links li a:active {
    background: rgba(0, 168, 255, 0.25);
}

.sidebar-links li a i {
    width: 22px;
    text-align: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.sidebar-links li a:hover i {
    transform: scale(1.2);
    color: var(--primary);
}

/* Highlight untuk menu Login Teknisi */
.sidebar-links li.highlight a.tech-link-highlight {
    background: linear-gradient(135deg, rgba(0, 168, 255, 0.2), rgba(0, 168, 255, 0.1));
    border-left: 4px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
    border-radius: 8px;
    margin: 8px 8px;
    padding: 12px 15px;
}

.sidebar-links li.highlight a.tech-link-highlight:hover {
    background: linear-gradient(135deg, rgba(0, 168, 255, 0.3), rgba(0, 168, 255, 0.2));
    box-shadow: 0 4px 12px rgba(0, 168, 255, 0.3);
}

/* Divider antar menu */
.sidebar-links li.divider-menu {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin: 8px 0;
    list-style: none;
}

/* Menu Item Container */
.sidebar-links li.menu-item {
    list-style: none;
    transition: all 0.3s ease;
}

.sidebar-links li.menu-item:not(.divider-menu) {
    margin: 0 4px;
}

/* Footer Sidebar */
.sidebar-footer {
    padding: 20px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 2px solid var(--glass-border);
    margin-top: auto;
    background: linear-gradient(180deg, transparent, rgba(0, 168, 255, 0.05));
    letter-spacing: 0.5px;
}

/* Overlay Gelap */
.sidebar-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    backdrop-filter: blur(2px);
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.brand-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-text {
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--primary);
    letter-spacing: 1px;
}

/* Toggle Switch Style (Slider) */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.toggle-switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: var(--primary);
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.menu-label {
    padding: 15px 20px 5px;
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* Khusus Tombol Login Teknisi */
.mt-auto {
    margin-top: 20px;
    border-top: 1px solid var(--glass-border);
    padding-top: 10px;
}

/* --- OLT Management Table Styles --- */
.table-container {
    overflow-x: auto;
    background: rgba(15, 23, 42, 0.8); /* Background lebih gelap agar teks kontras */
    /* --- INI KUNCI EFEK BLUR --- */
backdrop-filter: blur(15px) saturate(150%);
-webkit-backdrop-filter: blur(15px) saturate(150%);
/* --------------------------- */
    border-radius: 15px;
    border: 2px solid var(--primary); /* Border lebih tebal dengan warna utama */
    margin: 20px 0 50px 0;
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.9); /* Efek glow di sekitar tabel */
}

.olt-table {
    width: 100%;
    border-collapse: collapse;
    color: #ffffff; /* Paksa warna putih agar terbaca */
}

.olt-table th {
    background: var(--primary); /* Background header penuh warna */
    color: #fff;
    text-transform: uppercase;
    font-weight: 800;
    padding: 18px 15px;
    border-bottom: 2px solid var(--primary-dark);
}

.olt-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

/* Warna selang-seling (Zebra striping) agar mata tidak lelah */
.olt-table tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.05);
}

.olt-table tr:hover td {
    background: rgba(0, 168, 255, 0.1); /* Highlight saat baris disentuh */
    color: var(--primary);
    font-weight: bold;
}

.olt-table th {
    background: rgba(0, 168, 255, 0.15);
    color: var(--primary);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.olt-table tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.btn-olt {
    display: inline-block;
    background: linear-gradient(45deg, var(--primary), var(--primary-dark));
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    transition: 0.3s;
    text-align: center;
    border: none;
}

.btn-olt:hover {
    transform: translateY(-2px);
    box-shadow: var(--neon-shadow);
    color: white;
}

/* Label Status (Opsional, untuk mempercantik) */
.status-olt {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    background: var(--accent);
    color: #000;
    font-weight: bold;
    margin-right: 5px;
}

/* --- Style Tombol Ambil Lokasi --- */
.btn-location {
    background: linear-gradient(135deg, blue, green);
    /* Warna Orange-Kuning agar mencolok */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(241, 196, 15, 0.3);
}

.btn-location:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(241, 196, 15, 0.5);
    filter: brightness(1.1);
}

.btn-location i {
    font-size: 1rem;
}

/* Warna saat sedang proses (Loading) */
.btn-location.loading {
    background: #95a5a6;
    cursor: not-allowed;
    transform: none;
}

/* Label Best Seller */
.price-card.popular {
    border: 2px solid var(--primary);
    transform: scale(1.05);
    position: relative;
}

.popular-badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: var(--neon-shadow);
}
/* =========================================
   TAMBAHAN: STYLE AUTH & DASHBOARD
   ========================================= */

/* Layout Tengah untuk Login/Register */
.btn-register {
        background: linear-gradient(90deg, #00a8ff, #0062cc); /* Gradasi Biru JDS */
        color: white;
        border: none;
        padding: 12px 20px;
        font-size: 1rem;
        font-weight: bold;
        border-radius: 50px; /* Membuat tombol bulat lonjong */
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 168, 255, 0.4); /* Efek bayangan neon */
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: 10px;
    }
    
.btn-register:hover {
        transform: translateY(-2px); /* Efek naik sedikit saat disentuh */
        box-shadow: 0 6px 20px rgba(0, 168, 255, 0.6);
        background: linear-gradient(90deg, #0062cc, #00a8ff);
    }

/* =========================================
   HEADER BRANDING (Isi Bagian Atas)
   ========================================= */
.login-header-branding {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px; /* Jarak ke form login */
    position: relative;
    z-index: 10;
    animation: fadeInDown 1s ease-out;
}

.cyber-logo {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background: rgba(0, 168, 255, 0.1); /* Transparan Biru */
    border-radius: 50%;
    margin-bottom: 10px;
    border: 2px solid var(--primary);
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.4);
}

.cyber-logo i {
    font-size: 2.5rem;
    color: var(--primary);
    z-index: 2;
}

/* Efek Denyut (Pulse) di belakang logo */
.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--primary);
    animation: pulseEffect 2s infinite;
    opacity: 0;
}

.login-header-branding h1 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 2px;
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 168, 255, 0.8);
}

.login-header-branding .highlight {
    color: var(--primary); /* Biru Neon */
}

.cyber-line {
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    margin: 10px auto;
    border-radius: 2px;
}

.tech-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Animasi Denyut */
@keyframes pulseEffect {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Animasi Masuk dari Atas */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Penyesuaian Responsif HP */
@media (max-height: 700px) {
    /* Jika layar pendek, kecilkan sedikit agar form tetap muat */
    .cyber-logo { width: 60px; height: 60px; margin-bottom: 10px; }
    .cyber-logo i { font-size: 1.8rem; }
    .login-header-branding h1 { font-size: 1.5rem; }
    .login-header-branding { margin-bottom: 20px; }
}


.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 10px;
    position: relative;
    z-index: 10;
}

.auth-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    padding: 2rem;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--neon-shadow);
    text-align: center;
}

.auth-header h2 {
    color: var(--text-main);
    margin: 10px 0 5px;
}

.auth-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.login-text {
    color: #cbd5e1;
    font-size: 0.9rem;
    margin: 0;
}


.link-highlight {
        color: #2ecc71; /* Warna Hijau agar kontras */
        text-decoration: none;
        font-weight: bold;
        transition: color 0.3s;
    }
    
.link-highlight:hover {
    color: #fff;
    text-decoration: underline;
}

.separator {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 5px 0;
}

.btn-back-home {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 25px;
        color: #a0aec0; /* Warna abu-abu terang */
        border: 1px solid rgba(255, 255, 255, 0.2); /* Garis pinggir tipis */
        border-radius: 50px;
        text-decoration: none;
        font-size: 0.85rem;
        transition: all 0.3s ease;
        background: rgba(0, 0, 0, 0.2); /* Latar belakang agak gelap */
    }
    
.btn-back-home:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: white;
}
    
.btn-back-home i {
    font-size: 0.9rem;
}



.full-width {
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    border: none;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.full-width:hover {
    filter: brightness(1.2);
}

.auth-footer {
    margin-top: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.auth-footer a {
    color: var(--primary);
    text-decoration: none;
}

/* Dashboard Styles */
.dash-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 5px;
    background: rgba(6, 11, 24, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.btn-logout {
    background: transparent;
    border: 1px solid #e74c3c;
    color: #e74c3c;
    padding: 5px 15px;
    border-radius: 20px;
    cursor: pointer;
}

.btn-logout:hover {
    background: #e74c3c;
    color: white;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.menu-grid .card {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s;
}

.menu-grid .card:hover {
    transform: translateY(-5px);
}

/* =========================================
   WARNA KHUSUS HALAMAN REGISTRASI
   ========================================= */

/* Mengubah border dan shadow card menjadi Hijau */
.register-mode {
    border-color: rgba(46, 204, 113, 0.5);
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.2); /* Green glow */
}

/* Mengubah warna ikon di header */
.register-mode .auth-header i {
    color: var(--accent) !important;
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
}

/* Mengubah warna tombol Submit */
.register-mode .btn-register {
    background: linear-gradient(135deg, var(--accent), #27ae60);
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4);
    border: none;
    color: #fff; /* Pastikan teks putih */
}

.register-mode .btn-register:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.6);
    filter: brightness(1.1);
}

/* =========================================
   DASHBOARD TEKNISI UPGRADE
   ========================================= */

/* Header Dashboard */
.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding: 0;
    gap: 15px;
}

.date-badge {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    padding: 8px 12px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    text-align: center;
    flex-shrink: 0;
    gap: 10px;
    color: var(--text-main);
    font-size: 0.9rem;
    box-shadow: var(--neon-shadow);
    margin-bottom: 0;
}

.date-badge i {
    color: var(--primary);
    font-size: 1.1rem;
}

#tanggalHariIni {
    font-weight: 500;
}


/* Statistik Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Kolom */
    gap: 6px;
    margin: 0 auto 12px auto;
    padding: 0 10px;
    width: 100%;
    max-width: 100%;
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
}

.stat-card {
    background: var(--glass);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.stat-icon {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
    font-size: 1rem;
}
.stat-icon.warning { background: rgba(231, 76, 60, 0.2); color: #e74c3c; }
.stat-icon.success { background: rgba(46, 204, 113, 0.2); color: #2ecc71; }
.stat-icon.info { background: rgba(52, 152, 219, 0.2); color: #3498db; }

.stat-info h3 { margin: 0; font-size: 0.9rem; color: var(--text-main); }
.stat-info p { margin: 0; font-size: 0.6rem; color: var(--text-muted); }

/* Badge Items */
.badge-item, .btn-refresh {
    transition: all 0.3s ease;
}

.badge-item:hover, .btn-refresh:hover {
    background: rgba(52, 152, 219, 0.1) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 10px rgba(52, 152, 219, 0.2);
}

.btn-refresh:active {
    transform: scale(0.95);
}

/* Job List (Daftar Tugas) */
.section-title h3 {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0;
    padding: 0;
    border: none;
}

.job-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.job-item {
    background: var(--glass-border);
    border: 1px solid white;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: 0.3s;
    margin-bottom: 10px;
}

.job-item:hover {
    background: rgba(255, 255, 255, 0.15);
}

.job-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.job-icon.red { background: rgba(231, 76, 60, 0.2); color: #e74c3c; }
.job-icon.blue { background: rgba(52, 152, 219, 0.2); color: #3498db; }

.job-details { flex-grow: 1; }
.job-details h4 { margin: 0 0 5px; font-size: 0.95rem; color: var(--text-main); }
.job-details p { margin: 0 0 5px; font-size: 0.8rem; color: var(--text-muted); }

.badge {
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: bold;
}
.badge.pending { background: #e74c3c; color: white; }
.badge.process { background: #f39c12; color: white; }

.btn-action {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: var(--primary);
    cursor: pointer;
    transition: 0.2s;
}
.btn-action:hover { background: var(--primary); color: white; }

/* Small Cards Grid */
.menu-grid .small-card {
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 1px solid white;
}
.menu-grid .small-card i { font-size: 1.5rem; margin: 0; }
.menu-grid .small-card h4 { font-size: 0.9rem; margin: 0; }

/* =========================================
   PENYESUAIAN POSISI JUDUL DASHBOARD
   ========================================= */

.dash-nav h3 {
    padding: 5px 15px;
    margin-top: 5px; /* Tambahkan jarak atas 5px */
    display: inline-block; /* Memastikan margin bekerja dengan baik */
}

/* Tambahkan di style.css */
button:disabled {
    background-color: #555 !important; /* Warna abu-abu saat loading */
    color: #ccc !important;
    cursor: not-allowed;
    transform: none !important; /* Mencegah efek hover/scale saat loading */
    box-shadow: none !important;
}

/* Pastikan spinner ada jarak dengan teks */
button i.fa-spin {
    margin-right: 8px;
}

/* =========================================
   TAMPILAN BARU KARTU TUGAS
   ========================================= */

/* Container agar kartu tidak terlalu lebar di desktop */
.task-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.task-card {
    position: relative;
    background: rgba(255, 255, 255, 0.03); /* Transparan gelap */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px 20px;
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Garis indikator warna di kiri */
.task-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--text-muted); /* Warna default */
}

/* Warna indikator berdasarkan jenis tugas */
.task-card.type-pasang::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); } /* Hijau untuk Pasang Baru */
.task-card.type-repair::before { background: #e74c3c; box-shadow: 0 0 10px #e74c3c; } /* Merah untuk Perbaikan */

/* Efek Hover */
.task-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px); /* Geser sedikit ke kanan */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Header Kartu (Judul & Tanggal) */
.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 8px;
    margin-bottom: 5px;
}

.task-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--primary);
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.task-header .task-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: rgba(0,0,0,0.3);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Detail Pelanggan */
.task-body p {
    margin: 3px 0;
    text-align: left;
    color: var(--text-main);
}

.customer-name {
    font-weight: bold;
    font-size: 1.1rem;
}

.customer-address {
    font-size: 0.9rem;
    color: var(--text-muted) !important;
    display: flex;
    align-items: start;
    gap: 8px;
}

/* Tombol Aksi */
.task-actions {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.btn-task {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Jarak ikon dan teks */
    padding: 10px 15px;
    border-radius: 8px;
    text-decoration: none;
    color: #fff !important; /* Paksa teks putih */
    background: rgba(55, 10, 219, 0.822);
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: none;
    font-weight: bold;
    text-transform: uppercase;
}

.btn-task:active {
    transform: scale(0.95);
    filter: brightness(0.9);
}

/* Tab Button Styling - Enhanced */
.btn-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 25px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border: 3px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 900;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

.btn-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-tab:hover::before {
    left: 100%;
}

.btn-tab:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.btn-tab i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.btn-tab:hover i {
    transform: scale(1.2) rotate(5deg);
}

/* Responsive untuk tablet */
@media (max-width: 768px) {
    .nav-menu-wrapper {
        gap: 8px !important;
    }
    
    .btn-tab {
        padding: 12px 15px;
        font-size: 0.85rem;
        min-width: 120px !important;
        gap: 8px;
    }
    
    .btn-tab i {
        font-size: 1.1rem;
    }
    
    .btn-tab-text {
        font-size: 0.85rem;
    }
}

/* Responsive untuk mobile */
@media (max-width: 580px) {
    .nav-menu-wrapper {
        gap: 4px !important;
        padding: 6px !important;
    }
    
    .btn-tab {
        flex-direction: column;
        gap: 3px;
        padding: 8px 4px;
        font-size: 0.65rem;
        min-width: auto !important;
        flex: 1;
    }
    
    .btn-tab i {
        font-size: 1.1rem;
    }
    
    .btn-tab-text {
        font-size: 0.65rem;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* Responsive untuk layar sangat kecil */
@media (max-width: 400px) {
    .nav-menu-wrapper {
        gap: 3px !important;
        padding: 5px !important;
    }
    
    .btn-tab {
        flex-direction: column;
        gap: 2px;
        padding: 6px 2px;
        font-size: 0.6rem;
        min-width: auto !important;
        flex: 1;
    }
    
    .btn-tab i {
        font-size: 1rem;
    }
    
    .btn-tab-text {
        font-size: 0.6rem;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* Responsive untuk layar extra kecil (iPhone SE, dll) */
@media (max-width: 360px) {
    .nav-menu-wrapper {
        gap: 2px !important;
        padding: 4px !important;
    }
    
    .btn-tab {
        flex-direction: column;
        gap: 2px;
        padding: 5px 1px;
        font-size: 0.55rem;
        min-width: auto !important;
        flex: 1;
    }
    
    .btn-tab i {
        font-size: 0.9rem;
    }
    
    .btn-tab-text {
        font-size: 0.55rem;
        line-height: 1;
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}

/* Tab Colors - Each tab has unique gradient */
.tab-tugas {
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.3), rgba(155, 89, 182, 0.3));
    border-color: rgba(142, 68, 173, 0.5);
}

.tab-tugas:hover {
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.5), rgba(155, 89, 182, 0.5));
    border-color: #9b59b6;
}

.tab-tugas.active {
    background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
    border-color: #9b59b6;
    box-shadow: 0 8px 30px rgba(155, 89, 182, 0.6);
}

.tab-pelanggan {
    background: linear-gradient(135deg, rgba(41, 128, 185, 0.3), rgba(52, 152, 219, 0.3));
    border-color: rgba(41, 128, 185, 0.5);
}

.tab-pelanggan:hover {
    background: linear-gradient(135deg, rgba(41, 128, 185, 0.5), rgba(52, 152, 219, 0.5));
    border-color: #3498db;
}

.tab-pelanggan.active {
    background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
    border-color: #3498db;
    box-shadow: 0 8px 30px rgba(52, 152, 219, 0.6);
}

.tab-teknisi {
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.3), rgba(243, 156, 18, 0.3));
    border-color: rgba(230, 126, 34, 0.5);
}

.tab-teknisi:hover {
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.5), rgba(243, 156, 18, 0.5));
    border-color: #f39c12;
}

.tab-teknisi.active {
    background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
    border-color: #f39c12;
    box-shadow: 0 8px 30px rgba(243, 156, 18, 0.6);
}

.tab-dashboard {
    background: linear-gradient(135deg, rgba(22, 160, 133, 0.3), rgba(46, 204, 113, 0.3));
    border-color: rgba(22, 160, 133, 0.5);
}

.tab-dashboard:hover {
    background: linear-gradient(135deg, rgba(22, 160, 133, 0.5), rgba(46, 204, 113, 0.5));
    border-color: #2ecc71;
    transform: translateY(-3px) scale(1.05);
}

.btn-tab.active i {
    animation: pulseRotate 2s ease-in-out infinite;
}

@keyframes pulseRotate {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.15) rotate(-5deg); }
    50% { transform: scale(1.2) rotate(0deg); }
    75% { transform: scale(1.15) rotate(5deg); }
}

/* Tab Content Styling */
.tab-content {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.btn-wa {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}
.btn-maps {
    background: linear-gradient(135deg, #f39c12, #d35400);
}
.btn-maps:hover {
    background: linear-gradient(135deg, #e67e22, #b33900);
    box-shadow: 0 0 10px rgba(243, 156, 18, 0.4);
}
.btn-done {
    width: 100%; /* Lebar penuh */
    margin-top: 15px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    text-transform: uppercase;
    letter-spacing: 1px;
}
.btn-done:hover {
    background: linear-gradient(135deg, #00a8ff, #0077b6);
    box-shadow: 0 0 15px var(--primary); /* Efek glowing */
}

.btn-task:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.4);
}

/* =========================================
   PERBAIKAN POSISI TOMBOL TUGAS (CENTER)
   ========================================= */
.task-actions {
    display: flex;           /* Menggunakan model Flexbox */
    justify-content: center; /* Mengatur posisi horizontal ke TENGAH */
    align-items: center;     /* Mengatur posisi vertikal ke tengah */
    gap: 10px;               /* Memberikan jarak antar tombol */
    flex-wrap: wrap;         /* Agar tombol turun ke bawah jika layar sempit */
    margin-top: 15px;        /* Jarak dari elemen atasnya */
    width: 100%;             /* Pastikan lebar container penuh */
}

.task-actions a {
    flex: 1; /* Membagi lebar sama rata (50:50) */
    text-align: center;
}


/* Styling untuk area Loading/Pesan Tengah */
#container-tugas {
    display: flex;              /* Mengaktifkan Flexbox */
    flex-direction: column;     /* Susunan vertikal (ikon di atas, teks di bawah) */
    justify-content: center;    /* Rata tengah secara Vertikal */
    align-items: center;        /* Rata tengah secara Horizontal */
    min-height: 5vh;           /* Mengambil 60% tinggi layar agar pas di tengah mata */
    width: 100%;                /* Lebar penuh */
    text-align: center;         /* Teks rata tengah */
    padding: 15px;
}

/* Opsional: Mempercantik teks dan ikon */
#container-tugas p {
    font-size: 1rem;
    color: var(--text-muted, #ccc); /* Warna abu-abu soft */
    margin-top: 15px;
    font-weight: 400;
}

#container-tugas i {
    font-size: 1rem;            /* Ukuran ikon lebih besar */
    margin-bottom: 10px;
    color: var(--primary, #00a8ff); /* Warna ikon (biru/sesuai tema) */
}

/* =======================================================
   REDESIGN LOGIN TEKNISI (MODERN CYBER STYLE)
   ======================================================= */
   
/* =========================================
   KHUSUS HALAMAN LOGIN (Auth Page)
   ========================================= */
body.auth-page {
    /* Reset padding bawaan body umum agar benar-benar tengah */
    padding-top: 0 !important;
    
    /* Membuat konten (form) berada persis di tengah layar */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    /* Memastikan tinggi halaman setidaknya setinggi layar perangkat */
    min-height: 100vh;
    
    /* Background khusus tema Cyber/Space */
    background: radial-gradient(circle at center, #0f172a 0%, #02040a 100%);
    
    /* Mencegah scrollbar muncul jika tidak perlu */
    overflow-x: hidden;
}

/* Tambahan: Background Animasi Partikel (Opsional, agar lebih keren) */
body.auth-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 168, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px; /* Efek kotak-kotak Grid */
    z-index: -1; /* Taruh di belakang */
    pointer-events: none;
}


/* Background Halaman */
.login-body {
    background: #05070a; /* Gelap pekat */
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Elemen Dekorasi Background (Glowing Blobs) */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -1;
    animation: floatShape 10s infinite alternate;
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: rgba(0, 168, 255, 0.2); /* Biru JDS */
    top: -50px;
    left: -50px;
}

.shape-2 {
    width: 250px;
    height: 250px;
    background: rgba(46, 204, 113, 0.15); /* Hijau Aksen */
    bottom: -50px;
    right: -50px;
    animation-delay: -5s;
}

@keyframes floatShape {
    0% { transform: translate(0, 0); }
    100% { transform: translate(30px, 50px); }
}

/* Wrapper Utama */
.login-wrapper {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
}

/* Kartu Login (Glassmorphism) */
.login-card {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.03); /* Transparan */
    backdrop-filter: blur(15px); /* Efek Blur Kaca */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Garis Neon di atas kartu */
.login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

/* Header Login */
.login-header .icon-circle {
    width: 70px;
    height: 70px;
    background: rgba(0, 168, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border: 1px solid rgba(0, 168, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.2);
}

.login-header i {
    font-size: 30px;
    color: var(--primary);
}

.login-header h2 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    font-size: 1.5rem;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 5px;
    margin-bottom: 30px;
}

/* Form Input Style */
.input-group {
    position: relative;
    margin-bottom: 20px;
    text-align: left;
}

.input-group input {
    width: 100%;
    padding: 15px 45px; /* Space untuk icon */
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s;
    box-sizing: border-box; /* Agar padding tidak merusak lebar */
}

/* Icon di dalam input */
.input-group .input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    transition: 0.3s;
}

.input-group .show-pass {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    cursor: pointer;
}

/* Efek Fokus Input */
.input-group input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 10px rgba(0, 168, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
    display: none; /* Sembunyikan label placeholder default jika mau custom label */
}

.input-group input:focus ~ .input-icon {
    color: var(--primary);
}

/* Hilangkan label html bawaan agar bersih, kita pakai placeholder saja */
.input-group label {
    display: none; 
}

/* Tombol Login Regis teknisi */
.btn-signup {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--primary-dark), var(--primary));
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0, 168, 255, 0.3);
}

.btn-login-tech:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 168, 255, 0.5);
}

.btn-login-tech:active {
    transform: scale(0.98);
}

/* Footer & Link */
.login-footer {
    margin-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}

.login-footer p {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-bottom: 10px;
}

.back-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.back-link:hover {
    color: #fff;
}

/* Responsive */
@media (max-width: 480px) {
    .container {
        width: 95%; /* Beri sedikit ruang di pinggir layar */
        padding: 10px 0;
    }

    .pricing-grid, .features-grid, .mikhmon-grid {
        grid-template-columns: 1fr; /* Paksa jadi 1 kolom di HP kecil */
        gap: 15px;
    }

    .card, .price-card, .feature-card {
        padding: 20px; /* Kurangi padding dalam agar konten lebih luas */
    }

    .bottom-toolbar {
        display: flex; /* Pastikan navigasi bawah muncul di HP */
    }


    .login-card {
        padding: 30px 20px;
    }
    
    .login-header h2 {
        font-size: 1.3rem;
    }
}

/* =======================================
   TAMBAHAN TOMBOL REGISTRASI
   ======================================= */

.register-link-container {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Garis pemisah halus */
}

.register-link-container p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.btn-register-link {
    display: inline-block;
    color: var(--primary); /* Warna Biru Neon */
    font-weight: bold;
    text-decoration: none;
    font-size: 0.95rem;
    padding: 8px 20px;
    border: 1px solid rgba(0, 168, 255, 0.3);
    border-radius: 50px;
    background: rgba(0, 168, 255, 0.05);
    transition: all 0.3s ease;
}

.btn-register-link:hover {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 168, 255, 0.6); /* Efek Glowing saat disentuh */
    transform: translateY(-2px);
    border-color: var(--primary);
}

/* Setup Halaman Khusus Login */
.login-body {
    background: #0a0e17; /* Gelap Pekat */
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

/* Background Animasi Blob */
.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -1;
    animation: floatShape 8s infinite alternate;
}
.shape-1 { width: 300px; height: 300px; background: rgba(0, 168, 255, 0.15); top: -50px; left: -50px; }
.shape-2 { width: 250px; height: 250px; background: rgba(46, 204, 113, 0.1); bottom: -50px; right: -50px; }

@keyframes floatShape { to { transform: translate(40px, 40px); } }

/* Kartu Login Glassmorphism */
.login-card {
    width: 90%;
    max-width: 380px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* Highlight atas */
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    text-align: center;
    position: relative;
}

/* Garis Neon Header */
.login-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary, #00a8ff), transparent);
}

/* Icon & Header Text */
.login-header .icon-circle {
    width: 70px; height: 70px;
    background: rgba(0, 168, 255, 0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 0 20px rgba(0, 168, 255, 0.2);
    border: 1px solid rgba(0, 168, 255, 0.3);
}
.login-header i { font-size: 30px; color: var(--primary, #00a8ff); }
.login-header h2 { color: #fff; margin: 0; font-size: 1.5rem; letter-spacing: 1px; }
.login-header p { color: #8899a6; font-size: 0.8rem; margin-top: 5px; margin-bottom: 30px; }

/* Input Fields */
.input-group { position: relative; margin-bottom: 20px; }
.input-group input {
    width: 100%;
    padding: 14px 45px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    box-sizing: border-box;
    transition: 0.3s;
}
.input-group input:focus {
    border-color: var(--primary, #00a8ff);
    box-shadow: 0 0 10px rgba(0, 168, 255, 0.2);
    background: rgba(0, 0, 0, 0.5);
}
.input-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #667; }
.show-pass { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #667; cursor: pointer; }

/* Tombol Login */
.btn-login-tech {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #0062cc, #00a8ff);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0, 168, 255, 0.3);
}
.btn-login-tech:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 168, 255, 0.5); }

/* Tombol Register & Link */
.register-link-container {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.register-link-container p { color: #8899a6; font-size: 0.85rem; margin-bottom: 10px; }
.btn-register-link {
    display: inline-block;
    color: var(--primary, #00a8ff);
    border: 1px solid rgba(0, 168, 255, 0.3);
    padding: 8px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: bold;
    background: rgba(0, 168, 255, 0.05);
    transition: 0.3s;
}
.btn-register-link:hover {
    background: var(--primary, #00a8ff);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 168, 255, 0.4);
}

.back-link { display: block; margin-top: 20px; color: #667; text-decoration: none; font-size: 0.8rem; }
.back-link:hover { color: #fff; }

/* --- TICKET SYSTEM DESIGN --- */
.ticket-system-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 kolom untuk layout 2x2 */
    gap: 10px;
    margin: 0 auto 25px auto;
    padding: 0 10px;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 1024px) {
    .ticket-system-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .ticket-system-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .section-title {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 0 10px;
    }

    .section-title h3 {
        font-size: 0.8rem;
    }

    .badge-item {
        font-size: 0.75rem !important;
    }

    .btn-refresh {
        font-size: 0.75rem !important;
    }
}

.ticket-box {
    position: relative;
    height: 70px; /* Lebih pipih dari 110px */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align left untuk layout horizontal */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.5); /* Background transparan hitam */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 20px;
}

.ticket-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    background: rgba(0, 0, 0, 0.6);
}

.ticket-box:active {
    transform: scale(0.98);
}

/* Warna Border-Left Per Tiket (Color Code Accent) */
.ticket-box.pending { 
    border-left: 4px solid #f39c12;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.2);
}

.ticket-box.pending:hover {
    box-shadow: 0 8px 20px rgba(243, 156, 18, 0.3), 0 0 20px rgba(243, 156, 18, 0.2);
}

.ticket-box.process { 
    border-left: 4px solid #9b59b6;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.2);
}

.ticket-box.process:hover {
    box-shadow: 0 8px 20px rgba(155, 89, 182, 0.3), 0 0 20px rgba(155, 89, 182, 0.2);
}

.ticket-box.done { 
    border-left: 4px solid #2ecc71;
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.2);
}

.ticket-box.done:hover {
    box-shadow: 0 8px 20px rgba(46, 204, 113, 0.3), 0 0 20px rgba(46, 204, 113, 0.2);
}

.ticket-box.history { 
    border-left: 4px solid #3498db;
    box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
}

.ticket-box.history:hover {
    box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3), 0 0 20px rgba(52, 152, 219, 0.2);
}

.ticket-inner {
    display: flex;
    flex-direction: row; /* Horizontal layout */
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 15px;
    color: white;
}

.ticket-inner h1 {
    font-size: 2.5rem; /* Angka besar */
    margin: 0;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    flex-shrink: 0;
}

.ticket-inner i {
    display: none; /* Sembunyikan icon untuk space efficiency */
}

.ticket-inner span {
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.9;
    text-align: right;
    flex: 1;
}

/* Efek Lubang Tiket (Perforation) - Disembunyikan */
.perforation-left, .perforation-right {
    display: none;
}

/* =========================================
   TAMBAHAN / PERBAIKAN (Letakkan di bagian bawah style.css)
   ========================================= */

/* 1. Perbaikan Header Fixed (Agar menu melayang rapi) */
.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Tombol menu kiri, judul kanan/tengah */
    z-index: 1000;
    background: rgba(6, 11, 24, 0.2); /* Latar gelap transparan */
    backdrop-filter: blur(15px); /* Efek blur kuat */
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 1px rgba(0, 0, 0, 0.1);
    /* Tambahkan ini di dalam .header-fixed jika ingin garis bawah menyala */
    border-bottom: 1px solid rgba(0, 168, 255, 0.2); /* Warna --primary transparan */
    box-shadow: 0 0 15px rgba(0, 168, 255, 0.1); /* Efek glow neon */
}


/* 2. Refactoring Bagian Partner (Pengganti Inline Style) */
.partner-section {
    margin-top: 60px;
    text-align: center;
    padding-bottom: 40px;
}

.partner-card-wrapper {
    background: var(--glass);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--primary-dark);
    display: inline-block;
    width: 100%;
    max-width: 800px; /* Batasi lebar agar tidak terlalu lebar di PC */
    margin: 0 auto; /* Tengah */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--neon-shadow);
}

.partner-content {
    display: flex;
    flex-direction: column; /* Default Mobile: Atas-Bawah */
    align-items: center;
    gap: 20px;
}

/* Pada layar tablet/PC, buat logo dan teks berdampingan */


.partner-logo-box {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--primary-dark);
    padding: 15px;
    border-radius: 12px;
    width: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logo-box img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));
}

.partner-info h4 {
    color: #fff;
    margin-bottom: 8px;
    font-size: 1.2rem;
    font-weight: 700;
}

.partner-info p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Penambahan gaya untuk Admin Panel */
.nav-center {
    justify-content: center;
}

.container-admin {
    max-width: 600px; 
    margin-top: 20px; 
    display: block;
}

.card-header-admin {
    margin-bottom: 15px; 
    border-bottom: 1px solid var(--glass-border); 
    padding-bottom: 10px;
}

.form-input-full {
    width: 100%; 
    padding: 12px; 
    margin-bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: 0.3s;
}

.form-input-full:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.2);
    background: rgba(15, 23, 42, 0.8);
}

.btn-submit-admin {
    width: 100%; 
    padding: 12px; 
    background: var(--primary); 
    border: none; 
    color: white; 
    border-radius: 5px; 
    cursor: pointer; 
    font-weight: bold;
    transition: 0.3s;
}

.btn-submit-admin:hover {
    filter: brightness(1.2);
}

/* Modal Login Admin */
.admin-login-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: var(--dark-bg); 
    z-index: 999; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.input-admin-code {
    width: 100%; 
    padding: 10px; 
    margin-bottom: 15px; 
    background: rgba(255,255,255,0.1); 
    border: 1px solid var(--glass-border); 
    color: white; 
    text-align: center;
}

/* Tombol khusus home agar berbeda dengan logout */
.btn-home {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--glass-border);
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.3s;
}

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

/*status pending*/
.job-item.status-pending { border-left: 5px solid #e74c3c; }
.job-item.status-proses { border-left: 5px solid #f1c40f; }

.section-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 15px;
    /* Memberikan ruang dari section atasnya */
    margin-top: 100px;
}

/* =========================================
   5. PARTNER SECTION & FOOTER (Extracted from HTML)
   ========================================= */

/* Section Partner Strategis */
.section-partner {
    margin-top: 40px;
    text-align: center;
}

.section-label {
    color: var(--primary);
    font-size: 1rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.partner-card {
    background: var(--glass);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--primary-dark);
    display: inline-block;
    width: 100%;
    backdrop-filter: blur(10px); /* Memastikan efek glass */
}

.partner-flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.partner-logo-img {
    width: 100%;
    height: auto;
    display: block;
}

.partner-name {
    color: #fff;
    margin-bottom: 5px;
    font-weight: bold;
}

.partner-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Footer */
.footer-center {
    text-align: center;
    padding: 30px 0;
    margin-top: 50px;
    border-top: 1px solid var(--glass-border);
}

/* --- Speedtest Box Styling --- */
.speedtest-box {
    background: var(--glass);
    padding: 30px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    position: relative;
    overflow: hidden;
    text-align: center;
    backdrop-filter: blur(10px);
    max-width: 900px; /* Batasi lebar agar tidak terlalu lebar di PC */
    margin: 0 auto 40px auto;
}

.iframe-container {
    width: 100%;
    height: 450px; /* Tinggi ideal untuk widget speedtest */
    background: #000; /* Background hitam agar menyatu */
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.speedtest-header h2 {
    color: var(--primary);
    margin-bottom: 10px;
}

.speedtest-note {
    margin-top: 15px;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Responsif untuk HP */
@media (max-width: 768px) {
    .iframe-container {
        height: 400px; /* Sesuaikan tinggi di HP */
    }
    .speedtest-box {
        padding: 15px;
    }
}


/* =========================================
   1. DESKTOP & TABLET (min-width: 768px)
   Khusus untuk tampilan layar lebar
   ========================================= */
@media (min-width: 768px) {
    .section-center {
    margin-top: 60px;
    }
    
    .cta-box {
        flex-direction: row;    /* Berjejer ke samping */
        justify-content: space-between; /* Teks kiri, tombol kanan */
        text-align: left;       /* Teks rata kiri */
        padding: 40px;
    }
    
    .cta-box .btn-cta {
        margin-top: 0;          /* Hilangkan margin atas di desktop */
    }

    .cta-text p {
        margin-bottom: 0;       /* Hilangkan margin bawah teks di desktop */
    }
    
    .header-fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1000;
        background: rgba(6, 11, 24, 0.85);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-bottom: 1px solid var(--glass-border);
        box-shadow: 0 4px 30px rgba(0, 168, 255, 0.15);
    }

    /* Memaksa Judul Tetap di Tengah Layar */
    .header-fixed h2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
        white-space: nowrap;
        text-align: center;
        width: auto;
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .services-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3 Kolom di Desktop */
        gap: 25px;
    }

    .partner-content {
        flex-direction: row;
        text-align: left;
        justify-content: center;
        gap: 30px;
    }
}

/* =========================================
   2. TABLET KHUSUS (max-width: 1024px)
   ========================================= */
@media screen and (max-width: 1024px) {
    .container {
        width: 90%;
        padding: 0 15px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Kolom di Tablet */
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }
    
    /* Positioning untuk tablet */
    .welcome-container-top {
        left: 65px;
        top: 19px;
    }
    
    .moving-text {
        font-size: 1rem;
    }
}

/* =========================================
   3. MOBILE OPTIMIZATION (max-width: 767px)
   Semua perbaikan untuk HP dikumpulkan di sini
   ========================================= */
@media (max-width: 767px) {
    /* Layout Dasar HP */
    .pricing-container, 
    .stats-grid, 
    .features-grid,
    .row {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .container {
        width: 95% !important;
        padding: 0 10px;
    }

    /* Typography HP */
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.3rem !important; }
    p  { font-size: 0.95rem !important; }

    /* Banner & Logo HP */
    .banner-logo-container {
        height: 200px; /* Tinggi banner HP lebih proporsional */
        min-height: auto;
    }

    .hero-banner-logo {
        width: 85%;
        max-width: 250px;
    }

    .moving-text {
        font-size: 0.85rem; /* Ukuran teks berjalan di HP */
    }
    
    .welcome-container-top {
        left: 55px;  /* Posisi lebih dekat ke sidebar toggle di mobile */
        right: 5px;  /* Lebih ketat di mobile */
        top: 18px;   /* Sejajar dengan tombol sidebar */
    }

    /* Sidebar & Navigation HP */
    .sidebar-links {
        padding: 20px 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sidebar-links li {
        width: 100%;
        text-align: center;
        margin: 12px 0;
    }

    /* Form HP */
    .registration-box {
        max-width: 100%;
        padding: 15px;
    }

    /* Tabel OLT (Card Mode di HP) */
    .olt-table thead { display: none; }
    .olt-table tr {
        display: block;
        margin-bottom: 15px;
        border: 1px solid var(--glass-border);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.05);
    }
    .olt-table td {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .olt-table td::before {
        content: attr(data-label);
        font-weight: bold;
        color: var(--primary);
    }
}

/* =========================================
   4. SMALL PHONE & BUTTONS (max-width: 580px)
   ========================================= */
@media (max-width: 580px) {
    
    .task-actions {
        display: flex;
        gap: 8px;
        margin-top: 10px;
    }

    .btn-task {
        padding: 8px 5px;
        font-size: 0.7rem;
        flex: 1;
        white-space: nowrap;
    }

    .bottom-toolbar {
        display: flex;
    }

    body {
        padding-bottom: 80px; /* Ruang untuk Toolbar */
    }
}
/* =========================================
   5. RESPONSIVE IMPROVEMENTS - DASHBOARD & TIKET
   ========================================= */

/* TABLET LANDSCAPE (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        width: 95%;
        padding: 0 15px;
    }

    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.2rem; }
    p  { font-size: 0.95rem; }

    /* Tiket System - Tablet */
    .ticket-system-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 10px;
    }

    .ticket-box {
        height: 65px;
        padding: 0 15px;
    }

    .ticket-inner h1 {
        font-size: 2rem;
    }

    .ticket-inner span {
        font-size: 0.85rem;
    }

    /* Stats Row - Tablet (sejajar dengan tiket) */
    .stats-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        padding: 0 15px;
        margin: 0 auto 12px auto;
    }

    .stat-card {
        padding: 10px;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .stat-info h3 {
        font-size: 1.1rem;
    }

    .stat-info p {
        font-size: 0.85rem;
    }

    /* Menu Grid */
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }

    .small-card {
        padding: 20px 10px;
    }

    .small-card h4 {
        font-size: 0.95rem;
    }

    .small-card i {
        font-size: 2rem;
    }

    /* Job List */
    .job-item {
        padding: 15px;
    }

    .job-icon {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    .job-details h4 {
        font-size: 1rem;
    }

    .job-details p {
        font-size: 0.85rem;
    }
}

/* TABLET PORTRAIT & SMALL DESKTOP (600px - 767px) */
@media (max-width: 767px) {
    .container {
        width: 96%;
        padding: 0 8px;
    }

    /* Typography */
    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.2rem !important; }
    h3 { font-size: 1rem !important; }
    p  { font-size: 0.9rem !important; }

    /* Navigation */
    .dash-nav {
        padding: 12px 15px;
    }

    .dash-nav h3 {
        font-size: 1.1rem;
    }

    .btn-logout {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    /* Header */
    .dash-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
        padding: 0;
        margin-bottom: 10px;
    }

    .dash-header h2 {
        font-size: 1.3rem;
        margin: 0;
    }

    .dash-header p {
        margin: 2px 0 0 0;
    }

    .date-badge {
        text-align: center;
        padding: 6px 10px;
        min-width: 65px;
    }

    /* Tiket System */
    .ticket-system-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin: 0 auto 20px auto;
        padding: 0 8px;
    }

    .ticket-box {
        height: 60px;
        padding: 0 12px;
    }

    .ticket-inner h1 {
        font-size: 1.8rem;
    }

    .ticket-inner span {
        font-size: 0.75rem;
    }

    /* Stats Row - Sejajar dengan tiket */
    .stats-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        margin: 0 auto 12px auto;
        padding: 0 12px;
    }

    .stat-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border-radius: 10px;
    }

    .stat-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    .stat-info {
        flex: 1;
    }

    .stat-info h3 {
        font-size: 0.95rem;
        margin: 0 0 2px 0;
    }

    .stat-info p {
        font-size: 0.8rem;
        margin: 0;
    }

    /* Section Title */
    .section-title {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .section-title h3,
    .section-title div,
    .section-title button {
        width: 100%;
        justify-content: center !important;
    }

    /* Search Bar */
    .search-container {
        padding: 0 10px !important;
        margin-bottom: 15px !important;
    }

    .search-container input {
        padding: 10px 12px 10px 35px !important;
        font-size: 0.9rem !important;
    }

    /* Job List */
    .job-list {
        padding: 0;
    }

    .job-item {
        padding: 12px;
        margin-bottom: 12px;
        gap: 10px;
    }

    .job-icon {
        width: 45px;
        height: 45px;
        font-size: 1.3rem;
        flex-shrink: 0;
    }

    .job-details h4 {
        font-size: 0.95rem;
        margin: 0 0 3px 0;
    }

    .job-details p {
        font-size: 0.8rem;
        margin: 0;
    }

    .badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }

    .btn-action {
        padding: 8px 12px;
        font-size: 0.9rem;
    }

    /* Menu Grid */
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .small-card {
        padding: 15px 10px;
        border-radius: 10px;
    }

    .small-card i {
        font-size: 1.8rem;
        margin-bottom: 8px;
    }

    .small-card h4 {
        font-size: 0.85rem;
        margin: 0;
    }

    /* Speedtest Box */
    .speedtest-box {
        padding: 15px;
        margin-bottom: 20px;
    }

    .speedtest-header h2 {
        font-size: 1.1rem;
    }

    .speedtest-header p {
        font-size: 0.85rem;
    }

    .iframe-container {
        height: 300px;
    }

    /* Modal Dialogs */
    .admin-login-overlay .card {
        width: 85% !important;
        max-width: 300px !important;
        padding: 20px !important;
    }

    .admin-login-overlay h3 {
        font-size: 1.1rem;
    }

    .form-group {
        margin-bottom: 12px;
    }

    .form-group label {
        font-size: 0.9rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 0.9rem;
        padding: 8px 10px;
    }

    .btn-submit, .btn-submit-admin {
        font-size: 0.9rem;
        padding: 10px 15px;
    }

    /* Table Responsive */
    .olt-table {
        font-size: 0.85rem;
    }

    .olt-table th {
        font-size: 0.8rem;
        padding: 8px 5px;
    }

    .olt-table td {
        font-size: 0.8rem;
        padding: 8px 5px;
    }
}

/* MOBILE PHONE (max-width: 599px) */
@media (max-width: 599px) {
    * {
        -webkit-tap-highlight-color: transparent;
    }

    body {
        padding-bottom: 80px;
    }

    .container {
        width: 98%;
        padding: 0 5px;
        margin: 0 auto;
    }

    /* Typography */
    h1 { font-size: 1.2rem !important; }
    h2 { font-size: 1rem !important; }
    h3 { font-size: 0.95rem !important; }
    p  { font-size: 0.85rem !important; }

    /* Navigation Bar */
    .dash-nav {
        padding: 10px 12px;
        gap: 10px;
    }

    .dash-nav h3 {
        font-size: 1rem;
    }

    .btn-logout {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .btn-logout i {
        font-size: 0.9rem;
    }

    /* Header */
    .dash-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        gap: 10px;
        margin-bottom: 12px;
    }

    .dash-header h2 {
        font-size: 1.15rem;
        margin: 0;
    }

    .dash-header p {
        font-size: 0.7rem;
        margin: 2px 0 0 0;
    }

    .date-badge {
        flex-shrink: 0;
        min-width: 60px;
        padding: 5px 8px;
    }

    /* Tiket System - MOBILE (2 kolom) */
    .ticket-system-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin: 0 auto 15px auto;
        padding: 0 8px;
    }

    .ticket-box {
        height: 60px;
        border-radius: 10px;
        padding: 0 12px;
    }

    .ticket-box:hover {
        transform: translateY(-2px);
    }

    .ticket-inner h1 {
        font-size: 1.8rem;
    }

    .ticket-inner span {
        font-size: 0.7rem;
    }

    /* Stats Row - MOBILE (sejajar dengan tiket) */
    .stats-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
        margin: 0 auto 10px auto;
        padding: 0 10px;
    }

    .stat-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;
        border-radius: 8px;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        flex-shrink: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stat-info {
        flex: 1;
    }

    .stat-info h3 {
        font-size: 0.9rem;
        margin: 0 0 2px 0;
    }

    .stat-info p {
        font-size: 0.75rem;
        margin: 0;
    }

    /* Section Title */
    .section-title {
        flex-direction: column !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .section-title h3 {
        width: 100%;
        text-align: center;
        background: transparent;
        border: 1px solid var(--primary);
        color: var(--primary);
        padding: 6px 10px !important;
        border-radius: 15px;
        font-size: 0.9rem;
        margin: 0;
    }

    #jamDigital {
        width: 100%;
        justify-content: center;
        padding: 6px 10px !important;
        font-size: 0.85rem !important;
    }

    .section-title button {
        width: 100%;
        justify-content: center;
        padding: 6px 10px !important;
        font-size: 0.85rem !important;
    }

    /* Search Container */
    .search-container {
        padding: 0 8px !important;
        margin-bottom: 12px !important;
    }

    .search-container input {
        padding: 9px 10px 9px 32px !important;
        font-size: 0.85rem !important;
        border-radius: 8px !important;
    }

    .search-container i {
        left: 12px !important;
        font-size: 0.9rem !important;
    }

    /* Job List */
    .job-list {
        padding: 0;
    }

    .job-item {
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 8px;
        gap: 8px;
    }

    .job-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        flex-shrink: 0;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .job-details {
        flex: 1;
    }

    .job-details h4 {
        font-size: 0.9rem;
        margin: 0 0 2px 0;
    }

    .job-details p {
        font-size: 0.75rem;
        margin: 0 0 3px 0;
    }

    .badge {
        font-size: 0.65rem;
        padding: 2px 6px;
        border-radius: 3px;
    }

    .btn-action {
        padding: 6px 10px;
        font-size: 0.85rem;
        border-radius: 6px;
    }

    /* Menu Grid */
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-bottom: 15px;
    }

    .small-card {
        padding: 12px 8px;
        border-radius: 8px;
    }

    .small-card i {
        font-size: 1.5rem;
        margin-bottom: 6px;
    }

    .small-card h4 {
        font-size: 0.8rem;
        margin: 0;
        line-height: 1.2;
    }

    /* Speedtest Box */
    .speedtest-box {
        padding: 12px;
        margin-bottom: 15px;
        border-radius: 8px;
    }

    .speedtest-header {
        margin-bottom: 10px;
    }

    .speedtest-header h2 {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    .speedtest-header p {
        font-size: 0.8rem;
    }

    .iframe-container {
        height: 250px;
        border-radius: 6px;
    }

    .speedtest-note {
        font-size: 0.75rem;
        margin-top: 8px;
    }

    /* Modal & Dialogs */
    .admin-login-overlay {
        padding: 10px;
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-login-overlay .card {
        width: 90% !important;
        max-width: 280px !important;
        padding: 15px !important;
        border-radius: 10px;
        margin: 20px auto;
        max-height: none !important;
    }

    .admin-login-overlay h3 {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .form-group label {
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 0.85rem;
        padding: 8px 10px;
        border-radius: 6px;
    }

    .btn-submit, .btn-submit-admin {
        font-size: 0.85rem;
        padding: 8px 12px;
        border-radius: 6px;
    }

    /* Form Container */
    .form-container {
        padding: 12px;
    }

    .form-container h2 {
        font-size: 1rem;
    }

    /* Table Responsive */
    .olt-table {
        font-size: 0.8rem;
    }

    .olt-table thead {
        display: none;
    }

    .olt-table tr {
        display: block;
        margin-bottom: 12px;
        border-radius: 8px;
    }

    .olt-table td {
        display: flex;
        justify-content: space-between;
        padding: 8px;
        font-size: 0.8rem;
    }

    .olt-table td::before {
        font-weight: bold;
        min-width: 80px;
    }

    /* Empty State */
    #empty-state img {
        width: 60px;
    }

    #empty-state h4 {
        font-size: 1rem;
        margin: 0 0 5px 0;
    }

    #empty-state p {
        font-size: 0.75rem;
    }
}

/* EXTRA SMALL PHONE (max-width: 480px) */
@media (max-width: 480px) {
    .container {
        width: 99%;
        padding: 0 3px;
    }

    /* Typography Extra Small */
    h1 { font-size: 1rem !important; }
    h2 { font-size: 0.9rem !important; }
    h3 { font-size: 0.85rem !important; }
    p  { font-size: 0.8rem !important; }

    /* Navigation */
    .dash-nav {
        padding: 8px 10px;
    }

    .dash-nav h3 {
        font-size: 0.95rem;
    }

    .btn-logout {
        padding: 5px 8px;
        font-size: 0.75rem;
    }

    /* Tiket MOBILE EXTRA SMALL */
    .ticket-system-container {
        gap: 6px;
        margin: 0 auto 12px auto;
        padding: 0 6px;
    }

    .ticket-box {
        height: 55px;
        padding: 0 10px;
    }

    .ticket-inner h1 {
        font-size: 1.6rem;
    }

    .ticket-inner span {
        font-size: 0.65rem;
    }

    /* Stats Row - EXTRA SMALL (sejajar dengan tiket) */
    .stats-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        margin: 0 auto 8px auto;
        padding: 0 8px;
    }

    /* Menu Grid - Single Column */
    .menu-grid {
        grid-template-columns: 1fr;
    }

    .small-card h4 {
        font-size: 0.75rem;
    }

    /* Button Accessibility */
    .btn-logout, 
    .btn-submit, 
    .btn-submit-admin,
    .btn-action {
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Sidebar Optimization */
    .sidebar-links li {
        padding: 10px 5px;
    }

    .sidebar-links a {
        font-size: 0.9rem;
    }

    /* Bottom Toolbar */
    .bottom-toolbar {
        gap: 0;
    }

    .toolbar-item {
        flex: 1;
        font-size: 0.65rem;
    }

    .toolbar-item span {
        display: none;
    }

    .fab-item span {
        display: block;
    }
}

/* ============================================
   RESPONSIVE DASHBOARD TEKNISI - SEMUA HP
   ============================================ */

/* HP Standar (320px - 480px) */
@media (max-width: 480px) {
    .container {
        padding: 10px;
    }

    .dash-header {
        padding: 15px 10px;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .dash-header h2 {
        font-size: 1.3rem !important;
        margin: 0;
    }

    .dash-header p {
        margin: 2px 0 0 0;
    }

    .date-badge {
        min-width: 65px;
        padding: 6px 10px;
        flex-shrink: 0;
    }

    .ticket-system-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        margin-bottom: 15px;
    }

    .ticket-box {
        height: 60px;
        border-radius: 10px;
        padding: 0 12px;
    }

    .ticket-inner h1 {
        font-size: 1.8rem;
    }

    .ticket-inner span {
        font-size: 0.7rem;
    }

    .search-container {
        padding: 0 10px;
        margin-bottom: 12px;
    }

    .search-container input {
        padding: 10px 12px 10px 35px;
        font-size: 0.9rem;
    }

    .job-item {
        padding: 12px;
        gap: 12px;
        margin-bottom: 8px;
    }

    .job-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .job-details h4 {
        font-size: 0.85rem;
    }

    .job-details p {
        font-size: 0.75rem;
    }

    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .small-card {
        padding: 12px;
        border-radius: 10px;
    }

    .small-card i {
        font-size: 1.5rem;
    }

    .small-card h4 {
        font-size: 0.75rem;
        margin-top: 8px;
    }

    .speedtest-box {
        padding: 15px;
    }

    .speedtest-header h2 {
        font-size: 1rem;
    }

    .speedtest-header p {
        font-size: 0.8rem;
    }

    .section-title {
        padding: 0 10px;
        margin-bottom: 12px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .section-title h3 {
        font-size: 0.85rem;
        margin: 0;
    }

    .badge-item {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    .btn-refresh {
        font-size: 0.8rem !important;
        padding: 6px 10px !important;
    }

    .stats-row {
        gap: 5px;
        padding: 0 10px;
    }

    .stat-card {
        padding: 8px;
    }

    .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .stat-info h3 {
        font-size: 0.8rem;
    }

    .stat-info p {
        font-size: 0.55rem;
    }
}

/* Extra small HP (max 280px) */
@media (max-width: 280px) {
    .stats-row {
        gap: 3px;
        padding: 0 6px;
        margin: 0 auto 8px auto;
    }

    .stat-card {
        padding: 6px;
    }

    .stat-icon {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .stat-info h3 {
        font-size: 0.75rem;
    }

    .stat-info p {
        font-size: 0.5rem;
    }
}

/* HP Kecil (280px - 320px) */
@media (max-width: 320px) {
    .container {
        padding: 8px;
    }

    .dash-nav h3 {
        font-size: 0.9rem;
    }

    .dash-header h2 {
        font-size: 1.1rem !important;
    }

    .dash-header p {
        font-size: 0.45rem;
    }

    .ticket-system-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .ticket-box {
        height: 55px;
        padding: 0 10px;
    }

    .ticket-inner h1 {
        font-size: 1.5rem;
    }

    .ticket-inner span {
        font-size: 0.65rem;
    }

    .stat-card {
        padding: 8px;
    }

    .stat-icon {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    .stat-info h3 {
        font-size: 0.8rem;
    }

    .stat-info p {
        font-size: 0.55rem;
    }

    .menu-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .small-card {
        padding: 10px;
    }

    .small-card h4 {
        font-size: 0.7rem;
    }
}

/* HP Besar (768px+) */
@media (min-width: 769px) {
    .container {
        max-width: 1200px;
    }

    .ticket-system-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }

    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .container {
        padding: 15px;
    }

    .ticket-system-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .stat-card {
        padding: 12px;
    }

    .job-item {
        padding: 14px;
    }
}

/* =========================================
   MARQUEE ANIMATION - Testimonial
   ========================================= */
.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 30s linear infinite;
}

.marquee-content span {
    display: inline-block;
    padding: 0 3rem;
    font-size: 0.95rem;
    color: var(--text-main);
}

.marquee-content span b {
    color: var(--primary);
}

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}

/* Pause animation on hover */
.marquee:hover .marquee-content {
    animation-play-state: paused;
}