.html,
.body {
  margin: 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Container / base */
.novel-container { max-width:100%; margin:0; padding:0; 
  font-family: 'Inter', 'Segoe UI', sans-serif; }
.novel-wrapper { background:#fff; }

/* HERO SECTION */
.novel-hero-section {
  position: relative;
  width: 100%;
  background: #e3f2fd;
  min-height: 480px;
  padding-bottom: 40px;
}

.novel-hero-container {
  position: relative;
  max-width: 1050px;
  margin: 0 auto;
  padding: 60px 1.5rem 0 1.5rem;
  display: flex;
  align-items: flex-start;
  min-height: 480px;
}

/* COVER */
.novel-cover-wrapper {
  position: absolute;
  bottom: -45px;
  left: 1.5rem;
  width: 300px;
  z-index: 10;
}

.novel-cover-wrapper img.novel-cover {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.novel-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px 14px;
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 14px;
  font-weight: 400;
  z-index: 11;
}

.novel-ribbon.series { background: #ffbe0b; color: #000; }
.novel-ribbon.editor-choice { background: #FF5722; color: #fff; }

/* META info kanan */
.novel-hero-content {
  flex: 1;
  padding-left: 345px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
  color: #000;
}

.novel-title-large {
  color: #000033;
  font-size: 2.5rem;
  font-family: 'Playfair Display', 'Roboto', serif;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.1;
  text-align: left;
}

/* GENRE & VIEWS */
.novel-genre-views {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 1rem;
  font-weight: 550;
  margin: 0 0 25px;
  color: #000;
  line-height: 1.5;
}

.novel-genre-views a {
  text-decoration: none;
}

.novel-genre-views a:hover {
  text-decoration: underline;
}

/* Views tampil lebih ringan agar beda dari genre */
.novel-genre-views .novel-views {
  font-size: 0.95rem;
  font-weight: 400;
  margin-left: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #000;
  line-height: 1.5;
}

.novel-genre-views .novel-views .icon-eye {
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}

/* Author & Translator Styling */
.novel-author-translator {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  text-align: left;
  margin: 0 0 30px;
  gap: 1rem;
}

.author-fallback-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
  background: #ccc;
  color: #fff;
  border-radius: 50%;
}

.novel-author-translator .author-block {
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.novel-author-translator .author-info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.novel-author-translator .author-block .author-name a {
  color: #222;
  text-decoration: none;
}

.novel-author-translator .author-block .author-name a:hover {
  text-decoration: underline;
}

.novel-author-translator .translator-block {
  font-size: 0.95rem;
  font-weight: 400;
  color: #666;
}

.novel-author-translator .translator-name {
  font-style: italic;
}

/* Statistik */
.novel-stats-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stat-group {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Blok Tamat & Update */
.stat-finished,
.stat-update {
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  color: #555;       /* abu-abu agar lebih samar */
  opacity: 0.9;
}

.stat-update .update-value {
  font-weight: 500;
  color: #222;       /* tanggal tetap lebih jelas */
}

.stat-number {
  font-size: 1.95rem;
  font-weight: 900;
}

/* Novel Feedback - REVISI (ukuran lebih besar) */
.support-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.heart-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  padding: 5px;
}

.heart-icon {
  width: 50px;
  height: 50px;
}

.support-count { 
  font-size: 1.95rem; 
  font-weight: 900;
  color: #ff4757;
}

.supporters-count {
  font-size: 0.95rem; 
  opacity: 0.8;
}

.rating-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rating-number { 
  font-size: 1.95rem; 
  font-weight: 900; 
}

.rating-count { 
  font-size: 0.95rem; 
  opacity: 0.8; 
}

/* Action buttons */
.novel-action-buttons {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 0 20px;
}

.read-novel-btn {
  background: #3a86ff;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.read-novel-btn:hover { background: #ffcc00; color: #000; }

.bookmark-link {
  font-size: 1.15rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.bookmark-link:hover { color: #3a86ff; }

/* Bookmark Notification Styles */
.bookmark-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #27ae60;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    transform: translateX(400px);
    opacity: 0;
    transition: all 0.3s ease;
}

.bookmark-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.bookmark-notification.error {
    background: #e74c3c;
}

.novel-social-section {
    padding: 25 0 0;
}
.novel-share-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.novel-share-buttons span {
    font-weight: 500;
}

.share-button img {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.share-button:hover img {
    transform: scale(1.2);
}

/* Public Domain Disclaimer Box */
.public-domain-disclaimer {
  width: 100%;
  background: #3a86ff;
  margin: 0;
  padding: 0.5rem 0;
}

.public-domain-disclaimer .disclaimer-content {
  max-width: 1000px;
  margin: 0 auto;
  color: #222;
  font-size: 0.85rem;
  font-weight:700;
  line-height: 1;
}

.public-domain-disclaimer .disclaimer-content p {
  margin: 1rem 0;
}

.public-domain-disclaimer .disclaimer-content a {
  color: #222;
  text-decoration: none;
}

.public-domain-disclaimer .disclaimer-content a:hover {
  color: #fff;
  text-decoration: underline;
}

/* MAIN content */
.novel-main-content { 
  background:#fff;
  max-width: 1150px;
  margin:0 auto;
  padding:36px 20px;
}

/* Style untuk section terpisah */
.novel-excerpt-section,
.novel-chapters-section {
  padding: 2rem 0;
}

.novel-chapters-section h3 {
    font-size: 1.85em;
    font-weight: 600;
    text-align: left;
    padding-left: 5px;
}

.novel-chapters-section {
  background: #fff;
}

.novel-content-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Style untuk sinopsis */
.synopsis-text {
  line-height: 1.5;
  font-size: 1.1rem;
  color: #444;
}

/* Style untuk daftar bab */
.chapters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-bottom: 1.5rem;
}

.chapter-item {
  padding: 12px 15px;
  background: #f8f9fa;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
}

.chapter-item:hover {
  background: #007bff;
  color: #fff;
  transform: translateY(-2px);
}

.load-more-chapters {
  display: block;
  margin: 0 auto;
  padding: 12px 24px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.3s ease;
}

.load-more-chapters:hover {
  background: #0056b3;
}

/* Related-Newest Novel Carousel */
.carousel-section {
  max-width: 1100px;
  padding: 20px 0;
  margin: 0 auto;
  text-align: left;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
}

.carousel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 0;
  -webkit-overflow-scrolling: touch;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-item {
  flex: 0 0 auto;
  width: 150px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.carousel-item:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.carousel-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.carousel-nav {
  position: absolute;
  top: 35%;
  transform: translateY(-50%);
  background: #007bff;
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 8px;
  cursor: pointer;
  z-index: 2;
}

.carousel-nav.prev {
  left: 0;
}

.carousel-nav.next {
  right: 0;
}

.carousel-section h3 {
    font-size: 1.85em;
    font-weight: 600;
    text-align: left;
    padding-left: 5px;
}

/* ---------- MOBILE-ONLY: HERO STACK (cover -> meta -> disclaimer) ---------- */
/* Target perangkat gadget / mobile */
@media (max-width: 768px) {

  /* Hero section: lebih ringkas vertikal */
  .novel-hero-section {
    padding-top: 14px;   /* sedikit jarak atas */
    padding-bottom: 0;   /* agar cover bisa 'meletup' ke bawah layout */
    min-height: auto;
  }

  /* Container jadi block dan center */
  .novel-hero-container {
    display: block;
    padding: 0 16px;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* COVER: keluarkan dari absolute, letakkan di atas dan center */
  .novel-cover-wrapper {
    position: static !important;   /* override posisi absolute desktop */
    width: 76% !important;
    max-width: 340px;
    margin: 0 auto 12px;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 3;
    display: block;
  }
  .novel-cover-wrapper .novel-ribbon { top: 8px; right: 8px; left: auto; } /* ribbon jangan hilang */

  .novel-cover {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.18);
  }

  /* META: tampil di tengah (center) dan mengisi area di bawah cover */
  .novel-hero-content {
    margin: 12px auto 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;   /* Teks dan tombol di tengah */
    justify-content: flex-start;
    gap: 10px;
    padding: 0 4px 8px;
  }

  .novel-title-large {
    font-size: 1.6rem;
    line-height: 1.18;
    margin: 0;
    font-weight: 700;
  }

  /* Genre + views: ringkas dan inline, center */
  .novel-genre-views {
    font-size: 0.95rem;
    font-weight: 600;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: inherit;
    margin-bottom: 6px;
  }
  .novel-genre-views a { text-decoration: none; }

  /* Penulis & penerjemah: center, jarak kecil, penulis lebih menonjol */
  .novel-author-translator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 1rem;
    margin: 0;
  }
  .novel-author-translator .author-name {
    font-size: 1.05rem;
    font-weight: 800;
  }
  .novel-author-translator .translator-name {
    font-size: 0.95rem;
    opacity: 0.85;
    font-weight: 500;
  }

  /* Statistik: susun vertikal & center */
  .novel-stats-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 6px;
    width: 100%;
  }
  .stat-group { display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }
  .stat-number { font-size: 1.6rem; font-weight: 800; }
  .stat-label, .stat-update, .stat-finished { font-size: 0.88rem; color: rgba(0,0,0,0.65); }

  /* Rating & like */
  .rating-number { font-size: 0.95rem; margin-left: 6px; }
  .rating-count, .like-count, .vote-count { font-size: 0.85rem; opacity: 0.9; }

  /* ACTIONS: tombol full-width (stacked) + link bookmark tampil seperti tombol full-width */
  .novel-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    align-items: center;
    margin-top: 8px;
  }
  .read-novel-btn {
    width: 100%;
    max-width: 420px;
    padding: 12px 18px;
    font-size: 1.05rem;
    border-radius: 10px;
  }
  .bookmark-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    width: 100%;
    max-width: 420px;
    background: rgba(255,255,255,0.09);
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
  }

  /* Sosial sharing: compact */
  .novel-social-section .social-sharing { justify-content: center; gap: 10px; padding: 8px 0; }
  .novel-social-section .social-sharing img { width: 22px; height: 22px; }

  /* ===== DISCLAIMER: selebar konten, lebih sempit & font kecil ===== */
  .public-domain-disclaimer {
    width: 100%;
    padding: 12px 0;
    margin-top: 14px;
    box-sizing: border-box;
  }
  .public-domain-disclaimer .disclaimer-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 8px;
    background: #f7f9fb;
    color: #333;
  }
}

/* ---------- EXTRA COMPACT FOR SMALLER PHONES ---------- */
@media (max-width: 420px) {
  .novel-cover-wrapper { width: 82% !important; max-width: 260px; }
  .novel-title-large { font-size: 1.35rem; }
  .novel-genre-views { font-size: 0.9rem; gap:6px; }
  .novel-author-translator { font-size: 0.95rem; gap:4px; }
  .stat-number { font-size: 1.3rem; }
  .public-domain-disclaimer .disclaimer-content { font-size: 12px; padding: 8px 10px; }
  .read-novel-btn { padding: 10px 14px; font-size: 0.98rem; }
}