/* ==========================================================================
   TEMA PAZARI — /temalar
   --------------------------------------------------------------------------
   ÖLÇÜLER NEREDEN GELİYOR
   Düzen, themes.halothemes.com/marketplace sayfasından PİKSEL PİKSEL ölçülerek
   yeniden kuruldu: 4 kolon + 15px oluk, kart görseli 1 : 1,319 oranında,
   gövde dolgusu 25px 30px 20px, yol satırı 14px/500, tema adı 20px/26px/700,
   genişlet ikonu 26px, sekme çubuğu 10px yarıçaplı hap, geçişler 350ms
   ease-in-out, hover kaydırması 0,0055 sn/piksel ve 2,5 sn geri dönüş.

   KOD VE VARLIK BİZİM: referansın stylesheet/script dosyalarından tek satır
   kopyalanmadı, görselleri hiç kullanılmadı. Ölçü kopyalanmaz, ÖLÇÜLÜR.

   BİLEREK AYRIŞTIĞIMIZ YERLER (kopya olmadığı görünsün diye):
     • Vurgu rengi turuncu (#ff4719) DEĞİL, mağazanın kendi altını (#d9a22b)
       ve lacivergi (#0b2545). Sayfanın karakterini bu belirliyor.
     • Kartta FİYAT var — referansta yok; biz tema satıyoruz, o sayfa
       tek bir temanın demo listesini gösteriyor.
     • Kart görselinin alt kenarında ince bir "kaydırma ipucu" şeridi var.
     • Klavyeyle gezenler için kaydırma :focus-within ile de çalışır ve
       prefers-reduced-motion açıksa hiç kaymaz (referansta ikisi de yok).

   ÇEKİRDEK SINIFLARA DOKUNULMAZ: bu dosya yalnız `tp-` önekli sınıfları
   çizer. `.container`, `.btn`, `.breadcrumb` shop.css'ten gelir; burada
   ezilseler bütün vitrin sayfaları etkilenirdi.
   ========================================================================== */

.tp {
  /* Referans: --font-size 16px, --letter-spacing 0, geçiş 350ms ease-in-out. */
  --tp-gecis: 350ms ease-in-out;

  --tp-vurgu: #d9a22b;          /* referansta #ff4719 */
  --tp-vurgu-koyu: #8a6314;
  --tp-baslik-rengi: #0b2545;   /* referansta #000 */
  --tp-yol-rengi: #64748b;      /* referansta #666 */
  --tp-ikon: #c6d3e2;           /* referansta #cccccc */
  --tp-zemin: #fafafa;
  --tp-kart-zemin: #fff;
  --tp-cizgi: #e6eef6;

  --tp-oluk: 15px;              /* referans: .items { padding: 0 15px } */
  --tp-oran: 131.9%;            /* referans: .image-wrapper::after padding-bottom */
  --tp-ikon-olcu: 26px;         /* referans: --expand-icon-size */

  /*
   * Yazı tipi Montserrat — referans sayfanın gövde ailesiyle AYNI, çünkü
   * "pixel perfect" istendi ve harf genişlikleri satır kırılmalarını birebir
   * belirliyor. Yerel kopya: public/fonts/montserrat.css (SIL OFL 1.1).
   * Yedek listede sistem sans'ı var; dosya gelmezse düzen kaymaz, yalnız
   * harfler değişir.
   */
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--tp-zemin);
  padding-block: 56px 72px;
}

/*
 * YAZI TİPİ TEK TEK VERİLİR — ÖLÇÜLMÜŞ ARIZA.
 * Bu sayfa mağazanın CANLI TEMASININ düzeni içinde açılıyor ve tema CSS'i
 * `h1,h2,h3 { font-family: … }` gibi ETİKET seçicileriyle kendi başlık
 * ailesini dayatıyor. `.tp { font-family: … }` yalnız DEVRALMAYI kuruyordu;
 * etiket seçicisi devralınan değeri her zaman yener, bu yüzden kart
 * başlıkları Montserrat değil temanın ailesiyle (ölçüldü: Lexend)
 * çiziliyordu — harf genişlikleri değişince satır kırılmaları da kayıyordu.
 * Aşağıdaki liste, bu sayfada metin taşıyan bütün etiketleri kapsar.
 */
.tp h1,
.tp h2,
.tp p,
.tp a,
.tp span,
.tp label,
.tp select,
.tp button {
  font-family: inherit;
}

/* Referans container basamakları: 1200 / 1400 / 1600. */
.tp__ic {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
}

@media (min-width: 1400px) { .tp__ic { max-width: 1400px; } }
@media (min-width: 1600px) { .tp__ic { max-width: 1600px; } }

/*
 * GÖMÜLÜ KULLANIM: tema ayrıntı sayfasındaki "Benzer temalar" bölümü aynı
 * kartı kullanıyor ama kendi başlığı ve zemini var. `.tp` orada yalnızca
 * belirteç ve yazı tipi taşıyıcısıdır — bölüm dolgusu ve zemin bırakılırsa
 * sayfanın içinde ikinci bir gri kutu belirir.
 */
.tp--gomulu {
  background: none;
  padding-block: 0;
}

/* ---------------------------------------------------------- Sayfa başlığı */
/* Referans: .themevale_heading — ortalı, max 853px, alt boşluk 31px;
   başlık 48px/700, açıklama 16px/22px, aralarında 7px. */
.tp-tepe {
  display: block;
  text-align: center;
  max-width: 853px;
  margin: 0 auto 31px;
}

.tp-tepe__baslik {
  display: inline-block;
  font-size: 48px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0;
  margin: 0;
  color: var(--tp-baslik-rengi);
}

/* Referans başlığın altındaki 5px'lik vurgu şeridi; rengi bizim altınımız. */
.tp-tepe__vurgu {
  display: inline;
  position: relative;
}

.tp-tepe__vurgu::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -7px;
  height: 5px;
  width: calc(100% + 14px);
  z-index: 1;
  background-color: var(--tp-vurgu);
  transform: translateY(-50%);
}

.tp-tepe__aciklama {
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: #43536b;
  margin: 7px 0 0;
}

/* -------------------------------------------------------------- Sekmeler */
/*
 * Referansta sekmeler JavaScript ile içerik değiştiriyor. BİZDE BAĞLANTIDIR:
 * her kategori kendi adresini taşır (?kategori=moda). Görünüş aynı, ama
 * JavaScript kapalıyken de çalışır, sayfa paylaşılabilir ve arama motoru
 * kategori sayfalarını ayrı ayrı indeksleyebilir.
 */
.tp-sekmeler {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: max-content;
  margin: 35px auto 42px;
  padding: 5px;
  background-color: #f0f0f0;
  border-radius: 10px;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  scrollbar-width: thin;
  max-width: min(100%, max-content);
  /*
   * SAĞ KENARDA SOLMA: on kategori 1440px'e sığmıyor ve çubuk yatay kayıyor.
   * Solma olmadan son etiket kelimenin ortasından kesiliyordu — kayabildiği
   * anlaşılmıyor, arıza gibi duruyordu.
   */
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}

.tp-sekmeler__oge {
  padding: 0 5px;
  scroll-snap-align: start;
  flex: 0 0 auto;
}

.tp-sekmeler__oge:first-child { padding-left: 0; }
.tp-sekmeler__oge:last-child { padding-right: 0; }

.tp-sekme {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.025em;
  padding: 5px 15px;
  color: var(--tp-baslik-rengi);
  border: none;
  border-radius: 10px;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--tp-gecis), background-color var(--tp-gecis);
}

.tp-sekme:hover { color: var(--tp-vurgu-koyu); }

.tp-sekme--acik {
  color: var(--tp-vurgu-koyu);
  background-color: #fff;
}

.tp-sekme__adet {
  font-weight: 500;
  opacity: 0.7;
  margin-left: 4px;
}

/* ------------------------------------------------------------ Sıralama */
.tp-sirala {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: -22px 0 18px;
  font-size: 14px;
  color: var(--tp-yol-rengi);
}

.tp-sirala select {
  font: inherit;
  padding: 6px 10px;
  border: 1.5px solid var(--control-border, #838b96);
  border-radius: 8px;
  background: #fff;
  color: var(--tp-baslik-rengi);
}

.tp-sayac {
  font-size: 14px;
  color: var(--tp-yol-rengi);
  margin: 0 0 14px;
}

/* ---------------------------------------------------------------- Izgara */
/*
 * Referans: `display:block; font-size:0; margin:0 -15px` + `inline-block`
 * kolonlar. Aynı ÖLÇÜ, modern araçla: flex + negatif oluk. Piksel sonucu
 * birebir aynı (kolon genişliği %25, kolon içi dolgu 15px), ama font-size:0
 * hilesine ve `vertical-align` düzeltmelerine gerek kalmıyor.
 */
.tp-liste {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--tp-oluk) * -1);
}

/*
 * `display: flex` KARTIN EŞİT YÜKSEKLİĞİ İÇİN: .tp-demo { height: 100% }
 * blok bir ebeveynde çözümsüz kalır (yüzde yükseklik, `auto` yüksekliğe göre
 * hesaplanamaz) ve tanıtım metni bir satır uzun olan kart komşusundan uzun
 * çıkardı — ızgara satırı tırtıklı görünüyordu.
 */
.tp-liste__oge {
  display: flex;
  width: 25%;
  padding-inline: var(--tp-oluk);
  margin-bottom: 5px;   /* referans: .items { margin: 0 0 5px 0 } */
  min-width: 0;
}

/* Referans kırılımları: 1400 → 3 kolon, 1024 → 3, 767 → 2, 480 → 1. */
@media (max-width: 1400px) { .tp-liste__oge { width: 33.3333333%; } }

@media (max-width: 1024px) {
  .tp-liste { margin-inline: -8px; }
  .tp-liste__oge { width: 33.3333333%; padding-inline: 8px; padding-bottom: 8px; }
}

@media (max-width: 767px) { .tp-liste__oge { width: 50%; } }
@media (max-width: 480px) { .tp-liste__oge { width: 100%; } }

/* ------------------------------------------------------------------ Kart */
.tp-demo {
  background: var(--tp-kart-zemin);
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 10px rgba(11, 37, 69, 0.08);
  transition: box-shadow var(--tp-gecis), transform var(--tp-gecis);
}

.tp-demo:hover,
.tp-demo:focus-within {
  box-shadow: 0 10px 25px rgba(11, 37, 69, 0.18);
}

/* --------------------------------------------------- Kart görsel penceresi */
/*
 * PENCERE SABİT ORANLI, GÖRSEL UZUN. Kaydırma efektinin tamamı bu ikisinin
 * farkından doğar: görsel penceredan taşmıyorsa kayacak yer de yoktur.
 * Referans padding-bottom:131.9% hilesini kullanıyor; aspect-ratio aynı
 * pikseli üretir ve ::after sahte öğesini boşa harcamaz.
 */
.tp-gorsel {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1.319;
  background: #eef2f7;
}

.tp-gorsel__bag {
  display: block;
  position: absolute;
  inset: 0;
}

.tp-gorsel img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  display: block;
  /*
   * `--tp-kayma` ve `--tp-sure` DEĞERLERİNİ JS YAZAR (js/tema-pazari.js):
   * taşma miktarı ancak görsel yüklendikten sonra bilinebilir. Varsayılanlar
   * burada duruyor ki betik hiç çalışmasa bile görsel doğru yerde dursun.
   */
  --tp-kayma: 0;
  --tp-sure: 2.5s;
  transform: translateY(calc(var(--tp-kayma) * 1px));
  transition-property: transform;
  transition-duration: var(--tp-sure);
  transition-timing-function: linear;
}

/* Görselsiz tema: kayacak bir şey yok, taslak zemin kalsın. */
.tp-gorsel--bos {
  display: grid;
  place-items: center;
  color: var(--tp-yol-rengi);
  font-size: 14px;
}

/* Referans: karartma + ortada 90°/180° dönen iki çubuk (artı işareti). */
.tp-ortu {
  position: absolute;
  inset: 0;
  background-color: rgba(6, 23, 41, 0.4);
  z-index: 2;
  opacity: 0;
  transition: opacity var(--tp-gecis);
  pointer-events: none;
}

.tp-ortu::before,
.tp-ortu::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 4px;
  width: 50px;
  background-color: #fff;
  border-radius: 5px;
  transform: translate(-50%, -50%);
  transition: transform 250ms ease-in-out;
}

.tp-gorsel:hover .tp-ortu,
.tp-gorsel:focus-within .tp-ortu { opacity: 1; }

.tp-gorsel:hover .tp-ortu::before,
.tp-gorsel:focus-within .tp-ortu::before { transform: translate(-50%, -50%) rotate(90deg); }

.tp-gorsel:hover .tp-ortu::after,
.tp-gorsel:focus-within .tp-ortu::after { transform: translate(-50%, -50%) rotate(180deg); }

/* BİZE ÖZGÜ: alt kenarda kaydırma ipucu — görselin devam ettiğini söyler. */
.tp-ipucu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 22px 10px 7px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(to top, rgba(6, 23, 41, 0.45), transparent);
  transition: opacity var(--tp-gecis);
  pointer-events: none;
}

.tp-gorsel:hover .tp-ipucu,
.tp-gorsel:focus-within .tp-ipucu { opacity: 0; }

/* Referans: etiket top/right 5px, 14px, 4px 12px dolgu, min 58px, 5px yarıçap. */
.tp-etiket {
  position: absolute;
  z-index: 10;
  top: 5px;
  right: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  padding: 4px 12px;
  min-width: 58px;
  text-align: center;
  border-radius: 5px;
}

.tp-etiket--yeni { background-color: #0067f0; color: #fff; }
.tp-etiket--one { background-color: var(--tp-vurgu); color: #0b2545; }
.tp-etiket--indirim { background-color: #b3261e; color: #fff; top: 40px; }

/* ------------------------------------------------------------- Kart gövde */
/* Referans: .content-wrapper { padding: 25px 30px 20px; flex; space-between } */
.tp-govde {
  padding: 25px 30px 20px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex: 1 1 auto;
}

.tp-govde__sol {
  position: relative;
  width: 100%;
  min-width: 0;
  /* Fiyat kartın DİBİNE yapışsın: satırdaki kartların fiyatları aynı hizada
     olmadığında ızgara okunmaz oluyor. */
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Referans: .breadcrumb 14px/500, #666, gap 10px, tek satır. */
.tp-yol {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  font-size: 14px;
  font-weight: 500;
  color: var(--tp-yol-rengi);
  text-decoration: none;
  transition: color var(--tp-gecis);
}

.tp-yol:hover { color: var(--tp-vurgu-koyu); }

.tp-yol__kategori {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tp-yol__son { flex-shrink: 0; }

.tp-yol svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Referans: .title 20px/26px/700, margin 15px 0 7px, hover'da alt çizgi büyür. */
.tp-ad {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--tp-baslik-rengi);
  margin: 15px 0 7px;
}

.tp-ad a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  position: relative;
  max-width: 100%;
}

.tp-ad__metin {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tp-ad__metin::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  opacity: 0;
  border-bottom: 1px solid var(--tp-baslik-rengi);
  transition: all 280ms ease-in-out;
  backface-visibility: hidden;
}

.tp-ad a:hover .tp-ad__metin::after,
.tp-ad a:focus-visible .tp-ad__metin::after {
  opacity: 1;
  width: 100%;
  height: 1px;
}

/* BİZE ÖZGÜ: fiyat. Referans kartında fiyat yoktur. */
.tp-fiyat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tp-vurgu-koyu);
  white-space: nowrap;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--tp-cizgi);
  margin-top: auto;   /* kartın dibine yapış */
}

.tp-fiyat--bedava { color: #1a7f4b; }

.tp-fiyat__liste {
  font-size: 13px;
  font-weight: 500;
  color: var(--tp-yol-rengi);
  text-decoration: line-through;
}

/* BİZE ÖZGÜ: tek satırlık tanıtım. */
.tp-ozet {
  font-size: 14px;
  line-height: 20px;
  color: var(--tp-yol-rengi);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Referans: .expand-icon 26px, #ccc → hover vurgu rengi. */
.tp-genislet {
  flex-shrink: 0;
  width: var(--tp-ikon-olcu);
  height: var(--tp-ikon-olcu);
  line-height: 0;
}

.tp-genislet svg {
  width: var(--tp-ikon-olcu);
  height: var(--tp-ikon-olcu);
  fill: var(--tp-ikon);
  transition: fill var(--tp-gecis);
}

.tp-genislet:hover svg,
.tp-genislet:focus-visible svg { fill: var(--tp-vurgu-koyu); }

/* -------------------------------------------------------------- Boş ekran */
.tp-bos {
  background: #fff;
  border: 1px solid var(--tp-cizgi);
  border-radius: 10px;
  padding: 48px 24px;
  text-align: center;
}

.tp-bos h2 { margin: 0 0 8px; font-size: 20px; color: var(--tp-baslik-rengi); }
.tp-bos p { margin: 0 0 18px; color: var(--tp-yol-rengi); }

/* ------------------------------------------------------- Küçük ekran ayarı */
@media (max-width: 767px) {
  .tp { padding-block: 36px 48px; }
  .tp-tepe__baslik { font-size: 32px; }
  .tp-sekmeler { margin: 24px auto 28px; max-width: 100%; justify-content: flex-start; }
  .tp-govde { padding: 18px 18px 16px; }
  .tp-ad { font-size: 18px; line-height: 24px; margin: 12px 0 6px; }
}

/*
 * HAREKET AZALTMA: kaydırma tamamen SÜS'tür, bilgi taşımaz — kullanıcı
 * hareketi azaltmayı seçtiyse görsel hiç kaymamalı. Betik de bu tercihi
 * ayrıca okuyor; ikisi birlikte, biri devre dışı kalsa bile korur.
 */
/*
 * DOKUNMATİKTE İPUCU YOK: "Üzerine gelin" cümlesi faresi olmayan cihazda
 * yapılamayacak bir şey söylüyor. Betik de aynı sorguyla hiç bağlanmıyor
 * (js/pazar-kaydirma.js), yani orada kart zaten durağan.
 */
@media (hover: none) {
  .tp-ipucu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-gorsel img { transition: none; transform: none; }
  .tp-ortu, .tp-ortu::before, .tp-ortu::after, .tp-demo { transition: none; }
}