/* -----------------------------------------------------------------
   Dark / Light Theme — overrides
   Scoped under html[data-theme="dark"] so the default (no attribute
   or data-theme="light") keeps the original vCard light design.
----------------------------------------------------------------- */

html[data-theme="dark"] {
  color-scheme: dark;
}

/* page-skin-1.css forces "body, h1-h6, .footer, .contact-block,
   .contact-block__item a { color: black !important; }" — our dark
   overrides for those same elements must also be !important, and
   since this file loads after page-skin-1.css, ours wins on equal
   specificity via source order (plus higher specificity anyway). */
html[data-theme="dark"] body {
  background: #0F1117 !important;
  color: #B7C0CC !important;
}

/* Main white card (sidebar + content wrapper) */
html[data-theme="dark"] .wrapper {
  background-color: #1A1D27;
  box-shadow: 0 2.5rem 3.125rem rgba(0, 0, 0, 0.45);
}

/* Sidebar itself has its own explicit light background */
html[data-theme="dark"] .sidebar {
  background-color: #1A1D27;
  color: #B7C0CC;
}

/* Headings / titles (beats page-skin-1.css "color: black !important") */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .title,
html[data-theme="dark"] .biodata-name,
html[data-theme="dark"] .page-title {
  color: #E9ECF2 !important;
}

/* Badge pill ("Information System" etc.) — page-skin-1.css forces
   background-color: #e9ecef !important on the base .badge class */
html[data-theme="dark"] .badge {
  background-color: #262A38 !important;
  color: #D3D9E2 !important;
}

/* Contact info card in the sidebar (.clku wraps .contact-block) */
html[data-theme="dark"] .clku {
  background-color: #20232E !important;
}

html[data-theme="dark"] .contact-block,
html[data-theme="dark"] .contact-block__item a {
  color: #B7C0CC !important;
}

/* Cards / panels (testimonials, reviews, form blocks) */
html[data-theme="dark"] .review-item,
html[data-theme="dark"] .case-item,
html[data-theme="dark"] .news-item,
html[data-theme="dark"] .single-news__inner,
html[data-theme="dark"] .no-items {
  background-color: #20232E;
  color: #B7C0CC;
}

/* Portfolio / certificate / research gallery items */
html[data-theme="dark"] .portfolio-item,
html[data-theme="dark"] .grid-item,
html[data-theme="dark"] .item-portfolio,
html[data-theme="dark"] .gallery-grid .item {
  background-color: #20232E;
}

/* Timeline (Experience / Education) */
html[data-theme="dark"] .timeline {
  border-color: #2E3241;
}

html[data-theme="dark"] .timeline-item::before {
  background-color: #1A1D27;
  box-shadow: 0 0 0 3px rgba(48, 76, 253, 0.35);
}

/* Nav / tab links (real markup is <ul class="nav"><li class="nav__item"><a>) */
html[data-theme="dark"] .nav__item a {
  color: #9AA5B1;
}

html[data-theme="dark"] .nav__item a:hover {
  color: #6C87FF;
}

html[data-theme="dark"] .nav__item.active a,
html[data-theme="dark"] .nav__item a.active {
  background-color: #304CFD;
  color: #fff !important;
}

/* Mobile full-screen nav overlay: the light theme deliberately drops the
   solid pill background on the active item at <=768px (style.css) so the
   active label just reads brighter than the rest against the overlay's
   own blue background. Dark mode's overlay background is dark navy, not
   blue, so keeping the solid pill here produced a stray blue "box" behind
   the active item instead of the intended plain brighter-text look. */
@media only screen and (max-width: 768px) {
  html[data-theme="dark"] .nav__item.active a,
  html[data-theme="dark"] .nav__item a.active {
    background-color: transparent;
  }
}

/* Forms / inputs */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #20232E;
  border-color: #2E3241;
  color: #E9ECF2;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #6E7686;
}

/* Buttons (keep accent color, darken ghost/secondary buttons) */
html[data-theme="dark"] .btn--transparent,
html[data-theme="dark"] .btn--white {
  background-color: #20232E;
  color: #E9ECF2;
  border-color: #2E3241;
}

/* Footer */
html[data-theme="dark"] footer,
html[data-theme="dark"] .footer {
  color: #8B94A3 !important;
}

/* Top nav bar (ABOUT / RESUME / PORTFOLIO / ... tabs) */
html[data-theme="dark"] .nav {
  background-color: #1A1D27;
  color: #8B94A3;
}

/* .nav::before is a decorative SVG wave (nav-edge.svg) that blends
   the wrapper's corner into the nav bar. It's baked as a white
   vector image so a CSS color can't recolor it directly — swap in
   a dark-colored copy of the same vector instead. */
html[data-theme="dark"] .nav::before {
  background-image: url(../images/nav-edge-dark.svg);
}

/* page-skin-1.css hardcodes .navfoooter to a white bar */
html[data-theme="dark"] .navfoooter {
  background-color: #1A1D27;
  color: #8B94A3;
}

html[data-theme="dark"] .navfoooter a,
html[data-theme="dark"] footer a {
  color: #8B94A3;
}

html[data-theme="dark"] footer a:hover,
html[data-theme="dark"] .navfoooter a:hover {
  color: #6C87FF;
}

/* Separators / dividers */
html[data-theme="dark"] .separation,
html[data-theme="dark"] hr {
  background-color: #2E3241;
  border-color: #2E3241;
}

/* "My Skills" card wrapper (Resume tab) — style.css hardcodes .box-gray
   to a light off-white background with no dark counterpart, so it stayed
   a bright white card floating on the dark page. */
html[data-theme="dark"] .box-gray {
  background-color: #20232E;
}

/* Skill bar track: style.css's rgba(68,86,108,0.1) is a dark tint meant
   to sit on top of a light card; on the dark card above it's almost
   invisible, so lighten it for the same "carved-in track" contrast. */
html[data-theme="dark"] .progress {
  background-color: rgba(233, 236, 242, 0.08);
}

/* Portfolio/Certificate/Research category filter — on mobile style.css
   turns .filter into a dropdown (.select trigger + .select ul panel)
   hardcoded to a white/off-white background with no dark counterpart. */
@media only screen and (max-width: 768px) {
  html[data-theme="dark"] .select {
    background-color: #20232E;
    color: #9AA5B1;
  }

  html[data-theme="dark"] .select ul {
    background-color: #20232E;
    box-shadow: 0 0.625rem 3.75rem rgba(0, 0, 0, 0.45);
  }

  html[data-theme="dark"] .select ul li,
  html[data-theme="dark"] .select ul li a {
    color: #B7C0CC;
  }

  html[data-theme="dark"] .select ul li:hover {
    background-color: #304CFD;
  }

  html[data-theme="dark"] .select ul li:hover a {
    color: #fff;
  }
}

/* Contact form Send/Clear buttons — style.css's base .btn shows its glow
   shadow by default and removes it on :hover (box-shadow:none). Against
   the dark page this reads backwards (glowing normally, going flat on
   hover); dark mode should only show the shadow as a hover affordance. */
html[data-theme="dark"] .contact-form .btn {
  box-shadow: none;
}

html[data-theme="dark"] .contact-form .btn:hover {
  box-shadow: 0 0.5rem 1rem rgba(48, 76, 253, 0.35), 0 0.125rem 0.25rem rgba(48, 76, 253, 0.35);
}

/* Swiper pagination dots */
html[data-theme="dark"] .swiper-pagination-bullet {
  background: #4A5062;
}

html[data-theme="dark"] .swiper-pagination-bullet-active {
  background: #304CFD;
}

/* Scrollbar (WebKit) */
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #14161D;
}

html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #33384A;
  border-radius: 10px;
}

/* -----------------------------------------------------------------
   Theme switcher button — fixed bottom-left
----------------------------------------------------------------- */
#theme-switcher {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1200;
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background-color: #fff;
  color: #44566C;
  box-shadow: 0 0.75rem 1.5rem rgba(134, 151, 168, 0.25);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

.theme-toggle:hover {
  transform: translateY(-2px);
}

html[data-theme="dark"] .theme-toggle {
  background-color: #20232E;
  color: #E9ECF2;
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.45);
}

.theme-toggle .icon-moon,
.theme-toggle .icon-sun {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Light mode (default): show moon (click to go dark) */
.theme-toggle .icon-sun {
  display: none;
}

/* Dark mode: show sun (click to go light) */
html[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
  display: flex;
}

@media only screen and (max-width: 768px) {
  #theme-switcher {
    left: 16px;
    bottom: 16px;
  }

  .theme-toggle {
    width: 42px;
    height: 42px;
  }
}

/* "Al Jazari" popup ad — was hardcoded to the light card colors only
   (background/text set directly in page-skin-1.css, plus an inline
   style="color:#000" in the markup), so it stayed a bright white card
   in dark mode. */
html[data-theme="dark"] .pembungkusiklan {
  background: #20232E;
  border-left-color: #6C87FF;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .detailiklan span {
  color: #E9ECF2;
}

html[data-theme="dark"] .detailiklan p {
  color: #9AA5B1;
}

html[data-theme="dark"] .tutupiklan svg {
  background: #2E3241;
  fill: #9AA5B1;
}

html[data-theme="dark"] .tutupiklan:hover svg {
  fill: #E9ECF2;
}

/* Legal pages (Privacy Policy / Terms / Disclaimer / Sitemap) — the
   Table of Contents box (list.css) and the sitemap link cards +
   pagination buttons (sitemap.css) are hardcoded to light colors
   with no dark counterpart. */
html[data-theme="dark"] .bwstoc {
  background: #20232E;
  border-color: #2E3241;
}

html[data-theme="dark"] .bwstoc a {
  color: #9AA5B1;
}

html[data-theme="dark"] .bwstoc a:hover {
  color: #6C87FF;
}

html[data-theme="dark"] .post-list-box {
  background: #20232E;
  border-color: #2E3241;
}

html[data-theme="dark"] #recentpostsae .recentpostel {
  background: #20232E;
  box-shadow: none;
}

html[data-theme="dark"] #recentpostsae .recentpostel:hover {
  background-color: #262A38;
  border: 1px solid #2E3241;
}

html[data-theme="dark"] #recentpostsae .recentpostel img {
  background: #14161D;
}

html[data-theme="dark"] #recentpostsae .recentpostel h2,
html[data-theme="dark"] #recentpostsae .recentpostel h2 a {
  color: #E9ECF2 !important;
}

html[data-theme="dark"] #recentpostsae .recentpostel p {
  color: #9AA5B1;
}

html[data-theme="dark"] #recentpostnavfeed a {
  color: #B7C0CC;
}

html[data-theme="dark"] #recentpostnavfeed .next,
html[data-theme="dark"] #recentpostnavfeed .previous,
html[data-theme="dark"] #recentpostnavfeed .home {
  background: #20232E;
  color: #E9ECF2;
  box-shadow: none;
}

html[data-theme="dark"] #recentpostnavfeed .next:hover,
html[data-theme="dark"] #recentpostnavfeed .previous:hover,
html[data-theme="dark"] #recentpostnavfeed .home:hover {
  background: #262A38;
  color: #fff;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] #recentpostnavfeed a:hover,
html[data-theme="dark"] #recentpostnavfeed span.noactived {
  color: #5A6272;
}

/* page-skin-1.css hardcodes .breadcrumb to a light grey background
   ("Home > Posts > ..." bar on post/post.html). */
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .breadcrumb a,
html[data-theme="dark"] .breadcrumb a:hover,
html[data-theme="dark"] .breadcrumb span {
  background-color: #20232E !important;
  color: #B7C0CC !important;
}

/* .post-list-box / TOC box / .post-body-artikel pre & code all hardcode
   a light grey background + unset text color in list.css, which is
   invisible/unreadable in dark mode (dark page background, but the code
   text itself never got a color rule, so it defaults to black). */
html[data-theme="dark"] .bwstoc,
html[data-theme="dark"] .post-list-box,
html[data-theme="dark"] .post-body-artikel pre,
html[data-theme="dark"] .post-body-artikel code {
  background: #20232E !important;
  border-color: #2E3342 !important;
  color: #E4E7EC !important;
}

html[data-theme="dark"] .bwstoc a {
  color: #8B9CFF;
}

html[data-theme="dark"] #posts-search {
  background: #20232E !important;
  border-color: #2E3342 !important;
  color: #9AA4B2 !important;
}
html[data-theme="dark"] #posts-search input {
  color: #E4E7EC;
}
html[data-theme="dark"] #posts-search input::placeholder {
  color: #6B7280;
}