/* =====================================================
 * ZONA ASUPAN69 — style.css v10.1
 * Mobile-First | Production-Ready | Theme-Aware
 * ===================================================== */

/* ══ TOKENS — DARK ════════════════════════════════════ */
:root,[data-theme="dark"]{
    --magenta:      #e040fb;        
      --cyan:         #00e5ff;        
           --primary:      #9069E9;
  --bg:#08061a;--bg-2:#0e0c24;--bg-3:#12102e;--bg-4:#1a1640;
  --line:rgba(144,105,233,.14);--line-2:rgba(144,105,233,.24);
  --rose:#d400d4;--rose-lt:#f04df0;--rose-dim:rgba(212,0,212,.12);
  --rose-dim2:rgba(212,0,212,.22);--rose-deep:#9069e9;
  --gold:#00c8e0;--gold-lt:#00eeff;--gold-dim:rgba(0,200,224,.12);
  --lav:#9069e9;--lav-dim:rgba(144,105,233,.15);
  --t1:#f0eeff;--t2:#9b8ec4;--t3:#4e4480;
  --emerald:#34d399;--amber:#fbbf24;
  --r-sm:10px;--r-md:14px;--r-lg:18px;--r-full:9999px;
  --trans:.2s ease;
  --header-bg:rgba(8,6,26,.96);
  --card-bg:#0e0c24;
  --card-border:rgba(144,105,233,.2);
  --card-hover-border:#9069e9;
  --input-bg:#13102e;--input-border:rgba(144,105,233,.2);
  --input-focus:#9069e9;
  --scroll-thumb:rgba(144,105,233,.35);
}

/* ══ TOKENS — LIGHT ═══════════════════════════════════ */
[data-theme="light"]{
  
    --magenta:      #e040fb;        
      --cyan:         #00e5ff;        
           --primary:      #9069E9;
  --bg:#f4f0ff;--bg-2:#fff;--bg-3:#ede8ff;--bg-4:#e0d8ff;
  --line:rgba(144,105,233,.12);--line-2:rgba(144,105,233,.22);
  --rose:#b800b8;--rose-lt:#d400d4;--rose-dim:rgba(184,0,184,.09);
  --rose-dim2:rgba(184,0,184,.18);--rose-deep:#9069e9;
  --gold:#007f99;--gold-lt:#00c8e0;--gold-dim:rgba(0,127,153,.1);
  --lav:#9069e9;--lav-dim:rgba(144,105,233,.12);
  --t1:#1a1040;--t2:#5a4a90;--t3:#a090cc;
  --header-bg:rgba(244,240,255,.97);
  --card-bg:#fff;
  --card-border:rgba(144,105,233,.18);
  --card-hover-border:#9069e9;
  --input-bg:#fff;--input-border:rgba(144,105,233,.22);
  --input-focus:#9069e9;
  --scroll-thumb:rgba(144,105,233,.3);
}

/* ══ KEYFRAMES ════════════════════════════════════════ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateX(16px)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes floatUpDown{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fadeInPanel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes scrollBtnIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes dlShimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes dlModalIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.78)}65%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes dlModalOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.82)}}
@keyframes tgBoxIn{from{opacity:0;transform:scale(.85) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes scaleIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes gentleBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ══ RESET ════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;height:100%;-webkit-tap-highlight-color:transparent}
body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background-color:var(--bg);color:var(--t1);
  line-height:1.6;min-height:100vh;overflow-x:hidden;
  transition:background-color .3s ease,color .3s ease;
}
[data-theme="dark"] body{
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.022'/%3E%3C/svg%3E");
  background-size:256px;
   background-attachment: fixed;
}
@media(max-width:480px){
  [data-theme="dark"] body{
    background-image: none;
  }
}
img{max-width:100%;height:auto;display:block;border:0}
button,a{font:inherit;cursor:pointer;border:none;background:none;transition:all .2s ease;touch-action:manipulation}
a{color:inherit;text-decoration:none}
input,textarea,select{font:inherit}

/* ══ FOCUS ════════════════════════════════════════════ */
button:focus-visible,a:focus-visible,input:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--lav);outline-offset:2px;border-radius:var(--r-sm);
}

/* ══ VISUALLY HIDDEN ══════════════════════════════════ */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;
  margin:-1px!important;padding:0!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ══ SCROLL PROGRESS ══════════════════════════════════ */
.scroll-progress{
  position:fixed;top:0;left:0;width:0;height:3px;
  background:linear-gradient(90deg,#9069e9,#d400d4,#00c8e0);
  z-index:200;transition:width .1s ease-out;will-change:width;
}

/* ══ HEADER ═══════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:150;
  background:var(--header-bg);
 backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
/* Fallback HP yang tidak support backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(8,6,26,.98);
  }
}

/* Matikan blur untuk user yang minta reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  #tg-overlay,
  .dl-popup-overlay {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
.header-inner{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;max-width:1400px;margin:0 auto;
}
.site-header::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(144,105,233,.08) 10%,
    rgba(144,105,233,.55) 35%,
    rgba(144,105,233,1) 50%,
    rgba(144,105,233,.55) 65%,
    rgba(144,105,233,.09) 90%,
    transparent 100%);
}
.header-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;overflow:hidden}

.brand-logo-wrap{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;
  border:1px solid #9069e9;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.brand-logo{width:36px;height:36px;border-radius:50%;object-fit:cover}

.brand-text{display:flex;flex-direction:column;gap:1px;min-width:0;overflow:hidden}
.brand-title{
  font-family:'Playfair Display',Georgia,serif;
  font-size:.85rem;font-weight:700;letter-spacing:.1px;line-height:1.1;margin:0;
  white-space:nowrap;overflow:hidden;
}
.brand-zona{
     line-height:1.1;
      background:linear-gradient(90deg,var(--cyan),var(--primary),var(--magenta));
      -webkit-background-clip:text; background-clip:text; color:transparent;

}
.brand-tagline{font-size:9px;color:var(--t2);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Theme Toggle ─────────────────────────────────── */
.theme-toggle{
  flex-shrink:0;display:flex;align-items:center;gap:6px;
  background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:var(--r-full);padding:5px 8px;cursor:pointer;
  font-size:11px;color:var(--t2);white-space:nowrap;
  transition:border-color var(--trans),color var(--trans);
}
.theme-toggle:hover{border-color:var(--lav);color:var(--lav)}
.toggle-track{
  width:30px;height:17px;border-radius:var(--r-full);
  background:var(--bg-4);border:1px solid var(--line-2);
  position:relative;transition:background .3s;flex-shrink:0;
}
[data-theme="dark"] .toggle-track{background:linear-gradient(135deg,#9069e9,#d400d4)}
[data-theme="light"] .toggle-track{background:linear-gradient(135deg,#c084fc,#9069e9)}
.toggle-knob{
  position:absolute;top:2px;left:2px;width:11px;height:11px;
  border-radius:50%;background:#fff;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] .toggle-knob{transform:translateX(12px)}

/* ══ HERO BANNER ══════════════════════════════════════ */
.hero-banner{position:relative;width:100%;overflow:hidden;background:var(--bg-2);line-height:0;border-bottom:1px solid var(--line)}
.hero-img{width:100%;height:130px;object-fit:cover;object-position:center 25%;display:block}
.hero-banner::after{
  content:'';position:absolute;inset:auto 0 0;height:65%;
  background:linear-gradient(transparent,var(--bg));pointer-events:none;
}
.hero-overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:10px 12px 14px;pointer-events:none;
}
.hero-tagline{
  font-family:'Playfair Display',Georgia,serif;
  font-size:11px;font-weight:700;color:#fff;
  margin-bottom:3px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-sub{
  font-size:9px;color:rgba(255,255,255,.6);
  letter-spacing:.3px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ══ TOOLBAR ══════════════════════════════════════════ */
.toolbar{padding:10px 10px 0;max-width:1400px;margin:0 auto}

.search-filter-container{display:flex;gap:8px;margin-bottom:6px;align-items:center}

/* ── Search ───────────────────────────────────────── */
.search-container-wrap{
  flex:1;position:relative;min-width:0;
}
.search-input-row{
  display:flex;align-items:center;
  background:var(--input-bg);
  border:1px solid var(--input-border);
  border-radius:var(--r-full);
  padding:7px 10px 7px 14px;
  height:auto;
  transition:border-color var(--trans);
  position:relative;
}

.search-input{
  flex:1;background:transparent;border:none;outline:none;
  color:var(--t1);font-size:12px;min-width:0;-webkit-appearance:none;
  padding:0;box-shadow:none;
}


.search-input:focus{
  outline:none;box-shadow:none;
}


.search-input-row:focus-within{
  border-color:var(--input-focus);
}
.search-input::placeholder{color:var(--t3)}
.search-input::-webkit-search-cancel-button{display:none}
.search-clear{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  background:rgba(120,120,160,.28);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background var(--trans);
  touch-action:manipulation;margin-right:3px;
}
.search-clear[hidden]{display:none}
.search-clear:hover{background:rgba(239,68,68,.35)}
.search-clear svg{width:11px;height:11px;color:var(--t2)}
.search-icon-end{
  flex-shrink:0;width:15px;height:15px;
  color:var(--t3);pointer-events:none;
  transition:color var(--trans);
}
.search-input-row:focus-within .search-icon-end{color:var(--lav)}

.search-results-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);z-index:300;
  display:none;overflow-y:auto;max-height:280px;
  box-shadow:0 9px 21px rgba(0,0,0,.35);
}
.search-results-dropdown.show{display:block;animation:fadeIn .2s ease}
.search-result-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;cursor:pointer;
  transition:background var(--trans);touch-action:manipulation;
}
.search-result-item:hover{background:var(--lav-dim)}
.search-result-item .sri-title{font-size:12px;font-weight:700;color:var(--gold-lt)}
.search-result-item .sri-meta{font-size:10px;color:var(--t3);margin-top:2px}

/* ── Category Dropdown ────────────────────────────── */
.category-dropdown-wrapper{flex-shrink:0;position:relative}
.category-dropdown-btn{
  display:flex;align-items:center;gap:5px;
  background:var(--input-bg);border:1px solid var(--input-border);
  border-radius:var(--r-full);padding:7px 10px;
  font-size:11px;font-weight:700;color:var(--t2);
  white-space:nowrap;transition:border-color var(--trans),color var(--trans),box-shadow var(--trans);
}
.category-dropdown-btn:hover{border-color:var(--lav);color:var(--lav)}
.category-dropdown-btn[aria-expanded="true"]{
  border-color:var(--input-focus);
  color:var(--lav);
  box-shadow:0 0 0 3px rgba(144,105,233,.15);
}
.dropdown-icon{transition:transform .25s ease;font-size:9px}
.category-dropdown-btn[aria-expanded="true"] .dropdown-icon{transform:rotate(180deg)}

.category-dropdown-menu{
  display:none;flex-direction:column;gap:2px;
  position:absolute;top:calc(100% + 6px);left:0;min-width:180px;
  background:var(--bg-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:4px;z-index:50;
}
.category-dropdown-menu.show{display:flex;animation:fadeIn .18s ease}
.category-item{
  display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;
  border-radius:var(--r-sm);color:var(--t1);font-size:12px;font-weight:600;
  text-align:left;cursor:pointer;transition:background var(--trans);position:relative;
}
.category-item:hover{background:var(--rose-dim)}
.category-item.active{background:var(--lav-dim);color:var(--lav)}
.category-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:60%;background:var(--lav);border-radius:2px;
}
[data-theme="light"] .category-item.active{color:var(--rose-deep)}
.category-item i{font-size:11px;flex-shrink:0}

/* ── Stats ────────────────────────────────────────── */
.stats-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:2px 2px 8px;font-size:9px;color:var(--t2);
  flex-wrap:wrap;gap:3px;letter-spacing:.3px;
}
.stats-count{color:var(--gold-lt);font-weight:700}
[data-theme="light"] .stats-count{color:var(--gold)}

/* ══ TABS ═════════════════════════════════════════════ */
.tabs{max-width:1400px;padding:0 10px}
.tab-panel{display:none}
.tab-panel.visible{display:block;animation:fadeInPanel .35s ease}

/* ══ VIDEO GRID ═══════════════════════════════════════ */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}

/* ══ SKELETON ═════════════════════════════════════════ */
.skeleton{
  background:linear-gradient(90deg,var(--bg-3) 25%,var(--bg-4) 50%,var(--bg-3) 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-md);
}

/* ══ VIDEO CARD — Poster Style ════════════════════════ */
.sidebar-item{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  cursor:pointer;display:flex;flex-direction:column;
  background:var(--card-bg);border:1.5px solid var(--card-border);
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .2s ease;
  animation:slideUp .35s ease both;will-change:transform;
}
.sidebar-item:hover{transform:translateY(-3px) scale(1.02);border-color:var(--card-hover-border)}
.sidebar-item:active{transform:scale(.97)}

/* ── Thumbnail ────────────────────────────────────── */
.thumb-wrap{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;flex-shrink:0}
.thumb-blur-bg{
  position:absolute;inset:-4px;
  background-size:cover;background-position:center;
  filter:blur(8px) brightness(.5) saturate(1.2);z-index:0;
}
.thumbnail{
  position:relative;z-index:1;width:100%;height:100%;
  object-fit:cover;display:block;transition:transform .3s ease;
}
.sidebar-item:hover .thumbnail{transform:scale(1.06)}

/* ── Card overlay ─────────────────────────────────── */
.card-overlay{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  background:linear-gradient(transparent 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.9) 100%);
  padding:24px 8px 8px;
}
.card-title{
  font-size:10px;font-weight:600;color:#fff;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-meta{font-size:8.5px;color:rgba(255,255,255,.55);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Card badge (hidden by design) ───────────────── */
.card-badge{display:none}

/* ══ SKELETON CARD ════════════════════════════════════ */
.skeleton-card{border:1.5px solid var(--card-border)}
.skeleton-card .thumb-wrap{aspect-ratio:3/4;background:none}
.skeleton-card .thumb-wrap .skeleton{width:100%;height:100%;border-radius:0}
.skeleton-card .card-overlay{display:none}

/* ══ LOAD MORE ════════════════════════════════════════ */
.load-more-wrapper{grid-column:1/-1;display:flex;justify-content:center;align-items:center;margin:10px 0 2px}
.load-more-btn-big{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px 7px 8px;background:var(--bg-2);
  border:1px solid var(--line-2);border-radius:var(--r-full);
  cursor:pointer;transition:border-color var(--trans),transform .2s ease;
}
.load-more-btn-big:hover{transform:translateY(-2px);border-color:var(--lav)}
.load-more-btn-big:active{transform:translateY(0)}
.load-more-arrow{
  width:22px;height:22px;background:var(--lav-dim);
  border:1px solid var(--lav);border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease,background var(--trans);
}
.load-more-btn-big:hover .load-more-arrow{transform:translateY(2px);background:var(--lav);border-color:var(--lav)}
.load-more-btn-big:hover .load-more-arrow i{color:#fff}
.load-more-arrow i{font-size:10px;color:var(--lav)}
.load-more-content{display:flex;flex-direction:column;gap:1px}
.load-more-title{font-size:11px;font-weight:700;color:var(--t1);letter-spacing:.2px}
.load-more-counter{font-size:9px;color:var(--t2)}

.load-complete-message{
  display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.3);border-radius:var(--r-full);
}
.load-complete-message i{font-size:14px;color:var(--emerald);animation:scaleIn .4s ease}
.complete-title{font-size:10px;font-weight:700;color:var(--emerald)}
.complete-count{font-size:9px;color:rgba(52,211,153,.6);margin-left:2px}/* ══ NO RESULT ════════════════════════════════════════ */
.no-result{text-align:center;padding:40px 20px;color:var(--t3);font-size:12px;line-height:2}
.no-result i{font-size:22px;margin-bottom:8px;display:block;color:var(--rose-dim2)}

/* ══ TOAST ════════════════════════════════════════════ */
.toast-container{
  position:fixed;top:68px;left:12px;z-index:9999;
  display:flex;flex-direction:column;gap:7px;pointer-events:none;
  width:calc(100% - 24px);
  max-width:320px;
}
.toast{
  pointer-events:all;width:100%;padding:9px 12px;
  border-radius:var(--r-sm);background:var(--bg-3);
  border:1px solid var(--line-2);color:var(--t1);
  font-size:11px;font-weight:700;display:flex;align-items:center;gap:8px;
  animation:toastIn .22s ease;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.toast.removing{animation:toastOut .22s ease forwards}
.toast-icon{font-size:12px;flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--rose-dim)}
.toast-content{flex:1;min-width:0}
.toast-title{font-size:11px;font-weight:700;color:var(--t1);margin-bottom:1px}
.toast-message{font-size:9.5px;color:var(--t2);line-height:1.4}
.toast-close{width:18px;height:18px;border-radius:50%;background:var(--line);color:var(--t2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;transition:background var(--trans),color var(--trans)}
.toast-close:hover{background:var(--rose-dim);color:var(--rose)}
.toast-success .toast-icon{color:var(--emerald);background:rgba(52,211,153,.15)}
.toast-error .toast-icon{color:#f87171;background:rgba(239,68,68,.15)}
.toast-info .toast-icon{color:var(--gold);background:var(--gold-dim)}
.toast-warning .toast-icon{color:var(--amber);background:rgba(251,191,36,.15)}

/* ══ TELEGRAM FLOAT ═══════════════════════════════════ */


.tg-float{
  position:fixed;bottom:90px;left:15px;z-index:999;
  display:flex;align-items:center;flex-direction:row-reverse;gap:10px;
  opacity:0;transform:translateY(14px) scale(.88);pointer-events:none;
  transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);
}
.tg-float.show{opacity:1;transform:translateY(0) scale(1);pointer-events:all}

.tg-float-inner{position:relative;flex-shrink:0}

.tg-float-btn{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#2AABEE,#229ED9);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 18px rgba(0,136,204,.39);
 
  text-decoration:none;touch-action:manipulation;
  color:#fff;font-size:26px;
}
.tg-float-btn:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(0,136,204,.69)}
.tg-float-btn .fa-telegram{font-size:26px}

.tg-float-close{
  width:18px;height:18px;border-radius:50%;
  background:rgba(20,16,50,.85);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:10px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s;
  position:absolute;top:-5px;right:-5px;
  line-height:1;padding:0;z-index:1;
  touch-action:manipulation;
}
.tg-float-close:hover{background:rgba(239,68,68,.9)}

.tg-tooltip{
  background:linear-gradient(90deg,rgba(34,158,217,.97),rgba(0,100,170,.97));
  color:#fff;font-size:12px;font-weight:700;
  padding:8px 14px;border-radius:99px;
  white-space:nowrap;
  box-shadow:0 3px 18px rgba(0,0,0,.3);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);

  letter-spacing:.2px;pointer-events:none;
  transition:opacity .3s ease;
}

/* ══ SCROLL TO TOP ════════════════════════════════════ */
#scrollTop{ position:fixed;bottom:70px;left:12px;z-index:998;
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#9069e9,#d400d4);
  border:1px solid #9069e9;color:#fff;font-size:11px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .3s,visibility .3s,transform .2s;
}
#scrollTop.show{opacity:1;visibility:visible;animation:scrollBtnIn .3s ease}
#scrollTop:hover{transform:translateY(-2px)}
#scrollTop:active{transform:translateY(0)}

/* ══ AD SLOTS ═════════════════════════════════════════ */
.ad-native-infeed{max-width:1400px;margin:10px auto 4px;padding:8px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);text-align:center;min-height:58px}
.ad-mid-content{width:100%;max-width:1400px;margin:12px auto;padding:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);text-align:center;overflow:hidden;min-height:58px}
.ad-banner-responsive{display:flex;justify-content:center;align-items:center;min-height:50px}
.ad-block-label{font-size:8px;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px;font-weight:600;text-align:center}
.ad-footer-banner{width:100%;background:var(--bg-2);border-top:1px solid var(--line);padding:8px 0;text-align:center;margin-top:4px}
.ad-footer-label{font-size:8px;color:var(--t3);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px;font-weight:600}
.ad-footer-content{display:flex;justify-content:center;align-items:center;min-height:50px}
.ad-footer-content iframe{max-width:100%;border:none;display:block}

/* ══ VIP OVERLAY ══════════════════════════════════════ */
.vip-overlay{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:100;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;backdrop-filter:blur(5px)}
.vip-overlay.show{opacity:1;visibility:visible}
.vip-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);width:93%;max-width:380px;z-index:110;opacity:0;visibility:hidden;transition:all .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.vip-popup.show{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;pointer-events:all}
.vip-card{background:var(--bg-2);border-radius:var(--r-lg);padding:20px 16px;border:1px solid var(--line-2);position:relative;overflow:hidden}
.vip-title{text-align:center;margin:0 0 14px;font-size:17px;font-weight:700;font-family:'Playfair Display',Georgia,serif;color:var(--t1)}
.vip-desc-card{margin:12px 0;background:var(--bg-3);padding:11px;border-radius:var(--r-sm);border:1px dashed var(--line-2)}
.vip-desc-text{margin:0;font-size:11px;line-height:1.6;color:var(--t1);text-align:center}
.vip-features-card{background:var(--bg-3);padding:11px;border-radius:var(--r-sm);border-left:3px solid var(--rose);margin:11px 0}
.vip-features-header{display:flex;align-items:center;justify-content:center;margin-bottom:7px}
.vip-features-header strong{font-size:12px;color:var(--gold-lt);font-weight:700}
.vip-features-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.vip-features-list li{position:relative;padding-left:18px;font-size:10.5px;line-height:1.5;color:var(--t2)}
.vip-features-list li::before{content:'✪';position:absolute;left:0;color:var(--rose);font-size:10px}
.vip-cta-text{text-align:center;margin:12px 0 10px;font-size:10.5px;font-weight:700;color:var(--gold-lt);letter-spacing:.1em}
.vip-buttons{display:flex;gap:7px;margin-bottom:10px}
.vip-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:10px;border-radius:var(--r-sm);background:var(--rose-dim);border:1px solid var(--rose-dim2);color:var(--t1);font-size:11px;font-weight:600;transition:border-color var(--trans)}
.vip-btn:hover{border-color:var(--rose)}
.vip-close-btn{width:100%;padding:10px;border-radius:var(--r-sm);background:var(--bg-3);border:1px solid var(--line-2);color:var(--t1);font-size:11px;font-weight:600;transition:background var(--trans)}
.vip-close-btn:hover{background:var(--bg-4)}

/* ══ WATCH PAGE ═══════════════════════════════════════ */
body.watch-page{padding:0}
.watch-page .header{
  position:sticky;top:0;z-index:150;
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;gap:10px;
  background:var(--header-bg);border-bottom:1px solid var(--line-2);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.watch-page-header{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;gap:10px}
.btn-back{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:var(--rose-dim);border:1px solid var(--rose-dim2);border-radius:var(--r-sm);color:var(--t1);font-size:11.5px;font-weight:600;flex-shrink:0;transition:background var(--trans),border-color var(--trans)}
.btn-back:hover{background:var(--rose-dim2);border-color:var(--rose)}
.btn-share{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;background:var(--gold-dim);border:1px solid var(--gold);border-radius:var(--r-sm);color:var(--t1);font-size:11.5px;font-weight:600;flex-shrink:0;margin-left:auto;transition:background var(--trans)}
.btn-share:hover{background:rgba(0,200,224,.2)}
.main-player{max-width:1400px;margin:0 auto 14px;background:var(--bg-2);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2)}
.video-container{position:relative;width:100%;background:#000}
.player-wrapper{position:relative;width:100%;padding-bottom:56.25%;background:#000;overflow:hidden}
.player-wrapper iframe,.player-iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;display:block;background:#000;z-index:10}
.loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--bg);z-index:100;color:var(--t1);font-size:12px;font-weight:600;transition:opacity .3s,visibility .3s}
.loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader{width:42px;height:42px;border:3px solid var(--lav-dim);border-top-color:var(--lav);border-radius:50%;animation:spin .8s linear infinite}
.video-info{padding:12px 14px;background:var(--bg-2)}
.video-title{font-family:'Playfair Display',Georgia,serif;font-size:15px;font-weight:700;color:var(--t1);margin:0 0 10px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.video-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.meta-left,.meta-right{display:flex;align-items:center;gap:6px;flex-wrap:nowrap}
.meta-item{display:inline-flex;align-items:center;gap:3px;font-size:9px;color:var(--t2);font-weight:500}
.meta-item i{font-size:9px;color:var(--lav)}
.action-btn{display:inline-flex;align-items:center;gap:3px;padding:6px 11px;background:var(--rose-dim);border:1px solid var(--rose-dim2);border-radius:var(--r-sm);color:var(--t1);font-size:10px;font-weight:600;white-space:nowrap;cursor:pointer;transition:background var(--trans),border-color var(--trans)}
.action-btn:hover{background:var(--rose-dim2);border-color:var(--rose)}
.action-btn.download{background:var(--gold-dim);border-color:var(--gold)}
.action-btn.download:hover{background:rgba(0,200,224,.2)}
.action-btn.download i{color:var(--gold-lt)}
.action-btn.telegram{background:rgba(0,136,204,.1);border-color:#0088cc}
.action-btn.telegram:hover{background:rgba(0,136,204,.2)}

/* ── Telegram Float (watch page) ──────────────────── */
.telegram-float{position:fixed;bottom:20px;left:12px;z-index:999;animation:floatUpDown 3s ease-in-out infinite;text-decoration:none;display:block}
.telegram-float-inner{display:inline-flex;align-items:center;border-radius:var(--r-full);overflow:hidden;transition:transform .2s ease}
.telegram-float-inner:hover{transform:scale(1.05)}
.telegram-float-inner:active{transform:scale(.97)}
.telegram-float-inner svg{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:#229ED9;padding:12px;color:#fff}
.telegram-label{
  display:inline-flex;align-items:center;
  background:rgba(20,16,50,.9);border:1px solid rgba(144,105,233,.35);
  border-left:none;border-radius:0 var(--r-full) var(--r-full) 0;
  padding:0 14px 0 10px;height:48px;
  font-size:12px;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:.2px;
}

/* ── Related videos ───────────────────────────────── */
.watch-page .tabs{padding:0 10px;max-width:1400px;margin:0 auto}
.watch-page .tabs h2{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:10px;padding:0 2px;display:flex;align-items:center;gap:7px}
.watch-page .tabs h2 i{color:var(--lav);font-size:12px}
.sidebar-container{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}

/* ── Ad containers ────────────────────────────────── */
.ad-native-container{max-width:1400px;margin:0 auto 14px;padding:8px 12px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-md);text-align:center;min-height:58px}
.ad-native-label{font-size:8px;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px;font-weight:600}

/* ── Download modal ───────────────────────────────── */
.download-modal{position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.download-modal.show{opacity:1;visibility:visible}
.download-modal-content{width:100%;max-width:340px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:24px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;animation:tgBoxIn .3s cubic-bezier(.34,1.56,.64,1)}

/* ── Ad countdown circle ──────────────────────────── */
.ad-circle-wrapper{position:relative;width:120px;height:120px;flex-shrink:0}
.ad-circle-svg{transform:rotate(-90deg)}
.ad-circle-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ad-countdown-num{font-size:32px;font-weight:800;line-height:1;background:linear-gradient(135deg,#9069e9,#00eeff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ad-countdown-label{font-size:10px;color:var(--t2);margin-top:2px}

/* ── Download action button ───────────────────────── */
.download-action-btn{
  width:100%;padding:12px 16px;
  background:linear-gradient(90deg,#9069e9,#d400d4,#00c8e0,#d400d4,#9069e9);
  background-size:300% auto;color:#fff;font-size:.9rem;font-weight:800;
  border:none;border-radius:var(--r-sm);cursor:pointer;
  letter-spacing:.04em;text-transform:uppercase;
  animation:dlShimmer 3s linear infinite;transition:opacity .2s;
}
.download-action-btn.disabled{background:var(--bg-4);border:1px solid var(--line-2);color:var(--t3);cursor:not-allowed;animation:none}
.download-action-btn:not(.disabled):active{transform:scale(.97)}
.modal-subtitle{font-size:11px;color:var(--t2);line-height:1.6;text-align:center}
.modal-footer-text{font-size:9.5px;color:var(--t3);display:flex;align-items:center;justify-content:center;gap:5px}
.modal-footer-text i{color:var(--emerald);font-size:10px}

/* ══ IFRAME CONTAINER ═════════════════════════════════ */
.iframe-container{position:relative;width:100%;min-height:100svh;background:#000;overflow:hidden;border-radius:var(--r-md)}
.iframe-container iframe{width:100%;height:100svh;border:none;display:block}

/* ══ DOWNLOAD POPUP ═══════════════════════════════════ */
.dl-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: visibility .35s;
}
.dl-popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
  animation: fadeIn .35s ease forwards;
}
.dl-popup-overlay.is-closing {
  animation: toastOut .28s ease forwards;
}
.dl-popup-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.78);
  z-index: 10000;
  width: calc(100% - 36px);
  max-width: 360px;
  max-height: 93svh;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  border-radius: 18px;
  border: 1px solid var(--line-2);
  opacity: 0;
}
.dl-popup-overlay.is-open .dl-popup-modal {
  animation: dlModalIn .45s cubic-bezier(.34,1.36,.64,1) .05s forwards;
}
.dl-popup-overlay.is-closing .dl-popup-modal {
  animation: dlModalOut .25s ease forwards;
}
.dl-popup-close {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 10;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.dl-popup-close:hover {
  background: rgba(144,105,233,.8);
  transform: rotate(90deg);
}
.dl-popup-img-wrap {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.dl-popup-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dl-popup-body {
  padding: 12px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

/* === TOMBOL DOWNLOAD – ANIMASI DETAK JANTUNG === */
.dl-popup-btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  background: linear-gradient(90deg, #9069e9, #d400d4); /* gradien tetap, tanpa shimmer */
  color: #fff;
  font-size: .9rem;
  font-weight: 800;
  border-radius: var(--r-sm);
  text-decoration: none;
  letter-spacing: .04em;
  text-transform: uppercase;
  animation: heartbeat 1.2s ease-in-out infinite;  /* detak jantung */
}

.dl-popup-btn-download:active {
  transform: scale(.96);
}

.dl-popup-btn-later {
  width: 100%;
  padding: 11px;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  color: var(--t2);
  font-size: .85rem;
  font-weight: 600;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: background var(--trans);
}
.dl-popup-btn-later:active {
  background: var(--bg-4);
}

/* === KEYFRAMES BARU === */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15%      { transform: scale(1.08); }
  30%      { transform: scale(1); }
  45%      { transform: scale(1.12); }
  60%      { transform: scale(1); }
}

/* ══ TG WEBVIEW OVERLAY ═══════════════════════════════ */
#tg-overlay{
  display:none;
  position:fixed;inset:0;z-index:99999;
  background:rgba(8,6,26,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  align-items:center;justify-content:center;padding:24px;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
#tg-overlay.show{
  display:flex !important;
}
.tg-box{background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px 20px 22px;max-width:340px;width:100%;text-align:center;animation:tgBoxIn .3s cubic-bezier(.34,1.56,.64,1)}
.tg-icon{font-size:42px;margin-bottom:10px;line-height:1}
.tg-title{font-family:'Playfair Display',Georgia,serif;font-size:18px;font-weight:700;background:linear-gradient(90deg,#c084fc,#00eeff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:7px}
.tg-desc{font-size:11.5px;color:var(--t2);line-height:1.7;margin-bottom:18px}
.tg-desc strong{color:var(--t1)}
.tg-btn-primary{display:block;width:100%;padding:11px 14px;margin-bottom:8px;background:linear-gradient(135deg,#9069e9,#d400d4);border:none;border-radius:var(--r-md);color:#fff;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;transition:opacity .18s}
.tg-btn-primary:hover{opacity:.9}
.tg-btn-primary:active{transform:scale(.97)}
.tg-step{display:flex;align-items:flex-start;gap:9px;background:var(--rose-dim);border:1px solid var(--rose-dim2);border-radius:var(--r-sm);padding:10px;margin-bottom:10px;text-align:left}
.tg-step-num{width:20px;height:20px;flex-shrink:0;background:var(--rose-dim2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--rose-lt);margin-top:1px}
.tg-step-text{font-size:11.5px;color:var(--t2);line-height:1.5}
.tg-step-text strong{color:var(--t1)}

/* ══ FOOTER ═══════════════════════════════════════════ */
.footer-copyright{text-align:center;padding:16px 12px;font-size:9.5px;color:var(--t3);border-top:1px solid var(--line);letter-spacing:.3px}
.footer-copyright p{margin:0;line-height:1.6}
.footer-copyright strong{color:var(--t2)}
.heart{color:var(--rose);animation:heartbeat 1.8s ease-in-out infinite;display:inline-block}

/* ══ SCROLLBAR ════════════════════════════════════════ */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--lav)}

body.modal-open{overflow:hidden}

/* ══ RESPONSIVE ═══════════════════════════════════════ */
@media(min-width:480px){
  .video-grid{grid-template-columns:repeat(3,1fr);gap:9px}
}
@media(min-width:640px){
  .video-grid{grid-template-columns:repeat(4,1fr);gap:10px}
  .sidebar-container{grid-template-columns:repeat(4,1fr);gap:10px}
}
@media(min-width:768px){
/* Search bar lebih nyaman di tablet/desktop */
  .search-input{ font-size:12px; }
  .search-results-dropdown{ max-height:380px; }
  .search-result-item{ padding:10px 16px; }
  .sri-thumb{ width:54px; height:72px; }
  .sri-title{ font-size:12px; }

  /* Toast pindah ke kanan di desktop */
  .toast-container{
    left:auto;
    right:16px;
    width:300px;
  }

  /* Download popup lebih besar di desktop */
  .dl-popup-modal{
    max-width:420px;
    border-radius:22px;
  }
  .dl-popup-img-wrap{
    max-height:380px;
    overflow:hidden;
  }
  .dl-popup-body{
    padding:16px 20px 22px;
  }
  .header-inner{padding:9px 18px}
  .brand-logo-wrap{width:44px;height:44px}
  .brand-logo{width:40px;height:40px}
  .brand-title{font-size:1rem}
  .brand-tagline{font-size:9.5px}
  .hero-img{height:180px}
  .hero-tagline{font-size:12px}
  .toolbar,.tabs{padding-left:14px;padding-right:14px}
  .video-grid{grid-template-columns:repeat(4,1fr);gap:11px}

  .category-dropdown-menu{left:0;min-width:190px}
  .sidebar-container{grid-template-columns:repeat(4,1fr);gap:11px}
  .watch-page .tabs,.ad-native-container{padding-left:16px;padding-right:16px}
}
@media(min-width:1024px){
  .search-container-wrap{ max-width:500px; }
  .category-dropdown-btn{ font-size:12px; padding:8px 14px; }
}

/* Tablet khusus: grid 4 kolom, judul tidak terlalu kecil */
@media(min-width:768px) and (max-width:1023px){
  .video-grid{ grid-template-columns:repeat(4,1fr); gap:10px; }
  .card-title{ font-size:11px; }
  .card-meta{ font-size:9px; }
}
@media(min-width:1024px){
  .header-inner{padding:10px 24px}
  .hero-img{height:220px}
  .toolbar,.tabs{padding-left:18px;padding-right:18px}
  .video-grid{grid-template-columns:repeat(5,1fr);gap:12px}
  .sidebar-container{grid-template-columns:repeat(5,1fr);gap:12px}
}
@media(min-width:1440px){
  .video-grid{grid-template-columns:repeat(6,1fr);gap:14px}
  .hero-img{ height:280px; }
  .header-inner{ padding:10px 32px; }
}
@media(min-width:1920px){
  .hero-img{ height:340px; }
  .header-inner{ padding:12px 48px; }
  .toolbar,.tabs{ padding-left:32px; padding-right:32px; }
}
@media(max-width:360px){
  .card-title{font-size:9px}
}

/* HP sangat kecil: 320px (iPhone SE lama, HP murah) */
@media(max-width:359px){
  .video-grid{ grid-template-columns: repeat(2,1fr); gap:6px; }
  .hero-img{ height:90px; }
  .brand-title{ font-size:.72rem; }
  .brand-tagline{ display:none; }
  .search-input{ font-size:11px; }
}   /* ← INI YANG HILANG */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media(prefers-contrast:high){
  .sidebar-item{border-width:2px}
}
@media print{
  .site-header,.hero-banner,.toolbar,.tg-float,
  #tg-overlay,.dl-popup-overlay,.scroll-progress,
  .toast-container,.ad-footer-banner,.ad-native-infeed,.ad-mid-content{display:none}
  body{background:#fff;color:#000}
}

/* ══ SEARCH DROPDOWN ENHANCED ════════════════════════ */
.sri-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px 6px;border-bottom:1px solid var(--line);
}
.sri-header-label{font-size:10px;color:var(--t3);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.sri-lihat-semua{
  font-size:11px;font-weight:700;color:var(--gold-lt);
  background:none;border:none;cursor:pointer;padding:0;
  transition:opacity .2s;
}
[data-theme="light"] .sri-lihat-semua{color:var(--gold)}
.sri-lihat-semua:hover{opacity:.7}

.search-result-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;cursor:pointer;
  transition:background var(--trans);touch-action:manipulation;
  border-bottom:1px solid var(--line);
}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover,.search-result-item:focus{
  background:var(--lav-dim);outline:none;
}
.sri-thumb{
  width:44px;height:58px;object-fit:cover;
  border-radius:6px;flex-shrink:0;
  border:1px solid var(--line-2);background:var(--bg-3);
}
.sri-info{flex:1;min-width:0}
.sri-title{
  font-size:12px;font-weight:700;color:var(--gold-lt);
  display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
  line-height:1.35;margin-bottom:3px;
}
[data-theme="light"] .sri-title{color:var(--gold)}
.sri-meta{font-size:10px;color:var(--t3)}
/* ══ JAV EMBED ════════════════════════════════════════ */
.jav-embed-wrap{
  position:relative;
  width:100%;
  height:min(100svh,780px);
  background:var(--bg);
  overflow:hidden;
  /* border & border-radius dihapus agar menyatu */
}
.jav-embed-wrap iframe{
  width:100%;
  height:100%;
  border:none;
  display:block;
}
.jav-embed-loading{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:12px;background:var(--bg);
  font-size:12px;color:var(--t2);
  z-index:5;transition:opacity .4s ease;
}
.jav-embed-loading.hidden{opacity:0;pointer-events:none}
/* panel tanpa padding saat mode iframe */
.tab-flush{padding:0!important;margin:0!important}
.ads, .ad-banner, .advertisement, .adsbygoogle, .ad-placement { 
  position: absolute !important; 
  height: 1px !important; 
  width: 1px !important; 
  left: -9999px !important; }