/* ═══════════════════════════════════════════════════════════
   TASARIM BELİRTEÇLERİ — 2026 YÖN ÇALIŞMASI

   Renkler Claude Design'daki dokuz sayfalık yön çalışmasından
   SAYILARAK alındı. Dokuz dosyada geçen altmışa yakın altılık kod
   sayıldı; en çok kullanılan on dördü belirteç oldu, gerisi tek
   kullanımlık sapmaydı ve buraya girmedi:

     #1E3A49  392 kez  başlık mürekkebi
     #0E7C78  299      turkuaz üstü yazı
     #E8F7F6  287      turkuaz zemin
     #7B8B9A  276      soluk yazı
     #12B8B2  248      birincil turkuaz
     #F5F9FB  200      yüzey
     #E4EBF0  185      çizgi
     #5A6B7B  174      ikincil yazı
     #168FD3  117      mavi
     #031122   99      en koyu mürekkep
     #DCE5EC   92      koyu çizgi
     #F27A1A   80      FİYAT turuncusu
     #41556A   75      açıklama yazısı
     #B3421A   68      turuncu üstü yazı

   ═══ İKİ GRİ, TEK SEBEP: OKUNABİLİRLİK ═══
   Tasarım küçük yazıların çoğunda #7B8B9A kullanıyor. ÖLÇÜLDÜ
   (WCAG 4,5 ister):
     #7B8B9A / beyaz  → 3,51  metin için YETERSİZ
     #5A6B7B / beyaz  → 5,49  iyi
     #41556A / beyaz  → 7,79  iyi
     #1E3A49 / beyaz  → 11,3  iyi

   Bu yüzden ikiye ayrıldı: gövde ve meta yazıları `--muted`
   (#5A6B7B) ile yazılıyor, `--soluk` (#7B8B9A) yalnız süs
   öğelerinde ve büyük puntoda kalıyor. Tasarımın rengi korunuyor,
   okunan metin okunur kalıyor.

   ═══ ESKİ ADLAR KORUNDU ═══
   `--turkuaz`, `--orange`, `--ink` adları 300'den fazla kuralda
   geçiyor. Ad değiştirmek o kuralların hepsine dokunmak demekti;
   DEĞER değişti, ad kaldı — palet tek yerden döndü.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* Marka: turkuazdan maviye geçen degrade. */
  --marka:#12B8B2;--marka-acik:#168FD3;
  --mavi:#168FD3;--mavi-koyu:#155E85;--mavi-acik:#E3F1FB;
  /* Mürekkep: gövde en koyu, başlık bir ton açık — tasarımda
     başlıklar #1E3A49, gövde #031122. */
  --ink:#031122;--baslik:#1E3A49;
  --muted:#5A6B7B;--soluk:#7B8B9A;--aciklama:#41556A;
  /* FİYAT turuncusu. Yalnız fiyat ve tek birincil eylem için;
     üçüncü bir yerde kullanılırsa vurgu olmaktan çıkar. */
  --orange:#F27A1A;--orange-koyu:#B3421A;--orange-acik:#FDF1EA;--orange-soft:#F5A623;
  /* ═══ TURUNCU YAZI VE DOLGU AYRI ═══
     ÖLÇÜLDÜ: #F27A1A beyaz üstünde 2,77 kontrast veriyor —
     büyük yazı eşiği olan 3,0'ın bile altında. Fiyat yazısı ve
     beyaz yazılı turuncu düğme okunmuyordu.
     #B3421A ise 5,66 veriyor. Turuncu kimliği duruyor: çerçeve,
     simge ve zemin lekesi parlak tonu kullanmaya devam ediyor;
     YAZI ve beyaz yazı taşıyan DOLGU koyu tonu kullanıyor. */
  --vurgu-yazi:#B3421A;--vurgu-dolgu:#B3421A;
  --turkuaz:#12B8B2;--turkuaz-dolgu:#0E7C78;--turkuaz-koyu:#0E7C78;
  /* ═══ BEYAZ YAZI TAŞIYAN MARKA DOLGUSU ═══
     TARAYICIDA ÖLÇÜLDÜ (22 Ağustos): açık turkuaz üstünde beyaz
     yazı 2,46 kontrast veriyor — WCAG 4,5 istiyor. Düğmelerin,
     şeritlerin ve kahraman slaytının yazısı okunmuyordu.
     Aynı turkuaz→mavi kimliği, koyu uçlarla: 5,03 ve 7,07.
     Açık turkuaz kalıyor — ama yalnız ZEMİN olarak, yazı
     taşımadığı yerlerde. */
  --dolgu-marka:linear-gradient(135deg,var(--turkuaz-dolgu),var(--mavi-koyu));
  --turkuaz-acik:#E8F7F6;--turkuaz-cizgi:#C9EBE9;
  --line:#E4EBF0;--line-koyu:#DCE5EC;
  --zemin:#EEF2F5;--yuzey:#F5F9FB;--yuzey-2:#F3F7F9;
  --hero:#F5F9FB;
  --shadow:0 24px 60px rgba(3,17,34,.14);
  --golge-kart:0 1px 2px rgba(3,17,34,.05),0 6px 18px rgba(3,17,34,.06);
  /* Köşe yarıçapları: tasarımda kart 18, kutu 14, çip 999. */
  --r-kart:18px;--r-kutu:14px;--r-kucuk:12px;
  /* Dokunma hedefi: tasarımda en küçük düğme 38x38, satır 42-48. */
  --dokunma:42px;
  /*
   * ALT GEZİNME YÜKSEKLİĞİ — ÜÇ YER BUNU BİLMEK ZORUNDA
   *   `.alt-gezinme`  kendi yüksekliği
   *   `.ytg-cubuk`    Sidera çubuğu gezinmenin ÜSTÜNDE duruyor
   *   `body`          alt dolgusu; son içerik ikisinin altında kalmasın
   * Üç yere ayrı ayrı sayı yazmak, birini değiştirip ötekileri
   * unutmak demekti; çubuk gezinmenin altına düşer ve tıklanamazdı.
   */
  --alt-gezinme:62px;
  --yazi-baslik:Outfit,"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --yazi-govde:"Plus Jakarta Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ═══ KUTU MODELİ — HER SAYFADA ═══
   `giris.html` bu sıfırlamayı hiç almıyordu (`styles.css` yüklemiyor)
   ve TARAYICIDA ÖLÇÜLDÜ: giriş kutusu 412 pikselde 422 piksel
   genişliğe çıkıyor, sayfa 8 piksel yatay kayıyordu. Sebep tek:
   `width:100%` + dolgu + kenarlık, `content-box` modelinde toplanıyor.

   Sıfırlama belirteç dosyasına alındı çünkü BU dosyayı her sayfa
   yüklüyor — sayfa başına tekrar yazmak, bir sonraki yeni sayfada
   yine unutmak demekti. */
*{box-sizing:border-box}

/*
 * ═══ HİÇBİR GÖRSEL SAYFAYI GENİŞLETEMEZ ═══
 *
 * SUÇÜSTÜ YAKALANDI (Playwright, 320 px, soğuk önbellekle 10 turun
 * 2'sinde): eSIM hero'su kendi doğal genişliğiyle yerleşiyordu —
 *
 *   ŞİŞEN MAIN.esim-sayfa      iç:1536 dış:304
 *   TAŞAN PICTURE.esim-hero-gorsel  sağ:1544
 *
 * Görselin kendi kuralı (`width:100%`) `styles.css`te vardı ama
 * yerleşim o kural uygulanmadan önceki anda ölçülüyordu; sayfa o
 * karede 1536 piksel genişliğindeydi.
 *
 * Kural buraya konuyor çünkü `belirtecler.css` ON ALTI SAYFANIN
 * HEPSİ tarafından yükleniyor — tek görsel bile sayfayı yatay
 * kaydırılabilir yapamasın. `box-sizing` sıfırlamasıyla aynı
 * gerekçe: taban güvence, bileşen kuralı değil.
 *
 * Daha dar kural yazan yerler etkilenmiyor: `max-width` yalnız
 * TAVAN koyuyor, genişlik veren kuralları ezmiyor.
 */
img,picture,video,canvas,svg{max-width:100%}