/* =====================================================
   DARKITMOD – FULL SEMI DARK CLEAN VERSION
===================================================== */

/* ===============================
   GLOBAL
================================ */

body{

    font-size:13px !important;

}

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-color: #1b1f24;
  color: #e6e6e6;
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.site-content { flex: 1 0 auto; }
.site-footer { flex: 0 0 auto; }

.grid-container,
.wp-block-group__inner-container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ===============================
   LINK
================================ */

a { color: #4da3ff; text-decoration: none; }
a:hover { color: #79c0ff; }

/* ===============================
   HEADER
================================ */

.site-header {
  background-color: #222831;
  color: #ffffff;
}

.main-title a { color: #ffffff; }
.site-description { color: #bbbbbb; }

/* ===============================
   NAVIGATION
================================ */

.main-navigation,
.main-navigation ul ul {
  background-color: #0f1318;
}

.main-navigation .main-nav ul li a {
  color: #d6d6d6;
}

.main-navigation .main-nav ul li:hover > a {
  background-color: #1a2026;
  color: #4da3ff;
}

/* ===============================
   CONTENT AREA
================================ */

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.one-container .container,
.inside-page-header {
  background-color: #2a2f36;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  padding: 24px;
}

/* ===============================
   SIDEBAR
================================ */

.sidebar .widget,
.sidebar .plugin {
  background-color: #242830;
  border-radius: 12px;
  padding: 18px;
  color: #dddddd;
}

.sidebar .widget-title,
.sidebar .plugin-title {
  color: #ffffff;
}

/* ===============================
   FOOTER
================================ */

.footer-widgets { background-color: #1f242b; }

.site-info {
  background-color: #0f1318;
  color: #cccccc;
}

/* ===============================
   FORM
================================ */

input, textarea, select {
  background-color: #2a2f36;
  color: #ffffff;
  border: 1px solid #3a3f47;
}

/* ===============================
   DOWNLOAD BOX
================================ */

.darkit-box {
  background: #242830;
  border-radius: 18px;
  padding: 18px;
  margin: 30px 0;
  border: 1px solid #333;
  box-shadow: 0 15px 35px rgba(0,0,0,.4);
}

.darkit-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.darkit-desc { color: #bbbbbb; margin-bottom: 20px; }

.darkit-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

@media (max-width: 640px) {
  .darkit-actions { grid-template-columns: 1fr; }
}

.darkit-btn {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 16px;
  font-weight: 600;
  color: #ffffff !important;
  transition: .25s ease;
}

.darkit-btn:hover { transform: translateY(-3px); }

.darkit-playstore {
  background: linear-gradient(135deg, #1dd15d, #00b894);
}

.darkit-direct {
  background: linear-gradient(135deg, #ff7a18, #ff9f43);
}

/* ===============================
   ABOUT DARKIT BOX - MATRIX HACKER VIBES
================================ */
.about-darkit-box {
  position: relative;
  padding: 10px 15px; /* vertical rapat */
  background: linear-gradient(145deg, #1c2230, #16202a); /* biru gelap */
  border-radius: 14px;
  line-height: 1.6;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: #ffffff; /* teks normal putih */
  text-shadow: 0 0 6px #ffffff; /* glow putih */
  overflow: hidden;
  border: 2px solid #4da3ff; /* border biru neon */
  box-shadow: 0 0 10px rgba(77,163,255,0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-darkit-box h2 {
  color: #ffffff; /* judul putih */
  text-shadow: 0 0 8px #ffffff; /* glow putih */
  margin-top: 0;
  font-size: 17px;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
}

.about-darkit-box p {
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.about-darkit-box strong {
  color: #ffffff;
  text-shadow: 0 0 6px #ffffff; /* glow putih */
  position: relative;
  z-index: 2;
}

/* Hover effect */
.about-darkit-box:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 35px rgba(0,0,0,0.7), 0 0 20px rgba(77,163,255,0.5);
}

/* Canvas Matrix */
.matrix-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% + 50px);  /* ekstra 50px supaya menutupi padding kanan */
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ===============================
   RELATED POST
================================ */

.related-post-box {
  background: #242830;
  border: 1px solid #333;
  border-left: 5px solid #4da3ff;
  border-radius: 10px;
  padding: 18px;
  margin: 25px 0;
  transition: .25s ease;
}

.related-post-box:hover {
  transform: translateY(-3px);
}

.related-post-box a {
  color: #ffffff;
  font-weight: 600;
}

/* ===============================
   BACA JUGA
================================ */

.baca-juga {
  background-color: #1f2a1f;
  border-left: 5px solid #22c55e;
  padding: 14px;
  border-radius: 6px;
  margin: 20px 0;
  color: #d4f5d4;
}

/* ===============================
   PAGINATION
================================ */

.paginator-link {
  background-color: #2a2f36;
  padding: 10px 14px;
  border-radius: 8px;
}

/* ===============================
   ADS FIX
================================ */

.ads-universal,
.ads-bawah-artikel {
  margin: 30px 0;
  text-align: center;
}

ins.adsbygoogle[data-ad-status="unfilled"] {
  display: none !important;
}

/* ==========================================
   TOP MENU FIX – CHROME SAFE VERSION
========================================== */

.main-navigation {
  padding: 6px 0;
}

.main-navigation .main-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* jangan paksa nowrap */
  gap: 14px;
  margin: 0;
  padding: 0 15px;
}

.main-navigation .main-nav ul li {
  list-style: none;
  flex: 0 0 auto; /* penting buat Chrome */
}

.main-navigation .main-nav ul li a {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 0;
  white-space: nowrap; /* supaya text tidak pecah */
  color: #ccc;
  transition: 0.2s ease;
}

.main-navigation .main-nav ul li a:hover {
  color: #4da3ff;
}

/* Desktop paksa 1 baris */
@media (min-width: 992px) {
  .main-navigation .main-nav ul {
    flex-wrap: nowrap;
  }
}

/* ===============================
   CHROME & HOLA FIX
================================ */

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

html,
body{
    overflow-x:hidden;
    width:100%;
}

#page,
.site{
    max-width:100%;
    overflow-x:hidden;
}

.site-content{
    overflow-x:hidden;
}

.inside-article{
    overflow-x:hidden;
}

/* Tabel responsif */
.wp-block-table,
table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-collapse:collapse;
}

/* Gambar */
img{
    max-width:100%;
    height:auto;
}

/* Mobile */
@media (max-width:768px){

    .grid-container{
        padding-left:12px;
        padding-right:12px;
    }

    .inside-article{
        padding:18px;
    }

}

/* ===============================
   TABLE FONT FIX
================================ */

.entry-content table,
.wp-block-table table,
table{
    font-size:12px !important;
}

.entry-content table th,
.entry-content table td,
.wp-block-table th,
.wp-block-table td,
table th,
table td{
    font-size:12px !important;
    line-height:1.5 !important;
    padding:8px 10px !important;
}

.entry-content h2{
    font-size:30px;
}

/* ===============================
   BUTTON DOWNLOAD
================================ */

.button{
    display:inline-block;
    padding:12px 28px;
    background:linear-gradient(135deg,#4da3ff,#0066ff);
    color:#fff !important;
    text-decoration:none !important;
    border-radius:12px;
    font-size:15px;
    font-weight:700;
    text-align:center;
    box-shadow:0 8px 20px rgba(77,163,255,.35);
    transition:.25s ease;
}

.button:hover{
    color:#fff !important;
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(77,163,255,.45);
}

/* ===============================
   PAGINATOR FIX
================================ */

.paginator{
    margin:20px 0;
}

.paginator .pagination{
    display:flex !important;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    list-style:none !important;
    padding:0 !important;
    margin:0 !important;
}

.paginator .pagination li{
    list-style:none !important;
    margin:0 !important;
    padding:0 !important;
}

.paginator .paginator-link{
    display:block;
    padding:10px 18px;
    background:#2a2f36;
    color:#4da3ff !important;
    border-radius:10px;
    text-decoration:none;
    transition:.2s;
}

.paginator .paginator-link:hover{
    background:#3a4049;
    color:#fff !important;
}

.paginator .disabled{
    opacity:.5;
    pointer-events:none;
}

/* ==================================
   FINAL DESKTOP + SIDEBAR FIX
================================== */

.wrapper{
    width:100%;
}

#page{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
}

.site-content{
    display:flex;
    align-items:flex-start;
    gap:30px;
}

#primary,
.content-area,
.grid-75{
    flex:1;
    width:auto !important;
    max-width:none !important;
    min-width:0;
}

#right-sidebar,
.widget-area,
.grid-25{
    width:280px !important;
    max-width:280px !important;
    flex:0 0 280px;
}

@media (max-width:768px){

    #page{
        padding:0 12px;
    }

    .site-content{
        display:block;
    }

    #primary,
    #right-sidebar,
    .grid-75,
    .grid-25{
        width:100% !important;
        max-width:100% !important;
    }

}

/* ===============================
   CONTENT SPACING FIX
================================ */

.grid-container{
    max-width:1100px;
    margin:0 auto;
    padding:0 20px;
    box-sizing:border-box;
}

.site-content{
    padding:0;
}

@media (max-width:768px){
    .grid-container{
        padding:0 12px;
    }
}


/* ===== DESKTOP WIDTH FIX ===== */

@media (min-width:769px){

    .grid-container{
        max-width:1200px;
        margin:0 auto;
        padding:0 15px;
        box-sizing:border-box;
    }

    .content-area,
    #primary{
        flex:1 !important;
        width:auto !important;
        max-width:none !important;
        min-width:0 !important;
    }

    #right-sidebar,
    .widget-area{
        flex:0 0 280px !important;
        width:280px !important;
        max-width:280px !important;
    }

}


/* ===============================
   GENERATEPRESS GRID FIX
================================ */

.grid-container{
    width:100%;
    max-width:1200px;
    margin:0 auto !important;
    padding-left:20px !important;
    padding-right:20px !important;
    box-sizing:border-box;
}

.grid-parent{
    box-sizing:border-box;
}

.site-content{
    display:flex;
    gap:25px;
    align-items:flex-start;
}

.grid-75{
    width:calc(100% - 305px) !important;
    flex:0 0 calc(100% - 305px);
}

.grid-25{
    width:280px !important;
    flex:0 0 280px;
}

@media(max-width:768px){

    .site-content{
        flex-direction:column;
    }

    .grid-75,
    .grid-25{
        width:100% !important;
        flex:0 0 100%;
    }

}