/* =========================================
   RF MODERN FULL WIDTH LAYOUT
   ========================================= */

/* 1. Container Utama Mentok Pinggir */
/* === UPDATE LAYOUT FULL TAPI RAPI === */
.rf-container {
    /* Lebar website 96% dari layar (Menyisakan 2% kiri dan 2% kanan) */
    width: 96%; 
    
    /* Hapus max-width agar tidak terkunci di 1600px jika layar user besar */
    max-width: 100%; 
    
    /* INI KUNCINYA: Margin Auto membuat browser membagi sisa ruang sama rata */
    margin-left: auto !important;
    margin-right: auto !important;
    
    padding: 0;
    display: block;
}

/* Hapus juga margin negatif pada row compact agar tidak 'bocor' ke samping */
.row-compact {
    margin-right: -10px;
    margin-left: -10px;
}
.row-compact > [class*="col-"] {
    padding-right: 10px;
    padding-left: 10px;
}

/* 3. Panel/Kotak Widget Style RF */
.rf-panel {
    background: rgba(10, 10, 10, 0.85); /* Hitam Pekat Transparan */
    border: 1px solid #500; /* Border Merah Gelap */
    margin-bottom: 5px; /* Jarak vertikal antar widget rapat */
    position: relative;
}

/* Header Judul Widget */
.rf-panel-header {
    background: linear-gradient(to bottom, #300 0%, #000 100%);
    color: #ffb300; /* Warna Emas */
    padding: 8px 10px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid #500;
    letter-spacing: 0.5px;
}

/* Isi Widget */
.rf-panel-body {
    padding: 10px;
    color: #ccc;
    font-size: 12px;
}

/* 4. Slider Agar Tidak Gepeng */
.main-slider-img {
    width: 100%;
    height: 450px; /* DITURUNKAN: Dari 600px jadi 450px */
    object-fit: cover;
    object-position: center;
    border-bottom: 1px solid #500;
}

/* 5. Tabel Status Server */
.table-rf {
    width: 100%;
    margin: 0;
}
.table-rf td {
    padding: 5px 0;
    border-bottom: 1px solid #222;
}
.table-rf tr:last-child td { border: none; }

/* Warna Status */
.st-online { color: #00ff00; font-weight: bold; text-shadow: 0 0 5px #00ff00; }
.st-offline { color: #ff0000; font-weight: bold; }

/* Jarak Header (Agar tidak ketutup navbar) */
.content-wrapper {
    padding-top: 80px; 
    padding-bottom: 20px;
}

/* Responsif untuk Layar Kecil (HP) */
@media (max-width: 991px) {
    .main-slider-img { height: 250px; }
    .row-compact { display: block; }
    .rf-container { max-width: 100%; padding: 0; }
}
/* ==================================================
   FORCE FULL WIDTH (PENJEBOL LEBAR)
   ================================================== */

/* 1. Reset Pembatas Lama (Ini Biang Keroknya) */
.wrapper, 
.content-area, 
.container,
.topPanel-container {
    width: 100% !important;      /* Paksa ambil 100% lebar */
    max-width: 98% !important;   /* Batasi 98% agar ada sela kiri-kanan seimbang */
    min-width: auto !important;  /* Hapus batas minimal */
    margin: 0 auto !important;   /* Paksa Posisi Tengah (Center) */
    padding: 0 !important;
    float: none !important;
}

/* 2. Pastikan Baris Grid Mengikuti Lebar Baru */
.row {
    width: 100% !important;
    margin: 0 !important;
    display: flex;               /* Gunakan Flexbox agar kolom rapi */
    flex-wrap: wrap;
}

/* 3. Atur Ulang Proporsi Kolom (Agar Sidebar Pas) */
@media (min-width: 992px) {
    /* Di Layar PC */
    .col-md-9 {
        width: 78% !important;    /* Konten Utama 78% */
        flex: 0 0 78%;
        max-width: 78%;
        padding-right: 15px !important; /* Jarak ke sidebar */
    }
    
    .col-md-3 {
        width: 22% !important;    /* Sidebar 22% */
        flex: 0 0 22%;
        max-width: 22%;
    }
}

/* 4. Fix Navbar Agar Ikut Melebar */
.navbar .container {
    width: 98% !important;
    max-width: 98% !important;
}
/* ==================================================
   FORCE FULL WIDTH (FIXED LAYOUT)
   ================================================== */

/* 1. Pastikan Container Lebar Penuh */
.wrapper, 
.content-area, 
.container,
.topPanel-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
}

/* 2. Container Khusus RF dengan Padding Aman */
.rf-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px; /* Memberi jarak aman kiri-kanan */
    overflow-x: hidden; /* Mencegah scroll samping */
}

/* 3. Baris Flexbox (Agar kolom sejajar) */
.row-compact {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
}

/* 4. Atur Ulang Proporsi Kolom (Safe Mode 75% - 25%) */
@media (min-width: 992px) {
    /* Kolom Kiri (Konten Utama) */
    .col-md-9 {
        width: 75% !important; 
        flex: 0 0 75%;
        max-width: 75%;
        padding-right: 5px !important; /* Jarak tipis ke sidebar */
        padding-left: 10px !important;
    }
    
    /* Kolom Kanan (Sidebar) */
    .col-md-3 {
        width: 30% !important;
        flex: 0 0 25%;
        max-width: 25%;
        padding-left: 5px !important; /* Jarak tipis dari konten */
        padding-right: 10px !important;
    }
}

/* 5. Fix untuk Layar HP (Biar turun rapi) */
@media (max-width: 991px) {
    .col-md-9, .col-md-3 {
        width: 100% !important;
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* =========================================
   RF CUSTOM NAVBAR STYLE (TRANSPARENT)
   ========================================= */

/* 1. Reset Navbar Default Bootstrap */
.navbar-rf {
    background-color: rgba(0, 0, 0, 0.7); /* Hitam transparan */
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Garis bawah tipis */
    min-height: 60px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.8); /* Bayangan bawah */
}

/* 2. Posisi Menu di Tengah */
.navbar-collapse.text-center {
    text-align: center;
}
.navbar-nav.center-nav {
    display: inline-block;
    float: none;
    margin: 0;
}

/* 3. Styling Link Menu Utama */
.navbar-rf .navbar-nav > li > a {
    color: #f0f0f0;          /* Warna teks putih terang */
    font-family: "Segoe UI", Tahoma, sans-serif; /* Font tegas */
    font-size: 13px;
    font-weight: 800;        /* Tebal */
    text-transform: uppercase;
    padding: 20px 20px;      /* Jarak antar menu */
    transition: all 0.3s ease;
    text-shadow: 1px 1px 2px #000;
    letter-spacing: 0.5px;
}

/* 4. Efek Hover & Active (Warna Emas/Oranye) */
.navbar-rf .navbar-nav > li > a:hover,
.navbar-rf .navbar-nav > li > a:focus,
.navbar-rf .navbar-nav > .open > a,
.navbar-rf .navbar-nav > .open > a:hover,
.navbar-rf .navbar-nav > .open > a:focus {
    color: #ffb300;          /* Warna Emas RF */
    background-color: transparent !important; /* Hilangkan kotak background default */
    text-shadow: 0 0 15px rgba(255, 179, 0, 0.6); /* Efek glow */
    transform: scale(1.05); /* Sedikit membesar saat hover */
}

/* 5. Dropdown Menu Style */
.navbar-rf .dropdown-menu {
    background-color: rgba(15, 15, 15, 0.95); /* Hitam pekat */
    border: 1px solid #ffb300; /* Border emas tipis */
    border-radius: 0;
    padding: 0;
    margin-top: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.8);
    min-width: 180px;
}

.navbar-rf .dropdown-menu > li > a {
    color: #ccc;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    transition: all 0.2s;
    text-align: left;
}

.navbar-rf .dropdown-menu > li > a:hover {
    background-color: #3a0a0a; /* Merah gelap saat hover sub-menu */
    color: #ffb300;
    padding-left: 25px; /* Efek geser kanan */
}

/* Hapus border pada item terakhir dropdown */
.navbar-rf .dropdown-menu > li:last-child > a {
    border-bottom: none;
}

/* 6. Caret (Panah Dropdown) */
.navbar-rf .caret {
    border-top-color: #aaa;
    border-bottom-color: #aaa;
    margin-left: 5px;
}
.navbar-rf .open > a .caret,
.navbar-rf a:hover .caret {
    border-top-color: #ffb300;
    border-bottom-color: #ffb300;
}

/* 7. Responsif untuk HP (Mobile) */
@media (max-width: 768px) {
    .navbar-rf {
        background-color: #111; /* Hitam solid di HP agar terbaca */
    }
    .navbar-nav.center-nav {
        display: block;
        text-align: left;
    }
    .navbar-rf .navbar-nav > li > a {
        padding: 12px 15px;
        border-bottom: 1px solid #222;
    }
    .navbar-collapse {
        border-top: 1px solid #333;
    }
}