/*
 * Paylaşımlı yapısal CSS — tüm temalar bunu kullanır, yalnızca
 * tokens.css'teki `--tt-*` değişkenlerini override eder
 * (docs/ARCHITECTURE.md §6). Buradaki kurallar hiçbir zaman ham renk/
 * font değeri içermez, yalnızca `var(--tt-*, yedek)` okur.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--tt-color-bg, #fff);
  color: var(--tt-color-text, #1f2429);
  font-family: var(--tt-font-body, sans-serif);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  font-family: var(--tt-font-heading, sans-serif);
  line-height: 1.25;
  margin: 0 0 var(--tt-space-2, 8px);
}

a {
  color: var(--tt-color-primary, #2b3440);
  transition: color var(--tt-transition, 150ms ease), opacity var(--tt-transition, 150ms ease);
}

a:hover {
  opacity: 0.75;
}

:focus-visible {
  outline: 2px solid var(--tt-color-primary, #2b3440);
  outline-offset: 2px;
}

/* Kaydırma animasyonları (profesyonel site cilası Faz 10, 2026-08-21) —
   `[data-reveal]` taşıyan bir eleman görünüme girene kadar hafifçe
   saydam/aşağı kaydırılmış durur, girince `.is-visible` (JS,
   `layout.php`) ekleyip normale döner. `data-reveal-delay="N"` (ms)
   ile aynı bölümdeki öğeler sırayla belirebilir (ör. ürün kartları). */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: var(--tt-reveal-delay, 0ms);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none;
  }
}

/* Sayfa yükleme çubuğu + preloader (profesyonel site cilası Faz 6,
   2026-08-21) — bkz. `layout.php`'deki JS. */
#tt-page-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--tt-color-primary, #2b3440);
  z-index: 2000;
  transition: width 400ms ease;
}

#tt-page-progress.is-active {
  width: 70%;
}

#tt-preloader {
  position: fixed;
  inset: 0;
  z-index: 1999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tt-color-bg, #fff);
  opacity: 1;
  transition: opacity 250ms ease;
}

#tt-preloader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.tt-preloader__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--tt-color-border, #dde1e5);
  border-top-color: var(--tt-color-primary, #2b3440);
  border-radius: 50%;
  animation: tt-load-more-spin 0.7s linear infinite;
}

#tt-preloader img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  animation: tt-preloader-pulse 1.1s ease-in-out infinite;
}

@keyframes tt-preloader-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.92); opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  #tt-page-progress {
    transition: none;
  }

  .tt-preloader__spinner,
  #tt-preloader img {
    animation: none;
  }
}

.tt-container {
  max-width: var(--tt-container-width, 1160px);
  margin: 0 auto;
  padding: 0 var(--tt-space-3, 16px);
}

/* Sınıfsız her `<button>` için taban görünüm — özel bir stil verilmemiş
   (ör. sepet satırındaki "Güncelle"/"Kaldır") her buton yine de tutarlı
   görünsün diye. `.tt-button` bunun üzerine vurgulu (birincil CTA)
   varyantı ekler. */
button {
  font: inherit;
  padding: var(--tt-space-1, 4px) var(--tt-space-3, 16px);
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  background: var(--tt-color-surface, #f5f6f7);
  color: var(--tt-color-text, #1f2429);
  cursor: pointer;
  transition: filter var(--tt-transition, 150ms ease), transform var(--tt-transition, 150ms ease);
}

button:hover {
  filter: brightness(0.96);
}

button:active {
  transform: translateY(1px);
}

/* --- Üst bilgi / alt bilgi ------------------------------------------- */

.tt-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--tt-color-border, #dde1e5);
  background: var(--tt-color-bg, #fff);
}

.tt-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--tt-space-3, 16px);
  padding: var(--tt-space-3, 16px) 0;
}

.tt-header__brand {
  font-family: var(--tt-font-heading, sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--tt-color-text, #1f2429);
  text-decoration: none;
}

.tt-header__brand:hover {
  opacity: 1;
  color: var(--tt-color-primary, #2b3440);
}

/* Duyuru şeridi (profesyonel site cilası Faz 7, 2026-08-21) — kullanıcının
   güven istatistikleri için verdiği AYNI geri bildirim burada baştan
   uygulanır: saf akan/marquee DEĞİL, tek cümleyi gösterip birkaç saniyede
   bir kayarak değiştiren bir şerit (bkz. `layout.php`'deki JS). */
.tt-announce-bar {
  background: var(--tt-color-primary, #2b3440);
  color: var(--tt-color-primary-contrast, #fff);
  overflow: hidden;
}

.tt-announce-bar__viewport {
  max-width: var(--tt-container-width, 1160px);
  margin: 0 auto;
  padding: 8px var(--tt-space-3, 16px);
  overflow: hidden;
}

.tt-announce-bar__track {
  display: flex;
  transition: transform 500ms ease;
}

.tt-announce-bar__slide {
  flex: 0 0 100%;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
  .tt-announce-bar__track {
    transition: none;
  }
}

/* Faz Z (revize) — hikwo.com referanslı, her zaman görünen kategori
   şeridi: kendi arka planıyla ayrı bir satır, her öğe ikon-üstte/
   etiket-altta dikey bir blok. Önceki sürümde ikonlar header'ın ana
   satırına küçük/inline gömülüydü — bu, hikwo'daki gibi kendi başına
   duran bir "kategori şeridi" hissi vermiyordu. */
.tt-category-bar {
  background: var(--tt-color-surface, #f5f6f7);
  border-top: 1px solid var(--tt-color-border, #dde1e5);
}

.tt-category-bar__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-4, 24px);
  padding: var(--tt-space-2, 8px) 0;
  /* `overflow-x: auto` KASITLI OLARAK yok: tek eksende overflow
     ayarlamak tarayıcıda diğer ekseni de `auto` yapar (CSSOM), bu da
     `top: 100%` ile aşağı taşan `.tt-mega-menu-panel` açılır menüsünü
     kırpardı — kullanıcı geri bildirimi (2026-07-23): "alta açılan
     menü görünmüyor, sliderin altında kalıyor". Taşma `flex-wrap` ile
     yönetilir. */
}

.tt-category-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  color: var(--tt-color-text, #1f2429);
  text-decoration: none;
  font-size: 0.8rem;
  text-align: center;
  padding: var(--tt-space-1, 4px) 0;
}

.tt-category-bar__item:hover {
  color: var(--tt-color-primary, #2b3440);
}

.tt-category-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--tt-radius, 6px);
  background: var(--tt-color-bg, #fff);
  border: 1px solid var(--tt-color-border, #dde1e5);
  color: var(--tt-color-primary, #2b3440);
}

.tt-category-bar__icon img {
  width: 100%;
  height: 100%;
  border-radius: var(--tt-radius, 6px);
  object-fit: cover;
}

/* Kategorinin henüz gerçek görseli yoksa, adının baş harfinden bir
   monogram gösterilir (uydurma ikon YOK) — bkz. .tt-category-bar__icon
   span (üst şerit) ve .tt-category-bar__icon-fallback (mega-menü). */
.tt-category-bar__icon span {
  font-weight: 800;
  font-size: 0.95rem;
}

.tt-mega-menu-item {
  position: relative;
}

.tt-mega-menu-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 220px;
  padding: var(--tt-space-3, 16px);
  background: var(--tt-color-bg, #fff);
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  box-shadow: var(--tt-shadow-hover, 0 8px 20px rgba(0, 0, 0, 0.1));
  flex-direction: column;
  gap: var(--tt-space-2, 8px);
}

.tt-mega-menu-item:hover .tt-mega-menu-panel,
.tt-mega-menu-item:focus-within .tt-mega-menu-panel {
  display: flex;
}

.tt-mega-menu-panel a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tt-color-text, #1f2429);
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.tt-mega-menu-panel a img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tt-color-surface, #f5f6f7);
}

.tt-category-bar__icon-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tt-color-surface, #f5f6f7);
  border: 1px solid var(--tt-color-border, #dde1e5);
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--tt-color-primary, #2b3440);
}

.tt-mega-menu-panel a:hover {
  color: var(--tt-color-primary, #2b3440);
}

.tt-mega-menu-panel__all {
  margin-top: var(--tt-space-1, 4px);
  padding-top: var(--tt-space-2, 8px);
  border-top: 1px solid var(--tt-color-border, #dde1e5);
  font-weight: 600;
  font-size: 0.85rem !important;
}

.tt-breadcrumb {
  font-size: 0.85rem;
  color: var(--tt-color-muted, #6b7580);
  margin-bottom: var(--tt-space-3, 16px);
}

.tt-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.tt-breadcrumb a:hover {
  text-decoration: underline;
}

.tt-category-children {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-2, 8px);
  margin-bottom: var(--tt-space-4, 24px);
}

/* Faz J — ana sayfa slider'ı + kategori şeridi. */
/* NOT: birden fazla slayt eklendiğinde eski tasarım (yatay
   `overflow-x: auto` + `scroll-snap`) görseli "sığdırmıyor", kullanıcıyı
   alttaki native tarayıcı kaydırma çubuğunu sürüklemeye zorluyordu
   (kullanıcı geri bildirimi: "sığmadığında çıkan çubuktan çıkıyor").
   Yeni tasarım: sabit oranlı (aspect-ratio) bir kutu, slaytlar bu kutunun
   İÇİNE mutlak konumlanır ve JS ile (aşağıdaki `<script>`) otomatik
   olarak çapraz geçişle (fade) değişir — kaydırma çubuğu YOK, her görsel
   kutuya `object-fit: cover` ile sığar. */
.tt-slider {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: var(--tt-space-4, 24px);
  aspect-ratio: 21 / 9;
  background: #000;
}

@media (max-width: 640px) {
  .tt-slider {
    aspect-ratio: 4 / 3;
  }
}

.tt-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
  display: block;
  color: inherit;
  text-decoration: none;
}

.tt-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.tt-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tt-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.tt-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}

.tt-slider__dot.is-active {
  background: #fff;
}

.tt-slider__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  padding: var(--tt-space-3, 16px);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent);
  color: #fff;
}

.tt-slider__caption h2 {
  margin: 0 0 4px;
  font-family: var(--tt-font-heading, sans-serif);
}

.tt-slider__caption p {
  margin: 0;
}

.tt-category-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-4, 24px);
  margin-bottom: var(--tt-space-5, 40px);
  justify-content: center;
}

.tt-category-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tt-space-2, 8px);
  color: var(--tt-color-text, #1f2429);
  text-decoration: none;
  width: 96px;
  text-align: center;
}

.tt-category-strip__item img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--tt-color-surface, #f5f6f7);
}

.tt-category-strip__item span {
  font-size: 0.85rem;
}

.tt-category-strip__item:hover span {
  color: var(--tt-color-primary, #2b3440);
  text-decoration: underline;
}

/* Faz K — arama/sıralama çubuğu + sayfalama. */
.tt-search-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-2, 8px);
  margin-bottom: var(--tt-space-4, 24px);
}

.tt-search-bar input[type="text"] {
  flex: 1 1 220px;
  padding: 8px 12px;
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: 6px;
}

.tt-search-bar select {
  padding: 8px 12px;
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: 6px;
}

/* Kaydırdıkça yükleme (2026-08-15) — eski sayfa-numaralı `.tt-pagination`
   linklerinin yerini aldı (bkz. `partials/pagination.php`). Sentinel
   normalde ekranın dışındadır; `IntersectionObserver` görünür olur
   olmaz bir sonraki sayfayı getirip kaldırır — kullanıcı yalnızca kısa
   bir "yükleniyor" anını görür. */
.tt-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tt-space-2, 8px);
  margin-top: var(--tt-space-4, 24px);
  padding: var(--tt-space-3, 16px);
  color: var(--tt-color-muted, #6b7580);
  font-size: 0.9rem;
}

.tt-load-more__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--tt-color-border, #dde1e5);
  border-top-color: var(--tt-color-primary, #2b3440);
  border-radius: 50%;
  animation: tt-load-more-spin 0.7s linear infinite;
}

@keyframes tt-load-more-spin {
  to {
    transform: rotate(360deg);
  }
}

.tt-footer {
  margin-top: var(--tt-space-5, 40px);
  border-top: 1px solid var(--tt-color-border, #dde1e5);
  background: var(--tt-color-surface, #f5f6f7);
  padding: var(--tt-space-4, 24px) 0;
  color: var(--tt-color-muted, #6b7580);
  font-size: 0.9rem;
}

/* Güven rozetleri (profesyonel site cilası Faz 5, 2026-08-21) —
   checkout ve footer'da paylaşılır (`partials/trust-badges.php`). */
.tt-trust-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--tt-space-4, 24px);
  padding: var(--tt-space-4, 24px) 0;
  margin-bottom: var(--tt-space-4, 24px);
  border-top: 1px solid var(--tt-color-border, #dde1e5);
  border-bottom: 1px solid var(--tt-color-border, #dde1e5);
}

.tt-trust-badges__item,
.tt-trust-badges__item a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tt-color-text, #1f2429);
  text-decoration: none;
}

.tt-trust-badges__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--tt-color-primary, #2b3440);
}

.tt-trust-badges__item strong {
  display: block;
  font-size: 0.9rem;
}

.tt-trust-badges__item span:last-child {
  display: block;
  font-size: 0.8rem;
  color: var(--tt-color-muted, #6b7580);
}

@media (max-width: 640px) {
  .tt-trust-badges {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tt-space-3, 16px);
  }
}

.tt-footer__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-3, 16px);
  margin: 0;
  padding: 0;
}

.tt-footer__links a {
  color: inherit;
  text-decoration: none;
}

.tt-footer__links a:hover {
  opacity: 1;
  text-decoration: underline;
}

/* --- Ürün kartı / ızgara ---------------------------------------------- */

.tt-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--tt-space-4, 24px);
  margin: var(--tt-space-4, 24px) 0;
}

.tt-product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--tt-color-bg, #fff);
  box-shadow: var(--tt-shadow, none);
  transition: transform var(--tt-transition, 150ms ease), box-shadow var(--tt-transition, 150ms ease);
}

.tt-product-card:hover {
  opacity: 1;
  transform: translateY(-4px);
  box-shadow: var(--tt-shadow-hover, 0 8px 20px rgba(0, 0, 0, 0.1));
}

.tt-product-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

/* Hızlı "Sepete Ekle" — yalnızca varyant seçimi gerektirmeyen basit
   ürünlerde (bkz. product-grid.php `$product->isSimple()`). */
.tt-product-card__add-form {
  padding: 0 var(--tt-space-3, 16px) var(--tt-space-3, 16px);
}

.tt-product-card__add-btn {
  width: 100%;
  padding-top: var(--tt-space-1, 4px);
  padding-bottom: var(--tt-space-1, 4px);
  font-size: 0.9rem;
}

.tt-product-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--tt-color-surface, #f5f6f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tt-color-muted, #6b7580);
  font-size: 0.85rem;
}

/* Faz L — indirim rozeti + yıldız puanı. */
.tt-badge--discount {
  position: absolute;
  top: var(--tt-space-2, 8px);
  left: var(--tt-space-2, 8px);
  background: var(--tt-color-primary, #2b3440);
  /* Gece/gündüz kontrast tutarsızlığı denetimi (2026-08-21) — sabit
     `#fff` yerine `--tt-color-primary-contrast` kullanılır: gece
     modunda marka rengi (turuncu) üzerinde beyaz metin zayıf kontrast
     veriyordu (~2.8:1), doğru token koyu metinle çok daha okunaklı
     (~6.8:1). */
  color: var(--tt-color-primary-contrast, #fff);
  font-weight: 700;
  z-index: 1;
}

/* Faz AG — "YENİ" rozeti. İndirim rozetiyle (sol üst) çakışmasın diye
   sağ üste konur — ikisi aynı üründe birlikte görünebilir. */
.tt-badge--new {
  position: absolute;
  top: var(--tt-space-2, 8px);
  right: var(--tt-space-2, 8px);
  background: var(--tt-color-accent, #2b7a4b);
  color: #fff;
  font-weight: 700;
  z-index: 1;
}

/* Kullanıcı geri bildirimi (2026-07-23): stoğu 0 olan ürünlerde
   "Stokta Yok" rozeti — alt kenar boyunca, indirim/YENİ rozetleriyle
   çakışmasın diye köşe yerine banttır. */
.tt-badge--out-of-stock {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(31, 36, 41, 0.85);
  color: #fff;
  font-weight: 700;
  border-radius: 0;
  z-index: 1;
}

/* Ürün detay sayfasında (kartın aksine mutlak konumlandırma yok) aynı
   "Stokta Yok" rengi/ağırlığı, normal akışta bir rozet olarak. */
.tt-badge--out-of-stock-inline {
  display: inline-block;
  background: rgba(31, 36, 41, 0.85);
  color: #fff;
  font-weight: 700;
}

.tt-product-card__price-old {
  margin-left: var(--tt-space-2, 8px);
  color: var(--tt-color-muted, #6b7580);
  font-weight: 400;
  font-size: 0.85rem;
}

.tt-product-card__rating {
  color: #d9a441;
  font-size: 0.85rem;
}

.tt-product-card__rating-count {
  color: var(--tt-color-muted, #6b7580);
}

.tt-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tt-product-card__body {
  padding: var(--tt-space-3, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-1, 4px);
}

.tt-product-card__name {
  font-weight: 600;
}

.tt-product-card__price {
  color: var(--tt-color-primary, #2b3440);
  font-weight: 700;
}

/* `product.card.specs` slotu (2026-09-11) — HobbyCraft'ın teknik föy/
   malzeme rozetleri. `tt-` tema tokenleriyle yazıldığı için hangi tema
   aktifse onun paletini otomatik alır (bkz. `.tt-product-card__rating`
   ile aynı desen). Ana `<a>` bağlantısının DIŞINDadır (video linki
   içerebildiği için — bkz. `product-grid.php` yorumu), bu yüzden kendi
   yatay boşluğunu taşır. */
.tt-product-card__specs-wrap {
  padding: 0 var(--tt-space-3, 16px) var(--tt-space-2, 8px);
}

.tt-product-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--tt-space-1, 4px);
  margin: var(--tt-space-1, 4px) 0;
}

.tt-product-card__spec {
  background: var(--tt-color-surface, #f5f6f7);
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  padding: 6px 8px;
}

.tt-product-card__spec--full {
  grid-column: 1 / -1;
}

.tt-product-card__spec-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tt-color-muted, #6b7580);
}

.tt-product-card__spec-value {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tt-color-text, #1c1712);
}

.tt-product-card__spec--easy .tt-product-card__spec-value {
  color: var(--tt-color-accent, #2b7a4b);
}

.tt-product-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--tt-space-1, 4px);
}

.tt-product-card__pill {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--tt-color-surface, #f5f6f7);
  border: 1px solid var(--tt-color-border, #dde1e5);
  color: var(--tt-color-muted, #6b7580);
}

.tt-product-card__pill--active {
  background: color-mix(in srgb, var(--tt-color-accent, #2b7a4b) 12%, transparent);
  border-color: color-mix(in srgb, var(--tt-color-accent, #2b7a4b) 35%, transparent);
  color: var(--tt-color-accent, #2b7a4b);
}

.tt-product-card__video-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--tt-color-accent, #2b7a4b);
  text-decoration: none;
}

.tt-product-card__video-link:hover {
  text-decoration: underline;
}

/* --- Ürün detay --------------------------------------------------------- */

.tt-product-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tt-space-5, 40px);
  margin: var(--tt-space-4, 24px) 0;
}

@media (max-width: 760px) {
  .tt-product-detail {
    /* GERÇEK BUG (2026-08-21, ürün galerisi eklenirken bulundu): çıplak
       `1fr` — masaüstü kuralındaki `minmax(0, 1fr)`'in AKSİNE — grid
       öğesinin varsayılan `min-width: auto`'sunu SIFIRLAMAZ. Öğe içeriği
       (görsel) büyük bir doğal piksel genişliğine sahipse grid sütunu
       konteynerden TAŞARAK o min-content genişliğine göre büyüyor —
       galeri şeridi eklenince görsel gerçek genişliği (ör. 424px) 375px'lik
       mobil konteynerden taştı. `minmax(0, 1fr)` masaüstüyle AYNI korumayı
       sağlar. */
    grid-template-columns: minmax(0, 1fr);
  }
}

.tt-product-detail__media {
  color: var(--tt-color-muted, #6b7580);
}

/* Ürünün hiç görseli yoksa (nadir) — galeri hiç basılmaz, yalnızca
   "Görsel yok" metni kalır; eskiden bu merkezleme `__media`'nın
   kendisindeydi, galeri artık kendi kutusunu yönettiğinden yalnızca
   metin durumuna özgü kılındı. */
.tt-product-detail__media:not(:has(.tt-product-gallery)) {
  aspect-ratio: 1 / 1;
  background: var(--tt-color-surface, #f5f6f7);
  border-radius: var(--tt-radius-lg, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ürün galerisi (profesyonel site cilası Faz 3, 2026-08-21) — sabit
   kare oranı/`overflow:hidden` ÖNCEDEN doğrudan `.tt-product-detail__
   media`'daydı; küçük resim şeridi eklenince bu, şeridi ana görselin
   ALTINA değil İÇİNE (kırpılmış) yerleştirirdi. Artık yalnızca
   `__main` (ana görsel penceresi) kare/kırpılıyor, şerit normal akışta. */
.tt-product-gallery__main {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--tt-color-surface, #f5f6f7);
  border-radius: var(--tt-radius-lg, 12px);
  overflow: hidden;
  cursor: zoom-in;
}

.tt-product-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms ease;
}

.tt-product-gallery__main.is-zoomed img {
  transform: scale(2);
}

@media (prefers-reduced-motion: reduce) {
  .tt-product-gallery__main img {
    transition: none;
  }
}

.tt-product-gallery__thumbs {
  display: flex;
  gap: var(--tt-space-2, 8px);
  margin-top: var(--tt-space-2, 8px);
  overflow-x: auto;
}

.tt-product-gallery__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--tt-radius, 6px);
  overflow: hidden;
  cursor: pointer;
  background: var(--tt-color-surface, #f5f6f7);
  transition: border-color var(--tt-transition, 150ms ease);
}

.tt-product-gallery__thumb.is-active,
.tt-product-gallery__thumb:hover {
  border-color: var(--tt-color-primary, #2b3440);
}

.tt-product-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tt-product-detail__price {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--tt-color-primary, #2b3440);
  margin: var(--tt-space-2, 8px) 0 var(--tt-space-3, 16px);
}

.tt-badge {
  display: inline-block;
  background: var(--tt-color-surface, #f5f6f7);
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  padding: 2px 10px;
  font-size: 0.8rem;
  color: var(--tt-color-muted, #6b7580);
  margin: 0 var(--tt-space-1, 4px) var(--tt-space-1, 4px) 0;
}

/* "Parça Tipi" filtre çubuğu (2026-08-15) — kategori/marka/genel liste
   sayfalarının arama çubuğunun hemen altında. `.tt-badge`'i aktif
   filtreyi vurgulayan bir varyantla yeniden kullanır. */
.tt-part-type-filters,
.tt-brand-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tt-space-1, 4px);
  margin: 0 0 var(--tt-space-3, 16px);
}

.tt-part-type-filters__label,
.tt-brand-filters__label {
  font-size: 0.8rem;
  color: var(--tt-color-muted, #6b7580);
  font-weight: 600;
  margin-right: var(--tt-space-1, 4px);
}

.tt-badge--active {
  background: var(--tt-color-primary, #2b3440);
  border-color: var(--tt-color-primary, #2b3440);
  /* Gece/gündüz kontrast tutarsızlığı denetimi (2026-08-21) — YANLIŞ
     token (`--tt-color-surface`) kullanılıyordu; gündüz modunda o
     neredeyse beyaz olduğundan turuncu üzerinde zayıf kontrast
     veriyordu. Doğrusu `--tt-color-primary-contrast`. */
  color: var(--tt-color-primary-contrast, #fff);
}

/* --- Slot içerikleri (spec tablosu, uyumluluk sekmesi vb.) ------------- */

.tt-section {
  margin: var(--tt-space-4, 24px) 0;
}

/* Öncesi/Sonrası karşılaştırma kaydırıcısı (2026-08-22, müşteri talebi)
 * — CSS-only teknik: `--pos` özel özelliği `<input type="range">`'in
 * `input` olayıyla güncellenir (bkz. `partials/home-before-after.php`
 * sonundaki küçük script), "before" katmanı `clip-path` ile bu yüzdeye
 * göre kırpılır. Kütüphane YOK — yalnızca CSS custom property + native
 * range input. */
.tt-before-after-section__heading {
  text-align: center;
  margin: 0 0 var(--tt-space-3, 16px);
}
.tt-before-after-section__heading span { color: var(--tt-color-primary, #2b3440); }
.tt-before-after-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--tt-space-3, 16px);
}
.tt-before-after {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  overflow: hidden;
  touch-action: pan-y;
}
.tt-before-after__layer { position: absolute; inset: 0; }
.tt-before-after__layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-before-after__layer--before {
  clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0);
}
.tt-before-after__tag {
  position: absolute;
  top: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}
.tt-before-after__tag--before { left: 10px; }
.tt-before-after__tag--after { right: 10px; }
.tt-before-after__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--pos) * 1%);
  transform: translateX(-50%);
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-before-after__handle::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.tt-before-after__handle svg { position: relative; z-index: 1; color: var(--tt-color-primary, #2b3440); }
.tt-before-after__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}
.tt-before-after__range::-webkit-slider-thumb { -webkit-appearance: none; width: 36px; height: 36px; }
.tt-before-after__range::-moz-range-thumb { width: 36px; height: 36px; border: none; background: transparent; }
.tt-before-after__caption {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 999px;
  pointer-events: none;
}

.hc-spec-sheet {
  width: 100%;
  border-collapse: collapse;
}

.hc-spec-sheet th,
.hc-spec-sheet td {
  text-align: left;
  padding: var(--tt-space-2, 8px) var(--tt-space-3, 16px);
  border-bottom: 1px solid var(--tt-color-border, #dde1e5);
}

.hc-spec-sheet th {
  color: var(--tt-color-muted, #6b7580);
  font-weight: 500;
  width: 40%;
}

.hc-compat-tab ul {
  margin: 0;
  padding-left: var(--tt-space-3, 16px);
}

/* `product.detail.specs`'in "mold" ailesi bölümü (2026-09-11) — kartla
   (`.tt-product-card__specs` vb.) AYNI mantık/HTML üretimi
   (`HobbyCraftListeners::buildMoldSpecsHtml()`), yalnızca detay
   sayfasının genişliğine göre daha ferah bir ızgara. */
.tt-product-detail__specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--tt-space-2, 8px);
  margin-bottom: var(--tt-space-3, 16px);
}

.tt-product-detail__spec {
  background: var(--tt-color-surface, #f5f6f7);
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  padding: var(--tt-space-2, 8px) var(--tt-space-3, 16px);
}

.tt-product-detail__spec--full {
  grid-column: 1 / -1;
}

.tt-product-detail__spec-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tt-color-muted, #6b7580);
}

.tt-product-detail__spec-value {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--tt-color-text, #1c1712);
}

.tt-product-detail__spec--easy .tt-product-detail__spec-value {
  color: var(--tt-color-accent, #2b7a4b);
}

.tt-product-detail__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-1, 4px);
  margin-bottom: var(--tt-space-3, 16px);
}

.tt-product-detail__pill {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--tt-color-surface, #f5f6f7);
  border: 1px solid var(--tt-color-border, #dde1e5);
  color: var(--tt-color-muted, #6b7580);
}

.tt-product-detail__pill--active {
  background: color-mix(in srgb, var(--tt-color-accent, #2b7a4b) 12%, transparent);
  border-color: color-mix(in srgb, var(--tt-color-accent, #2b7a4b) 35%, transparent);
  color: var(--tt-color-accent, #2b7a4b);
}

.tt-product-detail__video-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--tt-color-accent, #2b7a4b);
  text-decoration: none;
}

.tt-product-detail__video-link:hover {
  text-decoration: underline;
}

.tt-empty {
  color: var(--tt-color-muted, #6b7580);
  font-style: italic;
}

/* Faz B — Shield login/register görünümleri (app/Views/auth/*). */
.tt-auth {
  max-width: 420px;
  margin: 0 auto;
}

.tt-form label {
  display: block;
  margin-bottom: var(--tt-space-3, 16px);
  font-weight: 500;
}

.tt-form input[type='email'],
.tt-form input[type='password'],
.tt-form input[type='text'] {
  display: block;
  width: 100%;
  margin-top: var(--tt-space-1, 4px);
  padding: var(--tt-space-2, 8px);
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  font: inherit;
  transition: border-color var(--tt-transition, 150ms ease), box-shadow var(--tt-transition, 150ms ease);
}

.tt-form input[type='email']:focus,
.tt-form input[type='password']:focus,
.tt-form input[type='text']:focus {
  outline: none;
  border-color: var(--tt-color-primary, #2b3440);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tt-color-primary, #2b3440) 20%, transparent);
}

.tt-form label:has(input[type='checkbox']) {
  display: flex;
  align-items: center;
  gap: var(--tt-space-2, 8px);
  font-weight: 400;
}

.tt-form button[type='submit'] {
  display: block;
  width: 100%;
  padding: var(--tt-space-2, 8px) var(--tt-space-3, 16px);
  background: var(--tt-color-primary, #2b3440);
  color: var(--tt-color-primary-contrast, #fff);
  border: none;
  border-radius: var(--tt-radius, 6px);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--tt-transition, 150ms ease);
}

.tt-form button[type='submit']:hover {
  filter: brightness(0.9);
}

/*
 * Anlık form doğrulama (profesyonel site cilası Faz 11, 2026-08-21) —
 * `blur`/`input` ile tetiklenen JS (bkz. `layout.php`) `is-invalid`
 * sınıfını ekler/çıkarır ve `.tt-field-error` içine mesaj yazar. Sunucu
 * taraflı doğrulama KALDIRILMADI, bu yalnızca daha hızlı geri bildirim
 * — `.tt-alert--error` ile AYNI kırmızı (#c0392b) kullanılır.
 */
.tt-form input.is-invalid,
.tt-form textarea.is-invalid {
  border-color: #c0392b;
}

.tt-form input.is-invalid:focus,
.tt-form textarea.is-invalid:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2);
}

.tt-field-error {
  display: block;
  min-height: 1.1em;
  margin-top: var(--tt-space-1, 4px);
  color: #c0392b;
  font-size: 0.85rem;
  font-weight: 400;
}

.tt-field-error:empty {
  display: none;
}

.tt-alert {
  padding: var(--tt-space-2, 8px) var(--tt-space-3, 16px);
  border-radius: var(--tt-radius, 6px);
  border-left: 4px solid transparent;
  margin-bottom: var(--tt-space-3, 16px);
}

.tt-alert--error {
  background: #fdecea;
  color: #611a15;
  border-left-color: #c0392b;
}

.tt-alert--success {
  background: #e8f5e9;
  color: #1b5e20;
  border-left-color: #2e7d32;
}

/* Faz C — sepet/checkout. */
.tt-header__nav a {
  margin-left: var(--tt-space-3, 16px);
  color: var(--tt-color-text, #1f2429);
  text-decoration: none;
  font-weight: 500;
}

/*
 * Gece/gündüz kontrast tutarsızlığı denetimi (2026-08-21) — gerçek bug:
 * `.tt-header__nav a` (0,1,1 belirginlik) `.tt-button`'un kendi
 * `color: var(--tt-color-primary-contrast, ...)` kuralını (0,1,0)
 * eziyordu — header içindeki (mini-sepet panelindeki "Ödemeye Geç" gibi)
 * turuncu düğmeler, doğru koyu/açık kontrast metni yerine sayfanın genel
 * metin rengini alıyordu (gece modunda turuncu üzerine neredeyse beyaz,
 * ölçülen oran ~2.5:1 — WCAG AA eşiği 4.5:1).
 */
.tt-header__nav a.tt-button {
  color: var(--tt-color-primary-contrast, #fff);
}

/* Header sepet rozeti (2026-08-19, profesyonel site cilası Faz 2) —
   kullanıcı geri bildirimi: "profesyonel bir sitede neler varsa hepsi
   olsun", kendi eski sitesindeki `pro-count` rozeti referans verildi. */
.tt-cart-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tt-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tt-color-primary, #2b3440);
  color: var(--tt-color-primary-contrast, #fff);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

/* Mobil alt sekme çubuğundaki ikon üzerine bindirilen varyant —
   ikonun sağ üst köşesinde küçük bir rozet olarak durur. */
.tt-mobile-tabbar__icon-wrap {
  position: relative;
  display: inline-flex;
}

.tt-cart-badge--tabbar {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 16px;
  height: 16px;
  font-size: 0.62rem;
  border: 2px solid var(--tt-color-surface, #fff);
}

/* Hesabım açılır menüsü (Faz 2) — kategori mega menüsüyle (`.tt-mega-
   menu-item:hover .tt-mega-menu-panel`) AYNI hover/focus-within deseni;
   önceden "Hesabım"/"Siparişlerim"/"Çıkış Yap" ayrı ayrı linklerdi. */
.tt-account-menu {
  position: relative;
  display: inline-block;
}

.tt-account-menu__panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  min-width: 180px;
  padding: var(--tt-space-2, 8px);
  background: var(--tt-color-bg, #fff);
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  box-shadow: var(--tt-shadow-hover, 0 8px 20px rgba(0, 0, 0, 0.1));
  flex-direction: column;
  gap: 2px;
}

.tt-account-menu:hover .tt-account-menu__panel,
.tt-account-menu:focus-within .tt-account-menu__panel {
  display: flex;
}

.tt-account-menu__panel a {
  margin-left: 0;
  padding: 6px 10px;
  border-radius: var(--tt-radius, 6px);
  font-weight: 400;
  font-size: 0.9rem;
  white-space: nowrap;
}

.tt-account-menu__panel a:hover {
  background: var(--tt-color-surface, #f5f6f7);
}

/* Mini-sepet önizlemesi (profesyonel site cilası Faz 3, 2026-08-21) —
   `.tt-account-menu`/`.tt-mega-menu-item` ile AYNI hover/focus-within
   açılır panel deseni. */
.tt-mini-cart {
  position: relative;
  display: inline-block;
}

.tt-mini-cart__panel {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  padding: var(--tt-space-3, 16px);
  background: var(--tt-color-bg, #fff);
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  box-shadow: var(--tt-shadow-hover, 0 8px 20px rgba(0, 0, 0, 0.1));
}

.tt-mini-cart:hover .tt-mini-cart__panel,
.tt-mini-cart:focus-within .tt-mini-cart__panel {
  display: block;
}

.tt-mini-cart__empty {
  margin: 0;
  color: var(--tt-color-muted, #6b7580);
  font-size: 0.9rem;
  text-align: center;
}

.tt-mini-cart__list {
  list-style: none;
  margin: 0 0 var(--tt-space-3, 16px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-2, 8px);
}

.tt-mini-cart__item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tt-mini-cart__item img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--tt-radius, 6px);
  flex-shrink: 0;
}

.tt-mini-cart__item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tt-mini-cart__item-name {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tt-mini-cart__item-meta {
  font-size: 0.8rem;
  color: var(--tt-color-muted, #6b7580);
}

.tt-mini-cart__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--tt-space-2, 8px);
  margin-bottom: var(--tt-space-3, 16px);
  border-top: 1px solid var(--tt-color-border, #dde1e5);
  font-size: 0.9rem;
}

.tt-mini-cart__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tt-mini-cart__actions .tt-button {
  text-align: center;
}

.tt-cart__table,
.tt-cart__totals {
  width: 100%;
  border-collapse: collapse;
  margin: var(--tt-space-3, 16px) 0;
}

.tt-cart__table th,
.tt-cart__table td,
.tt-cart__totals th,
.tt-cart__totals td {
  text-align: left;
  padding: var(--tt-space-2, 8px);
  border-bottom: 1px solid var(--tt-color-border, #dde1e5);
}

.tt-cart__table thead th {
  color: var(--tt-color-muted, #6b7580);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.tt-cart__table tbody tr {
  transition: background-color var(--tt-transition, 150ms ease);
}

.tt-cart__table tbody tr:hover {
  background: var(--tt-color-surface, #f5f6f7);
}

.tt-cart__totals tr:last-child th,
.tt-cart__totals tr:last-child td {
  border-bottom: none;
  font-size: 1.1rem;
}

.tt-inline-form {
  display: inline-flex;
  gap: var(--tt-space-1, 4px);
  align-items: center;
}

/* Sepet tablosundaki dar satır içi formlar — tam boyutlu `.tt-button`
   (Sepete Ekle/Ödemeye Geç gibi belirgin CTA'lar için tasarlandı) burada
   orantısız büyük dururdu (profesyonel site cilası Faz 4, 2026-08-21). */
.tt-inline-form .tt-button {
  padding: 4px 12px;
  font-size: 0.85rem;
}

/* Sepet satırı ürün görseli (Faz 4) — `CartController::displayItems()`
   zaten `$product` nesnesini çekiyordu, yalnızca satıra eklemek
   gerekiyordu (yeni sorgu YOK). Görseli olmayan (nadir) satırlarda hücre
   boş kalır, tabloyu bozmaz. */
.tt-cart__thumb {
  width: 56px;
}

.tt-cart__thumb img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--tt-radius, 6px);
  display: block;
}

/* Faz M — favori butonu (ürün detay sayfası). */
.tt-wishlist-toggle {
  background: transparent;
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  padding: var(--tt-space-2, 8px) var(--tt-space-3, 16px);
  color: var(--tt-color-text, #1f2429);
  cursor: pointer;
}

.tt-wishlist-toggle:hover {
  border-color: var(--tt-color-primary, #2b3440);
}

.tt-wishlist-toggle--active {
  background: var(--tt-color-primary, #2b3440);
  color: var(--tt-color-primary-contrast, #fff);
  border-color: var(--tt-color-primary, #2b3440);
}

.tt-button {
  display: inline-block;
  padding: var(--tt-space-2, 8px) var(--tt-space-4, 24px);
  background: var(--tt-color-primary, #2b3440);
  color: var(--tt-color-primary-contrast, #fff);
  border: none;
  border-radius: var(--tt-radius, 6px);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--tt-transition, 150ms ease), transform var(--tt-transition, 150ms ease);
}

.tt-button:hover {
  opacity: 1;
  filter: brightness(0.9);
}

.tt-button:active {
  transform: translateY(1px);
}

.tt-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.4);
  opacity: 0.7;
}

/* İkincil/yıkıcı-olmayan-ama-öne-çıkmaması-gereken eylemler (sepetten
   "Kaldır" gibi) — profesyonel site cilası Faz 4 (2026-08-21). Ana
   `.tt-button` rengiyle görsel rekabet etmesin diye anahat stilinde. */
.tt-button--muted {
  background: transparent;
  color: var(--tt-color-muted, #6b7580);
  border: 1px solid var(--tt-color-border, #dde1e5);
}

.tt-button--muted:hover {
  filter: none;
  border-color: var(--tt-color-text, #1f2429);
  color: var(--tt-color-text, #1f2429);
}

/* İstek sürerken buton geri bildirimi (2026-08-19, kullanıcı geri
   bildirimi: "butona tıkladığımda ... daha profesyonel") — metin
   `color: transparent` ile gizlenir (buton genişliği SABİT kalır, metin
   "Ekleniyor..." gibi bir şeye değişip genişlik zıplatmaz), üzerine
   `.tt-load-more__spinner` ile AYNI dönme animasyonunu kullanan bir
   daire biner. `:disabled` zaten `filter:grayscale` uyguladığından
   `.is-loading` onu ATLAR (aksi halde gri buton üzerinde beyaz spinner
   soluk görünürdü). */
.tt-button.is-loading {
  position: relative;
  color: transparent;
  filter: none;
  opacity: 1;
}

.tt-button.is-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tt-load-more-spin 0.7s linear infinite;
}

/* Faz D — "Hesabım" paneli. */
.tt-account__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-2, 8px);
  margin: var(--tt-space-3, 16px) 0;
}

.tt-account__nav a {
  padding: var(--tt-space-2, 8px) var(--tt-space-3, 16px);
  border-radius: var(--tt-radius, 6px);
  background: var(--tt-color-surface, #f5f6f7);
  text-decoration: none;
  color: var(--tt-color-text, #1f2429);
  font-weight: 500;
  transition: background-color var(--tt-transition, 150ms ease);
}

.tt-account__nav a:hover {
  opacity: 1;
  background: var(--tt-color-border, #dde1e5);
}

.tt-address-card {
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius-lg, 12px);
  padding: var(--tt-space-3, 16px);
  margin-bottom: var(--tt-space-3, 16px);
  transition: box-shadow var(--tt-transition, 150ms ease);
}

.tt-address-card:hover {
  box-shadow: var(--tt-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
}

/* --- Ücretsiz kargo eşiği barı (Faz AB) --------------------------------- */

.tt-free-shipping-bar {
  margin-bottom: var(--tt-space-4, 24px);
  padding: var(--tt-space-3, 16px);
  background: var(--tt-color-surface, #f5f6f7);
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
}

.tt-free-shipping-bar__message {
  margin: 0 0 var(--tt-space-2, 8px);
  font-size: 0.95rem;
}

.tt-free-shipping-bar__track {
  height: 8px;
  background: var(--tt-color-border, #dde1e5);
  border-radius: 999px;
  overflow: hidden;
}

.tt-free-shipping-bar__fill {
  height: 100%;
  background: var(--tt-color-primary, #2b3440);
  border-radius: 999px;
  transition: width var(--tt-transition, 150ms ease);
}

/* --- Sepette çapraz satış (Faz AC) -------------------------------------- */

.tt-cart__cross-sell {
  margin-top: var(--tt-space-5, 32px);
}

.tt-cart__cross-sell h2 {
  font-size: 1.1rem;
  margin-bottom: var(--tt-space-3, 16px);
}

/* --- Yasal sayfa görüntüleme (Faz AI) ------------------------------------ */

.tt-legal-page__content {
  max-width: 72ch;
  line-height: 1.7;
}

/*
 * Ürün açıklaması gövdesi — gece/gündüz kontrast tutarsızlığı denetimi
 * (2026-08-21). Ürün açıklamaları büyük ölçüde eski siteden içe
 * aktarılmış ham HTML (`<font color="#000000">`, `<font color=
 * "#ff3333">` vb. satır içi renkler, LibreOffice/Writer HTML dışa
 * aktarımından) — bu renkler hep BEYAZ bir sayfa zemini varsayıyor.
 * Gece modu sitenin VARSAYILANI olduğundan (`tokens.css`), sabit siyah
 * gibi satır içi renkler o zeminde neredeyse görünmez oluyordu (ölçülen
 * kontrast oranı ~1.1:1 — WCAG AA eşiği 4.5:1). Veritabanındaki içerik
 * DEĞİŞTİRİLMEDEN (yüzlerce ürünü tek tek düzeltmek yerine), bu gövde
 * kendi sabit açık zeminini taşır — eski satır içi renkler orijinal
 * tasarlandıkları gibi, her iki site temasında da AYNI şekilde doğru
 * görünür.
 */
.tt-product-detail__description__body {
  background: #ffffff;
  color: #1a1a1a;
  padding: var(--tt-space-4, 24px);
  border-radius: var(--tt-radius-lg, 8px);
  border: 1px solid var(--tt-color-border);
}

/* --- SSS (FAQ) akordeonu (Faz AF) ---------------------------------------- */

.tt-faq__item {
  padding: var(--tt-space-3, 16px);
  margin-bottom: var(--tt-space-2, 8px);
  background: var(--tt-color-surface, #f5f6f7);
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
}

.tt-faq__question {
  cursor: pointer;
  font-weight: 600;
}

.tt-faq__answer {
  margin: var(--tt-space-2, 8px) 0 0;
}

/* --- "Biliyor muydunuz?" güven istatistikleri ---------------------------- */

.tt-trust-facts {
  margin: var(--tt-space-4, 24px) 0;
  padding: var(--tt-space-3, 16px);
  background: var(--tt-color-surface, #f5f6f7);
  border-radius: var(--tt-radius, 6px);
}

.tt-trust-facts__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tt-space-4, 24px);
  margin: 0;
  padding: 0;
}

.tt-trust-facts__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}

.tt-trust-facts__icon {
  color: var(--tt-color-primary, #2b3440);
  font-weight: 700;
}

/* --- Ana sayfa müşteri yorumları (Faz AE) -------------------------------- */

.tt-testimonials {
  margin-top: var(--tt-space-5, 32px);
}

.tt-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--tt-space-3, 16px);
}

.tt-testimonial-card {
  margin: 0;
  padding: var(--tt-space-3, 16px);
  background: var(--tt-color-surface, #f5f6f7);
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
}

.tt-testimonial-card__stars {
  margin: 0 0 var(--tt-space-2, 8px);
  color: var(--tt-color-primary, #2b3440);
}

.tt-testimonial-card__body {
  margin: 0 0 var(--tt-space-2, 8px);
  font-style: italic;
}

/* --- Ürün sayfası miktar stepper'ı --------------------------------------- */

.tt-qty-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--tt-color-border, #dde1e5);
  border-radius: var(--tt-radius, 6px);
  overflow: hidden;
  vertical-align: middle;
}

.tt-qty-stepper__btn {
  border: none;
  background: var(--tt-color-surface, #f5f6f7);
  color: var(--tt-color-text, #1f2429);
  width: 32px;
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
}

.tt-qty-stepper__btn:hover {
  background: var(--tt-color-border, #dde1e5);
}

.tt-qty-stepper__input {
  border: none;
  border-left: 1px solid var(--tt-color-border, #dde1e5);
  border-right: 1px solid var(--tt-color-border, #dde1e5);
  width: 44px;
  text-align: center;
  font-size: 0.95rem;
}

/* --- Sepete ekle bildirimi (toast) — kullanıcı geri bildirimi 2026-07-23 - */
/* "Sepete Ekle" artık sepete yönlendirmiyor, sayfada kalıp bir bildirim
   gösteriyor (`.tt-ajax-cart-form`, `layout.php`). */

.tt-toast-container {
  position: fixed;
  bottom: var(--tt-space-4, 24px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--tt-space-2, 8px);
  pointer-events: none;
}

.tt-toast {
  padding: var(--tt-space-2, 8px) var(--tt-space-4, 24px);
  /* `.tt-cookie-consent` ile AYNI gerekçe (bkz. o kuralın yorumu) —
     `var(--tt-color-text, ...)` KULLANILMAZ, gece modunda o değişken
     AÇIK renk taşıdığından beyaz metinle çakışıp "beyaz üzerine beyaz"
     hatasına yol açardı. */
  background: #1f2429;
  color: #fff;
  border-radius: var(--tt-radius, 6px);
  box-shadow: var(--tt-shadow-hover, 0 8px 20px rgba(0, 0, 0, 0.15));
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--tt-transition, 150ms ease), transform var(--tt-transition, 150ms ease);
}

.tt-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.tt-toast--error {
  background: #b3261e;
}

/* --- WhatsApp yüzen butonu (Faz AD) -------------------------------------- */

.tt-whatsapp-float {
  position: fixed;
  right: var(--tt-space-4, 24px);
  bottom: var(--tt-space-4, 24px);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #25d366;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: var(--tt-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
}

.tt-whatsapp-float:hover {
  background: #1ebe57;
}

/* --- "Yukarı çık" butonu (profesyonel site cilası Faz 7, 2026-08-21) --- */

.tt-back-to-top {
  position: fixed;
  left: var(--tt-space-4, 24px);
  bottom: var(--tt-space-4, 24px);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* `.tt-cookie-consent`/`.tt-toast` ile AYNI gerekçe — `var(--tt-color-
     text, ...)` gece modunda AÇIK renk taşıyıp beyaz simgeyle
     çakışırdı, sabit koyu renk kullanılır. */
  background: #1f2429;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--tt-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}

.tt-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tt-back-to-top:hover {
  filter: brightness(1.2);
}

@media (prefers-reduced-motion: reduce) {
  .tt-back-to-top {
    transition: none;
  }
}

/* --- Çıkış popup'ı (exit-intent, Faz AA) -------------------------------- */

.tt-exit-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.tt-exit-popup--visible {
  display: block;
}

.tt-exit-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.tt-exit-popup__panel {
  position: relative;
  max-width: 420px;
  margin: 12vh auto 0;
  background: var(--tt-color-bg, #fff);
  border-radius: var(--tt-radius-lg, 12px);
  padding: var(--tt-space-5, 40px) var(--tt-space-4, 24px);
  text-align: center;
  box-shadow: var(--tt-shadow-hover, 0 8px 20px rgba(0, 0, 0, 0.1));
}

.tt-exit-popup__close {
  position: absolute;
  top: var(--tt-space-2, 8px);
  right: var(--tt-space-3, 16px);
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--tt-color-muted, #6b7580);
}

/*
 * Çerez onay çubuğu (2026-07-26) — KVKK/çerez politikası uyumu. Kasıtlı
 * olarak SABİT koyu bir şerit (gece/gündüz modundan bağımsız, çoğu
 * sitede kabul gören desen) — `var(--tt-color-text, ...)` KULLANILMAZ,
 * çünkü o değişken gece modunda AÇIK renk taşır (metin okunsun diye) ve
 * bu şeridin arka planı olarak kullanılınca gece modunda "beyaz üzerine
 * beyaz" hatasına yol açıyordu (gerçek bug, kontrast denetimi sırasında
 * bulundu — 2026-08-21).
 */
.tt-cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--tt-space-3, 16px);
  padding: var(--tt-space-3, 16px) var(--tt-space-4, 24px);
  background: #1a1a1a;
  color: #f4f4f4;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}

.tt-cookie-consent[hidden] {
  display: none;
}

.tt-cookie-consent p {
  margin: 0;
  font-size: 0.9rem;
  flex: 1 1 320px;
}

.tt-cookie-consent a {
  color: inherit;
  text-decoration: underline;
}

.tt-cookie-consent__actions {
  display: flex;
  gap: var(--tt-space-2, 8px);
  flex-shrink: 0;
}

.tt-cookie-consent__actions button {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: inherit;
  padding: 8px 16px;
  border-radius: var(--tt-radius, 6px);
  cursor: pointer;
  font-size: 0.85rem;
}

#tt-cookie-consent-accept {
  background: var(--tt-color-primary, #1a73e8);
  border-color: var(--tt-color-primary, #1a73e8);
  color: var(--tt-color-primary-contrast, #fff);
  font-weight: 600;
}

.tt-exit-popup__code {
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 2px dashed var(--tt-color-primary, #2b3440);
  border-radius: var(--tt-radius, 6px);
  padding: var(--tt-space-2, 8px) var(--tt-space-3, 16px);
  margin: var(--tt-space-2, 8px) 0 var(--tt-space-3, 16px);
}

/* --- Duyarlı (responsive) ayarlar --------------------------------------- */

@media (max-width: 600px) {
  .tt-container {
    padding: 0 var(--tt-space-2, 8px);
  }

  /* Kullanıcı geri bildirimi (2026-08-15): önceki `justify-content:
     center; text-align: center;` marka/iletişim/nav'ı ÜÇ AYRI satıra
     yığıyordu (flex-wrap her öğeyi kendi satırına düşürüyor). Tek satır
     ızgara: logo sol, iletişim ortada, nav (gece/gündüz anahtarı) sağda —
     `Sepetim`/`Giriş Yap`/`Hesabım`/`Çıkış Yap` metin linkleri mobilde
     gizlenir (yerini alt sekme çubuğu alır, bkz. oto temasının kendi
     `<style>` bloğu). */
  .tt-header__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-content: unset;
    text-align: unset;
    gap: var(--tt-space-2, 8px);
    /* Kullanıcı geri bildirimi (2026-08-15): "sağa sola sıfır yaslanmış" —
       `.tt-container`'ın mobil `8px`'i logo/anahtar için yetersiz
       hissettiriyordu; header satırına AYRICA yan boşluk eklenir. */
    padding: var(--tt-space-2, 8px) var(--tt-space-3, 16px);
  }

  .tt-header__contact {
    grid-column: 2;
    justify-content: center;
    text-align: center;
    overflow: hidden;
  }

  .tt-header__nav {
    grid-column: 3;
    gap: 0;
  }

  .tt-header__nav > a,
  .tt-header__nav > .tt-account-menu,
  .tt-header__nav > .tt-mini-cart {
    display: none;
  }

  /* Kategori şeridi (Faz Z) — önceden `flex-wrap: wrap` her satıra
     sığmayan simgeleri ikinci bir satıra düşürüyordu (kullanıcı geri
     bildirimi: "1 satırda yer almalı, carousel yapıda olmalı").
     Masaüstünde `overflow-x: auto` KASITLI OLARAK kullanılmıyor (bkz.
     `.tt-category-bar__row` üstündeki yorum — tek eksende overflow
     ayarlamak diğer ekseni de `auto` yapıp mega-menü panelini kırpar);
     mobilde bu çakışma yok çünkü mega-menü panelini burada AYRICA
     kapatıyoruz (dokunmatik ekranda `:hover` zaten pratik değil, alt
     kategoriye kategori sayfasından ulaşılır). */
  .tt-mega-menu-panel {
    display: none !important;
  }

  /* Kullanıcı geri bildirimi (2026-08-16): otomatik kayma + ok
     butonları eklenince "el ile sürükleyip ilgili kategoriye
     seçemiyorum, kendi kendine hareket ediyor" — bir NAVİGASYON
     menüsünde otomatik hareket, kullanıcı bir öğeye TAM dokunacakken
     şeridi kaydırıp yanlış linke tıklatabiliyordu (klasik "hareketli
     hedef" sorunu). Kategori şeridi bu yüzden BİLİNÇLİ OLARAK yalnızca
     elle kaydırılabilir bırakıldı — ok/otomatik kayma yalnızca tıklanabilir
     link İÇERMEYEN şeritlerde (ör. müşteri yorumları) kalıyor, bkz.
     `[data-carousel]` işaretlemesi yalnızca oralarda var. */
  .tt-category-bar__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    /* Kullanıcı geri bildirimi (2026-08-16): "menüyü sürükleyemiyorum"
       — `touch-action` belirtilmeden mobil tarayıcı, dikey sayfa
       kaydırmasıyla YARIŞAN bu dar/kısa şeridin yatay dokunuşunu sık
       sık sayfanın kendi dikey kaydırmasına yorup jesti şeride hiç
       iletmiyordu (sticky header içindeki dar yatay şeritlerde bilinen
       bir tarayıcı sezgisi sorunu). `pan-x`, tarayıcıya bu elemanda
       YALNIZCA yatay dokunuşları kendisinin işleyeceğini açıkça söyler. */
    touch-action: pan-x;
  }

  .tt-category-bar__row::-webkit-scrollbar {
    display: none;
  }

  .tt-category-bar__item {
    flex: 0 0 auto;
  }

  .tt-cart__table,
  .tt-cart__totals {
    font-size: 0.9rem;
  }
}