/* ============================================
   FIX LAYOUT CENTER - PASTIKAN SEMUA CENTER
   HARUS DILOAD SETELAH STYLE.CSS
   ============================================ */

/* Reset Body & HTML - FORCE CENTER */
html {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

body {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Container Center - FORCE */
.container,
.container-fluid {
    max-width: 1140px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Force all containers to center */
section .container,
.home-section .container,
.statistics-section .container,
.info-section .container,
.chart-section .container,
.berita-section .container {
    max-width: 1140px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* All Sections Center - FORCE */
section,
section.home-section,
section.statistics-section,
section.info-section,
section.chart-section,
section.berita-section,
section.hero-section {
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    position: relative !important;
    clear: both !important;
    overflow: visible !important;
}

/* All Rows Center - FORCE */
section .row,
section.home-section .row,
/* General row styling - standard Bootstrap */
section.info-section .row,
section.chart-section .row,
section.berita-section .row {
    display: flex;
    flex-wrap: wrap;
}

/* All Columns */
section [class*="col-"] {
    box-sizing: border-box !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Center All Headings */
section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
section .display-1,
section .display-2,
section .display-3,
section .display-4,
section .display-5 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
}

/* Center Cards */
section .card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Center Tables */
section .table-responsive,
section .table {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

section .table {
    display: table !important;
}

/* Center Forms */
section form {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Center Alerts */
section .alert {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

/* Center Buttons - except block */
section .btn:not(.btn-block) {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

section .btn-block {
    width: 100% !important;
    display: block !important;
}

/* Center Pagination */
section .pagination {
    justify-content: center !important;
    display: flex !important;
}

/* Text Center Class */
.text-center {
    text-align: center !important;
}

/* Override untuk konten yang harus left */
section .card-body,
section .card-body p,
section .card-body ul,
section .card-body ol,
section .list-group,
section .table td,
section .table th,
section form label,
section form input,
section form textarea,
section form select {
    text-align: left !important;
}

/* Kecuali yang sudah text-center */
section .text-center,
section .card-body.text-center,
section .table.text-center,
section .table td.text-center,
section .table th.text-center {
    text-align: center !important;
}

/* ============================================
   FIX KHUSUS UNTUK HOME PAGE
   ============================================ */

/* Hero Section */
.hero-section {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    position: relative !important;
}

.hero-section .container {
    max-width: 1140px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 3rem 15px !important;
}

.hero-section .row {
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
}

/* Statistics Section - Container styling only */
.statistics-section {
    width: 100%;
    margin: 0 auto;
    padding: 4rem 0;
}

/* Statistics Section - Override removed, handled in style.css */

/* Info Section */
.info-section {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 4rem 0 !important;
}

.info-section .container {
    max-width: 1140px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

.info-section .row {
    margin: 0 auto !important;
    justify-content: center !important;
}

.info-section .col-lg-6 {
    display: flex !important;
    flex-direction: column !important;
}

.info-section .card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* Chart Section */
.chart-section {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 4rem 0 !important;
}

.chart-section .container {
    max-width: 1140px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

.chart-section .row {
    margin: 0 auto !important;
    justify-content: center !important;
}

.chart-section .col-12 {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.chart-section .card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.chart-section .card-body {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.chart-section .chart-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Berita Section */
.berita-section {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 4rem 0 !important;
}

.berita-section .container {
    max-width: 1140px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
}

.berita-section .row {
    margin: 0 auto !important;
    justify-content: center !important;
}

.berita-section .col-lg-4 {
    display: flex !important;
    justify-content: center !important;
}

.berita-section .card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 2rem auto !important;
}

/* Fix untuk row yang menggunakan no-gutters */
.no-gutters {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.no-gutters > [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Override inline styles yang mengganggu - FORCE */
[style*="margin-left: -15px"],
[style*="margin-right: -15px"],
.row[style*="margin"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force remove negative margins */
.row.no-gutters,
.row[class*="no-gutters"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Force all sections to be centered */
section > .container {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1140px !important;
}

/* Force all rows inside containers */
section > .container > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

/* Force all columns to have proper padding */
section > .container > .row > [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Pastikan semua section center */
section.home-section {
    display: block !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

section.home-section > .container {
    display: block !important;
    width: 100% !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Fix untuk row di dalam home section - standard Bootstrap */
section.home-section .row {
    display: flex;
    flex-wrap: wrap;
}

/* Fix untuk col di dalam home section */
section.home-section [class*="col-"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Responsive untuk home page */
@media (max-width: 992px) {
    .statistics-section .col-lg-4,
    .berita-section .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .info-section .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem !important;
    }
}

@media (max-width: 768px) {
    .statistics-section .col-lg-4,
    .statistics-section .col-md-4,
    .berita-section .col-lg-4,
    .berita-section .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .info-section .col-lg-6,
    .info-section .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ============================================
   FINAL FIX - PASTIKAN SEMUA CENTER
   ============================================ */

/* Force center untuk semua elemen di home page */
body > section,
body > section > .container,
body > section > .container > .row {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Override Bootstrap yang mungkin konflik */
.container {
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.row {
    margin-right: -15px !important;
    margin-left: -15px !important;
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Tapi untuk home section, kita override row margin */
.home-section .container .row,
/* Sections container rows - Clean grid */
.info-section .container .row,
.chart-section .container .row,
.berita-section .container .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    justify-content: center !important;
}

/* Statistics section row - handled separately above */

/* Pastikan semua judul center */
.home-section h1,
.home-section h2,
.home-section h3,
.home-section .display-4,
.home-section .display-5 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    width: 100% !important;
}

/* Pastikan semua card center */
.home-section .card {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Statistics Section - Final Cleanup - Consolidated above */