/* =============================================================================
   TF TEMA BUTONU — TEK BİLEŞEN, İKİ GÖRÜNÜM  (KOMUT G3)

   Üretici: assets/js/tf-tema-butonu.js
   İki görünüm AYNI DÜĞÜM ŞEKLİNDEN çıkar; fark yalnız burada:
     .tfy-tb--buyuk  buton ızgarası hücresi (kapak + ad + "N çerçeve")
     .tfy-tb--serit  tek satırlık yatay şeritteki hap (küçük kapak + ad)

   /tasarla'YA BAĞLI DEĞİL: seçiciler yalnız bileşenin kendi sınıflarını
   kullanır, sayfa kabuğuna (panel, çekmece, sheet) hiç dayanmaz -- KOMUT G1'de
   anasayfa aynı dosyayı yükleyip aynı görünümü alacak.
   ============================================================================= */

/* ---- KAP: iki hâl ------------------------------------------------------- */
/* TAM GENİŞLİK KENDİ İLAN EDİLİR. Kap bir esnek (`flex`) kabın çocuğu
   olabiliyor ve orada içeriğine büzülüyordu -- ölçüldü: 390 px ekranda kap
   226 px kalmış, ızgara iki sütuna sıkışmıştı. `flex-basis: 100%` sayfaya
   BAĞLANMAK değil, bileşenin kendi genişlik sözleşmesini söylemesidir. */
.tfy-tema-kap { display: block; width: 100%; flex: 1 1 100%; min-width: 0; }

/* A) SEÇİM YOK — BUTON IZGARASI. ÜÇ SÜTUN, İKİ YÜZEYDE DE.
   ÖNCESİ `auto-fill, minmax(104px, 1fr)` idi ve masaüstünde HİÇ uygulanmadı:
   çevredeki kurallar kabı `display:flex !important` yapıyordu, sütun tanımı
   düşüyor ve butonun genişliğini İÇERİĞİ belirliyordu. Kapak görseli inince
   buton 226x354'e şişip satır başına BİR butona düşüyordu (ölçüldü: kap
   2872 px, 8 farklı satır).
   Sütun sayısı artık SABİT: "masaüstü 3, mobil 3" (Kerem, G3-D). `minmax(0,1fr)`
   şart -- `1fr`in örtük `min-width:auto`u içeriğin taşmasına izin verir ve
   sütunlar yine içeriğe göre büyür. */
.tfy-tema-kap--izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 12px;
}

/* B) SEÇİM VAR — TEK SATIRLIK YATAY ŞERİT.
   DİKEY TAŞMA YOK (`overflow-y: hidden`): şerit tek satırdır, sarmalarsa
   altındaki çerçeve ızgarası aşağı itilir ve panel sıçrar. */
.tfy-tema-kap--serit {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: 0 0 10px;
  /* Kenarda içeriğin DEVAM ETTİĞİNİ gösteren yumuşama. Üste bindirilen bir
     gradyan katmanı DEĞİL `mask-image`: katman olsaydı şeridin üstünde durur
     ve hapların dokunma hedefini keserdi. */
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%);
}
.tfy-tema-kap--serit::-webkit-scrollbar { display: none; }

/* ---- BUTONUN KENDİSİ --------------------------------------------------- */
.tfy-tb {
  /* GENİŞLİĞİ IZGARA SÜTUNU BELİRLER, İÇERİK DEĞİL.
     `min-width: 0` olmadan ızgara öğesinin örtük en küçük genişliği içeriği
     kadar olur ve sütun taşar (ölçüldü: buton 226 px, sütun payı 131 px). */
  min-width: 0;
  width: auto;
  max-width: none;
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid var(--a-cizgi, #E7DCCB);
  background: var(--a-kart, #FFFFFF);
  color: var(--a-ink, #3B2C35);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transition: border-color 140ms ease, background-color 140ms ease;
}

/* KAPAK ÇERÇEVESİ — FOTOĞRAFSIZ, SADECE ÇERÇEVE.
   YÜKSEKLİK GÖRSELİN DOĞAL BOYUTUNDAN DEĞİL ORANINDAN GELİR: dosya 208 px
   (KÜÇÜK türev -- doğru dosya) ama ekranda SÜTUN GENİŞLİĞİ kadar çizilir.
   Öncesinde görsel doğal boyutunda basılıyor ve butonu şişiriyordu.
   `object-fit: contain`: çerçeve şeffaf WebP ve kırpılamaz; kutuyla birebir
   aynı oranda olmadığı için `cover` kenarlarını yerdi. */
.tfy-tb-kapak {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}
.tfy-tb-kapak img {
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 10;          /* kart oranı -- çerçeveler bu orandadır */
  object-fit: contain;
  display: block;
}
.tfy-tb-ad {
  font-size: 0.8rem;
  line-height: 1.2;
  font-weight: 600;
}
.tfy-tb-sayi {
  font-size: 0.7rem;
  line-height: 1;
  opacity: 0.62;
}

/* SEÇİLİ: kontrast yalnız RENKTEN gelmiyor -- kenar kalınlaşıyor ve ad
   kalınlaşıyor. Renk körlüğünde de ayırt edilebilsin. */
.tfy-tb--secili {
  border-color: var(--tf-kirmizi, #C1372F);
  color: var(--tf-kirmizi, #C1372F);
}
.tfy-tb--secili .tfy-tb-ad { font-weight: 700; }

/* ---- ŞERİT GÖRÜNÜMÜ ---------------------------------------------------- */
.tfy-tb--serit {
  flex: 0 0 auto;
  flex-direction: row;
  gap: 8px;
  /* DOKUNMA HEDEFİ >= 44 px (KOMUT E'den devralınan kural). */
  min-height: 44px;
  padding: 4px 14px 4px 6px;
  border-radius: 999px;
  white-space: nowrap;
  /* GENİŞLİK ÜST SINIRI (G3-E md. 3). Hap genişliği ada göre değişebilir ama
     sınırsız değil: ölçüldü, "Süper Kahramanlar" 184 px'e çıkıyor ve 390 px'lik
     şeritte yanındaki hap yarım kalıyordu. Sınır, şeritte HER ZAMAN birden
     fazla hap görünmesini garanti eder. */
  max-width: 168px;
}
/* ŞERİTTE SİMGE KUTUSU SABİT ÖLÇÜ: ızgaranın "sütun genişliği kadar" kuralı
   burada geçerli değil -- hap tek satırda ve yüksekliği 44 px hedefine bağlı.
   Kutu ÖLÇÜSÜ çerçevenin oranından BAĞIMSIZ olmalı (G3-E md. 3): yüksekliği de
   yazmak şart, yoksa yükseklik görselin oranından türer ve gelecekte farklı
   oranda bir kapak yayımlandığında haplar birbirine göre kayar. Çerçeve kutuya
   `object-fit: contain` ile oturur; şeffaf WebP kırpılamaz. */
.tfy-tb--serit .tfy-tb-kapak {
  width: 28px;
  height: 38px;
  flex: 0 0 auto;
}
.tfy-tb--serit .tfy-tb-kapak img {
  width: 100%;
  height: 100%;
  /* Izgaradaki 7/10 oranı BURADA GEÇERSİZ: kutu zaten sabit ölçüde ve oran
     kuralı kalırsa yükseklik iki yerden birden belirlenmeye çalışılır. */
  aspect-ratio: auto;
}
/* AD TEK SATIR, SIĞMAZSA ÜÇ NOKTA -- hapı BÜYÜTMEZ.
   `min-width: 0` olmadan esnek çocuk kendi içeriğinden küçülmeyi reddeder ve
   `max-width` hiçbir işe yaramaz (metin taşar, hap yine şişer). */
.tfy-tb--serit .tfy-tb-ad {
  font-size: 0.86rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Sayı düğümü ŞERİTTE GİZLİ ama SİLİNMEZ: iki görünüm arasında geçerken DOM
   şekli aynı kalsın (bkz. tf-tema-butonu.js aynı gerekçe). */
.tfy-tb--serit .tfy-tb-sayi { display: none; }

/* ---- DAR EKRAN --------------------------------------------------------- */
@media (max-width: 939px) {
  /* Kenardan kenara kaydırılır, haplar İÇERİDEN başlar: negatif kenar boşluğu
     şeridi panelin yatay dolgusunun dışına taşır, iç dolgu hapları kenara
     yapıştırmaz. (KOMUT E'de ölçülerek konulan desen.) */
  .tfy-tema-kap--serit {
    margin-left: calc(-1 * var(--tsm-panel-pay, 15px));
    margin-right: calc(-1 * var(--tsm-panel-pay, 15px));
    padding-left: var(--tsm-panel-pay, 15px);
    padding-right: var(--tsm-panel-pay, 15px);
  }
}