*{box-sizing:border-box;font-family:Arial}
body{margin:0;background:#111;color:#eee}
a{text-decoration:none;color:inherit}

.wrap{max-width:1200px;margin:0 auto;padding:0 15px}

/* HEADER */
.topbar{background:#1b1b1b;border-bottom:1px solid #222}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;height:56px}
.logo{font-size:20px;font-weight:bold;color:#f44336}
.nav a{margin-left:15px;font-size:14px;color:#ccc}

/* LAYOUT */
.main{padding:20px 0}
.content{display:flex;gap:20px}

/* SIDEBAR */
.sidebar{width:220px;background:#1a1a1a;padding:15px;border-radius:6px}
.sidebar h3{color:#f44336;font-size:14px}
.sidebar ul{list-style:none;padding:0}
.sidebar li{margin-bottom:8px;font-size:13px}

/* MAIN */
.main-content{flex:1}
.section-title{font-size:18px;margin-bottom:15px}

/* GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:15px;
}
.card{background:#1a1a1a;border-radius:6px;overflow:hidden}
.card img{width:100%;height:220px;object-fit:cover}
.card-title{padding:8px;font-size:13px}

.pagination{
  margin:25px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  font-size:14px;
}
.pagination a{
  padding:6px 12px;
  background:#1a1a1a;
  border-radius:4px;
}
.pagination a:hover{background:#f44336}
.pagination span{color:#aaa}


/* FOOTER */
.footer{border-top:1px solid #222;text-align:center;padding:15px;color:#777}

/* === GENRE BOX (PRO LOOK) === */
.genre-accordion{
  margin-top:15px;
}

/* header box */
.genre-toggle{
  width:100%;
  background:#151515;
  border:1px solid #262626;
  color:#f44336;
  font-size:14px;
  font-weight:600;
  padding:10px 12px;
  border-radius:6px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.genre-toggle:hover{
  background:#1c1c1c;
}

/* arrow anim */
.genre-toggle .arrow{
  transition:transform .3s ease;
}
.genre-toggle.active .arrow{
  transform:rotate(180deg);
}

/* genre box */
.genre-list{
  margin-top:8px;
  background:#151515;
  border:1px solid #262626;
  border-radius:6px;

  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease;
}

/* aktif (tirai turun) */
.genre-list.active{
  max-height:320px;
  overflow-y:auto;
}

/* item */
.genre-list li{
  border-bottom:1px solid #222;
}
.genre-list li:last-child{
  border-bottom:none;
}

.genre-list a{
  display:block;
  padding:9px 12px;
  font-size:13px;
  color:#ddd;
}

.genre-list a:hover{
  background:#222;
  color:#fff;
}

/* scrollbar kecil & clean */
.genre-list::-webkit-scrollbar{
  width:4px;
}
.genre-list::-webkit-scrollbar-thumb{
  background:#333;
  border-radius:4px;
}

/* =========================
   FANCY SEARCH
========================= */

.fancy-search{
  margin:14px 0;
}

.fancy-search form{
  position:relative;
  display:flex;
  align-items:center;
  background:linear-gradient(180deg,#151515,#0e0e0e);
  border:1px solid #2a2a2a;
  border-radius:10px;
  padding:6px;
  transition:.25s ease;
}

.fancy-search form:focus-within{
  border-color:#f5c542;
  box-shadow:0 0 0 2px rgba(245,197,66,.15);
}

/* icon di dalam input */
.fancy-search .search-icon{
  margin:0 8px;
  font-size:14px;
  opacity:.6;
}

/* input */
.fancy-search input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#fff;
  font-size:14px;
  padding:8px 6px;
}

.fancy-search input::placeholder{
  color:#888;
}

/* button */
.fancy-search button{
  background:linear-gradient(180deg,#f5c542,#e0b834);
  color:#111;
  border:none;
  border-radius:8px;
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:.2s ease;
}

.fancy-search button:hover{
  filter:brightness(1.05);
}

/* mobile */
@media(max-width:600px){
  .fancy-search button{
    padding:8px 10px;
    font-size:12px;
  }
}


/* =========================
   READER PAGE (NO BOX)
========================= */

.reader-page{
  max-width:1100px;
  margin:0 auto;
  padding:20px 12px;
}

/* HEADER */
.reader-header{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:20px;
  margin-bottom:30px;
}

/* COVER */
.reader-cover{
  width:100%;
  height:auto;
  border-radius:6px;
  object-fit:contain;
}

/* TITLE */
.reader-header h1{
  margin:0 0 10px;
  font-size:26px;
  line-height:1.3;
}

/* GENRES */
.genres{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:12px;
}

.badge{
  background:#1f1f1f;
  border:1px solid #333;
  padding:5px 10px;
  border-radius:14px;
  font-size:13px;
}

/* DESCRIPTION */
.description{
  color:#bbb;
  line-height:1.7;
  font-size:14px;
}

/* TAGS */
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:15px 0 25px;
}

.tag{
  background:#181818;
  border:1px solid #2a2a2a;
  padding:5px 10px;
  border-radius:14px;
  font-size:13px;
  color:#aaa;
}

.tag:hover{color:#fff}

/* =========================
   CHAPTER LIST
========================= */

.chapter-list{
  margin-top:18px;
}

.chapter-list strong{
  display:block;
  margin-bottom:6px;
  font-size:14px;
}

.chapter-list ul{
  list-style:none;
  padding:0;
  margin:0;
}

.chapter-list li{
  padding:6px 0;
  font-size:14px;
}

.chapter-list a{
  color:#ccc;
}

.chapter-list a:hover{
  color:#fff;
  text-decoration:underline;
}

/* CURRENT CHAPTER (URL NULL) */
.chapter-list li.current{
  color:#f5c542; /* KUNING */
  font-weight:600;
}


/* =========================
   IMAGES (FULL WIDTH)
========================= */

.reader-images{
  margin-top:30px;
}

.reader-img{
  width:100%;
  height:auto;
  display:block;
  background:#000;
}

/* =========================
   RELATED
========================= */

.related-grid{
  margin-top:40px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,2fr));
  gap:14px;
}

.related-card{
  display:block;
  text-decoration:none;
}

.related-card img{
  width:100%;
  border-radius:6px;
  margin-bottom:6px;
}

.related-card span{
  display:block;
  font-size:14px;
  color:#ccc;
  line-height:1.3;
}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){
  .reader-header{
    grid-template-columns:1fr;
  }
  .reader-cover{
    max-width:220px;
    margin-bottom:10px;
  }
  .reader-header h1{
    font-size:22px;
  }
}


/* === BURGER BUTTON === */
.burger{
  display:none;
  background:none;
  border:0;
  font-size:24px;
  color:#fff;
  cursor:pointer;
}

@media(max-width:768px){

  .burger{
    display:block;
  }

  .content{
    position:relative;
  }

  .sidebar{
    position:fixed;
    top:56px;               /* tinggi header */
    left:-100%;
    width:260px;            /* lebar sidebar */
    height:calc(100vh - 56px); /* NUTUP FULL LAYAR */
    overflow-y:auto;        /* scroll kalau panjang */
    background:#1a1a1a;
    z-index:1001;
    transition:left .3s ease;
  }

  .sidebar.active{
    left:0;
  }
}


/* RESPONSIVE */
@media(max-width:768px){
  .content{flex-direction:column}
  .sidebar{width:100%}
}