/* ============================================================
   Ortak UI: ikonlar + katmanlı slider (her iki tema için).
   Renkler CSS değişkenleriyle; temalar style.css'te override eder.
   ============================================================ */

/* ---- İkonlar ---- */
.icon { display: inline-block; vertical-align: middle; flex: 0 0 auto; }
.brand-icon { color: inherit; }
.pay-icon {
  height: 24px; width: auto; display: inline-block; vertical-align: middle;
  background: #fff; border-radius: 4px; padding: 2px 5px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.pay-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ============================================================
   SLIDER
   ============================================================ */
.hero {
  position: relative;
  width: var(--hero-w, 100%);
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  background: var(--hero-bg, #0d0d10);
  --sl-speed: .6s;
}
.hero-viewport { position: relative; width: 100%; }

/* Slide: arka görsel tuvali (oran ayarlardan; varsayılan 16:5).
   Arka görsel inline CSS değişkeniyle verilir (--slide-bg) ki mobilde ayrı
   görsele (--slide-bg-m) geçebilelim; mobil görsel yoksa masaüstündeki kalır. */
.hero-slide {
  position: absolute;
  inset: 0;
  aspect-ratio: var(--slide-ratio, 16 / 5);
  background-image: var(--slide-bg, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  /* Gizlenme fade bitene kadar ertelenir: çıkan slayt bir anda yok olmaz.
     (Eskiden visibility anında "hidden" oluyordu → geçiş boyunca iki slayt da
     görünmüyor, arkadaki zemin göz kırpıyordu — takılma hissinin sebebi.) */
  transition: opacity var(--sl-speed) ease, visibility 0s linear var(--sl-speed);
  overflow: hidden;
}
/* Aktif slide akışa girer → viewport yüksekliğini o belirler. */
.hero-slide.is-active {
  position: relative; opacity: 1; visibility: visible; z-index: 2;
  transition: opacity var(--sl-speed) ease, visibility 0s;
}
/* Çıkan slayt (zemini opak yeni slayta geçerken): yenisi üstünde belirene dek
   altta TAM görünür kalır — iki yarı saydam slayt üst üste binip kararmaz. */
.hero-slide.is-prev { opacity: 1; visibility: visible; z-index: 1; transition: none; }
/* .hero öneki: aşağıdaki ":not(.is-active) .sl-anim { opacity: 0 }" kuralını yenmek için */
.hero .hero-slide.is-prev .sl-anim { opacity: 1; animation: none; }
.hero .hero-slide.is-prev .sl-anim[class*="out-"] { opacity: 0; }

/* Geçiş tipi: kaydırma (slide) */
.hero.tr-slide .hero-viewport { display: flex; transition: transform var(--sl-speed) ease; }
.hero.tr-slide .hero-slide {
  position: relative; inset: auto; flex: 0 0 100%;
  opacity: 1; visibility: visible; transition: none;
}

/* Slide içindeki tam-alan tıklama linki (simple mod + ürüne bağlı gelişmiş slayt) */
.hero-slide-link { position: absolute; inset: 0; z-index: 2; }
/* Link varken buton dışındaki katmanlar tıklamayı engellemesin (fiyata tıklayan da ürüne gitsin) */
.hero-slide-link ~ .layer-canvas .slide-layer:not(.sl-button) { pointer-events: none; }

/* ---- Katman tuvali ----
   container: katman yazıları tuval genişliğine göre ölçeklenir (1200px referans,
   admin önizlemesiyle aynı) — dar ekranda büyük başlık/fiyat taşmaz. */
.layer-canvas { position: absolute; inset: 0; z-index: 3; pointer-events: none; container-type: inline-size; }
.slide-layer { position: absolute; max-width: 92%; pointer-events: auto; z-index: 3; }
.slide-layer .sl-anim { will-change: transform, opacity; }

.sl-text { line-height: 1.15; text-shadow: 0 2px 12px rgba(0,0,0,.28); white-space: pre-line; }
.sl-badge-txt {
  display: inline-block; padding: .3em .7em; border-radius: 999px;
  color: #fff; line-height: 1.1; box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
/* Kutu/Blok arka plandır: her zaman diğer katmanların ARKASINDA durur */
.slide-layer.sl-box { z-index: 1; }
.sl-box-fill { display: block; width: 100%; height: 100%; border-radius: 10px; }

/* Slide butonları */
.slide-btn {
  display: inline-block; padding: 13px 30px; border-radius: 999px;
  font-weight: 700; font-size: 15px; letter-spacing: .3px; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
@media (hover: hover) { .slide-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.22); } }
/* Katman butonu: yazı boyutu ölçeklendiği için iç boşluk da em ile orantılı */
.slide-layer .slide-btn { padding: .87em 2em; }
.sl-btn-primary { background: var(--hero-accent, #e11d63); color: #fff; }
.sl-btn-dark    { background: #111; color: #fff; }
.sl-btn-light   { background: #fff; color: #111; }
.sl-btn-outline { background: transparent; color: #fff; border: 2px solid #fff; }
/* Tema "a:hover { color }" kuralı hazır buton yazısını boyamasın (satır içi renk zaten üstün) */
.hero .sl-btn-primary:hover, .hero .sl-btn-dark:hover, .hero .sl-btn-outline:hover { color: #fff; }
.hero .sl-btn-light:hover { color: #111; }

/* Simple mod başlık overlay'i */
.simple-caption { display: flex; padding: 4% 6%; }
.simple-caption .sl-caption { max-width: 560px; }
.simple-caption.pos-left   { justify-content: flex-start; align-items: center; text-align: left; }
.simple-caption.pos-center { justify-content: center; align-items: center; text-align: center; }
.simple-caption.pos-right  { justify-content: flex-end; align-items: center; text-align: right; }
.sl-caption h2 {
  margin: 0 0 12px; font-size: clamp(24px, 4.2vw, 54px); line-height: 1.1;
  color: var(--hero-title, #fff); text-shadow: 0 2px 14px rgba(0,0,0,.32);
}
.sl-caption p {
  margin: 0 0 20px; font-size: clamp(14px, 1.7vw, 20px);
  color: var(--hero-sub, #f1f1f1); text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

/* ============================================================
   Ürün slaytı: şablon zemini + üründen canlı resim/ad/fiyat
   Boyutlar slayt genişliğine oranlı (cqw); yerleşim slaytın kendi oranına
   göre seçilir: yatayda metin + ürün yan yana, dikeyde (telefon) alt alta.
   ============================================================ */
.pslide {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  container: pslide / size;
}
.pslide-grid {
  height: 100%; display: grid; align-items: center; gap: 2%;
  grid-template-columns: 1.1fr 1fr; grid-template-rows: 100%;
  grid-template-areas: "text media"; padding: 3.5% 5% 3.5% 6%;
}
.pslide-grid.pslide-left { grid-template-columns: 1fr 1.1fr; grid-template-areas: "media text"; padding: 3.5% 6% 3.5% 5%; }
.pslide-text {
  grid-area: text; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  padding-top: var(--ps-top, 0); color: var(--ps-text, #fff);
  /* Aralıklar şablondan (1200px slayttaki piksel) — slayt küçüldükçe orantılı */
  --ps-unit: calc(100cqw / 1200);
}
.pslide-title {
  margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.04;
  letter-spacing: -.01em; color: var(--ps-text, #fff); overflow-wrap: anywhere;
  text-shadow: 0 .04em .3em rgba(0,0,0,.22);
  /* Çok uzun ürün adı fiyatı slayttan itmesin */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.pslide-title span { color: var(--ps-accent, #4f8bff); }
.pslide-title.ps-xl { font-size: 8cqw; }
.pslide-title.ps-l  { font-size: 5.6cqw; }
.pslide-title.ps-m  { font-size: 4.2cqw; }
.pslide-title.ps-s  { font-size: 3.2cqw; }
.pslide-slogan {
  margin: calc(var(--ps-g1, 18) * var(--ps-unit)) 0 0; font-size: 1.5cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ps-text, #fff); opacity: .9;
}
.pslide-price {
  margin-top: calc(var(--ps-g2, 28) * var(--ps-unit));
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1; max-width: 100%;
  padding: 1.1cqw 3cqw 1.3cqw; border-radius: 2.2cqw;
  border: .2cqw solid color-mix(in srgb, var(--ps-text, #fff) 70%, transparent);
  background: color-mix(in srgb, var(--ps-text, #fff) 6%, transparent);
}
.pslide-label { font-size: 2.1cqw; font-weight: 600; letter-spacing: .5em; padding-left: .5em; margin-bottom: .7cqw; }
.pslide-amount {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 7.6cqw; letter-spacing: -.02em; white-space: nowrap;
}
.pslide-old { font-size: 1.9cqw; font-weight: 600; opacity: .7; margin-bottom: .5cqw; }
.pslide-btn {
  pointer-events: auto; margin-top: calc(var(--ps-g3, 24) * var(--ps-unit)); padding: 1cqw 2.6cqw; border-radius: 999px;
  background: var(--ps-btn, var(--ps-accent, #4f8bff)); color: var(--ps-btn-text, #fff); font-size: 1.4cqw; font-weight: 700;
  text-decoration: none; box-shadow: 0 .6cqw 1.6cqw rgba(0,0,0,.25); transition: transform .15s ease, filter .15s ease;
}
/* .hero öneki: temaların genel "a:hover { color }" kuralı (ör. kameram'da camgöbeği)
   butonun yazısını boyamasın — hover'da yalnız hafif kalkma + parlama */
.hero .pslide-btn:hover, .hero .pslide-btn:focus-visible {
  color: var(--ps-btn-text, #fff); transform: translateY(-2px); filter: brightness(1.08);
}
.pslide-media { grid-area: media; height: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; }
.pslide-media img {
  display: block; max-width: 100%; max-height: 94%; width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 2cqw 2.2cqw rgba(0,0,0,.35));
}
/* Beyaz zeminli olmayan foto: kesilemez, temiz bir kart içinde */
.pslide-media img.is-card {
  max-height: 80%; padding: 2cqw; background: #fff; border-radius: 2cqw; filter: none;
  box-shadow: 0 1.6cqw 3.6cqw rgba(0,0,0,.3);
}
/* Dikey slayt (telefon): ürün üstte, metin altta ortalı */
@container pslide (max-aspect-ratio: 1 / 1) {
  .pslide-grid, .pslide-grid.pslide-left {
    grid-template-columns: 100%; grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "media" "text";
    padding: 6% 7% 10%; gap: 3%;
  }
  /* Telefonda yazılar oransal olarak iri: aralıklar da 1,6 kat */
  .pslide-text { align-items: center; text-align: center; padding-top: 0; --ps-unit: calc(160cqw / 1200); }
  .pslide-title { -webkit-line-clamp: 2; line-clamp: 2; }
  .pslide-title.ps-xl { font-size: 12cqw; }
  .pslide-title.ps-l  { font-size: 8.4cqw; }
  .pslide-title.ps-m  { font-size: 6.4cqw; }
  .pslide-title.ps-s  { font-size: 5.2cqw; }
  .pslide-slogan { font-size: 2.9cqw; }
  /* Buton telefonda da görünür: metin satırı içeriği kadar (auto), ürün görseli kalan alanı alır */
  .pslide-price { padding: 2.2cqw 6cqw 2.6cqw; border-radius: 4cqw; border-width: .4cqw; }
  .pslide-label { font-size: 3.6cqw; margin-bottom: 1.2cqw; }
  .pslide-amount { font-size: 13cqw; }
  .pslide-old { font-size: 3.6cqw; margin-bottom: 1cqw; }
  .pslide-btn { font-size: 3.4cqw; padding: 2.4cqw 6.4cqw; }
}

/* ---- Oklar ---- */
.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.82); color: #111; cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease, transform .15s ease;
}
@media (hover: hover) { .hero-arrow:hover { background: #fff; } }
.hero-arrow.prev { left: 16px; }
.hero-arrow.next { right: 16px; }
.hero-arrow:active { transform: translateY(-50%) scale(.94); }

/* ---- Noktalar ---- */
.hero-dots {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 5;
  display: flex; gap: 9px; justify-content: center;
}
.hero-dot {
  width: 11px; height: 11px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.5); padding: 0; transition: background .2s, transform .2s;
}
.hero-dot.active { background: #fff; transform: scale(1.25); }

/* ============================================================
   Katman giriş animasyonları (slide aktif olunca çalışır)
   ============================================================ */
.hero-slide:not(.is-active) .sl-anim { opacity: 0; }
.hero-slide:not(.is-active) .anim-none { opacity: 1; }
.hero-slide.is-active .sl-anim {
  animation-duration: .7s; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  animation-delay: var(--sl-delay, 0ms);
}
.hero-slide.is-active .anim-none { animation: none; opacity: 1; }
.hero-slide.is-active .anim-fade       { animation-name: slFade; }
.hero-slide.is-active .anim-fade-up    { animation-name: slFadeUp; }
.hero-slide.is-active .anim-fade-down  { animation-name: slFadeDown; }
.hero-slide.is-active .anim-fade-left  { animation-name: slFadeLeft; }
.hero-slide.is-active .anim-fade-right { animation-name: slFadeRight; }
.hero-slide.is-active .anim-zoom       { animation-name: slZoom; }

@keyframes slFade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes slFadeUp    { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes slFadeDown  { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
@keyframes slFadeLeft  { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } }
@keyframes slFadeRight { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } }
@keyframes slZoom      { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero.tr-slide .hero-viewport { transition: none; }
  .hero-slide.is-active .sl-anim { animation: none; opacity: 1; }
}

/* ---- Mobil: daha uzun oran, okunur metin ---- */
@media (max-width: 720px) {
  .hero-slide {
    aspect-ratio: var(--slide-ratio-m, 3 / 4);
    /* Slide'ın mobil görseli varsa o basılır; yoksa masaüstü görseline düşülür. */
    background-image: var(--slide-bg-m, var(--slide-bg, none));
  }
  .hero-arrow { width: 38px; height: 38px; }
  .hero-arrow.prev { left: 8px; } .hero-arrow.next { right: 8px; }
  @media (hover: none) { .hero-arrow { display: none; } } /* dokunmatikte parmakla kaydırılır */
  .slide-btn { padding: 11px 22px; font-size: 14px; }
  .simple-caption { padding: 6% 7%; }
}

/* ---- Dil seçici (bayraklı açılır menü) ---- */
.lang-dd { position: relative; }
.lang-dd summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; font-weight: 600; user-select: none;
}
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-caret { font-style: normal; font-size: .7em; opacity: .8; transition: transform .15s; }
.lang-dd[open] .lang-caret { transform: rotate(180deg); }
.lang-dd ul {
  position: absolute; top: 100%; left: 0; z-index: 200; min-width: 170px; margin: 4px 0 0;
  padding: 6px; list-style: none; background: #fff; color: #1f2430;
  border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 12px 28px rgba(20,25,40,.16);
}
.lang-dd ul a {
  display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 7px;
  color: #1f2430; font-weight: 500; white-space: nowrap;
}
.lang-dd ul a:hover { background: #f3f4f6; color: #1f2430; }
.lang-dd ul a.on { background: #eef1f6; font-weight: 700; }
.flag { display: inline-block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); flex: 0 0 auto; }
.flag-txt {
  width: 21px; height: 15px; font-size: 9px; font-weight: 700; display: inline-grid;
  place-items: center; background: #e5e7eb; color: #374151;
}

/* ---- Ürün yanı bilgi blokları ---- */
.info-blocks { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.info-line { flex-basis: 100%; margin: 0; font-size: .93rem; color: #4b5563; }
.info-img-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; cursor: pointer;
  background: #fff; border: 1.5px solid #d8dbe2; border-radius: 999px;
  font-weight: 600; font-size: .88rem; color: #1f2430;
  transition: border-color .15s, box-shadow .15s;
}
.info-img-btn:hover { border-color: var(--hero-accent, #e11d63); box-shadow: 0 3px 10px rgba(0,0,0,.08); }

/* Fare paralaksı sarmalayıcısı: yumuşak takip */
.sl-par { will-change: transform; transition: transform .18s ease-out; }

/* Renk maskesi: arka görselin üzerine binen renk katmanı (içeriğin altında) */
.slide-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Kutu katmanı: animasyon/paralaks sarmalayıcıları yükseklik zincirini kırmasın
   (slide-layer %h → sarmalayıcılar auto kalınca kutu 0 yükseklikte görünmüyordu) */
.slide-layer.sl-box .sl-anim,
.slide-layer.sl-box .sl-par { height: 100%; }

/* ---- Katman ÇIKIŞ animasyonları: slide değişmeden hemen önce oynar (is-leaving) ---- */
.hero-slide.is-leaving .sl-anim.out-fade       { animation: slOutFade .38s ease-in both; }
.hero-slide.is-leaving .sl-anim.out-fade-up    { animation: slOutUp .38s ease-in both; }
.hero-slide.is-leaving .sl-anim.out-fade-down  { animation: slOutDown .38s ease-in both; }
.hero-slide.is-leaving .sl-anim.out-fade-left  { animation: slOutLeft .38s ease-in both; }
.hero-slide.is-leaving .sl-anim.out-fade-right { animation: slOutRight .38s ease-in both; }
.hero-slide.is-leaving .sl-anim.out-zoom       { animation: slOutZoom .38s ease-in both; }

@keyframes slOutFade  { to { opacity: 0; } }
@keyframes slOutUp    { to { opacity: 0; transform: translateY(-34px); } }
@keyframes slOutDown  { to { opacity: 0; transform: translateY(34px); } }
@keyframes slOutLeft  { to { opacity: 0; transform: translateX(-46px); } }
@keyframes slOutRight { to { opacity: 0; transform: translateX(46px); } }
@keyframes slOutZoom  { to { opacity: 0; transform: scale(.82); } }

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-leaving .sl-anim { animation: none; }
}

/* ============================================================
   ÜRÜN GÖRSELİ: hover büyüteç + tıkla-lightbox (product-zoom.js)
   Tüm temalarda ortak. Ölçeği babiest kendi style.css'inde ezer;
   default/kameram için varsayılan ölçek burada verilir.
   ============================================================ */
.gallery-main.pz-zoom { cursor: zoom-in; }
.gallery-main.pz-zoom img { transition: transform .25s ease; will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .gallery-main.pz-zoom:hover img { transform: scale(2); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-main.pz-zoom img { transition: none; }
}

/* Sayfa kaydırma kilidi (lightbox açıkken) */
.pz-lb-open { overflow: hidden; }

/* Lightbox katmanı: tam ekran görüntüleyici (yakınlaştır / sürükle / pinch) */
.pz-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15,17,21,.94); color: #fff;
  -webkit-user-select: none; user-select: none; overscroll-behavior: contain;
}
.pz-lightbox[hidden] { display: none; }

/* Görsel alanı: tüm ekran; dokunma hareketleri tarayıcıya değil JS'e gider */
.pz-viewport {
  position: absolute; inset: 56px 16px 76px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  touch-action: none; cursor: zoom-out;
}
.pz-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  border-radius: 6px; background: #fff; box-shadow: 0 14px 44px rgba(0,0,0,.5);
  transform-origin: center center; will-change: transform; cursor: zoom-in;
  -webkit-user-drag: none;
}
.pz-img.pz-anim { transition: transform .22s ease; }
.pz-lightbox.is-zoomed .pz-img { cursor: grab; border-radius: 0; }
.pz-lightbox.is-zoomed .pz-img:active { cursor: grabbing; }
.pz-lightbox.is-loading .pz-img { opacity: .35; }

.pz-caption {
  position: absolute; top: 14px; left: 18px; right: 76px; margin: 0;
  font-size: .95rem; font-weight: 600; line-height: 44px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.pz-close, .pz-nav, .pz-tool {
  border: 0; color: #fff; cursor: pointer; display: grid; place-items: center;
  background: rgba(255,255,255,.14); transition: background .15s;
}
.pz-close {
  position: absolute; top: 12px; right: 16px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
}
.pz-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
}
.pz-close:hover, .pz-nav:hover, .pz-tool:hover { background: rgba(255,255,255,.28); }
.pz-close:focus-visible, .pz-nav:focus-visible, .pz-tool:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pz-prev { left: 16px; }
.pz-next { right: 16px; }

/* Alt araç çubuğu: − %100 + sığdır · sayaç */
.pz-toolbar {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  background: rgba(0,0,0,.45); border-radius: 999px; white-space: nowrap;
}
.pz-tool { width: 42px; height: 42px; border-radius: 50%; }
.pz-zoom-val { min-width: 48px; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; }
.pz-counter { padding: 0 8px 0 4px; font-size: .85rem; opacity: .85; letter-spacing: .4px; border-left: 1px solid rgba(255,255,255,.25); }
.pz-lightbox.is-single .pz-nav,
.pz-lightbox.is-single .pz-counter { display: none; }

@media (max-width: 600px) {
  .pz-viewport { inset: 60px 0 78px; }
  .pz-nav { width: 40px; height: 40px; }
  .pz-prev { left: 6px; } .pz-next { right: 6px; }
  .pz-close { top: 8px; right: 8px; }
  .pz-caption { top: 8px; left: 14px; right: 64px; font-size: .9rem; }
  .pz-toolbar { bottom: 12px; gap: 4px; }
  .pz-tool { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .pz-img.pz-anim { transition: none; }
}

/* ============================================================
   CANLI ARAMA ÖNERİLERİ (live-search.js)
   Arama formunun altına açılan görselli ürün listesi. Panel kendi
   renklerini açıkça verir — koyu başlıklı temalarda da okunur kalır.
   ============================================================ */
.search-form { position: relative; }

.ls-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 180;
  min-width: min(320px, 92vw);
  max-height: min(70vh, 470px); overflow-y: auto;
  padding: 6px;
  background: #fff; color: #1f2430;
  border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15, 20, 35, .18);
  text-align: left;
}

.ls-item {
  display: flex; align-items: center; gap: 11px;
  padding: 8px; border-radius: 9px;
  color: inherit; text-decoration: none;
}
.ls-item:hover, .ls-item.on { background: #f3f4f6; color: inherit; }
.ls-img {
  width: 56px; height: 56px; flex: 0 0 auto;
  object-fit: cover; border-radius: 8px; background: #f3f4f6;
}
.ls-item.is-out .ls-img { opacity: .55; }
.ls-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ls-name {
  font-weight: 600; font-size: .92rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ls-name mark { background: #fde68a; color: inherit; padding: 0 1px; border-radius: 3px; }
.ls-meta { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: #6b7280; }
.ls-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-badge { flex: 0 0 auto; background: #fee2e2; color: #b91c1c; font-weight: 600; border-radius: 999px; padding: 1px 8px; }

.ls-price {
  margin-left: auto; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end;
  white-space: nowrap; font-size: .9rem;
}
.ls-price del { color: #9ca3af; font-size: .76rem; }
.ls-price strong { color: var(--hero-accent, #e11d63); }

.ls-all {
  display: block; margin-top: 4px; padding: 11px;
  position: sticky; bottom: -6px; background: #fff;
  border-top: 1px solid #eef0f4; border-radius: 0 0 8px 8px;
  color: inherit; text-decoration: none;
  font-weight: 700; font-size: .86rem; text-align: center;
}
.ls-all:hover, .ls-all.on { background: #f3f4f6; color: inherit; }
.ls-empty { padding: 20px 12px; text-align: center; color: #6b7280; font-size: .9rem; }

/* Sorgu sürerken kutunun altında ince ilerleme şeridi */
.search-form.ls-busy::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -3px; height: 2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--hero-accent, #e11d63), transparent);
  animation: lsBusy 1s linear infinite;
}
@keyframes lsBusy { from { opacity: .25; } 50% { opacity: 1; } to { opacity: .25; } }

@media (max-width: 720px) {
  .ls-img { width: 46px; height: 46px; }
  .ls-name { font-size: .88rem; }
  .ls-price { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  .search-form.ls-busy::after { animation: none; }
}

/* === Mobil başlık + slider === */
/* Telefonda katman yazı/buton alt sınırları (Slider::fontSize → --sl-fmin, varsayılan 7px).
   Yazılar tuval genişliğine oranlı küçülür; 15px'lik buton 360px'lik tuvalde ~4,5px'e
   iniyordu. Taşan katmanı slider.js tuvalin içine kaydırır. */
@media (max-width: 720px) {
  .slide-layer.sl-text { --sl-fmin: 10px; }
  .slide-layer.sl-badge { --sl-fmin: 9px; }
  .slide-layer.sl-button { --sl-fmin: 12px; }
  /* Mobil görseli olmayan görsel slayt (mobil görselli slaytlarla aynı hero'da): 3:4 kutuya
     "cover" ile kırpılmak yerine tamamı görünür. Hiçbir slaytta mobil görsel yoksa hero
     zaten görselin (masaüstü) oranına döner (--slide-fit-m: cover, bkz. Slider::styleVars). */
  .hero-slide.m-fit { background-size: var(--slide-fit-m, contain); }
}

/* === Dil seçici === */
/* partials/lang-switcher: TR / EN bölmeli düğme (.locale-tools sarmalayıcısında).
   Para birimi seçicisi yok: para birimi yalnız konumdan gelir. */
.locale-tools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px;
  background: rgba(0, 0, 0, .06); font-size: .76rem; font-weight: 700; letter-spacing: .04em; line-height: 1;
}
.lang-switch .ls-opt {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px;
  color: inherit; text-decoration: none; opacity: .72; transition: background-color .15s, opacity .15s;
}
.lang-switch a.ls-opt:focus-visible { opacity: 1; background: rgba(255, 255, 255, .75); }
@media (hover: hover) { .lang-switch a.ls-opt:hover { opacity: 1; background: rgba(255, 255, 255, .75); } }
.lang-switch .ls-opt.is-on { opacity: 1; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); cursor: default; }
.lang-switch .flag { width: 16px; height: 11px; border-radius: 2px; flex: none; }
.lang-switch.ls-drawer { display: flex; width: max-content; margin: 16px 20px; font-size: .85rem; }
.lang-switch.ls-drawer .ls-opt { padding: 8px 14px; }

/* === Görselli opsiyonlar === */
/* Lightbox eylem düğmesi (product-zoom.js open(…, {action})): görselli opsiyonda "Bunu seç".
   Araç çubuğunun üstünde ortalı; görsel alanı alttan bu kadar daralır. */
.pz-lightbox.has-action .pz-viewport { bottom: 136px; }
.pz-action {
  position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); z-index: 2;
  min-width: 200px; max-width: calc(100% - 32px); min-height: 48px; padding: 12px 28px;
  border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--c-primary, #1a56db); color: #fff; font: inherit; font-size: 1rem; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: background .15s, transform .15s;
}
.pz-action:hover { background: var(--c-primary-dark, #1443ad); }
.pz-action:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pz-action.is-on { background: #fff; color: var(--c-text, #1f2430); }
.pz-action[hidden] { display: none; }
@media (max-width: 600px) {
  .pz-lightbox.has-action .pz-viewport { bottom: 140px; }
  .pz-action { bottom: 74px; min-width: 0; width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) { .pz-action { transition: none; } }