/* ANIME PORTAL - DAY / NIGHT MODE */
:root{
  color-scheme:light;
  --theme-bg:#f8fafc;
  --theme-surface:#fff;
  --theme-surface-2:#f1f5f9;
  --theme-text:#111827;
  --theme-muted:#64748b;
  --theme-line:#e2e8f0;
  --theme-header:rgba(255,255,255,.95);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --theme-bg:#0b1120;
  --theme-surface:#111827;
  --theme-surface-2:#172033;
  --theme-text:#e5e7eb;
  --theme-muted:#94a3b8;
  --theme-line:#263244;
  --theme-header:rgba(11,17,32,.95);
}
html,body{
  background:var(--theme-bg)!important;
  color:var(--theme-text)!important;
  transition:background-color .2s ease,color .2s ease;
}
.site-header{
  background:var(--theme-header)!important;
  border-color:var(--theme-line)!important;
}
nav a{color:var(--theme-muted)!important}
nav a:hover,nav a.active{color:var(--primary)!important}
.search{
  background:var(--theme-surface)!important;
  border-color:var(--theme-line)!important;
}
.search input,.search button{
  background:transparent!important;
  color:var(--theme-text)!important;
}
.search input::placeholder{color:var(--theme-muted)!important}
.card,.sidebar-box,.empty,.article{
  background:var(--theme-surface)!important;
  border-color:var(--theme-line)!important;
  color:var(--theme-text)!important;
}
.card h3 a,.section-title h2,.section-title h1,.article h1,
.article-content h2,.article-content h3,.article-content h4{
  color:var(--theme-text)!important;
}
.card p,.muted,.meta{color:var(--theme-muted)!important}
.article-content{color:var(--theme-text)!important}
.lead{color:var(--theme-muted)!important}
.popular span{color:var(--theme-text)!important}
.popular small{color:var(--theme-muted)!important}
.tags span{background:rgba(37,99,235,.12)!important}
footer{background:#070b14!important}
.theme-toggle{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9999;
  width:46px;
  height:46px;
  border:1px solid var(--theme-line);
  border-radius:50%;
  background:var(--theme-surface);
  color:var(--theme-text);
  box-shadow:0 8px 25px rgba(0,0,0,.20);
  cursor:pointer;
  display:grid;
  place-items:center;
  font-size:19px;
  transition:transform .18s ease,background .2s ease;
}
.theme-toggle:hover{transform:translateY(-3px)}
@media(max-width:650px){
  .theme-toggle{right:14px;bottom:14px;width:42px;height:42px}
}

/* ANIMEPORTAL NIGHT HEADING FIX V2 START */

/* Heading pada halaman/kartu konten tetap gelap dan terbaca. */
body.dark-mode main h1,
body.dark-mode main h2,
body.dark-mode main h3,
body.dark-mode main h4,
body.dark-mode main h5,
body.dark-mode main h6,
body.dark main h1,
body.dark main h2,
body.dark main h3,
body.dark main h4,
body.dark main h5,
body.dark main h6,
body.night-mode main h1,
body.night-mode main h2,
body.night-mode main h3,
body.night-mode main h4,
body.night-mode main h5,
body.night-mode main h6,
html.dark-mode body main h1,
html.dark-mode body main h2,
html.dark-mode body main h3,
html.dark-mode body main h4,
html.dark-mode body main h5,
html.dark-mode body main h6,
html[data-theme="dark"] body main h1,
html[data-theme="dark"] body main h2,
html[data-theme="dark"] body main h3,
html[data-theme="dark"] body main h4,
html[data-theme="dark"] body main h5,
html[data-theme="dark"] body main h6,
body[data-theme="dark"] main h1,
body[data-theme="dark"] main h2,
body[data-theme="dark"] main h3,
body[data-theme="dark"] main h4,
body[data-theme="dark"] main h5,
body[data-theme="dark"] main h6 {
    color: #111827 !important;
}

/* Link judul di dalam konten juga tetap gelap. */
body.dark-mode main h1 a,
body.dark-mode main h2 a,
body.dark-mode main h3 a,
body.dark-mode main h4 a,
body.dark-mode main h5 a,
body.dark-mode main h6 a,
body.dark main h1 a,
body.dark main h2 a,
body.dark main h3 a,
body.dark main h4 a,
body.dark main h5 a,
body.dark main h6 a,
body.night-mode main h1 a,
body.night-mode main h2 a,
body.night-mode main h3 a,
body.night-mode main h4 a,
body.night-mode main h5 a,
body.night-mode main h6 a,
html.dark-mode body main h1 a,
html.dark-mode body main h2 a,
html.dark-mode body main h3 a,
html.dark-mode body main h4 a,
html.dark-mode body main h5 a,
html.dark-mode body main h6 a,
html[data-theme="dark"] body main h1 a,
html[data-theme="dark"] body main h2 a,
html[data-theme="dark"] body main h3 a,
html[data-theme="dark"] body main h4 a,
html[data-theme="dark"] body main h5 a,
html[data-theme="dark"] body main h6 a,
body[data-theme="dark"] main h1 a,
body[data-theme="dark"] main h2 a,
body[data-theme="dark"] main h3 a,
body[data-theme="dark"] main h4 a,
body[data-theme="dark"] main h5 a,
body[data-theme="dark"] main h6 a {
    color: #111827 !important;
}

/* ANIMEPORTAL NIGHT HEADING FIX V2 END */
/* =========================================================
   ANIMEPORTAL DAY/NIGHT MODE - FINAL CONSISTENT OVERRIDE
   Theme state is controlled only by html[data-theme="dark"].
   ========================================================= */

html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] .container{
    color:var(--theme-text)!important;
}

/* Homepage headings and hero */
html[data-theme="dark"] .section-title h1,
html[data-theme="dark"] .section-title h2,
html[data-theme="dark"] .side-title,
html[data-theme="dark"] .empty-hero h1,
html[data-theme="dark"] .empty-hero p,
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero h1 a,
html[data-theme="dark"] .hero p{
    color:var(--theme-text)!important;
}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .empty-hero{
    background:#111827!important;
    color:#f8fafc!important;
}
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .hero h1 a,
html[data-theme="dark"] .empty-hero h1,
html[data-theme="dark"] .empty-hero p{
    color:#f8fafc!important;
}
html[data-theme="dark"] .hero p{color:#cbd5e1!important}

/* Cards/sidebar/content */
html[data-theme="dark"] .card,
html[data-theme="dark"] .sidebar-box,
html[data-theme="dark"] .article,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .featured-card{
    background:var(--theme-surface)!important;
    border-color:var(--theme-line)!important;
    color:var(--theme-text)!important;
}
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h3 a,
html[data-theme="dark"] .side-title,
html[data-theme="dark"] .popular span,
html[data-theme="dark"] .article h1,
html[data-theme="dark"] .article h2,
html[data-theme="dark"] .article h3,
html[data-theme="dark"] .article h4,
html[data-theme="dark"] .article-content,
html[data-theme="dark"] .article-content p,
html[data-theme="dark"] .article-content li,
html[data-theme="dark"] .lead{
    color:var(--theme-text)!important;
}
html[data-theme="dark"] .card p,
html[data-theme="dark"] .card small,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .article .lead{
    color:var(--theme-muted)!important;
}

/* Search controls */
html[data-theme="dark"] .big-search input,
html[data-theme="dark"] .search input,
html[data-theme="dark"] .search button{
    color:var(--theme-text)!important;
    background:transparent!important;
}
html[data-theme="dark"] .big-search input{
    background:var(--theme-surface)!important;
    border-color:var(--theme-line)!important;
}

/* Existing fixed dark-post classes must follow the same theme state. */
html[data-theme="dark"] .animeportal-night-post-card{
    background:var(--theme-surface)!important;
    color:var(--theme-text)!important;
    border-color:var(--theme-line)!important;
}
html[data-theme="dark"] .animeportal-night-post-card h1,
html[data-theme="dark"] .animeportal-night-post-card h2,
html[data-theme="dark"] .animeportal-night-post-card h3,
html[data-theme="dark"] .animeportal-night-post-card h4,
html[data-theme="dark"] .animeportal-night-post-card p,
html[data-theme="dark"] .animeportal-night-post-card li,
html[data-theme="dark"] .animeportal-night-post-card strong,
html[data-theme="dark"] .animeportal-night-post-card b,
html[data-theme="dark"] .animeportal-night-post-card small,
html[data-theme="dark"] .animeportal-night-post-card label{
    color:var(--theme-text)!important;
}
html[data-theme="dark"] .animeportal-night-post-card a{
    color:#60a5fa!important;
}

/* Navigation/logo */
html[data-theme="dark"] .logo{color:var(--theme-text)!important}
html[data-theme="dark"] nav a{color:var(--theme-muted)!important}
html[data-theme="dark"] nav a:hover,
html[data-theme="dark"] nav a.active{color:var(--primary)!important}

/* Keep footer readable in both modes. */
html[data-theme="dark"] footer{background:#070b14!important;color:#cbd5e1!important}
html[data-theme="dark"] footer strong{color:#fff!important}