/* Tema sayfası (Views/Vitrin/Tema) — onaylı prototipin tema.css dosyasından. Sayfa başı ve konum izi vitrin.css'teki tg-
   sınıflarını paylaşır. Önek: ts-. İçerik ve renkler katalogdan (sunucu tarafında basılır; prototipteki tema.js doldurması yok). */

.ts-bas { padding-bottom: var(--b-6); }
.ts-bas-izgara { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--b-7); align-items: end; }
.ts-bas-metin > * + * { margin-top: var(--b-4); }
.ts-bas h1 { font-size: clamp(3rem, 2rem + 4vw, 5.5rem); letter-spacing: -.045em; }
.ts-kisa { font: 700 var(--t-h4)/1.3 var(--f-baslik); letter-spacing: -.01em; }
.ts-bas-metin .tk-giris { max-width: 40em; }
.ts-bas-eylem { display: grid; gap: 10px; justify-items: stretch; max-width: 360px; justify-self: end; width: 100%; }
.ts-bas-eylem p { text-align: center; }

/* ── Önizleme (2026-10-26): canlı çerçeve yok; net ekran görüntüsü + "Canlı demoyu yeni sekmede aç". Masaüstü ekranı 1440x900 (16:10)
      tarayıcı çerçevesinde tam görünür; telefon ekranı 390x844 oranında, telefonun ilk ekranı kesilmeden. Görsele tıklamak da demoyu açar
      (.ts-ekran-bag; üzerine gelince "Canlı demoyu aç" ipucu). ── */
.ts-onizleme { padding-top: clamp(24px, 3vw, 40px); padding-bottom: var(--b-5); }   /* üstteki ızgaralı sayfa başına yapışmasın */
.ts-arac { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: var(--b-4); }
.ts-arac-sag { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 18px; min-width: 0; }
.ts-arac-not { display: inline-flex; align-items: center; gap: 8px; }
.ts-arac-not svg { width: 16px; height: 16px; flex: none; }
.ts-demo-dugme { flex: none; }
.ts-masaustu .tk-tarayici-ekran { --oran: 16 / 10; }
.ts-masaustu { box-shadow: var(--g-4); }
.ts-ekran-bag { position: absolute; inset: 0; z-index: 2; display: block; cursor: pointer; }
.ts-ekran-ipucu { position: absolute; left: 50%; bottom: clamp(14px, 3vw, 28px); display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 999px; background: rgba(255, 255, 255, .96); color: var(--murekkep); font: 700 var(--t-arayuz)/1 var(--f-govde); white-space: nowrap;
  box-shadow: var(--g-3); opacity: 0; transform: translate(-50%, 6px); transition: opacity var(--h-hizli) var(--egri), transform var(--h-hizli) var(--egri); pointer-events: none; }
.ts-ekran-ipucu svg { width: 16px; height: 16px; flex: none; color: var(--mavi-metin); }
.ts-ekran-bag:hover .ts-ekran-ipucu { opacity: 1; transform: translate(-50%, 0); }
.ts-panel--telefon { padding: var(--b-6) 0; border-radius: var(--k-5); background: radial-gradient(60% 70% at 30% 40%, rgba(120, 156, 255, .18), transparent 70%), rgba(255, 255, 255, .5); border: 1px solid var(--tas); }
.ts-telefon-sahne { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: var(--b-7); align-items: center; max-width: 920px; margin-inline: auto; padding-inline: var(--b-5); }
/* Telefon ekranı: 340 px'lik çerçevede 320 px genişlik, 390x844 oranı (taban .tk-telefon) — telefonun ilk ekranı bütün görünür */
.ts-telefon { justify-self: end; width: 340px; max-width: 100%; }
.ts-telefon .ts-ekran-ipucu { bottom: 22px; }
/* Ekran görüntüsü sayfanın en üstünden başlar (durum çubuğu yok): çentik temanın üst menüsünü örtmesin diye çerçevenin kenarında ince
   hoparlör yarığına döner */
.ts-telefon::before, .ts-mobil-telefon::before { top: 4px; width: 54px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); }

/* ── Mobil demo (2026-10-04): telefonda sekmeler yerine telefon ekranı + "Canlı demoyu aç" (Views/Vitrin/Tema'daki <source> sorgusuyla aynı) ── */
.ts-mobil-demo { display: none; }
.ts-mobil-telefon { max-width: 220px; margin-inline: auto; }
.ts-mobil-tarayici .tk-tarayici-ekran { --oran: 4 / 3; }
.ts-mobil-metin { display: grid; gap: var(--b-3); justify-items: start; }
.ts-mobil-metin h2 { font-size: var(--t-h3); }
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .ts-mobil-demo { display: grid; gap: var(--b-5); align-items: center; padding: var(--b-5) var(--b-4); border-radius: var(--k-5); border: 1px solid var(--tas);
    background: radial-gradient(60% 70% at 30% 30%, rgba(120, 156, 255, .16), transparent 70%), rgba(255, 255, 255, .55); }
  .ts-mobil-metin .tk-dugme { width: 100%; justify-content: center; }
  .ts-onizleme .ts-arac, .ts-onizleme .ts-panel { display: none; }
}
@media (min-width: 761px) and (pointer: coarse) and (max-height: 520px) {
  .ts-mobil-demo { grid-template-columns: minmax(0, 1fr) 200px; }
}
.ts-telefon-metin > * + * { margin-top: var(--b-4); }
.ts-telefon-metin h2 { font-size: var(--t-h3); }
.ts-tik { list-style: none; padding: 0; display: grid; gap: 10px; }
.ts-tik li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ts-tik svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: var(--mavi-metin); background: var(--mavi-acik); flex: none; }

.ts-sayilar { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--b-4); margin-top: var(--b-7); }
.ts-sayi { display: grid; align-content: start; gap: 2px; padding: var(--b-5) var(--b-4); }
.ts-sayi b { font: 800 clamp(2.25rem, 1.8rem + 1.4vw, 3rem)/1 var(--f-baslik); letter-spacing: -.04em; background: var(--isilti); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px; }
.ts-sayi-ad { font-weight: 700; }
.ts-sayi small { color: var(--sis); font-size: var(--t-kucuk); line-height: 1.4; margin-top: 4px; }
@media (forced-colors: active) { .ts-sayi b { color: CanvasText; background: none; } }

.ts-iki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--b-5); margin-top: var(--b-5); align-items: stretch; }
.ts-liste-kart h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--b-4); font-size: var(--t-h4); }
.ts-liste-kart h3 svg { width: 22px; height: 22px; color: var(--mavi-metin); }
.ts-etiketler { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ts-etiketler li { padding: 7px 12px; border-radius: 9px; background: var(--yuzey-2); border: 1px solid var(--tas); font-size: var(--t-kucuk); font-weight: 600; }
.ts-bolumler { padding: 0; margin: 0; list-style: none; counter-reset: b; columns: 2 220px; column-gap: 28px; }
.ts-bolumler li { break-inside: avoid; counter-increment: b; display: flex; gap: 12px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--tas); font-size: var(--t-arayuz); font-weight: 500; }
/* sütun düzeninde son satır çizgisi kalır: tutarlı görünüm */
.ts-bolumler li::before { content: counter(b, decimal-leading-zero); font: 700 .75rem/1 var(--f-govde); color: var(--mavi-metin); font-variant-numeric: tabular-nums; min-width: 20px; }

.ts-nitelikler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b-5); margin-top: var(--b-6); }
.ts-nitelik-no { font: 800 .875rem/1 var(--f-baslik); color: var(--amber-metin); letter-spacing: .04em; }
.ts-nitelik h3 { margin-top: var(--b-3); }
.ts-dahil { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--b-5); }
.ts-dahil-oge { flex: 1 1 220px; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--k-3); background: var(--yuzey-2); border: 1px solid var(--tas); }
.ts-dahil-oge svg { width: 24px; height: 24px; color: var(--mavi-metin); flex: none; }
.ts-dahil-oge b { display: block; font-size: var(--t-arayuz); }
.ts-dahil-oge small { color: var(--sis); }
.ts-renk { width: 26px; height: 26px; border-radius: 8px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), var(--g-1); }

.ts-cagri { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b-5);
  background: radial-gradient(80% 120% at 0% 0%, rgba(47, 102, 255, .1), transparent 60%), radial-gradient(50% 90% at 100% 100%, rgba(240, 178, 84, .16), transparent 60%), var(--yuzey-1); }
.ts-cagri h2 { font-size: var(--t-h2); }
.ts-cagri p { margin-top: 8px; max-width: 46ch; }
.ts-diger-baslik { font-size: var(--t-h3); margin: var(--b-8) 0 var(--b-5); }
.ts-diger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-5); }
.ts-diger-kart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--b-5); align-items: center; padding: 12px; color: var(--murekkep); }
.ts-diger-kart:hover { text-decoration: none; }
.ts-diger-kart .tk-tarayici { box-shadow: var(--g-2); border-radius: 12px; }
.ts-diger-kart .tk-tarayici-ekran { --oran: 4 / 3; }
.ts-diger-bilgi { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ts-diger-bilgi > div > b { display: block; font: 700 var(--t-h3)/1.1 var(--f-baslik); letter-spacing: -.02em; }
.ts-diger-bilgi > div > span:not(.sk-fiyat-satirici) { display: block; color: var(--sis); font-size: var(--t-arayuz); margin-top: 6px; }
.ts-diger-bilgi svg { width: 22px; height: 22px; color: var(--mavi-metin); flex: none; transition: transform var(--h-hizli) var(--egri); }
.ts-diger-kart:hover .ts-diger-bilgi svg { transform: translateX(4px); }

@media (max-width: 1080px) {
  .ts-bas-izgara { grid-template-columns: minmax(0, 1fr); }
  .ts-bas-eylem { justify-self: start; }
  .ts-sayilar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ts-diger { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  /* Dar masaüstü / tablet: telefon çerçevesi genişliğini korur, açıklama altına iner; düğme satırı araç çubuğunda alta geçebilir */
  .ts-telefon-sahne { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--b-6); }
  .ts-telefon { justify-self: center; }
  .ts-telefon-metin { max-width: 520px; }
}
@media (max-width: 900px) {
  .ts-arac-sag { margin-left: 0; width: 100%; justify-content: space-between; }
}
@media (max-width: 760px) {
  .ts-telefon-sahne { grid-template-columns: minmax(0, 1fr); gap: var(--b-6); }
  .ts-iki, .ts-nitelikler { grid-template-columns: minmax(0, 1fr); }
  .ts-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ts-diger-kart { grid-template-columns: minmax(0, 1fr); }
  .ts-bas-eylem { max-width: none; }
}

/* Bu temanın fiyatı (başlık yanındaki satın alma kutusu). Tutarlar tema-veri.js'ten. */
.ts-bas-eylem { max-width: 380px; }
.ts-fiyat { padding: 18px 20px; display: grid; gap: 12px; box-shadow: var(--g-3), var(--parilti);
  background: radial-gradient(90% 80% at 0% 0%, rgba(47, 102, 255, .08), transparent 60%), radial-gradient(60% 60% at 100% 0%, rgba(240, 178, 84, .12), transparent 60%), var(--yuzey-1); }
.ts-fiyat-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ts-fiyat-ust h2 { font: 700 var(--t-arayuz)/1.2 var(--f-govde); letter-spacing: 0; }
.ts-fiyat-dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin: 0; }
.ts-fiyat-dl > div { padding: 10px 12px; border-radius: var(--k-3); background: var(--yuzey-2); border: 1px solid var(--tas); }
.ts-fiyat-dl dt { font: 700 var(--t-mini)/1.2 var(--f-govde); letter-spacing: .06em; text-transform: uppercase; color: var(--sis); }
.ts-fiyat-dl dd { margin: 6px 0 0; }
.ts-fiyat-dl b { display: block; font: 800 1.625rem/1 var(--f-baslik); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ts-fiyat-dl small { display: block; margin-top: 4px; color: var(--sis); font-size: var(--t-mini); }
.ts-fiyat-not { font-size: var(--t-kucuk); color: var(--sis); line-height: 1.5; text-align: left !important; }


/* Vurgu rengi örneği: katalogdan (.tv-{id} { --r }) */
.ts-renk { background: var(--r, var(--tas-koyu)); }
/* Satış kapalıyken satın alma düğmesinin yerinde */
.ts-bas-eylem .tk-uyari, .ts-bas-eylem .tk-uyari p { text-align: left; }

/* "Kısaca" paragrafı (GEO, sartname 5.1): h1 altındaki katalogdan hesaplanan özet — sakin, etiketli */
.ts-kisaca { max-width: 40em; font-size: var(--t-arayuz); line-height: 1.6; color: var(--sis); padding-left: 14px; border-left: 3px solid var(--mavi-cizgi); }
.ts-kisaca b { display: block; margin-bottom: 2px; font: 700 var(--t-mini)/1.2 var(--f-govde); letter-spacing: .08em; text-transform: uppercase; color: var(--mavi-metin); }