/* ==========================================================================
   FABA STONE ERP — TELEFON ARAYÜZÜ
   Masaüstü paletinden BAĞIMSIZ tasarım sistemi.

   Kurallar (saha koşullarından türetildi):
   · Birincil düğme 64px, ikincil 56px, tuş 72px — eldivenli parmak ~18mm
   · Tüm metin/zemin karşıtlığı en az 4.5:1 — açık depoda güneş altında okunur
   · Renk tek başına anlam taşımaz; her durumda ikon + yazı da vardır
   · Kaydırma/sürükleme/uzun basma ile ZORUNLU işlem yok
   · Eylemler ekranın altında (başparmak bölgesi), üst yarı salt bilgi
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent }

:root {
  --ink:      #0B1119;   /* koyu zemin, üst şerit, tuşlar */
  --ink-2:    #39434F;   /* ikincil metin — beyaz üstünde 9.6:1 */
  --ink-3:    #566270;   /* üçüncül metin — beyaz üstünde 6.2:1 */
  --line:     #D6D2CB;
  --line-2:   #EAE7E2;
  --zemin:    #F2F0ED;
  --kart:     #FFFFFF;

  --turuncu:   #8F5A12;  /* birincil düğme — beyaz yazı 6.1:1 */
  --turuncu-2: #703F06;  /* basılı hâli */
  --altin:     #C4A265;  /* koyu zemin üstünde marka vurgusu */
  --altin-s:   #FBF1DF;

  --yesil:   #1E6B47;  --yesil-s: #E2F1EA;   /* beyaz yazı 5.9:1 */
  --kirmizi: #A32B21;  --kirmizi-s: #FBE7E5; /* beyaz yazı 6.4:1 */
  --mavi:    #1D5686;  --mavi-s: #E5EFF7;    /* beyaz yazı 6.7:1 */
  --amber:   #8A5A00;  --amber-s: #FBF0DA;   /* beyaz yazı 5.8:1 */
  --mor:     #5B3A86;  --mor-s: #EEE8F6;

  --r: 14px; --r-sm: 10px;
  --golge: 0 1px 2px rgba(11,17,25,.07), 0 2px 8px rgba(11,17,25,.06);
  --golge-ust: 0 -3px 18px rgba(11,17,25,.14);

  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --mono: 'Consolas', 'SF Mono', 'Roboto Mono', monospace;

  --ust: 48px;                       /* durum şeridi */
  --alt: calc(72px + env(safe-area-inset-bottom));
}

/* GÜNEŞ MODU — açık depoda tek dokunuşla azami karşıtlık */
html[data-gunes="1"] {
  --ink-2: #14202C; --ink-3: #14202C; --line: #7A8593; --line-2: #B9C0C9;
  --zemin: #FFFFFF; --turuncu: #6E4408; --yesil: #125234; --kirmizi: #86201A;
  --mavi: #123F63; --amber: #6B4600;
}
html[data-gunes="1"] body { font-weight: 600 }

html, body { height: 100% }
body {
  font-family: var(--font); background: var(--zemin); color: var(--ink);
  font-size: 17px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  overscroll-behavior: none; user-select: none; -webkit-user-select: none;
  padding-bottom: env(safe-area-inset-bottom);
}
input, textarea { user-select: text; -webkit-user-select: text }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
.gizli { display: none !important }
.mono { font-family: var(--mono) }

/* ---------------- DURUM ŞERİDİ (yapışık) ---------------- */
.durum {
  height: var(--ust); background: var(--ink); color: #fff; display: flex; align-items: center;
  gap: 10px; padding: 0 14px; position: sticky; top: 0; z-index: 40;
  padding-top: env(safe-area-inset-top);
}
.durum .marka-dugme {
  display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 6px 8px;
  margin-left: -8px; border-radius: 10px; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.durum .marka-dugme:active { background: rgba(255,255,255,.14) }
.durum img { width: 24px; height: auto }
.durum .marka { font-size: 13px; letter-spacing: 1.5px; font-weight: 700 }
.durum .cip {
  margin-left: auto; height: 36px; display: flex; align-items: center; gap: 7px;
  padding: 0 12px; border-radius: 99px; background: rgba(255,255,255,.12); font-size: 13.5px;
}
.durum .cip i { width: 9px; height: 9px; border-radius: 50%; background: #34D07F; flex: none }
.durum .cip.bekliyor i { background: #F0A538 }
.durum .cip.kopuk i { background: #FF6B5E }

/* Uygulama indirme kartı (giriş ekranı) */
.apk-indir {
  display: flex; align-items: center; gap: 13px; margin-top: 22px; padding: 15px 16px;
  border: 2px solid rgba(255,255,255,.18); border-radius: 14px; background: rgba(255,255,255,.07);
  text-decoration: none; color: #fff; -webkit-tap-highlight-color: transparent;
}
.apk-indir:active { background: rgba(255,255,255,.14) }
.apk-indir.pasif { opacity: .75 }
.apk-indir .apk-ik { font-size: 26px; line-height: 1; flex: none }
.apk-indir .apk-yazi { flex: 1; min-width: 0 }
.apk-indir .apk-yazi b { display: block; font-size: 16.5px; font-weight: 700 }
.apk-indir .apk-yazi small { display: block; font-size: 13px; color: #A9BACD; margin-top: 3px; line-height: 1.35 }
.apk-indir .apk-ok { font-size: 22px; color: #C4A265; font-weight: 700; flex: none }
.apk-indir.pasif .apk-ok { display: none }

/* Aşağı çekip yenileme göstergesi */
.yenile-gostergesi {
  position: fixed; top: calc(var(--ust) + env(safe-area-inset-top)); left: 50%; z-index: 45;
  display: none; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 99px;
  background: var(--kart); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(11,17,25,.16);
  font-size: 14px; color: var(--ink-2); margin-left: -110px; opacity: .95;
}
.yenile-gostergesi.acik { display: flex }
.yenile-gostergesi.hazir { border-color: var(--turuncu); color: var(--turuncu) }
.yenile-gostergesi .donen {
  width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2);
  border-top-color: var(--turuncu); flex: none;
}
.yenile-gostergesi.calisiyor .donen { animation: donsun .7s linear infinite }
.yenile-gostergesi.calisiyor b::after { content: '…' }
@keyframes donsun { to { transform: rotate(360deg) } }

/* Alt sayfa tutamağı: dokunulabilir ve sürüklenebilir olduğu belli olsun */
.altsayfa .tutamak { cursor: grab; touch-action: none }

/* Fotoğraf şeridi (en fazla 5) */
.foto-serit { display: flex; gap: 10px; overflow-x: auto; padding: 2px 0 6px; -webkit-overflow-scrolling: touch }
.foto-kutu { position: relative; flex: none; width: 104px; height: 104px; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--line); background: var(--line-2) }
.foto-kutu img { width: 100%; height: 100%; object-fit: cover; display: block }
.foto-sil {
  position: absolute; top: 4px; right: 4px; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(11,17,25,.72); color: #fff; font-size: 15px; line-height: 1; border: 0;
  display: grid; place-items: center;
}
.foto-sil:active { background: var(--kirmizi) }

/* ---------------- SAYFA ---------------- */
.sayfa { min-height: 100dvh; display: flex; flex-direction: column; background: var(--zemin) }
.govde { flex: 1; padding: 0 16px calc(var(--alt) + 24px); overflow-x: hidden }
.govde.tam { padding-left: 0; padding-right: 0 }

/* Üst çubuk (alt sayfalar/sihirbaz) */
.ustcubuk {
  height: 56px; display: flex; align-items: center; background: var(--kart);
  border-bottom: 1px solid var(--line-2); position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top);
}
.ustcubuk .orta { flex: 1; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink-2) }
.ustcubuk button { width: 56px; height: 56px; display: grid; place-items: center; font-size: 15px; font-weight: 600 }
.ustcubuk .baslik { flex: 1; text-align: left; font-size: 18px; font-weight: 700; padding-left: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.ilerleme { height: 4px; background: var(--line-2) }
.ilerleme i { display: block; height: 100%; background: var(--turuncu); transition: width .25s }

/* ---------------- TİPOGRAFİ ---------------- */
.soru { font-size: 26px; font-weight: 700; line-height: 1.25; margin: 24px 0 18px }
.baslikcik { font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--ink-3);
  text-transform: uppercase; margin: 24px 0 8px }
.selam { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 }
.selam b { font-size: 17px; font-weight: 600 }
.selam span { font-size: 15px; color: var(--ink-3) }
.ipucu { font-size: 15px; color: var(--ink-3); margin-top: 10px }
.orta-yazi { text-align: center }

/* ---------------- DÜĞMELER ---------------- */
.dugme {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  height: 64px; border-radius: var(--r); background: var(--turuncu); color: #fff;
  font-size: 19px; font-weight: 700; letter-spacing: .2px; transition: transform .06s, background .15s;
}
.dugme:active { transform: scale(.985); background: var(--turuncu-2) }
.dugme[disabled] { background: var(--line); color: #fff; opacity: 1 }
.dugme.cerceve { background: var(--kart); color: var(--ink); border: 2px solid var(--line); height: 56px; font-size: 17px }
.dugme.cerceve:active { background: var(--line-2) }
.dugme.koyu { background: var(--ink) } .dugme.koyu:active { background: #1B2735 }
.dugme.yesil { background: var(--yesil) }
.dugme.kirmizi { background: var(--kirmizi) }
.dugme.kucuk { height: 56px; font-size: 17px }
.dugme-sira { display: flex; gap: 12px }
.dugme-sira .dugme { flex: 1 }

/* ---------------- KARTLAR ---------------- */
.kart {
  background: var(--kart); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; box-shadow: var(--golge);
}
.kart + .kart { margin-top: 12px }

/* İş kartı — panodaki bekleyen işler */
.is {
  display: flex; align-items: center; gap: 13px; min-height: 104px; background: var(--kart);
  border: 1px solid var(--line); border-radius: var(--r); padding: 14px 14px 14px 0;
  position: relative; overflow: hidden; margin-bottom: 12px; box-shadow: var(--golge);
  transition: transform .06s;
}
.is:active { transform: scale(.99) }
.is::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--ink-3) }
.is.acil::before { background: var(--kirmizi) }
.is.orta::before { background: var(--amber) }
.is.bilgi::before { background: var(--mavi) }
.is.iyi::before { background: var(--yesil) }
.is .ikon {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-size: 20px; flex: none; margin-left: 14px; background: var(--zemin);
}
.is .icerik { flex: 1; min-width: 0 }
.is .icerik b { display: block; font-size: 22px; font-weight: 700; line-height: 1.2 }
.is .icerik span { display: block; font-size: 16px; color: var(--ink-2); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.is .ok { font-size: 24px; color: var(--ink-3); flex: none }

/* Bugün şeridi / sayaç kutuları */
.sayaclar { display: flex; gap: 8px }
.sayac { flex: 1; height: 80px; background: var(--kart); border: 1px solid var(--line);
  border-radius: var(--r-sm); display: flex; flex-direction: column; align-items: center; justify-content: center }
.sayac b { font-size: 22px; font-weight: 700; line-height: 1.1 }
.sayac span { font-size: 13px; color: var(--ink-3); margin-top: 2px }

/* Plaka ızgarası */
.izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.plaka-h {
  height: 64px; background: var(--kart); border: 1px solid var(--line); border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;
}
.plaka-h:active { background: var(--line-2) }
.plaka-h b { font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: -.3px }
.plaka-h span { font-size: 13px; color: var(--ink-3); margin-top: 1px;
  max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.plaka-h i { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50% }
.nokta-tartim { background: var(--amber) } .nokta-kalite { background: var(--mavi) } .nokta-bunker { background: var(--mor) }

/* Seçim kartı (tedarikçi/hammadde/bunker) */
.sec {
  display: flex; align-items: center; gap: 12px; min-height: 64px; background: var(--kart);
  border: 2px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 10px;
}
.sec:active { background: var(--line-2) }
.sec.secili { border-color: var(--yesil); background: var(--yesil-s) }
.sec .ad { flex: 1; min-width: 0 }
.sec .ad b { display: block; font-size: 17px; font-weight: 600 }
.sec .ad span { display: block; font-size: 13.5px; color: var(--ink-3) }
.sec .tik { font-size: 22px; color: var(--yesil); flex: none }

/* Rozet */
.rozet { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 99px;
  font-size: 13.5px; font-weight: 700; white-space: nowrap }
.rozet.yesil { background: var(--yesil-s); color: var(--yesil) }
.rozet.kirmizi { background: var(--kirmizi-s); color: var(--kirmizi) }
.rozet.mavi { background: var(--mavi-s); color: var(--mavi) }
.rozet.amber { background: var(--amber-s); color: var(--amber) }
.rozet.mor { background: var(--mor-s); color: var(--mor) }
.rozet.gri { background: var(--line-2); color: var(--ink-2) }
.rozet.dolu { background: var(--turuncu); color: #fff }

/* Bilgi kutusu */
.kutu { border-radius: var(--r-sm); padding: 13px 15px; font-size: 16px; line-height: 1.5; border: 1px solid }
.kutu b { display: block; margin-bottom: 3px; font-size: 17px }
.kutu.bilgi { background: var(--mavi-s); border-color: #C6DBEC; color: #123F63 }
.kutu.uyari { background: var(--amber-s); border-color: #EBD8AE; color: #5E3D00 }
.kutu.hata { background: var(--kirmizi-s); border-color: #EFC7C3; color: #7A1F17 }
.kutu.iyi { background: var(--yesil-s); border-color: #C2E0D2; color: #125234 }

/* ---------------- ALT SEKME ÇUBUĞU ---------------- */
.sekmeler {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--alt); background: var(--kart);
  border-top: 1px solid var(--line); display: flex; z-index: 45;
  padding-bottom: env(safe-area-inset-bottom); box-shadow: var(--golge-ust);
}
.sekmeler a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3); font-size: 11.5px; font-weight: 600; text-decoration: none; min-width: 0; padding-top: 6px;
}
.sekmeler a i { font-style: normal; font-size: 22px; line-height: 1; opacity: .55 }
.sekmeler a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100% }
.sekmeler a.aktif { color: var(--turuncu) }
.sekmeler a.aktif i { opacity: 1 }
.sekmeler a.okut i { font-size: 26px }
.sekmeler a.okut.aktif { color: var(--turuncu) }

/* ---------------- TUŞ TAKIMI ---------------- */
.tuslar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.tuslar.harf { grid-template-columns: repeat(5, 1fr); gap: 8px }
.tus {
  height: 72px; border-radius: var(--r-sm); background: var(--ink); color: #fff;
  font-size: 30px; font-weight: 600; display: grid; place-items: center; transition: transform .06s, opacity .06s;
}
.tuslar.harf .tus { height: 56px; font-size: 24px }
.tus:active { transform: scale(.96); opacity: .82 }
.tus.gri { background: var(--ink-3) }

.kahraman { text-align: center; padding: 20px 0 4px }
.kahraman .deger { font-size: 56px; font-weight: 800; letter-spacing: -2px; line-height: 1 }
.kahraman .deger small { font-size: 24px; font-weight: 600; letter-spacing: 0; margin-left: 6px }
.kahraman .ikincil { font-size: 20px; color: var(--ink-2); margin-top: 6px; font-family: var(--mono) }
.kahraman .hesap { font-size: 20px; font-weight: 600; margin-top: 12px }
.serit-uyari { margin: 14px -16px 0; padding: 12px 16px; color: #fff; font-size: 17px; font-weight: 600 }
.serit-uyari.kirmizi { background: var(--kirmizi) }
.serit-uyari.amber { background: var(--amber) }

/* Plaka önizleme */
.plaka-onizleme { text-align: center; font-family: var(--mono); font-size: 34px; font-weight: 700;
  letter-spacing: 2px; padding: 14px 0 6px }
.plaka-onizleme .bos { color: var(--line) }
.plaka-onizleme .aktif { border-bottom: 3px solid var(--turuncu); padding-bottom: 2px }

/* ---------------- TAM EKRAN GERİ BİLDİRİM ---------------- */
.tamekran {
  position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 28px; text-align: center; color: #fff;
  animation: ac .16s ease-out;
}
@keyframes ac { from { opacity: 0 } }
.tamekran.iyi { background: var(--yesil) }
.tamekran.hata { background: var(--kirmizi) }
.tamekran .buyuk-ikon { font-size: 64px; line-height: 1; margin-bottom: 16px }
.tamekran h2 { font-size: 26px; font-weight: 700; letter-spacing: .5px }
.tamekran p { font-size: 20px; margin-top: 10px; line-height: 1.45 }
.tamekran p.alt { font-size: 17px; opacity: .9; margin-top: 6px }
.tamekran .dugmeler { position: absolute; left: 20px; right: 20px; bottom: calc(24px + env(safe-area-inset-bottom)); display: grid; gap: 12px }
.tamekran .dugme { background: #fff; color: var(--ink) }
.tamekran .dugme.cerceve { background: transparent; color: #fff; border-color: rgba(255,255,255,.65) }

/* Flaş */
.flas { position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .55; animation: sondur .18s ease-out forwards }
.flas.yesil { background: #34D07F } .flas.kirmizi { background: #FF5A4D } .flas.sari { background: #FFC53D }
@keyframes sondur { to { opacity: 0 } }

/* ---------------- TARAYICI ---------------- */
.tarayici { position: fixed; inset: 0; background: #000; z-index: 60; overflow: hidden }
.tarayici video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.tarayici .ust {
  position: absolute; top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center;
  background: rgba(11,17,25,.72); color: #fff; padding-top: env(safe-area-inset-top);
}
.tarayici .ust button { width: 56px; height: 56px; display: grid; place-items: center; font-size: 20px; color: #fff }
.tarayici .ust .baslik { flex: 1; text-align: center; font-size: 17px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px }
.tarayici .ust button.acik { color: #FFD466 }
/* Çerçeve ve ipucu yazısı tek kolonda: yazı her ekranda çerçevenin ALTINDA
   kalır. Alan üstte başlık çubuğunun, altta bilgi panelinin arasına sıkışır;
   çerçeve dar/kısa ekranlarda küçülerek taşmayı önler. */
.nisan-alan {
  position: absolute; top: 64px; left: 0; right: 0; bottom: 190px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; pointer-events: none;
}
.nisan { position: relative; flex: none;
  /* 38vh sınırı yalnız kısa ekranlarda devreye girer: orada ipucu yazısı iki
     satıra düştüğü için çerçeve küçülmezse kolon üst çubuğun altına taşıyordu. */
  width: min(260px, 68vw, 38vh); height: min(260px, 68vw, 38vh);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,.35) }
.nisan i { position: absolute; width: 34px; height: 34px; border: 4px solid #fff }
.nisan i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0 }
.nisan i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0 }
.nisan i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0 }
.nisan i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0 }
.nisan-yazi { flex: none; max-width: 88%; text-align: center;
  color: #fff; font-size: 17px; line-height: 1.35; text-shadow: 0 1px 4px #000 }
/* Çok kısa ekranlarda alt panel için ayrılan pay daraltılır; panel zaten
   ~110px ve bu ekranlarda çerçeveye yer bırakmak daha önemli. */
@media (max-height: 600px) {
  .nisan-alan { bottom: 150px; gap: 12px }
  .nisan-yazi { font-size: 15.5px }
}
.tarayici .panel {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(11,17,25,.94) 55%, rgba(11,17,25,0)); color: #fff;
}
.tarayici .sayac-satir { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px }
.tarayici .sayac-satir b { font-size: 30px; font-weight: 800 }
.tarayici .son { min-height: 40px; display: flex; align-items: center; gap: 10px; font-size: 16px; padding: 4px 0 }
.tarayici .son .ik { font-size: 18px; flex: none }
.tarayici .hata-kart { background: var(--kirmizi); border-radius: var(--r-sm); padding: 12px 14px;
  font-size: 17px; font-weight: 600; margin-bottom: 10px; line-height: 1.4 }
.tarayici .dugmeler { display: flex; gap: 12px; margin-top: 6px }

/* ---------------- ALT SAYFA ---------------- */
.altsayfa-zemin { position: fixed; inset: 0; background: rgba(11,17,25,.55); z-index: 70; display: flex; align-items: flex-end }
.altsayfa {
  width: 100%; background: var(--kart); border-radius: 20px 20px 0 0; padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto; animation: kalk .2s ease-out;
}
@keyframes kalk { from { transform: translateY(22px) } }
.altsayfa .tutamak { width: 44px; height: 5px; border-radius: 99px; background: var(--line); margin: 6px auto 14px }
.altsayfa h3 { font-size: 21px; font-weight: 700; margin-bottom: 12px }

/* ---------------- DEPO GÖZ IZGARASI ---------------- */
.goz-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.goz {
  min-height: 64px; border-radius: var(--r-sm); border: 2px solid var(--line);
  background: var(--kart); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; color: var(--ink); padding: 6px 4px;
}
.goz b { font-size: 18px; font-weight: 700; line-height: 1 }
.goz span { font-size: 12.5px; color: var(--ink-3) }
.goz:active { transform: scale(.97) }
.goz.bos   { background: var(--kart) }
.goz.kismi { background: #F6E7CB; border-color: #E0C48C }
.goz.dolu  { background: var(--turuncu); border-color: var(--turuncu); color: #fff }
.goz.dolu span { color: rgba(255,255,255,.85) }
.goz.rez   { background: #D6E4F0; border-color: #A9C6E0 }
.goz-anahtar { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 13.5px; color: var(--ink-3) }
.goz-anahtar i { display: inline-block; width: 14px; height: 14px; border-radius: 4px;
  border: 2px solid var(--line); margin-right: 6px; vertical-align: -2px }
.goz-anahtar i.kismi { background: #F6E7CB; border-color: #E0C48C }
.goz-anahtar i.dolu  { background: var(--turuncu); border-color: var(--turuncu) }
.goz-anahtar i.rez   { background: #D6E4F0; border-color: #A9C6E0 }

/* Göz içinde palet seçme listesi */
.secim-kutu { border: 2px solid var(--line); border-radius: var(--r-sm); max-height: 46dvh; overflow-y: auto }
.secim-satir { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line-2) }
.secim-satir:last-child { border-bottom: none }
.secim-satir input { width: 26px; height: 26px; flex: none; accent-color: var(--turuncu) }
.secim-satir b { display: block; font-size: 17px }
.secim-satir small { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.secim-satir:has(input:disabled) { opacity: .45 }

.ucler { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px }
.ikiler { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px }

/* ---------------- FORM ---------------- */
.alan { display: block; margin-bottom: 16px }
.alan > span { display: block; font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; letter-spacing: .3px }
.alan input, .alan select, .alan textarea {
  width: 100%; height: 56px; padding: 0 14px; font-size: 18px; border: 2px solid var(--line);
  border-radius: var(--r-sm); background: var(--kart); color: var(--ink); outline: none;
}
.alan textarea { height: auto; min-height: 88px; padding: 12px 14px }
.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--turuncu) }

/* ---------------- DURUMLAR ---------------- */
.yukleniyor { padding: 60px 20px; text-align: center; color: var(--ink-3); font-size: 16px }
.donen { width: 30px; height: 30px; border: 3px solid var(--line); border-top-color: var(--turuncu);
  border-radius: 50%; animation: don .7s linear infinite; margin: 0 auto 14px }
@keyframes don { to { transform: rotate(360deg) } }
.bos-durum { padding: 48px 24px; text-align: center; color: var(--ink-3) }
.bos-durum .ik { font-size: 46px; display: block; margin-bottom: 12px; opacity: .4 }
.bos-durum b { display: block; font-size: 19px; color: var(--ink); margin-bottom: 6px }
.bos-durum p { font-size: 15.5px; line-height: 1.5 }

/* Bildirim (toast) — üstte, sekme çubuğunu kapatmaz */
.bildirimler { position: fixed; left: 12px; right: 12px; top: calc(var(--ust) + 10px + env(safe-area-inset-top));
  z-index: 88; display: grid; gap: 8px }
.bildirim { background: var(--ink); color: #fff; border-radius: var(--r-sm); padding: 13px 15px;
  font-size: 16px; line-height: 1.4; box-shadow: var(--golge); animation: kalk .18s ease-out }
.bildirim.iyi { background: var(--yesil) } .bildirim.hata { background: var(--kirmizi) } .bildirim.uyari { background: var(--amber) }

/* Giriş ekranı */
.giris { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  padding: 32px 22px calc(32px + env(safe-area-inset-bottom)); background: linear-gradient(160deg,#0A1119,#1B2E45 60%,#28425F) }
.giris img { width: 130px; margin: 0 auto 26px; display: block }
.giris h1 { color: #fff; font-size: 25px; font-weight: 800; text-align: center; letter-spacing: -.4px }
.giris p { color: #A9BACD; text-align: center; font-size: 16px; margin: 8px 0 28px }
.giris .alan > span { color: #C6D3E1 }
.giris .alan input { background: rgba(255,255,255,.96); border-color: transparent }