/* Toonnime — Neo Brutalism */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Archivo+Black&display=swap');

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --ink:#111111;
  --bg:#f5f1e8;
  --surface:#ffffff;
  --yellow:#ffd23f;
  --pink:#ff5ea8;
  --cyan:#4dd8e6;
  --lime:#b8f135;
  --purple:#b28dff;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-lg:10px 10px 0 var(--ink);
  --bd:4px solid var(--ink);
  --pop:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,1,.36,1);
}
html{scroll-behavior:smooth}
body{
  font-family:"Space Grotesk","Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100svh;
  overflow-x:hidden;
}

/* ===== background: grid brutal ===== */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(17,17,17,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.06) 1px, transparent 1px);
  background-size:32px 32px;
}
.sky::after{content:'';position:absolute;top:0;right:0;width:220px;height:220px;
  background:var(--yellow);border-left:var(--bd);border-bottom:var(--ink) 4px solid;
  clip-path:polygon(100% 0,0 0,100% 100%);opacity:.9}
.sun,.cloud,.hill{display:none}

/* ===== topbar ===== */
.topbar{
  position:relative;z-index:2;max-width:1100px;margin:0 auto;
  padding:24px 18px 8px;display:flex;flex-direction:column;gap:14px;
}
.tb-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tb-top{justify-content:space-between}
.tb-bottom{justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:54px;height:54px;filter:drop-shadow(4px 4px 0 var(--ink))}
.brand h1{
  font-family:"Archivo Black","Space Grotesk",sans-serif;
  font-size:1.9rem;text-transform:uppercase;letter-spacing:-1px;line-height:1;
  background:var(--yellow);border:var(--bd);box-shadow:var(--shadow-sm);
  padding:6px 14px;transform:rotate(-1.5deg);
}
.brand h1 span{background:var(--pink);color:#fff;padding:0 4px;margin-left:-2px;
  display:inline-block;transform:rotate(1deg)}
.searchbox{
  flex:1;min-width:200px;max-width:420px;display:flex;align-items:center;gap:10px;
  background:var(--surface);border:var(--bd);border-radius:0;
  padding:11px 16px;box-shadow:var(--shadow);
  transition:transform .2s var(--pop),box-shadow .2s;
}
.searchbox:focus-within{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
.searchbox .ic{width:20px;height:20px;fill:var(--ink);flex-shrink:0}
.searchbox input{flex:1;border:none;outline:none;background:transparent;
  font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);min-width:0}
.searchbox input::placeholder{color:#9a948a;font-weight:500}
.chipnav{display:flex;gap:10px;flex-wrap:wrap}
.chip{
  -webkit-appearance:none;appearance:none;font-family:inherit;
  background:var(--surface);border:var(--bd);border-radius:0;
  padding:10px 16px;font-size:.83rem;font-weight:700;color:var(--ink);cursor:pointer;
  text-transform:uppercase;letter-spacing:.5px;box-shadow:var(--shadow-sm);
  touch-action:manipulation;
  transition:transform .15s var(--pop),box-shadow .15s,background .15s;
}
.chip:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.chip.active{background:var(--lime)}
@media(hover:hover){.chip:hover:not(.active){background:var(--cyan)}}

/* ===== genre search ===== */
.genre-toggle{
  -webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer;flex-shrink:0;
  background:var(--yellow);border:3px solid var(--ink);border-radius:0;
  padding:6px 12px;font-size:.75rem;font-weight:800;text-transform:uppercase;
  color:var(--ink);box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s var(--pop),box-shadow .15s;
}
.genre-toggle:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.genre-menu{
  position:relative;width:100%;max-width:1100px;margin:0 auto;
  background:var(--bg);border:var(--bd);box-shadow:var(--shadow);
  padding:0 14px;
  display:grid;grid-template-rows:0fr;overflow:hidden;
  opacity:0;transform:translateY(-8px);
  transition:grid-template-rows .4s var(--ease),opacity .35s var(--ease),transform .4s var(--ease),padding .4s var(--ease);
}
.genre-menu.open{
  grid-template-rows:1fr;opacity:1;transform:translateY(0);
  padding:14px;
}
.genre-menu.closing{
  grid-template-rows:0fr;opacity:0;transform:translateY(-8px);
  padding:0 14px;pointer-events:none;
}
.gm-inner{min-height:0;overflow:hidden}
.gm-head{
  font-family:"Archivo Black";font-size:.85rem;text-transform:uppercase;
  margin:0 0 10px;letter-spacing:.5px;
}
.gm-list{display:flex;flex-wrap:wrap;gap:8px;max-height:300px;overflow-y:auto}
.genre-item{
  -webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer;
  background:var(--surface);border:3px solid var(--ink);border-radius:0;
  padding:6px 12px;font-size:.72rem;font-weight:700;text-transform:uppercase;
  color:var(--ink);box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s var(--pop),box-shadow .15s,background .15s;
}
.genre-item:hover{background:var(--cyan)}
.genre-item.g-active{background:var(--lime)}
.genre-item:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}

.src-toggle{background:var(--cyan)}
.genre-menu.src-menu{max-width:420px;margin:0 auto}

/* ===== main + kartu ===== */
main{position:relative;z-index:2;max-width:1100px;margin:0 auto;padding:20px 18px 48px}
.sectitle{
  font-family:"Archivo Black","Space Grotesk",sans-serif;
  font-size:1.15rem;font-weight:400;text-transform:uppercase;letter-spacing:.5px;
  margin:18px 2px 14px;display:flex;align-items:center;gap:10px;
}
.sectitle .emoji{font-size:1.3rem}
.grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.card{
  background:var(--surface);border:var(--bd);border-radius:0;
  overflow:hidden;cursor:pointer;position:relative;
  box-shadow:var(--shadow);
  transition:transform .2s var(--pop),box-shadow .2s;
  animation:popIn .4s var(--pop) backwards;
}
@keyframes popIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.card:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
@media(hover:hover){
  .card:hover{transform:translate(-4px,-4px);box-shadow:var(--shadow-lg)}
}
.thumb-wrap{position:relative;aspect-ratio:2/3;overflow:hidden;background:#e8e2d4;
  border-bottom:var(--bd)}
.thumb-wrap img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);filter:contrast(1.05) saturate(1.05)}
@media(hover:hover){@media (hover:hover){.card:hover .thumb-wrap img{transform:scale(1.06)}}}
.badge-pill{
  position:absolute;top:0;left:0;background:var(--pink);color:#fff;
  border-right:var(--bd);border-bottom:var(--bd);
  padding:4px 10px;font-size:.66rem;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;
}
.badge-pill.score{background:var(--yellow);color:var(--ink);left:auto;right:0;top:auto;
  bottom:0;border:var(--bd);border-top:var(--bd);border-left:var(--bd);border-right:none}
.card .info{padding:12px 14px 14px}
.card .title{
  font-size:.85rem;font-weight:700;line-height:1.3;text-transform:uppercase;
  letter-spacing:.2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card .meta{font-size:.7rem;color:#7a7468;margin-top:4px;font-weight:600;text-transform:uppercase}

/* ===== detail sheet ===== */
.sheet{
  position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;
}
.sheet .backdrop{position:absolute;inset:0;background:rgba(17,17,17,.55);
  animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}}
.sheet .inner{
  position:relative;width:100%;max-width:760px;max-height:90svh;overflow-y:auto;
  background:var(--bg);border:var(--bd);border-bottom:none;
  border-radius:0;padding:24px 22px 38px;
  box-shadow:0 -10px 0 rgba(17,17,17,.15);
  animation:slideup .35s var(--pop);
}
@keyframes slideup{from{transform:translateY(60px);opacity:0}}
.sheet .grab{width:64px;height:8px;background:var(--ink);margin:0 auto 16px}
.sheet .close{
  position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:0;
  border:var(--bd);background:var(--pink);color:#fff;font-weight:800;
  font-size:1rem;cursor:pointer;font-family:inherit;box-shadow:var(--shadow-sm);
  transition:transform .15s var(--pop),box-shadow .15s;
}
.sheet .close:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.detail-head{display:flex;gap:18px;flex-wrap:wrap}
.detail-head img{width:150px;border-radius:0;border:var(--bd);
  box-shadow:var(--shadow);flex-shrink:0;transform:rotate(-1deg)}
.detail-head .htitle{
  font-family:"Archivo Black","Space Grotesk",sans-serif;
  font-size:1.4rem;font-weight:400;line-height:1.15;text-transform:uppercase;
}
.detail-head .hmeta{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px}
.tag{
  background:var(--surface);border:3px solid var(--ink);border-radius:0;
  padding:4px 10px;font-size:.68rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;box-shadow:3px 3px 0 var(--ink);
}
.tag.score{background:var(--yellow)}
.tag.status{background:var(--lime)}
.synopsis{
  margin-top:16px;background:var(--surface);border:var(--bd);border-radius:0;
  padding:16px 18px;font-size:.9rem;line-height:1.6;font-weight:500;
  box-shadow:var(--shadow);
  border-left:10px solid var(--cyan);
}
.epilist{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.epi{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:3px solid var(--ink);border-radius:0;
  padding:11px 14px;font-weight:700;font-size:.84rem;text-transform:uppercase;
  box-shadow:var(--shadow-sm);cursor:pointer;
  transition:transform .15s var(--pop),box-shadow .15s,background .15s;
}
.epi:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
@media(hover:hover){.epi:hover{background:var(--yellow);transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--ink)}}
.epi .date{font-size:.66rem;color:#7a7468;font-weight:600}
.srcline{
  margin-top:12px;font-size:.75rem;text-align:center;font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;
}
.srcline a{color:var(--ink);font-weight:700;text-decoration-thickness:2px;
  text-underline-offset:3px;background:var(--cyan);padding:0 3px}

/* ===== player & platform legal ===== */
.player-title{
  font-family:"Archivo Black","Space Grotesk",sans-serif;
  font-size:1rem;font-weight:400;text-transform:uppercase;margin-bottom:14px;
  padding-right:48px;line-height:1.25;
}
#video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;
  border-radius:0;border:var(--bd);background:#000;box-shadow:var(--shadow)}
#video-frame{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.player-loading,.player-error{position:absolute;top:0;left:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:#111}
.player-loading p,.player-error p{color:#fff;font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px}
.player-error .face{font-size:2.4rem}
.player-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.player-nav button{
  -webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer;
  background:var(--lime);border:3px solid var(--ink);border-radius:0;
  padding:9px 18px;font-size:.78rem;font-weight:800;color:var(--ink);
  text-transform:uppercase;letter-spacing:.5px;
  box-shadow:var(--shadow-sm);touch-action:manipulation;
  transition:transform .15s var(--pop),box-shadow .15s}
.player-nav button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;
  background:var(--surface)}
.player-nav button:not(:disabled):active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.pn-info{font-size:.75rem;font-weight:700;color:var(--ink);max-width:55%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
#pn-auto.auto-on{background:var(--yellow)}
#pn-auto.auto-off{background:var(--surface);color:#7a7468}
.skip-intro{
  position:absolute;right:14px;bottom:14px;z-index:5;
  -webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer;
  background:var(--yellow);border:3px solid var(--ink);border-radius:0;
  padding:9px 16px;font-size:.78rem;font-weight:800;color:var(--ink);
  text-transform:uppercase;letter-spacing:.4px;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s var(--pop),box-shadow .15s,opacity .3s;
}
.skip-intro:hover{background:var(--lime)}
.skip-intro:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.skip-intro.hidden{display:none}
.epi-play{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:0;background:var(--cyan);
  border:3px solid var(--ink);flex-shrink:0;
}
.epi-play svg{width:14px;height:14px;fill:var(--ink)}

/* ===== auth & list ===== */
.authbox{display:flex;gap:10px;align-items:center}
.auth-user{
  font-weight:700;font-size:.8rem;text-transform:uppercase;
  background:var(--cyan);border:3px solid var(--ink);padding:7px 12px;
  box-shadow:var(--shadow-sm);white-space:nowrap;
}
.chip-cta{background:var(--pink);color:#fff}
.auth-inner{max-width:380px;margin:0 auto}
.auth-title{
  font-family:"Archivo Black","Space Grotesk",sans-serif;
  font-size:1.3rem;text-transform:uppercase;margin-bottom:18px;text-align:center;
}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form label{
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  display:flex;flex-direction:column;gap:6px;
}
.auth-form input{
  font:inherit;font-weight:600;font-size:.95rem;padding:11px 14px;
  border:var(--bd);border-radius:0;background:var(--surface);outline:none;
  box-shadow:var(--shadow-sm);
}
.auth-form input:focus{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.auth-err{
  background:var(--pink);color:#fff;border:3px solid var(--ink);
  padding:8px 12px;font-size:.78rem;font-weight:700;text-transform:uppercase;
}
.auth-submit{background:var(--lime);font-size:.9rem;padding:12px}
.auth-switch{font-size:.8rem;font-weight:600;text-align:center}
.auth-switch a{color:var(--ink);font-weight:800;background:var(--yellow);padding:0 4px;
  text-decoration-thickness:2px;text-underline-offset:3px}
.wl-btn{font-size:.75rem}
.wl-btn.wl-active{background:var(--yellow)}
.progress-tag{background:var(--purple)}
.epi.seen{background:#eceadf}
.epi.seen .epi-play{background:var(--lime);font-weight:800;font-size:.85rem}
.epi.seen > span:nth-child(2){color:#7a7468}

/* ===== loading & toast ===== */
.loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:70px 0}
.loading.hidden,.hidden{display:none!important}
.bounceball{width:32px;height:32px;border-radius:0;background:var(--pink);
  border:4px solid var(--ink);box-shadow:var(--shadow-sm);
  animation:bnc 1s var(--ease) infinite}
@keyframes bnc{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-24px) rotate(12deg)}}
.loading p{font-weight:700;color:#7a7468;text-transform:uppercase;font-size:.8rem;
  letter-spacing:.5px}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:var(--ink);color:var(--yellow);font-weight:700;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.5px;
  padding:12px 20px;border-radius:0;border:3px solid var(--yellow);
  box-shadow:6px 6px 0 rgba(17,17,17,.35);
  opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s var(--pop);z-index:60;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* empty state */
.empty{
  text-align:center;padding:60px 20px;
}
.empty .face{font-size:3.4rem;display:inline-block;
  filter:grayscale(.3)}
.empty p{margin-top:12px;font-weight:700;color:#7a7468;text-transform:uppercase;
  font-size:.85rem;letter-spacing:.4px}

.foot{
  position:relative;z-index:2;text-align:center;padding:20px;
  font-size:.72rem;font-weight:700;color:#7a7468;text-transform:uppercase;
  letter-spacing:.6px;
}

@media(max-width:480px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:14px}
  .brand h1{font-size:1.45rem}
  .detail-head img{width:118px}
  .sky::after{width:140px;height:140px}
  .searchbox{max-width:none}
  .authbox{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* 2. search box lebih kecil */
.searchbox{padding:7px 12px;min-width:170px;max-width:360px}
.searchbox input{font-size:.85rem}
.searchbox .ic{width:17px;height:17px}
.genre-toggle{padding:5px 10px;font-size:.68rem}

.batch-btn{background:var(--purple);color:#fff}

.foot .owner{display:inline-block;margin-top:4px;font-size:.68rem;color:#7a7468}
.foot .owner a{color:var(--ink);font-weight:800;text-decoration-thickness:2px;text-underline-offset:3px;
  background:var(--pink);color:#fff;padding:0 4px}

/* ===== manga & reader ===== */
.manga-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:6px 2px 16px}
.feats-mini{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.reader-top{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;
  background:var(--bg);border-bottom:var(--bd);padding:12px 16px;
}
.rd-title{flex:1;font-weight:800;text-transform:uppercase;font-size:.85rem;text-align:center}
.rd-nav{display:flex;gap:8px}
.manga-reader{background:var(--bg)}
.manga-reader .reader-body{max-width:820px;margin:0 auto;padding:14px;overflow-x:hidden;width:100%}
.rd-page{width:100%;max-width:100%;height:auto;display:block;margin:0 auto;border:0;box-shadow:none;background:var(--bg);box-sizing:border-box}
.manga-reader{max-height:100svh;height:100svh;overflow-y:auto;border-radius:0;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background:var(--bg)}
.manga-reader .inner{max-height:100svh;height:100svh;overflow-y:auto;border-radius:0}

/* lanjut baca */
#manga-continue{margin-bottom:22px}
.cont-card{cursor:pointer;position:relative}
.cont-card::after{content:"⏩";position:absolute;top:8px;right:8px;font-size:.8rem;opacity:.85}

/* baris geser horizontal manga */
.mrow-wrap{margin-bottom:26px}
.mrow{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.mrow .mcard{flex:0 0 130px;scroll-snap-align:start}
.mrow::-webkit-scrollbar{height:8px}
.mrow::-webkit-scrollbar-thumb{background:var(--ink);border-radius:99px}
.mrow .mcard .thumb-wrap{aspect-ratio:2/3}
.mrow .mcard .title{font-size:.78rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
.mrank{position:absolute;top:6px;left:6px;background:var(--acc,#ffd400);border:2px solid var(--ink);border-radius:8px;
  font-weight:800;font-size:.62rem;padding:1px 6px;z-index:2}

.manga-card .thumb-wrap img{object-fit:cover;object-position:center top}
@supports (aspect-ratio:2/3){ .manga-card .thumb-wrap{aspect-ratio:2/3} }

/* icon svg (pengganti emoji) */
.ico{display:inline-flex;vertical-align:-0.18em;width:1.05em;height:1.05em}
.ico svg{width:100%;height:100%;stroke:var(--ink);fill:none}
.sectitle .ico{width:1.1em;height:1.1em}
.mrank,.badge-pill{vertical-align:middle}


/* ===== mode gelap ===== */
html[data-theme="dark"]{
  --ink:#f2ede2;
  --bg:#16161a;
  --surface:#22222a;
  --yellow:#ffd23f;
  --pink:#ff5ea8;
  --shadow:6px 6px 0 #0a0a0d;
  --shadow-sm:4px 4px 0 #0a0a0d;
  --shadow-lg:10px 10px 0 #0a0a0d;
  --bd:4px solid #0a0a0d;
}
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] .sky{opacity:.35}
html[data-theme="dark"] .thumb-wrap{background:#2c2c36}
html[data-theme="dark"] .card,html[data-theme="dark"] .chip,html[data-theme="dark"] .topbar,
html[data-theme="dark"] .genre-menu,html[data-theme="dark"] .sheet,html[data-theme="dark"] .manga-reader,
html[data-theme="dark"] .searchbox,html[data-theme="dark"] .tag{background:var(--surface)}
html[data-theme="dark"] .meta,html[data-theme="dark"] .hmeta{color:#a8a29a}
html[data-theme="dark"] .reader-top{background:var(--surface)}

/* bookmark & theme toggle */
#manga-bm{margin-top:12px}
#manga-bm.active{background:var(--yellow)}
.theme-toggle{padding:6px 10px;display:inline-flex;align-items:center}
html[data-theme="dark"] .card .meta,html[data-theme="dark"] .synopsis{color:#b5afa6}
html[data-theme="dark"] .empty,html[data-theme="dark"] .sheet .inner{background:var(--surface)}
html[data-theme="dark"] .epi{background:var(--surface)}