/* =============================================
FILE: /css/mppopup.css (POPUP PLUGIN CSS)
Yalnızca lightbox/overlay bileşenlerini stiller.
============================================= */
:root{ --mvp-z: 2147483647; /* en üste sabitle */ --mvp-bg: rgba(5,7,12,.75); --mvp-surface: linear-gradient(160deg, rgba(22,26,36,.92), rgba(12,16,24,.94)); --mvp-border: rgba(255,255,255,.10); --mvp-border-weak: rgba(255,255,255,.06); --mvp-fg:#e6eaf2; --mvp-muted:#a7b0bf; --mvp-accent:#4da3ff; --mvp-r-xl:20px; --mvp-speed:200ms; }
.mvp-overlay{
  position: fixed;
  inset: 0;
  z-index: var(--mvp-z);
  background: var(--mvp-bg);
  display: none;
}
/* Blur varsa: hem standart hem -webkit prefiksi */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .mvp-overlay{
    backdrop-filter: blur(6px) saturate(.9);
    -webkit-backdrop-filter: blur(6px) saturate(.9);
    background: rgba(5,7,12,.40);   /* blur VARSA arka planı hafiflet */
    will-change: backdrop-filter;    /* iOS’ta compositing’e yardım */
  }
}
.mvp-overlay.is-open{ display:block; }
.mvp-modal{ position:absolute; inset:24px; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--mvp-r-xl); background:var(--mvp-surface); color:var(--mvp-fg); border:1px solid var(--mvp-border); box-shadow:0 10px 30px rgba(0,0,0,.35);}
.mvp-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-bottom:1px solid var(--mvp-border-weak); }
.mvp-title{
flex:1 1 auto;
 min-width:0;                /* <- kritik: ellipsis çalışsın */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;         /* tek satır */
font-weight:700; font-size:14px; color:var(--mvp-muted); letter-spacing:.3px; }
@media (max-width: 480px){
  .mvp-title{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;     /* 2 satırda kes */
    -webkit-box-orient:vertical;
  }
}
.mvp-actions{ display:flex; gap:8px; position:relative; flex:0 0 auto;}
.mvp-more{ position:relative; display:none; } /* desktop’ta gizli */
.mvp-more-toggle{ /* mevcut .mvp-btn sınıfını da taşıyacak */
  position:relative;
}
.mvp-menu[hidden]{ display:none; }
.mvp-menu{
  position:absolute; top:110%; right:0;
  min-width:180px; padding:8px;
  border-radius:12px;
  background:var(--mvp-surface);
  border:1px solid var(--mvp-border);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:grid; gap:6px; z-index:10;
}
.mvp-menu .mvp-menu-item{
  appearance:none; border:1px solid rgba(255,255,255,.14);
  background:#101626; color:var(--mvp-fg);
  height:36px; padding:0 12px; border-radius:10px;
  cursor:pointer; font-weight:700; letter-spacing:.3px;
  display:flex; align-items:center; justify-content:flex-start;
}
.mvp-menu .mvp-menu-item:hover{ background:#0d1422; transform:translateY(-1px); }

/* < 640px → tüm aksiyonlar tek menüde toplansın */
@media (max-width: 639.98px){
  .mvp-actions > .mvp-btn{ display:none; }       /* bireysel butonları gizle */
  .mvp-actions .mvp-more{ display:block; }       /* sadece ⋯ görünür */
}
.mvp-btn{ appearance:none; border:1px solid rgba(255,255,255,.14); background:#101626; color:var(--mvp-fg); height:36px; min-width:36px; padding:0 12px; border-radius:999px; cursor:pointer; font-weight:700; letter-spacing:.3px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.mvp-btn:hover{ background:#0d1422; transform: translateY(-1px); }
.mvp-stage{ position:relative; flex:1; min-height: 220px; display:flex; align-items:center; justify-content:center; overflow:hidden; touch-action: none; cursor: default;}
.mvp-img{ position:relative; z-index:1; max-width:min(92vw, 1400px); max-height:68vh; width:auto; height:auto; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.07); background:#0b0f19; touch-action: pan-y; cursor: default; transform-origin: center center;}
/* Tam ekran */
.mvp-modal:fullscreen .mvp-img, .is-fullscreen .mvp-img{ max-height: 86vh; }
.mvp-nav{ position:absolute; inset:0; pointer-events:none; display:flex; align-items:center; justify-content:space-between; padding:0 16px; z-index:5; }
.mvp-nav button{ pointer-events:auto; }
.mvp-arrow{ width:44px; height:44px; border-radius:999px; backdrop-filter: blur(6px); background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18); color:#fff; font-size:20px; font-weight:900; }
.mvp-caption{ text-align:center; color:var(--mvp-muted); font-size:13px; padding:8px 14px 12px; }
/* THUMB STRIP: desktop = oklarla; mobil/tablet = doğal kaydırma */
.mvp-strip-wrap{ position:relative; display:flex; align-items:center; gap:8px; border-top:1px solid var(--mvp-border-weak); background: linear-gradient(180deg, rgba(16,20,28,.96), rgba(12,16,24,.94)); padding:10px 46px; }
.mvp-strip{ display:flex; gap:8px; align-items:center; scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none; }
.mvp-strip::-webkit-scrollbar{ display:none; }
.mvp-strip-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.35); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; }
.mvp-strip-arrow[data-mvp="strip-prev"]{ left:6px; }
.mvp-strip-arrow[data-mvp="strip-next"]{ right:6px; }
/* Desktop (>=992px): oklar açık, strip scroll gizli */
@media (min-width: 992px){ .mvp-strip{ overflow: hidden; } .mvp-strip-arrow{ display:inline-flex; } }
/* Mobile/Tablet (<992px): oklar gizli, doğal yatay scroll */
@media (max-width: 991.98px){ .mvp-strip{ overflow:auto; } .mvp-strip-arrow{ display:none; } }
.mvp-thumb{ width:76px; height:56px; flex:0 0 auto; border-radius:8px; overflow:hidden; position:relative; border:1px solid rgba(255,255,255,.10); cursor:pointer; }
.mvp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.mvp-thumb.is-active{ outline: 2px solid var(--mvp-accent); outline-offset: 2px; }
/* helpers */
.mvp-hide{ display:none !important; }
.mvp-fade-in{ animation: mvpFadeIn var(--mvp-speed) ease both; }
@keyframes mvpFadeIn{ from{ opacity:0; transform: translateY(4px) scale(.995);} to{ opacity:1; transform:none;} }
/* Effects */
.mvp-fade-in{ animation: mvpFade .25s ease both; }
@keyframes mvpFade{ from{opacity:0; transform: translateY(2px);} to{opacity:1; transform:none;} }

.mvp-slide-in-left{ animation: mvpSlideL .25s ease both; }
.mvp-slide-in-right{ animation: mvpSlideR .25s ease both; }
@keyframes mvpSlideL{ from{opacity:.0; transform: translateX(24px);} to{opacity:1; transform:none;} }
@keyframes mvpSlideR{ from{opacity:.0; transform: translateX(-24px);} to{opacity:1; transform:none;} }
/* Swipe güvenliği: custom gesture'lar için stage'i kontrol altına al */
.mvp-head { position: relative; }
.mvp-zoom-badge{ 
flex:0 0 auto;              /* sabit kalsın */
  white-space:nowrap;
  margin-left:8px;
margin-left:8px; font-size:12px; color:var(--mvp-muted,#a7b0bf); }