/* ÜRETİLMİŞ DOSYA — ELLE DÜZENLEME.
   Kaynak: kimlik/mandalin.json · Üretici: bin/sablon-uret.py */

/* ═══ Mandalin ARAYÜZ katmanı ══════════════════════════════════════════════
   BODTO panellerinin ekran bileşenleri. MOBİL ÖNCE: sahadaki ekip bunu
   telefondan, tek elle, güneş altında kullanıyor. Üç kural pazarlık dışı:
     1. Her dokunulabilir öğe en az 44×44 (--dokunma).
     2. Durum rengi TEK BAŞINA bilgi taşımaz — yanında metin ya da simge olur
        (kırmızı-yeşil ayırt edemeyen kullanıcı ekibin içinde vardır).
     3. Üst çubuk hiçbir ekranda kaybolmaz; kullanıcı kim olduğunu ve nerede
        olduğunu her an görür.
   Şablon: sablon-arayuz.html */

/* Bu katmanın yerleşim ölçüleri — kaynağı bin/sablon-uret.py:YERLESIM.
   Çekirdekte DEĞİL: marka değil, bu yüzeyin ölçüsü. */
:root{--ust-boy:56px;--alt-boy:calc(57px + env(safe-area-inset-bottom,0px))}

html,body{margin:0;height:100%;overscroll-behavior:none}
body{background:var(--kagit, #fcfaf7);color:var(--murekkep, #141210);
  font:15px/1.5 var(--sans, "IBM Plex Sans",-apple-system, system-ui, sans-serif);-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding:var(--ust-boy) 0 calc(var(--alt-boy) + 4px)}
button,select,input,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif, "IBM Plex Serif",Georgia, serif);font-weight:600;letter-spacing:-.015em;margin:0}
.mut{color:var(--mut, rgba(20,18,16,.62))} .kucuk{font-size:12px} .mono{font-family:var(--mono, IBM Plex Mono,ui-monospace, SFMono-Regular, Menlo, monospace)}

/* ── üst çubuk ───────────────────────────────────────────────────────────── */
.ust{position:fixed;top:0;left:0;right:0;height:var(--ust-boy);z-index:90;
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px;
  background:rgba(252,250,247,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--cizgi, rgba(20,18,16,.10))}
.ust-sol{display:flex;align-items:center;gap:8px;min-width:0}
.ust-sol .mk{width:26px;flex:0 0 auto;color:var(--mandalin, #cf640a)}
.ust-sol strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ust-sag{display:flex;align-items:center;gap:8px}

/* ── alt gezinme ─────────────────────────────────────────────────────────── */
.alt-gez{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;
  background:rgba(252,250,247,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--cizgi, rgba(20,18,16,.10));padding-bottom:env(safe-area-inset-bottom,0px)}
.alt-gez button{flex:1;background:none;border:0;color:var(--mut, rgba(20,18,16,.62));padding:8px 2px 9px;
  font-size:10.5px;display:flex;flex-direction:column;align-items:center;gap:3px;
  min-height:56px}
.alt-gez button[aria-current="page"]{color:var(--mandalin-koyu, #a04c06);font-weight:600}
.alt-gez i{font-style:normal;font-size:19px;line-height:1}

/* ── yerleşim ────────────────────────────────────────────────────────────── */
.sayfa{padding:14px;max-width:720px;margin:0 auto}
.baslik-sat{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin:2px 0 12px}
.baslik-sat h1{font-size:22px}

/* ── kart ve liste ───────────────────────────────────────────────────────── */
.uk{background:var(--kart, #ffffff);border:1px solid var(--cizgi, rgba(20,18,16,.10));border-radius:var(--r, 14px);
  box-shadow:var(--gol, 0 1px 2px rgba(20,18,16,.05), 0 6px 20px rgba(20,18,16,.06));margin-bottom:12px;overflow:hidden}
.uk-ic{padding:14px 16px}
.uk-bas{padding:12px 16px;border-bottom:1px solid var(--cizgi, rgba(20,18,16,.10));background:var(--kart2, #f6f3ed);
  font:600 11.5px/1.3 var(--sans, "IBM Plex Sans",-apple-system, system-ui, sans-serif);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mut2, rgba(20,18,16,.44))}
.liste{list-style:none;margin:0;padding:0}
.liste li{border-bottom:1px solid var(--cizgi, rgba(20,18,16,.10))}
.liste li:last-child{border-bottom:0}
/* Satırın TAMAMI dokunma hedefidir — telefonda küçük bir oka nişan alınmaz. */
.satir{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;
  text-align:left;padding:12px 16px;min-height:var(--dokunma, 44px);color:inherit}
.satir:active{background:var(--mandalin-yumusak, #fdf0e0)}
.satir .ad{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.satir .oz{font-size:12.5px;color:var(--mut, rgba(20,18,16,.62));overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.satir .gov{min-width:0;flex:1}
.satir .son{flex:0 0 auto;color:var(--mut2, rgba(20,18,16,.44));font-size:12px}

/* ── düğme ───────────────────────────────────────────────────────────────── */
.dg{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--dokunma, 44px);padding:0 18px;border-radius:var(--r-kucuk, 10px);
  border:1px solid transparent;font-weight:600;font-size:15px;cursor:pointer}
.dg-1{background:var(--mandalin, #cf640a);color:var(--kagit, #fcfaf7)}
.dg-1:active{background:var(--mandalin-koyu, #a04c06)}
.dg-2{background:var(--kart, #ffffff);border-color:var(--cizgi2, rgba(20,18,16,.18));color:var(--murekkep, #141210)}
.dg-3{background:none;color:var(--mandalin-koyu, #a04c06);padding:0 10px}
.dg-teh{background:var(--kart, #ffffff);border-color:rgba(177,64,58,.4);color:var(--kotu, #b1403a)}
.dg[disabled]{opacity:.45;cursor:not-allowed}
.dg-sat{display:flex;gap:10px;flex-wrap:wrap}
.dg-tam{width:100%}

/* ── form ────────────────────────────────────────────────────────────────── */
.alan{display:block;margin-bottom:14px}
.alan > span{display:block;font-size:12.5px;font-weight:600;color:var(--mut, rgba(20,18,16,.62));
  margin-bottom:5px}
.alan input,.alan select,.alan textarea{width:100%;min-height:var(--dokunma, 44px);
  padding:10px 12px;border:1px solid var(--cizgi2, rgba(20,18,16,.18));border-radius:var(--r-kucuk, 10px);
  background:var(--kart, #ffffff);color:var(--murekkep, #141210)}
/* 16px altı punto iOS'ta alana girince sayfayı ZORLA yakınlaştırır. */
.alan input,.alan textarea{font-size:16px}
.alan textarea{min-height:96px;resize:vertical;line-height:1.5}
.alan .ipucu{display:block;font-size:12px;color:var(--mut2, rgba(20,18,16,.44));margin-top:5px}
.alan.hata input,.alan.hata select,.alan.hata textarea{border-color:var(--kotu, #b1403a)}
.alan.hata .ipucu{color:var(--kotu, #b1403a)}

/* ── segment / sekme ─────────────────────────────────────────────────────── */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;
  background:var(--kart2, #f6f3ed);border-radius:var(--r-kucuk, 10px);padding:4px;margin-bottom:14px}
.seg button{min-height:var(--dokunma, 44px);border:0;border-radius:var(--r-kucuk, 10px);background:none;
  color:var(--mut, rgba(20,18,16,.62));font-size:13.5px;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--kart, #ffffff);color:var(--mandalin-koyu, #a04c06);
  box-shadow:0 1px 2px rgba(20,18,16,.08)}

/* ── rozet ve durum ──────────────────────────────────────────────────────── */
.rz-d{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-hap, 99px);
  font-size:12px;font-weight:600;background:var(--kart2, #f6f3ed);color:var(--mut, rgba(20,18,16,.62));white-space:nowrap}
.rz-d.ok{background:var(--iyi-yumusak, #eaf5ee);color:var(--iyi, #2f7d4f)}
.rz-d.uy{background:var(--uyari-yumusak, #f7f1de);color:var(--uyari, #856817)}
.rz-d.ko{background:var(--kotu-yumusak, #fbeeec);color:var(--kotu, #b1403a)}
.rz-d.mn{background:var(--mandalin-yumusak, #fdf0e0);color:var(--mandalin-koyu, #a04c06)}
.rz-d::before{content:attr(data-im);font-size:11px}   /* renk tek başına yetmez */

/* ── boş / yükleniyor / hata ─────────────────────────────────────────────── */
.bos{text-align:center;padding:38px 20px;color:var(--mut, rgba(20,18,16,.62))}
.bos .im{font-size:34px;opacity:.5;margin-bottom:10px}
.bos h3{font-size:17px;margin-bottom:6px;color:var(--murekkep, #141210)}
.bos p{font-size:13.5px;margin:0 0 14px}
/* Yükleniyor iskeleti DÜZ ZEMİN: önceki sürüm yumuşak bir gradyan
   parıltısıydı ve içinde kaçak bir hex taşıyordu. Marka şeridi sert
   duraklı bir imzadır; dekoratif geçiş marka dili değil. */
.iskelet{background:var(--kart2, #f6f3ed);
  background-size:200% 100%;animation:kay var(--dur-dongu, 1200ms) infinite;border-radius:var(--r-kod, 4px);height:13px;
  margin:9px 0}
@keyframes kay{to{background-position:-200% 0}}

/* ── çevrimdışı / uyarı şeridi ───────────────────────────────────────────── */
.serit-uyari{display:flex;align-items:center;gap:8px;padding:9px 14px;font-size:13px;
  background:var(--uyari-yumusak, #f7f1de);color:var(--uyari, #856817);border-bottom:1px solid var(--cizgi, rgba(20,18,16,.10))}
.serit-uyari.ko{background:var(--kotu-yumusak, #fbeeec);color:var(--kotu, #b1403a)}

/* ── katman (modal / tam sayfa) ──────────────────────────────────────────── */
.katman{position:fixed;inset:0;z-index:100;background:rgba(20,18,16,.42);
  display:flex;align-items:flex-end;justify-content:center}
@media(min-width:640px){.katman{align-items:center}}
.katman-ic{background:var(--kagit, #fcfaf7);width:100%;max-width:520px;max-height:88vh;
  overflow:auto;border-radius:var(--r-cerceve, 18px) var(--r-cerceve, 18px) 0 0;padding:18px 18px
  calc(18px + env(safe-area-inset-bottom,0px))}
@media(min-width:640px){.katman-ic{border-radius:var(--r-cerceve, 18px)}}
.katman-bas{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:12px}
.katman-bas h2{font-size:19px}

/* ── bildirim ────────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--alt-boy) + 14px);z-index:120;
  background:var(--murekkep, #141210);color:var(--kagit, #fcfaf7);padding:11px 16px;
  border-radius:var(--r-hap, 99px);
  font-size:13.5px;box-shadow:0 6px 24px rgba(20,18,16,.28);max-width:92vw}
.toast.ok{background:var(--iyi, #2f7d4f)} .toast.ko{background:var(--kotu, #b1403a)}

/* ── tablo (masaüstü panel) ──────────────────────────────────────────────── */
.tablo-sar{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--cizgi, rgba(20,18,16,.10));
  border-radius:var(--r, 14px);background:var(--kart, #ffffff);margin-bottom:12px}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:420px}
th{text-align:left;font:600 11.5px/1.3 var(--sans, "IBM Plex Sans",-apple-system, system-ui, sans-serif);letter-spacing:.09em;
  text-transform:uppercase;color:var(--mut2, rgba(20,18,16,.44));padding:11px 13px;background:var(--kart2, #f6f3ed);
  border-bottom:1px solid var(--cizgi2, rgba(20,18,16,.18));white-space:nowrap}
td{padding:11px 13px;border-bottom:1px solid var(--cizgi, rgba(20,18,16,.10));vertical-align:top}
tr:last-child td{border-bottom:0}

/* ── grup rengi ──────────────────────────────────────────────────────────── */
/* On bir meslek grubunun rengi kimlikten gelir; ekranlar kendi rengini
   TÜRETMEZ. .grup-07 gibi bir sınıf yeter. Renkler bin/logo-muhur.py
   KOMITE'sinden üretilir — Bodrum temalı palet onay beklediği için burada
   BUGÜNKÜ palet duruyor. */
.grup-01{--grup:#3f5a26}   /* Tarım */
.grup-02{--grup:#cf640a}   /* İnşaat İmalatı */
.grup-03{--grup:#5a341a}   /* Dayanıklı Tüketim */
.grup-04{--grup:#2e9cb4}   /* Seyahat Acentaları */
.grup-05{--grup:#c04f77}   /* Konaklama */
.grup-06{--grup:#93302a}   /* Restoran */
.grup-07{--grup:#6b4f96}   /* Tekstil */
.grup-08{--grup:#6b8291}   /* Finans */
.grup-09{--grup:#17456b}   /* Yat İmalat */
.grup-10{--grup:#2e7d5f}   /* Hizmetler */
.grup-11{--grup:#a5851f}   /* İnşaat Tedarik */
[class*="grup-"] .cip-g{display:inline-block;width:10px;height:10px;border-radius:var(--r-cizgi, 2px);
  background:var(--grup);vertical-align:-1px;margin-right:6px}