/*
Theme Name: Anoboy Anime
Author: Tema Anime Builder
Description: Tema WordPress konsep anime (simple, rapi, mobile friendly). Tanpa maskot & tanpa tombol login/logout.
Version: 2.0.0
Text Domain: anoboy
License: GPLv2 or later
*/
.brand{
  display:flex;
  align-items:center;
  height:52px; 
}
.brand a{
  display:flex;
  align-items:center;
  height:100%;
}
.brand img{
  height:40px;        
  width:auto;
  max-height:44px;
  object-fit:contain;
  display:block;
}
.custom-logo-link{
  display:flex;
  align-items:center;
  height:100%;
}
@media (max-width:768px){
  .brand img{
    height:34px;
    max-height:38px;
  }
}
.section .section-body > div[style*="max-width"]{
  margin:0 auto 10px !important;
  max-width:520px !important;
}
.section .section-body > div[style*="max-width"] img,
.section .section-body img.wp-post-image{
  width:100%;
  height:auto;
  border-radius:5px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.section .section-body .content{
  font-size:13px;
  line-height:1.65;
  color:#333;
}
.section .section-body .content p{margin:0 0 10px}
.section .section-body .content strong{font-weight:800}
.section .section-body .content a{color:var(--accent);font-weight:700}
.section .section-body .content a:hover{text-decoration:underline}
.section .section-body .content hr{
  border:0;
  border-top:1px solid rgba(0,0,0,.10);
  margin:12px 0;
}
.section .section-body .content ul{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.section .section-body .content ul li a{
  display:block;
  padding:8px 10px;
  background:#f7f4f4;
  border-radius:5px;
  font-weight:800;
  font-size:12px;
  text-align:left;
}
.section .section-body .content ul li a:hover{
  background:rgba(255,107,154,.12);
}
.section .section-body iframe.playeriframe{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:5px;
  background:#000;
  overflow:hidden;
}
.section .section-body > h3{
  margin:14px 0 8px !important;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
}
.section .section-body a.tag,
.section .section-body button.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:7px 10px;
  border-radius:5px;
  background:#f5f5f5;
  color:#333;
  font-size:12px;
  font-weight:800;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  margin:0 8px 8px 0 !important; 
  text-decoration:none;
}
.section .section-body a.tag:hover,
.section .section-body button.tag:hover{
  background:var(--accent);
  color:#fff;
}
.section .section-body [data-emoji-bar]{gap:6px !important;margin:8px 0 12px !important}
.section .section-body [data-emoji-bar] .emoji{width:18px;height:18px;display:block}
.section .section-body .comment-respond{
  background:#fff;
  border-radius:5px;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  padding:12px;
  margin-top:10px;
}
.section .section-body .comment-respond textarea{
  width:100%;
  border:1px solid #ddd;
  border-radius:5px;
  padding:10px;
  font-size:13px;
  background:#fafafa;
}
.section .section-body .comment-respond textarea:focus{
  outline:none;
  border-color:var(--accent);
  background:#fff;
}
.section .section-body .comment-respond input.submit{
  background:var(--accent);
  color:#fff;
  border:0;
  padding:8px 14px;
  border-radius:5px;
  font-weight:900;
  cursor:pointer;
}
.section .section-body .comment-respond input.submit:hover{filter:brightness(.95)}
.section .section-body .comment-respond .logged-in-as,
.section .section-body .comment-respond .required-field-message{display:none !important}
@media (max-width:720px){
  .section .section-body .content ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:420px){
  .section .section-body .content ul{grid-template-columns:1fr}
}
body.is-dark .section .section-body .content,
.wp-night-mode-on .section .section-body .content{color:#fff}

body.is-dark .section .section-body .content hr,
.wp-night-mode-on .section .section-body .content hr{
  border-top:1px solid rgba(255,255,255,.12);
}
body.is-dark .section .section-body .content ul li a,
.wp-night-mode-on .section .section-body .content ul li a{
  background:#404040;
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
body.is-dark .section .section-body .content ul li a:hover,
.wp-night-mode-on .section .section-body .content ul li a:hover{
  background:rgba(255,107,154,.18);
}
body.is-dark .section .section-body a.tag,
body.is-dark .section .section-body button.tag,
.wp-night-mode-on .section .section-body a.tag,
.wp-night-mode-on .section .section-body button.tag{
  background:#404040;
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
}
body.is-dark .section .section-body iframe.playeriframe,
.wp-night-mode-on .section .section-body iframe.playeriframe{
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
body.is-dark .section .section-body .comment-respond,
.wp-night-mode-on .section .section-body .comment-respond{
  background:#404040;
  box-shadow:none;
}
body.is-dark .section .section-body .comment-respond textarea,
.wp-night-mode-on .section .section-body .comment-respond textarea{
  background:#2f2f2f;
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}
@media (max-width:860px){
  .site{min-height:auto !important;}
  .container{
    max-width:100% !important;
    width:100% !important;
    margin:0 auto !important;
    padding:0 10px !important;
  }
  .hero .container{padding:0 10px !important;}
  .grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    align-items:start !important;
  }
  .grid > div,
  .grid > aside{
    width:100% !important;
    min-width:0 !important;
  }
  .sidebar{
    width:100% !important;
    max-width:none !important;
  }
  .thumb-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:10px !important;
  }
  .ep-item{
    padding:10px !important;
    gap:10px !important;
  }
  .ep-thumb{
    width:92px !important;
    height:62px !important;
  }
  .ep-meta .title{font-size:13px !important;}
  .ep-meta .sub{font-size:11px !important;}
  .reco{border-radius:0 !important;}
}
@media (max-width:420px){
  .container{padding:0 8px !important;}
  .hero .container{padding:0 8px !important;}

  .thumb-grid{gap:8px !important;}

  .ep-thumb{
    width:82px !important;
    height:56px !important;
  }
}
.rs-footer-menu{margin:0 0 12px}.rs-footer-menu ul.menu{list-style:none;margin:0;padding:0;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}.rs-footer-menu ul.menu li{display:inline-flex;align-items:center}.rs-footer-menu ul.menu li:not(:last-child):after{content:"|";margin:0 6px;opacity:.6}.rs-footer-menu ul.menu a{display:inline-block;text-decoration:none;font-weight:700;font-size:12px;opacity:.95}.rs-footer-menu ul.menu a:hover{text-decoration:underline}@media(max-width:767px){.rs-footer-menu ul.menu{justify-content:flex-start;padding:0 6px}.rs-footer-menu ul.menu li:not(:last-child):after{margin:0 5px}.rs-footer-menu ul.menu a{font-size:11px}}@media(max-width:480px){.rs-footer-menu ul.menu li:not(:last-child):after{margin:0 4px}.rs-footer-menu ul.menu a{font-size:10.5px}}
.footer-social{display:flex;justify-content:center;gap:12px;margin-top:14px}.footer-social .socaccount a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#444;color:#fff;font-size:16px}body.is-dark .footer-social .socaccount a,.wp-night-mode-on .footer-social .socaccount a{background:#2f2f2f}@media(max-width:767px){.footer-social{gap:10px;margin-top:12px}.footer-social .socaccount a{width:34px;height:34px;font-size:15px}}@media(max-width:480px){.footer-social{gap:8px;margin-top:10px}.footer-social .socaccount a{width:32px;height:32px;font-size:14px}}
.footer-contact{margin:10px 0 6px;text-align:center;font-size:12px;font-weight:800;opacity:.95}
.footer-contact a{color:var(--accent);text-decoration:none;font-weight:900}
.footer-contact a:hover{text-decoration:underline}
body.is-dark .footer-contact,.wp-night-mode-on .footer-contact{color:#fff}
/* Player Embed (match konsep tema: radius 5px + shadow tipis + responsive) */
#embed_holder{width:100%;margin:10px 0}
#pembed.player-embed{
  width:100%;
  border-radius:5px;
  background:#000;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}

/* wrapper iframe biar 16:9 */
#player_embed .pframe{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:5px;
  overflow:hidden;
}
#player_embed .pframe iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* loading overlay */
#loadingplayer.playerload{
  position:absolute;
  inset:0;
  z-index:5;
  display:none; /* aktifkan lewat JS: tambah class "is-loading" di #pembed */
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(1px);
}
#loadingplayer.playerload:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:28px;
  height:28px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  animation:pSpin .9s linear infinite;
}
@keyframes pSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* kalau mau munculin loading pakai class ini */
#pembed.is-loading #loadingplayer{display:block}

/* dark mode: shadow & border lebih terang */
body.is-dark #pembed.player-embed,
.wp-night-mode-on #pembed.player-embed{
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
body.is-dark #player_embed .pframe,
.wp-night-mode-on #player_embed .pframe{
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
/* Pagination (match konsep tema: rounded 5px, font bold kecil, hover accent) */
.navigation.pagination{margin-top:14px}
.navigation.pagination .screen-reader-text{display:none!important}

.navigation.pagination .nav-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  align-items:center;
}

/* semua tombol angka + prev/next */
.navigation.pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:5px;
  background:#f7f4f4;
  color:#333;
  font-weight:900;
  font-size:12px;
  text-decoration:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  line-height:1;
}

/* prev/next biar lebih lebar */
.navigation.pagination .prev.page-numbers,
.navigation.pagination .next.page-numbers{
  padding:0 12px;
}

/* hover */
.navigation.pagination a.page-numbers:hover{
  background:rgba(255,107,154,.12);
}

/* current */
.navigation.pagination .page-numbers.current{
  background:var(--accent);
  color:#fff;
  box-shadow:none;
}

/* Dark mode */
body.is-dark .navigation.pagination .page-numbers,
.wp-night-mode-on .navigation.pagination .page-numbers{
  background:#404040;
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
body.is-dark .navigation.pagination a.page-numbers:hover,
.wp-night-mode-on .navigation.pagination a.page-numbers:hover{
  background:rgba(255,107,154,.18);
}
body.is-dark .navigation.pagination .page-numbers.current,
.wp-night-mode-on .navigation.pagination .page-numbers.current{
  background:var(--accent);
  color:#fff;
  box-shadow:none;
}

/* Mobile rapihin */
@media (max-width:420px){
  .navigation.pagination .page-numbers{
    height:32px;
    min-width:32px;
    font-size:11px;
  }
}
/* =========================
   ANIME LIST GRID (ANOboy Style)
   ========================= */

.anime-cat-grid{
  margin:10px 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

/* kolom shortcode */
.anime-cat-cols-1{grid-template-columns:1fr}
.anime-cat-cols-2{grid-template-columns:repeat(2,1fr)}
.anime-cat-cols-3{grid-template-columns:repeat(3,1fr)}
.anime-cat-cols-4{grid-template-columns:repeat(4,1fr)}

/* item */
.anime-cat-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;

  padding:8px 10px;
  min-height:36px;

  background:#f7f4f4;
  border-radius:5px;

  font-family:'Roboto Condensed',sans-serif;
  font-size:12px;
  font-weight:800;

  color:#333;
  text-decoration:none;

  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  transition:.15s ease;
}

/* text */
.anime-cat-name{
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* jumlah episode */
.anime-cat-count{
  flex:0 0 auto;
  font-size:11px;
  font-weight:900;
  opacity:.7;
}

/* hover sama persis konsep tema */
.anime-cat-item:hover{
  background:rgba(255,107,154,.12);
  transform:translateY(-1px);
}

/* klik */
.anime-cat-item:active{
  transform:translateY(0);
}

/* =========================
   DARK MODE SUPPORT
   ========================= */

body.is-dark .anime-cat-item,
.wp-night-mode-on .anime-cat-item{
  background:#404040;
  color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

body.is-dark .anime-cat-item:hover,
.wp-night-mode-on .anime-cat-item:hover{
  background:rgba(255,107,154,.18);
}

/* =========================
   RESPONSIVE (ikut tema)
   ========================= */

@media (max-width:720px){
  .anime-cat-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:420px){
  .anime-cat-grid{
    grid-template-columns:1fr;
  }
}
/* =========================
   Comment Form Fields (match konsep anoboy)
   ========================= */

.comment-respond .comment-form-author,
.comment-respond .comment-form-email,
.comment-respond .comment-form-url,
.comment-respond .comment-form-cookies-consent{
  margin:0 0 10px;
}

.comment-respond label{
  display:block;
  font-size:12px;
  font-weight:900;
  margin:0 0 6px;
  color:#333;
}

.comment-respond label .required{color:var(--accent)}

/* input text/email/url */
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"]{
  width:100%;
  height:38px;
  border:1px solid #ddd;
  border-radius:5px;
  padding:0 10px;
  font-size:13px;
  background:#fafafa;
  outline:none;
  box-sizing:border-box;
}

.comment-respond input[type="text"]:focus,
.comment-respond input[type="email"]:focus,
.comment-respond input[type="url"]:focus{
  border-color:var(--accent);
  background:#fff;
}

/* cookies consent (checkbox + text rapi) */
.comment-respond .comment-form-cookies-consent{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:6px;
}

.comment-respond .comment-form-cookies-consent input[type="checkbox"]{
  margin-top:3px;
  width:16px;
  height:16px;
  accent-color:var(--accent);
}

.comment-respond .comment-form-cookies-consent label{
  margin:0;
  font-size:12px;
  font-weight:800;
  line-height:1.5;
  opacity:.95;
}

/* Dark mode support */
body.is-dark .comment-respond label,
.wp-night-mode-on .comment-respond label{color:#fff}

body.is-dark .comment-respond input[type="text"],
body.is-dark .comment-respond input[type="email"],
body.is-dark .comment-respond input[type="url"],
.wp-night-mode-on .comment-respond input[type="text"],
.wp-night-mode-on .comment-respond input[type="email"],
.wp-night-mode-on .comment-respond input[type="url"]{
  background:#2f2f2f;
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}

body.is-dark .comment-respond input[type="text"]:focus,
body.is-dark .comment-respond input[type="email"]:focus,
body.is-dark .comment-respond input[type="url"]:focus,
.wp-night-mode-on .comment-respond input[type="text"]:focus,
.wp-night-mode-on .comment-respond input[type="email"]:focus,
.wp-night-mode-on .comment-respond input[type="url"]:focus{
  border-color:var(--accent);
  background:#2b2b2b;
}