/*
 * Dark Mode Override CSS — Redesigned (Elegant Edition)
 * Theme: thbgn (GP Blog Negeri)
 * Terinspirasi dari layout card modern seperti mediav3-15.truetradinggroup.com
 */

/* =============================================
   GOOGLE FONTS — Tambah font elegan
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* =============================================
   CSS VARIABLES — Refined Dark Palette
   ============================================= */
:root {
  --contrast: #f0f0f5;
  --contrast-2: #94a3c4;
  --contrast-3: #6b7a99;
  --base: #1a1d2e;
  --base-2: #141625;
  --base-3: #10121f;
  --accent: #4f8ef7;
  --accent-glow: rgba(79, 142, 247, 0.18);
  --tax-bg: #1a1d2e;
  --tax-color: #ff6b81;
  --yellow: #ffd166;
  --blue: #4f8ef7;
  --purple: #c084fc;
  --block-bg: #1e3a5f;

  /* New vars */
  --card-bg: #181b2d;
  --card-border: rgba(255, 255, 255, 0.055);
  --card-hover: #1e2236;
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.6);
  --radius: 12px;
  --radius-sm: 7px;
  --radius-pill: 50px;
  --badge-bg: rgba(79, 142, 247, 0.14);
  --badge-color: #6ba8ff;
  --surface: #1c1f32;
}

/* =============================================
   BODY & TYPOGRAPHY
   ============================================= */
body {
  background-color: #0e1020 !important;
  color: #d8ddf0 !important;
  font-family: 'DM Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Sora', sans-serif !important;
  color: #edf0fa !important;
  letter-spacing: -0.01em;
}

p {
  color: #a8b0cc !important;
  line-height: 1.75 !important;
}

a {
  color: #6baaff !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
a:hover, a:focus, a:active {
  color: #a5c8ff !important;
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar {
  width: 6px;
  background: #0e1020;
}
::-webkit-scrollbar-thumb {
  background: #2e3252;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4f5880;
}

/* =============================================
   HEADER
   ============================================= */
.site-header {
  background-color: rgba(14, 16, 32, 0.95) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 999 !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.5) !important;
}

.top-bar {
  background-color: #080a14 !important;
  color: #5a647d !important;
  font-size: 12px !important;
  letter-spacing: 0.03em !important;
}

.main-title a,
.main-title a:hover {
  color: #edf0fa !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

.site-description {
  color: #5a647d !important;
}

.inside-header {
  padding: 12px 0 !important;
}

/* =============================================
   NAVIGATION
   ============================================= */
.main-navigation,
.main-navigation ul ul {
  background: none !important;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  color: #b8c0d8 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.01em !important;
  padding: 0 14px !important;
  transition: color 0.2s ease !important;
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a {
  color: #7ab8ff !important;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: #7ab8ff !important;
  position: relative !important;
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 12px !important;
  left: 14px !important;
  right: 14px !important;
  height: 2px !important;
  background: linear-gradient(90deg, #4f8ef7, #a78bfa) !important;
  border-radius: 2px !important;
}

.main-navigation ul ul {
  background-color: #15182a !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
  border-radius: var(--radius-sm) !important;
  padding: 6px 0 !important;
  min-width: 220px !important;
}

.main-navigation ul ul li a {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  padding: 10px 20px !important;
  font-size: 14px !important;
  color: #9aa3bf !important;
}

.main-navigation ul ul li:last-child a {
  border-bottom: none !important;
}

/* Mobile nav */
#site-navigation {
  background: #0e1020 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.mobile-menu-control-wrapper .menu-toggle,
.mobile-menu-control-wrapper .menu-toggle:hover,
.mobile-menu-control-wrapper .menu-toggle:focus {
  background-color: rgba(255,255,255,0.04) !important;
  color: #d0d8f0 !important;
  border-radius: 8px !important;
}

/* =============================================
   SEARCH
   ============================================= */
.search-modal-form,
.gp-search-modal .gp-modal__overlay {
  background-color: rgba(14, 16, 32, 0.97) !important;
  color: #e0e4f4 !important;
  border-radius: var(--radius) !important;
}

.search-modal-form .search-field {
  color: #e0e4f4 !important;
  background: transparent !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 18px !important;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  color: #d8ddf0 !important;
  background-color: #1a1d2e !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
  background-color: #1e2236 !important;
  border-color: rgba(79, 142, 247, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.1) !important;
  color: #f0f2fc !important;
  outline: none !important;
}

/* =============================================
   CONTENT AREA
   ============================================= */
.site-content {
  background-color: #0e1020 !important;
  padding-top: 30px !important;
}

/* =============================================
   POST CARDS — Gaya elegan ala referensi
   ============================================= */

/* Card wrapper utama */
.gb-container-69d2da36,
.gb-container-0b3c85a5 {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.gb-container-69d2da36:hover,
.gb-container-0b3c85a5:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: rgba(79, 142, 247, 0.2) !important;
}

/* Image container dalam card */
.gb-container-aacd7eca {
  position: relative !important;
  overflow: hidden !important;
}

.gb-container-aacd7eca figure img,
.gb-block-image-adf58711 img {
  transition: transform 0.4s ease !important;
  width: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

.gb-container-69d2da36:hover .gb-container-aacd7eca figure img {
  transform: scale(1.04) !important;
}

/* Text area di bawah gambar dalam card */
.gb-container-adab90c3 {
  background: var(--card-bg) !important;
  padding: 18px 20px 20px !important;
  border: none !important;
  box-shadow: none !important;
}

/* Tanggal post */
p.gb-headline-d60fg9b1,
p.gb-headline-2f9711a8,
.entry-date {
  color: #5e6882 !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* Judul post di card */
h2.gb-headline-b05dfdaf a,
h2.gb-headline-cbdd5f90 a,
.entry-title a {
  color: #dde2f5 !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
}

h2.gb-headline-b05dfdaf a:hover,
h2.gb-headline-cbdd5f90 a:hover,
.entry-title a:hover {
  color: #7ab8ff !important;
}

/* Excerpt di card */
p.gb-headline-291026dc {
  color: #7a8399 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  margin-top: 6px !important;
}

/* Shadow classes */
.shadow {
  box-shadow: var(--shadow-card) !important;
}
.shadow2 {
  box-shadow: none !important;
}

/* =============================================
   ENTRY META
   ============================================= */
.entry-meta {
  color: #5e6882 !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
}

/* =============================================
   CATEGORY BADGE / TAG
   ============================================= */
.post-categories span,
.post-categories span a {
  background: var(--badge-bg) !important;
  color: var(--badge-color) !important;
  border: 1px solid rgba(79, 142, 247, 0.2) !important;
  border-radius: var(--radius-pill) !important;
  padding: 3px 11px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: background 0.2s ease !important;
}

.post-categories span:hover,
.post-categories span a:hover {
  background: rgba(79, 142, 247, 0.25) !important;
}

/* NEWS badge di card */
.gb-container-aacd7eca::before,
[class*="gb-block-image"]::after {
  content: '';
}

/* =============================================
   WIDGET TITLE — dengan garis aksen
   ============================================= */
.widget-title,
h3.gb-headline-0ed480c2 {
  color: #edf0fa !important;
  font-family: 'Sora', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: -0.01em !important;
  border-bottom: none !important;
  padding-bottom: 12px !important;
  margin-bottom: 16px !important;
  position: relative !important;
}

.widget-title::after,
h3.gb-headline-0ed480c2::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 36px !important;
  height: 3px !important;
  background: linear-gradient(90deg, #4f8ef7, #a78bfa) !important;
  border-radius: 3px !important;
}

/* =============================================
   SIDEBAR — clean panel style
   ============================================= */
.sidebar .widget,
.widget-area .widget {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
  box-shadow: var(--shadow-card) !important;
  margin-bottom: 20px !important;
}

/* Random post sidebar items */
.gb-container-e5d00ed3 {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 12px 0 !important;
  margin-bottom: 0 !important;
  transition: background 0.2s ease !important;
  border-radius: 0 !important;
}

.gb-container-e5d00ed3:hover {
  background: rgba(255,255,255,0.025) !important;
  border-radius: var(--radius-sm) !important;
}

.gb-container-e5d00ed3:last-child {
  border-bottom: none !important;
}

.gb-image-db568a19 {
  border-radius: var(--radius-sm) !important;
  object-fit: cover !important;
}

h2.gb-headline-cbdd5f90 {
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
  color: #c8ceea !important;
}

h2.gb-headline-cbdd5f90 a {
  color: #c8ceea !important;
}
h2.gb-headline-cbdd5f90 a:hover {
  color: #7ab8ff !important;
}

.sidebar a,
.widget-area a {
  color: #9aa3bf !important;
  transition: color 0.2s ease !important;
}
.sidebar a:hover,
.widget-area a:hover {
  color: #7ab8ff !important;
}

/* =============================================
   STICKY SIDEBAR WRAPPER
   ============================================= */
.gb-container-f59d599a {
  background: transparent !important;
}

/* =============================================
   GB CONTAINERS — global dark override
   ============================================= */
.gb-container-adab90c3,
.gb-container-4e15af78 {
  background-color: var(--card-bg) !important;
}

.gb-container-07844459 {
  background-color: #141625 !important;
}

[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:#fff"],
[style*="background-color: #fff"] {
  background-color: var(--card-bg) !important;
}

/* =============================================
   HEADLINES — EDITOR CHOICE section
   ============================================= */
h2.gb-headline-8a36c864 a {
  color: #d5daf0 !important;
  font-family: 'Sora', sans-serif !important;
}
h2.gb-headline-8a36c864 a:hover {
  color: #7ab8ff !important;
}

p.gb-headline-34241274 {
  color: #5e6882 !important;
  font-size: 11.5px !important;
}

p.gb-headline-ee1092c3 {
  color: #7a8399 !important;
  font-size: 13px !important;
}

/* =============================================
   PAGINATION — modern pill style
   ============================================= */
.paging-navigation {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: none !important;
  padding: 20px 0 !important;
}

.paging-navigation span,
.paging-navigation a {
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #9aa3bf !important;
  background: var(--card-bg) !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  margin: 2px !important;
}

.paging-navigation a:hover {
  background: rgba(79, 142, 247, 0.12) !important;
  border-color: rgba(79, 142, 247, 0.3) !important;
  color: #7ab8ff !important;
}

.paging-navigation span.current {
  background: linear-gradient(135deg, #4f8ef7, #7c5fe6) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 3px 12px rgba(79, 142, 247, 0.4) !important;
}

/* =============================================
   BUTTONS
   ============================================= */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.wp-block-button__link:not(.has-background) {
  color: #fff !important;
  background: linear-gradient(135deg, #4f8ef7, #7c5fe6) !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 3px 12px rgba(79, 142, 247, 0.3) !important;
  transition: all 0.2s ease !important;
}

button:hover,
a.button:hover {
  box-shadow: 0 5px 20px rgba(79, 142, 247, 0.5) !important;
  transform: translateY(-1px) !important;
}

a.generate-back-to-top {
  background: rgba(79, 142, 247, 0.15) !important;
  color: #7ab8ff !important;
  border: 1px solid rgba(79, 142, 247, 0.3) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(8px) !important;
}

a.generate-back-to-top:hover {
  background: rgba(79, 142, 247, 0.3) !important;
}

/* =============================================
   FOOTER
   ============================================= */
.footer-widgets,
.footer-widgets-container {
  background-color: #0c0e1c !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

.site-info,
.inside-site-info {
  background-color: #08091a !important;
  color: #3e4563 !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
  font-size: 13px !important;
}

.site-info a {
  color: #5e6882 !important;
}

.gb-container-2f05acdd {
  background: linear-gradient(135deg, #101530, #0c0e1c) !important;
}

.gb-container-8fcdf41a {
  background-color: #08091a !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
}

/* =============================================
   TOC (Table of Contents)
   ============================================= */
#ez-toc-container {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
}

#ez-toc-container .ez-toc-title-container {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding-bottom: 12px !important;
}

div#ez-toc-container ul li {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

#ez-toc-container a {
  color: #6baaff !important;
}

#ez-toc-container a:hover {
  color: #a5c8ff !important;
}

/* =============================================
   COMMENTS
   ============================================= */
.comments-area {
  border-color: rgba(255,255,255,0.06) !important;
}

.comment-list li.depth-1 {
  border: 1px solid var(--card-border) !important;
  background: var(--card-bg) !important;
  border-radius: var(--radius) !important;
  padding: 16px 20px !important;
}

.comment-list .reply a {
  border: 1px solid rgba(79, 142, 247, 0.25) !important;
  color: #6baaff !important;
  border-radius: 6px !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
}

/* =============================================
   STEPS TIMELINE
   ============================================= */
ul.steps li {
  border-left: 2px solid rgba(79, 142, 247, 0.3) !important;
  color: #9aa3bf !important;
}

ul.steps li:before {
  border: 8px solid #0e1020 !important;
  background: linear-gradient(135deg, #4f8ef7, #7c5fe6) !important;
}

ul.steps li strong {
  color: #d8ddf0 !important;
}

/* =============================================
   TERM / TAG LIST
   ============================================= */
.term_list a {
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  color: #7a8399 !important;
  padding: 6px 0 !important;
  transition: color 0.2s !important;
}

.term_list a:hover {
  color: #7ab8ff !important;
}

/* =============================================
   OWL CAROUSEL
   ============================================= */
.owl-dots button {
  background: rgba(255,255,255,0.15) !important;
  border-radius: 50% !important;
  transition: background 0.2s ease !important;
}

.owl-dots button.active {
  background: #4f8ef7 !important;
  box-shadow: 0 0 8px rgba(79, 142, 247, 0.6) !important;
}

/* =============================================
   SHARE / ADDTOANY
   ============================================= */
.addtoany_share_save_container,
.addtoany_share_save_container p,
.addtoany_share_save_container span,
[class*="addtoany"] p,
[class*="addtoany"] span {
  color: #9aa3bf !important;
}

.entry-content p,
.entry-content span,
.dynamic-entry-content p,
.dynamic-entry-content span {
  color: #a8b0cc !important;
}

.sharedaddy, .sharedaddy p, .sharedaddy span, .sharedaddy h3, .sd-title, .sd-social-text {
  color: #9aa3bf !important;
}

/* =============================================
   RELATED POSTS
   ============================================= */
.related-posts h2,
.related-posts h3,
.related-posts .widget-title,
[class*="related"] h2,
[class*="related"] h3 {
  color: #dde2f5 !important;
}

/* =============================================
   MISC — BORDERS & DIVIDERS
   ============================================= */
hr {
  border-color: rgba(255,255,255,0.06) !important;
}

.main-navigation .main-nav ul li a {
  border-color: transparent !important;
}

[class*="gb-container"] {
  border-color: var(--card-border) !important;
}

/* =============================================
   NAV WIDGET
   ============================================= */
#nav_menu-2 a,
.widget_nav_menu a {
  color: #9aa3bf !important;
}

/* =============================================
   MASONRY LOAD MORE
   ============================================= */
.masonry-load-more {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.masonry-load-more a {
  color: #9aa3bf !important;
}

/* =============================================
   TEACHER / EXTRAKURIKULER
   ============================================= */
.extrakurikuler .owl-item {
  background: var(--card-bg) !important;
  border-radius: var(--radius) !important;
}

.teacher_slide .owl-item {
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius) !important;
}

/* =============================================
   ADS / SIDEBAR BOX
   ============================================= */
.gb-container-c30c735c {
  border-radius: var(--radius) !important;
  overflow: hidden !important;
}

/* =============================================
   SELECTION
   ============================================= */
::selection {
  background: rgba(79, 142, 247, 0.25) !important;
  color: #fff !important;
}

/* =============================================
   MOBILE OVERRIDES
   ============================================= */
@media only screen and (max-width: 768px) {
  body {
    background: #0c0e1c !important;
  }

  #site-navigation {
    background: #0e1020 !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }

  .gb-container-69d2da36:hover {
    transform: none !important;
  }
}

@media only screen and (max-width: 480px) {
  .widget-title {
    font-size: 15px !important;
  }
}