/* Vitrin yatay / kısa ekran düzeni (telefon yan çevrilmiş). Son yüklenen vitrin stili. Bkz. docs/MOBIL-VITRIN.md
   KISA EKRAN koşulu: (max-height:520px) and (max-width:1000px). Aynı koşul vitrin-*.css ve vitrin-mobil.js içindeki "mobil" kırılımına da eklidir:
   mobil = (max-width:860px) VEYA kısa ekran; masaüstü = (min-width:861px) ve (min-height:521px) VEYA (min-width:1001px).
   Yalnız boyut/düzen: renk bu dosyada YOKTUR. Yatay çentik güvenli alanı: --yt-yl / --yt-yr (viewport-fit=cover ile env() sıfırdan büyür). */

@media (max-height:520px) and (max-width:1000px){
  :root{--yt-alt:40px;--yt-yl:max(16px,env(safe-area-inset-left,0px));--yt-yr:max(16px,env(safe-area-inset-right,0px))}

  /* ---- Güvenli alan: sayfa kabı ve yan boşluklar ---- */
  html body .kap{padding-left:var(--yt-yl);padding-right:var(--yt-yr)}
  html body .kategori-menu .kap,html body.hd-yuzen .kategori-menu .kap{padding-left:var(--yt-yl);padding-right:var(--yt-yr)}

  /* ---- Üst çubuk: yapışkan DEĞİL (kısa ekranı kaplamaz), kompakt ---- */
  html body .ust{position:static}
  html body .topbar{font-size:.76rem;line-height:1.15}
  html body .topbar-ic,html body .topbar .kap{padding-top:0;padding-bottom:0}
  html body .ust-satir{padding-top:3px;padding-bottom:3px;gap:0 6px}
  html body .menu-dugme{width:40px;height:40px}
  html body .logo{font-size:1.05rem;flex-basis:auto}
  html body:not(.mh-arama) .ust:not(.ara-acik) .ust-satir{flex-wrap:nowrap}
  html body .logo img{height:auto;width:auto;max-height:34px;max-width:150px}
  html body .hesap-menu a{min-height:38px}
  html body.mh-arama .ust-satir{row-gap:4px;padding-top:4px;padding-bottom:6px}
  html body.mh-arama .ust .arama,html body .ust .arama{height:38px}

  /* ---- Alt gezinme çubuğu: kompakt (ikon + etiket yan yana). Yükseklik --yt-alt; yüzen öğeler/footer boşluğu aynı değişkenle ---- */
  html body .alt-nav{height:calc(var(--yt-alt) + env(safe-area-inset-bottom,0px));box-sizing:border-box;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);align-items:stretch}
  html body .alt-nav-oge,html body .alt-nav a.alt-nav-oge.kat-tetik{flex-direction:row;justify-content:center;align-items:center;gap:6px;padding:0 .3rem;min-height:0;font-size:.74rem}
  html body .alt-nav-ikon{width:1.9rem;height:1.6rem}
  html body .alt-nav-ikon .ik{font-size:1.2rem}
  html body .alt-nav-oge em{top:-1px;right:-4px}
  html body.alt-nav-var{padding-bottom:calc(var(--yt-alt) + env(safe-area-inset-bottom,0px))}
  html body.alt-nav-var:not(.sayfa-urun):not(:has(.urun-cubuk)){padding-bottom:0}
  html body.alt-nav-var:not(.sayfa-urun):not(:has(.urun-cubuk)) .alt{padding-bottom:calc(var(--yt-alt) + env(safe-area-inset-bottom,0px))}

  /* ---- Kategori vitrini: TEK SATIR yatay kaydırma, daire boyutu yüksekliğe bağlı (genişliğe değil), sola hizalı ---- */
  html body .kategori-izgara,html body .ab-kategori .kategori-izgara,html body.kv-ust .ab-kategori .kategori-izgara,html body.kv-serit .ab-serit .kategori-izgara{
    --yt-daire:clamp(56px,15vh,84px);
    display:flex;flex-wrap:nowrap;grid-template-columns:none;justify-content:flex-start;align-items:flex-start;gap:12px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-left:calc(-1*var(--yt-yl));margin-right:calc(-1*var(--yt-yr));padding:6px var(--yt-yr) 6px var(--yt-yl);scroll-padding-inline:var(--yt-yl);
    -webkit-mask-image:linear-gradient(90deg,black calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,black calc(100% - 28px),transparent);
  }
  html body .kategori-izgara::-webkit-scrollbar{display:none}
  html body .kategori-izgara .kategori-karti,html body .ab-kategori .kategori-karti,html body.kv-serit .ab-serit .kategori-karti{flex:0 0 calc(var(--yt-daire) + 16px);width:calc(var(--yt-daire) + 16px);min-width:0;scroll-snap-align:start;text-align:center}
  html body .kategori-izgara .kategori-karti img,html body .ab-kategori .kategori-karti img,html body.kv-serit .ab-serit .kategori-karti img{width:var(--yt-daire);height:var(--yt-daire);aspect-ratio:auto;max-width:none;margin:0 auto 6px;object-fit:cover}
  html body .kategori-izgara .kategori-karti span,html body .ab-kategori .kategori-karti span,html body.kv-serit .ab-serit .kategori-karti span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;overflow-wrap:anywhere;font-size:.72rem;line-height:1.2;font-weight:600}
  html body .ab-kategori,html body .ab-serit{margin-bottom:.5rem}

  /* ---- Çerez bandı: yatayda kompakt, güvenli alan içinde, alt çubuğun üstünde ---- */
  html body .ck-bant{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(6px + env(safe-area-inset-bottom,0px));padding:8px 12px;gap:4px 14px;font-size:.74rem;line-height:1.3;max-height:44vh;overflow:auto;flex-wrap:wrap}
  html body.alt-nav-var .ck-bant{bottom:calc(var(--yt-alt) + 6px + env(safe-area-inset-bottom,0px))}
  html body .ck-metin{flex:1 1 260px;min-width:0}
  html body .ck-secenekler{flex-direction:column;gap:0;flex-wrap:nowrap}
  html body .ck-secim{font-size:.72rem}
  html body .ck-dugmeler{width:auto;flex-wrap:nowrap;gap:6px}
  html body .ck-dugmeler .dugme{flex:0 0 auto;width:auto;min-height:32px;padding:.3rem .7rem;font-size:.74rem}

  /* ---- Yüzen WhatsApp: 44 px, güvenli alan içinde, alt çubuğun üstünde ---- */
  html body .wa-yuzen{height:44px;min-width:44px;padding:0 10px}
  html body .wa-yuzen-ikon{width:24px;height:24px}
  html body .wa-sag-alt{right:max(10px,env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  html body .wa-sol-alt{left:max(10px,env(safe-area-inset-left,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  html body.alt-nav-var .wa-sag-alt,html body.alt-nav-var .wa-sol-alt{bottom:calc(var(--yt-alt) + 8px + env(safe-area-inset-bottom,0px))}

  /* ---- Banner / mozaik: yüksekliği ekran yüksekliğine bağlı, çok sütun ---- */
  html body .banner-kaydirici{aspect-ratio:auto;min-height:0;height:clamp(150px,48vh,230px)}
  html body .mozaik{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
  html body .mozaik .mz-ana{grid-column:1 / -1;grid-row:auto;aspect-ratio:auto;min-height:0;height:clamp(150px,48vh,230px)}
  html body .mozaik .mz-kart:not(.mz-ana){grid-column:auto;grid-row:auto;min-height:0;height:clamp(104px,34vh,150px)}
  html body .mozaik .mz-kart .mz-metin{max-width:92%;padding:.5rem .7rem;gap:.25rem}
  html body .mozaik .mz-kart .mz-metin b{font-size:.95rem;line-height:1.15}
  html body .mozaik .mz-kart .mz-metin small{display:none}
  html body .mozaik .mz-kart .mz-dugme{padding:.3rem .8rem;font-size:.78rem}
  html body .mozaik .mz-ana .banner-metin{padding:.6rem .9rem}
  html body .mozaik .mz-ana .banner-metin h2{font-size:1.1rem}
  html body .mozaik .mz-ana .banner-metin p{font-size:.8rem}
  html body .bolum{margin-top:0}

  /* ---- Ürün ızgaraları: kısa ekranda çok sütun, kompakt kart ---- */
  html body .urun-izgara,html body.sayfa-liste:not(.kt-liste) .urun-izgara,html body.sayfa-liste.kt-genis .urun-izgara,html body.sayfa-liste.kt-kompakt .urun-izgara,html body.sayfa-liste.kt-yan .urun-izgara{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
  html body .urun-karti,html body.sayfa-liste.kt-genis .urun-karti{--gorsel-oran:4/3}
  html body:not(.kt-liste) .urun-karti .kart-gorsel,html body.sayfa-liste.kt-genis .kart-gorsel{aspect-ratio:4/3}
  html body.sayfa-liste.kt-liste .kart-gorsel{width:130px}
  html body .urun-karti .kart-rozetler>.etiket:nth-child(n+2){display:none}
  html body .urun-karti .sticker{transform:scale(.7);transform-origin:top left}
  html body .urun-karti .kart-icerik{padding:8px 10px 10px}
  html body .urun-karti .kart-icerik h3{font-size:.86rem;line-height:1.25}
  html body .urun-karti .fiyat b{font-size:1rem}
  html body .urun-karti .fiyat .tasarruf{display:none}

  /* ---- Başlık / yol bandı: ince ---- */
  html body.yl-yapisik .yol-kap{position:static;margin-bottom:10px}

  /* ---- Ürün sayfası sabit satın alma çubuğu: kompakt ---- */
  html body.sayfa-urun.ur-cubuk .al-satir{padding:6px var(--yt-yr) calc(6px + env(safe-area-inset-bottom,0px)) var(--yt-yl);gap:6px}
  html body.sayfa-urun.ur-cubuk .al-satir .dugme{min-height:40px;padding-top:.25rem;padding-bottom:.25rem}
  html body .urun-cubuk{padding:.3rem var(--yt-yr) calc(.3rem + env(safe-area-inset-bottom,0px)) var(--yt-yl)}
  html body.sayfa-urun.ur-cubuk{padding-bottom:0}
  html body.sayfa-urun.ur-cubuk .wa-sag-alt,html body.sayfa-urun.ur-cubuk.alt-nav-var .wa-sag-alt{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  html body.sayfa-urun.ur-cubuk .wa-sol-alt,html body.sayfa-urun.ur-cubuk.alt-nav-var .wa-sol-alt{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  html body.sayfa-urun.ur-cubuk .alt,html body:not(.ur-cubuk):has(.urun-cubuk) .alt{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}

  /* ---- Ürün detay: galeri solda (yapışkan), bilgi sağda ---- */
  html body.sayfa-urun[class][class] .urun-detay{grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:8px 22px;max-width:none;margin-bottom:20px}
  html body.sayfa-urun[class] .urun-detay>.galeri{max-width:none;width:100%;margin:0;position:sticky;top:8px;align-self:start}
  html body.sayfa-urun[class] .galeri-ana{aspect-ratio:auto;height:clamp(180px,calc(100vh - 100px),420px)}
  html body.sayfa-urun .galeri-ana>img,html body.sayfa-urun .galeri-ana img{object-fit:contain}

  /* ---- Sepet / ödeme: iki sütun (özet sağda, yapışkan değil) ---- */
  html body .sepet-duzen,html body .odeme-duzen{grid-template-columns:minmax(0,1fr) minmax(230px,30%);gap:16px}
  html body .sepet-duzen .ozet-kutusu,html body .odeme-duzen .ozet-kutusu{position:static}
}

/* Çok kısa VE dar (568x320 gibi): çerez seçenekleri tek satırda, bant daha az yer kaplar */
@media (max-height:520px) and (max-width:700px){
  html body .ck-secenekler{flex-direction:row;gap:14px}
}