/* =========================================================
   Vidartico | Portföy
   Görünürlük: sadece [hidden] ve [data-open]
   ========================================================= */

/* Panel */
.vid-pf .pf-band__panel{ padding:10px 14px 16px; }
.vid-pf .pf-band__panel[hidden]{ display:none !important; }

/* Şerit / Head */
.vid-pf .pf-band{
  margin:18px 0 28px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(148,163,184,.18);
  background:linear-gradient(180deg,rgba(9,14,26,.65),rgba(6,10,18,.55));
}
:root[data-vid-theme="light"] .vid-pf .pf-band{ background:#fff; border-color:#e5e7eb; }

.vid-pf .pf-band__head{ position:relative; }
.vid-pf .pf-band__toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:12px 16px; border:0; background:transparent; color:#e8edf9;
  text-align:left; cursor:pointer; position:relative; z-index:2; -webkit-tap-highlight-color:transparent;
}
:root[data-vid-theme="light"] .vid-pf .pf-band__toggle{ color:#0f172a; }

.vid-pf .pf-band__title{ font-size:clamp(18px,2vw,22px); letter-spacing:.06em; text-transform:uppercase; }
.vid-pf .pf-band__count{ font-size:13px; opacity:.8; }
.vid-pf .pf-band__chev{
  width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg); transition:transform .18s ease; opacity:.8;
}
.vid-pf .pf-band[data-open] .pf-band__chev{ transform:rotate(135deg); }

/* Kapalıyken görünen preview */
.vid-pf .pf-preview{ position:relative; z-index:1; }
.vid-pf .pf-preview__rail{ display:flex; gap:8px; overflow:auto; padding:8px 12px 2px; -webkit-overflow-scrolling:touch; }
.vid-pf .pf-preview__item img{ height:84px; width:auto; border-radius:10px; display:block; }

/* Görünürlük motoru */
.vid-pf .pf-preview{ display:block; }                 /* varsayılan: görünür */
.vid-pf .pf-band[data-open] .pf-preview{ display:none; } /* açıkken gizle */

/* Filtre (pill) */
.vid-pf .pf-filters{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin:.2rem 0 1rem; }
.vid-pf .pf-filter{
  border:1px solid rgba(148,163,184,.35); background:rgba(15,23,42,.6); color:#e7ecff;
  border-radius:999px; padding:.35rem .7rem; font-size:.85rem; cursor:pointer;
}
.vid-pf .pf-filter.is-active{ border-color:var(--vid-color-accent,#facc6a); box-shadow:0 0 0 2px rgba(250,204,106,.18) inset; }
:root[data-vid-theme="light"] .vid-pf .pf-filter{ background:#f8fafc; color:#0f172a; border-color:#e2e8f0; }

/* Masonry (CSS columns) */
.vid-pf .pf-masonry{ column-count:1; column-gap:14px; }
@media (min-width:700px){  .vid-pf .pf-masonry{ column-count:2; } }
@media (min-width:1040px){ .vid-pf .pf-masonry{ column-count:3; } }
.vid-pf .pf-item{ break-inside:avoid; margin:0 0 14px; display:block; max-width:100%; }
.vid-pf .pf-thumb img{ width:100%; height:auto; display:block; border-radius:14px; max-width:100%; }

/* Modal */
#pf-modal{ position:fixed; inset:0; z-index:9999; }
#pf-modal[hidden]{ display:none; }
.pf-modal__scrim{ position:absolute; inset:0; background:rgba(2,6,23,.75); }
.pf-modal__card{
  position:relative; max-width:min(860px,92vw); margin:6vh auto; padding:16px 18px 18px;
  border-radius:16px; background:linear-gradient(180deg,rgba(15,23,42,.98),rgba(2,6,23,.98));
  color:#e8edf9; border:1px solid rgba(148,163,184,.25);
}
:root[data-vid-theme="light"] .pf-modal__card{ background:#fff; color:#0f172a; border-color:#e5e7eb; }
.pf-modal__close{ position:absolute; top:8px; right:10px; border:0; background:transparent; color:inherit; font-size:28px; cursor:pointer; }
.pf-modal__media img{ width:100%; height:auto; border-radius:12px; display:block; }
#pfm-title{ font-size:1.25rem; margin:10px 2px 6px; }
#pfm-text{ opacity:.95; }

/* Mobil dokunuşlar */
@media (max-width:768px){
  .vid-pf .pf-preview__rail{ gap:8px; padding:6px 12px 4px; }
  .vid-pf .pf-preview__item img{ width:72px; height:72px; object-fit:cover; border-radius:var(--vid-radius-sm,10px); }
  .vid-pf .pf-filters{ gap:8px; margin:8px 0 12px; }
  .vid-pf .pf-filter{ padding:6px 10px; line-height:1; font-size:14px; border-width:0; background:rgba(255,255,255,.08); color:#fff; }
  .vid-pf .pf-filter.is-active{ background:var(--vid-color-accent,#d4b06a); color:#111; }
  .vid-pf .pf-item{ margin:0 0 12px; }
}

/* Accordion panel başlangıç durumu JS ile yönetiliyor; burada sadece güvenlik */
.pf-band__panel { will-change: height, opacity; }

/* Kartların yumuşak geçişi */
.pf-masonry .pf-item {
  transition: opacity 240ms ease, transform 240ms ease;
}

/* Gösterim öncesi başlangıç: hafif küçülmüş + saydam */
.pf-masonry .pf-item.pf-will-show {
  opacity: 0;
  transform: scale(.98) translateY(6px);
}

/* Gizlenirken animasyon */
.pf-masonry .pf-item.pf-will-hide {
  opacity: 0;
  transform: scale(.98) translateY(6px);
  pointer-events: none; /* tıklanmasın */
}

/* Hareket hassasiyeti olan kullanıcılar için animasyon kapatma */
@media (prefers-reduced-motion: reduce) {
  .pf-band__panel,
  .pf-masonry .pf-item {
    transition: none !important;
  }
}

/* ============ ŞERİT KARTI (başlık + toggle) ============ */
.vid-pf .pf-band{
  border-radius: var(--vid-radius-lg,24px);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--vid-shadow-soft,0 18px 45px rgba(0,0,0,.45));
  padding: 14px 16px 18px;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.vid-pf .pf-band:hover{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

/* başlık satırı */
.vid-pf .pf-band__toggle{
  display:flex; align-items:center; gap:12px;
  justify-content: space-between;
  width:100%; min-height:44px; padding:6px 4px;
  background: none; border:0; color:inherit; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.vid-pf .pf-band__title{
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing:.02em;
}
.vid-pf .pf-band__count{
  margin-left:auto;
  font-size:13px; line-height:1;
  padding:6px 10px; border-radius:999px;
  color: var(--vid-color-accent,#d4b06a);
  background: color-mix(in lab, var(--vid-color-accent,#d4b06a) 18%, transparent);
}
.vid-pf .pf-band__chev{
  width:24px; height:24px; margin-left:6px;
  opacity:.65; transform: rotate(0deg); transition: transform .2s ease, opacity .2s;
}
.vid-pf .pf-band[data-open="1"] .pf-band__chev{ transform: rotate(180deg); opacity:.9; }

/* kapalıyken sadece preview; açıkken panel */
.vid-pf .pf-band__panel[hidden]{ display:none!important; }
.vid-pf .pf-preview{ display:block; margin-top:10px; }
.vid-pf .pf-band[data-open="1"] .pf-preview{ display:none; }

/* ============ PREVIEW ŞERİDİ ============ */
/* Boyut ve boşluk değişkenleri */
:root{
  --pf-prev-size: clamp(90px, 9vw, 124px);
  --pf-prev-gap: 12px;
}
.vid-pf .pf-preview__rail{
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--pf-prev-size);
  gap: var(--pf-prev-gap);
  overflow-x:auto; padding:8px 2px 2px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* kenarlarda yumuşak fade */
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.vid-pf .pf-preview__item{ scroll-snap-align: start; }
.vid-pf .pf-preview__item img{
  width:100%; aspect-ratio: 1 / 1; object-fit: cover; display:block;
  border-radius: calc(var(--vid-radius-md,16px) - 2px);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.35);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vid-pf .pf-preview__item img:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 28px rgba(0,0,0,.42);
}

/* ============ MOBİL İNCELTME ============ */
@media (max-width: 768px){
  :root{ --pf-prev-size: clamp(92px, 28vw, 116px); }
  .vid-pf .pf-band{ padding:12px 12px 16px; }
  .vid-pf .pf-preview__rail{ gap:10px; }
  .vid-pf .pf-filter{
    appearance:none; border:0; line-height:1; padding:7px 12px;
    border-radius:999px; font-size:14px;
    background: rgba(255,255,255,.10); color:#fff;
  }
  .vid-pf .pf-filter.is-active{ background: var(--vid-color-accent,#d4b06a); color:#111; }
  .vid-pf .pf-masonry{ column-count:2; column-gap: 9px; }
  .vid-pf .pf-item{ break-inside: avoid; margin:0 0 12px; }
}

/* === ŞERİT BAŞLIĞI: font + sıkı tipografi === */
.vid-pf .pf-band__title{
  /* İstersen Playfair yerine Cormorant kullanalım: */
  font-family: "Cormorant Garamond","Times New Roman",serif !important;
  font-weight: 600;
  letter-spacing: .004em;
  line-height: 1.08;
  font-size: clamp(26px, 3.3vw, 42px); /* biraz daha iri */
}

/* === ŞERİT KARTI: padding ve dikey boşluklar inceltildi === */
.vid-pf .pf-band{
  padding: 10px 14px 14px;              /* daha kompakt */
  margin-bottom: 18px;                   /* şeritler arası boşluk az */
}
.vid-pf .pf-band__toggle{ min-height: 40px; }

/* === PREVIEW ŞERİDİ: daha büyük kutular, daha az boşluk === */
:root{
  --pf-prev-size: clamp(120px, 10.5vw, 156px); /* büyütüldü */
  --pf-prev-gap: 10px;                         /* aralık azaltıldı */
}
.vid-pf .pf-preview{ margin-top: 8px; }
.vid-pf .pf-preview__rail{
  gap: var(--pf-prev-gap);
  padding: 6px 3px 2px;               /* üst boşluk az */
  mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.vid-pf .pf-preview__item img{
  border-radius: calc(var(--vid-radius-md,16px) - 2px);
  border: 1px solid rgba(255,255,255,.14);
}

/* === Sayaç rozeti biraz daha zarif === */
.vid-pf .pf-band__count{
  padding: 5px 8px;
  font-size: 12px;
  opacity: .95;
}

/* === Mobil dokunuşlar: büyük preview + daha sıkı layout === */
@media (max-width: 768px){
  :root{ --pf-prev-size: clamp(110px, 34vw, 142px); }
  .vid-pf .pf-band{ padding: 10px 12px 12px; }
  .vid-pf .pf-preview__rail{ gap: 8px; padding: 6px 2px 2px; }
}

/* === ŞERİT BAŞLIĞI: daha küçük, accent renk === */
.vid-pf .pf-band__title{
  font-family: "Playfair Display","Times New Roman",serif; /* istersen Cormorant yapabilirsin */
  font-weight: 600;
  letter-spacing: .006em;
  line-height: 1.08;
  font-size: clamp(22px, 2.2vw, 34px);   /* küçültüldü */
  color: var(--vid-color-accent, #d4b06a);  /* altın aksan */
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* === ŞERİT KARTI boşlukları biraz sıkılaştırıldı === */
.vid-pf .pf-band{
  padding: 12px 18px 16px;
  margin-bottom: 16px;
}

/* === PREVIEW: belirgin şekilde daha büyük === */
:root{
  --pf-prev-size-lg: 168px;  /* desktop */
  --pf-prev-gap-lg: 14px;
}
.vid-pf .pf-preview{ margin-top: 10px; }
.vid-pf .pf-preview__rail{
  gap: var(--pf-prev-gap-lg) !important;
  padding: 6px 4px 2px;
}

/* item kutusunun gerçek boyunu büyüt (öncekileri ezmek için !important) */
.vid-pf .pf-preview__rail .pf-preview__item{
  width: var(--pf-prev-size-lg) !important;
  height: var(--pf-prev-size-lg) !important;
  border-radius: calc(var(--vid-radius-md,16px) - 2px);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden;
}
.vid-pf .pf-preview__rail .pf-preview__item img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.04) saturate(1.02);
}

/* Mobilde de büyük ama ekrana uygun */
@media (max-width: 768px){
  :root{
    --pf-prev-size-lg: 132px;
    --pf-prev-gap-lg: 10px;
  }
  .vid-pf .pf-band{ padding: 10px 14px 12px; }
}

.vid-pf .pf-preview { cursor: pointer; }
.vid-pf .pf-preview a { pointer-events: none; } /* emniyet kemeri */
.vid-pf .pf-preview__rail img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* === Preview kenar düzeltme – kart çerçevesi sadeleştirme === */

/* Kartlar arasındaki aralığı netleştir */
.vid-pf .pf-preview__rail{
  gap: 12px;                 /* kartlar arasını biraz aç */
  padding-inline: 6px;
}

/* Dış kart çerçevesi: sadece burada gradient + border olsun */
.vid-pf .pf-preview__item{
  border-radius: 18px;
  padding: 1px;              /* çerçeve kalın ama ince */
}

/* İçteki görsel: border yok, radius tam oturuyor */
.vid-pf .pf-preview__item img{
  border-radius: 17px;
  border: none;
}

/* === Preview kartlarını tamamen düzleştir (frame yok) === */
.vid-pf .pf-preview__rail{
  gap: 10px !important;           /* aradaki boşluk net ve eşit */
}

/* Dış kapsayıcı: hiçbir çerçeve efekti, shadow yok */
.vid-pf .pf-preview__item{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 14px !important;
}

/* Olası pseudo-çerçeveleri de öldür */
.vid-pf .pf-preview__item::before,
.vid-pf .pf-preview__item::after{
  content: none !important;
}

/* Sadece fotoğraf, temiz bir radius ile */
.vid-pf .pf-preview__item img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px !important;
  border: none !important;
}

/* === Yeni galeri modalı: DPReview benzeri layout === */
#pf-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
#pf-modal[hidden]{ display:none; }

#pf-modal .pf-modal__scrim{
  position:absolute;
  inset:0;
  background:rgba(2,6,23,.78);
}

/* Kart: büyük panel, ekranı taşırma */
#pf-modal .pf-modal__card{
  position:relative;
  max-width: min(1200px, 96vw);
  max-height: min(840px, 92vh);
  margin: 4vh auto;
  padding: 16px 18px 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.98));
  color:#e8edf9;
  border:1px solid rgba(148,163,184,.28);
  box-shadow:0 28px 80px rgba(0,0,0,.9);
  display:flex;
  flex-direction:column;
}

:root[data-vid-theme="light"] #pf-modal .pf-modal__card{
  background:#ffffff;
  color:#0f172a;
  border-color:#e5e7eb;
  box-shadow:0 22px 60px rgba(15,23,42,.16);
}

#pf-modal .pf-modal__close{
  position:absolute;
  top:8px;
  right:12px;
  border:0;
  background:transparent;
  color:inherit;
  font-size:26px;
  cursor:pointer;
  z-index:5;
}

/* Ana layout: sol foto, sağ açıklama */
#pf-modal .pf-modal__layout{
  flex:1;
  display:grid;
  grid-template-columns: minmax(0, 3fr) minmax(260px, 1.25fr);
  gap:16px;
  min-height:0;
  margin-top:8px;
}

/* Sol ana alan */
#pf-modal .pf-modal__main{
  min-height:0;
  display:flex;
  flex-direction:column;
}

#pf-modal .pf-modal__media{
  position:relative;
  flex:1;
  min-height:0;
  background:#020617;
  border-radius:12px;
  overflow:hidden;                /* normalde taşma yok */
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: zoom-in;
}
:root[data-vid-theme="light"] #pf-modal .pf-modal__media{
  background:#020617;
}

#pf-modal #pfm-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  display:block;
  transition:none;
}

/* Zoom modu – artık gerçek scroll alanı açıyoruz */
#pf-modal .pf-modal__media.is-zoomed{
  cursor:zoom-out;
  overflow:auto;                  /* büyüttüğümüzde kaydırılabilir olsun */
  scrollbar-width:thin;
}

/* Alt thumbnail şeridi */
#pf-modal .pf-modal__thumbstrip{
  margin-top:10px;
  display:flex;
  gap:8px;
  padding:4px 0 0;
  overflow-x:auto;
  scrollbar-width:thin;
}
#pf-modal .pf-modal__thumb{
  flex:0 0 auto;
  border-radius:8px;
  overflow:hidden;
  border:2px solid transparent;
  opacity:.6;
  cursor:pointer;
}
#pf-modal .pf-modal__thumb img{
  display:block;
  width:70px;
  height:52px;
  object-fit:cover;
}
#pf-modal .pf-modal__thumb.is-active{
  opacity:1;
  border-color:var(--vid-color-accent,#d4b06a);
}

/* Sağdaki açıklama paneli */
#pf-modal .pf-modal__side{
  max-height:100%;
  padding-left:10px;
  border-left:1px solid rgba(148,163,184,.35);
  font-size:.9rem;
  line-height:1.5;
  overflow-y:auto;
}
:root[data-vid-theme="light"] #pf-modal .pf-modal__side{
  border-color:#e2e8f0;
}
#pf-modal #pfm-title{
  font-family: var(--vid-serif-display, "Playfair Display","Times New Roman",serif);
  font-size:1.05rem;
  margin:2px 0 6px;
}
#pf-modal #pfm-text{
  opacity:.95;
}

/* Sol/sağ oklar */
#pf-modal .pf-modal__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:48px;
  border-radius:999px;
  border:0;
  background:rgba(15,23,42,.75);
  color:#e5e7eb;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:20px;
}
#pf-modal .pf-modal__nav--prev{ left:8px; }
#pf-modal .pf-modal__nav--next{ right:8px; }

#pf-modal .pf-modal__nav:hover{
  background:rgba(15,23,42,.9);
}

/* Küçük ekran: dikey layout */
@media (max-width: 880px){
  #pf-modal .pf-modal__card{
    max-width:96vw;
    max-height:94vh;
    margin:3vh auto;
    padding:12px 12px 14px;
  }
  #pf-modal .pf-modal__layout{
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto minmax(0,1fr);
  }
  #pf-modal .pf-modal__side{
    border-left:none;
    border-top:1px solid rgba(148,163,184,.35);
    padding-left:0;
    padding-top:8px;
    margin-top:4px;
  }
}

/* === HARD OVERRIDE: modal fotoğraf hizalama + zoom === */
#pf-modal .pf-modal__media{
  display:flex;
  align-items:center;
  justify-content:center;
  cursor: zoom-in;
}

#pf-modal #pfm-img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
}

/* Zoom modunda gerçek kaydırılabilir alan */
#pf-modal .pf-modal__media.is-zoomed{
  overflow:auto;
  cursor: zoom-out;
}

/* Eski transform-based zoom'u öldür */
#pf-modal .pf-modal__media.is-zoomed #pfm-img{
  max-width:none !important;
  max-height:none !important;
  transform:none !important;
}

/* === Modal son düzeltme: panel ortalama + JS tabanlı zoom === */

/* Kartı ekranın tam ortasına al */
#pf-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;      /* dikeyde ortala */
  justify-content: center;  /* yatayda ortala */
  padding: 4vh 2vw;         /* kenarlarda nefes payı */
}

/* Margin’i sıfırla, yükseklik sınırı koy */
#pf-modal .pf-modal__card{
  margin: 0;
  max-height: min(840px, 92vh);
}

/* Zoom modunda: fotoğraf kaydırılabilir, scale tamamen JS’ten gelsin */
#pf-modal .pf-modal__media.is-zoomed{
  overflow: auto;
  cursor: zoom-out;
}

#pf-modal .pf-modal__media.is-zoomed #pfm-img{
  transform: none !important;  /* sabit 2.6x zorlamasını kaldır */
}

/* Zoom modunda oklar fotoğrafın üstünü kapatmasın */
#pf-modal .pf-modal__media .pf-modal__nav{
  transition: opacity .15s ease;
}

#pf-modal .pf-modal__media.is-zoomed .pf-modal__nav{
  opacity: 0;
  pointer-events: none;
}

/* Zoom alanındaki scrollbar'ı gizle, ama scroll/drag çalışsın */
#pf-modal .pf-modal__media{
  scrollbar-width: none;
}
#pf-modal .pf-modal__media::-webkit-scrollbar{
  display:none;
}

/* Drag sırasında cursor değişsin */
#pf-modal .pf-modal__media.is-zoomed{
  cursor: grab;
}
#pf-modal .pf-modal__media.is-zoomed.is-dragging{
  cursor: grabbing;
}

/* === Scroll-zoom ile uyumlu modal img override === */

/* Zoom modunda: JS'in verdiği genişlik serbestçe büyüsün */
#pf-modal .pf-modal__media.is-zoomed{
  overflow:auto;
}

#pf-modal .pf-modal__media.is-zoomed #pfm-img{
  max-width:none !important;
  max-height:none !important;
  object-fit:unset;
}

/* Zoom modunda oklar fotoğrafı kapatmasın */
#pf-modal .pf-modal__media .pf-modal__nav{
  transition: opacity .15s ease;
}

#pf-modal .pf-modal__media.is-zoomed .pf-modal__nav{
  opacity: 0;
  pointer-events: none;
}

/* Zoom alanındaki scrollbar'ı gizle, ama scroll/drag çalışsın */
#pf-modal .pf-modal__media{
  scrollbar-width: none;
}
#pf-modal .pf-modal__media::-webkit-scrollbar{
  display:none;
}

/* Drag sırasında cursor değişsin */
#pf-modal .pf-modal__media.is-zoomed{
  cursor: grab;
}
#pf-modal .pf-modal__media.is-zoomed.is-dragging{
  cursor: grabbing;
}

/* === Modal zoom alanı: scroll barları gizle, scroll/drag çalışsın === */
#pf-modal .pf-modal__media{
  overflow: auto !important;       /* pan için scroll kullanılacak */
  -ms-overflow-style: none;        /* eski IE/Edge */
  scrollbar-width: none;           /* Firefox */
}

/* Chromium / WebKit */
#pf-modal .pf-modal__media::-webkit-scrollbar{
  display: none;
}

/* Modal zoom alanında scrollbar tamamen iptal */
#pf-modal .pf-modal__media,
#pf-modal .pf-modal__media.is-zoomed {
  overflow: hidden !important;   /* hiç scroll bar gösterme, ama scrollLeft/Top çalışsın */
}

/* Zoom alanındaki scrollbar'ı gizle, ama JS ile scroll/drag çalışsın */
#pf-modal .pf-modal__media {
  scrollbar-width: none;
}
#pf-modal .pf-modal__media::-webkit-scrollbar {
  display: none;
}

/* === Modal fotoğraf alanı – fit modda ortalı, zoomda serbest pan === */
#pf-modal .pf-modal__media{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  background:#020617;
  border-radius:12px;
  display:flex;
  align-items:center;        /* zoom yokken ortala */
  justify-content:center;
  cursor: zoom-in;
  overflow:hidden;           /* fit modda scroll yok, panel büyümez */
}

/* Zoom modunda: sol-üstten başlasın, gerçek scroll alanı açılsın */
#pf-modal .pf-modal__media.is-zoomed{
  align-items:flex-start;    /* ortalamayı bırak, (0,0) köşe */
  justify-content:flex-start;
  cursor: grab;
  overflow:auto;             /* scrollLeft/Top gerçekten çalışsın */
  scrollbar-width:none;      /* scrollbar görünmesin */
}
#pf-modal .pf-modal__media.is-zoomed::-webkit-scrollbar{
  display:none;
}
#pf-modal .pf-modal__media.is-zoomed.is-dragging{
  cursor: grabbing;
}

/* Görsel: fit modda karta sığ, zoomda kısıt kalksın */
#pf-modal #pfm-img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:12px;
}

#pf-modal .pf-modal__media.is-zoomed #pfm-img{
  max-width:none;
  max-height:none;
}

/* === Modal PIP hard zoom kutusu === */
#pf-modal .pf-modal__pip{
  position:absolute;
  right:14px;
  bottom:14px;
  width:190px;
  height:130px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(148,163,184,.7);
  background:#020617;
  box-shadow:0 18px 40px rgba(0,0,0,.8);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
  z-index:4;
}

#pf-modal .pf-modal__pip img{
  position:absolute;
  top:0;
  left:0;
  will-change:transform;
}

/* PIP yalnızca ihtiyaç olduğunda görünsün */
#pf-modal .pf-modal__media.show-pip .pf-modal__pip{
  opacity:1;
}

/* Zoom modundayken PIP kapalı */
#pf-modal .pf-modal__media.is-zoomed .pf-modal__pip{
  opacity:0;
}

/* Mobilde modal oklarını gizle – swipe devrede */
@media (max-width: 768px){
  #pf-modal .pf-modal__nav{
    display:none !important;
  }
}