/* =========================================
   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 #505049; /* 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: 3px solid #3322a4;
    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 #505049;
}

/* 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%;
    }
}