/* =====================================================================
   ŞAKALAK — ORTAK TASARIM TEMELİ
   ---------------------------------------------------------------------
   Bu dosyayı ÜÇ yüzey de çeker ve KENDİ stylesheet'inden ÖNCE yükler:
     site/makinesiparis/      (makine sipariş / konfigüratör)
     site/yedekparca/         (dijital yedek parça kataloğu)
     site/sakalakbayiportal/  (bayi portalı)

   Buradaki her şey ORTAK olduğu için tektir: renkler, kırılım noktaları,
   dokunma hedefi, odak halkası, yazdırma davranışı. Bir yüzeye özgü bir
   şey buraya YAZILMAZ — o, yüzeyin kendi dosyasında kalır ve gerekirse
   buradaki değeri ezer (bu dosya önce yüklendiği için ezme serbesttir).

   NEDEN VAR: Eylül 2026'da üç yüzeyde üç ayrı marka kırmızısı (#e2231a,
   #e20a17, #d71920), iki ayrı kırılım noktası merdiveni ve iki ayrı koyu
   tema yöntemi olduğu tespit edildi. Tek kaynak olmadan tekrar ıraksarlar.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. RENK TOKEN'LARI — AÇIK TEMA
   Kural: bileşenler DAİMA token kullanır, sabit renk yazmaz. Sabit renk
   yazılan her yer, koyu temada elde düzeltilmesi gereken bir borçtur.
   --------------------------------------------------------------------- */
:root{
  /* Marka */
  --red:#e2231a;            /* ← MARKA KIRMIZISI: tek kaynak burasıdır.
                                 Zemin/dolgu için budur: düğme, rozet, logo. */
  --red-text:#d72119;       /* KÜÇÜK KIRMIZI YAZI için. Neden ayrı: #e2231a
                                 açık kâğıt zeminde (#f6f7f4) 4.35 kontrast
                                 veriyor, WCAG sınırı 4.5. Gözle ayırt
                                 edilmiyor ama küçük kırmızı bağlantı/uyarı
                                 metni parlak ekranda ve projeksiyonda
                                 kayboluyordu. 4.74 ile rahat geçer. */
  --red-dark:#b81a13;       /* hover */
  --red-darker:#9e150f;     /* active */
  --on-red:#ffffff;         /* kırmızı zemin üzerindeki yazı */

  /* Koyu marka bandı (yedek parça hero'su, portal üst şeridi) */
  --deep:#0d1930;
  --deep-2:#142442;
  --deep-3:#24314a;
  --on-deep:#ffffff;
  --on-deep-soft:#d7dfeb;
  --on-deep-muted:#8fa0b5;
  --red-on-deep:#ff5b50;    /* Lacivert/koyu bant ÜZERİNDEKİ kırmızı. Marka
                                 kırmızısı #e2231a lacivert zeminde 3.74
                                 kontrast veriyor — okunmuyor. Açık kırmızı
                                 5.73 ile geçiyor ve aynı renk ailesinde
                                 kalıyor. (Burada eskiden sarı bir --accent
                                 vardı; markada sarı yok, kaldırıldı.) */

  /* Metin */
  --ink:#15181b;
  --ink-soft:#3c4349;
  --muted:#666e75;          /* Eskiden #6d757c idi; kirik-beyaz zeminlerde
                                 (#f5f7fa, #eef2f7) 4.16-4.36 kontrast veriyor,
                                 WCAG siniri 4.5. Gozle fark edilmeyecek kadar
                                 koyulastirildi, artik her acik zeminde gecer. */

  /* Yüzeyler */
  --paper:#f6f7f4;          /* sayfa zemini */
  --surface:#ffffff;        /* kart, panel */
  --surface-soft:#f5f7fa;   /* ikincil kart, tablo başlığı */
  --surface-alt:#eef2f7;    /* seçili satır, vurgulu kutu */
  --panel:#14171a;          /* koyu panel (fiyat paneli vb.) */
  --tint-soft:#fff5f4;      /* çok açık kırmızı zemin (uyarı şeridi) */

  /* Çizgiler */
  --line:#e4e6e3;
  --line-soft:#f0f1ee;
  --line-strong:#cbd5e1;

  /* Durumlar */
  /* --ok / --warn / --danger  = YAZI ve ince çizgi için güvenli koyu ton.
     --*-solid                   = DOLGU için canlı ton (düğme, rozet, şerit).
     Bu ayrım şart: makine sipariş bunları yazı rengi olarak, yedek parça
     dolgu olarak kullanıyordu; tek değere indirilince biri okunmaz oluyor. */
  --ok:#2c6b4e;      --ok-solid:#18804f;   --ok-ink:#166534;  --ok-bg:#eafff2;  --ok-line:#bbf7d0;  --on-ok:#ffffff;
  --warn:#8a6410;    --warn-solid:#d97706; --warn-ink:#b45309;--warn-bg:#fdf4dd;--warn-line:#f3d78f;--on-warn:#241a02;
  --danger:#b81a13;  --danger-solid:#d92d20;--danger-ink:#b91c1c;--danger-bg:#fff1f2;--danger-line:#fecaca;
  --info:#245edb;    --info-ink:#1d4ed8;--info-bg:#eff6ff; --info-line:#bfdbfe;

  /* Ölçüler */
  --radius:12px;
  --radius-sm:8px;
  --radius-lg:16px;
  --radius-pill:999px;
  --shadow:0 1px 2px rgba(20,23,26,.05), 0 10px 30px -20px rgba(20,23,26,.35);
  --shadow-lg:0 12px 35px rgba(15,23,42,.08);

  /* Dokunma hedefi — Not: 44px, iOS ve Android insan arayüzü kılavuzlarının
     ortak alt sınırı. Tıklanabilir HER şey bunu sağlamalı. */
  /* Renkli kategori kartlarinin uzerine cekilen siyah perde. Kart zemini
     kategori rengi, yazi beyaz; ham renkte beyaz yazi 1.92-4.22 kontrast
     veriyordu (ozellikle yesil ve sari). Perde rengin kimligini korur,
     kontrasti garantiler. */
  --kart-perde:0.42;

  --tap:44px;
  --tap-sm:38px;            /* yalnız yoğun tablo içi ikincil eylemler */

  --font:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --header-h:62px;
  --context-h:34px;

  color-scheme:light;
}

/* ---------------------------------------------------------------------
   2. RENK TOKEN'LARI — KOYU TEMA
   Tercih localStorage'da "sakalak_theme" anahtarında; üç yüzey aynı
   anahtarı paylaşır, bir yerde değiştirilince hepsi koyu açılır.
   <html data-theme="dark"> ile devreye girer.

   ÖNEMLİ: Yalnız TOKEN yeniden tanımlanır. Bileşen kuralları burada
   YAZILMAZ. Sayfayı filter:invert(1) ile ters çevirmek YASAK — yedek
   parça sitesi eskiden öyle yapıyordu, teknik resimler ve marka kırmızısı
   bozuluyordu.
   --------------------------------------------------------------------- */
:root[data-theme="dark"]{
  --red:#ff5b50;
  --red-text:#ff8078;       /* koyu zeminde küçük kırmızı yazı */
  --red-dark:#ff7c72;
  --red-darker:#ff9c94;
  --on-red:#1a0f0e;

  --deep:#0b0d0e;
  --deep-2:#14171a;
  --deep-3:#1f242a;
  --on-deep:#eef0f2;
  --on-deep-soft:#c7ccd1;
  --on-deep-muted:#9198a0;
  --red-on-deep:#ff5b50;

  --ink:#eef0f2;
  --ink-soft:#c7ccd1;
  --muted:#9198a0;

  --paper:#101214;
  --surface:#1a1d20;
  --surface-soft:#202327;
  --surface-alt:#262a2f;
  --panel:#0b0d0e;
  --tint-soft:#3a1f1c;

  --line:#2f343a;
  --line-soft:#22262b;
  --line-strong:#3d444c;

  --ok:#4ade80;      --ok-solid:#2f9e63;   --ok-ink:#6ee7a0;  --ok-bg:#12281d;  --ok-line:#1f4433;  --on-ok:#08170f;
  --warn:#f0b429;    --warn-solid:#c8860f; --warn-ink:#f4c65b;--warn-bg:#3a2f10;--warn-line:#5a4a1c;--on-warn:#241a02;
  --danger:#ff7c72;  --danger-solid:#c9372c;--danger-ink:#ff9c94;--danger-bg:#3a1f1c;--danger-line:#5c2f2a;
  --info:#7aa2f7;    --info-ink:#9cb8fa;--info-bg:#182338; --info-line:#2b3a5c;

  --kart-perde:0.52;

  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -20px rgba(0,0,0,.7);
  --shadow-lg:0 12px 35px rgba(0,0,0,.45);

  color-scheme:dark;
}

/* ---------------------------------------------------------------------
   3. KIRILIM NOKTASI MERDİVENİ
   CSS media query'de değişken kullanılamadığı için değerler elle yazılır;
   ÜÇ yüzey de AŞAĞIDAKİ BEŞ SAYIYI kullanır, başka sayı eklenmez:

     1700px  geniş masaüstü → normal masaüstü
             (üst menü kendi satırına iner)
     1280px  masaüstü → sıkışık masaüstü / tablet yatay
             (menü kaydırmalı olur, ikincil rozetler gizlenir,
              yarım ekran kullanılan pencere de buraya düşer)
      860px  tablet → telefon yatay
             (paneller alt alta, sekmeli tek panel düzeni)
      700px  telefon yatay → telefon dikey
             (başlık iki sütuna iner, düğmeler tam genişlik)
      560px  küçük telefon
             (ızgaralar tek sütun, yazı ölçeği küçülür)

   Eski değerler (1450 / 1180 / 1050 / 1000 / 800 / 430) KULLANILMAZ.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   4. TEMEL SIFIRLAMA VE TİPOGRAFİ
   --------------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{max-width:100%}

/* Form alanları tema değişkenlerini miras alır — yüzeyler kendi
   kurallarıyla bunu daha yüksek özgüllükle ezebilir. */
input,select,textarea{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--line);
}

/* ---------------------------------------------------------------------
   5. ODAK HALKASI
   Klavyeyle gezen kullanıcı nerede olduğunu görmeli. Fare tıklamasında
   görünmez (:focus-visible), klavyede görünür.
   --------------------------------------------------------------------- */
:focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
  border-radius:4px;
}
/* Kırmızı zeminli düğmelerde kırmızı halka görünmez — içeri beyaz halka. */
.btn-primary:focus-visible,
.back-button:focus-visible,
[data-variant="primary"]:focus-visible{
  outline:2px solid #ffffff;
  outline-offset:-4px;
  box-shadow:0 0 0 3px rgba(226,35,26,.55);
}

/* ---------------------------------------------------------------------
   6. DOKUNMA HEDEFİ
   Telefonda ve tablette tıklanabilir her şey en az 44px. Masaüstünde
   fare hassas olduğu için zorlamıyoruz; kural işaretçi kaba olduğunda
   (parmak) devreye girer.
   --------------------------------------------------------------------- */
@media (pointer:coarse){
  /* NOT: liste once yalnizca .nav-link / .btn gibi sinif adlarini
     kapsiyordu; yedek parcanin menusu duz "nav a" oldugu icin 40px'te
     kaliyordu. Tema dugmesi 38px, cip 43px idi. Olculerek genisletildi. */
  /* Seciciler ":root " ile baslar cunku bu dosya yuzeylerin kendi
     stylesheet'lerinden ONCE yukleniyor; esit ozgullukte sonraki kural
     kazanirdi. ":root .nav a" (0,2,1) yuzeydeki ".nav a" (0,1,1)
     kuralini gecer. Olculdu: yedek parcanin menusu boyle ezilip 40px'te
     kaliyordu. */
  :root button, :root .btn, :root [role="button"], :root .nav-link,
  :root .pill, :root .chip, :root .theme-toggle, :root nav a,
  :root a.cart-link, :root a.btn,
  :root input[type="submit"], :root input[type="button"]{
    min-height:var(--tap);
  }
  /* Blok olmayan baglantilarda min-height tek basina ise yaramaz. */
  :root nav a, :root a.cart-link, :root a.btn{
    display:inline-flex;
    align-items:center;
  }
  /* Yoğun tablo satırlarındaki ikincil eylemler biraz daha küçük olabilir,
     ama 38px'in altına inmez. */
  :root td button, :root td .btn, :root .table-action{ min-height:var(--tap-sm); }
}

/* ---------------------------------------------------------------------
   7. iOS OTOMATİK YAKINLAŞTIRMA
   Safari, yazı tipi 16px'in altındaki bir alana odaklanınca sayfayı
   kendiliğinden yakınlaştırır ve düzen bozulur. Telefon boyutunda tüm
   metin girişleri 16px olur.
   --------------------------------------------------------------------- */
/* DIKKAT: "screen" sart. Kural yalnizca iOS Safari'nin otomatik
   yakinlastirmasini engellemek icin var; kagitla ilgisi yok. Basta
   medya turu yazilmamisti ve A4 genisligi (~794px) 860'in altinda
   kaldigi icin YAZDIRMADA da uygulaniyordu: teklif ciktisinda
   "Hazirlayan" alanindaki e-posta 16px basilip 220px'lik sutuna
   sigmiyor, "...@gmail.co" diye kesiliyordu. */
@media screen and (max-width:860px){
  input, select, textarea{ font-size:16px; }
}

/* ---------------------------------------------------------------------
   8. HAREKET AZALTMA
   Kullanıcı işletim sisteminde animasyonları kapattıysa saygı gösterilir.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* ---------------------------------------------------------------------
   9. YAZDIRMA
   Koyu tema açıkken çıktı beyaz kâğıda açık renk yazı basıyordu. Yazdırma
   sırasında HER ZAMAN açık tema değerlerine dönülür; ekran etkilenmez.
   Yüzeyler kendi dosyalarında hangi bölümlerin gizleneceğini ekler.
   --------------------------------------------------------------------- */
@media print{
  :root, :root[data-theme="dark"]{
    --red:#e2231a; --red-text:#b81a13; --red-dark:#b81a13; --on-red:#ffffff;
    --deep:#0d1930; --deep-2:#142442; --on-deep:#ffffff;
    --on-deep-soft:#3c4349; --on-deep-muted:#6d757c; --red-on-deep:#b81a13;
    --ink:#15181b; --ink-soft:#3c4349; --muted:#666e75;
    --paper:#ffffff; --surface:#ffffff; --surface-soft:#ffffff;
    --surface-alt:#ffffff; --panel:#14171a;
    --line:#c9ccc7; --line-soft:#e4e6e3; --line-strong:#9aa0a6;
    --ok:#2c6b4e; --ok-solid:#18804f; --ok-ink:#166534; --ok-bg:#ffffff; --ok-line:#c9ccc7; --on-ok:#ffffff;
    --warn:#8a6410; --warn-solid:#d97706; --warn-ink:#b45309; --warn-bg:#ffffff; --warn-line:#c9ccc7; --on-warn:#241a02;
    --danger:#b81a13; --danger-solid:#d92d20; --danger-ink:#b91c1c; --danger-bg:#ffffff; --danger-line:#c9ccc7;
    --info:#245edb; --info-ink:#1d4ed8; --info-bg:#ffffff; --info-line:#c9ccc7;
    --shadow:none; --shadow-lg:none;
    color-scheme:light;
  }
  body{background:#fff;color:var(--ink)}
  /* Girdiler kagitta icerigine gore olculsun; sabit genislikte uzun
     degerler (e-posta, unvan) kesiliyordu. field-sizing desteklemeyen
     tarayicida en azindan yazi tasmasin diye kucultme payi birakildi. */
  input, select, textarea{ field-sizing:content; min-width:0; max-width:100%; }
  .no-print{display:none!important}
  .print-only{display:inline}
  td.print-only{display:table-cell}
  a[href]::after{content:""}   /* bağlantı adreslerini çıktıya basma */
}

/* ---------------------------------------------------------------------
   10. ORTAK BİLEŞEN TEMELLERİ
   Yüzeyler bunları kullanır ya da kendi sınıflarını buna benzetir.
   --------------------------------------------------------------------- */

/* Geri dönüş düğmesi — kırmızı zemin, beyaz yazı. Renkler BİLEREK sabit:
   koyu temada da, ters çevrilmiş görünümde de aynı kalmalı (kullanıcı
   bildirimi: "renkleri ters çevirdiğimizde de bozulmasın"). */
.back-button{
  display:inline-flex; align-items:center; gap:6px;
  background:#e2231a; color:#ffffff; border:1px solid #e2231a;
  border-radius:var(--radius-pill);
  padding:9px 16px; min-height:var(--tap);
  font-size:13.5px; font-weight:600; cursor:pointer;
  text-decoration:none; white-space:nowrap;
}
.back-button:hover{background:#b81a13;border-color:#b81a13;color:#fff}
.back-button:active{background:#9e150f;border-color:#9e150f}

/* Kaydırılabilir yatay menü — dar ekranda linkler alt alta yığılıp
   içeriğe taşmak yerine yana kayar. Kaydırma çubuğu gizlenir.

   KAYDIRMA İPUCU: çubuk kayabildiğinde kenarda bir gölge belirir, sona
   gelince kaybolur. Saf CSS: "local" katmanlar içerikle birlikte kayıp
   uçlardaki gölgeyi örter, "scroll" katmanları sabit durur. Böylece
   JavaScript'siz olarak yalnızca GERÇEKTEN kayabilen menüde ipucu çıkar.
   Kullanıcı bildirimi: 768px'te "Dokümanlar" kesiliyor ama kaydırılabildiği
   anlaşılmıyordu. */
.nav-scroll{
  display:flex; gap:4px; min-width:0;
  flex-wrap:nowrap; overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  background:
    linear-gradient(90deg, var(--surface) 40%, rgba(0,0,0,0)) left center / 26px 100% no-repeat local,
    linear-gradient(90deg, rgba(0,0,0,0), var(--surface) 60%) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) left center / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.16), rgba(0,0,0,0)) right center / 11px 100% no-repeat scroll;
}
.nav-scroll::-webkit-scrollbar{display:none}
.nav-scroll > *{flex:0 0 auto; white-space:nowrap}
:root[data-theme="dark"] .nav-scroll{
  background:
    linear-gradient(90deg, var(--surface) 40%, rgba(0,0,0,0)) left center / 26px 100% no-repeat local,
    linear-gradient(90deg, rgba(0,0,0,0), var(--surface) 60%) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.5), rgba(0,0,0,0)) left center / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), rgba(0,0,0,0)) right center / 11px 100% no-repeat scroll;
}

/* Ekran okuyucuya görünür, gözle görünmez */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Sayfa altı imza — tüm Şakalak alt siteleri ortak */
.site-signature{
  text-align:center;
  padding:10px 16px 12px;
  font-size:10.5px;
  color:var(--muted);
  opacity:.6;
  letter-spacing:.01em;
}
.site-signature strong{font-weight:600}