/* ---------- Başlıklar ---------- */
.display-title {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-thin);
  line-height: var(--line-height-display);
  text-align: center;
}

.section-title {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-thin);
  line-height: normal;
}

.section-title--center {
  text-align: center;
}

.text-emphasis {
  font-weight: var(--font-weight-semibold);
  font-style: italic;
}

/* "Kimiz?", "Ulaşın": dar (condensed) yarı kalın italik. */
.text-emphasis--condensed {
  font-stretch: var(--font-stretch-condensed);
}

.text-regular {
  font-weight: var(--font-weight-regular);
}

.text-accent {
  color: var(--color-accent-text);
}

/* ---------- Kategori sekmeleri ---------- */
.category-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 64px;
  font-size: var(--font-size-tab);
}

/*
 * Seçili sekme: tam ön plan rengi, kalın ve altında ortadan açılan vurgu çizgisi; diğerleri soluk.
 * Soluklaştırma opacity ile değil renkle yapılır: giriş animasyonu (data-reveal) opacity'yi satır içi yazar.
 */
.category-tabs__tab {
  position: relative;
  font-weight: var(--font-weight-light);
  color: var(--color-foreground-muted);
  transition: color var(--duration-fast) ease;
}

.category-tabs__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.category-tabs__tab[aria-selected="true"] {
  font-weight: var(--font-weight-semibold);
  color: var(--color-foreground);
}

.category-tabs__tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.category-tabs__tab:not([aria-selected="true"]):hover,
.category-tabs__tab:not([aria-selected="true"]):focus-visible {
  color: var(--color-foreground-soft);
}

/*
 * ---------- Yana kayan şerit (interactions.js initScrollStrip) ----------
 * Telefonda ana sayfa sekmeleri ve katalog kategori şeritleri yana kayar. Devamı olan kenarda yazı solar ve üstünde
 * küçük bir ok düğmesi durur; şerit sığıyorsa ikisi de görünmez. Düğme yazı satırına ortalanır
 * (--scroll-strip-gap-bottom: seçili sekmenin çizgisi için bırakılan alt boşluk, betik şeritten okur).
 */
.scroll-strip {
  --scroll-strip-fade: 64px;
  --scroll-strip-nav-size: 30px;
  position: relative;
}

.scroll-strip__track.has-more-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--scroll-strip-fade)), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--scroll-strip-fade)), transparent);
}

.scroll-strip__track.has-more-start {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--scroll-strip-fade)), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - var(--scroll-strip-fade)), transparent);
}

.scroll-strip__track.has-more-start.has-more-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--scroll-strip-fade), #000 calc(100% - var(--scroll-strip-fade)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--scroll-strip-fade), #000 calc(100% - var(--scroll-strip-fade)), transparent);
}

.scroll-strip__nav {
  --size-header-button: var(--scroll-strip-nav-size);
  position: absolute;
  top: calc((100% - var(--scroll-strip-gap-bottom, 0px)) / 2);
  z-index: 1;
  transform: translateY(-50%);
  border-radius: var(--radius-pill);
}

.scroll-strip__nav[hidden] {
  display: none;
}

.scroll-strip__nav--prev {
  left: 0;
}

.scroll-strip__nav--next {
  right: 0;
}

/* İkon dosyası aşağı bakar; sağa ve sola döndürülür. */
.scroll-strip__icon {
  width: 10.5px;
  height: 6px;
  transform: rotate(-90deg);
}

.scroll-strip__nav--prev .scroll-strip__icon {
  transform: rotate(90deg);
}

/* ---------- Ürün ızgarası ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}

/* ---------- Ürün kartı ----------
 * Varsayılan hali: boş bölmeli çubuk. Üzerine gelince (Figma'daki 1. ve 2. kart durumları)
 * cam kutu belirginleşir (gece #333, gündüz #ccc), çubuk vurgu rengiyle dolar. Sitede fiyat gösterilmiyor.
 */
.product-card {
  position: relative;
  display: block;
  /* Figma'da ızgaranın 2. satırı 737'de başlıyor; kaldırılan fiyat satırının yeri (13 + 15.6px) korunuyor. */
  padding-bottom: 28.6px;
}

.product-card__media {
  /* Figma: 304px çubuk, 338px kartın 15px içinden başlar. */
  --segment-bar-start: 4.44%;
  --segment-bar-end: 94.38%;
  position: relative;
  aspect-ratio: 338 / 281;
  background: var(--color-glass-faint);
  /* Kenar çizgisi ::after'da çiziliyor; kutunun ölçüsü değişmesin diye aynı kalınlıkta şeffaf kenarlık kalır. */
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-card);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transition: background-color var(--duration-base) var(--ease-out-soft);
  transform-style: preserve-3d;
  will-change: transform;
}

/* İmleci takip eden yumuşak ışık lekesi (motion.js --spot-x/--spot-y değerlerini günceller). */
.product-card__media::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--color-spotlight), transparent 70%);
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  pointer-events: none;
}

/*
 * Kartın kenar çizgisi. Bölmeli çubuk alt kenarın üstüne oturuyor; çizgi çubuğun arkasından geçip
 * dört parçayı yatayda ikiye bölmesin diye çubuğun kapladığı aralık çizgiden oyulur.
 */
.product-card__media::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--border-hairline));
  border: var(--border-hairline) solid var(--color-line);
  border-radius: inherit;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--segment-bar-end) 100%,
    var(--segment-bar-end) 50%,
    var(--segment-bar-start) 50%,
    var(--segment-bar-start) 100%,
    0 100%
  );
  pointer-events: none;
}

.product-card__image-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}

.product-card__image {
  position: absolute;
  left: 20.41%;
  top: 4.63%;
  width: 61.54%;
  height: 84.7%;
  max-width: none;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out-expo);
}

.product-card:hover .product-card__media,
.product-card:focus-visible .product-card__media {
  background: var(--color-glass-strong);
}

.product-card:hover .product-card__media::before {
  opacity: 1;
}

.product-card:hover .product-card__image,
.product-card:focus-visible .product-card__image {
  transform: translateY(-6px) scale(1.04);
}

/* ---------- Bölmeli çubuk ----------
 * Figma: 304 × 11, kartın alt kenarına ortalanmış; 3 bölme çizgisiyle 4 parça.
 * Kartın üzerine gelince vurgu rengindeki dolgu (gece beyaz, gündüz siyah) çubuğun tamamı boyunca, parça parça soldan sağa ilerler;
 * ayrılınca sağdan sola boşalır.
 */
.segment-bar {
  --segment-part-seconds: 0.26s;
  --segment-step-seconds: 0.13s;
  position: absolute;
  /* Kartın kenar çizgisinin (::after) üstünde dursun. */
  z-index: 1;
  left: var(--segment-bar-start);
  width: calc(var(--segment-bar-end) - var(--segment-bar-start));
  bottom: -5px;
  height: 11px;
  background: var(--color-glass-faint);
  border-radius: 16px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* Dış çizgi ayrı katmanda: dolgu doluyken de üstte görünür. */
.segment-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--border-hairline) solid var(--color-line);
  border-radius: inherit;
}

/* hidden değil clip: hidden kutuyu kaydırma kabı yapıyor ve dokunmatikteki view() zaman çizelgesi sayfa yerine onu izliyordu. */
.segment-bar__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: clip;
}

/* Boşalırken bekleme sırası tersten: önce sağdaki parça boşalır. */
.segment-bar__part {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% / var(--segment-count) * var(--segment-index));
  width: calc(100% / var(--segment-count));
  background: var(--color-accent);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--segment-part-seconds) var(--ease-in-out)
    calc((var(--segment-count) - 1 - var(--segment-index)) * var(--segment-step-seconds));
}

.product-card:hover .segment-bar__part,
.product-card:focus-visible .segment-bar__part {
  clip-path: inset(0);
  transition-delay: calc(var(--segment-index) * var(--segment-step-seconds));
}

/*
 * Bölme çizgisi kenarlık olarak çizilir: 0.5px kenarlık her ekran ölçeğinde en az bir tam piksele
 * yuvarlanır, böylece çizgi 1x ekranlarda da çubuğun dış çizgisi kadar net görünür.
 */
.segment-bar__tick {
  position: absolute;
  top: var(--border-hairline);
  bottom: var(--border-hairline);
  left: calc(100% / var(--segment-count) * var(--segment-index));
  border-left: var(--border-hairline) solid var(--color-line);
}

.product-card__title {
  margin-top: 31px;
  max-width: 261px;
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-medium);
  font-feature-settings: "liga" 0;
}

/* ---------- Kare cam buton (katalog araması) ---------- */
.glass-square {
  display: grid;
  place-items: center;
  width: var(--size-filter-button);
  height: var(--size-filter-button);
  background: var(--color-glass-strong);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-control);
  transition: background-color var(--duration-fast) ease;
}

.glass-square:hover {
  background: var(--color-glass-hover);
}

/* Boyu ortak ikon kuralından (base.css, --size-icon); arama ikonu Figma'da yatay çevrilmiş. */
.glass-square__icon {
  transform: scaleX(-1);
}

/* ---------- Cam kutu (galeri, harita) ---------- */
.glass-box {
  position: relative;
  background: var(--color-glass-faint);
  border: var(--border-hairline) solid var(--color-line);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* ---------- Akordeon ---------- */
.accordion__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 25px 63px 25.2px 0;
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-medium);
  text-align: left;
}

.accordion__trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: url("../img/divider-accordion.svg") no-repeat left center / 100% 1px;
  filter: var(--icon-filter);
}

.accordion__chevron {
  width: 10.5px;
  height: 6px;
  transition: transform var(--duration-base) var(--ease-out-expo);
}

.accordion__trigger[aria-expanded="true"] .accordion__chevron {
  transform: rotate(180deg);
}

.accordion__panel {
  height: 0;
  overflow: hidden;
}

.accordion__content {
  padding: 25px 0 37.6px;
}

.accordion__text {
  max-width: 644px;
  padding-left: 2px;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-light);
  font-style: italic;
  line-height: var(--line-height-compact);
}

/* ---------- Ürün bilgi satırları ---------- */
.product-facts {
  display: grid;
  gap: 20.2px;
  /* Tasarımdaki 246px kısa değerler içindir; admin panelinden girilen uzun değerlerde liste genişler. */
  width: fit-content;
  min-width: 246px;
  max-width: 100%;
  font-size: var(--font-size-body-lg);
}

.product-facts__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.product-facts__label {
  flex-shrink: 0;
  font-weight: var(--font-weight-light);
  white-space: nowrap;
}

.product-facts__value {
  font-weight: var(--font-weight-medium);
  text-align: right;
}

.product-facts + .accordion__text {
  margin-top: 44.2px;
}

/* ---------- İçerik sekmesi (Hikayesi) ---------- */
.content-tabs {
  position: relative;
  display: flex;
  gap: 16px;
}

.content-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: url("../img/divider-story.svg") no-repeat left center / 100% 1px;
  filter: var(--icon-filter);
}

.content-tabs__tab {
  padding: 15px 20px;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  font-size: var(--font-size-tab);
  font-weight: var(--font-weight-light);
  line-height: normal;
}

.content-tabs__tab[aria-selected="true"] {
  background: var(--color-foreground);
  color: var(--color-background);
}

/* ---------- Uzun metin ---------- */
.prose {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-light);
  font-style: italic;
}

.prose--airy {
  line-height: var(--line-height-prose);
}

/* Figma'da paragraflar arasında bir boş satır var. */
.prose p + p {
  margin-top: 1lh;
}

/* ---------- İletişim satırları ---------- */
.contact-list {
  display: grid;
  gap: 30px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-body);
  font-style: italic;
  line-height: var(--line-height-prose);
}

.contact-item__icon-box {
  flex: none;
  pointer-events: none;
}

.contact-item__text {
  font-weight: var(--font-weight-light);
}

.contact-item__text--strong {
  font-weight: var(--font-weight-semibold);
}

a.contact-item:hover .contact-item__text {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 4px;
}

a.contact-item:hover .glass-button {
  background: var(--color-glass-hover);
}

/* ---------- Harita ---------- */
.map-card {
  display: block;
  padding: 30px;
  border-radius: var(--radius-card);
}

.map-card__window {
  position: relative;
  display: block;
  aspect-ratio: 1042 / 333;
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
  /*
   * Figma'da harita her iki modda da açık gri tonludur: görsel "luminosity" ile bu gri zemine karışıp renginden arınır.
   * Cam kutu kendi katmanını izole ettiği için zemin burada veriliyor.
   */
  background: var(--map-tint-base);
}

/* Figma: 1920×1080 harita görseli 1681×945.6 boyutunda, pencereye göre (-471, -305) konumunda. */
.map-card__image {
  position: absolute;
  left: -45.23%;
  top: -91.59%;
  width: 161.33%;
  height: 283.96%;
  max-width: none;
  mix-blend-mode: luminosity;
  transition: transform 1.2s var(--ease-out-expo);
  transform-origin: 75% 75%;
}

.map-card:hover .map-card__image {
  transform: scale(1.04);
}

.map-card__pin {
  position: absolute;
  left: 30.42%;
  top: 41.44%;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

.map-card__pin-icon {
  width: 17.5px;
  height: 21.5px;
}

/* Pinin altında yayılan halka. */
.map-card__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: 22px;
  height: 8px;
  border: 1px solid var(--color-map-pin);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: map-pin-ripple 2.4s var(--ease-out-soft) infinite;
}

@keyframes map-pin-ripple {
  from {
    opacity: 0.9;
    transform: translateX(-50%) scale(0.6);
  }

  to {
    opacity: 0;
    transform: translateX(-50%) scale(2.6);
  }
}

/* ---------- Etkileşimli harita (iletişim, assets/js/contact-map.js) ----------
 * OpenStreetMap karoları Figma gibi her iki modda açık gri tonlara filtreyle çekilir; pin tasarımdaki siyah pin ve yayılan halkadır.
 * + / − düğmeleri haritanın sağ üstünde, "Yol tarifi al" kartın altındadır.
 */
.map-card {
  --map-card-padding: 30px;
  --map-control-inset: 12px;
  position: relative;
}

.map-card__window--live {
  /* Görsel haritanın oranı (1042/333) canlı haritada fazla basık kalır; yükseklik sabitlenir, genişlik kutuyu izler.
   * (aspect-ratio + min-height birlikteyken tarayıcı genişliği yükseklikten türetip kartın dışına taşırıyordu.) */
  aspect-ratio: auto;
  height: clamp(300px, 26vw, 380px);
  background: var(--map-tint-base);
}

.map-card__window--live.leaflet-container {
  font-family: var(--font-family-base);
  background: var(--map-tint-base);
}

.map-card__window--live .leaflet-tile-pane {
  filter: var(--map-tile-filter);
}

/* Leaflet stili sayfada bizimkinden sonra yüklendiği için seçici bir kademe güçlendirilir. */
.map-card .map-card__window--live .leaflet-control-attribution {
  padding: 2px 8px;
  color: var(--color-map-attribution-text);
  font-size: 10px;
  background: var(--color-map-attribution);
  border-top-left-radius: var(--radius-control);
}

.map-card .map-card__window--live .leaflet-control-attribution a {
  color: var(--color-map-pin);
}

.contact-map-pin {
  position: relative;
}

.contact-map-pin__icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.contact-map-pin__ripple {
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 28px;
  height: 10px;
  border: 1px solid var(--color-map-pin);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: map-pin-ripple 2.4s var(--ease-out-soft) infinite;
}

.map-card__zoom {
  position: absolute;
  top: calc(var(--map-card-padding) + var(--map-control-inset));
  right: calc(var(--map-card-padding) + var(--map-control-inset));
  z-index: 500;
  display: grid;
  gap: 8px;
}

/* Harita her modda açık olduğundan düğmeler saydam cam yerine sayfa zemininde durur (gece siyah, gündüz beyaz). */
.map-card__zoom-button {
  font-size: 22px;
  font-weight: var(--font-weight-light);
  line-height: 1;
  background: var(--color-background);
}

.map-card__zoom-button:hover {
  background: var(--color-background);
  border-color: var(--color-foreground);
}

/* Birincil eylem: vurgu zemini (gece beyaz, gündüz siyah), yazı ve ikon zemin renginde. */
.map-card__directions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: var(--size-filter-button);
  margin-top: 20px;
  padding: 0 22px 0 16px;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-radius: var(--radius-control);
  transition: background-color var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.map-card__directions:hover {
  background: var(--color-accent-hover);
}

.map-card__directions:active {
  transform: scale(0.98);
}

.map-card__directions-icon {
  filter: var(--on-accent-icon-filter);
}

/* ---------- Görsel büyütme görünümü (ürün detayı) ----------
 * Görsel, ayrılan alana (üst bilgi yüksekliği ile alt şerit arası) sığdırılır; yakınlaşınca tüm ekranı kullanır.
 * Konum ve ölçek image-viewer.js'te hesaplanır, burada yalnızca geçişler tanımlıdır.
 */
.image-viewer {
  --viewer-space-top: var(--header-height);
  --viewer-space-bottom: 150px;
  --viewer-space-side: calc(var(--page-gutter) + var(--content-inset));
  position: fixed;
  inset: 0;
  z-index: var(--layer-viewer);
  visibility: hidden;
}

.image-viewer.is-active {
  visibility: visible;
}

.image-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 55% at 50% 45%, var(--color-viewer-glow), transparent 70%), var(--color-viewer-backdrop);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out-soft);
}

.image-viewer.is-open .image-viewer__backdrop {
  opacity: 1;
}

/* Tüm dokunma ve fare hareketleri burada yakalanır; tarayıcının kendi yakınlaştırması kapalı. */
.image-viewer__stage {
  position: absolute;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.image-viewer__fit {
  position: absolute;
  inset: var(--viewer-space-top) var(--viewer-space-side) var(--viewer-space-bottom);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.image-viewer__frame {
  pointer-events: auto;
  cursor: zoom-in;
  transform-origin: center;
  transition: transform 0.65s var(--ease-out-expo);
}

.image-viewer__frame.is-quick {
  transition-duration: 0.2s;
  transition-timing-function: var(--ease-out-soft);
}

.image-viewer__frame.is-instant {
  transition: none;
}

.image-viewer.is-zoomed .image-viewer__frame {
  cursor: grab;
}

.image-viewer.is-gesturing .image-viewer__frame {
  cursor: grabbing;
}

/* Görsel değişirken kısa bir solma; yenisi biraz daha yavaş belirir. */
.image-viewer__image {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  -webkit-user-drag: none;
  transition: opacity 0.4s var(--ease-out-soft), transform 0.4s var(--ease-out-soft);
}

.image-viewer.is-switching .image-viewer__image {
  opacity: 0;
  transform: scale(0.97);
  transition-duration: 0.18s;
}

/* Üst şerit (başlık, yakınlaştırma, kapat) ve alt şerit (ipucu, önceki/sonraki). */
.image-viewer__bar,
.image-viewer__footer {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out-soft);
}

.image-viewer.is-open .image-viewer__bar,
.image-viewer.is-open .image-viewer__footer {
  opacity: 1;
  transition-delay: 0.15s;
}

.image-viewer__bar button,
.image-viewer__footer button {
  pointer-events: auto;
}

.image-viewer__bar {
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-height);
}

.image-viewer__title {
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.image-viewer__actions {
  display: flex;
  flex: none;
  gap: var(--header-actions-gap);
}

.glass-button.is-inactive {
  opacity: 0.4;
}

.image-viewer__footer {
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: var(--viewer-space-bottom);
}

.image-viewer__hint {
  color: var(--color-muted-label);
  font-size: 14px;
  font-style: italic;
  text-align: center;
  transition: opacity var(--duration-base) var(--ease-out-soft);
}

/* İpucu, görünüm bir kez yakınlaştırılınca kaybolur. */
.image-viewer.has-zoomed .image-viewer__hint {
  opacity: 0;
}

.image-viewer__hint-text--touch {
  display: none;
}

@media (hover: none), (pointer: coarse) {
  .image-viewer__hint-text--pointer {
    display: none;
  }

  .image-viewer__hint-text--touch {
    display: inline;
  }
}

.image-viewer__pager {
  display: flex;
  align-items: center;
  gap: 24px;
}

.image-viewer__counter {
  min-width: 64px;
  font-size: var(--font-size-body);
  text-align: center;
}

/* Akordeon oku (aşağı bakan) döndürülerek kullanılır. */
.image-viewer__arrow {
  width: 10.5px;
  height: 6px;
}

.image-viewer__arrow--previous {
  transform: rotate(90deg);
}

.image-viewer__arrow--next {
  transform: rotate(-90deg);
}

@media (max-width: 1200px) {
  .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }

  .category-tabs {
    gap: 12px 32px;
    font-size: var(--font-size-body-lg);
  }

  .product-card__title {
    margin-top: 26px;
    font-size: var(--font-size-body);
  }

  .map-card {
    --map-card-padding: 16px;
    padding: 16px;
  }

  /* Telefonda birincil eylem parmakla kolay basılsın: tam genişlik. */
  .map-card__directions {
    display: flex;
    justify-content: center;
  }
}

/* Telefonda başlık gizlenir (butonlara yer kalsın), alt şerit daralır. */
@media (max-width: 700px) {
  .image-viewer {
    --viewer-space-bottom: 128px;
  }

  /*
   * Telefonda harita kare (müşteri isteği): masaüstünün 1042/333 oranı dar ekranda ince bir şeride dönüyordu.
   * Görsel harita (16:9 tarayıcı ekran görüntüsü) yüksekliğinin %70'i görünecek kadar büyütülür; pinin görseldeki
   * yeri (%46,89 / %46,85, masaüstü kırpmasından) kutuda da aynı orana denk gelir. Böylece görseldeki adres çubuğu,
   * sol panel ve görev çubuğu kutunun dışında kalır: genişlik 100/0,7 × 16/9, sol = 0,4689 × (100 − genişlik).
   */
  .map-card__window,
  .map-card__window--live {
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .map-card__image {
    left: -72.2%;
    top: -20.08%;
    width: 253.97%;
    height: 142.86%;
  }

  .map-card__pin {
    left: 46.89%;
    top: 46.85%;
  }

  .image-viewer__bar {
    justify-content: flex-end;
  }

  .image-viewer__title {
    display: none;
  }

  .image-viewer__footer {
    gap: 14px;
  }

  .image-viewer__hint {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Sekmeler tek satırda kalır ve parmakla yana kaydırılır (katalog şeridi gibi). Ortalanmış taşan satır iki kenardan
     kesiliyor, soldaki sekmeye ulaşılamıyor ve sayfayı yana kaydırıyordu. Sığdığında kenar boşlukları (auto) satırı
     ortalar, taşınca sıfırlanır. Alt boşluk seçili sekmenin çizgisine yer açar (kaydırma kutusu taşanı keser). */
  .category-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 12px;
    font-size: var(--font-size-body);
  }

  .category-tabs::-webkit-scrollbar {
    display: none;
  }

  .category-tabs__tab {
    flex: none;
    white-space: nowrap;
  }

  .category-tabs__tab:first-child {
    margin-left: auto;
  }

  .category-tabs__tab:last-child {
    margin-right: auto;
  }
}

/*
 * Dokunmatik ekranlarda hover yok: kart ekranın alt yarısında yukarı kaydıkça çubuk parça parça dolar, geri
 * kaydırınca boşalır (kaydırmaya bağlı CSS animasyonu). Desteklemeyen tarayıcılarda ve hareket kapalıyken dolu görünür.
 * Her parça "cover" aralığının start + index × step ile start + (index + 1) × step dilimini doldurur (varsayılan
 * %12 ve %6). Sayfanın sonundaki kartlarda bu aralığa yetecek kaydırma payı kalmaz; main.js (fitSegmentBars)
 * o çubukların start/step değerlerini kalan paya göre orantılı küçültür, böylece çubuk sayfa sonunda tamamlanır.
 */
@media (hover: none) {
  .segment-bar__part {
    clip-path: inset(0);
  }

  @supports (animation-timeline: view()) {
    .js-motion .segment-bar__part {
      --segment-start: var(--segment-range-start, 12%);
      --segment-step: var(--segment-range-step, 6%);
      animation: segment-part-fill linear both;
      animation-timeline: view();
      animation-range:
        cover calc(var(--segment-start) + var(--segment-index) * var(--segment-step))
        cover calc(var(--segment-start) + (var(--segment-index) + 1) * var(--segment-step));
    }
  }
}

@keyframes segment-part-fill {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0);
  }
}