/* ==========================================================================
   STMACH Robotics - product.css
   Urun detay sayfasi: breadcrumb + galeri + ozet + sekmeler (aciklama /
   teknik ozellikler) + benzer urunler + mobil teklif cubugu.
   Bu sayfa 100+ urun icin SABLONDUR: markup birebir ayni kalir, sadece
   data-field icerikleri degisir (panele baglanacak).
   ========================================================================== */

/* ------------------------------------------------------------- BREADCRUMB */
.crumbs {
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--st-line);
  background: var(--st-white);
}
.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.crumbs__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.crumbs__item + .crumbs__item::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}
/* RTL'de ok yonu doner */
[dir="rtl"] .crumbs__item + .crumbs__item::before { transform: rotate(-135deg); }
.crumbs__link:hover { color: var(--st-orange-text); }
.crumbs__current { color: var(--text-strong); font-weight: 600; }
/* Baglantisiz ara adim (ör. "Kurumsal": acilir menu basligi, sayfasi yok). */
.crumbs__label { color: var(--text-muted); }

/* --------------------------------------------------- GENIS KAPSAYICI
   Urun detayi sitenin geri kalanindan (--container: 1280px) genis akar.
   Gerekcesi olculdu: canli sitede bu sayfanin kapsayicisi 1547px ve
   metin sutunu 577px; bizim 1280'lik kapsayicida metin 486px'e dusuyor,
   yani galeri buyudukce yazi sikisiyordu. Genis surumde ikisi de rahat:
   ~800 medya + ~580 metin.

   Sinif SAYFAYA elle veriliyor, --container globalde degistirilmiyor:
   o degisken listeler, izgaralar ve --rail-pad tarafindan da okunuyor,
   tek satirlik bir degisiklik butun siteyi etkilerdi. */
.container-st--wide { max-width: 1520px; }

/* ----------------------------------------------------------------- OZET */
.product {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 992px) {
  /* Agirlik MEDYADA: bu sayfada satan sey makinenin kendisi ve video artik
     sahnede oynuyor. Onceki oran (1.05/.95) metni one aliyordu, gorsel
     alani canli sitedekinin yarisi kadar kaliyordu (olculdu: 601x450 ve
     karsisinda ~795x700). 1.38 orani canli sitedeki 795/577'nin ayni. */
  .product { grid-template-columns: 1.38fr 1fr; gap: var(--space-9); }
}

/* --- galeri --- */
.gallery { display: grid; gap: var(--space-3); }

.gallery__stage {
  position: relative;
  /* 1920x1080. Videolarin cogu bu oranda cekilmis; sahne onlarla ayni
     orana gelince video tam oturuyor ve bant kalmiyor. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--st-white);
  border: 1px solid var(--st-line);
}
.gallery__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.gallery__frame.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.gallery__frame img {
  position: relative;    /* bulanik zeminin (::before) ustunde kalsin */
  inline-size: 100%;
  block-size: 100%;
  /* KIRPMA: 16:9 kutuda 3:2 ve 5:4 fotograflar yakinlastirilarak
     doldurulur, kenarda bant kalmaz. Buyuk gorunum contain kaldi -
     gorselin tamami orada gorulur. */
  object-fit: cover;
  background: var(--st-white);
}

/* ORANI COK UZAK KAYNAKLAR (dikey ve kare) - .is-tall'i main.js olcup koyar.
   Bunlari 16:9'a kirpmak icerigi yok ediyor: olculdu, kaynaklarin 13'u dikey
   fotograf ve 5'i telefonla dikey cekilmis video; 9:16 bir goruntu 16:9
   kutuda cover ile %68 kirpilir, makine kadraj disinda kalir. Bunlarda
   goruntu tam gosterilir, kenarlardaki bosluk ise SIYAH DEGIL kendi
   goruntusunun bulanik buyutulmus kopyasiyla doldurulur. */
.gallery__frame.is-tall::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--kaynak);
  background-size: cover;
  background-position: center;
  /* scale: blur kenarindaki saydamlik kutunun disina tassin. */
  filter: blur(28px) brightness(.7);
  transform: scale(1.12);
}
.gallery__frame.is-tall img,
.gallery__frame.is-tall .gallery__video { object-fit: contain; }
.gallery__frame.is-tall img { background: transparent; }
/* --- video karesi --- */
/* Sayfa acilisinda yalnizca POSTER cizilir; video dosyasi ancak oynat
   rozetine basilinca istenir. Oynatma once SAHNEDE, kendi boyunda olur -
   buyuk gorunume gecmek ikinci bir hareket ister (videoya tekrar tiklamak
   ya da buyut dugmesi). Tek tiklamada tam ekrana atlamak, sadece "su
   makine calisirken neye benziyor" diye bakan ziyaretciyi de her seferinde
   modal'a hapsediyordu. */
.gallery__play {
  position: absolute;
  padding: 0;
  border: 0;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 64px;
  block-size: 64px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--st-slate-dark) 62%, transparent);
  color: var(--st-white);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Ucgen optik olarak sola kayik durur; yarim piksel geri itilir. */
.gallery__play .icon { inline-size: 26px; block-size: 26px; margin-inline-start: 3px; fill: currentColor; stroke: none; }
.gallery__frame:hover .gallery__play {
  background: var(--st-orange);
  transform: translate(-50%, -50%) scale(1.06);
}

/* Yerinde oynatici: posterin uzerini tam olarak kaplar. */
.gallery__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  /* Sahnedeki fotograflarla ayni karar: kutuyu doldurur, bant kalmaz.
     Dikey videolarda .is-tall bunu contain'e cevirir (yukari bakiniz). */
  object-fit: cover;
  background: transparent;
  /* position BURADA YENIDEN YAZILMAZ: yukaridaki absolute kalir. 16:9
     duzenlemesinde buraya 'position: relative' eklenmis, sonraki kazaninca
     video akisa dusup posterin ALTINA yerlesmis ve sahnenin disinda
     kalmisti - video oynuyor ama ekranda poster gorunuyordu (olculdu:
     sahne ortasindaki eleman IMG, video position relative). */
  /* Tiklayinca buyuk gorunume gecer; imlec bunu soyler. */
  cursor: zoom-in;
}

/* Buyut dugmesi yalnizca oynarken gorunur (hidden'i main.js kaldirir). */
.gallery__expand {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 38px;
  block-size: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--st-slate-dark) 62%, transparent);
  color: var(--st-white);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.gallery__expand:hover { background: var(--st-orange); }
.gallery__expand .icon { inline-size: 18px; block-size: 18px; }
[dir="rtl"] .gallery__play .icon { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 3px; }

/* Seritte video karesi rozetle ayrilir: kullanici hangisinin video
   oldugunu tiklamadan gormeli. */
.gallery__thumb { position: relative; }
.gallery__thumb-play {
  position: absolute;
  inset-block-end: 3px;
  inset-inline-end: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 20px;
  block-size: 20px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--st-slate-dark) 72%, transparent);
  color: var(--st-white);
}
.gallery__thumb-play .icon { inline-size: 11px; block-size: 11px; margin-inline-start: 1px; fill: currentColor; stroke: none; }
[dir="rtl"] .gallery__thumb-play .icon { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .gallery__play, .gallery__expand { transition: none; }
  .gallery__frame:hover .gallery__play { transform: translate(-50%, -50%); }
}

/* JS yoksa ilk kare gorunur */
.no-js .gallery__frame:first-child { opacity: 1; visibility: visible; }

.gallery__count {
  position: absolute;
  inset-block-end: var(--space-3);
  inset-inline-end: var(--space-3);
  z-index: 1;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--st-slate-dark) 78%, transparent);
  color: var(--st-white);
  font-size: var(--fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- kucuk onizlemeler --- */
/* Izgara degil YATAY SERIT: auto-fill ile satira sigmayan onizleme alt satira
   dusuyordu ve 7 gorselde 6+1, mobilde 4+3 gibi oksuz satirlar cikiyordu.
   Urun basina gorsel sayisi 1-12 arasinda degistigi icin sabit bir sutun
   sayisi da ise yaramaz; serit kaydirilir, hicbir sayida kirilmaz. */
.gallery__thumbs {
  display: flex;
  gap: var(--space-2);
  /* Az sayida onizleme satirin solunda toplanip sagi bos birakiyordu
     (5 gorselde satirin %71'i). Ortalanir; "safe" olmadan tasan seritte
     ilk onizlemeye geri kaydirilamaz. */
  justify-content: safe center;
  overflow-x: auto;
  padding-block: var(--space-1) var(--space-2);
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;      /* serit bitince sayfa yatay kaymasin */

  /* KAYDIRMA CUBUGU GIZLI: isletim sisteminin cubugu onizlemelerin altinda
     tam genislikte bir cizgi olarak duruyordu. */
  scrollbar-width: none;
}
.gallery__thumbs::-webkit-scrollbar { display: none; }

/* Kenar solmasi YALNIZCA serit tasiyorsa: sigan seritte kenarlari bosuna
   soldurup ilk/son onizlemeyi soluk gosteriyordu. Sinifi main.js olcup
   koyar (initGallery). */
.gallery__thumbs.is-scrollable {
  mask-image: linear-gradient(to right, transparent 0, #000 24px,
                              #000 calc(100% - 24px), transparent 100%);
}
.gallery__thumb {
  flex: 0 0 72px;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--st-white);
  box-shadow: inset 0 0 0 1px var(--st-line);
  transition: border-color var(--dur) var(--ease);
}
.gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; }
.gallery__thumb[aria-current="true"] { border-color: var(--st-orange-cta); }
.gallery__thumb:hover { border-color: var(--st-orange); }

/* --- ozet sutunu --- */
.product__eyebrow { margin-block-end: var(--space-3); }
.product__title { margin-block-end: var(--space-4); }
.product__lead { color: var(--text-muted); }

/* Ilk bakista okunan teknik ozet - kart uzerindeki spec'in buyuk hali */
.product__highlights {
  display: grid;
  gap: var(--space-3);
  /* Sabit iki sutun: auto-fit 150px esigiyle ~475px'lik ozet sutununa uc
     hucre siginca dordunculer tek basina alt satirda kaliyordu (3+1) ve dar
     hucrede "2 adet/test dongusu" gibi degerler ortasindan boluniyordu.
     Ikili izgara 4 ozelligi 2x2 dengeler, hucre genisligi ~230px'e cikar. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block: var(--space-6);   /* dl reset sonrasi bosluk burada verilir */
  padding-block: var(--space-5);
  border-block: 1px solid var(--st-line);
}
.highlight__key {
  display: block;
  margin-block-end: 2px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.highlight__val {
  display: block;
  color: var(--text-strong);
  font-size: var(--fs-h4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.product__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}
.product__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.product__contact a { font-weight: 600; color: var(--text-strong); }
.product__contact a:hover { color: var(--st-orange-text); }

/* ---------------------------------------------------------------- SEKMELER */
.tabs__list {
  display: flex;
  gap: var(--space-2);
  margin-block-end: var(--space-6);
  border-block-end: 1px solid var(--st-line);
  overflow-x: auto;
}
.tabs__btn {
  flex: none;
  padding: var(--space-3) var(--space-5);
  border-block-end: 3px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tabs__btn:hover { color: var(--st-orange-text); }
.tabs__btn[aria-selected="true"] {
  color: var(--text-strong);
  border-block-end-color: var(--st-orange);
}
.tabs__panel[hidden] { display: none; }

.prose { max-width: 74ch; }
.prose p { color: var(--text-muted); }
.prose h3 { margin-block: var(--space-6) var(--space-3); font-size: var(--fs-h4); }
.prose h3:first-child { margin-block-start: 0; }
.prose h2 { margin-block: var(--space-7) var(--space-3); font-size: var(--fs-h3); }
.prose ul, .prose ol { padding-inline-start: 1.25em; color: var(--text-muted); }
.prose li + li { margin-block-start: var(--space-1); }
.prose img { border-radius: var(--radius); }
.prose blockquote {
  margin: var(--space-5) 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--st-orange);
  color: var(--text-strong);
}
/* Editorden gelen tablolar (proje takvimi, teknik veri): kenar cizgili,
   taranabilir. Dar ekranda kendi icinde yatay kayar. */
.prose table {
  inline-size: 100%;
  margin-block: var(--space-5);
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.prose th, .prose td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--st-line);
  text-align: start;
  vertical-align: top;
}
.prose th { background: var(--st-paper); color: var(--text-strong); font-weight: 600; }
.prose td { color: var(--text-muted); }
.prose tbody tr:hover { background: color-mix(in srgb, var(--st-paper) 60%, transparent); }
@media (max-width: 767px) {
  .prose table { display: block; overflow-x: auto; }
}

/* ------------------------------------------------------- TEKNIK OZELLIKLER */
/* Olculebilir veri: tablo. Suslemeye gomulmez, taranabilir kalir. */
.spec-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.spec-table caption {
  margin-block-end: var(--space-4);
  color: var(--text-strong);
  font-size: var(--fs-h4);
  font-weight: 700;
  text-align: start;
}
.spec-table th,
.spec-table td {
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--st-line);
  text-align: start;
  vertical-align: top;
}
.spec-table th {
  inline-size: 42%;
  color: var(--text-muted);
  font-weight: 500;
}
.spec-table td {
  color: var(--text-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.spec-table tbody tr:hover { background: var(--st-paper); }

/* Olculemeyen donanim kalemleri icin isaretli liste */
.spec-list {
  display: grid;
  gap: var(--space-2);
  margin-block-start: var(--space-6);
  columns: 1;
}
@media (min-width: 768px) { .spec-list { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-6); } }

.spec-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.spec-list__item .icon {
  margin-block-start: 5px;
  inline-size: 14px;
  block-size: 14px;
  color: var(--st-orange);
}

.spec-group { margin-block-start: var(--space-7); }
.spec-group__title {
  margin-block-end: var(--space-3);
  color: var(--st-orange-text);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ BENZER URUN */
.related { margin-block-start: var(--space-9); }

/* Benzer urun izgarasi: dort kart tek sirada.
   Ortak .grid-st esigi 280px ve dort sutun 4x280 + 3x24 = 1192px istiyor;
   kapsayici 1185px oldugu icin YEDI PIKSEL yuzunden 3+1 kaliyordu.
   Kalip about.css'teki .hub-grid ile ayni: esigi daraltmak. */
.related .grid-st {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* Kart govdeleri esit yukseklikte bitsin: urunlerin bir kisminda teknik
   ozellik satiri var, bir kisminda yok; "Incele" farkli hizalarda kaliyordu. */
.related .product-card { display: flex; flex-direction: column; }
.related .product-card__body { display: flex; flex-direction: column; flex: 1; }
.related .product-card__foot { margin-block-start: auto; }

/* ------------------------------------------------- MOBIL TEKLIF CUBUGU */
/* Sayfa mobilde ~6300px; teklif dugmesi ustte ve cok asagidaki formda kalip
   arada kayboluyordu. Yalnizca dar ekranda cizilir. */
.product-bar { display: none; }

@media (max-width: 47.99rem) {
  .product-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--st-white);
    border-block-start: 1px solid var(--st-line);
    box-shadow: 0 -4px 16px rgb(0 0 0 / .08);
    /* Centikli ekranlarda alt guvenli alan */
    padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
  }

  .product-bar__name {
    flex: 1;
    min-inline-size: 0;
    color: var(--text-strong);
    font-size: var(--fs-sm);
    font-weight: 700;
    /* Uzun makine adlari cubugu iki satira cikarmasin */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .product-bar__cta { flex: none; }

  /* Cubuk sayfanin son icerigini ortmesin */
  body:has(.product-bar) { padding-block-end: 72px; }
}

/* ------------------------------------------------------------- BUYUK GORUNUM

   Urun gorseline tiklayinca acilan tam ekran katman. <dialog> kullanildigi
   icin odak tuzagi, Esc ve arka planin erisilemez olmasi tarayicidan gelir. */

/* Sahne artik tiklanabilir; imlec bunu soyler. */
.gallery__frame img { cursor: zoom-in; }

.lightbox {
  /* Gorselin sigmasi gereken alan buradan hesaplanir; oklar, kapatma
     dugmesi ve sayac hep bu dolgu seridinin icinde durur. */
  --lb-pad: clamp(16px, 5vw, 64px);
  --lb-alt: 48px;                 /* sayac serididir; asagida daraltilir */

  /* UA varsayilanlari (kenarlik, dolgu, otomatik genislik) sifirlanir. */
  max-inline-size: 100vw;
  max-block-size: 100dvh;
  inline-size: 100vw;
  block-size: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox::backdrop {
  background: color-mix(in srgb, var(--st-slate-dark) 92%, transparent);
}
/* Tek gorselli urunde sayac ve oklar yok: gorsel tum yuksekligi kullansin. */
.lightbox:not(:has(.lightbox__count)) { --lb-alt: 0px; }

.lightbox__inner {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  padding: var(--lb-pad);
  padding-block-end: calc(var(--lb-pad) + var(--lb-alt));
}

/* Buyuk gorunumde video, gorselle AYNI kutuya oturur: ikisi yer degistirir,
   biri cizilirken digeri hidden'dir (bkz. main.js goster). */
.lightbox__img,
.lightbox__video {
  max-inline-size: 100%;
  /* YUZDE DEGIL GORUNUM YUKSEKLIGI: .lightbox__inner otomatik satirli bir
     grid; satirin yuksekligi yerlesim sirasinda belirsiz sayildigi icin
     max-block-size: 100% hic cozulmuyordu ve gorsel dogal boyunda cizilip
     alttan tasiyordu (olculdu: 800px pencerede 848px). */
  max-block-size: calc(100dvh - 2 * var(--lb-pad) - var(--lb-alt));
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--radius);
  /* Gorsel cogunlukla beyaz zeminli render; koyu perdede kenari kaybolmasin. */
  background: var(--st-white);
}
/* Video kendi zemini koyudur; beyaz cerceve kenarinda parlak bir hat
   birakiyordu. */
.lightbox__video { background: #000; }

/* Ortak dugme bicimi: koyu perdede cam gorunumlu daire. */
.lightbox__nav,
.lightbox__close {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--st-white) 28%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--st-slate-dark) 55%, transparent);
  color: var(--st-white);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lightbox__nav:hover,
.lightbox__close:hover {
  background: var(--st-orange);
  border-color: var(--st-orange);
}
.lightbox__nav .icon,
.lightbox__close .icon { inline-size: 20px; block-size: 20px; }

.lightbox__nav--prev { inset-inline-start: clamp(8px, 2vw, 28px); inset-block-start: 50%; transform: translateY(-50%); }
.lightbox__nav--next { inset-inline-end: clamp(8px, 2vw, 28px);   inset-block-start: 50%; transform: translateY(-50%); }
/* Oklar mantiksal kenarlarda duruyor; simgeler de yonu takip etsin. */
[dir="rtl"] .lightbox__nav .icon { transform: scaleX(-1); }

.lightbox__close { inset-block-start: clamp(8px, 2vw, 24px); inset-inline-end: clamp(8px, 2vw, 24px); }

.lightbox__count {
  position: absolute;
  inset-block-end: clamp(8px, 2vw, 24px);
  inset-inline: 0;
  margin: 0;
  color: color-mix(in srgb, var(--st-white) 80%, transparent);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
  /* Sayac her dilde soldan saga okunur: Arapcada RTL akisi "1 / 11" ifadesini
     "11 / 1" diye ciziyordu (olculdu). */
  direction: ltr;
  unicode-bidi: isolate;
}

/* Dar ekranda oklar gorselin uzerine biner; alta alinir. */
@media (max-width: 640px) {
  /* Oklar alta indi: sayac serididen once 44px dugme + bosluk gerekiyor. */
  .lightbox { --lb-alt: 112px; }
  .lightbox__nav--prev { inset-inline-start: 50%; inset-block: auto 56px; transform: translateX(calc(-50% - 32px)); }
  .lightbox__nav--next { inset-inline-end: auto; inset-inline-start: 50%; inset-block: auto 56px; transform: translateX(calc(-50% + 32px)); }
  .lightbox__count { inset-block-end: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox__nav, .lightbox__close { transition: none; }
}

/* ================================================================== SEMA
   Etkilesimli sema (ProductDetail.cshtml, initScheme). Nokta yuzde konumda;
   hap noktanin altinda her zaman gorunur, kart .is-open ile acilir. Kartin
   yonu JS tarafindan verilen .is-up / .is-left / .is-right ile secilir ki
   kenardaki nokta karti sahnenin disina tasirmasin. Mobilde (dar ekran)
   kart sahnenin altina sabit bir kutu olarak degil, yine noktaya bagli ama
   daha dar olarak cizilir; dokunma acar, disa dokunma kapatir. */
/* Bolum kendi katmanini kurar: asagi acilan kart sonraki bolumun (teklif)
   zeminine gomulmesin. */
.scheme { position: relative; z-index: 2; }
.scheme__hint { margin: 0; color: var(--text-muted); }

.scheme__stage {
  position: relative;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  overflow: visible;
}
.scheme__img {
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--radius-lg);
  background: var(--st-white);
}

.scheme__spot {
  position: absolute;
  inline-size: 0;
  block-size: 0;
  z-index: 2;
}
.scheme__spot.is-open { z-index: 5; }

/* Nokta: turuncu cekirdek + nabiz halkasi. */
.scheme__dot {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% -50%;
  inline-size: 26px;
  block-size: 26px;
  padding: 0;
  border: 3px solid var(--st-white);
  border-radius: 50%;
  background: var(--st-orange);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--st-slate-dark) 35%, transparent);
  cursor: pointer;
  transition: transform .2s ease;
}
.scheme__dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--st-orange);
  opacity: 0;
  animation: scheme-nabiz 2.2s ease-out infinite;
}
.scheme__dot:hover, .scheme__spot.is-open .scheme__dot { transform: scale(1.15); }
.scheme__dot:focus-visible { outline: 3px solid var(--st-orange); outline-offset: 3px; }
@keyframes scheme-nabiz {
  0%   { transform: scale(1);   opacity: .9; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Baslik hapi: noktanin hemen altinda, her zaman gorunur. */
.scheme__label {
  position: absolute;
  left: 0;
  top: 18px;
  translate: -50% 0;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--st-slate-dark);
  color: var(--st-white);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: var(--shadow);
  pointer-events: none;
}

/* Aciklama karti: varsayilan noktanin altinda, ortali. */
.scheme__card {
  position: absolute;
  left: 0;
  top: 48px;
  translate: -50% 0;
  inline-size: min(300px, 80vw);
  border-radius: var(--radius);
  background: var(--st-white);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.scheme__spot.is-open .scheme__card {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* Yukari acilan: altta yer yoksa. */
.scheme__spot.is-up .scheme__card { top: auto; bottom: 22px; transform: translateY(-6px); }
.scheme__spot.is-up.is-open .scheme__card { transform: none; }
/* Sola / saga yaslanan: kenara yakin nokta. */
.scheme__spot.is-left .scheme__card  { translate: -100% 0; left: 14px; }
.scheme__spot.is-right .scheme__card { translate: 0 0; left: -14px; }

.scheme__card-img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--st-paper);
}
.scheme__card-body { padding: 12px 14px 14px; }
.scheme__card-title { display: block; color: var(--text-strong); margin-block-end: 4px; }
.scheme__card-text { margin: 0; font-size: .875rem; line-height: 1.5; }

.scheme__dot-no { display: none; }

/* Dar ekran: haplar cizimi kapatiyor; gizlenir, nokta numarali olur. Kart
   basligi zaten adi tasir. */
@media (max-width: 767px) {
  .scheme__dot { inline-size: 22px; block-size: 22px; border-width: 2px; }
  .scheme__dot-no { display: block; color: var(--st-white); font-size: .7rem; font-weight: 700; line-height: 18px; }
  .scheme__label { display: none; }
  .scheme__card { top: 18px; inline-size: min(240px, 76vw); }
  .scheme__spot.is-up .scheme__card { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .scheme__dot::before { animation: none; }
  .scheme__dot, .scheme__card { transition: none; }
}

/* --- YouTube karti (data-youtube): sahnede ve buyuk gorunumde iframe --- */
.gallery__video--yt { border: 0; object-fit: unset; background: #000; }
.lightbox__yt {
  inline-size: min(100%, calc((100dvh - 2 * var(--lb-pad) - var(--lb-alt)) * 16 / 9));
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
  background: #000;
}
/* Posteri olmayan video karesi: koyu zemin, rozet ortada. */
.gallery__frame.is-postersiz { background: var(--st-slate-dark); }
.gallery__frame.is-postersiz > img { opacity: 0; }
.gallery__thumb.is-video:empty, .gallery__thumb.is-video:not(:has(img)) { background: var(--st-slate-dark); }