/* ---------- 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);
}

/* ---------- Ü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;
  }

  .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);
  }

  .category-tabs {
    flex-wrap: nowrap;
    gap: 16px;
    font-size: var(--font-size-body);
  }

}

/*
 * 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);
  }
}