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

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

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: 30px;
}

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

.sidebar .widget,
.sidebar .plugin {
  background-color: #242830;
  border-radius: 12px;
  padding: 25px;
  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: 26px;
  margin: 30px 0;
  border: 1px solid #333;
  box-shadow: 0 15px 35px rgba(0,0,0,.4);
}

.darkit-title {
  font-size: 22px;
  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: 14px 18px;
  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: 14px;
  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: 18px;
  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;
}

/* ===============================
   SIDEBAR LAYOUT FIX
================================ */

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

#primary { width: 75%; }
#right-sidebar { width: 25%; }

@media (max-width: 768px) {
  .site-content { flex-direction: column; }
  #primary, #right-sidebar { width: 100%; }
}
/* ==========================================
   TOP MENU FIX – CHROME SAFE VERSION
========================================== */

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

.main-navigation .main-nav ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* jangan paksa nowrap */
  gap: 18px;
  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: 13px;
  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;
  }
}