/* ============================================================
   ANA SAYFA — Trendyol mobil web iskeleti
   Ölçüler 390px'te canlı alındı (2026-09-25):
     bölüm aralığı 2px · kenar boşluğu 10px
     daire 68px, öğe 94px, etiket 12px/600, satır 128px
     ray başlığı 16px var(--metin), kart ~160px + 10px aralık (2,25 kart görünür)
     banner 390 × 160 (1220 × 500 kaynak)
     çip 85 × 34
   Masaüstünde ızgara iki kolona açılır; hedef mobil.
   ============================================================ */

.ty-ana{
  display:flex; flex-direction:column; gap:2px;
  background:var(--sayfa);
}
.ty-w{ min-width:0; }

/* raylar kabın dışında: stil.css'teki negatif margin'i sıfırla */
.ty-ana .ray{ margin-inline:0; padding-inline:10px; scroll-padding-inline:10px; gap:10px; }

/* ---------- yer tutucu ---------- */
.yt{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:100%; height:100%;
  background:var(--panel);
  border:1px dashed var(--hat2);
  color:var(--metin3); text-align:center; line-height:1.15;
}
.yt b{ font-size:var(--t4); font-weight:var(--k-kalin); color:var(--metin2); }
.yt small{ font-size:var(--t1); font-weight:var(--k-orta); letter-spacing:var(--dar-aralik, .02em); }

/* ---------- daireler ---------- */
.ty-daire{ padding-block:10px; }
.ty-daire-ray{ gap:15px; padding-inline:17px; scroll-padding-inline:17px; }
.ty-daire-oge{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  width:94px; color:var(--metin); text-decoration:none;
}
.ty-daire-oge .yt,
.ty-daire-gorsel{ width:68px; height:68px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.yt-daire{ border-radius:50%; }
.yt-daire b{ font-size:var(--t3); }
.ty-daire-oge > .ty-daire-ad{
  margin-top:10px;
  font-size:12px; font-weight:600; line-height:16px; text-align:center;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* ---------- ray başlığı ---------- */
.ty-bas{
  position:relative; display:flex; align-items:center; gap:var(--u4);
  padding:0 10px 12px;
}
.ty-bas h2{
  flex:1 1 auto; min-width:0; margin:0;
  font-family:var(--yazi-dar); font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); font-size:22px; line-height:1.1; color:var(--metin);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ty-bas a{
  display:inline-flex; align-items:center; gap:2px; flex:0 0 auto;
  font-family:var(--yazi-dar); font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); font-size:14px; color:var(--metin); text-decoration:none;
}
.ty-bas a:hover{ color:var(--mandalina); }
.ty-bas a .ikn{ width:12px; height:12px; }

/* ---------- ürün rayı ---------- */
.ty-ray{ padding-block:10px; }
/* Trendyol: üstte renkli zemin, %87'de beyaza iner */
.ty-zemin-gri{ background:var(--sayfa); }
.ty-kartlar{ padding-bottom:4px; }
.ty-kartlar .tk{ width:min(calc((100vw - 30px) / 2.25), 184px); }

/* ---------- flaş ---------- */
.ty-flas{ background:var(--yaprak, var(--metin)); }
/* başlık, sayaç ve bağlantı dar ekranda (ya da yazı karakteri gelmezse) taşmasın: başlık kısalır */
.ty-flas-bas h2{ flex:0 1 auto; color:var(--zemin); font-size:clamp(18px, 5.4vw, 22px); }
.ty-flas-bas a{ margin-left:auto; color:var(--zemin); text-decoration:underline; text-underline-offset:3px; }

/* ---------- banner ---------- */
.ty-banner{
  position:relative; display:block; aspect-ratio:1220 / 500;
  overflow:hidden; isolation:isolate; background:var(--panel); color:#fff;
}
.ty-banner-gorsel{ width:100%; height:100%; object-fit:cover; display:block; }
.ty-banner::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg, rgba(15,27,61,.5) 0, rgba(15,27,61,.22) 40%, transparent 64%);
}
.ty-banner-koyu{ color:var(--metin); }
.ty-banner-koyu::after{ background:linear-gradient(90deg, rgba(255,255,255,.78) 0, rgba(255,255,255,.36) 42%, transparent 66%); }
.ty-banner-icerik{
  position:absolute; z-index:2; inset:0 auto 0 0; width:54%;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:14px 16px; text-decoration:none;
}
.ty-banner-icerik strong{
  max-width:15ch; font-family:var(--yazi-dar); font-size:clamp(20px, 6vw, 28px);
  font-weight:700; line-height:1; letter-spacing:var(--dar-aralik, .03em); text-transform:var(--buyuk-harf, uppercase);
}
/* Teklif satırı mobilde de görünür: banner'ın taşıdığı tek somut bilgi bu */
.ty-banner-icerik small{
  max-width:34ch; margin-top:5px; font-size:var(--t2); line-height:1.3; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.ty-banner-cta{
  display:inline-flex; align-items:center; gap:2px; margin-top:9px; min-height:28px; padding:0 10px;
  border-radius:var(--r); background:var(--zemin); color:var(--metin); box-shadow:0 0 0 1.5px var(--metin) inset;
  font-family:var(--yazi-dar); font-size:13px; line-height:1; font-weight:700; letter-spacing:var(--dar-aralik, .06em); text-transform:var(--buyuk-harf, uppercase);
}
.ty-banner-cta .ikn{ width:11px; height:11px; }

/* ---------- YAPANLAR — üretici listesi, akışın sonunda ----------
   Pazaryerinden ayıran öğe: her ürünün yapanı belli. */
.yp-bolum{ padding:16px 10px 20px; background:var(--zemin); margin-top:8px; }
.yp-bolum .ty-bas{ padding-inline:0; --bas-pad:0px; }
.yp-izgara{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
.yp{
  display:flex; align-items:center; gap:10px; min-width:0; min-height:44px; padding:10px;
  background:var(--zemin); border:1px solid var(--hat); border-radius:var(--r2); color:var(--metin);
  transition:border-color var(--hiz);
}
.yp-harf{
  flex:0 0 40px; height:40px; display:grid; place-items:center; border-radius:50%;
  background:var(--yaprak-acik, var(--panel)); color:var(--yaprak, var(--metin)); font-weight:800; font-size:17px;
}
.yp-ad{ min-width:0; }
.yp-ad b{ display:block; font-size:var(--t5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.yp-ad small{ font-size:var(--t3); color:var(--metin2); }
@media (hover:hover){ .yp:hover{ border-color:var(--metin); } }
.yp:focus-visible{ outline-offset:2px; }
@media (min-width:560px){ .yp-izgara{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:900px){
  .yp-bolum{ max-width:var(--maks); margin:24px auto 0; padding:0 var(--pad); background:none; }
  .yp-izgara{ grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
}

/* ---------- bulunamadı ---------- */
.yok-sayfa{ position:relative; overflow:hidden; isolation:isolate; padding:40px 16px 36px; background:var(--sayfa); }
.yok-sayfa .damga{ margin-bottom:16px; font-size:var(--t6); }
.yok-sayfa h1{ margin:0; font-family:var(--yazi-dar); font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); font-size:clamp(40px, 11vw, 80px); line-height:.92; letter-spacing:var(--dar-aralik, .01em); }
.yok-sayfa p{ max-width:34ch; margin:14px 0 20px; font-size:var(--t5); font-weight:600; }
.yok-eylem{ display:flex; flex-wrap:wrap; gap:10px; }
@media (min-width:900px){ .yok-sayfa{ padding:64px max(28px, calc((100% - var(--maks)) / 2 + var(--pad))); } }

/* ---------- vitrin: kaydırmalı, tek görsel bir kez ---------- */
.ty-vitrin{ position:relative; background:var(--zemin); }
.ty-ana .ty-vitrin-ray{ gap:0; padding-inline:0; scroll-padding-inline:0; }
.ty-vitrin-slayt{ flex:0 0 100%; }
.ty-vitrin-nokta{
  position:absolute; z-index:3; left:50%; bottom:8px; transform:translateX(-50%);
  display:flex; align-items:center; gap:4px; padding:5px 7px; border-radius:var(--r);
  background:var(--zemin);
}
.ty-vitrin-nokta i{ width:12px; height:3px; background:var(--hat2); transition:background var(--hiz); }
.ty-vitrin-nokta i.aktif{ background:var(--metin); }

/* ---------- Sana Özel: akışın sonu, sonsuz ızgara ---------- */
.ty-ozel{ padding:12px 10px 20px; background:var(--zemin); }
.ty-ozel .ty-bas{ padding-inline:0; --bas-pad:0px; }
.ty-ozel-son{ margin:20px 0 4px; text-align:center; font-size:var(--t4); color:var(--metin2); }
.ty-ozel-son a{ display:inline-flex; align-items:center; gap:2px; font-family:var(--yazi-dar); font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); color:var(--metin); }
.ty-ozel-son .ikn{ width:12px; height:12px; }

/* ---------- indirim çipleri ---------- */
.ty-cip{ padding-block:10px 12px; }
.ty-cip-oge{
  display:inline-flex; align-items:center; height:38px; padding:1px 14px 0; border-radius:var(--r-tam);
  background:var(--zemin); color:var(--metin); box-shadow:0 0 0 1.5px var(--metin) inset;
  font-family:var(--yazi-dar); font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); font-size:15px; text-decoration:none; white-space:nowrap;
  transition:background var(--hiz), color var(--hiz);
}
.ty-cip-oge:active{ background:var(--metin); color:var(--zemin); }
@media (hover:hover){ .ty-cip-oge:hover{ background:var(--metin); color:var(--zemin); } }

/* etkileşim */
.ty-banner:focus-visible, .ty-daire-oge:focus-visible, .ty-cip-oge:focus-visible{
  outline:3px solid var(--mnd); outline-offset:-3px;
}
.ty-banner:active{ opacity:.9; }

/* ---------- masaüstü: tek kolon kart akışı, vitrin ikişer slayt ---------- */
@media (min-width:900px){
  .ty-ana{
    gap:8px; max-width:var(--maks); margin:16px auto 0; padding-inline:var(--pad);
    background:none;
  }
  .ty-ana > *{ background-color:transparent; }
  .ty-ana > .ty-flas{ background-color:var(--yaprak, var(--metin)); border-radius:var(--r3); overflow:hidden; }
  .ty-bas{ --bas-pad:0px; padding-inline:0; }
  .ty-flas .ty-bas{ --bas-pad:10px; padding-inline:10px; }
  .ty-ana .ty-vitrin-ray{ gap:8px; }
  .ty-vitrin{ background:none; }
  .ty-vitrin-slayt{ flex-basis:calc(50% - 4px); border-radius:var(--r2); }
  .ty-serit .ty-banner{ aspect-ratio:1220 / 300; }
  .ty-serit .ty-banner-icerik{ width:40%; }
  .ty-banner-icerik{ padding:24px 28px; }
  .ty-banner-icerik strong{ font-size:clamp(24px, 2.3vw, 34px); }
  .ty-banner-icerik small{ font-size:var(--t4); }
  .ty-banner-cta{ min-height:34px; margin-top:14px; padding-inline:13px; font-size:12px; }
  .ty-kartlar .tk{ width:184px; }
  .ty-ozel{ padding:16px; }
}