/* Kart Tamir Servis Takip — bento arayüz */
:root {
  --zemin: #EDF1F0;
  --kart: #FFFFFF;
  --kart-2: #F6F8F8;
  --kart-3: #EEF2F1;
  --cizgi: #E1E7E6;
  --metin: #111827;
  --ikincil: #5F6877;
  --soluk: #6B7584;
  --etiket: #2E3746;
  --yer-tutucu: #A3ABB7;
  --cizgi-g: #D3DBD9;
  --marka: #0E7A6B;
  --marka-koyu: #0A6155;
  --marka-derin: #0B4F46;
  --marka-acik: #E8F5F2;
  --mavi: #2563EB; --mavi-acik: #EAF1FF;
  --mor: #5B3FD0; --mor-acik: #F0ECFF;
  --turuncu: #EA580C; --turuncu-acik: #FFF1E7;
  --kirmizi: #DC2626; --kirmizi-acik: #FDECEC;
  --yesil: #0E7A6B; --yesil-acik: #E8F5F2;
  --gri: #64748B; --gri-acik: #F1F4F8;
  --pembe: #DB2777; --pembe-acik: #FDEBF4;
  --golge: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 28px -14px rgba(16, 24, 40, .16);
  --golge-b: 0 24px 60px -20px rgba(6, 40, 35, .35);
  --r: 20px;
  --r-s: 12px;
  --yan-g: 268px;
  --yan-ust: 15px; /* yan menünün üst kenarı sayfa başlığının harf üst çizgisiyle aynı hizada (ölçüldü: 31 px) */
  color-scheme: light;
}
[data-tema="koyu"] {
  --zemin: #0A100F;
  --kart: #111A19;
  --kart-2: #152120;
  --kart-3: #1A2726;
  --cizgi: #22312F;
  --metin: #E8EFED;
  --ikincil: #A2B2AE;
  --soluk: #82938F;
  --etiket: #D2DEDB;
  --yer-tutucu: #5E6E6A;
  --cizgi-g: #2E403D;
  --marka: #14A08C;
  --marka-koyu: #3CC3AE;
  --marka-acik: rgba(20, 160, 140, .14);
  --mavi: #6EA0FF; --mavi-acik: rgba(59, 130, 246, .15);
  --mor: #A993FF; --mor-acik: rgba(124, 92, 255, .16);
  --turuncu: #FF9A5C; --turuncu-acik: rgba(234, 88, 12, .16);
  --kirmizi: #FF7A7A; --kirmizi-acik: rgba(220, 38, 38, .16);
  --yesil: #3CC3AE; --yesil-acik: rgba(20, 160, 140, .14);
  --gri: #9AA8B8; --gri-acik: rgba(148, 163, 184, .12);
  --pembe: #FF7AB6; --pembe-acik: rgba(219, 39, 119, .16);
  --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--zemin);
  color: var(--metin);
  font-size: 14.5px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  transition: background .3s;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
svg.lucide { width: 18px; height: 18px; flex-shrink: 0; }
.say { font-variant-numeric: tabular-nums; }

/* ---------- iskelet ---------- */
.uygulama { display: grid; grid-template-columns: var(--yan-g) minmax(0, 1fr); gap: 16px; padding: 16px; min-height: 100vh; }
.yan {
  position: sticky; top: calc(16px + var(--yan-ust)); margin-top: var(--yan-ust); height: calc(100vh - 32px - var(--yan-ust));
  background: radial-gradient(120% 60% at 0% 0%, #13705F 0%, transparent 60%), linear-gradient(170deg, #0B4F46 0%, #073D36 55%, #052E29 100%);
  border-radius: 24px; color: #fff; padding: 18px 14px 14px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--golge-b);
}
.yan::after { content: ''; position: absolute; inset: auto -40% -30% -40%; height: 60%; background: radial-gradient(closest-side, rgba(60, 195, 174, .22), transparent); pointer-events: none; }
/* marka (1 Eki): Gilbarco halka ikonu (beyaz) + "Fix360" — Gilbarco360 kenar çubuğundaki dille aynı; "360" nane yeşili */
/* Logo kiti (1 Eki, Abdullah: "yazıyı logoya yakınlaştıralım, bir kit hâlinde olsun"): simge + yazı tek parça; bütün ölçüler simge
   boyundan (--boy). Yazı ×0,66 · aralık ×0,16 → görünen boşluk (PNG'nin saydam kenarı ve F'nin yan boşluğu dahil) büyük harf
   yüksekliğinin yarısı: 38 px'te 9 px (önce 14 px, ölçüldü). Dikey: halkanın merkezi büyük harflerin merkeziyle aynı (line-height 1).
   Kenar çubuğu 38, giriş ekranı 40, telefon üst çubuğu 32 — aynı oran, yalnız ölçek farklı. */
.logo-kit { --boy: 38px; display: flex; align-items: center; gap: calc(var(--boy) * .16); text-decoration: none; }
.logo-kit > img { width: var(--boy); height: var(--boy); object-fit: contain; flex-shrink: 0; }
.logo-kit .marka-ad { font-size: calc(var(--boy) * .66); }
.marka { padding: 4px 8px 18px; color: #fff; }
.marka-logo { filter: brightness(0) invert(1); }
.marka-ad { font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.marka-ad span { color: #9DE7D1; }
.yan-bolum { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: rgba(255, 255, 255, .45); font-weight: 600; padding: 14px 12px 6px; }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav a { position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 12px; color: rgba(255, 255, 255, .74); font-weight: 500; transition: background .2s, color .2s; }
.nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.nav a.aktif { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.nav a.aktif::before { content: ''; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #5EE3CD; }
.nav a .sayac { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 7px; background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.nav a .sayac.sicak { background: #FF8A4C; color: #fff; }
.nav a .sayac:empty, .kullanici:empty { display: none; }
.yan-alt { margin-top: auto; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; }
.kullanici { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .08); }
.kullanici .avatar { width: 38px; height: 38px; font-size: 13px; }
.kullanici b { display: block; font-size: 13.5px; font-weight: 600; }
.kullanici small { display: block; font-size: 12px; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kullanici select { margin-left: auto; width: 28px; height: 28px; opacity: 0; position: absolute; right: 10px; cursor: pointer; }
.kullanici .degistir { margin-left: auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
.yan-araclar { display: flex; gap: 8px; }
.yan-araclar button { flex: 1; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 500; }
.yan-araclar button:hover { background: rgba(255, 255, 255, .14); }

.ana { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.ust { display: flex; align-items: center; gap: 16px; padding: 6px 4px 0; }
.ust h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.ust p { margin: 2px 0 0; color: var(--ikincil); font-size: 14px; }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.arama { position: relative; }
.arama input { width: 330px; height: 44px; border-radius: 13px; border: 1px solid var(--cizgi); background: var(--kart); padding: 0 14px 0 42px; outline: none; box-shadow: var(--golge); }
.arama input:focus { border-color: var(--marka); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka) 16%, transparent); }
.arama > svg { position: absolute; left: 14px; top: 13px; color: var(--soluk); }
.arama kbd { position: absolute; right: 10px; top: 11px; font: 600 11px/22px Inter, sans-serif; padding: 0 7px; border-radius: 6px; background: var(--kart-3); color: var(--soluk); }
.ikon-btn { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--golge); color: var(--ikincil); }
.ikon-btn:hover { color: var(--marka); border-color: var(--marka); }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.c-2 { grid-column: span 2; } .c-3 { grid-column: span 3; } .c-4 { grid-column: span 4; } .c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; }
.c-7 { grid-column: span 7; } .c-8 { grid-column: span 8; } .c-9 { grid-column: span 9; } .c-12 { grid-column: span 12; }
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r); box-shadow: var(--golge); min-width: 0; position: relative; }
.kart-bas { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--cizgi); }
.kart-bas h3 { margin: 0; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.kart-bas p { margin: 1px 0 0; font-size: 12.5px; color: var(--ikincil); }
.kart-bas .sag { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.kart-ic { padding: 20px; }
.ikon-cip { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--c-acik, var(--marka-acik)); color: var(--c, var(--marka)); flex-shrink: 0; }
.ikon-cip.k { width: 32px; height: 32px; border-radius: 9px; }
.ikon-cip.k svg { width: 16px; height: 16px; }
.t-yesil { --c: var(--yesil); --c-acik: var(--yesil-acik); }
.t-mavi { --c: var(--mavi); --c-acik: var(--mavi-acik); }
.t-mor { --c: var(--mor); --c-acik: var(--mor-acik); }
.t-turuncu { --c: var(--turuncu); --c-acik: var(--turuncu-acik); }
.t-kirmizi { --c: var(--kirmizi); --c-acik: var(--kirmizi-acik); }
.t-gri { --c: var(--gri); --c-acik: var(--gri-acik); }
.t-pembe { --c: var(--pembe); --c-acik: var(--pembe-acik); }
.giris { animation: giris .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes giris { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* hero */
.hero { overflow: hidden; color: #fff; border: 0; background: linear-gradient(125deg, #053F38 0%, #0B6B5E 52%, #0E7C86 100%); background-size: 160% 160%; animation: giris .55s both, akis 14s ease-in-out infinite alternate; }
@keyframes akis { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.hero::before { content: ''; position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 255, 225, .28), transparent); }
.hero .kart-ic { position: relative; padding: 26px 28px; }
.hero small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); font-weight: 600; }
.hero h2 { margin: 6px 0 4px; font-size: 30px; letter-spacing: -.02em; font-weight: 700; }
.hero p { margin: 0; color: rgba(255, 255, 255, .8); max-width: 520px; }
.cam-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 22px; }
.cam { background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(10px); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.cam .ust-sira { display: flex; align-items: center; gap: 10px; }
.cam .ust-sira span { width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .16); display: grid; place-items: center; }
.cam b { font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.cam em { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, .78); }

/* sorgu kartı */
.sorgu { display: flex; flex-direction: column; }
.sorgu .kart-ic { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tarayici { position: relative; }
.tarayici input { width: 100%; height: 56px; border-radius: 16px; border: 1.5px dashed color-mix(in srgb, var(--marka) 45%, var(--cizgi)); background: var(--marka-acik); padding: 0 16px 0 50px; font-size: 16px; font-weight: 600; letter-spacing: .02em; outline: none; }
.tarayici input:focus { border-style: solid; border-color: var(--marka); }
.alan .tarayici input { padding-left: 50px !important; }
.tarayici > svg { position: absolute; left: 16px; top: 18px; color: var(--marka); width: 20px; height: 20px; }
.hizli { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.hizli a { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--kart-2); border: 1px solid var(--cizgi); font-weight: 600; font-size: 13.5px; transition: transform .2s, border-color .2s; }
.hizli a:hover { transform: translateY(-2px); border-color: var(--marka); }

/* KPI / durum kutuları */
.durum-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.durum-kutu { text-align: left; border-radius: 16px; padding: 16px; background: var(--c-acik); border: 1px solid transparent; display: flex; flex-direction: column; gap: 12px; transition: transform .2s, border-color .2s; }
.durum-kutu:hover { transform: translateY(-2px); border-color: var(--c); }
.durum-kutu .ic { display: flex; align-items: center; gap: 10px; }
.durum-kutu .ic span { width: 34px; height: 34px; border-radius: 10px; background: var(--kart); color: var(--c); display: grid; place-items: center; }
.durum-kutu b { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--metin); }
.durum-kutu em { font-style: normal; font-weight: 600; font-size: 13.5px; color: var(--c); }
.durum-kutu small { font-size: 12.5px; color: var(--ikincil); }
.grafik { position: relative; height: 260px; padding: 12px 16px 16px; }
.grafik.k { height: 220px; }
.lejant { display: flex; gap: 16px; font-size: 12.5px; color: var(--ikincil); font-weight: 500; }
.lejant i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.tur-grafik { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: center; } /* gerçek grup adları uzun (FOREFUEL VEHICLE): kartı taşırmasın, sonu … */
.tur-pasta { position: relative; height: 170px; }
.tur-lejant { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

/* listeler */
.liste { display: flex; flex-direction: column; }
.satir { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--cizgi); transition: background .15s; cursor: pointer; }
.satir:first-child { border-top: 0; }
.satir:hover { background: var(--kart-2); }
.satir b { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.satir small { color: var(--ikincil); font-size: 12.5px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gun { font-weight: 700; font-size: 13px; min-width: 64px; text-align: center; height: 28px; line-height: 28px; border-radius: 8px; background: var(--c-acik); color: var(--c); }
.avatar { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 12.5px; flex-shrink: 0; background: var(--p, var(--marka)); letter-spacing: .02em; }
.avatar.b { width: 52px; height: 52px; border-radius: 16px; font-size: 17px; }
.lider { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 20px; }
.lider .cubuk { height: 6px; border-radius: 3px; background: var(--kart-3); margin-top: 6px; overflow: hidden; }
.lider .cubuk span { display: block; height: 100%; border-radius: 3px; background: var(--p, var(--marka)); transform-origin: left; animation: dolum 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dolum { from { transform: scaleX(0); } }
.lider b { font-size: 18px; font-weight: 700; }

/* rozet */
.rozet { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; background: var(--c-acik); color: var(--c); white-space: nowrap; }
.rozet svg { width: 14px; height: 14px; }
.rozet.cerceve { background: transparent; box-shadow: inset 0 0 0 1px var(--cizgi); color: var(--ikincil); }

/* düğmeler */
.btn { height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; transition: transform .15s, box-shadow .2s, background .2s; }
.btn:active { transform: scale(.98); }
.btn-birincil { background: var(--marka); color: #fff; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--marka) 70%, transparent); }
.btn-birincil:hover { background: var(--marka-koyu); }
[data-tema="koyu"] .btn-birincil:hover { background: #0E7A6B; }
.btn-ikincil { box-shadow: inset 0 0 0 1.5px var(--marka); color: var(--marka); background: var(--kart); }
.btn-ikincil:hover { background: var(--marka-acik); }
.btn-sade { color: var(--ikincil); background: var(--kart-2); box-shadow: inset 0 0 0 1px var(--cizgi); }
.btn-sade:hover { color: var(--metin); }
.btn-k { height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- form ---------- */
.form-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.form-sol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.adim-no { position: relative; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; font-weight: 700; font-size: 18px; line-height: 1; font-variant-numeric: tabular-nums; background: var(--c); color: #fff; box-shadow: 0 8px 18px -8px var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent); }
[data-tema="koyu"] .adim-no { color: #06201C; }
.adim-no::after { content: ""; position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; border-radius: 6px; background: var(--yesil) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%274%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 6 9 17l-5-5%27/%3E%3C/svg%3E") center / 11px no-repeat; border: 2px solid var(--kart); transform: scale(0); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.adim-no.tamam::after { transform: scale(1); }
.bolum-bas { gap: 16px; border-left: 4px solid var(--c); border-radius: var(--r) var(--r) 0 0; background: linear-gradient(90deg, var(--c-acik), transparent 70%); }
/* form ızgarası (1 Eki, Abdullah: "kutular eşit olsun, sağdaki boş alana yayılsın"): satırdaki kutular eşit genişlikte satırı doldurur —
   geniş ekranda 3 kutulu satırın sağında boş sütun kalmaz. Kutu en az 14rem, sığmayan alta iner; "tam" satırın tamamı,
   "c2" iki kutu genişliği (iade seri no + garanti satırı üstteki 3'lü satırla hizalı) */
.izgara { display: flex; flex-wrap: wrap; gap: 16px 18px; }
.izgara > * { flex: 1 1 14rem; min-width: 0; }
.izgara > .tam { flex-basis: 100%; }
.izgara > .c2 { flex: 2 1 calc(28rem + 18px); }
.etiket-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--marka); background: var(--marka-acik); }
.etiket-btn:hover { background: var(--marka); color: #fff; }
.etiket-btn svg { width: 13px; height: 13px; }
/* etiketteki düğme ("Şimdi") etiketi uzatıp kutuyu yanındakinden aşağı itmesin (1 Eki: "iki kutucuğun hizası eşit değil") */
.alan > label .etiket-btn { margin-block: -3px; }
.alan { display: flex; flex-direction: column; gap: 7px; min-width: 0; position: relative; }
.alan > label, .etiket { font-size: 13.5px; font-weight: 600; color: var(--etiket); display: flex; align-items: center; gap: 6px; }
.alan > label .z { color: var(--kirmizi); font-weight: 700; }
.alan > label .ist { margin-left: auto; font-size: 11.5px; color: var(--soluk); font-weight: 500; }
.girdi, .alan input:not([type=checkbox]):not([type=file]):not([type=range]), .alan select, .alan textarea {
  width: 100%; height: 46px; border: 1px solid var(--cizgi-g); border-radius: 12px; padding: 0 14px; background: var(--kart); color: var(--metin); font-size: 15px; font-weight: 500; outline: none; transition: border-color .15s, box-shadow .15s;
}
.alan input:hover, .alan select:hover, .alan textarea:hover { border-color: color-mix(in srgb, var(--cizgi-g) 60%, var(--ikincil)); }
.alan select:invalid { color: var(--yer-tutucu); font-weight: 400; }
.alan select option { color: var(--metin); font-weight: 500; }
.girdi-sar { position: relative; }
/* sağ boşluk rozetin gerçek genişliğine göre JS'te (rozetPayi) ayarlanır; sabit pay stok kodunu kesiyordu */
.ic-rozet { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; pointer-events: none; }
.ic-rozet .rozet { height: 28px; }
.alan textarea { height: auto; min-height: 92px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.alan input:focus, .alan select:focus, .alan textarea:focus { border-color: var(--marka); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka) 14%, transparent); }
.alan input::placeholder, .alan textarea::placeholder, .tarayici input::placeholder { color: var(--yer-tutucu); font-weight: 400; }
.alan.hata input, .alan.hata select, .alan.hata textarea, .alan.hata .secim button, .alan.hata .seri-kutu { border-color: var(--kirmizi); }
/* girdinin temel kuralı (:not×3) bu üç kuraldan güçlüydü: girdilerde üzerine gelme / odak / hata kenar rengi hiç görünmüyordu (1 Eki) */
.alan input:not([type=checkbox]):not([type=file]):not([type=range]):hover { border-color: color-mix(in srgb, var(--cizgi-g) 60%, var(--ikincil)); }
.alan input:not([type=checkbox]):not([type=file]):not([type=range]):focus { border-color: var(--marka); }
.alan.hata input:not([type=checkbox]):not([type=file]):not([type=range]) { border-color: var(--kirmizi); }
.ipucu { font-size: 12.5px; color: var(--soluk); display: flex; align-items: center; gap: 6px; }
.ipucu svg { width: 14px; height: 14px; }
.ipucu.iyi { color: var(--yesil); font-weight: 500; }
.ipucu.kotu { color: var(--kirmizi); font-weight: 500; }
.secim { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.secim button { height: 46px; border: 1px solid var(--cizgi-g); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 500; font-size: 14.5px; background: var(--kart); color: var(--metin); transition: all .15s; padding: 0 10px; }
.secim button svg { color: var(--ikincil); }
.secim button.secili svg { color: inherit; }
.secim button:hover { border-color: var(--c, var(--marka)); color: var(--metin); }
.secim button.secili { border-color: var(--c, var(--marka)); background: var(--c-acik, var(--marka-acik)); color: var(--c, var(--marka-koyu)); font-weight: 600; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--marka)) 14%, transparent); }

/* açılır arama (combobox) */
.acilir { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 14px; box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .35); max-height: 320px; overflow: auto; padding: 6px; display: none; }
.acilir.acik { display: block; animation: giris .2s both; }
.acilir button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 10px; }
.acilir button:hover, .acilir button.odak { background: var(--marka-acik); }
.acilir button b { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acilir button small { color: var(--soluk); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.acilir mark { background: color-mix(in srgb, var(--marka) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.acilir .bos { padding: 16px; color: var(--soluk); text-align: center; font-size: 13.5px; }

/* seri no */
.seri-kutu { border: 1px solid var(--cizgi-g); border-radius: 14px; padding: 8px; background: var(--kart-2); display: flex; flex-direction: column; gap: 8px; }
.seri-giris { display: flex; gap: 8px; }
.seri-giris .tarayici { flex: 1; }
.seri-giris .tarayici input { height: 50px; font-size: 16px; background: var(--kart); }
.seri-giris .tarayici > svg { top: 15px; }
.arti { width: 50px; height: 50px; border-radius: 14px; background: var(--marka); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px -8px var(--marka); flex-shrink: 0; }
.arti:hover { background: var(--marka-koyu); }
.arti svg { width: 22px; height: 22px; }
.seriler { display: flex; flex-wrap: wrap; gap: 8px; }
.seriler:empty { display: none; }
.seri-cip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 6px 0 6px; border-radius: 10px; background: var(--kart); border: 1px solid var(--cizgi); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 13.5px; animation: pop .3s cubic-bezier(.2, 1.4, .4, 1) both; }
.seri-cip i { font-style: normal; min-width: 22px; height: 22px; border-radius: 7px; background: var(--marka-acik); color: var(--marka); font-size: 11.5px; display: grid; place-items: center; }
.seri-cip button { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--soluk); }
.seri-cip button:hover { background: var(--kirmizi-acik); color: var(--kirmizi); }
.seri-cip button svg { width: 14px; height: 14px; }
/* uzun seri: çip kutudan taşmasın, sil düğmesi ekranda kalsın (yazı üç noktayla kısalır, tamamı üzerine gelince) */
.seri-cip { max-width: 100%; }
.seri-cip .seri-metin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seri-cip i, .seri-cip button, .seri-cip .rozet { flex: none; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.salla { animation: salla .35s; }
@keyframes salla { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.seri-bilgi:empty { display: none; }
.seri-bilgi { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ikincil); padding: 2px 4px; }
.seri-bilgi b { color: var(--marka); }
/* daha önce kaydedilmiş seri no: uyarı + "Forma git" (1 Eki 2026) */
.seri-uyarilar { display: flex; flex-direction: column; gap: 6px; }
.seri-uyarilar:empty { display: none; }
.seri-uyari { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 12px; background: var(--turuncu-acik); border: 1px solid color-mix(in srgb, var(--turuncu) 32%, transparent); animation: giris .3s both; }
.seri-uyari .ikon-cip { background: var(--kart); color: var(--turuncu); }
.seri-uyari > div { flex: 1; min-width: 0; }
.seri-uyari b { display: block; font-size: 13.5px; font-weight: 600; color: var(--metin); }
.seri-uyari small { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ikincil); }
.seri-uyari small a { color: var(--turuncu); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.seri-uyari .btn { flex: none; }

/* işlem kartları */
.islem-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.islem-kart { text-align: left; border: 1.5px solid var(--cizgi); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--kart); position: relative; transition: all .18s; }
.islem-kart:hover { border-color: var(--c); transform: translateY(-2px); }
.islem-kart b { font-weight: 600; font-size: 15px; }
.islem-kart small { color: var(--ikincil); font-size: 12.5px; }
.islem-kart .tik { position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--cizgi); display: grid; place-items: center; color: transparent; transition: all .18s; }
.islem-kart.secili { border-color: var(--c); background: var(--c-acik); box-shadow: 0 10px 24px -14px var(--c); }
.islem-kart.secili .tik { background: var(--c); border-color: var(--c); color: #fff; }
.islem-kart .tik svg { width: 15px; height: 15px; }

/* Kayıt türü (Tamir / Sevk hazırlık): yeni kayıt formunda önce seçilir */
.tur-sec .kart-ic { padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.tur-sec-bas h2 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.tur-sec-bas p { margin: 4px 0 0; font-size: 13.5px; color: var(--ikincil); }
.tur-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tur-kart { position: relative; text-align: left; border: 1.5px solid var(--cizgi); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: var(--kart); transition: border-color .18s, background .18s, transform .18s, box-shadow .18s; }
.tur-kart:hover, .tur-kart:focus-visible { border-color: var(--c); background: var(--c-acik); transform: translateY(-2px); box-shadow: 0 14px 30px -18px var(--c); }
.tur-kart .ikon-cip { width: 52px; height: 52px; border-radius: 15px; }
.tur-kart .ikon-cip svg { width: 24px; height: 24px; }
.tur-kart b { margin-top: 4px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.tur-kart small { max-width: 44ch; font-size: 13.5px; line-height: 1.5; color: var(--ikincil); }
.tur-kapsam { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tur-kapsam .rozet { height: 24px; font-size: 12px; background: var(--kart); }
.tur-git { position: absolute; top: 24px; right: 24px; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; border: 1.5px solid var(--cizgi); color: var(--ikincil); transition: all .18s; }
.tur-kart:hover .tur-git, .tur-kart:focus-visible .tur-git { background: var(--c); border-color: var(--c); color: #fff; }
.tur-bant .kart-ic { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 20px; }
.tur-bant-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tur-bant-yazi small { font-size: 12px; font-weight: 600; color: var(--ikincil); }
.tur-bant-yazi b { font-size: 15.5px; font-weight: 700; }
.tur-bant-yazi span { font-size: 12.5px; color: var(--ikincil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tur-bant .secim { width: 340px; flex-shrink: 0; }
.tur-rozet { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--yesil-acik); color: var(--yesil); font-size: 11px; font-weight: 700; margin-left: 6px; vertical-align: 1px; }
.tur-rozet svg { width: 12px; height: 12px; }

/* switch */
.anahtar { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--kart-2); cursor: pointer; }
.anahtar b { display: block; font-weight: 600; }
.anahtar small { display: block; color: var(--ikincil); font-size: 12.5px; }
.anahtar input { display: none; }
.anahtar .ray { margin-left: auto; width: 48px; height: 28px; border-radius: 14px; background: var(--cizgi); position: relative; transition: background .2s; flex-shrink: 0; }
.anahtar .ray::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .25s cubic-bezier(.2, 1.2, .4, 1); }
.anahtar input:checked + .ray { background: var(--marka); }
.anahtar input:checked + .ray::after { transform: translateX(20px); }
.anahtar:has(input:checked) { border-color: var(--marka); background: var(--marka-acik); }
.fiyat-sonuc { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: var(--kart-2); border: 1px dashed var(--cizgi); }
.fiyat-sonuc b { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin-left: auto; font-variant-numeric: tabular-nums; }
.not-bant { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--kirmizi); color: #fff; font-weight: 600; font-size: 13.5px; }

/* fotoğraf */
.foto-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.foto { position: relative; aspect-ratio: 16 / 9; max-height: 400px; border-radius: 16px; border: 1.5px dashed var(--cizgi); background: var(--kart-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--ikincil); cursor: pointer; overflow: hidden; transition: border-color .2s; }
.foto:hover { border-color: var(--marka); color: var(--marka); }
.foto input { display: none; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto b { font-size: 14px; font-weight: 600; color: var(--metin); }
.foto > * { position: relative; }
.foto img { z-index: 0; }
.foto small { font-size: 12px; }
.foto .etiket-ust { position: absolute; left: 10px; top: 10px; z-index: 2; height: 24px; padding: 0 9px; border-radius: 7px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11.5px; font-weight: 600; display: flex; align-items: center; backdrop-filter: blur(6px); }
.foto .kaldir { position: absolute; right: 8px; top: 8px; z-index: 2; width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; display: grid; place-items: center; }
/* yüklenirken (1 Eki, kalite turu): seçilen fotoğraf soluk, ortada "Yükleniyor…"; o sırada yeni seçim yapılamaz, Kaydet bekler */
.foto.yukleniyor { cursor: progress; border-style: solid; border-color: var(--marka); }
.foto.yukleniyor img { opacity: .5; }
.foto-yukleniyor { z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 10px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 13px; font-weight: 600; backdrop-filter: blur(6px); }
.foto-yukleniyor svg { width: 16px; height: 16px; }
.lucide-loader-circle { animation: don 1s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
/* kayıt sayfası: önce / sonra karşılaştırmasının altında iki fotoğraf satırı — basınca değişir, × kaldırır */
.foto-satirlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.foto-satir { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--kart); cursor: pointer; transition: border-color .15s; }
.foto-satir:hover { border-color: var(--marka); }
.foto-satir input { display: none; }
.foto-satir img { width: 64px; height: 44px; flex: none; border-radius: 8px; object-fit: cover; }
.foto-satir > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.foto-satir b { font-size: 13.5px; font-weight: 600; }
.foto-satir small { font-size: 12px; color: var(--soluk); }
.foto-satir .kaldir { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--soluk); }
.foto-satir .kaldir:hover { background: var(--kirmizi-acik); color: var(--kirmizi); }
.foto-satir .kaldir svg { width: 16px; height: 16px; }
#dParca:empty { display: none; } /* kayıt sayfası: "Parça değişimi" seçili değilken sütunda fazladan boşluk açmasın */
/* kaydedilen yeni kayıt formu kilitlenir (okutulan yeni seri kaydedilmiş forma eklenmesin); sağda "Kayıt oluşturuldu" */
.form-sol.kilitli { opacity: .55; transition: opacity .3s; }

/* sağ ray */
.ray-sag { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
.ozet-no { padding: 20px; border-radius: var(--r) var(--r) 0 0; background: linear-gradient(125deg, #053F38, #0B6B5E 55%, #0E7C86); color: #fff; }
.ozet-no small { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .7); font-weight: 600; }
.ozet-no b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ozet-no span { font-size: 13px; color: rgba(255, 255, 255, .8); }
.ilerleme { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .2); margin-top: 14px; overflow: hidden; }
.ilerleme span { display: block; height: 100%; background: #7BF1DC; border-radius: 4px; } /* özet her güncellemede yeniden çizilir: genişlik geçişi hiç çalışmıyordu, kaldırıldı */
.ozet-liste { padding: 8px 20px 4px; }
.ozet-liste div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--cizgi); font-size: 13.5px; }
.ozet-liste div:first-child { border-top: 0; }
.ozet-liste dt { color: var(--soluk); font-weight: 500; }
.ozet-liste dd { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
/* zorunlu alanlar: iki sütunlu, hizalı kontrol listesi */
.eksikler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; padding: 8px 20px 16px; border-top: 1px solid var(--cizgi); }
.eksikler span { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 6px; margin: 0 -6px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ikincil); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eksikler span:hover { background: var(--kart-2); }
.eksikler svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--soluk); }
.eksikler span.tamam { color: var(--metin); }
.eksikler span.tamam svg { color: var(--yesil); }
.eksikler.uyar span:not(.tamam), .eksikler.uyar span:not(.tamam) svg { color: var(--kirmizi); }
.karar { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--cizgi); }
.karar .btn { width: 100%; height: 50px; font-size: 15px; }
.basari { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.basari .onay { width: 56px; height: 56px; border-radius: 18px; background: var(--marka); color: #fff; display: grid; place-items: center; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both; box-shadow: 0 0 0 0 color-mix(in srgb, var(--marka) 50%, transparent); animation: pop .45s both, halka 1.6s .3s 2; }
@keyframes halka { to { box-shadow: 0 0 0 18px transparent; } }
.basari .onay svg { width: 28px; height: 28px; }
.basari h3 { margin: 0; font-size: 19px; }
.basari p { margin: 0; color: var(--ikincil); }
.basari .dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.basari .dugmeler .btn:first-child { grid-column: 1 / -1; }

/* ---------- tablo ---------- */
.suzgec { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--cizgi); }
.suzgec .arama { flex: 1 1 220px; min-width: 220px; max-width: 420px; } /* durum haplarının yanında kalan yeri doldurur */
.suzgec .arama input { width: 100%; box-shadow: none; }
.cip-grup { display: flex; gap: 6px; flex-wrap: wrap; }
.cip { height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--kart); display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: var(--ikincil); transition: all .15s; }
.cip:hover { border-color: var(--c, var(--marka)); color: var(--metin); }
.cip .n { min-width: 24px; height: 22px; padding: 0 6px; border-radius: 7px; background: var(--kart-3); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.cip.secili { border-color: var(--c, var(--marka)); background: var(--c-acik, var(--marka-acik)); color: var(--c, var(--marka-koyu)); font-weight: 600; }
.cip.secili .n { background: var(--c, var(--marka)); color: #fff; }
.suzgec .kir { flex-basis: 100%; height: 0; } /* süzgeç satır sonu: üstte arama + durum, altta tarih + seçimler */
.suzgec select, .suzgec input[type=date] { height: 44px; border-radius: 12px; border: 1px solid var(--cizgi-g); background-color: var(--kart); padding: 0 14px; font-weight: 500; font-size: 14px; color: var(--metin); outline: none; transition: border-color .15s, box-shadow .15s; }
.suzgec select:hover, .suzgec input[type=date]:hover { border-color: color-mix(in srgb, var(--cizgi-g) 60%, var(--ikincil)); }
.suzgec select:focus, .suzgec input[type=date]:focus { border-color: var(--marka); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka) 14%, transparent); }
.suzgec select.dolu { border-color: var(--marka); background-color: var(--marka-acik); color: var(--marka-koyu); } /* süzgeç uygulanmış (kalın yazı kutuyu taşırıyordu) */
#kTarih { min-width: 196px; }
.suzgec input[type=date] { padding: 0 10px; }
/* tablonun üstünde: kaç kayıt, hangi aralık, temizle + Excel */
.sonuc-bar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 20px; border-bottom: 1px solid var(--cizgi); background: var(--kart-2); font-size: 14px; }
.sonuc-bar b { font-size: 15px; font-variant-numeric: tabular-nums; margin-right: 4px; }
.sonuc-ek { color: var(--ikincil); }
.sonuc-bar .sag { margin-left: auto; display: flex; gap: 8px; }
/* Açılır kutular: sağda belirgin ok, girdilerle aynı kenar ve köşe, basılabilir olduğu belli (1 Eki) */
.alan select, .suzgec select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6877' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
[data-tema="koyu"] .alan select, [data-tema="koyu"] .suzgec select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A2B2AE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.sec-ikon { position: relative; display: inline-flex; }
.sec-ikon > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--soluk); pointer-events: none; }
.sec-ikon select { padding-left: 40px; }
.sec-ikon:has(select.dolu) > svg { color: var(--marka); }
.aralik { display: inline-flex; align-items: center; gap: 8px; color: var(--soluk); }
/* Kayıtlar: tarih aralığı tek parça kutu — seçili süzgeç gibi yeşil, içinde iki tarih ve × (açılır kutunun yerine geçer) */
.suzgec .aralik { height: 44px; gap: 2px; padding: 0 4px 0 13px; border: 1px solid var(--marka); border-radius: 12px; background: var(--marka-acik); color: var(--marka-koyu); transition: box-shadow .15s; }
.suzgec .aralik:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka) 14%, transparent); }
.suzgec .aralik > svg { width: 17px; height: 17px; flex: none; margin-right: 4px; color: var(--marka); }
.suzgec .aralik input[type=date] { width: 128px; height: 40px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--marka-koyu); box-shadow: none; }
.suzgec .aralik input[type=date]:focus { box-shadow: none; background: color-mix(in srgb, var(--marka) 10%, transparent); }
.suzgec .aralik > span { color: var(--marka); }
.suzgec .aralik button { flex: none; width: 32px; height: 32px; margin-left: 2px; border-radius: 9px; display: grid; place-items: center; color: var(--marka-koyu); }
.suzgec .aralik button:hover { background: color-mix(in srgb, var(--marka) 16%, transparent); }
.suzgec .aralik button svg { width: 16px; height: 16px; }
.durum-kutu em { white-space: nowrap; } /* 1440'ta "Teslim edildi" iki satıra kırılıp sayıyı kaydırıyordu */
.tablo-sar { overflow: auto; max-height: calc(100vh - 290px); }
table.tablo { width: 100%; border-collapse: separate; border-spacing: 0; }
.tablo th { position: sticky; top: 0; z-index: 1; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--soluk); font-weight: 600; text-align: left; padding: 12px 16px; background: var(--kart-2); border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.tablo td { padding: 13px 16px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; white-space: nowrap; }
.tablo tbody tr { cursor: pointer; transition: background .12s; }
.tablo tbody tr:hover td { background: var(--kart-2); }
.tablo .no { font-weight: 700; font-variant-numeric: tabular-nums; }
.tablo .urun b { display: block; font-weight: 600; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.tablo .urun small { color: var(--soluk); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tablo .seri { font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.kisi { display: flex; align-items: center; gap: 8px; }
.kisi .avatar { width: 28px; height: 28px; border-radius: 9px; font-size: 11px; }
.bos-durum { padding: 48px 20px; text-align: center; color: var(--ikincil); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bos-durum svg { width: 30px; height: 30px; color: var(--soluk); }
.bos-durum .btn svg { width: 18px; height: 18px; color: currentColor; }
/* boş grafik (yeni kurulum, veri yok): ızgara yerine ortada kısa açıklama */
.grafik.bos-grafik { display: flex; align-items: center; justify-content: center; }
.grafik.bos-grafik .bos-durum { padding: 0 20px; font-size: 13.5px; }
.grup-rozet { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--mor-acik); color: var(--mor); font-size: 11px; font-weight: 700; margin-left: 6px; vertical-align: 1px; }
.grup-rozet svg { width: 12px; height: 12px; }

/* ---------- çekmece (detay) ---------- */
/* kayıt sayfası (1 Eki: çekmece yerine tam sayfa) — sağ şerit */
.ozet-rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ozet-no .ozet-rozetler .rozet { background: rgba(255, 255, 255, .94); color: var(--c); font-size: 12px; } /* .ozet-no span beyaz yazısını ezer */
.karar-ikili { display: flex; gap: 8px; }
.karar-ikili .btn { flex: 1; height: 44px; font-size: 14px; }
.karar a.btn-sade { height: 44px; font-size: 14px; }
.kunye { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(10rem, calc((100% - 3px) / 4)), 1fr)); gap: 1px; /* en fazla 4 sütun */ background: var(--cizgi); border-radius: 14px; overflow: hidden; }
.kunye div { background: var(--kart); padding: 12px 14px; } /* son satırın boş hücreleri JS'te (kunyeDoldur) beyaz hücreyle tamamlanır */
.kunye dt { font-size: 12px; color: var(--soluk); font-weight: 500; }
.kunye dd { margin: 3px 0 0; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.zaman { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; padding: 8px 4px 2px; }
.zaman.uc { grid-template-columns: repeat(3, 1fr); }
.zaman.uc::before { left: 17%; right: 17%; }
.zaman::before { content: ''; position: absolute; left: 12%; right: 12%; top: 25px; border-top: 2px dashed var(--cizgi); }
.zaman div { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zaman span.d { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--kart-3); color: var(--soluk); z-index: 1; }
.zaman div.ok span.d { background: var(--c, var(--marka)); color: #fff; box-shadow: 0 6px 14px -6px var(--c, var(--marka)); }
.zaman b { font-size: 13px; font-weight: 600; }
.zaman small { font-size: 12px; color: var(--ikincil); font-variant-numeric: tabular-nums; }
.zaman-ozet { display: flex; justify-content: space-around; margin-top: 10px; font-size: 12.5px; color: var(--ikincil); }
.zaman em { position: absolute; top: 14px; left: calc(50% + 26px); font-style: normal; font-size: 11px; font-weight: 700; color: var(--marka); background: var(--kart); padding: 0 6px; border-radius: 6px; z-index: 1; white-space: nowrap; }
.oncesonra { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--kart-3); user-select: none; }
.oncesonra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.oncesonra .sonra { clip-path: inset(0 0 0 var(--x, 50%)); }
.oncesonra .cizgi { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 3px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 12px rgba(0, 0, 0, .4); pointer-events: none; }
.oncesonra .cizgi::after { content: '⟷'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #0B4F46; display: grid; place-items: center; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.oncesonra input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.oncesonra .et { position: absolute; bottom: 12px; height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; backdrop-filter: blur(6px); }
.grup-listesi { display: flex; flex-wrap: wrap; gap: 8px; }
.grup-listesi a { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--kart); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums; }
.grup-listesi a.bu { border-color: var(--mor); background: var(--mor-acik); color: var(--mor); }

/* ---------- personel ---------- */
.personel-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.personel-kart .kart-ic { display: flex; flex-direction: column; gap: 16px; }
.personel-kart .kim { display: flex; align-items: center; gap: 14px; }
.personel-kart .kim b { display: block; font-size: 16px; font-weight: 600; }
.personel-kart .kim small { color: var(--ikincil); font-size: 13px; }
.personel-kart .olcu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cizgi); border-radius: 12px; overflow: hidden; }
.personel-kart .olcu div { background: var(--kart-2); padding: 10px 12px; }
.personel-kart .olcu b { display: block; font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.personel-kart .olcu small { font-size: 12px; color: var(--soluk); }
.personel-kart.pasif { opacity: .62; }
.iletisim { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--ikincil); }
.iletisim span { display: flex; align-items: center; gap: 8px; }
.iletisim svg { width: 15px; height: 15px; }
.sekmeler { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--kart); border: 1px solid var(--cizgi); box-shadow: var(--golge); }
.sekmeler button { height: 38px; padding: 0 16px; border-radius: 10px; font-weight: 600; color: var(--ikincil); display: inline-flex; align-items: center; gap: 8px; }
.sekmeler button.secili { background: var(--marka); color: #fff; }

/* pencere */
.pencere-perde { position: fixed; inset: 0; background: rgba(4, 20, 18, .45); backdrop-filter: blur(4px); z-index: 80; display: grid; place-items: center; padding: 16px; animation: solgun .2s both; }
@keyframes solgun { from { opacity: 0; } }
.pencere { width: min(560px, 100%); background: var(--kart); border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); overflow: hidden; animation: giris .35s both; }
.pencere .kart-ic { display: flex; flex-direction: column; gap: 14px; }
.pencere-alt { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--cizgi); background: var(--kart-2); }
.alan input:not([type=checkbox]):not([type=file]):not([type=range])[readonly] { background: var(--kart-2); color: var(--ikincil); }

/* Anlaşmalı fiyatlar (1 Eki): solda müşteri listesi (18 hap yerine), sağda satır içi tek tek giriş */
.fiyat-duzen { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
.musteri-liste { border-right: 1px solid var(--cizgi); background: var(--kart-2); border-radius: 0 0 0 var(--r); }
.ml-bas { padding: 16px; border-bottom: 1px solid var(--cizgi); }
.ml-ic { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.ml-ic button { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; padding: 0 12px; border-radius: 10px; text-align: left; font-size: 14px; color: var(--metin); transition: background .12s; }
.ml-ic button b { font-weight: 600; }
.ml-ic button small { font-size: 12px; color: var(--soluk); font-variant-numeric: tabular-nums; }
.ml-ic button:hover { background: var(--kart); }
.ml-ic button.yok b { font-weight: 500; color: var(--ikincil); }
.ml-ic button.secili { background: var(--marka-acik); color: var(--marka-koyu); }
.ml-ic button.secili b { font-weight: 700; color: var(--marka-koyu); }
.ml-ic button.secili small { color: var(--marka); }
.fiyat-sag { min-width: 0; }
.fiyat-baslik { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fiyat-baslik b { font-size: 15.5px; }
.fiyat-baslik span { font-size: 12.5px; color: var(--ikincil); }
.fiyat-sag .arama input { width: 220px; box-shadow: none; }
.fiyat-tablo tbody tr { cursor: default; }
.fiyat-gir { width: 140px; height: 38px; border: 1px solid var(--cizgi-g); border-radius: 10px; padding: 0 12px; text-align: right; font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--kart); color: var(--metin); outline: none; transition: border-color .15s, box-shadow .15s, background .3s; }
.fiyat-gir:hover { border-color: color-mix(in srgb, var(--cizgi-g) 60%, var(--ikincil)); }
.fiyat-gir:focus { border-color: var(--marka); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka) 14%, transparent); }
.fiyat-gir::placeholder { color: var(--yer-tutucu); font-weight: 400; }
.fiyat-gir.kaydedildi { border-color: var(--yesil); background: var(--yesil-acik); }
.fiyat-gir.hata { border-color: var(--kirmizi); background: var(--kirmizi-acik); }

/* bildirim */
.bildirim { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); opacity: 0; z-index: 100; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 14px; background: var(--marka); color: #fff; font-weight: 600; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); transition: all .35s cubic-bezier(.2, 1.2, .4, 1); pointer-events: none; }
.bildirim.gorunur { transform: translate(-50%, 0); opacity: 1; }
.bildirim.hata { background: var(--kirmizi); }
.bildirim.bilgi { background: var(--mavi); }

/* ================= DUYARLI TASARIM (1 Eki 2026) =================
   "Ekranı küçültünce tasarım sapıtıyor" + "telefonda native bir uygulama gibi olmalı".
   ≥1440 onaylı masaüstü: bu bölümdeki hiçbir kural oraya dokunmaz (araclar/duyarli-olc.mjs eski sürümle piksel piksel karşılaştırır).
   1366–1439 tam yan menü · 761–1365 yan menü simgeli ray (koyu yeşil, yüzen) · ≤760 telefon: üstte buzlu uygulama çubuğu,
   altta yüzen sekme çubuğu, tek sütun, alttan açılan sayfalar. Kart içleri sayfanın değil İÇERİK ALANININ genişliğine göre
   (#icerik ve .form-sol container): yan menü tam da olsa ray da olsa aynı genişlikte aynı düzen. */
.mobil-ust, .mobil-alt, .mobil-eylem, .kamera-btn, .suzgec-ac, .dar-seri, .mobil-grup-pdf, .kisa-yazi, .tutamac { display: none; }
.mobil-eylem[hidden] { display: none !important; }

@media (max-width: 1439px) {
  #icerik { container: icerik / inline-size; }
  .form-sol { container: form / inline-size; }
  /* başlık bloğu daralıp alt yazı 6 satıra bölünmesin: yer yoksa arama + düğme alt satıra iner */
  .ust { flex-wrap: wrap; row-gap: 12px; }
  .ust > div:first-child { flex: 1 1 300px; min-width: 0; }
  .ust-sag { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 1360px) {
  .form-duzen { grid-template-columns: minmax(0, 1fr) 340px; }
  .arama input { width: 250px; }
}

/* --- ray: 761–1365 px. Simge + altında kısa ad (Material ray gibi), sayaç simgenin köşesinde --- */
@media (min-width: 761px) and (max-width: 1365px) {
  :root { --yan-g: 88px; }
  .yan { padding: 16px 10px 12px; border-radius: 22px; }
  .marka { justify-content: center; padding: 2px 0 16px; }
  .marka-ad { display: none; }
  .yan-bolum { height: 1px; margin: 10px 14px; padding: 0; font-size: 0; background: rgba(255, 255, 255, .12); }
  .nav { gap: 4px; }
  .nav a { flex-direction: column; justify-content: center; gap: 5px; height: 62px; padding: 0 2px; font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; }
  .nav a.aktif::before { left: -10px; top: 16px; bottom: 16px; }
  .nav a .sayac { position: absolute; top: 5px; left: calc(50% + 4px); margin: 0; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 6px; font-size: 11px; }
  .yan-araclar { flex-direction: column; gap: 6px; }
  .yan-araclar button { flex: none; height: 40px; }
  .yan-araclar button span { display: none; }
  .kullanici { justify-content: center; padding: 7px 0; border-radius: 14px; }
  .kullanici > div:not(.kullanici-menu), .kullanici .degistir { display: none; }
  /* rayın içine sığmaz: ekrana göre, rayın sağında açılır (yan menünün overflow'u kesmesin) */
  .kullanici-menu { position: fixed; left: calc(var(--yan-g) + 30px); right: auto; bottom: 28px; width: 236px; }
}

/* --- içerik alanı daraldıkça kart içleri (container: #icerik) --- */
@container icerik (max-width: 1123px) {
  /* durum kutusu: ikon üstte, ad altta — "Tamamlandı" kutudan taşmasın */
  .durum-kutu .ic { flex-direction: column; align-items: flex-start; gap: 8px; }
  .tur-grafik { grid-template-columns: 130px minmax(0, 1fr); }
  .tur-pasta { height: 130px; }
}
@container icerik (min-width: 900px) and (max-width: 1053px) {
  .pano-sorgu .hizli { grid-template-columns: minmax(0, 1fr); }
}
@container icerik (min-width: 900px) and (max-width: 1045px) {
  .cam-izgara { grid-template-columns: 1fr 1fr; }
}
@container icerik (max-width: 1179px) {
  .kayit-tablo .k-bekleme, .kayit-tablo .k-garanti, .kayit-tablo .k-pdf { display: none; }
}
@container icerik (max-width: 1040px) {
  .kayit-tablo .k-seri { display: none; }
  .kayit-tablo .dar-seri { display: inline; }
}
@container icerik (max-width: 899px) {
  .c-7, .c-8, .c-9 { grid-column: span 12; }
  .c-3, .c-4, .c-5 { grid-column: span 6; }
  .bento > .kpi-kart.c-4 { grid-column: span 4; }
  .pano-sorgu, .pano-son { grid-column: span 12; }
  .pano-sorgu .hizli { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tur-izgara { grid-template-columns: minmax(0, 1fr); }
  .form-duzen { grid-template-columns: minmax(0, 1fr); }
  .ray-sag { position: static; }
  .kayit-sayfa .ray-sag, .profil-sayfa .ray-sag { order: -1; }
  .kayit-sayfa .ray-sag .karar, #ray .karar #kaydet { display: none; }
  .mobil-eylem { display: flex; }
  .mobil-grup-pdf { display: inline-flex; }
  /* fiyatlar: müşteri listesi üstte, yana kayan seçim şeridi */
  .fiyat-duzen { grid-template-columns: minmax(0, 1fr); }
  .musteri-liste { border-right: 0; border-bottom: 1px solid var(--cizgi); border-radius: 0; }
  .ml-bas.alan { flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px 10px; border-bottom: 0; }
  .ml-bas.alan select { width: 132px; }
  .ml-ic { flex-direction: row; gap: 8px; padding: 0 16px 14px; overflow-x: auto; scrollbar-width: none; }
  .ml-ic::-webkit-scrollbar { display: none; }
  .ml-ic button { flex: none; height: 54px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 0 14px; border: 1px solid var(--cizgi); background: var(--kart); }
  .ml-ic button.secili { border-color: var(--marka); }
  /* tablolar → kart listesi (dokunarak açılır) */
  .kart-tablo thead { display: none; }
  .kart-tablo, .kart-tablo tbody { display: block; }
  .kart-tablo tr { display: grid; align-items: center; gap: 6px 10px; padding: 14px 16px; border-bottom: 1px solid var(--cizgi); }
  .kart-tablo tr:has(.bos-durum) { display: block; padding: 0; }
  .kart-tablo td { display: block; min-width: 0; padding: 0; border: 0; white-space: normal; background: none !important; }
  .kart-tablo tbody tr:active { background: var(--kart-2); }
  .kayit-tablo tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no no durum" "urun urun urun" "seri seri musteri" "gelis bekleme atanan"; }
  .kayit-tablo .k-no { grid-area: no; display: flex; align-items: center; font-size: 15px; }
  .kayit-tablo .k-durum { grid-area: durum; justify-self: end; }
  .kayit-tablo .k-musteri, .kayit-tablo .k-atanan { justify-self: end; }
  .kayit-tablo .k-urun { grid-area: urun; }
  .kayit-tablo .k-urun b { max-width: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; font-size: 15px; line-height: 1.35; }
  .kayit-tablo .k-urun small, .kayit-tablo .dar-seri { display: none; }
  .kayit-tablo .k-seri { grid-area: seri; display: block; font-size: 14px; }
  .kayit-tablo .k-musteri { grid-area: musteri; text-align: right; }
  .kayit-tablo .k-gelis { grid-area: gelis; font-size: 13px; color: var(--ikincil); }
  .kayit-tablo .k-bekleme { grid-area: bekleme; display: block; }
  .kayit-tablo .k-bekleme .gun { height: 24px; line-height: 24px; min-width: 0; padding: 0 8px; font-size: 12px; }
  .kayit-tablo .k-atanan { grid-area: atanan; font-size: 13px; }
  .urun-tablo tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ad ad" "kod fiyat" "kat marka"; }
  .urun-tablo .u-ad { grid-area: ad; font-size: 15px; }
  .urun-tablo .u-kod { grid-area: kod; color: var(--ikincil); }
  .urun-tablo .u-fiyat { grid-area: fiyat; font-weight: 700; }
  .urun-tablo .u-kat { grid-area: kat; }
  .urun-tablo .u-marka { grid-area: marka; text-align: right; color: var(--ikincil); }
  .urun-tablo .u-duzenle, .urun-tablo .bos-deger { display: none; }
  .fiyat-tablo tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ad ad" "kod std" "gir fark"; }
  .fiyat-tablo .f-ad { grid-area: ad; font-size: 15px; }
  .fiyat-tablo .f-kod { grid-area: kod; color: var(--ikincil); }
  .fiyat-tablo .f-std { grid-area: std; color: var(--ikincil); }
  .fiyat-tablo .f-std::before { content: 'Standart '; font-weight: 500; }
  .fiyat-tablo .f-std:has(.bos-deger) { display: none; }
  .fiyat-tablo .f-gir { grid-area: gir; text-align: left !important; }
  .fiyat-tablo .f-gir::before { content: 'Anlaşmalı fiyat (KDV hariç)'; display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--soluk); }
  .fiyat-tablo .fiyat-gir { width: 100%; max-width: 240px; height: 44px; text-align: left; }
  .fiyat-tablo .f-fark { grid-area: fark; align-self: end; padding-bottom: 9px; text-align: right !important; }
}
@container icerik (max-width: 691px) {
  .cam-izgara { grid-template-columns: 1fr 1fr; }
}
@container icerik (max-width: 653px) {
  .pano-sorgu .hizli { grid-template-columns: 1fr 1fr; }
}
/* --- form alanı daraldıkça (container: .form-sol) --- */
@container form (max-width: 760px) {
  .izgara > .c2 { flex-basis: 100%; } /* dar formda garanti seçimi kendi satırında */
}
@container form (max-width: 700px) {
  .islem-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tur-bant .kart-ic { flex-wrap: wrap; }
  .tur-bant .secim { width: 100%; }
}
@container form (max-width: 560px) {
  .seri-uyari { flex-wrap: wrap; }
  .seri-uyari .btn { width: 100%; }
  .secim { display: flex; flex-wrap: wrap; }
  .secim button { flex: 1 1 calc(50% - 4px); }
  .foto-izgara, .foto-satirlar { grid-template-columns: minmax(0, 1fr); }
  .kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zaman-ozet { flex-direction: column; align-items: center; gap: 4px; }
  .islem-kart { padding: 14px; }
  .islem-kart .tik { top: 12px; right: 12px; }
}

/* --- dokunmatik: kamerayla okutma düğmeleri --- */
@media (pointer: coarse), (max-width: 760px) {
  .kamera-btn { display: grid; }
  .tarayici:has(.kamera-btn) input { padding-right: 60px; }
}
.kamera-btn { place-items: center; flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px; background: var(--marka-acik); color: var(--marka); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--marka) 35%, transparent); }
.kamera-btn svg { width: 22px; height: 22px; }
.tarayici .kamera-btn { position: absolute; right: 6px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 12px; }
.mobil-eylem { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; align-items: center; gap: 8px; padding: 8px; border-radius: 20px; background: color-mix(in srgb, var(--kart) 90%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid var(--cizgi); box-shadow: 0 20px 44px -18px rgba(16, 24, 40, .42); }
.me-ikon { flex: none; width: 58px; height: 50px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--ikincil); background: var(--kart-2); box-shadow: inset 0 0 0 1px var(--cizgi); }
.me-ikon svg { width: 19px; height: 19px; color: var(--marka); }
.mobil-eylem .btn { flex: 1; min-width: 0; height: 50px; border-radius: 14px; font-size: 15px; }
.me-ilerleme { flex: none; align-self: stretch; min-width: 104px; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 6px 0 8px; border-radius: 14px; text-align: left; }
.me-ilerleme b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.me-ilerleme b small { font-size: 12px; font-weight: 600; color: var(--ikincil); }
.me-ilerleme i { display: block; height: 5px; border-radius: 3px; background: var(--kart-3); overflow: hidden; }
.me-ilerleme i span { display: block; height: 100%; border-radius: 3px; background: var(--marka); }
.mobil-grup-pdf { margin-left: auto; }

/* --- telefon: ≤760 px — native uygulama kabuğu --- */
@media (max-width: 760px) {
  body { font-size: 15px; -webkit-tap-highlight-color: transparent; }
  .uygulama { display: block; min-height: 100vh; min-height: 100dvh; padding: 0 max(12px, env(safe-area-inset-right)) calc(106px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  body[data-sayfa="yeni"] .uygulama, body[data-sayfa="kayit"] .uygulama { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .yan { display: none; }
  .ana { gap: 12px; }
  body.giris-modu .mobil-ust, body.giris-modu .mobil-alt { visibility: hidden; }

  /* üst uygulama çubuğu: buzlu cam; solda marka (alt sayfada geri), ortada kaydırınca beliren başlık, sağda hesap */
  .mobil-ust { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 4px; height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); background: color-mix(in srgb, var(--zemin) 84%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(18px); backdrop-filter: saturate(1.8) blur(18px); transition: box-shadow .25s; }
  .mobil-ust.kaydi { box-shadow: 0 1px 0 var(--cizgi), 0 10px 24px -20px rgba(16, 24, 40, .45); }
  .mu-marka { --boy: 32px; min-height: 44px; color: var(--metin); } /* logo kiti, telefon ölçeği */
  .mu-marka .marka-ad { color: var(--metin); }
  .mu-marka .marka-ad span { color: var(--marka); }
  .mu-geri { display: none; align-items: center; height: 44px; margin-left: -10px; padding: 0 10px 0 2px; border-radius: 12px; color: var(--marka); font-size: 16px; font-weight: 600; }
  .mu-geri svg { width: 28px; height: 28px; }
  .mu-geri:active { background: var(--kart-3); }
  .mobil-ust.geri .mu-geri { display: flex; }
  .mobil-ust.geri .mu-marka { display: none; }
  .mu-baslik { position: absolute; left: 50%; bottom: 0; max-width: calc(100% - 196px); transform: translateX(-50%); line-height: 56px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; pointer-events: none; }
  .mobil-ust.baslikli .mu-baslik, .mobil-ust.geri .mu-baslik { opacity: 1; }
  .mu-sag { margin-left: auto; display: flex; align-items: center; gap: 2px; }
  .mu-ikon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: var(--metin); }
  .mu-ikon:active { background: var(--kart-3); }
  .mu-ikon .avatar { width: 34px; height: 34px; border-radius: 11px; font-size: 12px; }

  /* alt sekme çubuğu: masaüstündeki yüzen koyu yeşil menünün telefondaki hâli; ortada "Yeni" */
  .mobil-alt { position: fixed; z-index: 70; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 70px; padding: 0 4px; border-radius: 24px; color: #fff;
    background: radial-gradient(120% 160% at 0% 0%, #13705F 0%, transparent 60%), linear-gradient(170deg, #0B4F46 0%, #073D36 55%, #052E29 100%);
    box-shadow: 0 20px 44px -16px rgba(5, 46, 41, .6), 0 2px 8px rgba(5, 46, 41, .22); }
  .mobil-alt > a, .mobil-alt > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 0; color: rgba(255, 255, 255, .64); font-size: 11px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; transition: color .2s; }
  .mobil-alt svg { position: relative; width: 22px; height: 22px; }
  .mobil-alt span { position: relative; white-space: nowrap; }
  .mobil-alt .aktif { color: #fff; }
  .mobil-alt .aktif::before { content: ''; position: absolute; top: 9px; left: 50%; width: 56px; height: 32px; margin-left: -28px; border-radius: 12px; background: rgba(255, 255, 255, .15); }
  .mobil-alt .ma-yeni { justify-content: flex-end; padding-bottom: 14px; color: rgba(255, 255, 255, .88); }
  .mobil-alt .ma-yeni.aktif::before { display: none; }
  .mobil-alt .ma-yeni b { position: absolute; top: -20px; left: 50%; width: 52px; height: 52px; margin-left: -26px; border-radius: 17px; display: grid; place-items: center; background: linear-gradient(145deg, #8EF5E2 0%, #3CC3AE 100%); color: #053F38; box-shadow: 0 0 0 5px #0A4A42, 0 14px 26px -10px rgba(20, 160, 140, .95); transition: transform .15s; }
  .mobil-alt .ma-yeni:active b { transform: scale(.94); }
  .mobil-alt .ma-yeni b svg { width: 26px; height: 26px; }
  .mobil-alt .sayac { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; display: grid; place-items: center; background: #FF8A4C; color: #fff; font: 700 10.5px/1 Inter, system-ui, sans-serif; box-shadow: 0 0 0 2px #0A4A42; }
  .mobil-alt .sayac:empty { display: none; }
  body[data-sayfa="yeni"] .mobil-alt, body[data-sayfa="kayit"] .mobil-alt { display: none; }
  /* klavye açıkken alt çubuklar girdinin üstüne binmesin. :focus'a bağlı DEĞİL: dokunurken çubuk belirip parmağın altına giriyor,
     "Forma git" gibi düğmeler basılmıyordu. JS görünür alan klavye kadar daralınca body.klavye verir. */
  body.klavye .mobil-alt { display: none; }
  body.klavye .mobil-eylem { visibility: hidden; }

  /* sayfa başlığı: büyük başlık (iOS gibi); kaydırınca üst çubukta küçüğü belirir */
  .ust { padding: 6px 4px 2px; }
  .ust h1 { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; }
  .ust p { margin-top: 5px; font-size: 13.5px; }
  .ust-sag { display: none; }
  body[data-sayfa="pano"] .ust, body[data-sayfa="yeni"] .ust, body[data-sayfa="kayit"] .ust, body[data-sayfa="profil"] .ust { display: none; } /* başlık üst çubukta (iki kez görünmesin) */

  /* kartlar */
  .kart { border-radius: 18px; }
  .kart-bas { padding: 14px 16px; }
  .kart-bas h3 { font-size: 16px; }
  .kart-ic { padding: 16px; }
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .bento > * { grid-column: 1 / -1; }
  .bento > .kpi-kart.c-4 { grid-column: span 2; }
  .bento > .kpi-kart.c-3 { grid-column: span 3; }
  .kpi-kart .kart-ic { padding: 14px 12px; gap: 0; justify-content: center; text-align: center; }
  .kpi-kart .ikon-cip { display: none; }
  .kpi-kart b.say { font-size: 22px !important; }
  .kpi-kart .ipucu { justify-content: center; font-size: 12px; line-height: 1.3; }
  body[data-sayfa="personel"] .kpi-kart .kart-ic { justify-content: flex-start; text-align: left; }
  body[data-sayfa="personel"] .kpi-kart .ipucu { justify-content: flex-start; }

  /* pano: önce iş (karşılama, sorgu, durumlar, kuyruk, son kayıtlar), sonra grafikler */
  .pano-hero { order: 1; } .pano-sorgu { order: 2; } .pano-durum { order: 3; } .pano-kuyruk { order: 4; } .pano-son { order: 5; }
  .pano-akis { order: 6; } .pano-musteri { order: 7; } .pano-tur { order: 8; } .pano-garanti { order: 9; } .pano-lider { order: 10; }
  .hero .kart-ic { padding: 20px 18px 18px; }
  .hero::before { right: -120px; top: -150px; }
  .hero small { font-size: 11px; }
  .hero h2 { margin: 4px 0 6px; font-size: 26px; }
  .hero p { font-size: 14.5px; }
  .cam-izgara { gap: 10px; margin-top: 18px; }
  .cam { padding: 12px 14px; gap: 8px; border-radius: 15px; }
  .cam .ust-sira { gap: 8px; }
  .cam .ust-sira span { width: 28px; height: 28px; border-radius: 9px; }
  .cam .ust-sira span svg { width: 16px; height: 16px; }
  .cam b { font-size: 26px; }
  .cam em { font-size: 12.5px; line-height: 1.3; }
  .pano-sorgu .kart-ic { gap: 12px; }
  .tarayici input { height: 54px; padding-right: 60px; font-size: 16px; }
  .hizli { gap: 8px; }
  .hizli a { min-height: 58px; padding: 10px 12px; font-size: 14px; }
  .durum-izgara { gap: 10px; padding: 12px; }
  .durum-kutu { padding: 14px; gap: 8px; border-radius: 15px; }
  .durum-kutu b { font-size: 26px; }
  .satir { padding: 12px 16px; }
  .lider { padding: 10px 16px; }
  .pano-akis .kart-bas { flex-wrap: wrap; row-gap: 6px; }
  .pano-akis .lejant { width: 100%; margin-left: 50px; }
  .grafik { height: 220px; padding: 10px 12px 12px; }
  .pano-musteri .grafik { height: 250px; }
  .grafik.bos-grafik { height: auto; min-height: 150px; } /* veri yokken: alt alta dizilen boş grafik kartları uzun boşluk bırakmasın */
  .tur-grafik { grid-template-columns: 120px minmax(0, 1fr); }
  .tur-pasta { height: 120px; }

  /* girdiler: iOS odaklanınca sayfayı büyütmesin (≥16 px), parmakla rahat basılsın (≥44 px) */
  .alan input:not([type=checkbox]):not([type=file]):not([type=range]), .alan select, .alan textarea, .girdi, .arama input, .suzgec select, .suzgec input[type=date], .fiyat-gir { font-size: 16px; }
  .alan input:not([type=checkbox]):not([type=file]):not([type=range]), .alan select, .girdi { height: 48px; }
  .btn { height: 46px; }
  .btn-k { height: 40px; padding: 0 14px; font-size: 13.5px; }
  .secim button { height: 48px; }
  .etiket-btn { height: 40px; padding: 0 12px; }
  .alan > label .etiket-btn { margin-block: -11px; }
  #urunAra { font-size: 16px !important; } /* satır içi 15 px: iOS odaklanınca sayfayı büyütürdü */
  /* ürün / malzeme adları iki satıra kadar: tek satırda kesilen benzer adlar ("2 ADET PARALEL…") ayırt edilemiyordu */
  .acilir button b, .parca-satir b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; }
  /* değişen malzeme satırı: ad tam genişlikte, adet düğmeleri altında (yan yana 4 düğme adı "PIL, TTS, UNR -ES…" diye kesiyordu) */
  .parca-satir { grid-template-columns: auto minmax(0, 1fr); row-gap: 8px; }
  .parca-satir > span:last-child { grid-column: 2; }
  .grup-listesi a { height: 44px; }
  .alan .sifre-sar .goster { width: 40px; height: 40px; right: 4px; } /* temel kural dosyada sonra geliyor: seçici güçlü olmalı */
  .alan .sifre-sar input:not([type=checkbox]):not([type=file]):not([type=range]) { padding-right: 50px; }
  .seri-cip { height: 40px; }
  .seri-cip button { width: 32px; height: 32px; }
  .adet-btn { width: 40px !important; height: 40px !important; }
  .cip { height: 40px; padding: 0 12px; font-size: 13.5px; }
  .ikon-btn { width: 44px; height: 44px; }

  /* kayıtlar: arama + süzgeç düğmesi, durum hapları yana kayar, süzgeçler düğmeyle açılır */
  .suzgec { gap: 10px; padding: 12px; }
  .suzgec .arama { order: 1; flex: 1 1 0; min-width: 0; max-width: none; }
  .suzgec .arama input { width: 100%; }
  .suzgec-ac { order: 2; position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 13px; border: 1px solid var(--cizgi-g); background: var(--kart); color: var(--ikincil); }
  .suzgec-ac.dolu, .suzgec.acik .suzgec-ac { border-color: var(--marka); background: var(--marka-acik); color: var(--marka-koyu); }
  .suzgec-ac em { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--marka); color: #fff; font: 700 11px/20px Inter, system-ui, sans-serif; text-align: center; box-shadow: 0 0 0 2px var(--kart); }
  .suzgec-ac em:empty { display: none; }
  #durumCip { order: 3; flex: 1 1 100%; flex-wrap: nowrap; margin: 0 -12px; padding: 0 12px 2px; overflow-x: auto; scrollbar-width: none; }
  #durumCip::-webkit-scrollbar { display: none; }
  #durumCip .cip { flex: none; }
  .suzgec .kir { display: none; }
  .suzgec > .sec-ikon, .suzgec > select { order: 4; display: none; }
  .suzgec.acik > .sec-ikon { display: flex; flex: 1 1 100%; }
  .suzgec.acik > .sec-ikon select { width: 100%; }
  .suzgec.acik > select { display: block; flex: 1 1 100%; min-width: 0; } /* tam genişlik: yarımda "Tüm müşterile…" kesiliyordu */
  .suzgec > .aralik { order: 4; flex: 1 1 100%; min-width: 0; } /* tarih seçiminin yerinde (ondan hemen sonra gelir, o gizlenir) */
  .suzgec:not(.acik) > .aralik { display: none !important; }
  .aralik input[type=date] { flex: 1; min-width: 0; }
  .sonuc-bar { gap: 8px; min-height: 52px; padding: 8px 12px 8px 16px; font-size: 13.5px; }
  .sonuc-bar .yazi, #excel2 { display: none; }
  .sonuc-bar .kisa-yazi { display: inline; }
  .tablo-sar { max-height: none; overflow: visible; }
  /* ürün / fiyat */
  .urun-sekme-satir .ipucu { display: none; }
  .sekmeler { display: flex; width: 100%; }
  .sekmeler button { flex: 1; justify-content: center; height: 42px; padding: 0 10px; }
  .urun-eylem { flex: 1 1 100%; margin-left: 0 !important; flex-wrap: wrap; }
  .urun-eylem > * { flex: 1 1 calc(50% - 4px); }
  .urun-eylem #sablon { display: none; }
  .suzgec .arama:has(#uAra) { flex: 1 1 100%; }
  .fiyat-eylem { flex: 1 1 100%; margin-left: 0 !important; }
  .fiyat-eylem .arama { flex: 1; }
  .fiyat-eylem .arama input { width: 100%; }
  /* personel / profil */
  .personel-ust { flex-wrap: wrap; gap: 12px; }
  .personel-ust .btn { flex: 1 1 100%; margin-left: 0 !important; }
  .personel-izgara { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* kayıt / form */
  .bolum-bas { gap: 12px; }
  .ozet-no { padding: 18px; }
  .karar { padding: 14px 16px 16px; }
  .tur-sec .kart-ic { padding: 20px 16px; gap: 16px; }
  .tur-kart { padding: 20px 18px; }
  .tur-git { top: 18px; right: 18px; }

  /* pencereler → alttan açılan sayfa (tutamaçtan aşağı çekince kapanır) */
  .pencere-perde { place-items: end stretch; padding: 0; }
  .pencere { display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 40px); border-radius: 24px 24px 0 0; padding-bottom: env(safe-area-inset-bottom); animation: sayfaYukari .34s cubic-bezier(.2, .85, .25, 1) both; }
  .tutamac { display: block; flex: none; height: 22px; margin-bottom: -6px; touch-action: none; cursor: grab; }
  .tutamac::before { content: ''; display: block; width: 40px; height: 5px; margin: 9px auto 0; border-radius: 3px; background: var(--cizgi-g); }
  .pencere > .kart-bas { touch-action: none; }
  .pencere > .kart-ic { overflow: auto; overscroll-behavior: contain; }
  .pencere-alt { padding: 12px 16px; }
  .pencere-alt .btn { flex: 1; }

  /* bildirim alt çubuğun üstünde */
  .bildirim { bottom: calc(96px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 32px); line-height: 1.35; }
  /* giriş */
  .giris-katman { padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom)); }
  .giris-kart { padding: 26px 22px 22px; border-radius: 26px; }
}
@keyframes sayfaYukari { from { transform: translateY(100%); } }

/* --- dokunmatik (fare yok): dokununca "üzerine gelme" görünümü yapışıp kalıyordu — seçimi kaldırılan kart seçili gibi renkli
   kalıyordu. Üzerine gelme efektleri kapalı; yerine basılıyken hafif küçülme (native his). --- */
@media (hover: none) {
  .islem-kart:hover, .tur-kart:hover, .durum-kutu:hover, .hizli a:hover { transform: none; }
  .islem-kart:not(.secili):hover { border-color: var(--cizgi); }
  .tur-kart:hover { border-color: var(--cizgi); background: var(--kart); box-shadow: none; }
  .tur-kart:hover .tur-git { background: none; border-color: var(--cizgi); color: var(--ikincil); }
  .durum-kutu:hover { border-color: transparent; }
  .hizli a:hover { border-color: var(--cizgi); }
  .cip:not(.secili):hover { border-color: var(--cizgi); color: var(--ikincil); }
  .secim button:not(.secili):hover { border-color: var(--cizgi-g); }
  .satir:hover, .tablo tbody tr:hover td { background: none; }
  .foto:hover { border-color: var(--cizgi); color: var(--ikincil); }
  .ikon-btn:hover { color: var(--ikincil); border-color: var(--cizgi); }
  .btn-birincil:hover { background: var(--marka); }
  .btn-ikincil:hover { background: var(--kart); }
  .btn-sade:hover { color: var(--ikincil); }
  .nav a:not(.aktif):hover { background: none; color: rgba(255, 255, 255, .74); }
  .islem-kart:active, .tur-kart:active, .durum-kutu:active, .hizli a:active, .secim button:active, .cip:active, .menu-izgara > *:active { transform: scale(.98); }
  .satir:active, .kart-tablo tbody tr:active { background: var(--kart-2); }
}

/* --- alt menü sayfası (telefon: "Menü" sekmesi ve hesap düğmesi) --- */
.menu-sayfa .kart-ic { display: flex; flex-direction: column; gap: 14px; }
.menu-kim { display: flex; align-items: center; gap: 14px; }
.menu-kim b { display: block; font-size: 17px; }
.menu-kim small { display: block; font-size: 13px; color: var(--ikincil); }
.menu-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.menu-izgara a, .menu-izgara button { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 14px; border-radius: 15px; background: var(--kart-2); border: 1px solid var(--cizgi); font-weight: 600; font-size: 14.5px; color: var(--metin); text-align: left; }
.menu-izgara svg { color: var(--marka); }
.menu-izgara a:active, .menu-izgara button:active { background: var(--kart-3); }
.menu-satirlar { display: flex; flex-direction: column; }
.menu-satir { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 4px; border-top: 1px solid var(--cizgi); background: none; font-size: 15px; font-weight: 600; color: var(--metin); text-align: left; cursor: pointer; }
.menu-satir:active { background: var(--kart-2); }
.menu-satir svg { color: var(--ikincil); }
.menu-satir .anahtar, .menu-satir .anahtar:has(input:checked) { margin-left: auto; padding: 0; border: 0; background: none; }
.menu-satir.cikis, .menu-satir.cikis svg { color: var(--kirmizi); }
.menu-alt { text-align: center; font-size: 12px; color: var(--soluk); }

/* --- daha önce kaydedilmiş seri no: ekranın ortasında uyarı (her genişlikte ortada; kamera ekranının da üstünde) --- */
.uyari-perde { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 16px; background: rgba(4, 20, 18, .5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: solgun .18s both; }
.uyari-kutu { width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 24px 20px; border-radius: 26px; background: var(--kart); color: var(--metin); text-align: center; box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .55); animation: uyariGel .32s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes uyariGel { from { opacity: 0; transform: translateY(14px) scale(.95); } }
.uy-ikon { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--turuncu-acik); color: var(--turuncu); box-shadow: 0 0 0 8px color-mix(in srgb, var(--turuncu) 8%, transparent); }
.uy-ikon svg { width: 30px; height: 30px; }
.uyari-kutu h3 { margin: 6px 0 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; text-wrap: balance; }
.uyari-kutu p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ikincil); text-wrap: pretty; }
.uyari-kutu p b { color: var(--metin); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.uy-liste { align-self: stretch; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.uy-liste a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--turuncu-acik); }
.uy-liste a span { flex: 1; min-width: 0; }
.uy-liste a b { display: block; font-size: 14px; }
.uy-liste a small { display: block; font-size: 12.5px; color: var(--ikincil); }
.uy-liste a svg { color: var(--turuncu); }
.uy-alt { align-self: stretch; display: flex; gap: 10px; margin-top: 6px; }
.uy-alt .btn { flex: 1; height: 50px; font-size: 15px; }
.uy-not { font-size: 12px; color: var(--soluk); line-height: 1.45; }
.uyari-kutu .btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--marka) 38%, transparent); outline-offset: 2px; }

/* --- kamerayla okutma (QR + barkod) --- */
.okuyucu { position: fixed; inset: 0; z-index: 130; display: flex; flex-direction: column; background: #000; color: #fff; animation: solgun .2s both; }
.okuyucu video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ok-ust { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) 14px 24px; background: linear-gradient(rgba(0, 0, 0, .62), transparent); }
.ok-ust b { flex: 1; font-size: 17px; font-weight: 700; }
.ok-dugme { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; }
.ok-dugme.acik { background: #fff; color: #053F38; }
.ok-cerceve { position: absolute; z-index: 1; left: 50%; top: 44%; width: min(74vw, 320px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 26px; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .42); transition: box-shadow .2s; }
.ok-kose { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); fill: none; stroke: #5EE3CD; stroke-width: 4.5px; stroke-linecap: round; stroke-linejoin: round; transition: stroke .2s; }
.ok-kose path { vector-effect: non-scaling-stroke; }
.okuyucu.okundu .ok-kose { stroke: #fff; }
.ok-dugme[hidden] { display: none; }
.okuyucu.okundu .ok-cerceve { box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .42), inset 0 0 0 4px #5EE3CD; }
.ok-alt { position: relative; z-index: 2; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 16px calc(20px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0, 0, 0, .72)); text-align: center; }
.ok-alt p { margin: 0; max-width: 340px; font-size: 14.5px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.ok-alt .btn { min-width: 160px; }
.ok-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-height: 92px; overflow: auto; }
.ok-liste span { height: 30px; padding: 0 10px; border-radius: 9px; display: inline-flex; align-items: center; background: rgba(255, 255, 255, .16); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .02em; font-size: 13px; }
.ok-hata { position: absolute; z-index: 2; left: 50%; top: 44%; width: min(84vw, 360px); transform: translate(-50%, -50%); padding: 22px; border-radius: 20px; background: rgba(20, 28, 27, .92); text-align: center; font-size: 14.5px; line-height: 1.5; }
.ok-hata b { display: block; margin-bottom: 6px; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- hesaplar (1 Eki): giriş katmanı, kullanıcı menüsü, profil, atama, geçici şifre ---------- */
body.giris-modu { overflow: hidden; }
body.giris-modu .uygulama { visibility: hidden; } /* arkada durur: oturum düşünce sayfadaki iş kaybolmaz */
.giris-katman { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; overflow: auto;
  background: radial-gradient(900px 520px at 12% 8%, rgba(20, 160, 140, .32), transparent 62%), linear-gradient(135deg, #053F38, #0A5A50 55%, #0E6F75); }
.giris-kart { width: min(420px, 100%); background: var(--kart); color: var(--metin); border-radius: 24px; padding: 30px 30px 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .6); animation: giris .45s cubic-bezier(.2, .8, .2, 1) both; }
.giris-marka { --boy: 40px; } /* logo kiti, giriş ekranı ölçeği (yazının altında alt satır) */
.giris-marka .marka-ad { display: block; color: var(--metin); }
.giris-marka .marka-ad span { color: var(--marka); }
.giris-marka small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ikincil); font-weight: 500; }
.giris-kart h1 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.giris-kart h1 + p { margin: 4px 0 0; color: var(--ikincil); font-size: 14px; }
.giris-kart form { display: flex; flex-direction: column; gap: 14px; }
.giris-kart form > .btn { width: 100%; height: 48px; font-size: 15px; margin-top: 2px; }
.giris-hata { color: var(--kirmizi); font-size: 13.5px; font-weight: 600; }
.giris-hata:empty { display: none; }
.giris-alt { margin: 0; font-size: 12.5px; color: var(--ikincil); text-align: center; }
button.giris-alt.baglanti { background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font: inherit; font-size: 13px; }
.giris-not { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--marka-acik); color: var(--marka-koyu); font-size: 13px; line-height: 1.45; }
.giris-not svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.giris-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--cizgi-g); font-size: 12.5px; color: var(--ikincil); }
.giris-demo b { color: var(--metin); white-space: nowrap; }
.giris-demo .btn { grid-row: 1 / span 2; grid-column: 2; }
.giris-demo span { grid-column: 1; line-height: 1.5; }
.giris-demo code { font: 600 12.5px ui-monospace, Consolas, monospace; color: var(--metin); }
.sifre-sar { position: relative; }
.alan .sifre-sar input:not([type=checkbox]):not([type=file]):not([type=range]) { padding-right: 48px; }
.sifre-sar .goster { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--soluk); background: none; border: 0; cursor: pointer; }
.sifre-sar .goster:hover { background: var(--kart-2); color: var(--metin); }
.sifre-sar .goster svg { width: 18px; height: 18px; }

.kullanici { cursor: pointer; position: relative; outline: none; transition: background .15s; }
.kullanici:hover, .kullanici.acik { background: rgba(255, 255, 255, .13); }
.kullanici:focus-visible { box-shadow: 0 0 0 2px rgba(157, 231, 209, .7); }
.kullanici .degistir { pointer-events: none; }
.kullanici-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30; display: none; padding: 6px; border-radius: 14px; background: var(--kart); color: var(--metin); border: 1px solid var(--cizgi); box-shadow: 0 18px 44px -12px rgba(0, 0, 0, .5); cursor: default; }
.kullanici.acik .kullanici-menu { display: block; animation: giris .2s both; }
.kullanici-menu a, .kullanici-menu button { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--metin); text-decoration: none; background: none; border: 0; cursor: pointer; text-align: left; }
.kullanici-menu a:hover, .kullanici-menu button:hover { background: var(--kart-2); }
.kullanici-menu svg { width: 17px; height: 17px; color: var(--ikincil); }
.kullanici-menu .cikis, .kullanici-menu .cikis svg { color: var(--kirmizi); }

.profil-ust { display: flex; align-items: center; gap: 14px; }
.profil-ust b { display: block; font-size: 18px; }
.profil-ust > div > span { color: var(--ikincil); font-size: 13.5px; } /* avatarın harflerini soluklaştırmasın */
.cikis-dugme, .cikis-dugme svg { color: var(--kirmizi); }

.atama-kutu { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 5px 5px 12px; border: 1px solid var(--cizgi-g); border-radius: 12px; background: var(--kart-2); }
.atama-kutu b { font-weight: 600; }
.atama-kutu .ipucu { flex: 1; }
.atama-kutu .btn { margin-left: auto; }
.hesap-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
.gecici-sifre { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--kart-2); border: 1px dashed var(--cizgi-g); }
.gecici-sifre code { flex: 1; font: 700 24px/1 ui-monospace, Consolas, monospace; letter-spacing: .06em; color: var(--metin); user-select: all; }