/* ============================================================
   MEYDAN KASA — ORTAK TASARIM
   ============================================================

   Dokuz sablonun her biri neredeyse AYNI ~90 satir CSS'i tasiyordu:
   ayni renk degiskenleri, ayni kart, ayni dugme, ayni ust serit. Kopya
   oldugu icin biri degistiginde otekilerin degisecegi garanti degildi ve
   bu depo o bedeli `malzeme_satirlarini_oku` ile bir kez odedi.

   Bu dosya `_kafa.html` uzerinden HER sayfaya giriyor ve sayfanin kendi
   <style> blogundan ONCE geliyor — yani dokunulmamis bir ekran kendi
   kurallarini yazmaya devam ediyor, hicbir sey sessizce degismiyor.

   TASARIM OLCUTU: bu uygulama tezgahta TABLETLE ve depoda TELEFONLA,
   cogu zaman elde bir seyle kullaniliyor. O yuzden:
     - dokunma alani en az 52px, birincil dugmeler 58px
     - govde yazisi 15px'ten kucuk olmaz, girdi yazisi 16px
       (iOS 16px'in altinda alani otomatik BUYUTUYOR ve duzen kayiyor)
     - ekranda ne yapilacagi tek bakista gorunmeli
   ============================================================ */

:root{
  --mor:#5B3FD6;
  --mor-koyu:#4A32B8;
  --mor-soluk:#EEEBFA;
  --zemin:#EFF1F4;
  --beyaz:#FFFFFF;
  --yazi:#1A1D23;
  --yazi-2:#6B7280;
  --cizgi:#E3E7EC;
  --yesil:#158A4A;
  --yesil-soluk:#DCFCE7;
  --kirmizi:#D64545;
  --kirmizi-soluk:#FEE7E7;
  --sari:#B7791F;
  --sari-soluk:#FEF3C7;
  --mavi-soluk:#EEF2FF;
  --mavi-koyu:#3730A3;

  --r:14px;          /* standart kose */
  --r-buyuk:20px;
  --golge:0 1px 2px rgba(20,25,35,.05), 0 4px 14px rgba(20,25,35,.06);
  --golge-kare:0 1px 3px rgba(20,25,35,.07), 0 6px 20px rgba(20,25,35,.08);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--zemin);
  color:var(--yazi);
  -webkit-font-smoothing:antialiased;
}

/* ---------- ust serit ---------- */
.k-ust{
  min-height:60px;background:var(--mor);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;position:sticky;top:0;z-index:30;
  padding-top:env(safe-area-inset-top);
}
.k-ust-sol{display:flex;align-items:center;gap:10px;min-width:0}
.k-ust b{font-size:17px;font-weight:700;white-space:nowrap;
         overflow:hidden;text-overflow:ellipsis}
.k-ust a{color:#fff;text-decoration:none;font-size:14px;opacity:.92;
         padding:10px 4px}
/* Logo mor serit uzerinde KENDI beyaz zemininde: markanin koyu gri
   govdesi seffaf bir kutuda mora karisip okunmuyordu. */
.k-logo{width:30px;height:30px;border-radius:8px;background:#fff;padding:2px;
        object-fit:contain;display:block;flex:none}

/* ---------- govde ---------- */
.k-govde{padding:16px;max-width:900px;margin:0 auto}
.k-govde.dar{max-width:640px}

.k-kart{background:var(--beyaz);border-radius:var(--r-buyuk);padding:18px;
        margin-bottom:14px;box-shadow:var(--golge)}
.k-kart h2{font-size:16px;font-weight:700;margin-bottom:12px;
           display:flex;align-items:center;gap:8px}

/* ---------- KARE IZGARA ----------
   Ana menu ve benzeri seciciler icin. `minmax(0, 1fr)` SART: uzun bir
   etiket 1fr'i tek basina genisletip izgarayi yatay kaydirir. */
.k-kareler{display:grid;gap:12px;
           grid-template-columns:repeat(2, minmax(0, 1fr))}
@media (min-width:620px){ .k-kareler{grid-template-columns:repeat(3, minmax(0,1fr))} }
@media (min-width:900px){ .k-kareler{grid-template-columns:repeat(4, minmax(0,1fr))} }

.k-kare{
  background:var(--beyaz);border-radius:var(--r-buyuk);
  padding:20px 14px 18px;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;min-height:132px;
  box-shadow:var(--golge-kare);border:1px solid transparent;
  transition:transform .08s ease, border-color .12s ease;
}
.k-kare:active{transform:scale(.97);border-color:var(--mor)}
/* `.k-kare .k-kare-im` — TEK sinif olarak yazilamaz. Simge de bir <span>
   ve asagidaki `.k-kare span` kurali (sinif+eleman) tek sinifli bir
   `.k-kare-im`i OZGULLUKTE YENIYOR: simgeler 26px yerine 11,5px
   basiliyordu, yani 52px'lik kutunun ortasinda minicik duruyorlardi.
   Kaynakta iki kural da dogru gorunuyordu; fark yalnizca hesaplanan
   bicemde gorunur, o yuzden tarayici testi bunu olcuyor. */
.k-kare .k-kare-im{width:52px;height:52px;border-radius:16px;display:grid;
           place-content:center;font-size:26px;background:var(--mor-soluk);
           flex:none;line-height:1}
.k-kare b{font-size:15px;font-weight:700;line-height:1.25}
.k-kare span{font-size:11.5px;color:var(--yazi-2);line-height:1.35}

/* Kare bir <a> ya da <button> olabiliyor: sayim ekraninda kapsam
   secicisi dugme, ana menude baglanti. Dugmenin tarayici varsayilanlari
   (yazi tipi, kenarlik, hizalama) sokuluyor. */
button.k-kare{width:100%;font-family:inherit;cursor:pointer;
              -webkit-appearance:none;appearance:none}

/* Kare rengi alanina gore: kasiyer ekrana bakmadan da yerini bulsun.
   Renk TEK BASINA anlam tasimiyor — her karede yazi da var. */
.k-kare.satis   .k-kare-im{background:var(--mor-soluk)}
.k-kare.depo    .k-kare-im{background:#E7F6EC}
.k-kare.katalog .k-kare-im{background:#FFF3E0}
.k-kare.rapor   .k-kare-im{background:#E8F1FE}

/* ---------- dugmeler ---------- */
.k-dugme{
  display:block;width:100%;min-height:56px;padding:16px;border:0;
  border-radius:var(--r);background:var(--mor);color:#fff;
  font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;
  margin-top:12px;line-height:1.2;
}
.k-dugme:active{background:var(--mor-koyu)}
.k-dugme.ikincil{background:var(--beyaz);color:var(--mor);
                 border:1.5px solid var(--mor)}
.k-dugme.yesil{background:var(--yesil)}
.k-dugme.kirmizi{background:var(--beyaz);color:var(--kirmizi);
                 border:1.5px solid var(--kirmizi)}
.k-dugme:disabled{opacity:.4;cursor:default}
.k-dugme.duz{background:none;border:0;color:var(--mor);font-size:14px;
             font-weight:600;min-height:44px;padding:10px 0;width:auto;
             text-align:left}

/* ---------- alanlar ---------- */
.k-etiket{display:block;font-size:12.5px;color:var(--yazi-2);
          margin:12px 0 6px;font-weight:700;letter-spacing:.01em}
.k-alan{
  width:100%;min-height:52px;padding:13px 14px;
  border:1.5px solid var(--cizgi);border-radius:var(--r);
  /* 16px SART: iOS daha kucuk yazili bir alana odaklaninca sayfayi
     otomatik buyutuyor ve duzen kayiyor. */
  font-size:16px;font-family:inherit;background:var(--beyaz);
  color:var(--yazi);outline:none;
}
.k-alan:focus{border-color:var(--mor);box-shadow:0 0 0 3px rgba(91,63,214,.12)}
.k-alan.buyuk{min-height:58px;font-size:18px;font-weight:600}

.k-satir{display:flex;gap:10px}
.k-satir>*{flex:1;min-width:0}

/* Ciplak <label> ve <input> icin AYNI gorunum — ama YALNIZCA `.k-govde`
   icinde. Kapsam sart: bu dosya her sayfaya giriyor ve kapsamsiz bir
   `input{...}` kurali henuz tasinmamis ekranlarin duzenini sessizce
   degistirirdi. `.k-govde` yalnizca tasinmis ekranlarda var. */
.k-govde label{display:block;font-size:12.5px;color:var(--yazi-2);
               margin:12px 0 6px;font-weight:700}
.k-govde input,
.k-govde select,
.k-govde textarea{
  width:100%;min-height:52px;padding:13px 14px;
  border:1.5px solid var(--cizgi);border-radius:var(--r);
  font-size:16px;font-family:inherit;background:var(--beyaz);
  color:var(--yazi);outline:none;
}
.k-govde input:focus,
.k-govde select:focus,
.k-govde textarea:focus{
  border-color:var(--mor);box-shadow:0 0 0 3px rgba(91,63,214,.12)}
/* Gizli alanlar ve dosya seciciler yukaridaki kutu bicimini ALMAMALI. */
.k-govde input[type=hidden],
.k-govde input[type=file]{min-height:0;padding:0;border:0;box-shadow:none}

/* ---------- seritler ---------- */
.k-serit{border-radius:var(--r);padding:13px 15px;font-size:13px;
         line-height:1.55;margin-bottom:12px}
.k-serit.bilgi{background:var(--mavi-soluk);color:var(--mavi-koyu)}
.k-serit.uyari{background:var(--sari-soluk);color:#92400E}
.k-serit.iyi{background:var(--yesil-soluk);color:var(--yesil)}

.k-rozet{display:inline-block;font-size:11.5px;font-weight:800;
         padding:4px 10px;border-radius:999px;background:#F1F3F5;
         color:var(--yazi-2);letter-spacing:.02em}
.k-rozet.acik{background:var(--yesil-soluk);color:var(--yesil)}
.k-rozet.uyari{background:var(--sari-soluk);color:var(--sari)}

/* ---------- listeler ---------- */
.k-bos{text-align:center;color:var(--yazi-2);font-size:14px;padding:26px 8px}

.k-sat{display:flex;align-items:center;gap:12px;padding:14px 0;
       border-bottom:1px solid var(--cizgi);cursor:pointer;
       /* Dokunma alani: satirin kendisi hedef, ic metin degil. */
       min-height:56px}
.k-sat:last-child{border-bottom:0}
.k-sat-ad{flex:1;min-width:0}
.k-sat-ad b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.k-sat-ad span{display:block;font-size:12.5px;color:var(--yazi-2);
               margin-top:2px;line-height:1.35}
.k-sat-sag{text-align:right;white-space:nowrap;font-size:15px;font-weight:700}

/* ---------- alt serit ---------- */
.k-alt{position:fixed;left:0;right:0;bottom:0;background:var(--beyaz);
       border-top:1px solid var(--cizgi);padding:12px 14px;
       padding-bottom:calc(12px + env(safe-area-inset-bottom));
       display:flex;gap:10px;align-items:center;z-index:25;
       box-shadow:0 -2px 12px rgba(20,25,35,.06)}
.k-alt .k-ozet{flex:1;font-size:13.5px;color:var(--yazi-2);font-weight:600}
.k-alt .k-dugme{margin:0;width:auto;padding:15px 22px;min-height:54px}