/* ============================================================
   mobil.css — StickerLab telefon düzeltmeleri
   ------------------------------------------------------------
   Her sayfanın kendi stili var; bu dosya onların ÜSTÜNE binip
   sadece telefonda bozulan şeyleri düzeltir.
   Sayfa stillerinden SONRA yüklenmeli (</head> hemen öncesi).
   ============================================================ */

/* ── 1) YATAY KAYMA ──
   Telefonda en sinir bozucu hata: sayfa sağa sola kayar, içerik
   ekran dışında kalır. Tek bir taşan öğe bunu yapar. */
html, body{ max-width:100%; overflow-x:hidden; }
/* H24 (2026-10-13): overflow-x:hidden body'yi kaydırma kapsayıcısı yapar → position:sticky
   hiçbir sayfada yapışmıyordu. Masaüstünde (>900) clip: aynı kırpma, kaydırma kabı YOK.
   ≤900 (telefon/tablet) aynen hidden kalır.
   H34 (FX1): yükseklik <500 = yatay telefon (915x412, 932x430): orada da hidden kalır,
   menü yapışmaz (taban ile fark 0). */
@media (min-width:901px) and (min-height:500px){
  html, body{ overflow-x:clip; }
}

/* ── 2) GÖRSEL VE MEDYA TAŞMASI ──
   Genişliği yazılmış bir görsel dar ekranı zorlar. */
img, video, svg, iframe{ max-width:100%; height:auto; }
/* 3D canvas HARİÇ: onun boyunu three.js/CSS yönetir, height:auto sahneyi bozar */
canvas:not(#three-canvas){ max-width:100%; height:auto; }

/* ── 3) UZUN METİN TAŞMASI ──
   Uzun URL / ürün kodu satırı kırmadan taşar. */
body{ overflow-wrap:break-word; word-break:break-word; }

/* ── 4) KUTU MODELİ ──
   padding'li ve %100 genişlikli öğeler taşmasın. */
*, *::before, *::after{ box-sizing:border-box; }

/* ── 4.2) MARKA ADI HİÇBİR GENİŞLİKTE KIRILMAZ ──
   ÖLÇÜLDÜ @320px: `kurumsal.html` logosu "StickerLab." iki satıra
   kırılıyordu (170x88px); `studio_3d.html` üç satıra (56x104px).
   İkisi de daha önce "logo kırılması kapatıldı" denen turdan SONRA
   yaşıyordu — çünkü o düzeltme SAYFA İÇİ CSS'e yazılmıştı ve yalnız
   dokunulan sayfalara ulaşmıştı. `.logo{white-space:nowrap}` bugün
   11 sayfada YOK (ölçüldü).
   ⚠️ SINIF: bir düzeltme sayfa sayfa yazılıyorsa, "kapatıldı" demek
   yalnız dokunulan sayfalar için doğrudur. Kural, bütün sayfaların
   ortak olarak yüklediği YERE konur — burası orası.
   💡 Kırılmayı yasaklamak taşmayı doğurabilir; o daha iyidir çünkü
   taşma GÖRÜNÜR ve mobil düzen kapısı onu ölçer (`tasan-oge`),
   sessiz kırılma ise yalnız göze çarpar. */
.logo, .yl-logo{ white-space:nowrap; }

/* ── 4.5) ÜYELİK GİRİŞ DÜĞMESİ SABİT KONUM ÇAKIŞMASI (2026-09-04) ──
   Not: bu kural telefona özel DEĞİL, TÜM genişliklerde geçerli — dosya
   adı "mobil" olsa da 1-4 numaralı kurallar zaten universal, bu da öyle.
   uyelik-supabase.js kendi düğmesini position:fixed;top:12px;right:12px
   ile ekliyor (bkz. site/uyelik-supabase.js — bu dosyaya DOKUNULMADI,
   üyelik/giriş mantığı başka bir çalışmanın konusu; burada SADECE CSS
   ile konum override ediliyor). Bu köşe her sayfada zaten dolu:
     · index.html/urunler.html ≥841px: "Satıcı Ol" linkinin ÜSTÜNE biniyor
       (ölçüldü: 1280px'te %93 genişlik + %89 yükseklik örtüşme)
     · index.html tüm genişlikler: promo şeridi kapatma çarpısını (×)
       TAMAMEN örtüyor (ölçüldü: %100 örtüşme, 360px ve 768px)
     · kesfet/favoriler/urunler (mobil): favori/sepet ikonlarına biniyor
     · siparis/siparis_takip/studio_3d: geri dönüş düğmesine biniyor
   Çözüm: düğmeyi "Canlı Destek" balonunun (sağ-alt, destek.js) ayna
   simetriği olan SOL-ALT köşeye taşı — bu köşe 7 sayfanın hiçbirinde
   dolu değil, ek bir çakışma yaratmıyor. Yalnız top/right/bottom/left
   değişti; z-index ve diğer davranış AYNEN bırakıldı.

   🔴 2026-09-06 — BU YAKLAŞIM TERK EDİLDİ, kural DARALTILDI.
   Yukarıdaki çözüm hatayı çözmüyordu, TAŞIYORDU: düğme ekrana çivili
   kaldığı için her yeni sayfada yeni bir "boş köşe" aramak gerekiyordu
   ve boş sanılan köşe er geç doluyordu. Ölçüldü (432 nokta, 6 mobil
   genişlik): sol-alt köşede de örtüşme sürüyordu — sipariş takip
   noktaları %83, 3B stüdyo ışık ayarı %24, hoş geldin penceresinin
   kapat çarpısı yine %100.
   YENİ ÇÖZÜM: düğme artık ekrana DEĞİL, sayfanın kendi BAŞLIK satırına
   konuyor (`uyelik-supabase.js` → `dugmeKur()`; ikizi `uyelik.js` →
   `navKur()`). Akışta duran bir öge hiçbir şeyi örtemez.
   ⇒ Aşağıdaki konum kuralı artık YALNIZCA son çare için geçerli:
   başlıkta yuva bulunamayıp düğme `position:fixed`e düştüğünde.
   Seçici bu yüzden `[style*="fixed"]` ile daraltıldı — akıştaki düğmeye
   DOKUNMAZ. Arşiv E375. */
#uyGirisBtn[style*="fixed"]{
  top:auto !important;
  right:auto !important;
  bottom:16px !important;
  left:16px !important;
}

@media (max-width:768px){

  /* ── 5) iOS YAKINLAŞMA HATASI ──
     Safari, 16px'ten küçük yazılı bir alana dokunulduğunda
     sayfayı zorla yakınlaştırır ve düzen kayar. 16px bunu keser. */
  input, select, textarea{
    font-size:16px !important;
    max-width:100%;
  }

  /* ── 6) DOKUNMA HEDEFLERİ ──
     Parmak ucu ~44px. Daha küçük düğmeye isabet ettirmek zordur. */
  button, .btn, a.btn, input[type="submit"], input[type="button"]{
    min-height:44px;
  }

  /* ── 7) ÇOK SÜTUNLU IZGARALAR ──
     Dar ekranda 3-4 sütun okunmaz hale gelir. */
  .packs-grid{ grid-template-columns:1fr !important; }

  /* ── 8) TABLO TAŞMASI ──
     Tablolar sabit genişlikte kalır; kaydırılabilir yapıyoruz. */
  table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

@media (max-width:430px){
  /* ── 9) ÜRÜN IZGARASI ──
     minmax(240px) küçük telefonda tek sütuna düşer ve kartlar dev olur.
     Sticker görselleri için iki sütun daha iyi okunur.
     NOT: burada SADECE ürün ızgaraları var. Genel ".grid" sınıfı
     sipariş formunun yerleşimi — ona dokunulmaz, iki sütuna
     zorlanırsa form dar ekranda ezilir.
     🔴 DÜZELTME (2026-09-05, sistem sahibinin bildirdiği hata): bu kural
     ":not(.list-view)" OLMADAN önce urunler.html'in "≡ Liste" görünümünü
     de eziyordu — urunler.html kendi CSS'inde ".prod-grid.list-view{
     grid-template-columns:1fr}" diyor ama !important'ı yoktu, buradaki
     !important onu eziyor ve LİSTE modunda bile ızgara 2 sütuna
     zorlanıyordu. Sonuç ölçüldü: kart 2 sütuna sıkışınca ürün adı ve
     fiyat ("85₺") tek kelime/karaktere kadar YATAYDAN DİKEYE sarıyordu
     ("Kes/Bir/Rüz…", "85/₺" alt alta) — sistem sahibinin "ürünler vs
     yazıları dikey hizalı yatay değil" dediği tam olarak buydu (ekran
     görüntüsüyle doğrulandı, 375px). ":not(.list-view)" eklenince Liste
     modu kendi tek-sütun kuralını uygulayabiliyor; Grid modu (varsayılan)
     ve favoriler/paket ızgaraları eskisi gibi 2 sütun kalıyor. */
  .prod-grid:not(.list-view), .fav-grid, .packs-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  /* ── 10) DEV BAŞLIKLAR ──
     Bowlby One çok geniş; sabit büyük punto satırı taşırır. */
  h1{ font-size:clamp(24px,8vw,40px) !important; }
  h2{ font-size:clamp(20px,6.5vw,32px) !important; }
}

/* ============================================================
   BÜYÜK EKRAN (2026-10-13) — ortak sözleşme (Grup A)
   ------------------------------------------------------------
   Kapsam: 1024 px ve üstü HER masaüstü/dizüstü genişliği + kısa ekran.
   ≤768 (telefon/tablet) bu bölümden ETKİLENMEZ (her kural min-width ≥1024).
   Tanımsızlık = eski davranış: 1799 altında --be-kap / --be-olcek /
   --be-kart TANIMSIZDIR; sayfa kuralları yedek değeri (sayfanın ESKİ
   değeri) kullanır:  max-width: var(--be-kap, 1200px)
   Sitede rem YOK (H10): html font-size ÇARPANI YOK. Ölçek, sayfaların
   px değerlerini calc(<px> * var(--be-olcek,1)) ile yazmasıyla uygulanır.
   Burada yalnız mobil.css'in kendi/ortak hedefleri ölçeklenir.
   zoom ve transform:scale YASAK (H13).
   Kapsayıcı yalnız GENİŞLİĞE bağlı (H11), ölçek GENİŞLİK + YÜKSEKLİĞE.
   ============================================================ */

/* 1024+ : her masaüstü genişliğinde kullanılabilen akışkan yardımcılar */
@media (min-width:1024px){
  :root{
    /* kenar boşluğu: 1024'te 16px, 2560'ta 64px (akışkan) */
    --be-yan: clamp(16px, 2.5vw, 64px);
    /* akışkan kapsayıcı: kenar boşluğu bırakır, 1680'i aşmaz.
       Sayfa isterse: max-width: var(--be-kap-ak, <eski px>) */
    --be-kap-ak: min(100% - 2 * var(--be-yan), 1680px);
    /* kısa ekran çarpanı: dikey boşluk/hero için  calc(96px * var(--be-kisa,1)) */
    --be-kisa: 1;
  }
}
@media (min-width:1024px) and (max-height:800px){ :root{ --be-kisa: .8; } }
@media (min-width:1024px) and (max-height:680px){ :root{ --be-kisa: .65; } }

/* geniş ama kısa (2560x1080, 3440x1440 kısa): hero ekranı aşmasın.
   Kullanım: min-height: var(--be-hero-h, <eski değer>) */
@media (min-width:1800px) and (max-height:1200px){
  :root{ --be-hero-h: min(100svh, 880px); }
}

/* K1 — ≥1800 (1920x1080, 1920x1200). Kapsayıcı genişler; yazı DEĞİŞMEZ. */
@media (min-width:1800px){
  :root{
    /* AKIŞKAN, yalnız genişliğe bağlı: 1800'de 1680, 2560'ta 2240,
       3290+ta 2880 (hakem K1 1680 / K2 2240 / K3 2880 ile uyumlu).
       1799'daki sayfa eski değeri → 1800'de 1680: sıçrama sayfaya göre. */
    --be-kap: clamp(1680px, 87.5vw, 2880px);
    --be-olcek: 1;
    /* kart hedef genişliği: sayfa kendi eski min'i × ölçek yazar (H12);
       bu değişken yalnız "260px kart" ortak başlangıcıdır */
    --be-kart: calc(260px * var(--be-olcek));
  }
}

/* ÖLÇEK MERDİVENİ — genişlik VE yükseklik şartı (H11).
   Basamak aralığı küçük: iki komşu basamak arası ≤0.1 */
@media (min-width:2000px) and (min-height:1100px){ :root{ --be-olcek: 1.08; } }
@media (min-width:2150px) and (min-height:1150px){ :root{ --be-olcek: 1.14; } }
/* K2 — 2560x1440 */
@media (min-width:2300px) and (min-height:1200px){ :root{ --be-olcek: 1.2; } }
@media (min-width:2800px) and (min-height:1300px){ :root{ --be-olcek: 1.3; } }
/* K3 — 3440x1440 ultra geniş (1.5), 3840x2160 4K (1.75) */
@media (min-width:3000px) and (min-height:1350px){ :root{ --be-olcek: 1.5; } }
@media (min-width:3600px) and (min-height:1900px){ :root{ --be-olcek: 1.75; } }

/* Gövde yazısı: sitede hiçbir sayfa body font-size yazmıyor (16px miras).
   Çarpan tanımlıyken (≥1800) gövde 16*ölçek olur; em/inherit kullanan
   metinler büyür. px yazılı öğeler sayfa grubunca calc ile ölçeklenir. */
@media (min-width:1800px){
  body{ font-size: calc(16px * var(--be-olcek)); }
}

/* ── ORTAK ÖĞELER ──
   mobil.css'in hedefi: .logo (nowrap), #uyGirisBtn, input/button (≤768).
   Üst menü, duyuru şeridi, footer, ortak düğmeler SAYFA İÇİ <style>'da
   (bkz. 05-A-ORTAK.md listesi): sayfa grupları yapar.
   Aşağıda her sayfaya JS ile enjekte edilenler (destek.js, üyelik düğmesi).
   "html " öneki (0,1,1): JS'in sonradan eklediği <style> (0,1,0) kuralını ezer. */
@media (min-width:1800px){
  #uyGirisBtn[style*="fixed"]{
    bottom:calc(16px * var(--be-olcek)) !important;
    left:calc(16px * var(--be-olcek)) !important;
    font-size:calc(14px * var(--be-olcek));
  }
  /* KONUM (right/left/top/bottom), height, padding ve max-height BİLEREK YAZILMAZ:
     sayfalar balonu kendi köşesine koyuyor (studio_3d right:310px, custom_siparis/
     ders_sticker left, hesap/giydir bottom) ve bazıları ikon boyuna indiriyor
     (siparis/giydir 52x50). Burada yalnız YAZI ve panel genişliği ölçeklenir.
     Balon kutusunu büyütmek destek.js'in (Grup H) işi: kendi CSS'ini
     calc(54px * var(--be-olcek,1)) ile yazsın. 02b: konum ezmesi studio_3d'de
     balonu sağ paneli örttürüyordu. */
  html .dk-balon{
    font-size:calc(14px * var(--be-olcek));
    gap:calc(10px * var(--be-olcek));
  }
  html .dk-panel{
    width:calc(340px * var(--be-olcek));
    max-width:calc(100vw - 32px);
  }
  html .dk-panel .dk-bas b{ font-size:calc(15px * var(--be-olcek)); }
  html .dk-panel .dk-mesaj{ font-size:calc(13.5px * var(--be-olcek)); }
  html .dk-panel .dk-soru, html .dk-panel .dk-yaz input, html .dk-panel .dk-yaz button{ font-size:calc(13px * var(--be-olcek)); }
  html .dk-panel .dk-satir{ font-size:calc(12.5px * var(--be-olcek)); }
  html .dk-panel .dk-etiket, html .dk-panel .dk-alt, html .dk-panel .dk-bas small{ font-size:calc(11px * var(--be-olcek)); }
  html .dk-bosluk{ height:calc(88px * var(--be-olcek)); }
  /* üst menüdeki "Giriş" / hesap düğmesi (uyelik.js / uyelik-supabase.js enjekte eder).
     Kendi .nav-right .uy-btn kuralı olan sayfalar (0,2,0) font/padding'i ezer; yükseklik ve boşluk buradan. */
  html .uy-btn{
    height:calc(44px * var(--be-olcek));
    padding:0 calc(16px * var(--be-olcek));
    gap:calc(8px * var(--be-olcek));
    font-size:calc(13px * var(--be-olcek));
  }
}

/* KISA EKRAN (02b ortak desen): üst bant + menü + kat-linkler dikey boşluğu.
   Yalnız masaüstü (≥1024) ve kısa ekran (≤800 yükseklik); telefon/tablet etkilenmez.
   AKIŞKAN (H22): kademe yok. Yükseklik 800'de sayfaların ESKİ değeri (nav 16,
   duyuru 10, kat-linkler 13), 600'de en küçük (10/6/11); 800/801 sınırında
   sıçrama 0. Yalnız dikey padding; yatay yerleşim, yazı, renk aynı.
   Kat-linkler dokunma alanı en az 44 px kalır (min-height:44px; 14px yazı
   satır yüksekliği 17.5 + 2x11 = 39.5 → min-height tamamlar). */
@media (min-width:1024px) and (max-height:800px){
  html nav{ padding-top:clamp(10px, calc(10px + (100vh - 600px) * 0.03), 16px); padding-bottom:clamp(10px, calc(10px + (100vh - 600px) * 0.03), 16px); }
  html .promo-bar{ padding-top:clamp(6px, calc(6px + (100vh - 600px) * 0.02), 10px); padding-bottom:clamp(6px, calc(6px + (100vh - 600px) * 0.02), 10px); }
  html .kat-linkler a{ min-height:44px; padding-top:clamp(11px, calc(11px + (100vh - 600px) * 0.01), 13px); padding-bottom:clamp(11px, calc(11px + (100vh - 600px) * 0.01), 13px); }
}

/* DEN #11 (FX1, 2026-10-13): "html nav" (0,0,2) yalnız sınıfsız <nav>'a (index) uyar; .nav/nav.nav
   menüleri kendi sayfa kuralıyla korunuyor (ÖLÇÜLDÜ: 21 sayfa x 1280x600 / 1366x650, nav içi
   bağlantı+düğme hepsi ≥44 px). Açık kalan tek ortak öğe ÜST ŞERİT (Kampanyalar · Sipariş Takip ·
   Nasıl Kullanılır ...): index, custom_siparis, ders_sticker, kendin_tasarla'da bağlantı 18 px'ti.
   urunler/kesfet/kurumsal/giydir/hesap'ın kendi çözümüyle AYNI kalıp, tek yerde: dikey dolgu 0,
   bağlantı 44 px (şerit 32-40 → 46 px; ana düğme ilk ekranda kalıyor, 17-FX1.md). */
@media (min-width:1024px){
  html .ust-serit a{ display:inline-flex; align-items:center; min-height:44px; }
  /* H41: logo da dokunma hedefi (buyuk_ekran_kapisi B5). Yazı tipi inmeden 34-43 px ölçülüyordu
     (yasal sayfalar 43, hesap 36, index 39); yüklenince zaten 44-54. Yalnız alt sınır. */
  html a.logo{ min-height:44px; }
  /* H41: üst menü arama kutusu (.nav-ara; index, custom_siparis, ders_sticker, kendin_tasarla
     kardeş kopya) kutu + düğme 43 → 44 px. */
  html .nav-ara input, html .nav-ara button{ min-height:44px; }
  html .nav-ara button{ min-width:44px; }
}
@media (min-width:1024px) and (max-width:1799px){
  html .ust-serit{ padding-top:0; padding-bottom:0; align-items:center; }
}
@media (min-width:1800px){
  html .ust-serit a{ min-height:calc(44px * var(--be-olcek,1)); }
}

/* ── ODAK HALKASI (H36 / Ş38, FX1 2026-10-13) — TÜM GENİŞLİKLER ──
   Klavyeyle gezinen müşteri nerede olduğunu görsün: Chrome varsayılanı 1 px ve
   lime menü / koyu kahraman üstünde kayboluyordu; arama kutularında hiç yoktu.
   Renk: marka moru #6E2BFF (krem #FFF8E7 5.8:1, lime 5.2:1, mürekkep #1A1A1A 3.2:1,
   beyaz 6.1:1). 3 px + 2 px boşluk: halka öğenin dışında, zeminin üstünde.
   :focus-visible = yalnız klavye; fare/dokunmada çıkmaz. Yazı kutuları tarayıcıda
   tıklayınca da :focus-visible sayıldığından onlar yalnız "html.sl-klavye" iken
   (destek.js Tab'da ekler, fare/dokunmada kaldırır) halka alır; içe çizilir
   (outline-offset negatif) çünkü çoğu yuvarlak, overflow:hidden kutunun içinde.
   Odak yokken görünüm DEĞİŞMEZ (320/390/768 piksel farkı 0). */
:focus-visible:not(input):not(textarea):not(select),
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible,
input[type="button"]:focus-visible, input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible, input[type="range"]:focus-visible,
input[type="color"]:focus-visible, input[type="file"]:focus-visible{
  outline:3px solid #6E2BFF !important;
  outline-offset:2px !important;
}
/* Yatay kaydırmalı şeritler ve overflow:hidden kutular halkanın dışa taşan kısmını kesiyor
   (ÖLÇÜLDÜ FX1: kat-linkler, ürünler kategori şeridi, üst şerit, nav arama kutusu, hero
   penceresi). Bunların içinde halka içe çizilir: 3 px tam görünür, yerleşim değişmez. */
/* Tam genişlik odaklanabilir bölgeler (index kahraman kaydırıcısı section[tabindex]) gövdenin
   yan kırpmasına değiyor: onlarda da içe. */
:is(.kat-linkler, .kat-serit, .cat-scroll, .ust-serit, .nav-ara, .search-box, .hs-pencere) :focus-visible,
section[tabindex]:focus-visible{
  outline-offset:-3px !important;
}
html.sl-klavye input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
html.sl-klavye textarea:focus, html.sl-klavye select:focus{
  outline:3px solid #6E2BFF !important;
  outline-offset:-3px !important;
}

/* ── LOGO "Lab." ROZETİ (2026-10-24) ──
   Kullanıcı isteği: "Lab." çerçeveli bir kutuda dursun (ekran görüntüsündeki gibi), YAZI RENGİ
   DEĞİŞMESİN (pembe --hot). Pembe limon zeminde ~3:1 okunuyordu; bu yüzden kutu mürekkep
   (#1A1A1A, pembeyle ~5:1), kenarı Sticker'ın beyaz sticker konturuyla aynı, gölgesi limon.
   Tek yerde: bütün logolu sayfalar mobil.css yükler. Ölçüler em → her kırılımda logoyla ölçeklenir. */
html .logo > span{
  /* Orantı: kutu (dolgu + kenar + gölge) "Lab."ı Sticker'dan iri gösteriyordu → harf .8em,
     kutunun dış boyu Sticker harf boyuna eşit; dikeyde Sticker'ın ortasına oturur. */
  display:inline-block; position:relative; margin-left:.1em; padding:.06em .18em .1em;
  font-size:.8em; vertical-align:.12em;
  background:#1A1A1A; color:var(--hot,#FF3D5A);
  border:.09em solid var(--paper,#FFFDF5); border-radius:.3em;
  /* 2026-10-29 sahip: "Lab." kutusunun altındaki neon yeşil gölge kaldırıldı; yalnız koyu gölge kaldı */
  box-shadow:.12em .14em 0 .05em #1A1A1A;
  transform:rotate(2deg); text-shadow:none; line-height:1;
}