/* ===== blok CSS #1 (dari index.html) ===== */
@keyframes maintPulse {
      0% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5)); }
      50% { transform: scale(1.05) translateY(-10px); filter: drop-shadow(0 0 25px rgba(56, 189, 248, 0.8)); }
      100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.5)); }
    }
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(-45deg, #fff, #00e1ff, #fff, #23a6d5);
      background-size: 500% 400%;
      animation: gradient 15s ease infinite;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
      transition: background 0.3s, color 0.3s
    }

    /* PERF: Pause semua animasi infinite saat:
       - tab tidak aktif (class ditoggle dari JS via Page Visibility API)
       - halaman profil sedang terbuka (animasi BG di-pause supaya repaint tidak
         tumpang tindih dengan backdrop-filter di profile-container — biang lemot
         #1 di laptop saat buka profil)
       - user memilih `prefers-reduced-motion: reduce` (aksesibilitas)
       - device low-end (class .low-end di-set dari JS deteksi hardwareConcurrency)

       PENTING: kita HANYA pause animasi infinite/dekoratif (BG body, partikel,
       shimmer). Animasi struktural (fadeIn/slideUp/welcomeIn) yang dipakai utk
       menampilkan halaman TIDAK BOLEH di-pause, jika tidak halaman jadi blank.
    */
    body.litdigi-idle,
    body.litdigi-low-end,
    body.litdigi-on-profile {
      animation: none !important;
      background: linear-gradient(-45deg, #f5fbfd, #e6f7fb, #ffffff, #d9eef7) !important;
    }
    /* Nonaktifkan backdrop-filter (mahal di GPU) tapi HANYA di area yg memang
       sering memicu repaint, bukan di seluruh DOM. */
    body.litdigi-low-end .profile-container,
    body.litdigi-low-end .profile-header,
    body.litdigi-low-end .modal-content,
    body.litdigi-low-end .navbar,
    body.litdigi-on-profile .profile-container,
    body.litdigi-on-profile .profile-header,
    body.litdigi-on-profile .navbar {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    @media (prefers-reduced-motion: reduce) {
      body {
        animation: none !important;
        background: linear-gradient(-45deg, #f5fbfd, #e6f7fb, #ffffff, #d9eef7) !important;
      }
      /* hanya matikan transition yg lama (>= 0.3s), biarkan fadeIn pendek tetap jalan */
      * {
        scroll-behavior: auto !important;
      }
    }

    /* PERF: content-visibility memberi tahu browser untuk SKIP render kartu
       karya yg belum terlihat di viewport. Sangat berpengaruh di laptop saat
       buka profil yg punya banyak karya (10-100+). */
    .user-work-card {
      content-visibility: auto;
      contain-intrinsic-size: 280px 320px;
    }

    /* PERF: layer promotion untuk profile-container supaya scroll di laptop
       tidak memicu repaint backdrop-filter berulang. */
    #authorProfile.active .profile-container,
    #profile.active .profile-container {
      will-change: transform;
      transform: translateZ(0);
    }

    /* PERF: matikan backdrop-filter di tombol-tombol profile (di-render
       beberapa kali per halaman + ada `transition: all 0.3s` -> repaint mahal
       di laptop saat hover). Visual hampir tidak berubah karena background
       sudah solid. */
    body.litdigi-on-profile .profile-action-btn,
    body.litdigi-low-end .profile-action-btn {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      transition: background 0.2s, color 0.2s !important;
    }

    /* PERF: gambar cover di kartu karya — kasih background placeholder
       agar layout tidak shift saat lazy-load. */
    .user-work-cover img {
      background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    }

    /* PERF: kurangi box-shadow di kartu karya (sumber paint cost di laptop
       saat ada 20+ kartu di-render bersamaan). Visual masih ada shadow ringan. */
    body.litdigi-on-profile .user-work-card {
      box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
      transition: transform 0.2s ease !important;
    }
    body.litdigi-on-profile .user-work-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0,0,0,0.1) !important;
    }


    #root {
      display: none
    }

    @keyframes gradient {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.05)
      }
    }

    @keyframes wave {

      0%,
      100% {
        transform: rotate(0deg)
      }

      25% {
        transform: rotate(20deg)
      }

      75% {
        transform: rotate(-20deg)
      }
    }

    @keyframes slideUp {
      from {
        transform: translateY(100%);
        opacity: 0
      }

      to {
        transform: translateY(0);
        opacity: 1
      }
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .scroll-animate {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease
    }

    .scroll-animate.animated {
      opacity: 1;
      transform: translateY(0)
    }

    .scroll-animate.left {
      transform: translateX(-50px)
    }

    .scroll-animate.left.animated {
      transform: translateX(0)
    }

    .scroll-animate.right {
      transform: translateX(50px)
    }

    .scroll-animate.right.animated {
      transform: translateX(0)
    }

    /* ========================================================================
       [FIX TARGET SENTUH] Ukuran minimum area tekan di perangkat sentuh.
       WCAG 2.5.8 mensyaratkan 24x24px; Apple HIG & Material menganjurkan 44x44px.
       Terukur sebelum perbaikan: tombol "Lewati" tur hanya 18px, tautan menu 23px,
       dan tombol dialog 36-37px — semuanya sulit ditekan dengan jempol.

       Diterapkan lewat min-height + padding, bukan height tetap, sehingga tidak
       ada tata letak yang bergeser: elemen-elemen ini sudah memakai flex dengan
       align-items:center, jadi isinya tetap di tengah.
       Memakai (pointer: coarse) agar hanya berlaku pada layar sentuh — tampilan
       desktop dengan mouse tidak berubah sama sekali.
       ======================================================================== */
    @media (max-width: 900px), (pointer: coarse) {

      .btn,
      .mobile-login-btn,
      .studio-draft-btn,
      .studio-draft-select,
      .audio-zone-btn,
      .syn-btn,
      .reading-ctrl-btn,
      .tour-action-btn,
      .tour-nav-btn {
        min-height: 44px;
      }

      /* Tautan navigasi di menu mobile */
      .mobile-menu a,
      .mobile-logout-item,
      .mobile-profile-item {
        min-height: 44px;
      }

      /* Tautan footer sebelumnya hanya setinggi barisnya (23px). Padding vertikal
         dipakai agar jarak antar tautan tetap terlihat sama seperti semula
         (margin-bottom dikurangi sebesar padding yang ditambahkan). */
      .footer-links a {
        padding: 10px 0;
        margin-bottom: 0;
      }

      /* Tombol teks kecil: perbesar area tekan tanpa mengubah ukuran hurufnya */
      .tour-skip-btn {
        min-height: 44px;
        padding: 0 12px;
      }

      /* Tombol ikon bundar */
      .modal-close,
      .font-ctrl-btn,
      .theme-ctrl-btn,
      .back-btn {
        min-width: 44px;
        min-height: 44px;
      }

      /* Pil genre & kartu kategori di Studio */
      .adv-tag-pill,
      .adv-pill {
        min-height: 40px;
      }

      /* Kolom isian: 16px mencegah iOS Safari otomatis memperbesar layar
         (zoom paksa) saat kolom difokuskan. */
      .form-input,
      .form-textarea,
      .sf-input,
      .sf-select,
      .sf-textarea,
      .comment-textarea,
      input[type="text"],
      input[type="email"],
      input[type="password"],
      input[type="search"] {
        font-size: 16px;
        min-height: 44px;
      }

      .form-textarea,
      .sf-textarea,
      .comment-textarea {
        min-height: 80px;
      }
    }

    /* [FIX OVERFLOW] Kartu dengan animasi masuk digeser 50px sebelum dianimasikan.
       Di desktop geseran itu tertelan margin, tapi di layar HP ia menonjol keluar
       viewport sehingga halaman bisa digeser ke samping (scrollWidth 400px pada
       layar 390px). Geseran dikecilkan di layar sempit — arah & kesan animasinya
       tetap sama. */
    @media (max-width: 900px) {
      .scroll-animate.left { transform: translateX(-18px) }
      .scroll-animate.right { transform: translateX(18px) }
      .scroll-animate.left.animated,
      .scroll-animate.right.animated { transform: translateX(0) }
    }

    /* ===== WOW PRELOADER ===== */
    #wow-preloader {
      position: fixed;
      inset: 0;
      z-index: 99999;
      background: #121212;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: opacity 0.8s ease, visibility 0.8s ease
    }

    #wow-preloader.hidden {
      opacity: 0;
      visibility: hidden
    }

    .preloader-book {
      width: 80px;
      height: 60px;
      position: relative;
      transform-style: preserve-3d;
      animation: floatBook 2s infinite ease-in-out
    }

    .preloader-page {
      position: absolute;
      width: 40px;
      height: 60px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      border-radius: 2px 8px 8px 2px;
      transform-origin: left center;
      animation: flipPage 1.5s infinite linear;
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2)
    }

    .preloader-page:nth-child(2) {
      animation-delay: 0.3s;
      background: linear-gradient(135deg, #23a6d5, #ff9800)
    }

    .preloader-page:nth-child(3) {
      animation-delay: 0.6s;
      background: linear-gradient(135deg, #ff9800, #ff5722)
    }

    @keyframes flipPage {
      0% {
        transform: rotateY(0deg) skewY(0deg);
        opacity: 1
      }

      50% {
        transform: rotateY(-90deg) skewY(-20deg);
        opacity: 0.5
      }

      100% {
        transform: rotateY(-180deg) skewY(0deg);
        opacity: 0
      }
    }

    @keyframes floatBook {

      0%,
      100% {
        transform: translateY(0)
      }

      50% {
        transform: translateY(-15px)
      }
    }

    .preloader-text {
      margin-top: 30px;
      font-size: 1.2rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: 2px;
      text-transform: uppercase;
      background: linear-gradient(90deg, #00e1ff, #23a6d5, #ff9800, #ff5722, #00e1ff);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: mottoShine 3s linear infinite
    }

    /* ===== NOTIFIKASI EXP ANIMASI (GAMIFIKASI) ===== */
    .exp-notification-wrapper {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%) translateY(150px);
      background: rgba(255, 255, 255, 0.95);
      border: 1px solid #ddd;
      border-radius: 16px;
      padding: 15px 25px;
      display: flex;
      align-items: center;
      gap: 20px;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
      z-index: 9999;
      opacity: 0;
      pointer-events: none;
      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      backdrop-filter: blur(10px);
      color: #333;
      min-width: 320px;
    }

    body.dark-mode .exp-notification-wrapper {
      background: rgba(30, 30, 30, 0.95);
      border: 1px solid #444;
      color: #fff;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    }

    .exp-notification-wrapper.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    .exp-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .exp-arrow-up {
      color: #4caf50;
      font-size: 1.5rem;
      font-weight: 900;
      animation: bounceUp 1s infinite;
    }

    .exp-text-gain {
      color: #4caf50;
      font-weight: 800;
      font-size: 1.2rem;
    }

    .exp-right {
      flex: 1;
    }

    .exp-level-text {
      font-size: 0.9rem;
      font-weight: 700;
      margin-bottom: 5px;
      color: #666;
    }

    body.dark-mode .exp-level-text {
      color: #aaa;
    }

    .exp-daily-limit-text {
      font-size: 0.68rem;
      color: #aaa;
      margin-top: 3px;
      text-align: right;
      letter-spacing: 0.2px;
    }

    body.dark-mode .exp-daily-limit-text {
      color: #666;
    }

    .exp-bar-container {
      width: 100%;
      height: 8px;
      background: #e0e0e0;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
    }

    body.dark-mode .exp-bar-container {
      background: #333;
    }

    /* [FIX OVERFLOW] Kilau XP bergerak melewati tepi kanan bar; tanpa pagar ini
       ia menonjol keluar layar dan menyebabkan geser samping di HP kecil. */
    .exp-bar,
    .exp-bar-fill {
      overflow: hidden;
    }

    .exp-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #00e1ff, #23a6d5);
      width: 0%;
      transition: width 1.5s ease-out;
      border-radius: 10px;
    }

    .exp-bar-glow {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 20px;
      background: rgba(255, 255, 255, 0.5);
      filter: blur(3px);
      animation: slideGlow 1.5s ease-out forwards;
    }

    @keyframes bounceUp {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-5px);
      }
    }

    @keyframes slideGlow {
      0% {
        left: -20px;
        opacity: 1;
      }

      100% {
        left: 100%;
        opacity: 0;
      }
    }

    /* HEADER */
    header {
      background: white;
      box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: all 0.3s
    }

    .header-container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 24px;
      height: 68px;
      display: flex;
      align-items: center;
      gap: 20px
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0
    }

    .header-logo {
      width: 44px;
      height: 44px;
      transition: transform 0.3s;
      cursor: pointer
    }

    .header-logo:hover {
      transform: scale(1.1) rotate(5deg)
    }

    .header-brand {
      font-weight: 700;
      font-size: 1.25rem;
      color: #333;
      cursor: pointer;
      transition: color 0.3s;
      white-space: nowrap
    }

    .header-brand:hover {
      color: #23a6d5
    }

    .header-nav {
      display: flex;
      align-items: center;
      gap: 4px;
      flex: 1;
      justify-content: center;
      /* [FIX OVERFLOW] Isi header butuh ~1168px, sedangkan laptop 1024-1280px
         hanya menyediakan lebih sedikit. Tanpa min-width:0 elemen flex menolak
         menyusut di bawah lebar kontennya, sehingga tombol Masuk/Daftar terdorong
         keluar layar dan muncul geser samping. Kini navigasi yang mengalah. */
      min-width: 0;
      flex-wrap: wrap;
      row-gap: 0
    }

    .nav-link {
      padding: 8px 14px;
      border-radius: 10px;
      font-weight: 500;
      font-size: 0.88rem;
      color: #555;
      cursor: pointer;
      transition: all 0.25s;
      white-space: nowrap;
      text-decoration: none;
      border: none;
      background: none;
      font-family: 'Poppins', sans-serif
    }

    .nav-link:hover {
      color: #23a6d5;
      background: rgba(35, 166, 213, 0.08)
    }

    .nav-link.active-nav {
      color: #23a6d5;
      background: rgba(35, 166, 213, 0.1);
      font-weight: 600
    }

    .header-auth {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0
    }

    /* [FIX OVERFLOW] Isi header (kiri 121px + navigasi 708px + auth 343px)
       melebihi lebar laptop 901-1279px, sehingga tombol Masuk/Daftar terdorong
       keluar layar. Di rentang itu tautan navigasi dan tombol dirapatkan agar
       semuanya tetap muat dalam satu baris. Ditempatkan setelah .nav-link dan
       .btn-masuk supaya memenangkan urutan cascade.
       Layar >=1280px tidak tersentuh sama sekali. */
    @media (min-width: 901px) and (max-width: 1279px) {
      .header-container {
        padding: 0 14px;
        gap: 8px
      }

      .header-nav {
        gap: 0
      }

      .nav-link {
        padding: 8px 7px;
        font-size: 0.8rem;
        white-space: nowrap
      }

      .nav-link i {
        display: none
      }

      .btn-masuk,
      .btn-daftar {
        padding: 8px 13px;
        font-size: 0.8rem;
        white-space: nowrap
      }
    }

    /* Rentang tersempit (901-959px): rapatkan sedikit lagi agar navigasi tetap
       satu baris tepat sebelum beralih ke tampilan hamburger di 900px. */
    @media (min-width: 901px) and (max-width: 959px) {
      .nav-link { padding: 8px 5px; font-size: 0.75rem }
      .btn-masuk, .btn-daftar { padding: 7px 10px; font-size: 0.75rem }
      .header-container { gap: 6px }
    }

    .btn-masuk {
      padding: 8px 20px;
      border-radius: 22px;
      font-weight: 600;
      font-size: 0.85rem;
      color: #23a6d5;
      border: 2px solid #23a6d5;
      background: white;
      cursor: pointer;
      transition: all 0.25s;
      font-family: 'Poppins', sans-serif;
      white-space: nowrap
    }

    .btn-masuk:hover {
      background: #23a6d5;
      color: white;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(35, 166, 213, 0.3)
    }

    .btn-daftar {
      padding: 8px 20px;
      border-radius: 22px;
      font-weight: 600;
      font-size: 0.85rem;
      color: white;
      border: none;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      cursor: pointer;
      transition: all 0.25s;
      font-family: 'Poppins', sans-serif;
      white-space: nowrap;
      box-shadow: 0 3px 10px rgba(35, 166, 213, 0.3)
    }

    .btn-daftar:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(35, 166, 213, 0.45)
    }

    /* User profile (logged in) */
    .user-profile {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      position: relative;
      padding: 5px 12px 5px 5px;
      border-radius: 30px;
      border: 1.5px solid #e8f4fd;
      transition: all 0.25s
    }

    .user-profile:hover {
      background: #f0fdff;
      border-color: #23a6d5
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid #23a6d5;
      flex-shrink: 0
    }

    .user-name-header {
      font-size: 0.82rem;
      font-weight: 600;
      color: #333;
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .user-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: white;
      border-radius: 14px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.13);
      padding: 8px 0;
      min-width: 175px;
      display: none;
      z-index: 1001;
      border: 1px solid rgba(0, 0, 0, 0.06)
    }

    .user-dropdown.active {
      display: block;
      animation: fadeIn 0.2s ease
    }

    .user-dropdown a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 18px;
      color: #333;
      text-decoration: none;
      transition: all 0.2s;
      font-size: 0.88rem;
      cursor: pointer
    }

    .user-dropdown a:hover {
      background: #f0fdff;
      color: #23a6d5
    }

    .user-dropdown a i {
      width: 16px;
      text-align: center;
      color: #23a6d5
    }

    .user-dropdown a.logout-item i {
      color: #ff4757
    }

    .user-dropdown a.logout-item:hover {
      background: #fff5f5;
      color: #ff4757
    }

    .dropdown-divider {
      height: 1px;
      background: #f0f0f0;
      margin: 5px 0
    }

    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
      gap: 5px;
      margin-left: auto
    }

    .hamburger span {
      width: 24px;
      height: 2.5px;
      background: #333;
      transition: all 0.3s;
      border-radius: 2px
    }

    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px)
    }

    .hamburger.active span:nth-child(2) {
      opacity: 0
    }

    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -6px)
    }

    .mobile-menu {
      display: none;
      position: fixed;
      top: var(--mm-top, 68px);
      left: 0;
      width: 100%;
      background: white;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      padding: 16px 20px;
      z-index: 999;
      border-top: 1px solid #eee;

      /* [FIX MOBILE MENU] Sebelumnya menu memakai position:fixed tanpa batas tinggi
         dan tanpa scroll sendiri. Akibatnya di layar HP (apalagi mode landscape),
         item paling bawah — termasuk tombol "Keluar" — terdorong ke luar layar dan
         TIDAK BISA dijangkau, karena elemen fixed tidak ikut ter-scroll bersama
         halaman. Sekarang menu dibatasi setinggi sisa viewport dan bisa di-scroll
         sendiri, sehingga seluruh item selalu dapat diakses. */
      max-height: calc(100dvh - var(--mm-top, 68px));
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      /* Ruang aman untuk gesture bar / notch pada HP */
      padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
      scrollbar-width: thin;
      scrollbar-color: rgba(35, 166, 213, 0.45) transparent;
    }

    /* Fallback untuk browser lama yang belum mendukung satuan dvh */
    @supports not (height: 100dvh) {
      .mobile-menu { max-height: calc(100vh - var(--mm-top, 68px)); }
    }

    .mobile-menu::-webkit-scrollbar { width: 6px; }
    .mobile-menu::-webkit-scrollbar-track { background: transparent; }
    .mobile-menu::-webkit-scrollbar-thumb {
      background: rgba(35, 166, 213, 0.45);
      border-radius: 6px;
    }

    .mobile-menu.active {
      display: block;
      animation: fadeIn 0.2s ease
    }

    /* [FIX MOBILE MENU] Layar pendek (HP mode landscape): rapatkan jarak antar item
       supaya lebih banyak menu terlihat sekaligus tanpa mengubah gaya/warna. */
    @media (max-height: 520px) {
      .mobile-menu { padding-top: 10px; }
      .mobile-menu a { padding-top: 8px; padding-bottom: 8px; }
      .mm-section-label { padding-top: 8px !important; padding-bottom: 2px !important; }
      .mm-settings-row { padding-top: 2px !important; padding-bottom: 6px !important; }
      .mm-settings-row a { padding-top: 8px !important; padding-bottom: 8px !important; }
      .mobile-profile-item { padding-top: 8px; padding-bottom: 8px; }
      .mobile-logout-item { padding-top: 9px; padding-bottom: 9px; }
    }

    /* ========================================================================
       [TABLET] Rentang 601-900px (iPad potret, tablet kecil) tetap memakai
       hamburger — diukur, header butuh minimal 901px agar navigasi muat satu
       baris, jadi memaksakan nav horizontal di 820px justru memecahnya jadi
       dua baris. Yang diperbaiki: MENU-nya dibuat menyesuaikan lebar tablet
       supaya tidak lagi terasa seperti "ponsel raksasa" — menu tampil sebagai
       panel di sisi kanan, bukan membentang penuh selebar layar.
       ======================================================================== */
    @media (min-width: 601px) and (max-width: 900px) {
      .mobile-menu {
        left: auto;
        right: 0;
        width: min(380px, 92vw);
        border-left: 1px solid #eee;
        border-bottom-left-radius: 16px;
        box-shadow: -8px 12px 30px rgba(0, 0, 0, 0.12);
      }

      /* Menu utama dua kolom: memanfaatkan lebar panel, daftar jadi lebih pendek
         sehingga tombol Keluar terlihat tanpa banyak menggulir. */
      .mobile-menu .mm-section-label {
        grid-column: 1 / -1;
      }

      .mm-menu-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2px 8px;
      }
    }

    body.dark-mode .mobile-menu {
      border-left-color: #333;
    }

    /* [FIX MOBILE MENU] Blok "Pengaturan Umum" dibuat menempel di atas saat menu
       di-scroll, supaya tetap mudah dijangkau tanpa memakan ruang menu utama. */
    .mm-settings-head {
      position: sticky;
      top: -16px;
      z-index: 2;
      background: inherit;
    }

    /* Di layar pendek (HP landscape), blok Pengaturan ikut ter-scroll — bukan
       sticky — supaya ruang tampil Menu Utama & tombol Keluar jadi maksimal.
       Ditulis setelah aturan sticky di atas agar override-nya berlaku. */
    @media (max-height: 520px) {
      .mm-settings-head { position: static; }
    }

    /* Latar gelap di belakang menu: memperjelas fokus sekaligus jadi area
       tap untuk menutup menu. */
    .mobile-menu-backdrop {
      display: none;
      position: fixed;
      inset: var(--mm-top, 68px) 0 0 0;
      background: rgba(0, 0, 0, 0.35);
      z-index: 998;
      -webkit-backdrop-filter: blur(1px);
      backdrop-filter: blur(1px);
    }

    .mobile-menu-backdrop.active {
      display: block;
      animation: fadeIn 0.2s ease;
    }

    /* Kunci scroll halaman di belakang saat menu terbuka agar tidak "dua lapis
       scroll" yang membingungkan di HP. */
    body.mm-open {
      overflow: hidden;
    }

    .mobile-menu a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 8px;
      text-decoration: none;
      color: #444;
      font-weight: 500;
      font-size: 0.9rem;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s
    }

    .mobile-menu a:hover {
      color: #23a6d5;
      background: #f0fdff;
      padding-left: 14px
    }

    .mobile-profile-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 8px;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
      margin-bottom: 4px;
      border: 1px solid #e8f4fd;
      background: #f8fdff
    }

    .mobile-profile-item video,
    .mobile-profile-item img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 2px solid #23a6d5;
      object-fit: cover
    }

    .mobile-profile-name {
      font-weight: 600;
      color: #333;
      font-size: 0.9rem
    }

    .mobile-profile-sub {
      font-size: 0.75rem;
      color: #aaa
    }

    .mobile-logout-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 11px 8px;
      color: #ff4757;
      font-weight: 500;
      font-size: 0.88rem;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s
    }

    .mobile-logout-item:hover {
      background: #fff5f5
    }

    .mobile-login-btn {
      display: block;
      width: 100%;
      padding: 12px;
      border-radius: 12px;
      text-align: center;
      font-weight: 600;
      font-size: 0.9rem;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.25s;
      border: none;
      font-family: 'Poppins', sans-serif
    }

    .mobile-login-btn.outline {
      background: white;
      color: #23a6d5;
      border: 2px solid #23a6d5
    }

    .mobile-login-btn.filled {
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: white
    }

    /* ===== WELCOME OVERLAY ANIMATION ===== */
    @keyframes welcomeIn {
      0% {
        opacity: 0;
        transform: scale(0.7) translateY(30px)
      }

      60% {
        transform: scale(1.05) translateY(-5px)
      }

      100% {
        opacity: 1;
        transform: scale(1) translateY(0)
      }
    }

    @keyframes welcomeOut {
      to {
        opacity: 0;
        transform: scale(0.9) translateY(-20px)
      }
    }

    @keyframes confettiFall {
      0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 1
      }

      100% {
        transform: translateY(200px) rotate(720deg);
        opacity: 0
      }
    }

    @keyframes shimmer {
      0% {
        background-position: -200% 0
      }

      100% {
        background-position: 200% 0
      }
    }

    @keyframes slideInRight {
      from { transform: translateX(110%); opacity: 0; }
      to   { transform: translateX(0);   opacity: 1; }
    }

    @keyframes avatarPop {
      0% {
        transform: scale(0) rotate(-180deg)
      }

      70% {
        transform: scale(1.15) rotate(5deg)
      }

      100% {
        transform: scale(1) rotate(0deg)
      }
    }

    @keyframes textSlide {
      from {
        opacity: 0;
        transform: translateX(-20px)
      }

      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    .welcome-overlay {
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(6px);
      opacity: 0;
      transition: opacity 0.3s
    }

    .welcome-overlay.show {
      opacity: 1
    }

    .welcome-card {
      background: white;
      border-radius: 28px;
      padding: 40px 48px;
      text-align: center;
      max-width: 420px;
      width: 90%;
      box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
      position: relative;
      overflow: hidden;
      animation: welcomeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards
    }

    .welcome-card.closing {
      animation: welcomeOut 0.4s ease forwards
    }

    .welcome-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg, #00e1ff, #23a6d5, #00e1ff);
      background-size: 200% 100%;
      animation: shimmer 2s linear infinite
    }

    .welcome-confetti {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden
    }

    .confetti-piece {
      position: absolute;
      width: 8px;
      height: 8px;
      border-radius: 2px;
      animation: confettiFall 1.5s ease-out forwards
    }

    .welcome-avatar-wrap {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      margin: 0 auto 18px;
      border: 4px solid #e8f4fd;
      overflow: hidden;
      animation: avatarPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
      box-shadow: 0 8px 25px rgba(35, 166, 213, 0.3)
    }

    .welcome-avatar-wrap img,
    .welcome-avatar-wrap video {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .welcome-emoji {
      font-size: 2.2rem;
      margin-bottom: 12px;
      animation: pulse 1s ease 0.5s 3
    }

    .welcome-heading {
      font-size: 1.6rem;
      font-weight: 800;
      color: #1a1a1a;
      margin-bottom: 6px;
      animation: textSlide 0.5s ease 0.3s both
    }

    .welcome-sub {
      font-size: 1rem;
      color: #23a6d5;
      font-weight: 600;
      margin-bottom: 8px;
      animation: textSlide 0.5s ease 0.4s both
    }

    .welcome-desc {
      font-size: 0.88rem;
      color: #999;
      animation: textSlide 0.5s ease 0.5s both
    }

    .welcome-close-bar {
      margin-top: 24px;
      height: 4px;
      background: #eee;
      border-radius: 2px;
      overflow: hidden;
      animation: textSlide 0.4s ease 0.6s both
    }

    .welcome-close-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #00e1ff, #23a6d5);
      width: 100%;
      animation: shimmer 2.5s linear forwards;
      transform-origin: left
    }

    /* PAGE SECTIONS */
    .page-section {
      display: none;
      padding: 40px 20px;
      width: 100%;
      flex: 1;
      animation: fadeIn 0.5s ease;
      min-height: calc(100vh - 80px)
    }

    .page-section.active {
      display: block
    }

    /* HOME */
    .home-wrapper {
      display: flex;
      justify-content: center;
      align-items: center
    }

    .container {
      width: 90%;
      max-width: 1200px;
      display: flex;
      flex-wrap: wrap;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      overflow: hidden
    }

    .left-content {
      flex: 1;
      /* [FIX OVERFLOW] min-width tetap 300px + padding 40px membuat elemen ini
         selalu lebih lebar dari layar 320px. `min(300px,100%)` menjaga tata letak
         desktop apa adanya, sekaligus membolehkannya menyusut di layar kecil. */
      min-width: min(300px, 100%);
      padding: 60px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .right-content {
      flex: 1;
      min-width: min(300px, 100%);
      background: #f0fdff;
      padding: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center
    }

    .title {
      font-size: 3rem;
      font-weight: 900;
      color: #000;
      margin-bottom: 20px;
      line-height: 1.2
    }

    .description {
      font-size: 1.1rem;
      color: #666;
      margin-bottom: 30px;
      line-height: 1.6
    }

    .buttons {
      display: flex;
      gap: 15px;
      flex-wrap: wrap
    }

    .btn {
      padding: 12px 28px;
      border-radius: 30px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      border: none;
      font-size: 0.95rem;
      font-family: 'Poppins', sans-serif;
      display: inline-flex;
      align-items: center;
      gap: 8px
    }

    .btn-primary {
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: white
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 20px rgba(35, 166, 213, 0.4)
    }

    .btn-secondary {
      background: transparent;
      color: #23a6d5;
      border: 2px solid #23a6d5
    }

    .btn-secondary:hover {
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: white;
      border-color: transparent;
      transform: translateY(-2px)
    }

    .btn-liked {
      background: linear-gradient(135deg, #ff6b6b, #ff4757);
      color: white;
      border: none
    }

    .btn-liked:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4)
    }

    .btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none !important
    }

    .illustration {
      width: 100%;
      height: 280px;
      background: linear-gradient(135deg, rgba(0, 225, 255, 0.2), rgba(35, 166, 213, 0.3));
      border-radius: 15px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 225, 255, 0.2);
      perspective: 800px
    }

    .home-stats {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 20px;
      color: #666;
      font-size: 0.9rem
    }

    .home-stats span {
      display: flex;
      align-items: center;
      gap: 6px
    }

    /* KARYA SHOWCASE */
    .karya-showcase {
      padding: 50px 20px;
      background: rgba(255, 255, 255, 0.9);
      margin-top: 40px;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1)
    }

    .karya-showcase-container {
      max-width: 1200px;
      margin: 0 auto
    }

    .section-header {
      text-align: center;
      margin-bottom: 40px
    }

    .section-title {
      font-size: 2.2rem;
      font-weight: 700;
      color: #333;
      margin-bottom: 15px;
      position: relative;
      display: inline-block
    }

    .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      border-radius: 2px
    }

    .section-subtitle {
      font-size: 1rem;
      color: #666;
      margin-top: 20px;
      max-width: 700px;
      margin-left: auto;
      margin-right: auto
    }

    .karya-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px;
      margin-top: 30px
    }

    /* ===== 3D BOOK COVER ===== */
    .karya-cover {
      height: 220px;
      position: relative;
      overflow: hidden;
      border-radius: 15px 15px 0 0
    }

    .book-scene {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 900px;
      background: linear-gradient(135deg, rgba(0, 225, 255, 0.05), rgba(35, 166, 213, 0.1));
      cursor: pointer
    }

    .book-3d {
      width: 120px;
      height: 178px;
      position: relative;
      transform-style: preserve-3d;
      transform: rotateY(-20deg);
      transition: transform 0.5s ease
    }

    .karya-card:hover .book-3d {
      transform: rotateY(-35deg) rotateX(2deg)
    }

    .book-face {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 1px 6px 6px 1px;
      overflow: hidden;
      box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.4), inset -2px 0 6px rgba(0, 0, 0, 0.15);
      background: linear-gradient(135deg, #00e1ff, #23a6d5)
    }

    .book-face img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .book-face-default {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 0.72rem;
      text-align: center;
      padding: 8px;
      line-height: 1.4
    }

    .book-spine {
      position: absolute;
      left: -17px;
      width: 17px;
      height: 100%;
      transform: rotateY(-90deg);
      transform-origin: right center;
      background: linear-gradient(to right, #080808 0%, #2c2c2c 35%, #181818 100%);
      border-radius: 3px 0 0 3px
    }

    .book-pages {
      position: absolute;
      top: 2px;
      right: -5px;
      bottom: 2px;
      width: 5px;
      transform: translateZ(-2px);
      background: repeating-linear-gradient(to bottom, #f8f8f8, #f8f8f8 1px, #e5e5e5 1px, #e5e5e5 2px);
      border-radius: 0 2px 2px 0
    }

    .karya-type {
      position: absolute;
      top: 12px;
      right: 12px;
      background: rgba(255, 255, 255, 0.92);
      color: #23a6d5;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      backdrop-filter: blur(4px)
    }

    /* KARYA CARDS */
    .karya-card {
      background: white;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
      transition: all 0.3s;
      cursor: pointer
    }

    .karya-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15)
    }

    .karya-content {
      padding: 18px
    }

    .karya-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: #333;
      margin-bottom: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .karya-author {
      font-size: 0.85rem;
      color: #888;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .karya-author i {
      color: #23a6d5
    }

    .karya-excerpt {
      font-size: 0.88rem;
      color: #666;
      line-height: 1.5;
      margin-bottom: 15px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .karya-stats {
      display: flex;
      justify-content: space-between;
      padding-top: 12px;
      border-top: 1px solid #f0f0f0
    }

    .karya-stat {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.85rem;
      color: #888
    }

    .karya-stat i {
      color: #23a6d5
    }

    /* ORIGEN SECTION (Home) */
    .origen-section {
      /* [FIX OVERFLOW] Pagari transform anak-anaknya. Dipakai `clip` (bukan
         `hidden`) supaya tidak membuat konteks scroll baru yang bisa merusak
         position:sticky di dalamnya. */
      overflow-x: clip;
      padding: 50px 20px;
      background: rgba(255, 255, 255, 0.9);
      margin-top: 40px;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1)
    }

    .origen-title {
      font-size: 2.2rem;
      font-weight: 800;
      color: #333;
      margin-bottom: 15px;
      display: inline-block;
      position: relative
    }

    .origen-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 4px;
      background: linear-gradient(135deg, #ff9800, #ff5722);
      border-radius: 2px
    }

    .origen-card {
      flex: 1;
      min-width: min(280px, 100%);
      background: white;
      border-radius: 15px;
      padding: 28px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.4s;
      position: relative;
      overflow: hidden;
      cursor: default
    }

    .origen-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 5px;
      background: linear-gradient(90deg, #ff9800, #ff5722)
    }

    .origen-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12)
    }

    .origen-card-icon {
      font-size: 2.2rem;
      color: #ff9800;
      margin-bottom: 18px;
      display: block
    }

    .origen-card-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: #333;
      margin-bottom: 12px
    }

    .origen-card-text {
      font-size: 0.95rem;
      color: #666;
      line-height: 1.6
    }

    /* KARYA PAGE */
    .karya-page-container {
      max-width: 1200px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      padding: 40px
    }

    .karya-page-title {
      font-size: 2rem;
      font-weight: 700;
      color: #333;
      margin-bottom: 10px
    }

    .karya-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      margin-bottom: 30px;
      align-items: center
    }

    .karya-search {
      flex: 1;
      min-width: 220px;
      position: relative
    }

    .karya-search-input {
      width: 100%;
      padding: 11px 44px 11px 15px;
      border: 2px solid #e0e0e0;
      border-radius: 25px;
      font-size: 0.9rem;
      transition: all 0.3s;
      font-family: 'Poppins', sans-serif
    }

    .karya-search-input:focus {
      outline: none;
      border-color: #23a6d5;
      box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1)
    }

    .karya-search-btn {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      border: none;
      border-radius: 50%;
      width: 34px;
      height: 34px;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s
    }

    .karya-search-btn:hover {
      transform: translateY(-50%) scale(1.1)
    }

    .karya-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap
    }

    .karya-filter-btn {
      padding: 7px 18px;
      border: 2px solid #e0e0e0;
      background: white;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s;
      color: #666;
      font-family: 'Poppins', sans-serif
    }

    .karya-filter-btn:hover {
      border-color: #23a6d5;
      color: #23a6d5
    }

    .karya-filter-btn.active {
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: white;
      border-color: transparent
    }

    .karya-sort-select {
      padding: 7px 14px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      font-size: 0.85rem;
      font-family: 'Poppins', sans-serif;
      cursor: pointer;
      transition: all 0.3s
    }

    .karya-sort-select:focus {
      outline: none;
      border-color: #23a6d5
    }

    .karya-results {
      margin-bottom: 15px;
      color: #888;
      font-size: 0.85rem
    }

    /* ===== STATUS BADGE ===== */
    .status-badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 12px;
      font-size: 0.7rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-left: 8px;
      vertical-align: middle;
    }
    .status-badge.ongoing {
      background: rgba(255, 152, 0, 0.15);
      color: #e67e22;
      border: 1px solid rgba(255, 152, 0, 0.3);
    }
    .status-badge.completed {
      background: rgba(46, 204, 113, 0.15);
      color: #27ae60;
      border: 1px solid rgba(46, 204, 113, 0.3);
    }
    body.dark-mode .status-badge.ongoing { background: rgba(255, 152, 0, 0.1); color: #f39c12; }
    body.dark-mode .status-badge.completed { background: rgba(46, 204, 113, 0.1); color: #2ecc71; }

    /* ===== ADVANCED SEARCH PANEL ===== */
    .karya-filter-toggle-btn {
      width: 38px; height: 38px; border-radius: 12px;
      border: 2px solid #e0e0e0; background: #fff;
      color: #888; cursor: pointer; font-size: 0.9rem;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.25s; flex-shrink: 0;
      position: relative;
    }
    .karya-filter-toggle-btn:hover {
      border-color: #23a6d5; color: #23a6d5;
      background: rgba(35,166,213,0.05);
    }
    .karya-filter-toggle-btn.active {
      background: linear-gradient(135deg, #23a6d5, #00e1ff);
      border-color: transparent; color: #fff;
      box-shadow: 0 4px 12px rgba(35,166,213,0.3);
    }
    /* Red dot badge when filters active */
    .karya-filter-toggle-btn .filter-badge {
      position: absolute; top: -4px; right: -4px;
      width: 10px; height: 10px; border-radius: 50%;
      background: #ff4757; border: 2px solid #fff;
      display: none;
    }
    .karya-filter-toggle-btn.has-active-filters .filter-badge { display: block; }

    .advanced-filter-panel {
      width: 100%;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease, padding 0.3s ease;
      opacity: 0;
      background: rgba(35,166,213,0.03);
      border: 1px solid rgba(35,166,213,0.12);
      border-radius: 16px;
      box-sizing: border-box;
    }
    .advanced-filter-panel.open {
      max-height: 400px;
      opacity: 1;
      padding: 18px 20px;
    }
    .adv-filter-section { margin-bottom: 14px; }
    .adv-filter-section:last-child { margin-bottom: 0; }
    .adv-filter-label {
      font-size: 0.72rem; font-weight: 700;
      color: #aaa; letter-spacing: 0.08em;
      text-transform: uppercase; margin-bottom: 8px; display: block;
    }
    .adv-filter-pills { display: flex; flex-wrap: wrap; gap: 7px; }

    /* Status pill */
    .adv-pill {
      padding: 5px 14px; border-radius: 20px;
      border: 1.5px solid #e0e0e0;
      background: #fff; color: #666;
      font-size: 0.78rem; font-weight: 600;
      cursor: pointer; transition: all 0.2s;
      font-family: 'Poppins', sans-serif;
      user-select: none;
    }
    .adv-pill:hover {
      border-color: #23a6d5; color: #23a6d5;
      background: rgba(35,166,213,0.05);
    }
    .adv-pill.active {
      background: linear-gradient(135deg, #23a6d5, #00e1ff);
      border-color: transparent; color: #fff;
      box-shadow: 0 3px 10px rgba(35,166,213,0.25);
    }

    /* Tag pill (multi-select) */
    .adv-tag-pill {
      padding: 5px 12px; border-radius: 20px;
      border: 1.5px solid #e0e0e0;
      background: #fafafa; color: #777;
      font-size: 0.76rem; font-weight: 500;
      cursor: pointer; transition: all 0.2s;
      font-family: 'Poppins', sans-serif;
      user-select: none;
      display: flex; align-items: center; gap: 5px;
    }
    .adv-tag-pill:hover {
      border-color: #23a6d5; color: #23a6d5;
      background: rgba(35,166,213,0.04);
      transform: translateY(-1px);
    }
    .adv-tag-pill.active {
      border-color: #00e1ff;
      background: rgba(35,166,213,0.1); color: #23a6d5;
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(35,166,213,0.15);
    }
    .adv-tag-pill .tag-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: currentColor; opacity: 0;
      transition: opacity 0.2s;
    }
    .adv-tag-pill.active .tag-dot { opacity: 1; }

    /* Active filters summary bar */
    .active-filters-bar {
      display: none;
      align-items: center; gap: 8px;
      padding: 8px 14px;
      background: rgba(35,166,213,0.06);
      border-radius: 10px; margin-bottom: 12px;
      flex-wrap: wrap;
    }
    .active-filters-bar.visible { display: flex; }
    .active-filters-bar .afb-label {
      font-size: 0.75rem; color: #aaa; font-weight: 600;
    }
    .active-filter-chip {
      display: flex; align-items: center; gap: 5px;
      padding: 3px 10px; border-radius: 14px;
      background: rgba(35,166,213,0.12); color: #23a6d5;
      font-size: 0.72rem; font-weight: 700; cursor: pointer;
      border: 1px solid rgba(35,166,213,0.2);
    }
    .active-filter-chip:hover { background: rgba(35,166,213,0.2); }
    .afb-clear-all {
      margin-left: auto; font-size: 0.72rem; color: #bbb;
      cursor: pointer; text-decoration: underline;
    }
    .afb-clear-all:hover { color: #ff4757; }

    /* Dark mode advanced panel */
    body.dark-mode .karya-filter-toggle-btn { background: #252525; border-color: #3a3a3a; color: #aaa; }
    body.dark-mode .karya-filter-toggle-btn:hover { border-color: #23a6d5; color: #23a6d5; background: rgba(35,166,213,0.08); }
    body.dark-mode .advanced-filter-panel { background: rgba(35,166,213,0.04); border-color: rgba(35,166,213,0.1); }
    body.dark-mode .adv-pill { background: #252525; border-color: #3a3a3a; color: #aaa; }
    body.dark-mode .adv-pill:hover { border-color: #23a6d5; color: #23a6d5; background: rgba(35,166,213,0.08); }
    body.dark-mode .adv-tag-pill { background: #252525; border-color: #3a3a3a; color: #aaa; }
    body.dark-mode .adv-tag-pill:hover { background: rgba(35,166,213,0.08); color: #23a6d5; }
    body.dark-mode .adv-filter-label { color: #666; }
    body.dark-mode .active-filters-bar { background: rgba(35,166,213,0.06); }
    body.dark-mode .afb-label { color: #666; }

    .karya-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 25px
    }

    .loading-spinner {
      text-align: center;
      padding: 40px;
      color: #888;
      grid-column: 1/-1;
      font-size: 1rem
    }

    .loading-spinner i {
      animation: spin 1s linear infinite;
      margin-right: 8px
    }

    /* ===== [SKELETON] Placeholder saat data dimuat (temuan #8) =====
       Tujuan: mengganti spinner "Memuat karya..." dengan kerangka yang
       bentuknya meniru kartu asli, supaya tata letak tidak melompat
       ketika data akhirnya datang (cegah layout shift). Dimensi di bawah
       sengaja disamakan dengan .karya-cover (220px) dan .karya-content (18px). */
    .skel-card {
      background: white;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
      pointer-events: none
    }

    .skel-cover {
      height: 220px;
      border-radius: 15px 15px 0 0
    }

    .skel-body {
      padding: 18px
    }

    .skel-line {
      height: 12px;
      border-radius: 6px;
      margin-bottom: 10px
    }

    .skel-line.t {
      height: 18px;
      width: 78%;
      margin-bottom: 12px
    }

    .skel-line.a { width: 45% }
    .skel-line.x1 { width: 100% }
    .skel-line.x2 { width: 88% }
    .skel-line.s { width: 60%; margin-bottom: 0; margin-top: 14px }

    /* Kilau bergerak: dua lapis gradient agar tetap terlihat di tema terang & gelap */
    .skel-cover,
    .skel-line {
      background: #e9ecef;
      background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 50%, rgba(255,255,255,0) 100%);
      background-size: 200% 100%;
      background-repeat: no-repeat;
      animation: skelShimmer 1.4s ease-in-out infinite
    }

    @keyframes skelShimmer {
      0%   { background-position: 180% 0 }
      100% { background-position: -80% 0 }
    }

    /* Kerangka baris (dipakai untuk daftar non-kartu: koleksi, riwayat, dsb.) */
    .skel-row {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 4px
    }

    .skel-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      flex: 0 0 48px
    }

    .skel-row-body { flex: 1; min-width: 0 }
    .skel-row-body .skel-line:last-child { margin-bottom: 0 }

    /* Varian mode gelap: dasar lebih redup dan kilau lebih lembut,
       supaya kerangka tidak menyilaukan di latar gelap. */
    body.dark-mode .skel-card {
      background: #1e1e2d;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35)
    }

    body.dark-mode .skel-cover,
    body.dark-mode .skel-line,
    body.dark-mode .skel-avatar {
      background: #2b2b3d;
      background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.10) 50%, rgba(255,255,255,0) 100%)
    }

    /* Hormati preferensi pengguna yang sensitif terhadap gerakan. */
    @media (prefers-reduced-motion: reduce) {
      .skel-cover,
      .skel-line,
      .skel-avatar {
        animation: none;
        background-image: none
      }
    }

    /* ORIGEN PAGE */
    .origen-page-container {
      max-width: 1200px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      padding: 40px
    }

    .origen-page-title {
      font-size: 2rem;
      font-weight: 700;
      color: #333;
      margin-bottom: 10px
    }

    .origen-page-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
      gap: 15px;
      flex-wrap: wrap
    }

    .origen-search {
      flex: 1;
      min-width: 220px;
      position: relative
    }

    .origen-search-input {
      width: 100%;
      padding: 11px 44px 11px 15px;
      border: 2px solid #e0e0e0;
      border-radius: 25px;
      font-size: 0.9rem;
      transition: all 0.3s;
      font-family: 'Poppins', sans-serif
    }

    .origen-search-input:focus {
      outline: none;
      border-color: #ff9800;
      box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1)
    }

    .origen-search-btn {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(135deg, #ff9800, #ff5722);
      border: none;
      border-radius: 50%;
      width: 34px;
      height: 34px;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .origen-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 20px
    }

    /* ===== ORIGEN ITEM - REVAMPED ===== */
    .origen-item {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
      transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      border: 1px solid rgba(255, 152, 0, 0.1);
      position: relative
    }

    .origen-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #ff9800, #ff5722, #ff9800);
      background-size: 200% 100%;
      animation: shimmer 3s linear infinite;
      opacity: 0.7
    }

    .origen-item:hover {
      transform: translateY(-6px) scale(1.01);
      box-shadow: 0 16px 40px rgba(255, 152, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06)
    }

    .origen-item-header {
      padding: 20px 22px 16px;
      background: linear-gradient(135deg, rgba(255, 152, 0, 0.06), rgba(255, 87, 34, 0.04));
      border-bottom: 1px solid rgba(255, 152, 0, 0.1)
    }

    .origen-item-title {
      font-size: 1.15rem;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 10px;
      line-height: 1.3
    }

    .origen-item-title i {
      color: #ff9800;
      font-size: 1rem;
      flex-shrink: 0
    }

    .origen-item-author {
      font-size: 0.8rem;
      color: #999;
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 400;
      letter-spacing: 0.2px
    }

    .origen-item-author i {
      color: #ffb74d;
      font-size: 0.72rem
    }

    .origen-item-content {
      padding: 18px 22px 10px
    }

    .origen-item-section {
      margin-bottom: 16px;
      position: relative;
      padding-left: 0
    }

    .origen-item-section:last-child {
      margin-bottom: 0
    }

    .origen-item-section-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: #ff9800;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 7px;
      text-transform: uppercase;
      letter-spacing: 0.8px
    }

    .origen-item-section-title i {
      font-size: 0.7rem;
      opacity: 0.8
    }

    .origen-item-section-text {
      font-size: 0.9rem;
      color: #555;
      line-height: 1.7;
      font-family: 'Lora', 'Georgia', serif;
      font-style: italic
    }

    .origen-item-expand {
      padding: 14px 22px;
      color: #ff9800;
      font-weight: 600;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      border-top: 1px solid rgba(255, 152, 0, 0.1);
      transition: all 0.3s;
      justify-content: center;
      background: rgba(255, 152, 0, 0.03)
    }

    .origen-item-expand:hover {
      background: rgba(255, 152, 0, 0.08);
      letter-spacing: 0.3px
    }

    .origen-item-expand i {
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)
    }

    .origen-item-expand.expanded i {
      transform: rotate(180deg)
    }

    .origen-item-details {
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, padding 0.4s ease
    }

    .origen-item-details.open {
      max-height: 800px;
      opacity: 1
    }

    .origen-item-details-inner {
      padding: 18px 22px 22px;
      border-top: 1px solid rgba(255, 152, 0, 0.08);
      background: rgba(255, 152, 0, 0.02)
    }

    /* ===== SYNOPSIS ACTION BAR ===== */
    .synopsis-box {
      background: var(--bg-color, #f8f9fa);
      border-radius: 14px;
      padding: 20px 22px;
      margin: 20px 0;
      border: 1px solid rgba(0, 0, 0, 0.04);
      transition: all 0.3s
    }

    .synopsis-box h4 {
      color: var(--text-color, #333);
      margin-bottom: 10px;
      font-size: 0.95rem;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .synopsis-box h4 i {
      color: #23a6d5;
      font-size: 0.85rem
    }

    .synopsis-box p {
      color: #666;
      line-height: 1.7;
      font-size: 0.9rem
    }

    .synopsis-action-bar {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      flex-wrap: wrap
    }

    .synopsis-action-bar .syn-btn {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 18px;
      border-radius: 25px;
      border: 1.5px solid #e0e0e0;
      background: white;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-size: 0.82rem;
      font-weight: 600;
      color: #666;
      transition: all 0.25s;
      min-height: 40px
    }

    .synopsis-action-bar .syn-btn:hover {
      border-color: #23a6d5;
      color: #23a6d5;
      background: rgba(35, 166, 213, 0.04)
    }

    .synopsis-action-bar .syn-btn.liked {
      background: linear-gradient(135deg, #ff6b6b, #ff4757);
      color: white;
      border-color: transparent
    }

    .synopsis-action-bar .syn-btn.liked:hover {
      box-shadow: 0 4px 15px rgba(255, 71, 87, 0.35);
      transform: translateY(-1px)
    }

    .synopsis-action-bar .syn-btn i {
      font-size: 0.9rem
    }

    .synopsis-action-bar .syn-count {
      font-size: 0.78rem;
      color: #aaa;
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 12px
    }

    .synopsis-action-bar .syn-count span {
      display: flex;
      align-items: center;
      gap: 4px
    }

    body.dark-mode .synopsis-box {
      background: rgba(255, 255, 255, 0.04);
      border-color: rgba(255, 255, 255, 0.06)
    }

    body.dark-mode .synopsis-box p {
      color: #aaa
    }

    body.dark-mode .synopsis-action-bar {
      border-top-color: rgba(255, 255, 255, 0.06)
    }

    body.dark-mode .synopsis-action-bar .syn-btn {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
      color: #bbb
    }

    body.dark-mode .synopsis-action-bar .syn-btn:hover {
      border-color: #23a6d5;
      color: #23a6d5
    }

    body.dark-mode .synopsis-action-bar .syn-count {
      color: #666
    }

    /* Dark mode origen revamp */
    body.dark-mode .origen-item {
      background: rgba(30, 30, 30, 0.85);
      border-color: rgba(255, 152, 0, 0.12)
    }

    body.dark-mode .origen-item-header {
      background: rgba(255, 152, 0, 0.05);
      border-bottom-color: rgba(255, 152, 0, 0.08)
    }

    body.dark-mode .origen-item-title {
      color: #f0f0f0
    }

    body.dark-mode .origen-item-author {
      color: #777
    }

    body.dark-mode .origen-item-section-text {
      color: #aaa
    }

    body.dark-mode .origen-item-expand {
      border-top-color: rgba(255, 152, 0, 0.08);
      background: rgba(255, 152, 0, 0.03)
    }

    body.dark-mode .origen-item-expand:hover {
      background: rgba(255, 152, 0, 0.08)
    }

    body.dark-mode .origen-item-details-inner {
      border-top-color: rgba(255, 152, 0, 0.06);
      background: rgba(255, 152, 0, 0.02)
    }

    /* CREATE WORK */
    .create-work-container {
      max-width: 800px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      padding: 40px
    }

    .create-work-title {
      font-size: 2rem;
      font-weight: 700;
      color: #333;
      margin-bottom: 8px
    }

    .form-group {
      margin-bottom: 22px
    }

    .form-label {
      display: block;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      font-size: 0.9rem
    }

    .form-input,
    .form-textarea,
    .form-select {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      font-size: 0.95rem;
      font-family: 'Poppins', sans-serif;
      transition: all 0.3s;
      background: white
    }

    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
      outline: none;
      border-color: #23a6d5;
      box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1)
    }

    .form-textarea {
      resize: vertical;
      min-height: 120px;
      line-height: 1.6
    }

    .form-help {
      font-size: 0.8rem;
      color: #999;
      margin-top: 5px;
      display: block
    }

    .cover-upload-area {
      border: 2px dashed #e0e0e0;
      border-radius: 12px;
      padding: 25px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
      overflow: hidden
    }

    .cover-upload-area:hover {
      border-color: #23a6d5;
      background: #f0fdff
    }

    .cover-upload-area input[type=file] {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer
    }

    .cover-preview-img {
      width: 100%;
      max-height: 200px;
      object-fit: cover;
      border-radius: 8px;
      margin-top: 15px;
      display: none
    }

    /* CHAPTERS */
    .chapters-container {
      max-width: 900px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      padding: 40px
    }

    .chapters-header {
      display: flex;
      align-items: flex-start;
      margin-bottom: 30px;
      gap: 20px
    }

    .back-btn {
      width: 40px;
      height: 40px;
      min-width: 40px;
      border-radius: 50%;
      background: #f0f0f0;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s
    }

    .back-btn:hover {
      background: #e0e0e0;
      transform: scale(1.1)
    }

    .novel-info {
      flex: 1
    }

    .novel-title {
      font-size: 1.8rem;
      font-weight: 700;
      color: #333;
      margin-bottom: 5px
    }

    .novel-author {
      font-size: 0.9rem;
      color: #888;
      display: flex;
      align-items: center;
      gap: 6px
    }

    .novel-author i {
      color: #23a6d5
    }

    .chapters-list {
      display: grid;
      gap: 12px
    }

    .chapter-card {
      background: white;
      border-radius: 12px;
      padding: 18px 22px;
      box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s;
      cursor: pointer;
      border: 1px solid #f0f0f0
    }

    .chapter-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      border-color: #23a6d5
    }

    .chapter-title {
      font-size: 1.05rem;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px
    }

    .chapter-date {
      font-size: 0.82rem;
      color: #aaa;
      display: flex;
      align-items: center;
      gap: 4px
    }

    .chapter-date i {
      color: #23a6d5;
      font-size: 0.75rem
    }

    .chapter-stats {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .chapter-stat {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.85rem;
      color: #888
    }

    .chapter-stat i {
      color: #23a6d5
    }

    /* ===== READING INTERFACE ===== */
    .reading-progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      background: linear-gradient(90deg, #00e1ff, #23a6d5);
      z-index: 9999;
      width: 0%;
      transition: width 0.15s ease;
      pointer-events: none
    }

    .reading-container {
      max-width: 740px;
      margin: 0 auto;
      background: white;
      min-height: calc(100vh - 60px);
      padding: 0 0 100px;
      box-shadow: 0 0 60px rgba(0, 0, 0, 0.08);
      border-radius: 20px;
      overflow: hidden;
      transition: all 0.3s;
    }

    .reading-cover-section {
      background: linear-gradient(135deg, rgba(0, 225, 255, 0.08), rgba(35, 166, 213, 0.12));
      padding: 35px 40px;
      display: flex;
      gap: 35px;
      align-items: flex-start
    }

    .reading-cover-book {
      flex-shrink: 0;
      perspective: 800px
    }

    .reading-cover-info {
      flex: 1;
      min-width: 0
    }

    .reading-title {
      font-size: 1.8rem;
      font-weight: 800;
      color: #1a1a1a;
      margin-bottom: 8px;
      line-height: 1.2
    }

    .reading-subtitle {
      font-size: 0.92rem;
      color: #888;
      margin-bottom: 12px
    }

    .reading-type-badge {
      display: inline-block;
      padding: 4px 14px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: white;
      border-radius: 20px;
      font-size: 0.78rem;
      font-weight: 700;
      margin-bottom: 12px
    }

    .reading-meta {
      display: flex;
      gap: 15px;
      margin-top: 12px;
      flex-wrap: wrap
    }

    .reading-meta span {
      color: #888;
      font-size: 0.85rem;
      display: flex;
      align-items: center;
      gap: 5px
    }

    .reading-content-area {
      padding: 40px
    }

    .chapter-reading-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 6px;
      text-align: center
    }

    .chapter-story-name {
      font-size: 0.88rem;
      color: #bbb;
      text-align: center;
      margin-bottom: 35px
    }

    .reading-divider {
      text-align: center;
      color: #ddd;
      margin: 28px 0;
      font-size: 1.3rem;
      letter-spacing: 12px
    }

    .reading-text {
      font-family: 'Lora', 'Georgia', 'Times New Roman', serif;
      font-size: 18px;
      line-height: 1.95;
      color: #2a2a2a;
      letter-spacing: 0.01em;
      transition: all 0.3s;
    }

    .reading-text p {
      margin-bottom: 1.4em;
      text-indent: 2em
    }

    .reading-text.poetry {
      text-align: center
    }

    .reading-text.poetry p {
      text-indent: 0;
      margin-bottom: 0.8em
    }

    /* Reading themes */
    #reading.reading-sepia .reading-container,
    #chapterDetail.reading-sepia .reading-container {
      background: #faf6f0
    }

    #reading.reading-sepia .reading-text,
    #chapterDetail.reading-sepia .reading-text {
      color: #3d2b1a
    }

    #reading.reading-sepia .reading-cover-section,
    #chapterDetail.reading-sepia .reading-cover-section {
      background: rgba(200, 150, 80, 0.1)
    }

    #reading.reading-night .reading-container,
    #chapterDetail.reading-night .reading-container {
      background: #1a1a2e
    }

    #reading.reading-night .reading-text,
    #chapterDetail.reading-night .reading-text {
      color: #c8c8d8
    }

    #reading.reading-night .chapter-reading-title,
    #chapterDetail.reading-night .chapter-reading-title,
    #reading.reading-night .reading-title,
    #chapterDetail.reading-night .reading-title {
      color: #e0e0f0
    }

    #reading.reading-night .reading-cover-section,
    #chapterDetail.reading-night .reading-cover-section {
      background: rgba(0, 0, 0, 0.3)
    }

    #reading.reading-night .reading-content-area div,
    #chapterDetail.reading-night .reading-content-area div {
      color: #aaa
    }

    #reading.reading-night .reading-controls-bar,
    #chapterDetail.reading-night .reading-controls-bar {
      background: rgba(26, 26, 46, 0.95);
      border-color: #333
    }

    /* Reading controls bar */
    .reading-controls-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(12px);
      border-top: 1px solid #eee;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 900;
      box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.08)
    }

    .reading-ctrl-btn {
      padding: 7px 18px;
      border: 2px solid #23a6d5;
      background: white;
      color: #23a6d5;
      border-radius: 20px;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.82rem;
      font-family: 'Poppins', sans-serif;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 5px
    }

    .reading-ctrl-btn:hover:not(:disabled) {
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: white;
      border-color: transparent
    }

    .reading-ctrl-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed
    }

    .reading-ctrl-center {
      display: flex;
      gap: 6px;
      align-items: center
    }

    .font-ctrl-btn {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #ddd;
      background: white;
      color: #555;
      cursor: pointer;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.85rem;
      transition: all 0.2s;
      font-family: 'Poppins', sans-serif
    }

    .font-ctrl-btn:hover {
      background: #f0f0f0;
      color: #23a6d5;
      border-color: #23a6d5
    }

    .theme-ctrl-btn {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 2px solid #ddd;
      cursor: pointer;
      transition: all 0.2s
    }

    .theme-ctrl-btn.tl {
      background: #fff
    }

    .theme-ctrl-btn.ts {
      background: #faf6f0
    }

    .theme-ctrl-btn.tn {
      background: #1a1a2e
    }

    .theme-ctrl-btn.active {
      border-color: #23a6d5;
      box-shadow: 0 0 0 2px rgba(35, 166, 213, 0.3)
    }

    .font-size-display {
      font-size: 0.78rem;
      color: #888;
      min-width: 30px;
      text-align: center
    }

    /* ===== ZEN MODE & CUSTOMIZATION ===== */
    body.zen-mode header {
      display: none !important;
    }

    body.zen-mode .reading-controls-bar {
      display: none !important;
    }

    body.zen-mode .site-footer {
      display: none !important;
    }

    body.zen-mode .page-section {
      padding-top: 20px !important;
    }

    body.zen-mode .reading-container {
      border-radius: 0 !important;
      box-shadow: none !important;
      margin: 0 auto !important;
      max-width: 800px;
    }

    body.zen-mode .reading-cover-section,
    body.zen-mode .stats-row,
    body.zen-mode .comments-section,
    body.zen-mode .asal-usul-section {
      display: none !important;
    }

    .exit-zen-btn {
      display: none;
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 9999;
      background: rgba(35, 166, 213, 0.9);
      color: white;
      border: none;
      border-radius: 50%;
      width: 55px;
      height: 55px;
      font-size: 1.4rem;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 10px 25px rgba(35, 166, 213, 0.4);
      backdrop-filter: blur(5px);
    }

    .exit-zen-btn:hover {
      transform: scale(1.1) rotate(-10deg);
      background: #00e1ff;
    }

    body.zen-mode .exit-zen-btn {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Tombol kontrol audio di Zen Mode */
    .zen-audio-btn {
      display: none;
      position: fixed;
      bottom: 95px; 
      right: 30px;
      z-index: 9999;
      background: rgba(35, 166, 213, 0.9);
      color: white;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 1.2rem;
      cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 10px 25px rgba(35, 166, 213, 0.4);
      backdrop-filter: blur(5px);
    }

    .zen-audio-btn:hover {
      transform: scale(1.1);
      background: #00e1ff;
    }

    /* Hanya tampil saat Zen Mode aktif */
    body.zen-mode .zen-audio-btn {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Panel pemilih suara latar di Zen Mode */
    /* 1. HAPUS / KOMENTARI baris ini agar menu tidak otomatis terbuka di Zen Mode */
    /* body.zen-mode .zen-sound-selector { display: block; } */

    /* 2. TIMPA style .zen-sound-selector dengan ini: */
    .zen-sound-selector {
      /* Hapus display: none; */
      position: fixed;
      bottom: 160px;
      right: 30px;
      z-index: 9999;
      background: rgba(30, 30, 30, 0.92);
      border-radius: 16px;
      padding: 18px 16px;
      min-width: 200px; /* Diperlebar sedikit agar tombol play/pause proporsional */
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(35, 166, 213, 0.25);
      
      /* Logika Animasi Popup Sembunyi */
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px) scale(0.95);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      transform-origin: bottom right;
    }

    /* 3. TAMBAHKAN class active untuk memunculkan popup */
    body.zen-mode .zen-sound-selector.active {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
    }

    .zen-sound-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
      letter-spacing: 0.8px;
      margin-bottom: 10px;
      text-align: center;
    }

    .zen-sound-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 10px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.25s;
    }

    .zen-sound-option:hover {
      background: rgba(35, 166, 213, 0.15);
      color: #00e1ff;
    }

    .zen-sound-option.active {
      background: rgba(35, 166, 213, 0.25);
      color: #00e1ff;
      font-weight: 700;
    }

    .zen-sound-option i {
      width: 18px;
      text-align: center;
      font-size: 0.95rem;
    }

    .zen-sound-option.active i {
      color: #00e1ff;
    }

    /* Asal-usul section */
    .asal-usul-section {
      margin-top: 45px;
      border-top: 2px solid #f0f0f0;
      padding-top: 25px
    }

    .asal-usul-toggle {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      padding: 14px 20px;
      background: linear-gradient(135deg, rgba(255, 152, 0, 0.08), rgba(255, 87, 34, 0.08));
      border-radius: 12px;
      color: #ff9800;
      font-weight: 700;
      font-size: 1rem;
      transition: all 0.3s;
      user-select: none;
      border: 1px solid rgba(255, 152, 0, 0.15)
    }

    .asal-usul-toggle:hover {
      background: linear-gradient(135deg, rgba(255, 152, 0, 0.15), rgba(255, 87, 34, 0.15))
    }

    .asal-usul-toggle .toggle-arrow {
      margin-left: auto;
      transition: transform 0.3s
    }

    .asal-usul-toggle.open .toggle-arrow {
      transform: rotate(180deg)
    }

    .asal-usul-content {
      display: none;
      padding: 22px;
      background: #fffbf5;
      border-radius: 0 0 12px 12px;
      border: 1px solid rgba(255, 152, 0, 0.15);
      border-top: none;
      animation: fadeIn 0.3s ease
    }

    .asal-usul-content.open {
      display: block
    }

    .asal-usul-item {
      margin-bottom: 22px;
      padding-bottom: 22px;
      border-bottom: 1px solid #ffe0b2
    }

    .asal-usul-item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none
    }

    .asal-usul-item-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: #ff9800;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .asal-usul-item-text {
      font-size: 0.92rem;
      color: #5a4a3a;
      line-height: 1.7;
      padding-left: 24px
    }

    .asal-usul-meta {
      margin-top: 15px;
      padding-top: 12px;
      border-top: 1px solid #ffe0b2;
      font-size: 0.8rem;
      color: #bbb;
      display: flex;
      align-items: center;
      gap: 6px
    }

    /* Stats row */
    .stats-row {
      display: flex;
      gap: 15px;
      align-items: center;
      margin: 25px 0;
      padding: 18px 22px;
      background: #f8f9fa;
      border-radius: 14px;
      flex-wrap: wrap
    }

    /* Comments */
    .comments-section {
      margin-top: 30px
    }

    .comments-section h3 {
      margin-bottom: 20px;
      color: #333;
      font-size: 1.2rem
    }

    .comment-form {
      display: flex;
      gap: 12px;
      margin-bottom: 22px;
      align-items: flex-start
    }

    .comment-form img,
    .comment-form video {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 2px solid #23a6d5;
      flex-shrink: 0;
      object-fit: cover
    }

    .comment-textarea {
      width: 100%;
      padding: 10px 14px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.88rem;
      resize: none;
      transition: all 0.3s
    }

    .comment-textarea:focus {
      outline: none;
      border-color: #23a6d5
    }

    .comment-item {
      display: flex;
      gap: 12px;
      margin-bottom: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid #f0f0f0
    }

    .comment-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0
    }

    .comment-avatar {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      flex-shrink: 0;
      object-fit: cover
    }

    .comment-body {
      flex: 1
    }

    .comment-author {
      font-weight: 600;
      color: #333;
      font-size: 0.9rem
    }

    .comment-date {
      font-size: 0.78rem;
      color: #bbb;
      margin-top: 2px;
      margin-bottom: 6px
    }

    .comment-text {
      color: #555;
      font-size: 0.88rem;
      line-height: 1.6
    }

    /* Nested Comments (Replies) */
    .comment-replies {
      margin-left: 48px;
      margin-top: 10px;
      padding-left: 15px;
      border-left: 2px solid #e0e0e0;
      display: none;
    }

    .comment-replies.show {
      display: block;
    }

    .comment-reply-item {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
      padding-top: 10px;
      position: relative;
    }

    .comment-reply-item::before {
      content: '';
      position: absolute;
      top: 25px;
      left: -15px;
      width: 15px;
      border-top: 2px solid #e0e0e0;
    }

    .replies-toggle-btn {
      color: #23a6d5;
      background: none;
      border: none;
      font-weight: 600;
      font-size: 0.85rem;
      cursor: pointer;
      padding: 6px 12px;
      margin-left: 48px;
      margin-top: 5px;
      border-radius: 15px;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .replies-toggle-btn:hover {
      background: rgba(35, 166, 213, 0.1);
    }

    .replies-toggle-btn i {
      transition: transform 0.3s;
    }

    .replies-toggle-btn.open i {
      transform: rotate(180deg);
    }

    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #bbb;
      grid-column: 1/-1
    }

    .empty-state i {
      font-size: 3rem;
      margin-bottom: 15px;
      display: block;
      opacity: 0.3
    }

    /* PROFILE */
    .profile-container {
      max-width: 1000px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      overflow: hidden
    }

    .profile-header {
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      padding: 40px;
      display: flex;
      gap: 30px;
      align-items: flex-end;
      position: relative;
      overflow: hidden;
    }

    .profile-avatar-section {
      position: relative;
      z-index: 2;
    }

    .profile-avatar-large {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 4px solid white;
      object-fit: cover;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2)
    }

    .profile-header-info {
      flex: 1;
      color: white;
      position: relative;
      z-index: 2;
    }

    /* NEW: Beautiful animated profile header stats cards */
    .profile-header-stats {
      display: flex;
      gap: 12px;
      margin-left: auto;
      align-items: flex-end;
      flex-wrap: wrap;
      position: relative;
      z-index: 2;
    }

    .profile-stat-item {
      background: rgba(255,255,255,0.18);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 16px;
      padding: 12px 18px;
      min-width: 78px;
      text-align: center;
      color: white;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
      position: relative;
      overflow: hidden;
    }

    .profile-stat-item:hover {
      transform: translateY(-4px) scale(1.02);
      background: rgba(255,255,255,0.28);
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }

    .profile-stat-item .stat-icon {
      font-size: 1.35rem;
      margin-bottom: 4px;
      display: block;
      transition: transform 0.2s ease;
    }

    .profile-stat-item:hover .stat-icon {
      transform: scale(1.15);
    }

    .profile-stat-item .stat-number {
      font-size: 1.45rem;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 2px;
    }

    .profile-stat-item .stat-label {
      font-size: 0.68rem;
      font-weight: 600;
      opacity: 0.9;
      letter-spacing: 0.5px;
    }

    /* Mobile responsive for header stats */
    @media (max-width: 768px) {
      .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 20px;
      }
      .profile-header-stats {
        margin-left: 0;
        margin-top: 18px;
        justify-content: center;
        width: 100%;
      }
      .profile-stat-item {
        flex: 1;
        min-width: 70px;
        padding: 10px 12px;
      }
    }

    @media (max-width: 480px) {
      .profile-header-stats {
        flex-direction: row;
        gap: 8px;
      }
      .profile-stat-item {
        padding: 8px 10px;
        min-width: 62px;
      }
      .profile-stat-item .stat-number {
        font-size: 1.25rem;
      }
    }

    .profile-name {
      font-size: 1.8rem;
      font-weight: 700;
      margin-bottom: 5px
    }

    .profile-email {
      font-size: 0.9rem;
      opacity: 0.85;
      margin-bottom: 15px
    }

    .profile-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .profile-action-btn {
      padding: 8px 20px;
      border-radius: 20px;
      border: 2px solid rgba(255, 255, 255, 0.7);
      background: rgba(255, 255, 255, 0.15);
      color: white;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.85rem;
      font-family: 'Poppins', sans-serif;
      transition: all 0.3s;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      backdrop-filter: blur(4px)
    }

    .profile-action-btn:hover {
      background: rgba(255, 255, 255, 0.3)
    }

    .profile-body {
      padding: 35px
    }

    .profile-stats {
      display: flex;
      gap: 30px;
      padding: 20px 0;
      border-bottom: 1px solid #eee;
      margin-bottom: 25px;
      flex-wrap: wrap
    }

    .profile-stat {
      text-align: center
    }

    .profile-stat-value {
      font-size: 1.8rem;
      font-weight: 700;
      color: #23a6d5
    }

    .profile-stat-label {
      font-size: 0.82rem;
      color: #888;
      margin-top: 3px
    }

    .profile-bio {
      color: #666;
      line-height: 1.6;
      margin-bottom: 20px;
      font-size: 0.92rem
    }

    .edit-form-input {
      width: 100%;
      padding: 10px 14px;
      border: 2px solid #e0e0e0;
      border-radius: 10px;
      font-size: 0.9rem;
      font-family: 'Poppins', sans-serif;
      transition: all 0.3s;
      margin-bottom: 14px
    }

    .edit-form-input:focus {
      outline: none;
      border-color: #23a6d5
    }

    .edit-form-input:read-only {
      background: #f8f9fa;
      cursor: default
    }

    .profile-tabs {
      display: flex;
      gap: 0;
      border-bottom: 2px solid #eee;
      margin-bottom: 25px;
      flex-wrap: wrap
    }

    .profile-tab {
      padding: 12px 25px;
      cursor: pointer;
      color: #888;
      font-weight: 500;
      font-size: 0.9rem;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      transition: all 0.3s
    }

    .profile-tab.active {
      color: #23a6d5;
      border-bottom-color: #23a6d5
    }

    .tab-content {
      display: none
    }

    .tab-content.active {
      display: block
    }

    /* ===== GAME REDEEM PANEL ===== */
    @keyframes rp-shimmer {
      0%   { background-position: -200% center; }
      100% { background-position:  200% center; }
    }
    @keyframes rp-scanline {
      0%   { transform: translateY(-100%); }
      100% { transform: translateY(400%); }
    }
    @keyframes rp-pulse-border {
      0%,100% { border-color: rgba(212,175,55,0.35); box-shadow: 0 0 0 0 rgba(212,175,55,0); }
      50%     { border-color: rgba(212,175,55,0.75); box-shadow: 0 0 18px 2px rgba(212,175,55,0.18); }
    }
    @keyframes rp-icon-float {
      0%,100% { transform: translateY(0) rotate(-3deg); }
      50%     { transform: translateY(-6px) rotate(3deg); }
    }
    @keyframes rp-success-pop {
      0%   { transform: scale(0.7); opacity: 0; }
      70%  { transform: scale(1.08); }
      100% { transform: scale(1);   opacity: 1; }
    }
    @keyframes rp-particle {
      0%   { transform: translateY(0) scale(1); opacity: 1; }
      100% { transform: translateY(-60px) scale(0); opacity: 0; }
    }

    /* Wrapper section */
    .rp-section {
      margin: 28px 0 0;
      padding: 0 2px;
    }

    /* Trigger baris — di luar tab, seperti 'unlock' widget */
    .rp-trigger {
      display: flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(90deg, rgba(10,8,20,0.9), rgba(30,20,5,0.85));
      border: 1px solid rgba(212,175,55,0.3);
      border-radius: 12px;
      padding: 13px 18px;
      cursor: pointer;
      transition: all 0.25s;
      user-select: none;
      position: relative;
      overflow: hidden;
    }
    .rp-trigger::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 40%, rgba(212,175,55,0.08) 50%, transparent 60%);
      background-size: 200% 100%;
      animation: rp-shimmer 3s linear infinite;
    }
    .rp-trigger:hover {
      border-color: rgba(212,175,55,0.65);
      background: linear-gradient(90deg, rgba(15,12,30,0.95), rgba(40,28,5,0.9));
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 12px rgba(212,175,55,0.12);
    }
    .rp-trigger-icon {
      width: 38px; height: 38px;
      background: linear-gradient(135deg, #b8860b, #d4af37, #b8860b);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
    }
    .rp-trigger-text { flex: 1; }
    .rp-trigger-title {
      font-size: 0.88rem; font-weight: 700;
      color: #d4af37;
      line-height: 1.2;
      letter-spacing: 0.5px;
    }
    .rp-trigger-sub {
      font-size: 0.72rem;
      color: rgba(255,255,255,0.45);
      margin-top: 2px;
    }
    .rp-trigger-arrow {
      color: rgba(212,175,55,0.5);
      font-size: 0.85rem;
      transition: transform 0.3s, color 0.25s;
    }
    .rp-trigger:hover .rp-trigger-arrow,
    .rp-trigger.open .rp-trigger-arrow {
      color: #d4af37;
    }
    .rp-trigger.open .rp-trigger-arrow { transform: rotate(90deg); }

    /* Panel utama */
    .rp-panel {
      display: none;
      margin-top: 8px;
      background:
        radial-gradient(ellipse at top left, rgba(30,20,5,0.8) 0%, transparent 60%),
        radial-gradient(ellipse at bottom right, rgba(10,5,30,0.8) 0%, transparent 60%),
        #0d0b16;
      border: 1px solid rgba(212,175,55,0.3);
      border-radius: 14px;
      overflow: hidden;
      animation: rp-pulse-border 3s ease-in-out infinite;
    }
    .rp-panel.open { display: block; }

    /* Scanline overlay */
    .rp-panel-inner {
      position: relative;
      padding: 0;
      overflow: hidden;
    }
    .rp-scanline {
      position: absolute;
      left: 0; right: 0;
      height: 60px;
      background: linear-gradient(180deg, transparent, rgba(212,175,55,0.04), transparent);
      animation: rp-scanline 4s linear infinite;
      pointer-events: none;
      z-index: 0;
    }

    /* Header panel */
    .rp-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 22px 14px;
      border-bottom: 1px solid rgba(212,175,55,0.12);
      position: relative; z-index: 1;
    }
    .rp-header-emblem {
      font-size: 2.2rem;
      animation: rp-icon-float 3s ease-in-out infinite;
      filter: drop-shadow(0 0 8px rgba(212,175,55,0.5));
    }
    .rp-header-info { flex: 1; }
    .rp-header-title {
      font-size: 1rem;
      font-weight: 800;
      color: #d4af37;
      letter-spacing: 1px;
      text-transform: uppercase;
      text-shadow: 0 0 12px rgba(212,175,55,0.4);
    }
    .rp-header-desc {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.45);
      margin-top: 3px;
      line-height: 1.4;
    }
    .rp-header-badge {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #d4af37;
      border: 1px solid rgba(212,175,55,0.4);
      padding: 3px 8px;
      border-radius: 4px;
      background: rgba(212,175,55,0.07);
    }

    /* Body */
    .rp-body { padding: 18px 22px 20px; position: relative; z-index: 1; }

    /* Input area bergaya terminal/game */
    .rp-input-label {
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: rgba(212,175,55,0.6);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .rp-input-label::before {
      content: '';
      display: inline-block;
      width: 14px; height: 1px;
      background: rgba(212,175,55,0.4);
    }
    .rp-input-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: rgba(212,175,55,0.12);
    }
    .rp-input-wrap {
      position: relative;
      margin-bottom: 14px;
    }
    .rp-input-wrap::before {
      content: '>';
      position: absolute;
      left: 14px; top: 50%;
      transform: translateY(-50%);
      color: rgba(212,175,55,0.5);
      font-family: monospace;
      font-size: 1rem;
      pointer-events: none;
      z-index: 2;
    }
    .rp-input {
      width: 100%;
      padding: 14px 16px 14px 32px;
      background: rgba(0,0,0,0.5);
      border: 1px solid rgba(212,175,55,0.3);
      border-radius: 8px;
      color: #d4af37;
      font-family: 'Courier New', Courier, monospace;
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      outline: none;
      transition: all 0.2s;
      caret-color: #d4af37;
      box-sizing: border-box;
    }
    .rp-input::placeholder {
      color: rgba(212,175,55,0.2);
      letter-spacing: 1px;
      font-weight: 400;
      font-size: 0.82rem;
      font-family: 'Poppins', sans-serif;
    }
    .rp-input:focus {
      border-color: #d4af37;
      background: rgba(0,0,0,0.65);
      box-shadow: 0 0 0 2px rgba(212,175,55,0.15), inset 0 0 12px rgba(212,175,55,0.04);
    }

    /* Submit */
    .rp-submit {
      width: 100%;
      padding: 14px;
      background: linear-gradient(135deg, #b8860b 0%, #d4af37 40%, #f0c040 60%, #d4af37 80%, #b8860b 100%);
      background-size: 200% auto;
      color: #1a0f00;
      border: none;
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.92rem;
      font-weight: 800;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      cursor: pointer;
      transition: background-position 0.4s, box-shadow 0.25s, transform 0.15s;
      position: relative;
      overflow: hidden;
    }
    .rp-submit::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 50%);
      pointer-events: none;
    }
    .rp-submit:hover {
      background-position: right center;
      box-shadow: 0 0 20px rgba(212,175,55,0.45), 0 4px 12px rgba(0,0,0,0.5);
      transform: translateY(-1px);
    }
    .rp-submit:active { transform: translateY(0); }
    .rp-submit:disabled {
      opacity: 0.5; cursor: not-allowed;
      transform: none; box-shadow: none;
    }
    .rp-submit-inner { display: flex; align-items: center; justify-content: center; gap: 8px; }

    /* Result message */
    .rp-result {
      margin-top: 14px;
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 0.85rem;
      font-weight: 600;
      display: none;
      line-height: 1.5;
    }
    .rp-result.success {
      background: rgba(16,185,129,0.1);
      border: 1px solid rgba(16,185,129,0.35);
      color: #6ee7b7;
      animation: rp-success-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    .rp-result.error {
      background: rgba(239,68,68,0.1);
      border: 1px solid rgba(239,68,68,0.35);
      color: #fca5a5;
    }

    /* Footer info strip */
    .rp-footer {
      padding: 10px 22px 12px;
      border-top: 1px solid rgba(212,175,55,0.08);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.7rem;
      color: rgba(255,255,255,0.28);
      position: relative; z-index: 1;
    }
    .rp-footer i { color: rgba(212,175,55,0.35); }

    .user-works-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px
    }

    .user-work-card {
      background: #f8f9fa;
      border-radius: 12px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;
      border: 1px solid #eee
    }

    .user-work-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1)
    }

    .user-work-cover {
      height: 120px;
      overflow: hidden;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      display: flex;
      align-items: center;
      justify-content: center
    }

    .user-work-cover img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .user-work-content {
      padding: 12px
    }

    .user-work-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: #333;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .user-work-type {
      font-size: 0.75rem;
      color: #23a6d5;
      margin-bottom: 8px;
      text-transform: capitalize
    }

    .user-work-stats {
      font-size: 0.75rem;
      color: #888;
      display: flex;
      gap: 10px
    }

    .delete-work-btn {
      margin-top: 8px;
      padding: 4px 10px;
      background: #fff0f0;
      color: #ff4757;
      border: 1px solid #ffcdd2;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.75rem;
      width: 100%;
      font-family: 'Poppins', sans-serif;
      transition: all 0.2s
    }

    .delete-work-btn:hover {
      background: #ff4757;
      color: white
    }

    /* ===== LEVEL & PROGRESS BAR ===== */
    .level-badge {
      display: inline-block;
      padding: 4px 12px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: white;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .level-progress-container {
      width: 100%;
      background: #e0e0e0;
      border-radius: 10px;
      height: 12px;
      margin-top: 10px;
      overflow: hidden;
    }

    .level-progress-bar {
      height: 100%;
      background: linear-gradient(90deg, #00e1ff, #23a6d5);
      border-radius: 10px;
      transition: width 0.5s ease;
    }

    .level-text {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: #888;
      margin-top: 4px;
    }

    /* MODALS */
    .modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px)
    }

    .modal.active {
      display: flex;
      animation: fadeIn 0.3s ease
    }

    /* [FIX] Panel Redeem (#redeemModal / .modal-overlay).
       Sebelumnya class ini TIDAK punya definisi CSS -> panel "Exchange Code"
       tampil menempel di dalam halaman profil (ikut muncul di tab Karya Saya).
       Kini berperilaku sama seperti modal lain: tersembunyi secara default,
       dan muncul sebagai overlay saat class .active ditambahkan oleh
       openRedeemModal() — logika yang sudah ada tidak berubah. */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(4px);
      padding: 20px
    }

    .modal-overlay.active {
      display: flex;
      animation: fadeIn 0.3s ease
    }

    .modal-content {
      background: white;
      border-radius: 20px;
      padding: 40px;
      width: 90%;
      max-width: 460px;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
      animation: slideUp 0.3s ease
    }

    .modal-title {
      font-size: 1.6rem;
      font-weight: 700;
      color: #333;
      margin-bottom: 8px
    }

    .modal-subtitle {
      color: #888;
      font-size: 0.9rem;
      margin-bottom: 28px
    }

    .modal-close {
      position: absolute;
      top: 18px;
      right: 18px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #f0f0f0;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      color: #666
    }

    .modal-close:hover {
      background: #e0e0e0
    }

    .modal-input {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      font-size: 0.95rem;
      font-family: 'Poppins', sans-serif;
      transition: all 0.3s;
      margin-bottom: 14px
    }

    .modal-input:focus {
      outline: none;
      border-color: #23a6d5;
      box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.1)
    }

    .modal-btn {
      width: 100%;
      padding: 13px;
      border-radius: 12px;
      border: none;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: white;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      transition: all 0.3s;
      margin-top: 5px
    }

    .modal-btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(35, 166, 213, 0.4)
    }

    .modal-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed
    }

    .modal-link {
      text-align: center;
      margin-top: 18px;
      font-size: 0.9rem;
      color: #888
    }

    .modal-link a {
      color: #23a6d5;
      cursor: pointer;
      font-weight: 500
    }

    .modal-error {
      color: #ff4757;
      font-size: 0.85rem;
      margin-top: -8px;
      margin-bottom: 10px;
      min-height: 18px
    }

    .origen-btn {
      background: linear-gradient(135deg, #ff9800, #ff5722) !important
    }

    /* TOAST */
    .toast-container {
      position: fixed;
      bottom: 90px;
      right: 20px;
      z-index: 3000;
      display: flex;
      flex-direction: column;
      gap: 8px;
      /* [FIX MOBILE MENU] Wadah toast membentang di atas konten dengan z-index
         tinggi, sehingga area kosongnya ikut "menangkap" sentuhan dan membuat
         item menu di bawahnya (mis. tombol Keluar) tidak bisa ditekan di HP.
         Wadahnya dibuat tembus sentuhan; hanya kartu toast yang tetap interaktif. */
      pointer-events: none;
    }

    .toast-container > * {
      pointer-events: auto;
    }

    .toast {
      display: flex;
      align-items: center;
      gap: 10px;
      background: white;
      border-radius: 12px;
      padding: 13px 18px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      font-size: 0.88rem;
      font-weight: 500;
      color: #333;
      transform: translateX(120%);
      transition: transform 0.3s ease;
      max-width: 320px;
      border-left: 4px solid #23a6d5
    }

    .toast.show {
      transform: translateX(0)
    }

    /* [FIX TOAST] Tombol tutup manual — sebelumnya toast hanya bisa ditunggu
       hilang sendiri (3,2 detik) dan tidak bisa disingkirkan pengguna. */
    .toast-close {
      background: none;
      border: 0;
      padding: 4px;
      margin: -4px -6px -4px 2px;
      color: #bbb;
      cursor: pointer;
      font-size: 0.8rem;
      line-height: 1;
      border-radius: 6px;
      flex: none;
      transition: color .2s, background .2s;
      /* Area sentuh nyaman di HP tanpa memperbesar tampilan visual */
      min-width: 32px;
      min-height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .toast-close:hover,
    .toast-close:focus-visible {
      color: #ff4757;
      background: rgba(255, 71, 87, 0.08);
      outline: none;
    }

    /* Penanda berapa kali pesan yang sama berulang (menggantikan tumpukan toast) */
    .toast-count {
      font-size: 0.72rem;
      font-weight: 700;
      color: #888;
      background: rgba(0, 0, 0, 0.06);
      border-radius: 20px;
      padding: 2px 7px;
      flex: none;
    }

    .toast span {
      flex: 1;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    @keyframes toastRepeatPulse {
      0% { transform: translateX(0) scale(1) }
      45% { transform: translateX(0) scale(1.035) }
      100% { transform: translateX(0) scale(1) }
    }

    .toast.show.toast-repeat {
      animation: toastRepeatPulse .32s ease;
    }

    @media (prefers-reduced-motion: reduce) {
      .toast.show.toast-repeat { animation: none }
    }

    body.dark-mode .toast-count {
      background: rgba(255, 255, 255, 0.1);
      color: #aaa;
    }

    .toast-success {
      border-left-color: #23a6d5
    }

    .toast-success i {
      color: #23a6d5
    }

    .toast-error {
      border-left-color: #ff4757
    }

    .toast-error i {
      color: #ff4757
    }

    .toast-info {
      border-left-color: #ff9800
    }

    .toast-info i {
      color: #ff9800
    }

    /* ===== HERO ANIMATION ===== */
    @keyframes floatB1 {

      0%,
      100% {
        transform: translateY(0) rotateY(-20deg) rotate(-4deg)
      }

      50% {
        transform: translateY(-18px) rotateY(-30deg) rotate(4deg)
      }
    }

    @keyframes floatB2 {

      0%,
      100% {
        transform: translateY(0) rotateY(-15deg) rotate(5deg)
      }

      50% {
        transform: translateY(-14px) rotateY(-25deg) rotate(-5deg)
      }
    }

    @keyframes floatB3 {

      0%,
      100% {
        transform: translateY(0) rotateY(-20deg) rotate(-2deg)
      }

      50% {
        transform: translateY(-22px) rotateY(-32deg) rotate(2deg)
      }
    }

    @keyframes floatB4 {

      0%,
      100% {
        transform: translateY(0) rotateY(-18deg) rotate(3deg)
      }

      50% {
        transform: translateY(-12px) rotateY(-28deg) rotate(-3deg)
      }
    }

    @keyframes floatB5 {

      0%,
      100% {
        transform: translateY(0) rotateY(-15deg) rotate(-5deg)
      }

      50% {
        transform: translateY(-16px) rotateY(-25deg) rotate(5deg)
      }
    }

    @keyframes sparkle {

      0%,
      100% {
        opacity: 0.3;
        transform: scale(0.8)
      }

      50% {
        opacity: 1;
        transform: scale(1.2)
      }
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: 0
      }
    }

    @keyframes heroBadge {
      0% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.06)
      }
    }

    .hero-anim {
      background: linear-gradient(135deg, #0f2862 0%, #1a4a8a 45%, #23a6d5 100%);
      cursor: pointer;
      overflow: hidden;
      position: relative;
      perspective: 600px
    }

    .hero-anim:hover {
      filter: brightness(1.08)
    }

    .hero-book {
      position: absolute;
      transform-style: preserve-3d;
    }

    .hb-cover {
      width: 100%;
      height: 100%;
      border-radius: 2px 7px 7px 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.3), inset -2px 0 4px rgba(0, 0, 0, 0.15)
    }

    .hb-spine {
      position: absolute;
      left: -12px;
      width: 12px;
      height: 100%;
      transform: rotateY(-90deg);
      transform-origin: right center;
      border-radius: 3px 0 0 3px
    }

    .hb1 {
      width: 68px;
      height: 95px;
      left: 8%;
      top: 18%;
      animation: floatB1 4s ease-in-out infinite
    }

    .hb2 {
      width: 52px;
      height: 72px;
      right: 12%;
      top: 22%;
      animation: floatB2 3.5s ease-in-out infinite 0.6s
    }

    .hb3 {
      width: 80px;
      height: 110px;
      left: 30%;
      bottom: 12%;
      animation: floatB3 5s ease-in-out infinite 1.2s
    }

    .hb4 {
      width: 44px;
      height: 60px;
      right: 28%;
      bottom: 18%;
      animation: floatB4 4.2s ease-in-out infinite 0.3s
    }

    .hb5 {
      width: 58px;
      height: 80px;
      left: 62%;
      top: 12%;
      animation: floatB5 4.8s ease-in-out infinite 0.9s
    }

    .hero-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 10;
      pointer-events: none
    }

    .hero-badge {
      display: inline-block;
      padding: 5px 14px;
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      color: white;
      margin-bottom: 10px;
      animation: heroBadge 2s ease-in-out infinite
    }

    .hero-type-container {
      font-size: 1.15rem;
      font-weight: 800;
      color: white;
      margin-bottom: 6px;
      min-height: 1.6em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px
    }

    .hero-typing-text {
      color: white
    }

    .hero-cursor {
      color: white;
      animation: blink 0.8s infinite
    }

    .hero-sub {
      font-size: 0.72rem;
      color: rgba(255, 255, 255, 0.7);
      font-weight: 500
    }

    .hero-sparkle {
      position: absolute;
      font-size: 1rem;
      color: #23a6d5;
      animation: sparkle 2.5s ease-in-out infinite;
      pointer-events: none
    }

    .sp1 {
      top: 15%;
      left: 22%;
      animation-delay: 0s
    }

    .sp2 {
      top: 20%;
      right: 22%;
      animation-delay: 0.8s;
      color: #ff9800
    }

    .sp3 {
      bottom: 22%;
      left: 15%;
      animation-delay: 1.4s;
      color: #43e97b
    }

    .sp4 {
      bottom: 15%;
      right: 15%;
      animation-delay: 0.5s;
      color: #f5576c
    }

    /* ===== ADMIN PANEL ===== */
    .admin-container {
      max-width: 1200px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.97);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      overflow: hidden
    }

    .admin-header {
      background: linear-gradient(135deg, #1a1a2e, #16213e);
      padding: 28px 35px;
      color: white;
      display: flex;
      align-items: center;
      gap: 15px
    }

    .admin-badge {
      background: linear-gradient(135deg, #ff5722, #ff9800);
      padding: 5px 14px;
      border-radius: 20px;
      font-size: 0.78rem;
      font-weight: 700
    }

    .admin-title {
      font-size: 1.6rem;
      font-weight: 800
    }

    .admin-tabs {
      display: flex;
      gap: 6px;
      padding: 0 18px;
      background: #f8f9fa;
      border-bottom: 2px solid #eee;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden; /* Sembunyikan scroll vertikal yang bocor */
      white-space: nowrap;
      scrollbar-width: thin;
    }
    
    .admin-tabs::-webkit-scrollbar {
      height: 6px;
    }
    .admin-tabs::-webkit-scrollbar-track {
      background: transparent;
    }
    .admin-tabs::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 10px;
    }

    .admin-tab {
      padding: 14px 24px;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.88rem;
      color: #888;
      transition: all 0.25s;
      border-bottom: 3px solid transparent;
      margin-bottom: -2px;
      white-space: nowrap;
    }

    .admin-tab:hover {
      color: #333;
      background: #fff
    }

    .admin-tab.active {
      color: #ff5722;
      border-bottom-color: #ff5722;
      background: white
    }

    .admin-body {
      padding: 28px
    }

    .admin-stat-row {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      margin-bottom: 25px
    }

    .admin-stat-box {
      flex: 1;
      min-width: 120px;
      background: #f8f9fa;
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      border: 1px solid #eee
    }

    .admin-stat-num {
      font-size: 1.8rem;
      font-weight: 800;
      color: #1a1a2e
    }

    .admin-stat-label {
      font-size: 0.78rem;
      color: #888;
      margin-top: 3px
    }

    .admin-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      width: 100%;
    }

    .admin-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.88rem;
      min-width: 700px;
    }

    .admin-table th {
      background: #f8f9fa;
      padding: 10px 14px;
      text-align: left;
      font-weight: 600;
      color: #555;
      border-bottom: 2px solid #eee
    }

    .admin-table td {
      padding: 10px 14px;
      border-bottom: 1px solid #f5f5f5;
      vertical-align: middle
    }

    .admin-table tr:hover td {
      background: #fafafa
    }

    .admin-del-btn {
      padding: 4px 12px;
      background: #fff0ee;
      color: #ff4757;
      border: 1px solid #ffd5d0;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.78rem;
      font-weight: 600;
      font-family: 'Poppins', sans-serif;
      transition: all 0.2s;
      white-space: nowrap;
      margin-top: 2px;
      display: inline-block;
    }

    .admin-del-btn:hover {
      background: #ff4757;
      color: white
    }

    .admin-search-box {
      width: 100%;
      padding: 10px 16px;
      border: 2px solid #eee;
      border-radius: 10px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.88rem;
      margin-bottom: 16px;
      transition: all 0.25s
    }

    .admin-search-box:focus {
      outline: none;
      border-color: #ff5722
    }

    .admin-empty {
      text-align: center;
      padding: 50px;
      color: #bbb;
      font-size: 0.9rem
    }

    .admin-comment-box {
      background: #f8f9fa;
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px
    }

    .admin-comment-meta {
      font-size: 0.75rem;
      color: #aaa;
      margin-bottom: 5px
    }

    .admin-comment-text {
      font-size: 0.88rem;
      color: #333;
      line-height: 1.5
    }

    .admin-comment-source {
      font-size: 0.72rem;
      color: #23a6d5;
      background: #e8f4fd;
      padding: 2px 8px;
      border-radius: 10px;
      display: inline-block;
      margin-top: 4px
    }

    .admin-nav-btn {
      padding: 5px 14px;
      background: linear-gradient(135deg, #ff5722, #ff9800);
      color: white;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.8rem;
      font-family: 'Poppins', sans-serif
    }

    .role-badge-admin {
      padding: 2px 10px;
      background: linear-gradient(135deg, #ff5722, #ff9800);
      color: white;
      border-radius: 10px;
      font-size: 0.72rem;
      font-weight: 700
    }

    .role-badge-user {
      padding: 2px 10px;
      background: #e8f4fd;
      color: #23a6d5;
      border-radius: 10px;
      font-size: 0.72rem;
      font-weight: 600
    }

    /* === EXP Bonus Badge === */
    .exp-bonus-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0.72rem;
      font-weight: 700;
      margin-left: 6px;
      animation: bonusPulse 2s ease infinite
    }

    .exp-bonus-badge.active {
      background: linear-gradient(135deg, #ff9800, #ff5722);
      color: white
    }

    .exp-bonus-badge.inactive {
      background: #f0f0f0;
      color: #aaa
    }

    @keyframes bonusPulse {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.03)
      }
    }

    .exp-bonus-info {
      background: linear-gradient(135deg, #fff8e1, #fff3e0);
      border: 1px solid #ffe0b2;
      border-radius: 12px;
      padding: 12px 16px;
      margin-top: 8px;
      font-size: 0.8rem;
      color: #e65100;
      display: flex;
      align-items: center;
      gap: 8px
    }

    /* === EXP Settings Panel === */

    /* Tabel pengaturan EXP per aksi */
    .exp-action-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
      margin-top: 14px;
    }

    .exp-action-table th {
      background: linear-gradient(135deg, #fff3e0, #ffe0b2);
      padding: 10px 12px;
      text-align: left;
      font-weight: 700;
      color: #e65100;
      border-bottom: 2px solid #ffcc80;
      white-space: nowrap;
    }

    .exp-action-table td {
      padding: 10px 12px;
      border-bottom: 1px solid #fff3e0;
      vertical-align: middle;
    }

    .exp-action-table tr:hover td {
      background: #fffde7;
    }

    .exp-action-table input[type=number] {
      width: 72px;
      padding: 5px 7px;
      border: 2px solid #ffcc80;
      border-radius: 8px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      font-weight: 700;
      color: #e65100;
      text-align: center;
      background: #fff8e1;
      transition: border-color 0.2s;
    }

    .exp-action-table input[type=number]:focus {
      outline: none;
      border-color: #ff9800;
      background: #fff;
    }

    .exp-action-table .toggle-active {
      position: relative;
      display: inline-block;
      width: 42px;
      height: 22px;
    }

    .exp-action-table .toggle-active input {
      display: none;
    }

    .exp-action-table .toggle-slider {
      position: absolute;
      inset: 0;
      background: #ccc;
      border-radius: 22px;
      cursor: pointer;
      transition: 0.3s;
    }

    .exp-action-table .toggle-slider::before {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      left: 3px;
      top: 3px;
      background: white;
      border-radius: 50%;
      transition: 0.3s;
    }

    .exp-action-table .toggle-active input:checked+.toggle-slider {
      background: #4caf50;
    }

    .exp-action-table .toggle-active input:checked+.toggle-slider::before {
      transform: translateX(20px);
    }

    .exp-action-save-row {
      display: flex;
      justify-content: flex-end;
      margin-top: 14px;
    }

    .exp-action-type-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0.78rem;
      font-weight: 700;
      white-space: nowrap;
    }

    body.dark-mode .exp-action-table th {
      background: #332800;
      color: #ffb74d;
      border-bottom-color: #554400;
    }

    body.dark-mode .exp-action-table td {
      border-bottom-color: #332800;
    }

    body.dark-mode .exp-action-table tr:hover td {
      background: #2a2200;
    }

    body.dark-mode .exp-action-table input[type=number] {
      background: #1e1e1e;
      border-color: #554400;
      color: #ffb74d;
    }

    body.dark-mode .exp-action-table input[type=number]:focus {
      background: #252525;
      border-color: #ff9800;
    }

    .exp-settings-card {
      background: linear-gradient(135deg, #fff8e1, #fffde7);
      border: 2px solid #ffecb3;
      border-radius: 16px;
      padding: 25px;
      margin-bottom: 20px
    }

    .exp-settings-card h3 {
      margin: 0 0 18px;
      color: #e65100;
      font-size: 1.1rem
    }

    .exp-slider-wrap {
      display: flex;
      align-items: center;
      gap: 15px;
      margin: 15px 0;
      flex-wrap: wrap
    }

    .exp-slider-wrap input[type=range] {
      flex: 1;
      min-width: 200px;
      accent-color: #ff5722;
      height: 8px
    }

    .exp-slider-wrap input[type=number] {
      width: 90px;
      padding: 8px 10px;
      border: 2px solid #ffecb3;
      border-radius: 10px;
      font-family: 'Poppins', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      color: #e65100;
      text-align: center
    }

    .exp-slider-wrap input[type=number]:focus {
      outline: none;
      border-color: #ff9800
    }

    .exp-multiplier-label {
      font-size: 0.85rem;
      color: #666;
      font-weight: 500
    }

    .exp-save-btn {
      background: linear-gradient(135deg, #ff5722, #ff9800);
      color: white;
      border: none;
      padding: 10px 28px;
      border-radius: 12px;
      font-family: 'Poppins', sans-serif;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s;
      margin-top: 10px
    }

    .exp-save-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(255, 87, 34, 0.3)
    }

    .exp-preview-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
      margin-top: 15px
    }

    .exp-preview-table th {
      background: #fff3e0;
      padding: 8px 12px;
      text-align: left;
      font-weight: 600;
      color: #bf360c;
      border-bottom: 2px solid #ffecb3
    }

    .exp-preview-table td {
      padding: 8px 12px;
      border-bottom: 1px solid #fff3e0;
      color: #555
    }

    .exp-preview-table tr:hover td {
      background: #fffde7
    }

    .exp-current-badge {
      display: inline-block;
      padding: 4px 14px;
      border-radius: 20px;
      font-weight: 800;
      font-size: 1.2rem
    }

    .exp-current-badge.normal {
      background: #e8f5e9;
      color: #2e7d32
    }

    .exp-current-badge.boosted {
      background: linear-gradient(135deg, #ff5722, #ff9800);
      color: white;
      animation: bonusPulse 2s ease infinite
    }

    @media(max-width:900px) {
      .header-nav {
        display: none
      }

      .header-auth {
        display: none
      }

      .hamburger {
        display: flex
      }

      .karya-page-container,
      .origen-page-container,
      .create-work-container,
      .chapters-container,
      .profile-container {
        padding: 25px 18px
      }

      .reading-container {
        border-radius: 0
      }

      .reading-cover-section {
        flex-direction: column;
        gap: 20px;
        padding: 25px
      }

      .reading-content-area {
        padding: 25px 18px
      }

      .reading-title {
        font-size: 1.4rem
      }

      .title {
        font-size: 2.2rem
      }

      .left-content {
        padding: 40px 25px
      }
    }

    @media(max-width:768px) {
      .admin-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
      }

      .admin-badge {
        margin-left: 0;
        margin-top: 10px;
      }

      .admin-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
        -webkit-overflow-scrolling: touch;
        gap: 0;
      }

      .admin-tab {
        padding: 10px 14px;
        font-size: 0.78rem;
      }

      .admin-body {
        padding: 16px;
      }

      /* [FIX RESPONSIF] Form admin (misi, misi harian, border) tadinya grid fixed
         7-9 kolom -> overflow horizontal di HP. Di mobile jadi grid otomatis (wrap). */
      .admin-form-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
      }

      .admin-form-grid > div:last-child {
        grid-column: 1 / -1;
      }

      /* [FIX RESPONSIF] Badge kecil (0.55-0.6rem) sulit dibaca di layar HP */
      .badge {
        font-size: 0.65rem !important;
      }

      .admin-stat-row {
        gap: 8px;
      }

      .admin-stat-box {
        min-width: calc(50% - 6px);
        flex: 0 0 calc(50% - 6px);
        padding: 12px;
      }

      .admin-stat-num {
        font-size: 1.3rem;
      }

      .admin-table {
        min-width: unset;
        font-size: 0.8rem;
      }

      .admin-table th,
      .admin-table td {
        padding: 8px 10px;
      }

      .admin-table thead {
        display: none;
      }

      .admin-table tbody tr {
        display: flex;
        flex-direction: column;
        padding: 14px;
        margin-bottom: 10px;
        background: var(--bg-color, #f8f9fa);
        border-radius: 12px;
        border: 1px solid #eee;
        gap: 6px;
      }

      .admin-table tbody tr:hover td {
        background: transparent;
      }

      .admin-table td {
        padding: 4px 0;
        border-bottom: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
      }

      .admin-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: #888;
        flex-shrink: 0;
        min-width: 80px;
      }

      .admin-table td:last-child {
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .admin-del-btn {
        padding: 6px 14px;
        font-size: 0.8rem;
      }

      .admin-search-box {
        font-size: 0.85rem;
        padding: 10px 14px;
      }

      .admin-comment-box {
        flex-direction: column;
      }

      .admin-nav-btn {
        padding: 8px 16px;
        width: 100%;
        text-align: center;
      }

      .exp-slider-wrap {
        flex-direction: column;
        align-items: stretch;
      }

      .exp-slider-wrap input[type=number] {
        width: 100%;
      }

      .exp-preview-table {
        font-size: 0.75rem;
      }

      .exp-preview-table th,
      .exp-preview-table td {
        padding: 6px 8px;
      }

      .profile-img-wrapper {
        width: 180px;
        height: 250px;
      }

      .name-tag {
        font-size: 1rem;
      }
    }

    @media(max-width:600px) {

      .karya-grid,
      .karya-list,
      .origen-list {
        grid-template-columns: 1fr
      }

      .profile-stats {
        gap: 20px
      }

      .reading-controls-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px
      }

      .reading-ctrl-center {
        order: -1;
        width: 100%;
        justify-content: center
      }

      .chapters-header {
        flex-direction: column
      }

      .welcome-card {
        padding: 30px 24px
      }

      .admin-title {
        font-size: 1.2rem;
      }

      .admin-container {
        border-radius: 0;
        margin: 0 -15px;
      }

      .origen-list {
        grid-template-columns: 1fr
      }

      .origen-item-header {
        padding: 16px 18px 14px
      }

      .origen-item-content {
        padding: 14px 18px 8px
      }

      .origen-item-expand {
        padding: 12px 18px;
        font-size: 0.82rem
      }

      .origen-item-details-inner {
        padding: 14px 18px 18px
      }

      .synopsis-action-bar {
        gap: 8px
      }

      .synopsis-action-bar .syn-btn {
        padding: 8px 14px;
        font-size: 0.8rem;
        flex: 1;
        justify-content: center;
        min-height: 42px
      }

      .synopsis-action-bar .syn-count {
        width: 100%;
        justify-content: center;
        margin-left: 0;
        margin-top: 4px
      }
    }

    /* ===== TIM LITDIGI SECTION UPGRADE ===== */
    .tim-container {
      max-width: 1200px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      padding: 50px 40px;
    }

    .tim-header {
      text-align: center;
      margin-bottom: 50px;
    }

    .tim-title {
      font-size: 2.2rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 15px;
      position: relative;
      display: inline-block;
    }

    .tim-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
    }

    /* CARD */
    .profile-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      transition: .4s;
    }

    /* FOTO PERSEGI PANJANG */
    .profile-img-wrapper {
      width: 220px;
      height: 300px;
      position: relative;
      border-radius: 24px;
      overflow: hidden;
      padding: 4px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5, #ff9800, #ff5722);
      background-size: 300% 300%;
      animation: borderFlow 6s linear infinite;
      margin-bottom: 20px;
      transition: .5s;
    }

    /* FOTO */
    .profile-img-wrapper img,
    .profile-img-wrapper video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 20px;
      display: block;
      transition: .6s;
    }

    /* HOVER FOTO */
    .profile-img-wrapper:hover {
      transform: translateY(-12px) scale(1.03);
      box-shadow: 0 25px 45px rgba(35, 166, 213, .35), 0 0 35px rgba(0, 225, 255, .25);
    }

    .profile-img-wrapper:hover img,
    .profile-img-wrapper:hover video {
      transform: scale(1.08);
    }

    /* KILAUAN */
    .profile-img-wrapper::after {
      content: '';
      position: absolute;
      top: -100%;
      left: -60%;
      width: 50%;
      height: 300%;
      background: rgba(255, 255, 255, .25);
      transform: rotate(25deg);
      transition: .8s;
    }

    .profile-img-wrapper:hover::after {
      left: 130%;
    }

    /* NAMA */
    .name-tag {
      padding: 12px 30px;
      border-radius: 50px;
      font-size: 1.1rem;
      font-weight: 800;
      letter-spacing: .5px;
      transition: .4s;
      cursor: pointer;
    }

    .name-tag.founder {
      background: linear-gradient(135deg, #ffffff, #f8fbff);
      border: 2px solid #23a6d5;
      color: deepskyblue;
      box-shadow: 0 8px 18px rgba(35, 166, 213, .15);
    }

    .name-tag.team {
      background: linear-gradient(135deg, #ffffff, #f8fbff);
      border: 2px solid #23a6d5;
      color: deepskyblue;
      box-shadow: 0 8px 18px rgba(35, 166, 213, .15);
    }

    /* HOVER NAMA */
    .name-tag:hover {
      transform: translateY(-5px) scale(1.08);
      box-shadow: 0 15px 30px rgba(35, 166, 213, .3);
    }

    .role-text {
      margin-top: 8px;
      font-size: .9rem;
      font-weight: 700;
      color: #64748b;
      letter-spacing: 1.2px;
      text-transform: uppercase;
    }

    /* GRID */
    .team-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 40px;
      margin-top: 40px;
    }

    /* BORDER BERGERAK */
    @keyframes borderFlow {
      0% {
        background-position: 0% 50%;
      }

      100% {
        background-position: 300% 50%;
      }
    }

    /* ANIMASI MUNCUL BERURUTAN */
    @keyframes memberAppear {
      0% {
        opacity: 0;
        transform: translateY(60px) scale(.8);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .profile-card {
      opacity: 0;
      animation: memberAppear .9s cubic-bezier(.175, .885, .32, 1.275) forwards;
    }

    .profile-card:nth-child(1) {
      animation-delay: .2s;
    }

    .team-grid .profile-card:nth-child(1) {
      animation-delay: .8s;
    }

    .team-grid .profile-card:nth-child(2) {
      animation-delay: 1.4s;
    }

    .team-grid .profile-card:nth-child(3) {
      animation-delay: 2s;
    }

    .team-grid .profile-card:nth-child(4) {
      animation-delay: 2.6s;
    }

    /* ======================================================== */
    /* STYLING FOTO KEGIATAN & SOSIALISASI (TIMELINE BARU)      */
    /* ======================================================== */
    .kegiatan-section {
      margin-top: 70px;
      padding-top: 50px;
      border-top: 2px dashed #e0e0e0;
    }

    .kegiatan-timeline {
      display: flex;
      flex-direction: column;
      gap: 50px;
      margin-top: 40px;
    }

    .kegiatan-timeline-item {
      position: relative;
      padding-left: 35px;
      border-left: 4px dashed #23a6d5;
      padding-bottom: 40px;
    }

    .kegiatan-timeline-item:last-child {
      padding-bottom: 0;
    }

    .kegiatan-date-badge {
      display: inline-block;
      padding: 8px 20px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: white;
      font-weight: 700;
      border-radius: 20px;
      font-size: 0.95rem;
      margin-bottom: 20px;
      position: relative;
      box-shadow: 0 4px 15px rgba(35, 166, 213, 0.3);
    }

    /* Titik di garis timeline */
    .kegiatan-timeline-item::before {
      content: '';
      position: absolute;
      left: -12px;
      top: 5px;
      width: 20px;
      height: 20px;
      background: white;
      border: 4px solid #ff9800;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(255, 152, 0, 0.5);
      z-index: 2;
    }

    .kegiatan-subtitle {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-color, #1e293b);
      margin-bottom: 25px;
    }

    .kegiatan-sub-subtitle {
      font-size: 1.2rem;
      font-weight: 600;
      color: #23a6d5;
      margin-top: 40px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .kegiatan-gallery {
      display: grid;
      gap: 20px;
    }

    .kegiatan-gallery.grid-3 {
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .kegiatan-gallery.grid-auto {
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }

    /* Animasi khusus untuk galeri foto border menyala */
    .animated-img-wrapper {
      position: relative;
      border-radius: 18px;
      padding: 4px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5, #ff9800, #ff5722);
      background-size: 300% 300%;
      animation: borderFlow 6s linear infinite;
      overflow: hidden;
      transition: all 0.4s ease;
      cursor: pointer;
      aspect-ratio: 4/3;
    }

    .animated-img-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 14px;
      display: block;
      transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .animated-img-wrapper:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 35px rgba(35, 166, 213, 0.4);
      z-index: 2;
    }

    .animated-img-wrapper:hover img {
      transform: scale(1.1);
      filter: brightness(1.1);
    }

    .animated-img-wrapper::after {
      content: '';
      position: absolute;
      top: -100%;
      left: -60%;
      width: 50%;
      height: 300%;
      background: rgba(255, 255, 255, 0.25);
      transform: rotate(25deg);
      transition: 0.8s;
      pointer-events: none;
      z-index: 1;
    }

    .animated-img-wrapper:hover::after {
      left: 130%;
    }

    /* Penyesuaian text untuk Dark Mode */
    body.dark-mode .kegiatan-subtitle,
    body.dark-mode .kegiatan-sub-subtitle {
      color: #fff !important;
    }

    /* ===== FOOTER LITDIGI ===== */
    .site-footer {
      background: linear-gradient(135deg, #0f2862 0%, #1a4a8a 100%);
      color: white;
      padding: 70px 20px 20px;
      margin-top: 60px;
      position: relative;
      font-family: 'Poppins', sans-serif;
    }

    .site-footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 6px;
      background: linear-gradient(90deg, #00e1ff, #23a6d5, #ff9800, #ff5722, #00e1ff);
      background-size: 200% 100%;
      animation: footerBorderFlow 4s linear infinite;
    }

    @keyframes footerBorderFlow {
      0% {
        background-position: 0% 0;
      }

      100% {
        background-position: 200% 0;
      }
    }

    .footer-container {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 40px;
      margin-bottom: 40px;
    }

    .footer-brand {
      font-size: 2.2rem;
      font-weight: 800;
      cursor: pointer;
      background: linear-gradient(135deg, #00e1ff, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 5px;
      display: inline-block;
    }

    .footer-motto-wrapper {
      margin-bottom: 20px;
    }

    .motto-text {
      font-size: 1.1rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      background: linear-gradient(90deg, #00e1ff, #23a6d5, #ff9800, #ff5722, #00e1ff);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: mottoShine 3s linear infinite, mottoFloat 2s ease-in-out infinite;
      display: inline-block;
    }

    @keyframes mottoShine {
      to {
        background-position: 200% center;
      }
    }

    @keyframes mottoFloat {

      0%,
      100% {
        transform: translateY(0);
        filter: drop-shadow(0 0 5px rgba(0, 225, 255, 0.4));
      }

      50% {
        transform: translateY(-4px);
        filter: drop-shadow(0 0 15px rgba(255, 152, 0, 0.6));
      }
    }

    .footer-desc {
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    /* ===== [JAM SERVER] Kartu jam WIB di footer kolom kiri =====
       Warna sengaja mengikuti palet footer (biru gelap + aksen cyan) agar
       menyatu dengan desain yang sudah ada. Angka jam memakai font monospace
       + font-variant-numeric: tabular-nums supaya lebarnya tetap dan tidak
       "bergoyang" tiap detik berganti. */
    .footer-clock {
      margin-top: 18px;
      padding: 14px 16px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      max-width: 320px;
    }

    .footer-clock .fc-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .footer-clock .fc-icon {
      color: #4fc3f7;
      font-size: 1.05rem;
      flex: 0 0 auto;
    }

    .footer-clock .fc-main {
      display: flex;
      align-items: baseline;
      gap: 6px;
      min-width: 0;
    }

    .footer-clock .fc-time {
      font-family: 'Courier New', ui-monospace, monospace;
      font-variant-numeric: tabular-nums;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.1;
      color: #fff;
      letter-spacing: 1px;
    }

    .footer-clock .fc-zone {
      font-size: 0.78rem;
      font-weight: 700;
      color: #4fc3f7;
      letter-spacing: 0.5px;
    }

    .footer-clock .fc-date {
      margin-top: 4px;
      font-size: 0.82rem;
      color: rgba(255, 255, 255, 0.72);
    }

    .footer-clock .fc-reset {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed rgba(255, 255, 255, 0.16);
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.65);
      line-height: 1.5;
    }

    .footer-clock .fc-reset i {
      color: #ffb74d;
      margin-right: 4px;
    }

    .footer-clock .fc-countdown {
      font-family: 'Courier New', ui-monospace, monospace;
      font-variant-numeric: tabular-nums;
      font-weight: 700;
      color: #ffd54f;
      white-space: nowrap;
    }

    /* Layar kecil: kartu melebar penuh & angka sedikit diperkecil. */
    @media (max-width: 600px) {
      .footer-clock {
        max-width: 100%;
      }

      .footer-clock .fc-time {
        font-size: 1.4rem;
      }
    }

    .footer-heading {
      font-size: 1.2rem;
      font-weight: 700;
      margin-bottom: 20px;
      color: #fff;
      position: relative;
      display: inline-block;
    }

    .footer-heading::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 40px;
      height: 3px;
      background: #00e1ff;
      border-radius: 2px;
    }

    .footer-links a {
      display: block;
      color: rgba(255, 255, 255, 0.7);
      text-decoration: none;
      margin-bottom: 12px;
      font-size: 0.95rem;
      transition: all 0.3s;
      cursor: pointer;
    }

    .footer-links a:hover {
      color: #00e1ff;
      transform: translateX(8px);
    }

    .footer-subtext {
      color: rgba(255, 255, 255, 0.7);
      font-size: 0.9rem;
      margin-bottom: 15px;
      line-height: 1.6;
    }

    .footer-socials {
      display: flex;
      gap: 15px;
    }

    .social-icon {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 1.3rem;
      text-decoration: none;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .social-icon:hover {
      color: white;
    }

    .social-icon.ig:hover {
      background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
      transform: translateY(-8px) rotate(8deg);
      box-shadow: 0 10px 20px rgba(220, 39, 67, 0.4);
      border-color: transparent;
    }

    .social-icon.yt:hover {
      background: #ff0000;
      transform: translateY(-8px) rotate(-8deg);
      box-shadow: 0 10px 20px rgba(255, 0, 0, 0.4);
      border-color: transparent;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 25px;
      text-align: center;
      color: rgba(255, 255, 255, 0.5);
      font-size: 0.85rem;
    }

    /* =========================================================
       TEMA EKSKLUSIF EVENT 17-AN: NUSANTARA JAYA 81 (merdeka2026)
       ========================================================= */
    body.theme-merdeka2026 {
      background: linear-gradient(135deg, #1a0505 0%, #450a0a 50%, #1a0505 100%) !important;
      color: #f8fafc !important;
      position: relative;
    }
    body.theme-merdeka2026::after {
      content: 'DIRGAHAYU RI KE-81 🇮🇩';
      position: fixed;
      bottom: 30px;
      right: -20px;
      font-size: 5rem;
      font-weight: 900;
      font-family: 'Poppins', sans-serif;
      color: rgba(251, 191, 36, 0.04);
      z-index: -1;
      pointer-events: none;
      transform: rotate(-10deg);
      white-space: nowrap;
    }
    body.theme-merdeka2026 header,
    body.theme-merdeka2026 .mobile-menu,
    body.theme-merdeka2026 .site-footer {
      background: rgba(45, 8, 8, 0.95) !important;
      border-color: rgba(251, 191, 36, 0.3) !important;
    }
    body.theme-merdeka2026 .header-brand,
    body.theme-merdeka2026 .nav-link,
    body.theme-merdeka2026 .title,
    body.theme-merdeka2026 .section-title {
      color: #fbbf24 !important;
    }
    body.theme-merdeka2026 .page-section,
    body.theme-merdeka2026 .container,
    body.theme-merdeka2026 .karya-showcase,
    body.theme-merdeka2026 .profile-container {
      background: linear-gradient(145deg, #2a0808, #3b0909) !important;
      border: 1px solid rgba(251, 191, 36, 0.2) !important;
    }
    body.theme-merdeka2026 .btn-primary,
    body.theme-merdeka2026 .btn-daftar {
      background: linear-gradient(135deg, #fbbf24, #d97706) !important;
      color: #1a0505 !important;
      border: none !important;
      font-weight: 800 !important;
    }

    /* ===== GLOBAL DARK MODE STYLES ===== */
    body.dark-mode {
      background: #121212;
      color: #e0e0e0;
    }

    body.dark-mode header,
    body.dark-mode .mobile-menu {
      background: #1a1a1a;
      border-bottom: 1px solid #333;
    }

    /* [FIX MOBILE MENU] Header sticky di dalam menu ikut warna tema gelap agar
       teks di bawahnya tidak tembus saat menu di-scroll. */
    body.dark-mode .mm-settings-head { background: #1a1a1a; }
    body.dark-mode .mobile-menu {
      scrollbar-color: rgba(35, 166, 213, 0.5) transparent;
    }

    body.dark-mode .header-brand,
    body.dark-mode .nav-link {
      color: #e0e0e0;
    }

    body.dark-mode .nav-link:hover {
      background: rgba(35, 166, 213, 0.15);
    }

    body.dark-mode .hamburger span {
      background: #e0e0e0;
    }

    body.dark-mode .page-section,
    body.dark-mode .container,
    body.dark-mode .karya-showcase,
    body.dark-mode .origen-section,
    body.dark-mode .karya-page-container,
    body.dark-mode .origen-page-container,
    body.dark-mode .create-work-container,
    body.dark-mode .profile-container,
    body.dark-mode .admin-container,
    body.dark-mode .tim-container,
    body.dark-mode .chapters-container {
      background: rgba(30, 30, 30, 0.95);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    body.dark-mode .title,
    body.dark-mode .section-title,
    body.dark-mode .origen-title,
    body.dark-mode .karya-page-title,
    body.dark-mode .origen-page-title,
    body.dark-mode .create-work-title,
    body.dark-mode .tim-title,
    body.dark-mode .kegiatan-subtitle,
    body.dark-mode .kegiatan-sub-subtitle,
    body.dark-mode h1,
    body.dark-mode h2,
    body.dark-mode h3,
    body.dark-mode h4,
    body.dark-mode .novel-title {
      color: #fff !important;
    }

    body.dark-mode .karya-card,
    body.dark-mode .origen-card,
    body.dark-mode .origen-item,
    body.dark-mode .chapter-card,
    body.dark-mode .user-work-card,
    body.dark-mode .admin-stat-box,
    body.dark-mode .admin-comment-box {
      background: #252525;
      border-color: #333;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    body.dark-mode .karya-title,
    body.dark-mode .origen-item-title,
    body.dark-mode .chapter-title,
    body.dark-mode .user-work-title {
      color: #fff;
    }

    body.dark-mode .description,
    body.dark-mode .section-subtitle,
    body.dark-mode .origen-card-text,
    body.dark-mode .karya-excerpt,
    body.dark-mode .form-label,
    body.dark-mode .profile-bio,
    body.dark-mode .chapter-date {
      color: #bbb;
    }

    body.dark-mode .modal-content {
      background: #1e1e1e;
      color: #e0e0e0;
      border: 1px solid #333;
    }

    body.dark-mode .modal-title {
      color: #fff;
    }

    body.dark-mode .form-input,
    body.dark-mode .form-textarea,
    body.dark-mode .form-select,
    body.dark-mode .karya-search-input,
    body.dark-mode .origen-search-input,
    body.dark-mode .karya-sort-select,
    body.dark-mode .edit-form-input,
    body.dark-mode .modal-input,
    body.dark-mode .comment-textarea {
      background: #2a2a2a;
      color: #fff;
      border-color: #444;
    }

    body.dark-mode .comment-replies,
    body.dark-mode .comment-reply-item::before {
      border-color: #444;
    }

    body.dark-mode .replies-toggle-btn:hover {
      background: rgba(35, 166, 213, 0.2);
    }

    body.dark-mode .karya-filter-btn {
      background: #2a2a2a;
      border-color: #444;
      color: #ccc;
    }

    body.dark-mode .karya-filter-btn.active {
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: #fff;
      border-color: transparent;
    }

    body.dark-mode .profile-tab {
      color: #aaa;
    }

    body.dark-mode .profile-tab.active {
      color: #23a6d5;
      border-bottom-color: #23a6d5;
    }

    body.dark-mode .toast {
      background: #2a2a2a;
      color: #fff;
      border-left-color: #23a6d5;
    }

    body.dark-mode .user-dropdown {
      background: #1e1e1e;
      border-color: #333;
    }

    body.dark-mode .user-dropdown a {
      color: #e0e0e0;
    }

    body.dark-mode .user-dropdown a:hover {
      background: #2a2a2a;
      color: #23a6d5;
    }

    body.dark-mode .dropdown-divider {
      background: #333;
    }

    body.dark-mode .asal-usul-content {
      background: #252525;
      border-color: #444;
      color: #ccc;
    }

    body.dark-mode .admin-tabs {
      background: #2a2a2a;
      border-bottom-color: #444;
    }
    
    body.dark-mode .admin-tabs::-webkit-scrollbar-thumb {
      background: #555;
    }

    body.dark-mode .admin-tab {
      color: #bbb;
    }

    body.dark-mode .admin-tab:hover {
      background: #333;
      color: #fff;
    }

    body.dark-mode .admin-tab.active {
      background: #1e1e1e;
      color: #ff5722;
      border-bottom-color: #ff5722;
    }

    body.dark-mode .admin-table th {
      background: #2a2a2a;
      color: #ddd;
      border-bottom-color: #444;
    }

    body.dark-mode .admin-table td {
      border-bottom-color: #333;
    }

    body.dark-mode .admin-table tr:hover td {
      background: #333;
    }

    body.dark-mode .admin-search-box {
      background: #2a2a2a;
      color: #fff;
      border-color: #444;
    }

    body.dark-mode .cover-upload-area {
      border-color: #444;
    }

    body.dark-mode .cover-upload-area:hover {
      background: #2a2a2a;
      border-color: #23a6d5;
    }

    body.dark-mode .empty-state p {
      color: #aaa;
    }

    body.dark-mode .exp-settings-card {
      background: linear-gradient(135deg, #2a2200, #332800);
      border-color: #554400;
    }

    body.dark-mode .exp-settings-card h3 {
      color: #ffb74d;
    }

    body.dark-mode .exp-slider-wrap input[type=number] {
      background: #1e1e1e;
      color: #ffb74d;
      border-color: #554400;
    }

    body.dark-mode .exp-preview-table th {
      background: #332800;
      color: #ffb74d;
      border-color: #554400;
    }

    body.dark-mode .exp-preview-table td {
      border-color: #332800;
      color: #ccc;
    }

    body.dark-mode .exp-preview-table tr:hover td {
      background: #2a2200;
    }

    body.dark-mode .exp-bonus-info {
      background: #2a2200;
      border-color: #554400;
      color: #ffb74d;
    }

    body.dark-mode .admin-table tbody tr {
      background: #252525;
      border-color: #333;
    }

    body.dark-mode .admin-table td::before {
      color: #888;
    }

/* =========================================================
   TEMA EKSKLUSIF EVENT 17-AN: NUSANTARA JAYA 81 (merdeka2026)
   ========================================================= */
body.theme-merdeka2026 {
  background: linear-gradient(135deg, #1a0505 0%, #450a0a 50%, #1a0505 100%) !important;
  color: #f8fafc !important;
  position: relative;
}

/* Watermark Elegan HUT RI ke-81 */
body.theme-merdeka2026::after {
  content: 'DIRGAHAYU RI KE-81 🇮🇩';
  position: fixed;
  bottom: 30px;
  right: -20px;
  font-size: 5rem;
  font-weight: 900;
  font-family: 'Poppins', sans-serif;
  color: rgba(251, 191, 36, 0.04);
  z-index: -1;
  pointer-events: none;
  transform: rotate(-10deg);
  white-space: nowrap;
}

/* Navbar & Footer */
body.theme-merdeka2026 header,
body.theme-merdeka2026 .mobile-menu,
body.theme-merdeka2026 .site-footer {
  background: rgba(45, 8, 8, 0.95) !important;
  border-color: rgba(251, 191, 36, 0.3) !important;
  box-shadow: 0 4px 20px rgba(220, 38, 38, 0.15) !important;
}

/* [FIX MOBILE MENU] Sticky header di dalam menu mengikuti tema Merdeka. */
body.theme-merdeka2026 .mm-settings-head {
  background: rgba(45, 8, 8, 0.98) !important;
}

body.theme-merdeka2026 .header-brand,
body.theme-merdeka2026 .nav-link,
body.theme-merdeka2026 .title {
  color: #fbbf24 !important; /* Warna Emas */
  text-shadow: 0 2px 10px rgba(251, 191, 36, 0.2) !important;
}

/* Cards & Containers */
body.theme-merdeka2026 .page-section,
body.theme-merdeka2026 .container,
body.theme-merdeka2026 .karya-showcase,
body.theme-merdeka2026 .profile-container,
body.theme-merdeka2026 .create-work-container,
body.theme-merdeka2026 .admin-container {
  background: linear-gradient(145deg, #2a0808, #3b0909) !important;
  border: 1px solid rgba(251, 191, 36, 0.2) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(220, 38, 38, 0.1) !important;
}

/* Elemen teks dan input */
body.theme-merdeka2026 .section-title,
body.theme-merdeka2026 h1, 
body.theme-merdeka2026 h2, 
body.theme-merdeka2026 h3 {
  color: #fef3c7 !important;
}
body.theme-merdeka2026 .description,
body.theme-merdeka2026 p,
body.theme-merdeka2026 label {
  color: #d1d5db !important;
}
body.theme-merdeka2026 .form-input,
body.theme-merdeka2026 .form-textarea,
body.theme-merdeka2026 .form-select,
body.theme-merdeka2026 .karya-search-input {
  background: rgba(0, 0, 0, 0.3) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
}
body.theme-merdeka2026 .form-input:focus {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.2) !important;
}

/* Kartu Karya & Item */
body.theme-merdeka2026 .karya-card,
body.theme-merdeka2026 .user-work-card,
body.theme-merdeka2026 .origen-card,
body.theme-merdeka2026 .chapter-card {
  background: #1f0505 !important;
  border: 1px solid rgba(251, 191, 36, 0.15) !important;
}
body.theme-merdeka2026 .karya-card:hover,
body.theme-merdeka2026 .user-work-card:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 8px 25px rgba(251, 191, 36, 0.15) !important;
}
body.theme-merdeka2026 .karya-title,
body.theme-merdeka2026 .user-work-title {
  color: #fde68a !important;
}

/* Tombol Primary (Aksen Emas Merah) */
body.theme-merdeka2026 .btn-primary,
body.theme-merdeka2026 .btn-daftar,
body.theme-merdeka2026 .modal-btn {
  background: linear-gradient(135deg, #fbbf24, #d97706) !important;
  color: #1a0505 !important;
  border: none !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3) !important;
}
body.theme-merdeka2026 .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.5) !important;
  transform: translateY(-2px);
}

/* Tombol Secondary */
body.theme-merdeka2026 .btn-secondary,
body.theme-merdeka2026 .btn-masuk {
  background: transparent !important;
  color: #fbbf24 !important;
  border: 2px solid #fbbf24 !important;
}
body.theme-merdeka2026 .btn-secondary:hover {
  background: rgba(251, 191, 36, 0.1) !important;
}

/* =========================================================
   TEMA MERDEKA2026 — EXTENDED: SEMUA ELEMEN YANG BELUM TERSENTUH
   ========================================================= */

/* === MODAL CONTENT === */
body.theme-merdeka2026 .modal-content,
body.theme-merdeka2026 .modal-box,
body.theme-merdeka2026 .modal-container,
body.theme-merdeka2026 .modal-inner,
body.theme-merdeka2026 .modal-card,
body.theme-merdeka2026 [class*="modal"]:not(.modal-overlay):not(.event-modal-overlay) {
  background: linear-gradient(145deg, #2a0808, #1e0505) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  color: #f0e6d3 !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.8), 0 0 0 1px rgba(251,191,36,0.1), inset 0 1px 0 rgba(251,191,36,0.15) !important;
}
body.theme-merdeka2026 .modal-header,
body.theme-merdeka2026 .modal-title {
  color: #fbbf24 !important;
  border-bottom: 1px solid rgba(251, 191, 36, 0.2) !important;
}
body.theme-merdeka2026 .modal-footer,
body.theme-merdeka2026 .modal-actions {
  border-top: 1px solid rgba(251, 191, 36, 0.15) !important;
  background: rgba(0,0,0,0.2) !important;
}
body.theme-merdeka2026 .modal-close,
body.theme-merdeka2026 .close-btn,
body.theme-merdeka2026 [class*="close"] {
  color: rgba(251,191,36,0.6) !important;
  transition: color 0.2s !important;
}
body.theme-merdeka2026 .modal-close:hover,
body.theme-merdeka2026 .close-btn:hover { color: #fbbf24 !important; }

/* === ADMIN PANEL / CONTAINER === */
body.theme-merdeka2026 .admin-panel,
body.theme-merdeka2026 .admin-section,
body.theme-merdeka2026 .admin-card,
body.theme-merdeka2026 .admin-sidebar,
body.theme-merdeka2026 .admin-content,
body.theme-merdeka2026 .admin-tab-content {
  background: linear-gradient(145deg, #250707, #1a0404) !important;
  border: 1px solid rgba(251,191,36,0.2) !important;
  color: #e8d5b0 !important;
}
body.theme-merdeka2026 .admin-header,
body.theme-merdeka2026 .admin-nav {
  background: rgba(40, 5, 5, 0.98) !important;
  border-bottom: 2px solid rgba(251,191,36,0.25) !important;
}
body.theme-merdeka2026 .admin-nav a,
body.theme-merdeka2026 .admin-menu-item {
  color: #d4b896 !important;
}
body.theme-merdeka2026 .admin-nav a:hover,
body.theme-merdeka2026 .admin-menu-item:hover,
body.theme-merdeka2026 .admin-menu-item.active {
  background: rgba(251,191,36,0.1) !important;
  color: #fbbf24 !important;
  border-left: 3px solid #fbbf24 !important;
}

/* === FORM INPUT / TEXTAREA / SELECT / DROPDOWN === */
body.theme-merdeka2026 input[type="text"],
body.theme-merdeka2026 input[type="email"],
body.theme-merdeka2026 input[type="password"],
body.theme-merdeka2026 input[type="number"],
body.theme-merdeka2026 input[type="search"],
body.theme-merdeka2026 input[type="url"],
body.theme-merdeka2026 textarea,
body.theme-merdeka2026 select,
body.theme-merdeka2026 .form-control,
body.theme-merdeka2026 .edit-form-input,
body.theme-merdeka2026 .search-input,
body.theme-merdeka2026 .filter-select {
  background: rgba(30, 5, 5, 0.85) !important;
  color: #fde68a !important;
  border: 1px solid rgba(251,191,36,0.35) !important;
  border-radius: 8px !important;
}
body.theme-merdeka2026 input::placeholder,
body.theme-merdeka2026 textarea::placeholder { color: rgba(251,191,36,0.35) !important; }
body.theme-merdeka2026 input:focus,
body.theme-merdeka2026 textarea:focus,
body.theme-merdeka2026 select:focus {
  outline: none !important;
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.18), 0 0 12px rgba(251,191,36,0.1) !important;
}
body.theme-merdeka2026 select option {
  background: #1e0505 !important;
  color: #fde68a !important;
}

/* === TABEL === */
body.theme-merdeka2026 table,
body.theme-merdeka2026 .data-table,
body.theme-merdeka2026 .admin-table {
  background: transparent !important;
  border-collapse: collapse;
}
body.theme-merdeka2026 th {
  background: linear-gradient(135deg, rgba(180,10,10,0.6), rgba(90,5,5,0.6)) !important;
  color: #fbbf24 !important;
  border-bottom: 2px solid rgba(251,191,36,0.4) !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
}
body.theme-merdeka2026 td {
  background: rgba(30,5,5,0.5) !important;
  color: #e8d5b0 !important;
  border-bottom: 1px solid rgba(251,191,36,0.1) !important;
  padding: 10px 16px !important;
}
body.theme-merdeka2026 tr:hover td {
  background: rgba(251,191,36,0.06) !important;
  color: #fef3c7 !important;
}
body.theme-merdeka2026 tr:nth-child(even) td {
  background: rgba(50,8,8,0.45) !important;
}

/* === SCROLLBAR KUSTOM === */
body.theme-merdeka2026 ::-webkit-scrollbar { width: 8px; height: 8px; }
body.theme-merdeka2026 ::-webkit-scrollbar-track { background: #1a0505; }
body.theme-merdeka2026 ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #DC2626, #991B1B);
  border-radius: 4px;
  border: 1px solid rgba(251,191,36,0.2);
}
body.theme-merdeka2026 ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #fbbf24, #d97706);
}

/* === BADGE / CHIP / TAG === */
body.theme-merdeka2026 .badge,
body.theme-merdeka2026 .chip,
body.theme-merdeka2026 .tag,
body.theme-merdeka2026 .label-badge {
  background: rgba(220,38,38,0.25) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
}

/* === CARD GENERIC & INFO BOX === */
body.theme-merdeka2026 .card,
body.theme-merdeka2026 .info-box,
body.theme-merdeka2026 .stat-card,
body.theme-merdeka2026 .summary-card,
body.theme-merdeka2026 .detail-card {
  background: linear-gradient(145deg, #250808, #1a0404) !important;
  border: 1px solid rgba(251,191,36,0.18) !important;
  color: #e8d5b0 !important;
}
body.theme-merdeka2026 .card:hover,
body.theme-merdeka2026 .stat-card:hover {
  border-color: rgba(251,191,36,0.4) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 12px rgba(251,191,36,0.12) !important;
}

/* === DIVIDER & BORDER === */
body.theme-merdeka2026 hr,
body.theme-merdeka2026 .divider,
body.theme-merdeka2026 .separator {
  border-color: rgba(251,191,36,0.15) !important;
}

/* === LINK === */
body.theme-merdeka2026 a:not(.btn):not(.nav-link):not(.modal-close) {
  color: #fbbf24 !important;
  text-decoration: none;
  transition: color 0.2s;
}
body.theme-merdeka2026 a:not(.btn):not(.nav-link):hover {
  color: #fde68a !important;
  text-shadow: 0 0 8px rgba(251,191,36,0.3);
}

/* === TOOLTIP === */
body.theme-merdeka2026 [data-tooltip]::after,
body.theme-merdeka2026 .tooltip {
  background: #1e0505 !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
  color: #fbbf24 !important;
}

/* === DROPDOWN MENU (non-user) === */
body.theme-merdeka2026 .dropdown-menu,
body.theme-merdeka2026 .sort-dropdown,
body.theme-merdeka2026 .filter-dropdown {
  background: #1e0505 !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7) !important;
}
body.theme-merdeka2026 .dropdown-menu li,
body.theme-merdeka2026 .dropdown-item {
  color: #e8d5b0 !important;
}
body.theme-merdeka2026 .dropdown-item:hover {
  background: rgba(251,191,36,0.1) !important;
  color: #fbbf24 !important;
}

/* === NOTIFICATION / ALERT SYSTEM === */
body.theme-merdeka2026 .toast,
body.theme-merdeka2026 .notification-item,
body.theme-merdeka2026 .alert {
  background: #2a0808 !important;
  border-left: 4px solid #fbbf24 !important;
  color: #f0e6d3 !important;
}

/* === LOADING SPINNER === */
body.theme-merdeka2026 .fa-spinner,
body.theme-merdeka2026 .spinner,
body.theme-merdeka2026 .loading-indicator { color: #fbbf24 !important; }

/* === PROFILE HEADER TAMBAHAN === */
body.theme-merdeka2026 .profile-body {
  background: rgba(26,5,5,0.6) !important;
}
body.theme-merdeka2026 .profile-tab {
  color: rgba(251,191,36,0.55) !important;
  border-bottom-color: transparent !important;
  transition: all 0.3s !important;
}
body.theme-merdeka2026 .profile-tab:hover {
  color: #fbbf24 !important;
  background: rgba(251,191,36,0.05) !important;
}
body.theme-merdeka2026 .profile-tab.active {
  color: #fbbf24 !important;
  border-bottom-color: #fbbf24 !important;
  background: rgba(251,191,36,0.08) !important;
}
body.theme-merdeka2026 .profile-tabs {
  border-bottom: 1px solid rgba(251,191,36,0.2) !important;
}

/* === REDEEM CARD TEMA-AWARE === */
body.theme-merdeka2026 .redeem-card {
  background: linear-gradient(145deg, #3b0a0a, #2a0606) !important;
  border-color: rgba(251,191,36,0.5) !important;
}

/* =========================================================
   [FIX KETERBACAAN] TEMA HUT 81 — LAPISAN KONTRAS
   Menutup celah: elemen dengan latar terang/bawaan tetapi
   teksnya dipaksa terang oleh tema -> tidak terbaca.
   Kartu, badge, tabel & label dipaksa ke palet merah-gelap/
   emas agar teks SELALU terbaca di semua perangkat.
   ========================================================= */

/* Kartu/panel yang dulu tertinggal terang */
body.theme-merdeka2026 .mission-card,
body.theme-merdeka2026 .border-item,
body.theme-merdeka2026 .collection-tile,
body.theme-merdeka2026 .exp-settings-card,
body.theme-merdeka2026 .admin-stat-box,
body.theme-merdeka2026 .report-chip,
body.theme-merdeka2026 .admin-empty,
body.theme-merdeka2026 .comment-body,
body.theme-merdeka2026 .tab-content,
body.theme-merdeka2026 .admin-tab-content {
  background: #2a0707 !important;
  color: #f3e8d3 !important;
  border-color: rgba(251,191,36,0.22) !important;
}
body.theme-merdeka2026 .collection-tile.active {
  background: rgba(251,191,36,0.14) !important;
  border-color: #fbbf24 !important;
}
body.theme-merdeka2026 .collection-tile small,
body.theme-merdeka2026 .border-item small,
body.theme-merdeka2026 .mission-card small { color: #ecd9ac !important; }

/* Label & teks kecil yang dulu abu gelap di atas merah gelap */
body.theme-merdeka2026 .form-label,
body.theme-merdeka2026 .sf-label,
body.theme-merdeka2026 .sf-help,
body.theme-merdeka2026 .pn-display-desc,
body.theme-merdeka2026 small {
  color: #e7cf9f !important;
}

/* Badge: teks emas terang di atas kaca gelap — selalu terbaca */
body.theme-merdeka2026 .badge {
  color: #fde68a !important;
  background: rgba(0,0,0,0.42) !important;
  border: 1px solid rgba(251,191,36,0.4);
}

/* Tabel admin & sel */
body.theme-merdeka2026 .admin-table th {
  color: #fde68a !important;
  background: rgba(0,0,0,0.35) !important;
}
body.theme-merdeka2026 .admin-table td {
  color: #f0e0c0 !important;
  border-color: rgba(251,191,36,0.12) !important;
}
body.theme-merdeka2026 .admin-table tbody tr:hover td {
  background: rgba(251,191,36,0.07) !important;
}
body.theme-merdeka2026 .admin-del-btn {
  color: #fca5a5 !important;
  background: rgba(220,38,38,0.14) !important;
}
body.theme-merdeka2026 .admin-tab.active {
  background: rgba(251,191,36,0.15) !important;
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,0.5) !important;
}

/* Nama author komentar & label tipe karya */
body.theme-merdeka2026 .comment-author { color: #fde68a !important; }
body.theme-merdeka2026 .user-work-type,
body.theme-merdeka2026 .karya-type { color: #fbbf24 !important; }

/* Toast agar terbaca */
body.theme-merdeka2026 .toast,
body.theme-merdeka2026 #toast {
  color: #f3e8d3 !important;
  background: #3b0a0a !important;
  border: 1px solid rgba(251,191,36,0.4) !important;
}

/* ==== [LAPISAN 2] 53 PANEL BERLATAR TERANG YANG TERTINGGAL ==== */

/* Studio / Buat Karya */
body.theme-merdeka2026 .studio-panel,
body.theme-merdeka2026 .studio-canvas-panel,
body.theme-merdeka2026 .studio-cover-dropzone,
body.theme-merdeka2026 .comic-main-dropzone,
body.theme-merdeka2026 .canvas-writing-toolbar,
body.theme-merdeka2026 .comic-page-thumb,
body.theme-merdeka2026 .cover-upload-area,
body.theme-merdeka2026 .pn-item {
  background: #2a0707 !important;
  color: #f3e8d3 !important;
  border-color: rgba(251,191,36,0.25) !important;
}
body.theme-merdeka2026 .sf-input,
body.theme-merdeka2026 .sf-select,
body.theme-merdeka2026 .sf-textarea,
body.theme-merdeka2026 .studio-tags-input,
body.theme-merdeka2026 .otp-input {
  background: rgba(0,0,0,0.35) !important;
  color: #fde68a !important;
  border-color: rgba(251,191,36,0.4) !important;
}
body.theme-merdeka2026 .studio-draft-btn,
body.theme-merdeka2026 .back-btn,
body.theme-merdeka2026 .font-ctrl-btn,
body.theme-merdeka2026 .glow-switch-btn,
body.theme-merdeka2026 .karya-filter-toggle-btn,
body.theme-merdeka2026 .adv-pill,
body.theme-merdeka2026 .adv-tag-pill {
  background: #3b0a0a !important;
  color: #fde68a !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
}
body.theme-merdeka2026 .inactive,
body.theme-merdeka2026 .filled { background: rgba(251,191,36,0.18) !important; color: #fde68a !important; }

/* Halaman baca / detail karya */
body.theme-merdeka2026 .book-pages {
  background: #2a0707 !important;
  color: #f3e8d3 !important;
}
body.theme-merdeka2026 .right-content,
body.theme-merdeka2026 .synopsis-box,
body.theme-merdeka2026 .arti-kata-section {
  background: rgba(42,7,7,0.9) !important;
  color: #f3e8d3 !important;
  border-color: rgba(251,191,36,0.22) !important;
}
body.theme-merdeka2026 .user-work-cover {
  background: linear-gradient(135deg, #3b0a0a, #2a0707) !important;
}

/* Home & section umum */
body.theme-merdeka2026 .home-intro-section,
body.theme-merdeka2026 .home-team-section,
body.theme-merdeka2026 .category-card {
  background: rgba(42,7,7,0.92) !important;
  color: #f3e8d3 !important;
  border-color: rgba(251,191,36,0.2) !important;
}
body.theme-merdeka2026 .stats-row { background: rgba(0,0,0,0.3) !important; }

/* Dropdown user & navigasi */
body.theme-merdeka2026 .user-dropdown,
body.theme-merdeka2026 .user-profile {
  background: #2a0707 !important;
  color: #f3e8d3 !important;
  border-color: rgba(251,191,36,0.3) !important;
}
body.theme-merdeka2026 .dropdown-divider { background: rgba(251,191,36,0.25) !important; }

/* Admin */
body.theme-merdeka2026 .admin-tabs,
body.theme-merdeka2026 .admin-comment-box,
body.theme-merdeka2026 .exp-action-table {
  background: #2a0707 !important;
  color: #f3e8d3 !important;
  border-color: rgba(251,191,36,0.2) !important;
}
body.theme-merdeka2026 .exp-bonus-badge {
  background: rgba(251,191,36,0.15) !important;
  color: #fde68a !important;
}

/* Tim LitDigi (kartu organisasi) */
body.theme-merdeka2026 .org-card,
body.theme-merdeka2026 .name-tag,
body.theme-merdeka2026 .founder,
body.theme-merdeka2026 .team,
body.theme-merdeka2026 .socmed-badge {
  background: linear-gradient(145deg, #2a0707, #3b0a0a) !important;
  color: #fde68a !important;
  border-color: rgba(251,191,36,0.3) !important;
}
body.theme-merdeka2026 .org-founder,
body.theme-merdeka2026 .org-card-photo {
  background: linear-gradient(#2a0707, #2a0707) padding-box,
              linear-gradient(135deg, #fbbf24, #C8102E) border-box !important;
}

/* Modal event di halaman utama + welcome */
body.theme-merdeka2026 .event-modal-card {
  background: linear-gradient(145deg, #2a0808, #1e0505) !important;
  color: #f0e6d3 !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
}
body.theme-merdeka2026 .welcome-close-bar {
  background: rgba(0,0,0,0.45) !important;
  color: #fde68a !important;
}



    /* ===== OTP VERIFICATION MODAL ===== */
    .otp-input-group {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin: 25px 0
    }

    .otp-input {
      width: 48px;
      height: 56px;
      text-align: center;
      font-size: 1.5rem;
      font-weight: 700;
      font-family: 'Poppins', sans-serif;
      border: 2px solid #e0e0e0;
      border-radius: 12px;
      background: white;
      color: #1a1a1a;
      transition: all 0.3s;
      outline: none
    }

    .otp-input:focus {
      border-color: #23a6d5;
      box-shadow: 0 0 0 3px rgba(35, 166, 213, 0.15);
      transform: translateY(-2px)
    }

    .otp-input.filled {
      border-color: #23a6d5;
      background: #f0fdff
    }

    .otp-input.error {
      border-color: #ff4757;
      animation: otpShake 0.4s ease
    }

    .otp-input.success {
      border-color: #4caf50;
      background: #f0fff0
    }

    @keyframes otpShake {

      0%,
      100% {
        transform: translateX(0)
      }

      20%,
      60% {
        transform: translateX(-6px)
      }

      40%,
      80% {
        transform: translateX(6px)
      }
    }

    .otp-timer {
      text-align: center;
      color: #888;
      font-size: 0.85rem;
      margin: 15px 0
    }

    .otp-timer span {
      color: #23a6d5;
      font-weight: 700
    }

    .otp-resend-btn {
      background: none;
      border: none;
      color: #23a6d5;
      font-weight: 600;
      font-size: 0.88rem;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      padding: 5px 10px;
      transition: all 0.3s
    }

    .otp-resend-btn:hover:not(:disabled) {
      text-decoration: underline
    }

    .otp-resend-btn:disabled {
      color: #ccc;
      cursor: not-allowed
    }

    .otp-info {
      text-align: center;
      color: #888;
      font-size: 0.85rem;
      margin-bottom: 20px;
      line-height: 1.5
    }

    .otp-info strong {
      color: #333
    }

    .email-verify-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 10px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: default
    }

    .email-verify-badge.verified {
      background: rgba(76, 175, 80, 0.1);
      color: #4caf50
    }

    .email-verify-badge.unverified {
      background: rgba(255, 152, 0, 0.1);
      color: #ff9800;
      cursor: pointer;
      transition: all 0.3s
    }

    .email-verify-badge.unverified:hover {
      background: rgba(255, 152, 0, 0.2)
    }

    body.dark-mode .otp-input {
      background: #2a2a2a;
      border-color: #444;
      color: #fff
    }

    body.dark-mode .otp-input:focus {
      border-color: #23a6d5;
      background: #1e3a4a
    }

    body.dark-mode .otp-input.filled {
      background: #1e3a4a;
      border-color: #23a6d5
    }

    body.dark-mode .otp-info strong {
      color: #eee
    }

    body.dark-mode .email-verify-badge.verified {
      background: rgba(76, 175, 80, 0.15)
    }

    body.dark-mode .email-verify-badge.unverified {
      background: rgba(255, 152, 0, 0.15)
    }

    /* ===== PASSWORD EYE TOGGLE ===== */
    .password-wrapper {
      position: relative;
      width: 100%
    }

    .password-wrapper .modal-input {
      padding-right: 44px
    }

    .password-toggle {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: #aaa;
      font-size: 1rem;
      padding: 4px;
      transition: color 0.2s;
      z-index: 1
    }

    .password-toggle:hover {
      color: #23a6d5
    }

    body.dark-mode .password-toggle {
      color: #666
    }

    body.dark-mode .password-toggle:hover {
      color: #23a6d5
    }

    /* ===== EVENT 17 AGUSTUS - POPUP MODAL ===== */
    @keyframes eventModalIn {
      0% {
        opacity: 0;
        transform: scale(0.7) translateY(40px)
      }

      60% {
        transform: scale(1.03) translateY(-5px)
      }

      100% {
        opacity: 1;
        transform: scale(1) translateY(0)
      }
    }

    @keyframes eventModalOut {
      to {
        opacity: 0;
        transform: scale(0.85) translateY(-30px)
      }
    }

    @keyframes eventConfetti {
      0% {
        transform: translateY(-10px) rotate(0deg);
        opacity: 1
      }

      100% {
        transform: translateY(300px) rotate(720deg);
        opacity: 0
      }
    }

    @keyframes eventGlow {

      0%,
      100% {
        box-shadow: 0 0 30px rgba(220, 38, 38, 0.2), 0 20px 60px rgba(0, 0, 0, 0.3)
      }

      50% {
        box-shadow: 0 0 50px rgba(220, 38, 38, 0.35), 0 20px 60px rgba(0, 0, 0, 0.3)
      }
    }

    @keyframes eventFlagWave {

      0%,
      100% {
        transform: rotate(-5deg) scale(1)
      }

      25% {
        transform: rotate(5deg) scale(1.05)
      }

      50% {
        transform: rotate(-3deg) scale(1.02)
      }

      75% {
        transform: rotate(4deg) scale(1.04)
      }
    }

    @keyframes eventShine {
      0% {
        left: -100%
      }

      100% {
        left: 200%
      }
    }

    .event-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 6000;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s
    }

    .event-modal-overlay.active {
      display: flex;
      opacity: 1
    }

    .event-modal-card {
      background: linear-gradient(145deg, #1a0a0a 0%, #2d0e0e 30%, #1a0505 100%);
      border-radius: 24px;
      padding: 0;
      width: 92%;
      max-width: 440px;
      position: relative;
      overflow: hidden;
      animation: eventModalIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
      border: 1px solid rgba(220, 38, 38, 0.3)
    }

    .event-modal-card.closing {
      animation: eventModalOut 0.35s ease forwards
    }

    .event-modal-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #DC2626, #F59E0B, #DC2626);
      background-size: 200% 100%;
      animation: shimmer 2.5s linear infinite
    }

    .event-modal-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
      animation: eventShine 4s ease-in-out infinite
    }

    .event-modal-top {
      padding: 35px 30px 20px;
      text-align: center;
      position: relative
    }

    .event-modal-confetti {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden
    }

    .event-modal-flag {
      font-size: 3.5rem;
      margin-bottom: 12px;
      display: inline-block;
      animation: eventFlagWave 2s ease-in-out infinite
    }

    .event-modal-title {
      font-size: 1.6rem;
      font-weight: 900;
      color: white;
      margin-bottom: 6px;
      text-shadow: 0 2px 10px rgba(220, 38, 38, 0.3)
    }

    .event-modal-subtitle {
      font-size: 0.88rem;
      color: rgba(255, 255, 255, 0.6);
      margin-bottom: 4px;
      font-weight: 400
    }

    .event-modal-user {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 5px 14px 5px 5px;
      margin-top: 12px
    }

    .event-modal-user img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 2px solid #DC2626;
      object-fit: cover
    }

    .event-modal-user span {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.85);
      font-weight: 600
    }

    .event-modal-body {
      padding: 0 30px 28px
    }

    .event-modal-features {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
      justify-content: center
    }

    .event-modal-feat {
      flex: 1;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 14px;
      padding: 14px 10px;
      text-align: center;
      transition: all 0.3s
    }

    .event-modal-feat:hover {
      background: rgba(220, 38, 38, 0.1);
      border-color: rgba(220, 38, 38, 0.3);
      transform: translateY(-2px)
    }

    .event-modal-feat i {
      font-size: 1.3rem;
      color: #F59E0B;
      display: block;
      margin-bottom: 6px
    }

    .event-modal-feat span {
      font-size: 0.72rem;
      color: rgba(255, 255, 255, 0.6);
      font-weight: 500;
      line-height: 1.3
    }

    .event-modal-cta {
      display: block;
      width: 100%;
      padding: 14px;
      border: none;
      border-radius: 14px;
      background: linear-gradient(135deg, #DC2626, #991B1B);
      color: white;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
      animation: eventGlow 2.5s ease-in-out infinite
    }

    .event-modal-cta:hover {
      transform: translateY(-2px);
      background: linear-gradient(135deg, #EF4444, #DC2626)
    }

    .event-modal-cta-login {
      background: linear-gradient(135deg, #F59E0B, #D97706)
    }

    .event-modal-cta-login:hover {
      background: linear-gradient(135deg, #FBBF24, #F59E0B)
    }

    .event-modal-close {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: rgba(255, 255, 255, 0.5);
      cursor: pointer;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      z-index: 2
    }

    .event-modal-close:hover {
      background: rgba(255, 255, 255, 0.15);
      color: white
    }

    .event-modal-timer {
      text-align: center;
      margin-bottom: 18px;
      padding: 12px;
      background: rgba(245, 158, 11, 0.1);
      border: 1px solid rgba(245, 158, 11, 0.15);
      border-radius: 12px
    }

    .event-modal-timer-label {
      font-size: 0.72rem;
      color: #F59E0B;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 6px
    }

    .event-modal-timer-val {
      font-size: 1.3rem;
      font-weight: 800;
      color: white;
      font-variant-numeric: tabular-nums
    }

    /* ===== EVENT 17 AGUSTUS - FLOATING BUTTON & BANNER ===== */
    @keyframes eventPulse {

      0%,
      100% {
        box-shadow: 0 4px 20px rgba(220, 38, 38, 0.4)
      }

      50% {
        box-shadow: 0 4px 30px rgba(220, 38, 38, 0.7), 0 0 60px rgba(220, 38, 38, 0.2)
      }
    }

    @keyframes eventBadgeBounce {

      0%,
      100% {
        transform: scale(1)
      }

      50% {
        transform: scale(1.15)
      }
    }

    @keyframes flagSway {

      0%,
      100% {
        transform: rotate(-3deg)
      }

      50% {
        transform: rotate(3deg)
      }
    }

    @keyframes eventSlideUp {
      from {
        transform: translateY(100px);
        opacity: 0
      }

      to {
        transform: translateY(0);
        opacity: 1
      }
    }

    @keyframes eventBannerIn {
      from {
        transform: translateY(-100%);
        opacity: 0
      }

      to {
        transform: translateY(0);
        opacity: 1
      }
    }

    /* =========================================================
       EVENT PORTAL BANNER (MENGGANTIKAN event-float-btn)
       ========================================================= */
    .event-portal-banner {
      position: fixed;
      bottom: 25px;
      right: 25px;
      z-index: 9999;
      animation: epbFloat 3s ease-in-out infinite, epbSlideIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      font-family: 'Inter', system-ui, sans-serif;
    }
    
    .epb-inner {
      background: linear-gradient(135deg, rgba(220,38,38,0.95), rgba(153,27,27,0.95));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.2);
      border-radius: 16px;
      padding: 12px 18px;
      display: flex;
      align-items: center;
      gap: 15px;
      box-shadow: 0 10px 25px rgba(220,38,38,0.4);
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .epb-inner:hover {
      transform: translateY(-4px) scale(1.02);
      box-shadow: 0 15px 35px rgba(220,38,38,0.6);
    }
    
    .epb-flag {
      font-size: 2rem;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    }
    
    .epb-text {
      color: white;
      display: flex;
      flex-direction: column;
    }
    
    .epb-title {
      font-weight: 800;
      font-size: 1.05rem;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
      line-height: 1.2;
    }
    
    .epb-sub {
      font-size: 0.75rem;
      opacity: 0.9;
      margin-top: 2px;
    }
    
    .epb-cta {
      background: rgba(255,255,255,0.2);
      color: white;
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
      transition: background 0.2s;
      margin-left: 5px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    
    .epb-inner:hover .epb-cta {
      background: rgba(255,255,255,0.3);
    }
    
    .epb-close {
      position: absolute;
      top: -10px;
      right: -10px;
      background: #111;
      color: white;
      border: 2px solid rgba(255,255,255,0.5);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      cursor: pointer;
      opacity: 0;
      transition: all 0.2s;
      z-index: 2;
    }
    
    .epb-inner:hover .epb-close {
      opacity: 1;
      top: -5px;
      right: -5px;
    }
    
    .epb-close:hover {
      background: #EF4444;
      border-color: white;
      transform: scale(1.1);
    }
    
    .epb-glow-line {
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
      animation: epbGlow 3s infinite;
      pointer-events: none;
    }
    
    @keyframes epbGlow {
      0% { left: -100%; }
      50% { left: 200%; }
      100% { left: 200%; }
    }
    
    @keyframes epbFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }
    
    @keyframes epbSlideIn {
      from { transform: translateX(150%); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    
    @media (max-width: 600px) {
      .event-portal-banner {
        bottom: 20px;
        right: 15px;
        left: 15px;
        animation: epbFloat 3s ease-in-out infinite, epbSlideInUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      }
      .epb-inner {
        padding: 10px 15px;
        justify-content: space-between;
      }
      .epb-cta {
        display: none;
      }
      .epb-close {
        opacity: 1;
        top: -8px;
        right: -8px;
        background: #222;
        border-color: rgba(255,255,255,0.3);
      }
      @keyframes epbSlideInUp {
        from { transform: translateY(150%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
    }

    .event-top-banner {
      display: none;
      background: linear-gradient(135deg, #DC2626, #991B1B);
      color: white;
      text-align: center;
      padding: 10px 20px;
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s;
      position: relative;
      animation: eventBannerIn 0.5s ease
    }

    .event-top-banner:hover {
      background: linear-gradient(135deg, #EF4444, #DC2626)
    }

    .event-top-banner.active {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px
    }

    .event-top-banner .event-banner-flag {
      animation: flagSway 1s ease-in-out infinite;
      display: inline-block
    }

    .event-top-banner .event-banner-close {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.2);
      border: none;
      color: white;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s
    }

    .event-top-banner .event-banner-close:hover {
      background: rgba(255, 255, 255, 0.4)
    }

    .nav-link.event-nav {
      color: #DC2626 !important;
      font-weight: 600 !important;
      position: relative
    }

    .nav-link.event-nav::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%);
      width: 20px;
      height: 3px;
      background: linear-gradient(90deg, #DC2626, #F59E0B);
      border-radius: 2px
    }

    .nav-link.event-nav:hover {
      background: rgba(220, 38, 38, 0.08) !important
    }

    body.dark-mode .event-top-banner {
      background: linear-gradient(135deg, #991B1B, #7F1D1D)
    }

    body.dark-mode .nav-link.event-nav {
      color: #EF4444 !important
    }

    @media (max-width: 768px) {
      .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 20px;
      }

      .profile-actions {
        justify-content: center;
      }

      .profile-stats {
        justify-content: center;
        gap: 15px;
      }

      .profile-stat-value {
        font-size: 1.4rem;
      }

      .profile-body {
        padding: 20px;
      }

      .profile-tabs {
        justify-content: center;
      }

      .profile-tab {
        padding: 10px 15px;
        font-size: 0.85rem;
      }
    }

    /* ===== LITDIGI HOME INTRO SECTION ===== */
    .home-intro-section {
      padding: 60px 20px;
      background: rgba(255, 255, 255, 0.9);
      margin-top: 40px;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }

    body.dark-mode .home-intro-section {
      background: rgba(30, 30, 30, 0.95);
    }

    .home-intro-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 40px;
      align-items: center;
    }

    .home-intro-text {
      flex: 1.2;
      /* [FIX OVERFLOW] Lihat catatan di .left-content: min-width tetap membuat
         elemen melebihi layar 320px. */
      min-width: min(300px, 100%);
    }

    .home-intro-title {
      font-size: 2.2rem;
      font-weight: 800;
      color: #333;
      margin-bottom: 20px;
      position: relative;
      display: inline-block;
    }

    .home-intro-title::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 60px;
      height: 4px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      border-radius: 2px;
    }

    .home-intro-desc {
      font-size: 1.05rem;
      color: #555;
      line-height: 1.7;
      margin-bottom: 25px;
    }

    body.dark-mode .home-intro-desc {
      color: #ccc;
    }

    .home-intro-visual {
      flex: 0.8;
      min-width: min(300px, 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 1000px;
    }

    /* Interactive 3D Magic Core */
    .magic-core-wrapper {
      width: 220px;
      height: 220px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: pointer;
    }

    .magic-core-wrapper:hover {
      transform: rotateY(25deg) rotateX(15deg) scale(1.05);
    }

    .magic-core-ring {
      position: absolute;
      inset: 0;
      border: 4px dashed rgba(35, 166, 213, 0.4);
      border-radius: 50%;
      animation: spinRing 20s linear infinite;
    }

    .magic-core-ring-2 {
      position: absolute;
      inset: 20px;
      border: 2px solid rgba(0, 225, 255, 0.3);
      border-radius: 50%;
      animation: spinRingReverse 15s linear infinite;
    }

    .magic-core-center {
      position: absolute;
      inset: 40px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 0 30px rgba(0, 225, 255, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.4);
      animation: floatCore 3s ease-in-out infinite;
      transition: all 0.3s;
    }

    .magic-core-center i {
      font-size: 2.8rem;
      margin-bottom: 8px;
      filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
    }

    .magic-core-center span {
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .magic-core-wrapper:hover .magic-core-center {
      background: linear-gradient(135deg, #00f2fe, #4facfe);
      box-shadow: 0 0 45px rgba(0, 225, 255, 0.8), inset 0 0 20px rgba(255, 255, 255, 0.6);
    }

    @keyframes spinRing {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes spinRingReverse {
      to {
        transform: rotate(-360deg);
      }
    }

    @keyframes floatCore {

      0%,
      100% {
        transform: translateY(0) scale(1);
      }

      50% {
        transform: translateY(-10px) scale(1.02);
      }
    }

    /* ===== HOME TEAM SECTION ===== */
    .home-team-section {
      padding: 60px 20px;
      background: rgba(255, 255, 255, 0.9);
      margin-top: 40px;
      border-radius: 20px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    body.dark-mode .home-team-section {
      background: rgba(30, 30, 30, 0.95);
    }

    .home-team-container {
      max-width: 1200px;
      margin: 0 auto;
      text-align: center;
    }

    .home-team-grid {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      margin: 35px 0 30px;
    }

    .home-team-card {
      width: 140px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: all 0.3s;
    }

    .home-team-card:hover {
      transform: translateY(-8px);
    }

    .home-team-avatar-wrap {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 3px solid #e8f4fd;
      overflow: hidden;
      margin-bottom: 12px;
      box-shadow: 0 5px 15px rgba(35, 166, 213, 0.15);
      transition: all 0.3s;
      position: relative;
    }

    body.dark-mode .home-team-avatar-wrap {
      border-color: #444;
    }

    .home-team-card:hover .home-team-avatar-wrap {
      border-color: #23a6d5;
      box-shadow: 0 8px 20px rgba(35, 166, 213, 0.3);
      transform: scale(1.05);
    }

    .home-team-avatar-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .home-team-name {
      font-size: 0.88rem;
      font-weight: 700;
      color: #333;
      text-align: center;
    }

    body.dark-mode .home-team-name {
      color: #fff;
    }

    .home-team-role {
      font-size: 0.75rem;
      color: #888;
      text-align: center;
      margin-top: 2px;
    }

    /* ===== FULL DETAILS PAGE SECTION ===== */
    .info-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
      margin-top: 30px;
    }

    .info-card {
      background: white;
      border-radius: 16px;
      padding: 30px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
      border: 1.5px solid #e8f4fd;
      transition: all 0.3s;
      position: relative;
      overflow: hidden;
      cursor: default;
    }

    body.dark-mode .info-card {
      background: #252525;
      border-color: #333;
    }

    .info-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #00e1ff, #23a6d5);
    }

    .info-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 30px rgba(35, 166, 213, 0.15);
    }

    .info-card-icon {
      font-size: 2rem;
      color: #23a6d5;
      margin-bottom: 18px;
      display: inline-block;
      animation: floatCore 3s ease-in-out infinite;
    }

    .info-card-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #333;
      margin-bottom: 12px;
    }

    body.dark-mode .info-card-title {
      color: #fff;
    }

    .info-card-text {
      font-size: 0.95rem;
      color: #666;
      line-height: 1.6;
    }

    body.dark-mode .info-card-text {
      color: #aaa;
    }

    /* ===== INTERACTIVE ARTI KATA ===== */
    .arti-kata-section {
      margin-top: 50px;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 20px;
      padding: 40px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
      text-align: center;
      transition: all 0.5s ease;
      border: 1px solid #e8f4fd;
      position: relative;
      overflow: hidden;
    }

    body.dark-mode .arti-kata-section {
      background: rgba(30, 30, 30, 0.9);
      border-color: #333;
    }

    .arti-kata-section.light-up {
      background: linear-gradient(135deg, #121824, #1a2336);
      border-color: rgba(0, 225, 255, 0.3);
      box-shadow: 0 0 50px rgba(0, 225, 255, 0.25);
      color: #fff;
    }

    .arti-kata-section.light-up .section-subtitle,
    .arti-kata-section.light-up h3 {
      color: #fff !important;
    }

    /* Glow Switch Button */
    .glow-switch-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 30px 0;
    }

    .glow-switch-btn {
      background: #f0f0f0;
      border: 2px solid #ddd;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      color: #888;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      position: relative;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    }

    body.dark-mode .glow-switch-btn {
      background: #222;
      border-color: #444;
      color: #555;
    }

    .glow-switch-btn::before {
      content: '';
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 2px solid transparent;
      transition: all 0.4s;
    }

    .glow-switch-btn:hover {
      color: #23a6d5;
      transform: scale(1.08);
    }

    .glow-switch-btn.active {
      background: #23a6d5;
      border-color: transparent;
      color: #fff;
      transform: scale(0.95);
      box-shadow: 0 0 30px rgba(35, 166, 213, 0.7);
    }

    .glow-switch-btn.active::before {
      border-color: #00e1ff;
      animation: pulseRing 1.5s ease-out infinite;
    }

    .glow-switch-btn i {
      transition: transform 0.4s;
    }

    .glow-switch-btn.active i {
      transform: rotate(180deg);
    }

    @keyframes pulseRing {
      0% {
        transform: scale(1);
        opacity: 1;
      }

      100% {
        transform: scale(1.3);
        opacity: 0;
      }
    }

    /* Word Split Visualizer */
    .word-split-visualizer {
      display: flex;
      justify-content: center;
      align-items: stretch;
      gap: 20px;
      margin-top: 40px;
      flex-wrap: wrap;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
      max-height: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .word-split-visualizer.show {
      opacity: 1;
      transform: translateY(0);
      max-height: 1200px;
      pointer-events: auto;
    }

    .word-card {
      flex: 1;
      min-width: 280px;
      background: white;
      border-radius: 16px;
      padding: 25px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
      border: 1.5px solid #eee;
      text-align: left;
      transition: all 0.3s;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    body.dark-mode .word-card {
      background: #2a2a2a;
      border-color: #444;
    }

    .arti-kata-section.light-up .word-card {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
      color: #e0e0e0;
    }

    .word-badge {
      align-self: flex-start;
      padding: 6px 16px;
      border-radius: 20px;
      font-weight: 800;
      font-size: 1rem;
      color: white;
      margin-bottom: 15px;
      letter-spacing: 1px;
    }

    .word-badge.lit {
      background: linear-gradient(135deg, #ff9800, #ff5722);
      box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
    }

    .word-badge.digi {
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      box-shadow: 0 4px 12px rgba(35, 166, 213, 0.3);
    }

    .word-title {
      font-size: 1.2rem;
      font-weight: 700;
      color: #333;
      margin-bottom: 10px;
    }

    .arti-kata-section.light-up .word-title {
      color: #fff;
    }

    .word-meaning {
      font-size: 0.92rem;
      color: #555;
      line-height: 1.6;
    }

    .arti-kata-section.light-up .word-meaning {
      color: #ccc;
    }

    .word-meaning strong {
      color: #23a6d5;
    }

    .arti-kata-section.light-up .word-meaning strong {
      color: #00e1ff;
    }

    .word-meaning-kbbi {
      font-style: italic;
      font-size: 0.85rem;
      border-left: 3px solid #23a6d5;
      padding-left: 10px;
      margin: 10px 0;
      color: #777;
    }

    .arti-kata-section.light-up .word-meaning-kbbi {
      color: #aaa;
      border-left-color: #00e1ff;
    }

    /* conclusion */
    .word-conclusion-container {
      width: 100%;
      margin-top: 30px;
      padding: 25px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(35, 166, 213, 0.08), rgba(0, 225, 255, 0.08));
      border: 1.5px dashed rgba(35, 166, 213, 0.3);
      opacity: 0;
      transform: scale(0.9);
      transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .word-conclusion-container.show {
      opacity: 1;
      transform: scale(1);
    }

    .arti-kata-section.light-up .word-conclusion-container {
      background: linear-gradient(135deg, rgba(0, 225, 255, 0.1), rgba(255, 152, 0, 0.1));
      border-color: rgba(0, 225, 255, 0.4);
    }

    .conclusion-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: #23a6d5;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .arti-kata-section.light-up .conclusion-title {
      color: #00e1ff;
      text-shadow: 0 0 10px rgba(0, 225, 255, 0.5);
    }

    .conclusion-text {
      font-size: 1.4rem;
      font-weight: 800;
      color: #ff9800;
      font-family: 'Poppins', sans-serif;
      letter-spacing: 0.5px;
      animation: textPulse 2s infinite ease-in-out;
    }

    .arti-kata-section.light-up .conclusion-text {
      color: #ffeb3b;
      text-shadow: 0 0 15px rgba(255, 235, 59, 0.6);
    }

    @keyframes textPulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.03);
      }
    }

    /* ===== TOUR GUIDE CUSTOM WIZARD ===== */
    .tour-overlay {
      position: fixed;
      inset: 0;
      background: radial-gradient(circle at 18% 16%, rgba(0, 225, 255, 0.12), transparent 28%), radial-gradient(circle at 82% 18%, rgba(255, 152, 0, 0.12), transparent 24%), rgba(0, 0, 0, 0.68);
      backdrop-filter: blur(5px);
      z-index: 99999;
      display: none;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s;
      will-change: clip-path;
    }

    .tour-overlay.active {
      display: flex;
      opacity: 1;
    }

    .tour-card {
      background: white;
      border-radius: 24px;
      padding: 35px;
      max-width: calc(100vw - 28px);
      width: min(460px, calc(100vw - 28px));
      max-height: min(82vh, 680px);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
      position: relative;
      overflow: hidden;
      transform: translateY(40px) scale(0.9);
      opacity: 0;
      border: 1px solid rgba(255, 255, 255, 0.38);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s, background-color 0.4s;
    }

    .tour-overlay.active .tour-card {
      transform: translateY(0) scale(1);
      opacity: 1;
    }

    body.dark-mode .tour-card {
      background: #1e1e1e;
      color: #e0e0e0;
      border-color: rgba(255, 255, 255, 0.08);
    }

    .tour-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: linear-gradient(90deg, #00e1ff, #23a6d5, #ff9800, #ff5722);
    }

    .tour-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.12) 18%, transparent 42%);
      transform: translateX(-130%);
      animation: shimmer 3.8s linear infinite;
      pointer-events: none;
    }

    .tour-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      gap: 12px;
    }

    .tour-step-badge {
      padding: 4px 12px;
      background: rgba(35, 166, 213, 0.1);
      color: #23a6d5;
      border-radius: 20px;
      font-weight: 700;
      font-size: 0.8rem;
      box-shadow: 0 0 0 0 rgba(35, 166, 213, 0.25);
      animation: tourBadgePulse 2s ease-in-out infinite;
    }

    body.dark-mode .tour-step-badge {
      background: rgba(0, 225, 255, 0.15);
      color: #00e1ff;
    }

    @keyframes tourBadgePulse {

      0%,
      100% {
        box-shadow: 0 0 0 0 rgba(35, 166, 213, 0.15);
      }

      50% {
        box-shadow: 0 0 0 10px rgba(35, 166, 213, 0);
      }
    }

    .tour-skip-btn {
      background: none;
      border: none;
      color: #aaa;
      cursor: pointer;
      font-family: 'Poppins', sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      transition: color 0.2s, transform 0.2s;
    }

    .tour-skip-btn:hover {
      color: #ff4757;
      transform: translateX(2px);
    }

    .tour-body {
      text-align: center;
      margin-bottom: 25px;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      isolation: isolate;
      scrollbar-width: thin;
      scrollbar-color: rgba(35, 166, 213, 0.85) rgba(255, 255, 255, 0.04);
    }

    .tour-body::-webkit-scrollbar {
      width: 8px;
    }

    .tour-body::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 999px;
    }

    .tour-body::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #00e1ff, #23a6d5);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.16);
    }

    .tour-body::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #2de8ff, #35b9ef);
    }

    body.dark-mode .tour-body {
      scrollbar-color: rgba(0, 225, 255, 0.9) rgba(255, 255, 255, 0.05);
    }

    body.dark-mode .tour-body::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.06);
    }

    body.dark-mode .tour-body::-webkit-scrollbar-thumb {
      border-color: rgba(255, 255, 255, 0.08);
    }

    .tour-step-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      position: relative;
      z-index: 1;
      transform-origin: center center;
      will-change: transform, opacity, filter;
    }

    .tour-step-content::before {
      content: '';
      position: absolute;
      top: 8px;
      left: 50%;
      width: 180px;
      height: 180px;
      transform: translateX(-50%);
      background: radial-gradient(circle, rgba(0, 225, 255, 0.14), transparent 68%);
      filter: blur(8px);
      z-index: -1;
      pointer-events: none;
      opacity: 0.9;
    }

    .tour-step-enter-next {
      animation: tourContentInNext 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .tour-step-enter-prev {
      animation: tourContentInPrev 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .tour-step-exit-next {
      animation: tourContentOutNext 0.3s cubic-bezier(0.4, 0, 1, 1) both;
    }

    .tour-step-exit-prev {
      animation: tourContentOutPrev 0.3s cubic-bezier(0.4, 0, 1, 1) both;
    }

    @keyframes tourContentInNext {
      from {
        opacity: 0;
        transform: translate3d(34px, 0, 0) scale(0.96);
        filter: blur(8px);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes tourContentInPrev {
      from {
        opacity: 0;
        transform: translate3d(-34px, 0, 0) scale(0.96);
        filter: blur(8px);
      }

      to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
      }
    }

    @keyframes tourContentOutNext {
      from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
      }

      to {
        opacity: 0;
        transform: translate3d(-24px, 0, 0) scale(0.97);
        filter: blur(6px);
      }
    }

    @keyframes tourContentOutPrev {
      from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
      }

      to {
        opacity: 0;
        transform: translate3d(24px, 0, 0) scale(0.97);
        filter: blur(6px);
      }
    }

    .tour-step-enter-next .tour-icon-wrap,
    .tour-step-enter-prev .tour-icon-wrap {
      animation: tourIconWrapMorphIn 0.62s cubic-bezier(0.34, 1.56, 0.64, 1) 0.04s both, floatCore 3s ease-in-out 0.76s infinite;
    }

    .tour-step-exit-next .tour-icon-wrap,
    .tour-step-exit-prev .tour-icon-wrap {
      animation: tourIconWrapMorphOut 0.28s cubic-bezier(0.4, 0, 1, 1) both;
    }

    .tour-step-enter-next .tour-step-icon,
    .tour-step-enter-prev .tour-step-icon {
      display: inline-block;
      animation: tourIconGlyphIn 0.56s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
    }

    .tour-step-exit-next .tour-step-icon,
    .tour-step-exit-prev .tour-step-icon {
      display: inline-block;
      animation: tourIconGlyphOut 0.28s cubic-bezier(0.4, 0, 1, 1) both;
    }

    .tour-step-enter-next .tour-title,
    .tour-step-enter-prev .tour-title {
      animation: tourTextPremiumIn 0.42s ease 0.12s both;
    }

    .tour-step-enter-next .tour-desc,
    .tour-step-enter-prev .tour-desc {
      animation: tourTextPremiumIn 0.42s ease 0.18s both;
    }

    .tour-step-enter-next .tour-step-note,
    .tour-step-enter-prev .tour-step-note {
      animation: tourTextPremiumIn 0.42s ease 0.24s both;
    }

    .tour-step-enter-next .tour-action-btn,
    .tour-step-enter-prev .tour-action-btn {
      animation: tourTextPremiumIn 0.42s ease 0.3s both;
    }

    @keyframes tourIconWrapMorphIn {
      from {
        opacity: 0;
        transform: scale(0.7) rotate(-16deg);
        border-radius: 34%;
        filter: blur(6px);
      }

      55% {
        opacity: 1;
        transform: scale(1.08) rotate(4deg);
        border-radius: 42%;
        filter: blur(0);
      }

      to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        border-radius: 50%;
        filter: blur(0);
      }
    }

    @keyframes tourIconWrapMorphOut {
      from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        border-radius: 50%;
      }

      to {
        opacity: 0;
        transform: scale(0.76) rotate(14deg);
        border-radius: 34%;
        filter: blur(4px);
      }
    }

    @keyframes tourIconGlyphIn {
      from {
        opacity: 0;
        transform: scale(0.35) rotate(110deg);
        filter: blur(8px);
      }

      65% {
        opacity: 1;
        transform: scale(1.08) rotate(-8deg);
        filter: blur(0);
      }

      to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
      }
    }

    @keyframes tourIconGlyphOut {
      from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        filter: blur(0);
      }

      to {
        opacity: 0;
        transform: scale(0.32) rotate(-95deg);
        filter: blur(8px);
      }
    }

    @keyframes tourTextPremiumIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .tour-icon-wrap {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(0, 225, 255, 0.1), rgba(35, 166, 213, 0.15));
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      font-size: 2.2rem;
      color: #23a6d5;
      box-shadow: 0 10px 20px rgba(35, 166, 213, 0.08);
      animation: floatCore 3s ease-in-out infinite;
      position: relative;
    }

    .tour-icon-wrap::after {
      content: '';
      position: absolute;
      inset: -8px;
      border-radius: 50%;
      border: 1px solid rgba(35, 166, 213, 0.22);
      animation: pulseRing 2.2s ease-out infinite;
    }

    body.dark-mode .tour-icon-wrap {
      background: linear-gradient(135deg, rgba(0, 225, 255, 0.15), rgba(35, 166, 213, 0.2));
      color: #00e1ff;
    }

    .tour-title {
      font-size: 1.4rem;
      font-weight: 800;
      color: #333;
      margin-bottom: 12px;
    }

    body.dark-mode .tour-title {
      color: #fff;
    }

    .tour-desc {
      font-size: 0.92rem;
      color: #666;
      line-height: 1.6;
      padding: 0 10px;
    }

    body.dark-mode .tour-desc {
      color: #ccc;
    }

    .tour-step-note {
      margin-top: 14px;
      padding: 10px 14px;
      border-radius: 14px;
      font-size: 0.78rem;
      color: #4b6572;
      background: linear-gradient(135deg, rgba(0, 225, 255, 0.08), rgba(35, 166, 213, 0.05));
      border: 1px dashed rgba(35, 166, 213, 0.2);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    body.dark-mode .tour-step-note {
      color: #9ccfe0;
      background: rgba(0, 225, 255, 0.08);
      border-color: rgba(0, 225, 255, 0.16);
    }

    .tour-header,
    .tour-body,
    .tour-footer {
      position: relative;
      z-index: 2;
    }

    .tour-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .tour-bullets {
      display: flex;
      gap: 6px;
    }

    .tour-bullet {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #e0e0e0;
      cursor: pointer;
      transition: transform 0.25s, width 0.25s, background-color 0.25s, box-shadow 0.25s;
    }

    .tour-bullet:hover {
      transform: scale(1.15);
    }

    body.dark-mode .tour-bullet {
      background: #444;
    }

    .tour-bullet.active {
      width: 20px;
      border-radius: 5px;
      background: #23a6d5;
      box-shadow: 0 0 12px rgba(35, 166, 213, 0.35);
      animation: tourBulletPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    body.dark-mode .tour-bullet.active {
      background: #00e1ff;
    }

    @keyframes tourBulletPop {
      0% {
        transform: scale(0.75);
      }

      65% {
        transform: scale(1.16);
      }

      100% {
        transform: scale(1);
      }
    }

    .tour-nav-btns {
      display: flex;
      gap: 10px;
    }

    .tour-nav-btns .btn,
    .tour-action-btn {
      transition: transform 0.25s, box-shadow 0.25s, filter 0.25s, background-color 0.25s;
      position: relative;
      overflow: hidden;
    }

    .tour-nav-btns .btn::before,
    .tour-action-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 18%, rgba(255, 255, 255, 0.26) 42%, transparent 72%);
      transform: translateX(-145%);
      transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .tour-nav-btns .btn:hover:not(:disabled),
    .tour-action-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(35, 166, 213, 0.2);
      filter: saturate(1.06);
    }

    .tour-nav-btns .btn:hover:not(:disabled)::before,
    .tour-action-btn:hover::before {
      transform: translateX(145%);
    }

    .tour-nav-btns .btn:active:not(:disabled),
    .tour-action-btn:active {
      transform: scale(0.975) !important;
    }

    .tour-action-btn {
      margin-top: 15px;
      font-size: 0.85rem;
      padding: 10px 18px;
      border-radius: 20px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      align-self: center;
    }

    .tour-pointer {
      position: fixed;
      width: 18px;
      height: 18px;
      border-radius: 6px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      border: 2px solid rgba(255, 255, 255, 0.85);
      box-shadow: 0 0 18px rgba(0, 225, 255, 0.45);
      transform: translate(-50%, -50%) rotate(45deg) scale(0.8);
      opacity: 0;
      pointer-events: none;
      z-index: 100000;
      transition: opacity 0.2s, transform 0.2s, background 0.3s;
    }

    .tour-pointer.active {
      opacity: 1;
      animation: tourPointerPulse 1.4s ease-in-out infinite;
    }

    .tour-pointer::after {
      content: '';
      position: absolute;
      inset: -8px;
      border: 1px solid rgba(0, 225, 255, 0.22);
      border-radius: 10px;
    }

    body.dark-mode .tour-pointer {
      border-color: rgba(255, 255, 255, 0.2);
    }

    @keyframes tourPointerPulse {

      0%,
      100% {
        transform: translate(-50%, -50%) rotate(45deg) scale(0.85);
      }

      50% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1.05);
      }
    }

    @media (max-width: 768px) {

      /* ===== PERBAIKAN TOUR GUIDE MOBILE ===== */

      .tour-overlay {
        align-items: center;
        justify-content: center;
        padding: 12px;
      }

      .tour-card {
        width: min(400px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        max-height: 60vh;
        /* Dibatasi agar tidak kepanjangan dan nabrak elemen */
        padding: 16px 14px;
        border-radius: 16px;
        display: flex;
        flex-direction: column;
      }

      .tour-header {
        margin-bottom: 10px;
      }

      .tour-step-badge {
        font-size: 0.7rem;
        padding: 4px 10px;
      }

      .tour-skip-btn {
        font-size: 0.75rem;
      }

      .tour-body {
        min-height: 0;
        margin-bottom: 12px;
        overflow-y: auto;
        /* Bisa di-scroll kalau konten penjelasan panjang */
        flex: 1;
        /* Fleksibel menyesuaikan ruang sisa */
      }

      .tour-icon-wrap {
        width: 48px;
        height: 48px;
        font-size: 1.3rem;
        margin-bottom: 10px;
      }

      .tour-title {
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: 6px;
      }

      .tour-desc {
        font-size: 0.8rem;
        padding: 0;
        line-height: 1.4;
      }

      .tour-step-note {
        margin-top: 10px;
        font-size: 0.7rem;
        padding: 6px 8px;
        width: 100%;
        justify-content: center;
      }

      .tour-action-btn {
        width: 100%;
        margin-top: 10px;
        /* [FIX TARGET SENTUH] 38px -> 44px sesuai anjuran Apple HIG / Material */
        min-height: 44px;
        font-size: 0.8rem;
        padding: 8px;
      }

      .tour-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: auto;
      }

      .tour-bullets {
        justify-content: center;
        margin-bottom: 4px;
      }

      .tour-nav-btns {
        width: 100%;
        justify-content: space-between;
        gap: 8px;
      }

      .tour-nav-btns .btn {
        flex: 1;
        min-height: 44px;
        justify-content: center;
        font-size: 0.8rem;
        padding: 6px;
      }

      .tour-pointer {
        width: 12px;
        height: 12px;
      }

    }

    /* Floating Help Button */
    @keyframes tourHelpPulse {

      0%,
      100% {
        box-shadow: 0 4px 15px rgba(35, 166, 213, 0.3), 0 0 0 0 rgba(0, 225, 255, 0.18);
      }

      50% {
        box-shadow: 0 10px 25px rgba(35, 166, 213, 0.45), 0 0 0 14px rgba(0, 225, 255, 0);
      }
    }

    .help-float-btn {
      position: fixed;
      bottom: 25px;
      right: 25px;
      z-index: 1500;
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: white;
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 1.25rem;
      cursor: pointer;
      box-shadow: 0 4px 15px rgba(35, 166, 213, 0.3);
      transition: transform 0.3s, box-shadow 0.3s, filter 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Poppins', sans-serif;
      animation: tourHelpPulse 2.3s ease-in-out infinite;
      overflow: hidden;
    }

    .help-float-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.28), transparent);
      transform: translateX(-150%);
      animation: shimmer 3.5s linear infinite;
    }

    .help-float-btn:hover {
      transform: scale(1.1) rotate(15deg);
      box-shadow: 0 6px 20px rgba(35, 166, 213, 0.5);
      filter: saturate(1.08);
    }

    /* ===== INTERACTIVE LOGO SYSTEM ===== */
    .logo-interactive-container {
      position: relative;
      width: 130px;
      height: 130px;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform-style: preserve-3d;
      perspective: 1000px;
    }

    .interactive-logo-img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      z-index: 5;
      cursor: pointer;
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      animation: floatLogo 4s ease-in-out infinite;
    }

    .interactive-logo-img:hover {
      transform: scale(1.15) rotate(8deg);
      filter: drop-shadow(0 0 20px rgba(0, 225, 255, 0.8));
    }

    .interactive-logo-img:active {
      transform: scale(0.92) rotate(-5deg);
    }

    .logo-glow-ring {
      position: absolute;
      width: 120px;
      height: 120px;
      border: 2.5px solid rgba(0, 225, 255, 0.3);
      border-radius: 50%;
      animation: spinRing 25s linear infinite;
      box-shadow: 0 0 15px rgba(0, 225, 255, 0.15);
      pointer-events: none;
    }

    .logo-glow-ring::before {
      content: '';
      position: absolute;
      top: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 8px;
      height: 8px;
      background: #00e1ff;
      border-radius: 50%;
      box-shadow: 0 0 10px #00e1ff;
    }

    .logo-particle {
      position: absolute;
      pointer-events: none;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      z-index: 10;
      animation: burstParticle 1s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
    }

    @keyframes floatLogo {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(-8px) rotate(3deg);
      }
    }

    @keyframes burstParticle {
      0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
      }

      100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
      }
    }

    /* Logo in Magic Core on Home Page - Adjusted colors for high visibility */
    .magic-core-logo {
      width: 70px;
      height: 70px;
      object-fit: contain;
      cursor: pointer;
      animation: floatLogo 3s ease-in-out infinite;
      z-index: 5;
      transition: all 0.4s ease;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 50%;
      padding: 8px;
      box-shadow: 0 4px 15px rgba(0, 225, 255, 0.4);
      border: 2px solid #00e1ff;
    }

    .magic-core-wrapper:hover .magic-core-logo {
      transform: scale(1.08) rotate(8deg);
      box-shadow: 0 0 20px rgba(0, 225, 255, 0.7);
    }

    /* ===== 3D REVEAL TEAM CARDS ===== */

    /* Memodifikasi ukuran kartu flip di Beranda agar proporsinya pas untuk foto */
    .team-reveal-grid .flip-card {
      width: 170px;
      height: 240px; /* Dipertinggi sedikit agar foto terlihat jelas */
    }

    /* Menghilangkan padding default dari back card agar gambar bisa memenuhi kartu */
    .team-reveal-grid .flip-card-back {
      padding: 0;
      border: none;
      overflow: hidden;
      background: transparent;
      box-shadow: none;
    }

    /* Efek Wrapper Dinamis untuk Gambar yang Terungkap (Adaptasi dari menu Tim) */
    .flip-card-dynamic {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 16px;
      padding: 4px;
      background: linear-gradient(135deg, #00e1ff, #23a6d5, #ff9800, #ff5722);
      background-size: 300% 300%;
      animation: borderFlow 6s linear infinite; /* Meminjam animasi yang sudah ada */
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
    }

    .flip-card-dynamic img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 12px;
      z-index: 1;
      transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Efek Zoom foto saat di-hover HANYA setelah kartu terbuka */
    .flip-card.revealed:hover .flip-card-dynamic img {
      transform: scale(1.12);
    }

    /* Efek kilauan cahaya (shimmer) melintas saat kartu di-hover */
    .flip-card-dynamic::after {
      content: '';
      position: absolute;
      top: -100%;
      left: -60%;
      width: 50%;
      height: 300%;
      background: rgba(255, 255, 255, 0.3);
      transform: rotate(25deg);
      transition: 0.8s;
      z-index: 2;
      pointer-events: none;
    }

    .flip-card.revealed:hover .flip-card-dynamic::after {
      left: 130%;
    }

    /* Area Teks Nama & Peran di bagian bawah foto */
    .flip-card-info {
      position: relative;
      z-index: 3;
      background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
      width: calc(100% + 8px);
      margin-left: -4px;
      margin-bottom: -4px;
      padding: 25px 10px 15px;
      border-radius: 0 0 16px 16px;
      text-align: center;
    }

    .flip-card-dynamic-name {
      font-size: 0.95rem;
      font-weight: 800;
      color: white;
      margin-bottom: 3px;
      text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    }

    .flip-card-dynamic-role {
      font-size: 0.75rem;
      color: #00e1ff;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .team-reveal-grid {
      display: flex;
      justify-content: center;
      gap: 20px;
      flex-wrap: wrap;
      margin: 35px 0 30px;
    }

    .flip-card {
      background-color: transparent;
      width: 145px;
      height: 185px;
      perspective: 1000px;
      cursor: pointer;
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      transform-style: preserve-3d;
    }

    .flip-card.revealed .flip-card-inner {
      transform: rotateY(180deg);
    }

    .flip-card-front,
    .flip-card-back {
      position: absolute;
      width: 100%;
      height: 100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      border-radius: 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px;
    }

    /* Front Card (Mystery placeholder) */
    .flip-card-front {
      background: linear-gradient(135deg, #252525, #1e1e1e);
      border: 2.5px dashed rgba(35, 166, 213, 0.5);
      color: #fff;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    body.dark-mode .flip-card-front {
      background: linear-gradient(135deg, #181818, #121212);
      border-color: rgba(0, 225, 255, 0.25);
    }

    .flip-card-front i {
      font-size: 2.2rem;
      color: #00e1ff;
      margin-bottom: 10px;
      animation: floatCore 2.5s ease-in-out infinite;
      text-shadow: 0 0 10px rgba(0, 225, 255, 0.4);
    }

    .flip-card-front span {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #aaa;
      text-transform: uppercase;
      text-align: center;
    }

    .flip-card-front .reveal-hint {
      font-size: 0.55rem;
      color: #666;
      margin-top: 6px;
      font-weight: 500;
    }

    body.dark-mode .flip-card-front .reveal-hint {
      color: #888;
    }

    /* Back Card (Real profile) */
    .flip-card-back {
      background: white;
      border: 2px solid #e8f4fd;
      transform: rotateY(180deg);
      box-shadow: 0 5px 15px rgba(35, 166, 213, 0.1);
    }

    body.dark-mode .flip-card-back {
      background: #252525;
      border-color: #333;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    }

    .flip-card-avatar {
      width: 75px;
      height: 75px;
      border-radius: 50%;
      border: 2.5px solid #23a6d5;
      overflow: hidden;
      margin-bottom: 8px;
      box-shadow: 0 3px 10px rgba(35, 166, 213, 0.15);
    }

    .flip-card-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .flip-card-name {
      font-size: 0.8rem;
      font-weight: 700;
      color: #333;
    }

    body.dark-mode .flip-card-name {
      color: #fff;
    }

    .flip-card-role {
      font-size: 0.7rem;
      color: #888;
      margin-top: 2px;
    }

    /* ===== MOBILE RESPONSIVE OVERRIDES FOR NEW SECTIONS ===== */
    @media (max-width: 768px) {
      .info-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 20px !important;
      }

      .info-card {
        padding: 20px !important;
      }

      .arti-kata-section {
        padding: 25px 15px !important;
        margin-top: 35px !important;
      }

      .word-split-visualizer {
        flex-direction: column !important;
        gap: 15px !important;
        margin-top: 25px !important;
      }

      .word-card {
        min-width: 100% !important;
        padding: 15px !important;
      }

      .word-title {
        font-size: 1.05rem !important;
      }

      .word-meaning {
        font-size: 0.85rem !important;
      }

      .word-meaning-kbbi {
        font-size: 0.8rem !important;
      }

      .conclusion-text {
        font-size: 1.15rem !important;
      }

      .glow-switch-btn {
        width: 70px !important;
        height: 70px !important;
        font-size: 1.7rem !important;
      }

      .home-intro-container {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
      }

      .home-intro-title {
        font-size: 1.8rem !important;
      }

      .home-intro-title::after {
        left: 50% !important;
        transform: translateX(-50%) !important;
      }

      .home-intro-desc {
        font-size: 0.95rem !important;
        text-align: justify !important;
      }

      .magic-core-wrapper {
        width: 180px !important;
        height: 180px !important;
      }

      .magic-core-center {
        inset: 30px !important;
      }

      .magic-core-logo {
        width: 60px !important;
        height: 60px !important;
      }

      .team-reveal-grid {
        gap: 15px !important;
      }

      .flip-card {
        width: 130px !important;
        height: 170px !important;
      }

      .flip-card-avatar {
        width: 65px !important;
        height: 65px !important;
      }

      .flip-card-name {
        font-size: 0.75rem !important;
      }
    }

    @keyframes slideUpFade {
      0% {
        opacity: 0;
        transform: translateY(30px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }


    /* ===== ADMIN PANEL PRO: dynamic & theme-aware enhancements ===== */
    .admin-container {
      position: relative;
      isolation: isolate;
      border: 1px solid rgba(255, 255, 255, .12);
      backdrop-filter: blur(18px);
    }

    .admin-container::before {
      content: '';
      position: absolute;
      inset: -120px -80px auto auto;
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, rgba(35, 166, 213, .22), transparent 65%);
      pointer-events: none;
      z-index: -1;
      animation: adminGlowFloat 7s ease-in-out infinite alternate;
    }

    .admin-header {
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 10% 20%, rgba(255, 152, 0, .24), transparent 18%),
        radial-gradient(circle at 88% 18%, rgba(35, 166, 213, .22), transparent 22%),
        linear-gradient(135deg, #15172e, #16213e 55%, #101b32);
    }

    .admin-header::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.08) 45%, transparent 62%);
      transform: translateX(-120%);
      animation: adminHeaderShine 5.5s ease-in-out infinite;
      pointer-events: none;
    }

    .admin-badge {
      box-shadow: 0 8px 22px rgba(255, 112, 67, .28);
      animation: adminBadgePulse 2.2s ease-in-out infinite;
    }

    .admin-tabs {
      display: flex;
      gap: 6px;
      padding: 0 18px;
      background: #f8f9fa;
      border-bottom: 2px solid #eee;
      flex-wrap: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
      scrollbar-width: thin;
    }

    .admin-tab {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 14px 14px 0 0;
      overflow: hidden;
      transform: translateZ(0);
    }

    .admin-tab i {
      transition: transform .25s ease, color .25s ease;
    }

    .admin-tab:hover {
      transform: translateY(-2px);
    }

    .admin-tab:hover i,
    .admin-tab.active i {
      transform: scale(1.12) rotate(-6deg);
    }

    .admin-tab.active::after {
      content: '';
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: -1px;
      height: 3px;
      border-radius: 999px;
      background: linear-gradient(90deg, #ff5722, #ff9800, #23a6d5);
      box-shadow: 0 0 18px rgba(255, 87, 34, .55);
      animation: adminActiveBar 1.8s ease-in-out infinite alternate;
    }

    .admin-body {
      background:
        radial-gradient(circle at 3% 0%, rgba(35,166,213,.08), transparent 22%),
        radial-gradient(circle at 95% 100%, rgba(255,87,34,.07), transparent 26%);
    }

    .admin-stat-box {
      position: relative;
      overflow: hidden;
      transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    }

    .admin-stat-box::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,.14), transparent 38%);
      opacity: .7;
      pointer-events: none;
    }

    .admin-stat-box::after {
      content: attr(data-icon);
      position: absolute;
      right: 16px;
      top: 10px;
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      font-size: 2.25rem;
      opacity: .07;
      color: var(--accent, #23a6d5);
      pointer-events: none;
    }

    .admin-stat-box:hover {
      transform: translateY(-5px) scale(1.01);
      border-color: color-mix(in srgb, var(--accent, #23a6d5) 45%, transparent);
      box-shadow: 0 18px 35px rgba(0, 0, 0, .14);
    }

    .admin-stat-num {
      background: linear-gradient(135deg, var(--accent, #23a6d5), #ff9800);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent !important;
    }

    .admin-table-wrap,
    .admin-comment-box,
    .exp-settings-card,
    .sim-card {
      animation: adminPanelIn .36s ease both;
    }

    .sim-card {
      position: relative;
      overflow: hidden;
    }

    .sim-card::before {
      content: '';
      position: absolute;
      inset: -80px -80px auto auto;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(35,166,213,.22), transparent 68%);
      pointer-events: none;
    }

    .sim-metric-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
      gap: 10px;
      margin: 12px 0 14px;
    }

    .sim-metric {
      padding: 11px 13px;
      border-radius: 16px;
      background: rgba(35,166,213,.10);
      border: 1px solid rgba(35,166,213,.12);
      color: var(--text-color, inherit);
      transition: transform .22s ease, border-color .22s ease;
    }

    .sim-metric:hover {
      transform: translateY(-3px);
      border-color: rgba(35,166,213,.38);
    }

    .sim-metric span {
      display: block;
      font-size: .72rem;
      opacity: .72;
      margin-bottom: 2px;
    }

    .sim-mode-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 4px 0 16px;
    }

    .sim-mode-btn {
      border: 1px solid rgba(127,127,127,.22);
      background: rgba(127,127,127,.08);
      color: var(--text-color, inherit);
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 700;
      font-family: 'Poppins', sans-serif;
      font-size: .78rem;
      cursor: pointer;
      transition: all .22s ease;
    }

    .sim-mode-btn:hover,
    .sim-mode-btn.active {
      background: linear-gradient(135deg, #00e1ff, #23a6d5);
      color: #fff;
      border-color: transparent;
      transform: translateY(-2px);
      box-shadow: 0 10px 22px rgba(35,166,213,.25);
    }

    .sim-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(76,175,80,.12);
      color: #4caf50;
      font-size: .78rem;
      font-weight: 800;
    }

    .sim-status-pill.running {
      color: #23a6d5;
      background: rgba(35,166,213,.13);
    }

    .sim-status-pill.running i {
      animation: spin 1s linear infinite;
    }

    .sim-log {
      margin-top: 16px;
      max-height: 170px;
      overflow: auto;
      border-radius: 16px;
      padding: 12px;
      background: rgba(10, 15, 25, .88);
      color: #d6f7ff;
      font-family: 'Courier New', monospace;
      font-size: .78rem;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }

    .sim-log-line {
      display: flex;
      gap: 8px;
      align-items: baseline;
      padding: 3px 0;
      opacity: .92;
    }

    .sim-log-time {
      color: #6ee7ff;
      opacity: .8;
      white-space: nowrap;
    }

    .sim-log-ok { color: #7dff9b; }
    .sim-log-warn { color: #ffd36e; }
    .sim-log-err { color: #ff8a8a; }

    #simProgressBar {
      position: relative;
      overflow: hidden;
    }

    #simProgressBar::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
      transform: translateX(-100%);
      animation: simProgressShine 1.4s linear infinite;
    }

    body.dark-mode .admin-container {
      background: rgba(25, 25, 25, .92);
      border-color: rgba(255,255,255,.08);
      box-shadow: 0 28px 60px rgba(0, 0, 0, .38);
    }

    body.dark-mode .admin-body {
      background:
        radial-gradient(circle at 4% 0%, rgba(35,166,213,.09), transparent 24%),
        radial-gradient(circle at 94% 100%, rgba(255,87,34,.08), transparent 26%),
        #202020;
    }

    body.dark-mode .sim-card {
      background: linear-gradient(135deg, rgba(33, 38, 52, .96), rgba(24, 24, 26, .96)) !important;
      border-color: rgba(35,166,213,.24) !important;
      color: #f5f7fb;
      box-shadow: 0 18px 42px rgba(0,0,0,.36) !important;
    }

    body.dark-mode .sim-card p,
    body.dark-mode .sim-metric span,
    body.dark-mode .admin-stat-label {
      color: rgba(245,247,251,.68) !important;
    }

    body.dark-mode .sim-metric {
      background: rgba(255,255,255,.055);
      border-color: rgba(255,255,255,.08);
    }

    body.dark-mode .sim-mode-btn {
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.09);
      color: #f3f3f3;
    }

    @keyframes adminHeaderShine {
      0%, 55% { transform: translateX(-120%); }
      78%, 100% { transform: translateX(120%); }
    }

    @keyframes adminGlowFloat {
      from { transform: translate3d(0,0,0) scale(1); opacity: .75; }
      to { transform: translate3d(-35px,28px,0) scale(1.12); opacity: 1; }
    }

    @keyframes adminBadgePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.045); }
    }

    @keyframes adminActiveBar {
      from { filter: hue-rotate(0deg); opacity: .75; }
      to { filter: hue-rotate(22deg); opacity: 1; }
    }

    @keyframes adminPanelIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes simProgressShine {
      to { transform: translateX(100%); }
    }

    @media (prefers-reduced-motion: reduce) {
      .admin-container::before,
      .admin-header::after,
      .admin-badge,
      .admin-tab.active::after,
      #simProgressBar::after {
        animation: none !important;
      }
      .admin-stat-box,
      .admin-tab,
      .sim-mode-btn,
      .sim-metric {
        transition: none !important;
      }
    }



    /* FITUR 1: BORDER ANIMASI */
    .avatar-wrapper { position: relative; display: inline-block; padding: 5px; border-radius: 50%; line-height: 0; vertical-align: middle; }
    .avatar-wrapper > img,
    .avatar-wrapper > video { display: block; }
    .user-avatar.border-glow,
    .profile-avatar-large.border-glow,
    .comment-avatar.border-glow,
    .mobile-profile-item img.border-glow,
    .mobile-profile-item video.border-glow { box-shadow: 0 0 15px #00e1ff; border: 2px solid #00e1ff; animation: glow-ani 1.5s infinite alternate; }
    .user-avatar.border-rainbow,
    .profile-avatar-large.border-rainbow,
    .comment-avatar.border-rainbow,
    .mobile-profile-item img.border-rainbow,
    .mobile-profile-item video.border-rainbow { border: 3px solid transparent; background: linear-gradient(white, white) padding-box, linear-gradient(90deg, #ff0000, #ffeb3b, #00ff08, #00e1ff, #d400ff) border-box; background-size: 200% auto; animation: rain-ani 3s linear infinite; }
    .user-avatar.border-pulse,
    .profile-avatar-large.border-pulse,
    .comment-avatar.border-pulse,
    .mobile-profile-item img.border-pulse,
    .mobile-profile-item video.border-pulse { border: 2px solid #23a6d5; animation: pulse-ani 2s infinite; }
    .border-glow { box-shadow: 0 0 15px #00e1ff; border: 2px solid #00e1ff !important; animation: glow-ani 1.5s infinite alternate; }
    .border-rainbow { border: 3px solid transparent !important; background: linear-gradient(white, white) padding-box, linear-gradient(90deg, #ff0000, #ffeb3b, #00ff08, #00e1ff, #d400ff) border-box; background-size: 200% auto; animation: rain-ani 3s linear infinite; }
    .border-pulse { border: 2px solid #23a6d5 !important; animation: pulse-ani 2s infinite; }

    @keyframes glow-ani { from { filter: brightness(1) drop-shadow(0 0 2px #00e1ff); } to { filter: brightness(1.3) drop-shadow(0 0 10px #00e1ff); } }
    @keyframes rain-ani { to { background-position: 200% center; } }
    @keyframes pulse-ani { 0% { box-shadow: 0 0 0 0 rgba(35, 166, 213, 0.7); } 70% { box-shadow: 0 0 0 12px rgba(35, 166, 213, 0); } 100% { box-shadow: 0 0 0 0 rgba(35, 166, 213, 0); } }

    /* FITUR 2: ANIMASI NAMA ADMIN (Gray to Black) */
    .admin-badge-anim { font-weight: 900 !important; background: linear-gradient(90deg, #888, #000, #444, #888); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
    .admin-anim-lr { animation: move-lr 4s linear infinite; }
    .admin-anim-rl { animation: move-rl 4s linear infinite; }
    .admin-anim-center { animation: move-center 5s ease-in-out infinite; }
    .admin-anim-random { animation: move-random 6s steps(4) infinite; }

    @keyframes move-lr { to { background-position: 200% center; } }
    @keyframes move-rl { to { background-position: -200% center; } }
    @keyframes move-center { 0%, 100% { background-position: 0% center; } 50% { background-position: 150% center; } }
    @keyframes move-random { 0% { opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } 100% { filter: hue-rotate(360deg); } }

    /* UI Mission & Border Select */
    .mission-card { background: #f8f9fa; border: 1px solid #eee; border-radius: 15px; padding: 15px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
    .mission-card small { display: block; color: #888; margin-top: 4px; }
    .border-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 12px; margin-top: 20px; }
    .border-item { cursor: pointer; text-align: center; border: 2px solid transparent; border-radius: 12px; padding: 8px; transition: 0.3s; }

    /* ============================================================
       KOLEKSI & SHOWCASE (bergaya badge Discord)
       .collection-shelf  -> wadah koleksi (border sekarang, achievement nanti)
       .collection-tile   -> 1 item koleksi; .active = sedang dipajang/dipakai
       .collection-tile.locked -> item belum dimiliki (dipakai achievement nanti)
       ============================================================ */
    .collection-shelf { display: flex; flex-wrap: wrap; gap: 10px; }
    .collection-tile {
      width: 86px;
      padding: 10px 6px 8px;
      text-align: center;
      cursor: pointer;
      background: var(--bg-color, #f8f9fa);
      border: 2px solid var(--border-color, #eee);
      border-radius: 12px;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
      user-select: none;
    }
    .collection-tile:hover { transform: translateY(-2px); border-color: #23a6d5; }
    .collection-tile.active {
      border-color: #23a6d5;
      background: rgba(35, 166, 213, 0.08);
      box-shadow: 0 2px 12px rgba(35, 166, 213, 0.25);
    }
    .collection-tile small {
      display: block;
      font-size: 0.68rem;
      color: var(--text-color, #666);
      margin-top: 6px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .collection-tile.locked { opacity: 0.5; filter: grayscale(1); cursor: default; }
    .collection-tile.locked:hover { transform: none; border-color: var(--border-color, #eee); }
    body.dark-mode .collection-tile { background: #252525; border-color: #333; }
    body.dark-mode .collection-tile.active { background: rgba(35, 166, 213, 0.18); }
    body.dark-mode .collection-tile small { color: #ccc; }
    .border-item.active { border-color: #23a6d5; background: rgba(35, 166, 213, 0.08); }
    body.dark-mode .mission-card { background: #252525; border-color: #333; }
    body.dark-mode .border-item.active { background: rgba(35, 166, 213, 0.18); }



    /* Admin mobile access: form di tab admin tetap usable di HP tanpa mengubah UI halaman lain */
    @media (max-width: 768px) {
      #adminContent .exp-settings-card > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
      }
      #adminContent .exp-settings-card .btn {
        width: 100%;
        justify-content: center;
      }
    }

  /* EXTENDED NUSANTARA JAYA 81 THEME - UNIQUE NAVBAR & ELEMENTS */
body.theme-merdeka2026 header {
  background: linear-gradient(105deg, #d80000 0%, #d80000 22%, #ffffff 22.1%, #ffffff 100%) !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4) !important;
  border-bottom: 4px solid #ffcc00 !important;
  position: relative;
}

body.theme-merdeka2026 .header-left .header-brand {
  color: #fff !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

body.theme-merdeka2026 .header-nav .nav-link {
  color: #444 !important;
  font-weight: 700;
  border-radius: 20px;
  padding: 6px 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

body.theme-merdeka2026 .header-nav .nav-link i {
  color: #d80000 !important;
}

body.theme-merdeka2026 .header-nav .nav-link:hover {
  background: #fff0f0 !important;
  color: #d80000 !important;
  border: 1px solid #ffcccc;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.15);
}

body.theme-merdeka2026 .user-dropdown-menu {
  background: #ffffff !important;
  border: 2px solid #d80000 !important;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.25) !important;
  overflow: hidden;
}

body.theme-merdeka2026 .user-dropdown-menu a {
  color: #333 !important;
  font-weight: 600;
  transition: all 0.2s;
}

body.theme-merdeka2026 .user-dropdown-menu a:hover {
  background: linear-gradient(90deg, #fff0f0, #ffffff) !important;
  color: #d80000 !important;
  padding-left: 20px;
}

/* Bamboo pattern background and flag ribbon */
body.theme-merdeka2026::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 20px, transparent 20px, transparent 40px), 
                    repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 20px, transparent 20px, transparent 40px);
  pointer-events: none;
  z-index: -1;
}

body.theme-merdeka2026::after {
  content: '???? MERDEKA!';
  position: fixed;
  bottom: 30px;
  right: 30px;
  font-size: 1.5rem;
  font-weight: 900;
  color: #d80000;
  text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  z-index: 9999;
  pointer-events: none;
  animation: floatFlag 3s ease-in-out infinite;
}

@keyframes floatFlag {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-10px) rotate(3deg) scale(1.05); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

body.theme-merdeka2026 {
  border-left: 8px solid #d80000;
  border-right: 8px solid #ffffff;
}
/* EXTENDED NUSANTARA JAYA 81 THEME - TIM & ORIGEN CARDS */

/* ORNAMEN UNTUK TIM LITDIGI (FLIP CARDS) */
body.theme-merdeka2026 .flip-card-inner {
  border: 2px solid #d80000;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(216, 0, 0, 0.3) !important;
}

body.theme-merdeka2026 .flip-card-front {
  background: linear-gradient(135deg, #d80000 0%, #b30000 100%) !important;
  color: white !important;
  border: 2px dashed #ffcc00;
}

body.theme-merdeka2026 .flip-card-front i, 
body.theme-merdeka2026 .flip-card-front span {
  color: #ffffff !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

body.theme-merdeka2026 .flip-card-back {
  background: #ffffff !important;
  color: #333 !important;
  border: 2px solid #d80000;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96' fill='%23d80000' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
}

/* ORNAMEN UNTUK ORIGEN CARDS */
body.theme-merdeka2026 .origen-card {
  background: #ffffff !important;
  border: 2px solid #d80000 !important;
  border-top: 8px solid #d80000 !important;
  box-shadow: 0 10px 20px rgba(216, 0, 0, 0.15) !important;
  color: #333 !important;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

body.theme-merdeka2026 .origen-card::after {
  content: '????';
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  opacity: 0.8;
  z-index: 0;
}

body.theme-merdeka2026 .origen-card-title {
  color: #d80000 !important;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

body.theme-merdeka2026 .origen-card-text {
  color: #555 !important;
  position: relative;
  z-index: 1;
}

body.theme-merdeka2026 .origen-card-icon {
  color: #ffffff !important;
  background: #d80000 !important;
  border: 2px solid #ffcc00 !important;
}

/* Container Enhancements for Tim and Origen sections */
body.theme-merdeka2026 .tim-container {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid #ffcccc !important;
  border-radius: 20px;
  background-image: repeating-linear-gradient(45deg, rgba(216,0,0,0.02) 0px, rgba(216,0,0,0.02) 10px, transparent 10px, transparent 20px) !important;
}

/* Button enhancements */
body.theme-merdeka2026 .btn-outline {
  border: 2px solid #d80000 !important;
  color: #d80000 !important;
  font-weight: bold;
}
body.theme-merdeka2026 .btn-outline:hover {
  background: #d80000 !important;
  color: #ffffff !important;
}


    .socmed-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--card-bg, #fff);
      color: var(--text-color, #333);
      text-decoration: none;
      font-size: 1rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .socmed-badge:hover {
      transform: translateY(-2px);
      color: #fff;
    }
    .socmed-badge.ig:hover { background: #E1306C; border-color: #E1306C; }
    .socmed-badge.fb:hover { background: #1877F2; border-color: #1877F2; }
    .socmed-badge.yt:hover { background: #FF0000; border-color: #FF0000; }

  
    /* ============================================================
       CREATIVE STUDIO MODE — LitDigi 2.0
       ============================================================ */

    /* Container override for wider canvas */
    #createWork .create-work-container {
      max-width: 1100px;
      padding: 32px 36px;
    }

    /* Studio header bar */
    .studio-header-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 28px;
      padding-bottom: 20px;
      border-bottom: 1.5px solid rgba(35,166,213,0.15);
    }
    .studio-header-bar .studio-icon-badge {
      width: 48px; height: 48px;
      background: linear-gradient(135deg, #23a6d5, #00e1ff);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; color: #fff;
      box-shadow: 0 6px 18px rgba(35,166,213,0.35);
      flex-shrink: 0;
    }
    .studio-header-bar h1 {
      font-size: 1.8rem; font-weight: 800;
      background: linear-gradient(90deg, #23a6d5, #00e1ff);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 0;
    }
    .studio-header-bar p {
      margin: 0; font-size: 0.85rem;
      color: #888;
    }
    .studio-draft-bar {
      display: flex; justify-content: space-between;
      align-items: center; background: rgba(35,166,213,0.05);
      border: 1px solid rgba(35,166,213,0.12); padding: 10px 18px;
      border-radius: 12px; margin-bottom: 24px; flex-wrap: wrap; gap: 8px;
    }
    .studio-draft-bar #draftStatus { font-size: 0.82rem; color: #888; }
    .studio-draft-actions { display: flex; gap: 8px; }
    .studio-draft-btn {
      padding: 5px 12px; font-size: 0.78rem; border-radius: 8px;
      border: 1px solid #e0e0e0; background: #fff;
      color: #555; cursor: pointer; font-family: inherit;
      transition: all 0.2s; display: flex; align-items: center; gap: 5px;
    }
    .studio-draft-btn:hover { border-color: #23a6d5; color: #23a6d5; background: rgba(35,166,213,0.05); }

    /* [NASKAH] Pemilih format ekspor — mengikuti gaya studio-draft-btn */
    .studio-draft-select {
      padding: 7px 10px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      background: #fff;
      color: #666;
      font-size: 0.8rem;
      font-family: inherit;
      cursor: pointer;
      outline: none;
      transition: border-color .2s, color .2s;
    }
    .studio-draft-select:hover,
    .studio-draft-select:focus { border-color: #23a6d5; color: #23a6d5; }

    /* 2-column workspace grid */
    .studio-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 20px;
      align-items: start;
    }
    @media (max-width: 900px) {
      .studio-grid { grid-template-columns: 1fr; }
      #createWork .create-work-container { padding: 20px 16px; }
    }

    /* Panels */
    .studio-panel {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.06);
      border: 1px solid rgba(0,0,0,0.06);
      overflow: hidden;
    }
    .studio-panel-header {
      padding: 16px 22px 12px;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      display: flex; align-items: center; gap: 8px;
    }
    .studio-panel-header h3 {
      margin: 0; font-size: 0.9rem; font-weight: 700;
      color: #444; letter-spacing: 0.02em; text-transform: uppercase;
    }
    .studio-panel-header i { color: #23a6d5; font-size: 0.95rem; }
    .studio-panel-body { padding: 20px 22px; }

    /* Category card grid */
    .category-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 22px;
    }
    .category-card {
      border: 2px solid #eaeaea;
      border-radius: 14px;
      padding: 12px 8px;
      text-align: center;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      background: #fafafa;
      position: relative; overflow: hidden;
      user-select: none;
    }
    .category-card:hover {
      border-color: #23a6d5;
      transform: translateY(-2px);
      background: rgba(35,166,213,0.04);
      box-shadow: 0 4px 16px rgba(35,166,213,0.12);
    }
    .category-card.active {
      border-color: #00e1ff;
      background: linear-gradient(135deg, rgba(35,166,213,0.08), rgba(0,225,255,0.12));
      box-shadow: 0 0 0 3px rgba(0,225,255,0.2), 0 6px 24px rgba(35,166,213,0.2);
      transform: translateY(-2px);
    }
    .category-card.active::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(35,166,213,0.05), rgba(0,225,255,0.05));
      pointer-events: none;
    }
    .category-card .cat-icon {
      font-size: 1.5rem; margin-bottom: 5px;
      display: block;
      transition: transform 0.3s;
    }
    .category-card:hover .cat-icon { transform: scale(1.15) rotate(-5deg); }
    .category-card.active .cat-icon { transform: scale(1.2); }
    .category-card .cat-name {
      font-size: 0.72rem; font-weight: 600;
      color: #555; display: block; line-height: 1.2;
      transition: color 0.25s;
    }
    .category-card.active .cat-name { color: #23a6d5; }
    .category-card .cat-check {
      position: absolute; top: 5px; right: 5px;
      width: 16px; height: 16px;
      background: #23a6d5;
      border-radius: 50%; font-size: 0.6rem; color: #fff;
      display: none; align-items: center; justify-content: center;
    }
    .category-card.active .cat-check { display: flex; }

    /* Modern cover dropzone */
    .studio-cover-dropzone {
      border: 2.5px dashed #d0d0d0;
      border-radius: 16px;
      padding: 28px 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      background: #fafafa;
      position: relative; overflow: hidden;
      min-height: 150px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 8px;
    }
    .studio-cover-dropzone input[type=file] {
      position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2;
    }
    .studio-cover-dropzone .dz-icon {
      font-size: 2.2rem; color: #c0c0c0;
      transition: all 0.3s;
    }
    .studio-cover-dropzone .dz-text {
      font-size: 0.82rem; color: #aaa; line-height: 1.4;
    }
    .studio-cover-dropzone .dz-text strong { display: block; color: #888; font-size: 0.88rem; }
    .studio-cover-dropzone:hover,
    .studio-cover-dropzone.drag-over {
      border-color: #23a6d5;
      background: rgba(35,166,213,0.04);
      box-shadow: 0 0 0 4px rgba(35,166,213,0.08);
    }
    .studio-cover-dropzone:hover .dz-icon,
    .studio-cover-dropzone.drag-over .dz-icon {
      color: #23a6d5; transform: scale(1.1) translateY(-3px);
    }
    .studio-cover-dropzone.has-preview .dz-icon,
    .studio-cover-dropzone.has-preview .dz-text { display: none; }
    .studio-cover-preview {
      width: 100%; max-height: 180px;
      object-fit: cover; border-radius: 10px;
      display: none;
    }
    .studio-cover-preview.visible { display: block; }
    .studio-cover-remove {
      position: absolute; top: 8px; right: 8px;
      width: 26px; height: 26px; border-radius: 50%;
      background: rgba(0,0,0,0.6); color: #fff;
      border: none; cursor: pointer; font-size: 0.75rem;
      display: none; align-items: center; justify-content: center;
      z-index: 3; transition: background 0.2s;
    }
    .studio-cover-remove:hover { background: #e53e3e; }
    .studio-cover-dropzone.has-preview .studio-cover-remove { display: flex; }
    .studio-cover-dropzone.has-preview input[type=file] { z-index: 1; }

    /* Tags input modern */
    .studio-tags-input {
      width: 100%; padding: 10px 14px;
      border: 2px solid #e8e8e8; border-radius: 12px;
      font-size: 0.88rem; font-family: inherit;
      color: #333; background: #fff;
      transition: all 0.3s; box-sizing: border-box;
    }
    .studio-tags-input:focus {
      outline: none; border-color: #23a6d5;
      box-shadow: 0 0 0 3px rgba(35,166,213,0.1);
    }

    /* Canvas panel — right side */
    .studio-canvas-panel {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 2px 20px rgba(0,0,0,0.06);
      border: 1px solid rgba(0,0,0,0.06);
      overflow: hidden;
      display: flex; flex-direction: column;
    }
    .studio-canvas-inner {
      flex: 1; position: relative; overflow: hidden;
    }

    /* Canvas states */
    .canvas-state {
      display: none;
      animation: canvasFadeIn 0.3s ease forwards;
    }
    .canvas-state.active { display: block; }
    @keyframes canvasFadeIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Writing canvas — paper style */
    .canvas-writing {
      padding: 0;
    }
    .canvas-writing-toolbar {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 20px;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      background: #fafafa;
    }
    .canvas-writing-toolbar span {
      font-size: 0.78rem; color: #aaa; margin-left: auto;
    }
    .canvas-writing-body {
      padding: 28px 32px;
      background: #fffffe;
    }
    .canvas-textarea {
      width: 100%; min-height: 340px;
      border: none; outline: none;
      font-family: 'Merriweather', 'Lora', Georgia, serif;
      font-size: 1rem; line-height: 1.85;
      color: #2d2d2d; resize: vertical;
      background: transparent;
      box-sizing: border-box;
    }
    .canvas-textarea::placeholder { color: #c0c0c0; font-style: italic; }
    .canvas-writing-footer {
      padding: 10px 20px; border-top: 1px solid rgba(0,0,0,0.05);
      display: flex; justify-content: flex-end; align-items: center; gap: 10px;
    }
    .char-count { font-size: 0.78rem; color: #bbb; }

    /* Puisi audio zone */
    .canvas-audio-zone {
      margin: 0; padding: 14px 20px;
      background: linear-gradient(90deg, rgba(35,166,213,0.04), rgba(0,225,255,0.06));
      border-bottom: 1px solid rgba(35,166,213,0.1);
      display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    }
    .audio-zone-icon {
      width: 38px; height: 38px; border-radius: 50%;
      background: linear-gradient(135deg, #23a6d5, #00e1ff);
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 0.9rem; flex-shrink: 0;
    }
    .audio-zone-info { flex: 1; }
    .audio-zone-info strong { font-size: 0.85rem; color: #333; display: block; }
    .audio-zone-info small { font-size: 0.75rem; color: #aaa; }
    .audio-zone-btn {
      padding: 7px 16px; border-radius: 10px;
      border: 1.5px solid #23a6d5; background: transparent;
      color: #23a6d5; font-size: 0.8rem; cursor: pointer;
      font-family: inherit; font-weight: 600;
      transition: all 0.2s; display: flex; align-items: center; gap: 5px;
    }
    .audio-zone-btn:hover { background: #23a6d5; color: #fff; }
    #audioPreview { width: 100%; margin-top: 8px; border-radius: 8px; }

    /* Novel info panel */
    .canvas-novel-info {
      padding: 48px 40px;
      text-align: center; display: flex;
      flex-direction: column; align-items: center; gap: 16px;
    }
    .novel-info-icon {
      width: 90px; height: 90px;
      background: linear-gradient(135deg, #23a6d5 0%, #00e1ff 100%);
      border-radius: 24px;
      display: flex; align-items: center; justify-content: center;
      font-size: 2.5rem; color: #fff;
      box-shadow: 0 12px 32px rgba(35,166,213,0.3);
      margin-bottom: 8px;
    }
    .canvas-novel-info h3 { margin: 0; font-size: 1.2rem; color: #333; font-weight: 700; }
    .canvas-novel-info p { margin: 0; font-size: 0.88rem; color: #888; max-width: 340px; line-height: 1.7; }
    .novel-steps {
      display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center;
    }
    .novel-step {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 13px; border-radius: 20px;
      background: rgba(35,166,213,0.08); font-size: 0.78rem;
      color: #23a6d5; font-weight: 600;
    }
    .novel-step i { font-size: 0.8rem; }

    /* Comic multi-dropzone */
    .canvas-comic-zone { padding: 20px 22px; }
    .comic-main-dropzone {
      border: 2.5px dashed #d0d0d0;
      border-radius: 16px;
      padding: 32px 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      background: #fafafa;
      position: relative; overflow: hidden;
      margin-bottom: 16px;
    }
    .comic-main-dropzone input[type=file] {
      position: absolute; inset: 0; opacity: 0;
      cursor: pointer; z-index: 2;
    }
    .comic-main-dropzone:hover,
    .comic-main-dropzone.drag-over {
      border-color: #23a6d5;
      background: rgba(35,166,213,0.04);
      box-shadow: 0 0 0 4px rgba(35,166,213,0.08);
    }
    .comic-dz-icon { font-size: 2.4rem; color: #c0c0c0; margin-bottom: 10px; }
    .comic-dz-title { font-size: 0.95rem; font-weight: 700; color: #555; margin-bottom: 4px; }
    .comic-dz-sub { font-size: 0.78rem; color: #aaa; }
    .comic-dz-badge {
      display: inline-block; margin-top: 12px;
      padding: 5px 14px; border-radius: 20px;
      background: rgba(35,166,213,0.1); color: #23a6d5;
      font-size: 0.75rem; font-weight: 600;
    }
    /* Comic page thumbnail grid */
    .comic-pages-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      gap: 10px;
      min-height: 0;
    }
    .comic-page-thumb {
      position: relative; border-radius: 10px;
      overflow: hidden; aspect-ratio: 3/4;
      border: 2px solid #eaeaea;
      cursor: grab;
      transition: all 0.2s;
      background: #f0f0f0;
    }
    .comic-page-thumb:hover { border-color: #23a6d5; transform: scale(1.03); }
    .comic-page-thumb img {
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .comic-page-thumb .page-num {
      position: absolute; bottom: 0; left: 0; right: 0;
      background: rgba(0,0,0,0.55); color: #fff;
      font-size: 0.62rem; text-align: center; padding: 3px;
      font-weight: 600;
    }
    .comic-page-thumb .page-remove {
      position: absolute; top: 4px; right: 4px;
      width: 20px; height: 20px; border-radius: 50%;
      background: rgba(0,0,0,0.6); color: #fff;
      border: none; cursor: pointer; font-size: 0.55rem;
      display: flex; align-items: center; justify-content: center;
      opacity: 0; transition: opacity 0.2s;
      z-index: 2;
    }
    .comic-page-thumb:hover .page-remove { opacity: 1; }

    /* Canvas placeholder (no type selected) */
    .canvas-placeholder {
      padding: 64px 32px;
      text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 14px;
    }
    .canvas-placeholder .ph-icon {
      width: 80px; height: 80px; border-radius: 50%;
      background: linear-gradient(135deg, #f0f9ff, #e0f5ff);
      display: flex; align-items: center; justify-content: center;
      font-size: 2rem; color: #a0d8ef;
      margin-bottom: 8px;
    }
    .canvas-placeholder h3 { margin: 0; font-size: 1rem; color: #ccc; font-weight: 600; }
    .canvas-placeholder p { margin: 0; font-size: 0.82rem; color: #ddd; max-width: 260px; line-height: 1.6; }

    /* Submit button */
    .studio-submit-btn {
      width: 100%; padding: 16px 20px;
      background: linear-gradient(135deg, #23a6d5 0%, #00e1ff 100%);
      color: #fff; border: none; border-radius: 14px;
      font-size: 1rem; font-weight: 700; cursor: pointer;
      font-family: inherit;
      box-shadow: 0 6px 24px rgba(35,166,213,0.35);
      transition: all 0.3s;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      letter-spacing: 0.02em;
    }
    .studio-submit-btn:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 10px 32px rgba(35,166,213,0.45);
    }
    .studio-submit-btn:active { transform: translateY(0); }
    .studio-submit-btn:disabled { opacity: 0.65; cursor: not-allowed; }

    /* Form elements inside panels */
    .sf-group { margin-bottom: 18px; }
    .sf-label {
      display: block; font-size: 0.8rem; font-weight: 700;
      color: #666; margin-bottom: 7px; letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .sf-input, .sf-textarea,
    .sf-select {
      width: 100%; padding: 10px 14px;
      border: 2px solid #e8e8e8; border-radius: 12px;
      font-size: 0.9rem; font-family: inherit;
      color: #333; background: #fff;
      transition: all 0.3s; box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -webkit-appearance: none; appearance: none;
    }
    .sf-input:focus, .sf-textarea:focus,
    .sf-select:focus {
      outline: none; border-color: #23a6d5;
      box-shadow: 0 0 0 3px rgba(35,166,213,0.1);
    }
    /* Panah dropdown custom utk Status Karya (konsisten di semua perangkat) */
    .sf-select {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      background-size: 16px;
      padding-right: 40px;
      min-height: 46px;
      cursor: pointer;
    }
    .sf-select:invalid { color: #767676; }
    .sf-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
    .sf-help { font-size: 0.75rem; color: #aaa; margin-top: 5px; display: block; }

    /* Dark mode overrides */
    body.dark-mode .studio-panel,
    body.dark-mode .studio-canvas-panel {
      background: #1e1e1e; border-color: rgba(255,255,255,0.07);
    }
    body.dark-mode .studio-panel-header { border-bottom-color: rgba(255,255,255,0.07); }
    body.dark-mode .studio-panel-header h3 { color: #ccc; }
    body.dark-mode .studio-draft-bar { background: rgba(35,166,213,0.05); border-color: rgba(35,166,213,0.1); }
    body.dark-mode .studio-draft-btn { background: #252525; border-color: #333; color: #aaa; }
    body.dark-mode .studio-draft-select { background: #252525; border-color: #333; color: #aaa; }
    body.dark-mode .category-card { background: #252525; border-color: #333; }
    body.dark-mode .category-card .cat-name { color: #aaa; }
    body.dark-mode .category-card:hover { background: rgba(35,166,213,0.08); border-color: #23a6d5; }
    body.dark-mode .category-card.active { background: rgba(35,166,213,0.12); }
    body.dark-mode .studio-cover-dropzone,
    body.dark-mode .comic-main-dropzone { background: #252525; border-color: #444; }
    body.dark-mode .studio-cover-dropzone:hover,
    body.dark-mode .comic-main-dropzone:hover { background: rgba(35,166,213,0.07); }
    body.dark-mode .sf-input, body.dark-mode .sf-textarea,
    body.dark-mode .sf-select,
    body.dark-mode .studio-tags-input, body.dark-mode .canvas-textarea {
      background-color: #252525; border-color: #3a3a3a; color: #e0e0e0;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bbb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
      background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
    }
    body.dark-mode .sf-select option { background: #252525; color: #e0e0e0; }
    body.dark-mode .canvas-writing-body { background: #1e1e1e; }
    body.dark-mode .canvas-writing-toolbar { background: #252525; border-color: #333; }
    body.dark-mode .canvas-textarea { color: #ddd; }
    body.dark-mode .canvas-novel-info h3 { color: #e0e0e0; }
    body.dark-mode .canvas-audio-zone { background: rgba(35,166,213,0.06); }
    body.dark-mode .audio-zone-info strong { color: #ccc; }
    body.dark-mode .sf-label { color: #aaa; }
    body.dark-mode .comic-page-thumb { border-color: #333; }
    body.dark-mode #createWork .create-work-container { background: rgba(22,22,22,0.97); }
    body.dark-mode .studio-canvas-panel .canvas-writing-footer { border-color: #2e2e2e; }
    body.dark-mode .novel-step { background: rgba(35,166,213,0.12); }
    /* Patch Note Builder Admin */
    .pn-builder-list { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; }
    .pn-item { display: flex; gap: 10px; align-items: flex-start; background: var(--card-bg, #fff); padding: 15px; border: 1px solid #e0e0e0; border-radius: 12px; transition: all 0.3s; }
    body.dark-mode .pn-item { background: #252525; border-color: #444; }
    .pn-item:focus-within { border-color: #23a6d5; box-shadow: 0 4px 15px rgba(35,166,213,0.1); }
    .pn-cat-select { flex: 0 0 180px; padding: 10px; border-radius: 8px; border: 1px solid #ccc; font-family: 'Poppins', sans-serif; font-size: 0.85rem; outline: none; background: white; color: #333; }
    .pn-text-input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #ccc; font-family: 'Poppins', sans-serif; font-size: 0.85rem; outline: none; background: white; color: #333; resize: vertical; min-height: 42px; }
    body.dark-mode .pn-cat-select, body.dark-mode .pn-text-input { background: #1e1e1e; border-color: #555; color: #fff; }
    .pn-del-btn { flex: 0 0 auto; background: #ffebee; color: #ff4757; border: none; width: 42px; height: 42px; border-radius: 8px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
    .pn-del-btn:hover { background: #ff4757; color: #fff; transform: scale(1.05); }

    /* Patch Note Public Display */
    .pn-display-item { display: flex; gap: 15px; margin-bottom: 16px; align-items: flex-start; background: rgba(35,166,213,0.03); padding: 15px; border-radius: 12px; border: 1px solid rgba(35,166,213,0.1); }
    body.dark-mode .pn-display-item { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.05); }
    .pn-display-icon { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; color: white; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
    .pn-display-text { flex: 1; }
    .pn-display-cat { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
    .pn-display-desc { font-size: 0.95rem; color: var(--text-color, #444); line-height: 1.6; }
    body.dark-mode .pn-display-desc { color: #ccc; }

    @media (max-width: 768px) {
      .pn-item { flex-direction: column; }
      .pn-cat-select { width: 100%; flex: none; }
      .pn-del-btn { width: 100%; height: 38px; }
      .pn-display-item { flex-direction: column; gap: 10px; }
    }

    /* [RESPONSIF] Patch note modal lebih nyaman di layar kecil */
    @media (max-width: 480px) {
      #patchNoteModal .modal-content { max-width: 100% !important; }
      #patchNoteModal .modal-content > div:first-child { padding: 14px 16px; }
      #patchNoteModal h3 { font-size: 1.05rem !important; }
      #patchNoteModal > .modal-content > div:nth-child(2) { padding: 16px 14px !important; }
      #patchNoteContent { font-size: 0.88rem; }
      #patchNoteContent h2 { font-size: 1.15rem !important; word-break: break-word; }
      .pn-display-item { padding: 11px; gap: 8px; }
      .pn-display-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem !important; }
      .pn-display-cat { font-size: 0.68rem; letter-spacing: 0.5px; }
      .pn-display-desc { font-size: 0.86rem; }
    }

    /* Patch Note Slide-In Animation */
    @keyframes pnSlideIn {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }
    .pn-display-item {
      animation: pnSlideIn 0.4s ease forwards;
      opacity: 0;
    }
    .pn-display-item:nth-child(1) { animation-delay: 0.05s; }
    .pn-display-item:nth-child(2) { animation-delay: 0.12s; }
    .pn-display-item:nth-child(3) { animation-delay: 0.19s; }
    .pn-display-item:nth-child(4) { animation-delay: 0.26s; }
    .pn-display-item:nth-child(5) { animation-delay: 0.33s; }
    .pn-display-item:nth-child(6) { animation-delay: 0.40s; }
    .pn-display-item:nth-child(7) { animation-delay: 0.47s; }
    .pn-display-item:nth-child(8) { animation-delay: 0.54s; }
    .pn-display-item:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .pn-display-icon {
      transition: transform 0.3s;
    }
    .pn-display-item:hover .pn-display-icon {
      transform: scale(1.12) rotate(-5deg);
    }

    /* ===== FASE 2: OPTIMASI BATERAI & ANIMASI ===== */
    .paused-animation, .paused-animation * {
      animation-play-state: paused !important;
    }
    .will-change-transform {
      will-change: transform;
    }

    /* ===== SISTEM HAK CIPTA & WATERMARK ===== */
    .protected-content {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    
    .litdigi-watermark {
        position: absolute;
        top: 15px;
        right: 20px;
        opacity: 0.3;
        filter: drop-shadow(0px 1px 2px rgba(255,255,255,0.8)) drop-shadow(0px -1px 2px rgba(0,0,0,0.8));
        pointer-events: none;
        z-index: 100;
        max-width: 72px;
        max-height: 72px;
        animation: wmFloat 6s ease-in-out infinite;
    }
    @keyframes wmFloat {
        0%, 100% { opacity: 0.25; transform: translateY(0px); }
        50% { opacity: 0.45; transform: translateY(-4px); }
    }
    .litdigi-watermark.text-type {
        font-size: 0.9rem;
        font-weight: 800;
        color: rgba(140, 140, 140, 0.7);
        text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.7), 0px -1px 2px rgba(0, 0, 0, 0.7);
        white-space: nowrap;
        max-width: 160px;
        animation: wmFloat 6s ease-in-out infinite;
    }
    @media (max-width: 768px) {
        .litdigi-watermark {
            max-width: 48px;
            max-height: 48px;
            top: 10px;
            right: 10px;
        }
        .litdigi-watermark.text-type {
            font-size: 0.7rem;
            max-width: 120px;
        }
    }

    /* Watermark Edit Profile Section */
    .wm-option-group {
        margin-top: 8px;
        transition: all 0.3s ease;
    }
    .wm-option-group.hidden {
        display: none;
    }

/* ===== blok CSS #2 (dari index.html) ===== */
/* ============================================================
   TIM LITDIGI — CSS STRUKTUR ORGANISASI (GPU-friendly, RESPONSIVE)
   - Layout: struktur organisasi (founder di atas, 4 anggota di bawah)
   - Animasi dinamis tapi HANYA transform+opacity (tidak repaint-reflow)
   - Tidak ada flip-card, tidak ada fase misteri, tidak ada backdrop-filter blur
   - Foto menampilkan seluruh badan/wajah dengan object-fit:cover yang aman
     (object-position di tengah) agar Alfin & anggota lain tidak terpotong
   - Tombol hubungi langsung ke Instagram masing-masing
   ============================================================ */

#timLitDigi {
  background: #f4f8ff;
}
body.dark-mode #timLitDigi {
  background: #0d1522;
}

/* ===== Container halaman Tim ===== */
.litdigi-team-page {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px);
  background: rgba(255,255,255,0.97);  /* solid — tanpa backdrop-filter blur */
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 26px rgba(15,40,98,0.07);  /* 1 lapis shadow */
}
body.dark-mode .litdigi-team-page {
  background: rgba(18,24,38,0.97);
  box-shadow: 0 8px 26px rgba(0,0,0,0.4);
}

/* Grid latar BELAKANG: titik-titik halus statis, tidak beranimasi */
.litdigi-team-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(35,166,213,0.12) 1px, transparent 1.5px);
  background-size: 38px 38px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
}

/* ===== HEADER JUDUL ===== */
.litdigi-team-page .tim-header {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-bottom: 44px;
}
.litdigi-team-page .tim-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.8px;
  color: #0f172a;
  margin: 0 0 14px;
  display: inline-block;
  position: relative;
}
body.dark-mode .litdigi-team-page .tim-title { color: #f1f5f9; }

/* Underline judul: statis gradient (tidak shimmer) */
.litdigi-team-page .tim-title::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #00e1ff, #23a6d5);
}

.team-lead-text {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 22px auto 0;
  color: #526070;
  font-size: .98rem;
  line-height: 1.7;
}
body.dark-mode .team-lead-text { color: #94a3b8; }

/* ===== PARTIKEL / ORB DESKTOP (transform-only) ===== */
.team-light-orb {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #00e1ff;
  box-shadow: 0 0 10px rgba(0,225,255,0.7); /* 1 lapis glow */
  opacity: 0.6;
  will-change: transform, opacity;
  animation: orbFloat 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.team-light-orb:nth-child(1){ left: 7%;  top: 19%; }
.team-light-orb:nth-child(2){ left: 19%; top: 76%; animation-delay:1.4s; background:#ffca28; box-shadow:0 0 10px rgba(255,202,40,.7); }
.team-light-orb:nth-child(3){ right: 13%; top: 24%; animation-delay:2.2s; }
.team-light-orb:nth-child(4){ right: 24%; bottom: 13%; animation-delay:.8s; background:#23a6d5; }
.team-light-orb:nth-child(5){ left: 50%; top: 11%;  animation-delay:3.1s; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.7); }
.team-light-orb:nth-child(6){ left: 43%; bottom: 10%; animation-delay:4.2s; background:#ff9800; box-shadow:0 0 10px rgba(255,152,0,.7); }

@keyframes orbFloat {
  0%,100% { transform: translate3d(0,0,0) scale(0.85); opacity:.35; }
  50%     { transform: translate3d(16px,-22px,0) scale(1.2); opacity:.8; }

/* ===== [ANIMASI LATAR] AURORA LEMBUT — HANYA halaman Tim LitDigi =====
   Dua "blob" cahaya besar (biru & amber) melayang perlahan di belakang
   kartu. Hanya transform+opacity (GPU-friendly), aman utk perangkat lemah. */
.litdigi-team-page::after {
  content: '';
  position: absolute;
  width: 55%; max-width: 640px; aspect-ratio: 1 / 1;
  top: -18%; right: -12%;
  background: radial-gradient(circle at center,
              rgba(0,225,255,.16) 0%, rgba(35,166,213,.10) 38%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: teamAuroraDrift 16s ease-in-out infinite alternate;
}
.litdigi-team-page .team-aurora-2 {
  position: absolute;
  width: 48%; max-width: 560px; aspect-ratio: 1 / 1;
  bottom: -20%; left: -14%;
  background: radial-gradient(circle at center,
              rgba(255,152,0,.13) 0%, rgba(255,202,40,.08) 40%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  animation: teamAuroraDrift 20s ease-in-out infinite alternate-reverse;
}
@keyframes teamAuroraDrift {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); opacity:.85; }
  50%  { transform: translate3d(-4%, 6%, 0) rotate(8deg) scale(1.08); opacity:1; }
  100% { transform: translate3d(3%, -5%, 0) rotate(-6deg) scale(.96); opacity:.9; }
}

/* Titik-titik grid ikut bergeser halus (kedalaman halus) */
@keyframes teamDotsDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 76px 38px, 76px 38px; }
}
.litdigi-team-page::before {
  animation: teamDotsDrift 26s linear infinite;
}

/* Hormati preferensi gerak-minimal pengguna */
@media (prefers-reduced-motion: reduce) {
  .litdigi-team-page::after,
  .litdigi-team-page .team-aurora-2 { animation: none; }
  .litdigi-team-page::before { animation: none; }
  .team-light-orb { animation: none; opacity:.5; }
}
}

/* ===== STRUKTUR ORGANISASI WRAPPER ===== */
.team-org {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin-top: 20px;
}

/* ===== KARTU ANGGOTA (org-card) =====
   Layout: foto di atas, info di bawah. Tidak 3D-flip, tidak backface.
   Masih ada animasi dinamis: entrance fade+rise, hover lift+glow ring. */
.org-card {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid rgba(35,166,213,0.18);
  box-shadow: 0 8px 22px rgba(15,40,98,0.08);
  padding: 14px;
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform .3s ease, box-shadow .3s ease;
  will-change: transform;
  /* Entrance animasi ringan (transform+opacity) */
  animation: orgCardRise .65s cubic-bezier(.22,1,.36,1) both;
  overflow: hidden;
}
body.dark-mode .org-card {
  background: #1a2332;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}

/* Stagger entrance per kartu */
.org-founder { animation-delay: .05s; }
.org-team-row .org-card:nth-child(1){ animation-delay: .15s; }
.org-team-row .org-card:nth-child(2){ animation-delay: .25s; }
.org-team-row .org-card:nth-child(3){ animation-delay: .35s; }
.org-team-row .org-card:nth-child(4){ animation-delay: .45s; }

@keyframes orgCardRise {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)     scale(1);  }
}

/* Hover efek: lift + conic glow ring (transform-only) */
.org-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(35,166,213,0.18);
}
/* Conic-glow berputar hanya saat hover (transform:rotate) */
.org-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  padding: 2px;
  background: conic-gradient(from 0deg, #00e1ff, transparent 40%, #23a6d5, #ff9800, transparent 70%, #00e1ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.org-card:hover::before {
  opacity: 1;
  animation: borderConicSpin 2.4s linear infinite;
}
@keyframes borderConicSpin {
  to { transform: rotate(360deg); }
}

/* Founder lebih besar & paling atas */
.org-founder {
  max-width: 330px;
  border-color: rgba(255,152,0,0.35);
  box-shadow: 0 12px 30px rgba(255,152,0,0.10), 0 8px 22px rgba(15,40,98,0.08);
}
body.dark-mode .org-founder {
  border-color: rgba(255,152,0,0.40);
  box-shadow: 0 12px 30px rgba(255,152,0,0.15), 0 8px 22px rgba(0,0,0,0.40);
}

/* ===== KONEKTOR (garis dari founder ke tim) =====
   Digambar dengan CSS murni (pseudo-element), tidak ada gambar. */
.org-connector {
  position: relative;
  z-index: 1;
  width: 2px;
  height: 40px;
  background: linear-gradient(to bottom, #23a6d5, rgba(35,166,213,0));
}
.org-connector::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #23a6d5;
  box-shadow: 0 0 0 4px rgba(35,166,213,0.18);
}

/* ===== BARIS ANGGOTA TIM ===== */
.org-team-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  width: 100%;
  max-width: 1100px;
  justify-items: center;
}

/* ===== FOTO =====
   - Aspek rasio 4:5 (potret) agar wajah + badan tidak terpotong
   - object-position: center 30% — sedikit ke atas, fokus ke wajah
   - ini memperbaiki foto Alfin yang tadinya terpotong karena
     object-position hardcoded. */
.org-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 16px;
  overflow: hidden;
  border: 2.5px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #00e1ff, #23a6d5, #ff9800) border-box;
  box-shadow: 0 6px 14px rgba(35,166,213,0.12);
}
body.dark-mode .org-card-photo {
  background:
    linear-gradient(#1a2332, #1a2332) padding-box,
    linear-gradient(135deg, #00e1ff, #23a6d5, #ff9800) border-box;
}
.org-founder .org-card-photo {
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, #ff9800, #fbbf24, #ff5722) border-box;
  box-shadow: 0 8px 20px rgba(255,152,0,0.20);
}
body.dark-mode .org-founder .org-card-photo {
  background:
    linear-gradient(#1a2332,#1a2332) padding-box,
    linear-gradient(135deg, #ff9800, #fbbf24, #ff5722) border-box;
}
.org-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;  /* aman untuk semua anggota (tidak ada yang terpotong) */
  display: block;
  transition: transform .5s ease;
  will-change: transform;
}
.org-card:hover .org-card-photo img {
  transform: scale(1.06); /* zoom subtle saat hover */
}

/* Badge peran di sudut foto */
.org-role-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(35,166,213,0.92);
  color: #fff;
  font-size: .70rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.20);
}
.org-founder-badge {
  background: linear-gradient(135deg, #ff9800, #ff5722);
}

/* ===== BODY KARTU (teks & tombol) ===== */
.org-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.org-name {
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
  background: linear-gradient(135deg, #0f172a, #23a6d5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.25;
  margin: 4px 0 0;
}
body.dark-mode .org-name {
  background: linear-gradient(135deg, #e2f4ff, #00e1ff);
  -webkit-background-clip: text;
  background-clip: text;
}
.org-founder .org-name {
  background: linear-gradient(135deg, #c2410c, #ff9800);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 1.1rem;
}
.org-role {
  font-size: .76rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .8px;
  margin: 2px 0 2px;
}
body.dark-mode .org-role { color: #94a3b8; }
.org-desc {
  font-size: .78rem;
  color: #64748b;
  line-height: 1.5;
  margin: 2px 0 6px;
  min-height: 2.6em;
}
body.dark-mode .org-desc { color: #94a3b8; }

/* Tombol-tombol sosial */
.org-socmed {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.team-contact-btn {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #23a6d5, #0ea5c6);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(35,166,213,0.25);
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.team-contact-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(35,166,213,0.32);
}
.org-founder .team-contact-btn {
  background: linear-gradient(135deg, #ff9800, #ea580c);
  box-shadow: 0 6px 14px rgba(255,152,0,0.28);
}
.org-founder .team-contact-btn:hover {
  box-shadow: 0 10px 20px rgba(255,152,0,0.35);
}

/* Pastikan sosmed-badge (lingkaran IG di atas tombol) tersusun rapi */
.org-socmed > .socmed-badge {
  margin: 0 auto;
}
.socmed-badge.ig {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #fff;
  border-color: transparent;
}

/* ============================================================
   RESPONSIVE MOBILE (≤768px)
   - Orbs dimatikan total
   - Tim row jadi 2 kolom di tablet kecil, 1 kolom di HP
   - Connector dipersingkat
   - Semua animasi berat dimatikan
   ============================================================ */
@media (max-width: 768px) {
  .team-light-orb { display: none !important; }
  .litdigi-team-page::before { display: none; }

  .litdigi-team-page {
    padding: 38px 16px 44px;
    border-radius: 16px;
  }
  .team-org { gap: 20px; }
  .org-connector { height: 28px; }

  /* 2 kolom di handphone agar pas */
  .org-team-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .org-card, .org-founder {
    max-width: 100%;
    padding: 10px;
    border-radius: 16px;
  }
  .org-card-photo {
    border-radius: 12px;
    aspect-ratio: 3/4;  /* sedikit lebih tinggi di mobile */
  }
  /* Hover tidak terlalu jauh di mobile (touch) */
  .org-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(35,166,213,0.16);
  }
  /* Matikan conic glow di mobile (tidak ada hover) */
  .org-card::before { display: none; }
  .org-card-photo img {
    transition: none !important; /* hindari animasi zoom yang tersangkut di touch */
  }
  .org-name { font-size: .95rem; }
  .org-desc { display: none; } /* hemat ruang di mobile */
  .team-contact-btn {
    padding: 9px 10px;
    font-size: .78rem;
  }
}

/* Tablet kecil: 2 kolom juga */
@media (min-width: 769px) and (max-width: 1024px) {
  .org-team-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    max-width: 720px;
  }
}

/* ============================================================
   AKSESIBILITAS: prefers-reduced-motion
   Matikan semua animasi infinite / rotasi / glow berputar.
   Sisakan fade sederhana untuk entrance.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .team-light-orb,
  .org-card::before,
  .org-card:hover::before {
    animation: none !important;
  }
  .org-card::before { display: none; }
  .org-card {
    animation: orgCardFade .4s ease both !important;
    transition: none !important;
  }
  @keyframes orgCardFade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .org-card:hover { transform: none; }
  .org-card-photo img { transition: none !important; transform: none !important; }
  .team-contact-btn { transition: background-color .2s ease !important; }
  .team-contact-btn:hover { transform: none; box-shadow: none; }
  .team-light-orb {
    transform: none !important;
    opacity: .35;
  }
}

    /* EXTENDED NUSANTARA JAYA 81 THEME - UNIQUE NAVBAR & ELEMENTS */
body.theme-merdeka2026 header {
  background: linear-gradient(105deg, #d80000 0%, #d80000 22%, #ffffff 22.1%, #ffffff 100%) !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4) !important;
  border-bottom: 4px solid #ffcc00 !important;
  position: relative;
}

body.theme-merdeka2026 .header-left .header-brand {
  color: #fff !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

body.theme-merdeka2026 .header-nav .nav-link {
  color: #444 !important;
  font-weight: 700;
  border-radius: 20px;
  padding: 6px 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

body.theme-merdeka2026 .header-nav .nav-link i {
  color: #d80000 !important;
}

body.theme-merdeka2026 .header-nav .nav-link:hover {
  background: #fff0f0 !important;
  color: #d80000 !important;
  border: 1px solid #ffcccc;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.15);
}

body.theme-merdeka2026 .user-dropdown-menu {
  background: #ffffff !important;
  border: 2px solid #d80000 !important;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.25) !important;
  overflow: hidden;
}

body.theme-merdeka2026 .user-dropdown-menu a {
  color: #333 !important;
  font-weight: 600;
  transition: all 0.2s;
}

body.theme-merdeka2026 .user-dropdown-menu a:hover {
  background: linear-gradient(90deg, #fff0f0, #ffffff) !important;
  color: #d80000 !important;
  padding-left: 20px;
}

/* Bamboo pattern background and flag ribbon */
body.theme-merdeka2026::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 20px, transparent 20px, transparent 40px), 
                    repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 20px, transparent 20px, transparent 40px);
  pointer-events: none;
  z-index: -1;
}

body.theme-merdeka2026::after {
  content: '???? MERDEKA!';
  position: fixed;
  bottom: 30px;
  right: 30px;
  font-size: 1.5rem;
  font-weight: 900;
  color: #d80000;
  text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  z-index: 9999;
  pointer-events: none;
  animation: floatFlag 3s ease-in-out infinite;
}

@keyframes floatFlag {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-10px) rotate(3deg) scale(1.05); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

body.theme-merdeka2026 {
  border-left: 8px solid #d80000;
  border-right: 8px solid #ffffff;
}
/* EXTENDED NUSANTARA JAYA 81 THEME - TIM & ORIGEN CARDS */

/* ORNAMEN UNTUK TIM LITDIGI (FLIP CARDS) */
body.theme-merdeka2026 .flip-card-inner {
  border: 2px solid #d80000;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(216, 0, 0, 0.3) !important;
}

body.theme-merdeka2026 .flip-card-front {
  background: linear-gradient(135deg, #d80000 0%, #b30000 100%) !important;
  color: white !important;
  border: 2px dashed #ffcc00;
}

body.theme-merdeka2026 .flip-card-front i, 
body.theme-merdeka2026 .flip-card-front span {
  color: #ffffff !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

body.theme-merdeka2026 .flip-card-back {
  background: #ffffff !important;
  color: #333 !important;
  border: 2px solid #d80000;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96' fill='%23d80000' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
}

/* ORNAMEN UNTUK ORIGEN CARDS */
body.theme-merdeka2026 .origen-card {
  background: #ffffff !important;
  border: 2px solid #d80000 !important;
  border-top: 8px solid #d80000 !important;
  box-shadow: 0 10px 20px rgba(216, 0, 0, 0.15) !important;
  color: #333 !important;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

body.theme-merdeka2026 .origen-card::after {
  content: '????';
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  opacity: 0.8;
  z-index: 0;
}

body.theme-merdeka2026 .origen-card-title {
  color: #d80000 !important;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

body.theme-merdeka2026 .origen-card-text {
  color: #555 !important;
  position: relative;
  z-index: 1;
}

body.theme-merdeka2026 .origen-card-icon {
  color: #ffffff !important;
  background: #d80000 !important;
  border: 2px solid #ffcc00 !important;
}

/* Container Enhancements for Tim and Origen sections */
body.theme-merdeka2026 .tim-container {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid #ffcccc !important;
  border-radius: 20px;
  background-image: repeating-linear-gradient(45deg, rgba(216,0,0,0.02) 0px, rgba(216,0,0,0.02) 10px, transparent 10px, transparent 20px) !important;
}

/* Button enhancements */
body.theme-merdeka2026 .btn-outline {
  border: 2px solid #d80000 !important;
  color: #d80000 !important;
  font-weight: bold;
}
body.theme-merdeka2026 .btn-outline:hover {
  background: #d80000 !important;
  color: #ffffff !important;
}


    .socmed-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--card-bg, #fff);
      color: var(--text-color, #333);
      text-decoration: none;
      font-size: 1rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .socmed-badge:hover {
      transform: translateY(-2px);
      color: #fff;
    }
    .socmed-badge.ig:hover { background: #E1306C; border-color: #E1306C; }
    .socmed-badge.fb:hover { background: #1877F2; border-color: #1877F2; }
    .socmed-badge.yt:hover { background: #FF0000; border-color: #FF0000; }

  
    /* --- CREATIVE STUDIO MODE --- */
    .studio-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 24px;
      align-items: start;
    }
    .studio-panel {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      border: 1px solid #eaeaea;
    }
    @media (max-width: 768px) {
      .studio-grid {
        grid-template-columns: 1fr;
      }
    }

/* ===== blok CSS #3 (dari index.html) ===== */
/* ===== EDIT PROFIL WIZARD (modal interaktif & dinamis) ===== */
    .hidden { display: none !important; }
    .modal#editProfileModal { z-index: 2100; }
    .modal#editProfileModal .edit-profile-content {
      max-width: 780px; width: 94%; padding: 0;
      overflow-x: hidden; overflow-y: auto;
      border-radius: 22px; background: #fff;
    }
    body.dark-mode .modal#editProfileModal .edit-profile-content { background: #1c1c1c; }
    .epw-head {
      background: linear-gradient(135deg,#00e1ff,#23a6d5);
      padding: 22px 26px 18px; color: #fff; position: relative;
    }
    .epw-head .epw-title { font-size: 1.35rem; font-weight: 800; display: flex; align-items: center; gap: 10px; }
    .epw-head .epw-sub { font-size: 0.82rem; opacity: .92; margin-top: 4px; }
    .epw-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
      background: rgba(255,255,255,.22); border: none; color: #fff; cursor: pointer; font-size: 1.05rem;
      display: flex; align-items: center; justify-content: center; transition: .2s; }
    .epw-close:hover { background: rgba(255,255,255,.42); transform: rotate(90deg); }

    .epw-live { display: flex; gap: 16px; align-items: center; padding: 16px 26px;
      background: var(--bg-color,#f4fafd); border-bottom: 1px solid rgba(0,0,0,.06); }
    body.dark-mode .epw-live { background: #232323; }
    .epw-live-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover;
      border: 3px solid #23a6d5; flex-shrink: 0; background: #e8f4fd; }
    .epw-live-name { font-size: 1.05rem; font-weight: 800; color: var(--text-color,#1a1a1a); }
    .epw-live-bio { font-size: 0.82rem; color: #777; margin-top: 2px; line-height: 1.4; }
    .epw-live-tag { display: inline-block; margin-top: 6px; font-size: 0.68rem; font-weight: 700;
      color: #23a6d5; background: rgba(35,166,213,.1); padding: 3px 10px; border-radius: 999px; }

    .epw-stepper { display: flex; gap: 6px; padding: 18px 26px 4px; }
    .epw-step-dot { flex: 1; text-align: center; position: relative; cursor: pointer; }
    .epw-step-dot .dot { width: 30px; height: 30px; margin: 0 auto; border-radius: 50%;
      background: #e2e8f0; color: #889; display: flex; align-items: center; justify-content: center;
      font-size: 0.8rem; font-weight: 700; transition: .3s; border: 2px solid transparent; }
    .epw-step-dot .lbl { font-size: 0.68rem; color: #999; margin-top: 6px; font-weight: 600; }
    .epw-step-dot .bar { position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: #e2e8f0; }
    .epw-step-dot:first-child .bar { display: none; }
    .epw-step-dot.active .dot { background: linear-gradient(135deg,#00e1ff,#23a6d5); color: #fff; box-shadow: 0 4px 12px rgba(35,166,213,.35); }
    .epw-step-dot.active .lbl { color: #23a6d5; }
    .epw-step-dot.done .dot { background: #23a6d5; color: #fff; }
    .epw-step-dot.done .bar { background: #23a6d5; }

    .epw-steps { padding: 20px 26px; }
    .modal#editProfileModal .edit-form-input { background: #fff; color: var(--text-color,#333); }
    body.dark-mode .modal#editProfileModal .edit-form-input { background: #2a2a2a; color: #e0e0e0; }
    .edit-step { display: none; animation: stepIn .35s ease; }
    .edit-step.active { display: block; }
    @keyframes stepIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
    .edit-step-title { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 800;
      color: var(--text-color,#1a1a1a); margin-bottom: 4px; }
    .edit-step-title i { color: #23a6d5; }
    .edit-step-sub { font-size: 0.8rem; color: #888; margin-bottom: 18px; line-height: 1.5; }
    .epw-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 600px) { .epw-upload-grid { grid-template-columns: 1fr; } }
    .epw-upload-box { padding: 14px; border: 1px dashed #cbd5e1; border-radius: 14px; background: #fbfdfe; }
    body.dark-mode .epw-upload-box { background: #232323; border-color: #3a3a3a; }
    .epw-upload-box .edit-form-input { margin-bottom: 0; padding: 8px; }
    .epw-save-btn, .epw-cancel-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 12px 22px; border-radius: 14px; font-family: 'Poppins',sans-serif; font-size: 0.92rem; cursor: pointer; transition: .25s; }
    .epw-save-btn { border: none; background: linear-gradient(135deg,#00e1ff,#23a6d5); color: #fff; font-weight: 800;
      box-shadow: 0 6px 18px rgba(35,166,213,.35); }
    .epw-save-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(35,166,213,.45); }
    .epw-cancel-btn { border: 2px solid #cbd5e1; background: #fff; color: #64748b; font-weight: 700; }
    body.dark-mode .epw-cancel-btn { background: #2a2a2a; border-color: #3a3a3a; color: #aaa; }
    .epw-cancel-btn:hover { border-color: #23a6d5; color: #23a6d5; }
    .epw-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
      padding: 16px 26px; border-top: 1px solid rgba(0,0,0,.06); background: var(--bg-color,#fbfdff); }
    body.dark-mode .epw-actions { background: #1c1c1c; border-color: #333; }
    .epw-nav-btn { padding: 9px 18px; border-radius: 999px; border: none; font-family: 'Poppins',sans-serif;
      font-weight: 700; font-size: 0.85rem; cursor: pointer; background: #e8f4fd; color: #23a6d5;
      transition: .25s; display: inline-flex; align-items: center; gap: 6px; }
    .epw-nav-btn:hover:not(:disabled) { background: #23a6d5; color: #fff; }
    .epw-nav-btn:disabled { opacity: .4; cursor: default; }
    .epw-progress-text { font-size: 0.78rem; color: #999; font-weight: 600; }
    body.litdigi-edit-open { overflow: hidden !important; }

/* ===== blok CSS #4 (dari index.html) ===== */
/* ===== CATATAN PEMBARUAN (PATCH NOTE) — POLISH & RESPONSIVE ===== */
    .modal#patchNoteModal { z-index: 2500; }
    .modal#patchNoteModal .modal-content {
      max-width: 620px !important;
      width: 94% !important;
      padding: 0 !important;
      border-radius: 20px !important;
      border: 1px solid rgba(0,0,0,.08) !important;
      box-shadow: 0 24px 60px rgba(0,0,0,.28) !important;
      background: #fff !important;
      color: #333;
      overflow: hidden !important;
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      animation: patchNotePop .35s cubic-bezier(.34,1.56,.64,1);
    }
    body.dark-mode .modal#patchNoteModal .modal-content {
      background: #1e1e1e !important;
      color: #e0e0e0;
      border-color: #333 !important;
    }
    @keyframes patchNotePop {
      from { opacity: 0; transform: translateY(24px) scale(.96); }
      to   { opacity: 1; transform: none; }
    }
    .pn-head {
      background: linear-gradient(135deg,#3b82f6,#8b5cf6);
      padding: 20px 24px; color: #fff; position: relative; flex-shrink: 0;
      display: flex; align-items: center; gap: 12px;
    }
    .pn-head::after {
      content:''; position:absolute; left:0; right:0; bottom:0; height:4px;
      background: linear-gradient(90deg,#00e1ff,#8b5cf6,#ff9800,#ff5722,#00e1ff);
      background-size:200% 100%; animation: pnBorder 3s linear infinite;
    }
    @keyframes pnBorder { to { background-position:200% 0; } }
    .pn-head .pn-head-icon {
      width: 44px; height: 44px; border-radius: 12px; flex-shrink:0;
      background: rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
      font-size: 1.3rem;
    }
    .pn-head .pn-head-title { font-size: 1.25rem; font-weight: 800; line-height:1.2; }
    .pn-head .pn-head-sub { font-size: 0.78rem; opacity:.9; margin-top:2px; }
    .pn-close {
      position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
      background: rgba(255,255,255,.22); border: none; color: #fff; cursor: pointer; font-size: 1.1rem;
      display:flex; align-items:center; justify-content:center; transition:.2s;
    }
    .pn-close:hover { background: rgba(255,255,255,.45); transform: rotate(90deg); }
    .pn-body { padding: 22px 24px 26px; overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
    #patchNoteContent { font-size: 0.94rem; line-height: 1.7; white-space: pre-wrap; color: var(--text-color,#333); }

    /* Better list items on all devices */
    .pn-display-item { gap: 14px; padding: 14px; }
    .pn-display-desc { word-break: break-word; overflow-wrap: anywhere; }
    .pn-display-cat { display: inline-flex; align-items:center; gap:6px; }

    /* Responsive */
    @media (max-width: 600px) {
      .modal#patchNoteModal .modal-content { width: 96% !important; max-height: 92vh; border-radius: 18px !important; }
      .pn-head { padding: 16px 18px; }
      .pn-head .pn-head-icon { width: 38px; height: 38px; font-size: 1.1rem; }
      .pn-head .pn-head-title { font-size: 1.08rem; }
      .pn-body { padding: 16px 16px 20px; }
      .pn-display-item { padding: 11px; gap: 9px; }
      .pn-display-icon { width: 34px; height: 34px; font-size: 1rem; border-radius: 9px; }
      .pn-display-cat { font-size: 0.66rem; letter-spacing: .4px; }
      .pn-display-desc { font-size: 0.85rem; }
    }
    @media (max-width: 360px) {
      .modal#patchNoteModal .modal-content { width: 100% !important; border-radius: 0 !important; max-height: 100vh; }
      .pn-head { border-radius: 0; }
      .pn-close { top: 12px; right: 12px; }
    }

/* ===== blok CSS #5 (dari index.html) ===== */
.settings-menu-item:hover { background: rgba(0,0,0,0.05); }
          body.theme-merdeka2026 .settings-menu-content { background: #1e0505 !important; border-color: rgba(251,191,36,0.2) !important; color: #f0e6d3 !important; }
          body.theme-merdeka2026 .settings-menu-item { color: #f0e6d3 !important; border-bottom: 1px solid rgba(251,191,36,0.1); }
          body.theme-merdeka2026 .settings-menu-item:hover { background: rgba(251,191,36,0.1) !important; }
          body.theme-merdeka2026 .settings-menu-item span { color: #f0e6d3 !important; }
          body.theme-merdeka2026 .settings-menu-item small, body.theme-merdeka2026 .settings-menu-item div > span:last-child { color: rgba(240,230,211,0.7) !important; }

/* ===== blok CSS #6 (dari index.html) ===== */
.event-top-banner {
      display: none;
      background: linear-gradient(90deg, #DC2626, #EF4444);
      color: white;
      padding: 10px;
      text-align: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9999;
      cursor: pointer;
      font-size: 0.9rem;
    }

    .event-top-banner.active {
      display: block;
    }

    .event-float-btn {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #DC2626;
      color: white;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: none;
      font-size: 1.5rem;
      box-shadow: 0 5px 15px rgba(220, 38, 38, 0.4);
      cursor: pointer;
      z-index: 9998;
    }

    .event-float-btn.active {
      display: block;
    }

    .event-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 10000;
      justify-content: center;
      align-items: center;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .event-modal-overlay.active {
      display: flex;
      opacity: 1;
    }

    .event-modal-card {
      background: linear-gradient(135deg, #ffffff 0%, #fcfcfc 100%);
      padding: 35px 30px;
      border-radius: 24px;
      text-align: center;
      max-width: 420px;
      width: 90%;
      position: relative;
      overflow: hidden;
      box-shadow: 0 25px 50px -12px rgba(220, 38, 38, 0.25);
      border: 1px solid rgba(220, 38, 38, 0.1);
      transform: translateY(20px) scale(0.95);
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .event-modal-overlay.active .event-modal-card {
      transform: translateY(0) scale(1);
    }

    .event-modal-close {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(0,0,0,0.04);
      border: none;
      font-size: 1.2rem;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #888;
      transition: all 0.2s ease;
    }
    
    .event-modal-close:hover {
      background: rgba(220, 38, 38, 0.1);
      color: #DC2626;
      transform: rotate(90deg);
    }

    .event-modal-flag img {
      width: 65px;
      border-radius: 6px;
      margin-bottom: 15px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
      animation: flagWiggle 3s infinite ease-in-out;
    }

    @keyframes flagWiggle {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }

    .event-modal-title {
      font-size: 1.7rem;
      font-weight: 800;
      color: #DC2626;
      margin-bottom: 8px;
      line-height: 1.2;
      background: linear-gradient(90deg, #DC2626, #991b1b);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .event-modal-subtitle {
      font-size: 0.95rem;
      color: #555;
      margin-bottom: 25px;
      font-weight: 500;
    }

    .event-modal-features {
      display: flex;
      justify-content: space-around;
      margin-bottom: 30px;
      padding: 15px 10px;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    }

    .event-modal-feat {
      text-align: center;
      color: #495057;
      font-size: 0.85rem;
      font-weight: 600;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .event-modal-feat:hover {
      transform: translateY(-5px);
    }

    .event-modal-feat i {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 45px;
      height: 45px;
      margin: 0 auto 8px;
      font-size: 1.4rem;
      color: white;
      background: linear-gradient(135deg, #DC2626, #b91c1c);
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(220, 38, 38, 0.3);
    }

    .event-modal-cta {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
      border: none;
      padding: 16px 24px;
      border-radius: 12px;
      cursor: pointer;
      font-weight: 700;
      width: 100%;
      font-size: 1.15rem;
      letter-spacing: 0.5px;
      box-shadow: 0 8px 20px -5px rgba(220, 38, 38, 0.4);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .event-modal-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 25px -5px rgba(220, 38, 38, 0.5);
    }
    
    .event-modal-cta:active {
      transform: translateY(1px);
    }

    @media (max-width: 768px) {
      .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 30px 20px;
      }

      .profile-actions {
        justify-content: center;
      }

      .profile-stats {
        justify-content: center;
        gap: 15px;
      }

      .profile-stat-value {
        font-size: 1.4rem;
      }

      .profile-body {
        padding: 20px;
      }

      .profile-tabs {
        justify-content: center;
      }

      .profile-tab {
        padding: 10px 15px;
        font-size: 0.85rem;
      }
    }
  /* EXTENDED NUSANTARA JAYA 81 THEME - UNIQUE NAVBAR & ELEMENTS */
body.theme-merdeka2026 header {
  background: linear-gradient(105deg, #d80000 0%, #d80000 22%, #ffffff 22.1%, #ffffff 100%) !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4) !important;
  border-bottom: 4px solid #ffcc00 !important;
  position: relative;
}

body.theme-merdeka2026 .header-left .header-brand {
  color: #fff !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

body.theme-merdeka2026 .header-nav .nav-link {
  color: #444 !important;
  font-weight: 700;
  border-radius: 20px;
  padding: 6px 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
}

body.theme-merdeka2026 .header-nav .nav-link i {
  color: #d80000 !important;
}

body.theme-merdeka2026 .header-nav .nav-link:hover {
  background: #fff0f0 !important;
  color: #d80000 !important;
  border: 1px solid #ffcccc;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(220, 38, 38, 0.15);
}

body.theme-merdeka2026 .user-dropdown-menu {
  background: #ffffff !important;
  border: 2px solid #d80000 !important;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(220, 38, 38, 0.25) !important;
  overflow: hidden;
}

body.theme-merdeka2026 .user-dropdown-menu a {
  color: #333 !important;
  font-weight: 600;
  transition: all 0.2s;
}

body.theme-merdeka2026 .user-dropdown-menu a:hover {
  background: linear-gradient(90deg, #fff0f0, #ffffff) !important;
  color: #d80000 !important;
  padding-left: 20px;
}

/* Bamboo pattern background and flag ribbon */
body.theme-merdeka2026::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 20px, transparent 20px, transparent 40px), 
                    repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 20px, transparent 20px, transparent 40px);
  pointer-events: none;
  z-index: -1;
}

body.theme-merdeka2026::after {
  content: '???? MERDEKA!';
  position: fixed;
  bottom: 30px;
  right: 30px;
  font-size: 1.5rem;
  font-weight: 900;
  color: #d80000;
  text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
  z-index: 9999;
  pointer-events: none;
  animation: floatFlag 3s ease-in-out infinite;
}

@keyframes floatFlag {
  0% { transform: translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-10px) rotate(3deg) scale(1.05); }
  100% { transform: translateY(0px) rotate(0deg) scale(1); }
}

body.theme-merdeka2026 {
  border-left: 8px solid #d80000;
  border-right: 8px solid #ffffff;
}
/* EXTENDED NUSANTARA JAYA 81 THEME - TIM & ORIGEN CARDS */

/* ORNAMEN UNTUK TIM LITDIGI (FLIP CARDS) */
body.theme-merdeka2026 .flip-card-inner {
  border: 2px solid #d80000;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(216, 0, 0, 0.3) !important;
}

body.theme-merdeka2026 .flip-card-front {
  background: linear-gradient(135deg, #d80000 0%, #b30000 100%) !important;
  color: white !important;
  border: 2px dashed #ffcc00;
}

body.theme-merdeka2026 .flip-card-front i, 
body.theme-merdeka2026 .flip-card-front span {
  color: #ffffff !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

body.theme-merdeka2026 .flip-card-back {
  background: #ffffff !important;
  color: #333 !important;
  border: 2px solid #d80000;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96 1.43 1.43-23.96 23.96 1.43 1.43 23.96-23.96' fill='%23d80000' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
}

/* ORNAMEN UNTUK ORIGEN CARDS */
body.theme-merdeka2026 .origen-card {
  background: #ffffff !important;
  border: 2px solid #d80000 !important;
  border-top: 8px solid #d80000 !important;
  box-shadow: 0 10px 20px rgba(216, 0, 0, 0.15) !important;
  color: #333 !important;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

body.theme-merdeka2026 .origen-card::after {
  content: '????';
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  opacity: 0.8;
  z-index: 0;
}

body.theme-merdeka2026 .origen-card-title {
  color: #d80000 !important;
  font-weight: 800;
  position: relative;
  z-index: 1;
}

body.theme-merdeka2026 .origen-card-text {
  color: #555 !important;
  position: relative;
  z-index: 1;
}

body.theme-merdeka2026 .origen-card-icon {
  color: #ffffff !important;
  background: #d80000 !important;
  border: 2px solid #ffcc00 !important;
}

/* Container Enhancements for Tim and Origen sections */
body.theme-merdeka2026 .tim-container {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid #ffcccc !important;
  border-radius: 20px;
  background-image: repeating-linear-gradient(45deg, rgba(216,0,0,0.02) 0px, rgba(216,0,0,0.02) 10px, transparent 10px, transparent 20px) !important;
}

/* Button enhancements */
body.theme-merdeka2026 .btn-outline {
  border: 2px solid #d80000 !important;
  color: #d80000 !important;
  font-weight: bold;
}
body.theme-merdeka2026 .btn-outline:hover {
  background: #d80000 !important;
  color: #ffffff !important;
}


    .socmed-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--card-bg, #fff);
      color: var(--text-color, #333);
      text-decoration: none;
      font-size: 1rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .socmed-badge:hover {
      transform: translateY(-2px);
      color: #fff;
    }
    .socmed-badge.ig:hover { background: #E1306C; border-color: #E1306C; }
    .socmed-badge.fb:hover { background: #1877F2; border-color: #1877F2; }
    .socmed-badge.yt:hover { background: #FF0000; border-color: #FF0000; }

  
    /* --- CREATIVE STUDIO MODE --- */
    .studio-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 24px;
      align-items: start;
    }
    .studio-panel {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      border: 1px solid #eaeaea;
    }
    @media (max-width: 768px) {
      .studio-grid {
        grid-template-columns: 1fr;
      }
    }

/* ===== blok CSS #7 (dari index.html) ===== */
body.theme-merdeka2026::after {
  display: none !important;
  content: none !important;
}

    .socmed-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--card-bg, #fff);
      color: var(--text-color, #333);
      text-decoration: none;
      font-size: 1rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .socmed-badge:hover {
      transform: translateY(-2px);
      color: #fff;
    }
    .socmed-badge.ig:hover { background: #E1306C; border-color: #E1306C; }
    .socmed-badge.fb:hover { background: #1877F2; border-color: #1877F2; }
    .socmed-badge.yt:hover { background: #FF0000; border-color: #FF0000; }

  
    /* --- CREATIVE STUDIO MODE --- */
    .studio-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 24px;
      align-items: start;
    }
    .studio-panel {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      border: 1px solid #eaeaea;
    }
    @media (max-width: 768px) {
      .studio-grid {
        grid-template-columns: 1fr;
      }
    }

/* ===== blok CSS #8 (dari index.html) ===== */
/* EXTENDED NUSANTARA JAYA 81 THEME - KARYA & PROFIL */

/* KARYA (Fungsi: Membaca/Literatur -> Tema: Dokumen Klasik / Naskah Proklamasi) */
body.theme-merdeka2026 .karya-card {
  background: #fffdf5 !important;
  border: 1px solid #c8a165 !important;
  border-left: 10px solid #d80000 !important;
  box-shadow: 4px 4px 12px rgba(0,0,0,0.15) !important;
  border-radius: 4px !important;
  position: relative;
}

body.theme-merdeka2026 .karya-card::after {
  content: '??';
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  opacity: 0.6;
}

body.theme-merdeka2026 .karya-title {
  color: #a30000 !important;
  font-family: "Georgia", serif !important;
}

body.theme-merdeka2026 .karya-card:hover {
  background: #ffffff !important;
  box-shadow: 6px 6px 16px rgba(216,0,0,0.2) !important;
  transform: translateY(-4px);
}

/* PROFIL SAYA (Fungsi: Identitas/Pangkat -> Tema: Pejuang / Lencana Emas) */
body.theme-merdeka2026 .profile-container {
  background: #fffdf5 !important;
  border: 3px solid #d80000 !important;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(216, 0, 0, 0.25) !important;
  position: relative;
  overflow: hidden;
}

body.theme-merdeka2026 .profile-header {
  background: linear-gradient(135deg, #d80000 0%, #b30000 100%) !important;
  border-bottom: 4px solid #ffcc00 !important;
  color: #fff !important;
  position: relative;
}

body.theme-merdeka2026 .profile-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 10px, transparent 10px, transparent 20px);
  pointer-events: none;
}

body.theme-merdeka2026 .profile-header h2,
body.theme-merdeka2026 .profile-header p,
body.theme-merdeka2026 .profile-header span,
body.theme-merdeka2026 .profile-header i {
  color: #ffffff !important;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5) !important;
}

body.theme-merdeka2026 .profile-avatar {
  border: 4px solid #ffcc00 !important; 
  box-shadow: 0 0 15px rgba(255, 204, 0, 0.6) !important;
  background: #fff;
}

body.theme-merdeka2026 .profile-stats-box {
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,204,0,0.5) !important;
  border-radius: 10px;
}

body.theme-merdeka2026 .profile-stats-box .stat-num {
  color: #ffcc00 !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

body.theme-merdeka2026 .profile-stats-box .stat-label {
  color: #eeeeee !important;
}

/* XP Bar untuk Pejuang */
body.theme-merdeka2026 .xp-bar-container {
  background: #e0e0e0 !important;
  border: 1px solid #d80000 !important;
}

body.theme-merdeka2026 .xp-bar-fill {
  background: linear-gradient(90deg, #d80000, #ffcc00) !important;
  box-shadow: 0 0 10px rgba(255, 204, 0, 0.5) !important;
}

    .socmed-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--card-bg, #fff);
      color: var(--text-color, #333);
      text-decoration: none;
      font-size: 1rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .socmed-badge:hover {
      transform: translateY(-2px);
      color: #fff;
    }
    .socmed-badge.ig:hover { background: #E1306C; border-color: #E1306C; }
    .socmed-badge.fb:hover { background: #1877F2; border-color: #1877F2; }
    .socmed-badge.yt:hover { background: #FF0000; border-color: #FF0000; }

  
    /* --- CREATIVE STUDIO MODE --- */
    .studio-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 24px;
      align-items: start;
    }
    .studio-panel {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      border: 1px solid #eaeaea;
    }
    @media (max-width: 768px) {
      .studio-grid {
        grid-template-columns: 1fr;
      }
    }

/* ===== blok CSS #9 (dari index.html) ===== */
/* ========================================================
   REVISI TOTAL: DESAIN KEMERDEKAAN (INTERAKTIF & UNIK)
   ======================================================== */

/* 1. APA ITU LITDIGI (Tema: Monumen Sejarah & Visi Bangsa) */
body.theme-merdeka2026 .info-card {
  background: linear-gradient(to bottom, #ffffff, #fdfdfd) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(216,0,0,0.1) !important;
  border-top: 8px solid #d80000 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
  position: relative;
  overflow: hidden;
}
/* Aksen bendera diagonal di pojok */
body.theme-merdeka2026 .info-card::before {
  content: '';
  position: absolute;
  top: -20px; right: -20px;
  width: 60px; height: 60px;
  background: linear-gradient(135deg, #d80000 50%, #ffffff 50%);
  transform: rotate(45deg);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
body.theme-merdeka2026 .info-card:hover {
  transform: translateY(-15px) scale(1.03) !important;
  box-shadow: 0 20px 40px rgba(216,0,0,0.25) !important;
  border-color: #d80000 !important;
}
body.theme-merdeka2026 .info-card i {
  color: #d80000 !important;
  text-shadow: 0 0 15px rgba(216,0,0,0.4) !important;
  transform: scale(1.2);
  transition: all 0.3s ease;
}
body.theme-merdeka2026 .info-card:hover i {
  transform: scale(1.5) rotate(10deg);
}


/* 2. JELAJAHI KARYA (Tema: Arsip Sastra & Buku Perjuangan) */
body.theme-merdeka2026 .karya-showcase {
  background: radial-gradient(circle at center, #fffdf5 0%, #f4e8d8 100%) !important;
  border-radius: 20px;
  border: 2px dashed #c8a165;
  padding: 30px;
}
body.theme-merdeka2026 .karya-card {
  background: linear-gradient(to right, #f4e8d8 0%, #fffdf5 10%, #fffdf5 100%) !important;
  border-left: 15px solid #8b0000 !important; /* Punggung buku merah tua */
  border-radius: 5px 15px 15px 5px !important;
  box-shadow: 5px 10px 20px rgba(0,0,0,0.15), inset 2px 0 5px rgba(0,0,0,0.1) !important;
}
body.theme-merdeka2026 .karya-card:hover {
  transform: perspective(800px) rotateY(-5deg) translateY(-10px) !important;
  box-shadow: 15px 15px 30px rgba(139,0,0,0.3) !important;
}
/* Pita pembatas buku */
body.theme-merdeka2026 .karya-card::after {
  content: '';
  position: absolute;
  top: -5px; right: 25px;
  width: 15px; height: 40px;
  background: linear-gradient(to bottom, #ffcc00, #b38600);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  transition: all 0.3s;
}
body.theme-merdeka2026 .karya-card:hover::after {
  height: 60px;
}


/* 3. ORIGEN (Tema: Surat Perintah / Dokumen Rahasia Pejuang) */
body.theme-merdeka2026 .origen-section {
  background: #2b2b2b !important; /* Meja kayu/gelap */
  padding: 40px;
  border-radius: 15px;
  border: 3px solid #1a1a1a;
}
body.theme-merdeka2026 .origen-card {
  background: #f4ebd0 !important; /* Kertas perkamen kuning tua */
  border: 1px solid #d4c39f !important;
  border-radius: 2px !important;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3), inset 0 0 40px rgba(139,69,19,0.1) !important;
  padding: 25px !important;
  transform: rotate(-1deg);
  transition: all 0.4s ease !important;
}
body.theme-merdeka2026 .origen-card:nth-child(even) {
  transform: rotate(1.5deg);
}
body.theme-merdeka2026 .origen-card:hover {
  transform: rotate(0deg) scale(1.05) translateY(-5px) !important;
  box-shadow: 10px 15px 30px rgba(0,0,0,0.5) !important;
  z-index: 10;
}
/* Stempel "SAH / MERDEKA" di Origen */
body.theme-merdeka2026 .origen-card::before {
  content: 'MERDEKA';
  position: absolute;
  bottom: 20px; right: 20px;
  font-size: 2rem;
  font-weight: 900;
  font-family: "Courier New", Courier, monospace;
  color: rgba(216,0,0,0.2);
  border: 4px solid rgba(216,0,0,0.2);
  border-radius: 5px;
  padding: 5px 10px;
  transform: rotate(-15deg);
  pointer-events: none;
}
body.theme-merdeka2026 .origen-card-title,
body.theme-merdeka2026 .origen-card-text {
  font-family: "Courier New", Courier, monospace !important; /* Font mesin tik */
  color: #3e2723 !important;
  font-weight: bold;
}


/* 4. PROFIL SAYA & XP BAR (Tema: Panglima / Lencana Emas) */
/* Memaksa Override semua XP Bar (inline style killer) */
body.theme-merdeka2026 .exp-bar-fill,
body.theme-merdeka2026 .level-progress-bar,
body.theme-merdeka2026 #expBarFill,
body.theme-merdeka2026 #simProgressBar,
body.theme-merdeka2026 .reading-progress-bar {
  background: linear-gradient(90deg, #8b0000, #ff2a2a, #ffcc00, #ffffff) !important;
  background-size: 200% 100% !important;
  box-shadow: 0 0 15px rgba(255, 42, 42, 0.8), inset 0 0 5px rgba(255,255,255,0.8) !important;
  animation: xpGlowPulse 2s linear infinite !important;
  border-radius: 10px !important;
}
@keyframes xpGlowPulse {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

body.theme-merdeka2026 .profile-container {
  background: linear-gradient(135deg, #2b0000, #5c0000) !important; /* Aura gelap elegan merah */
  border: 4px solid #ffcc00 !important; /* Emas menyala */
  border-radius: 20px !important;
}
body.theme-merdeka2026 .profile-header {
  background: transparent !important;
  border-bottom: 2px dashed rgba(255,204,0,0.5) !important;
}
body.theme-merdeka2026 .profile-avatar {
  border: 6px solid #ffcc00 !important;
  box-shadow: 0 0 30px rgba(255, 204, 0, 0.8), inset 0 0 10px rgba(0,0,0,0.5) !important;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}
body.theme-merdeka2026 .profile-avatar:hover {
  transform: scale(1.1) rotate(5deg) !important;
}
body.theme-merdeka2026 .profile-stats-box {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #ffcc00 !important;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5) !important;
  transition: all 0.3s;
}
body.theme-merdeka2026 .profile-stats-box:hover {
  background: rgba(216, 0, 0, 0.4) !important;
  transform: translateY(-5px);
}

    .socmed-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--card-bg, #fff);
      color: var(--text-color, #333);
      text-decoration: none;
      font-size: 1rem;
      border: 1px solid rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .socmed-badge:hover {
      transform: translateY(-2px);
      color: #fff;
    }
    .socmed-badge.ig:hover { background: #E1306C; border-color: #E1306C; }
    .socmed-badge.fb:hover { background: #1877F2; border-color: #1877F2; }
    .socmed-badge.yt:hover { background: #FF0000; border-color: #FF0000; }

  
    /* --- CREATIVE STUDIO MODE --- */
    .studio-grid {
      display: grid;
      grid-template-columns: 1fr 1.5fr;
      gap: 24px;
      align-items: start;
    }
    .studio-panel {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.05);
      border: 1px solid #eaeaea;
    }
    @media (max-width: 768px) {
      .studio-grid {
        grid-template-columns: 1fr;
      }
    }