/* Kart Tamir Servis Takip — bento arayüz */
:root {
  --zemin: #EEF1F5;
  --kart: #FFFFFF;
  --kart-2: #F6F8FA;
  --kart-3: #EEF1F6;
  --cizgi: #E1E6EC;
  --metin: #111827;
  --ikincil: #5F6877;
  --soluk: #6B7584;
  --etiket: #2E3746;
  --yer-tutucu: #A3ABB7;
  --cizgi-g: #D3DAE3;
  /* marka: gece laciverti (2 Eki 2026; önce Gilbarco360 yeşili #0E7A6B). Yeşil yalnız --yesil: tamamlandı / garanti içi */
  --marka: #1D57B8;
  --marka-koyu: #17469A;
  --marka-derin: #0E2747;
  --marka-acik: #E9EFFA;
  --mavi: #2563EB; --mavi-acik: #EAF1FF;
  --camgobegi: #0891B2; --camgobegi-acik: #E0F4F8; /* "Kabul edildi": marka mavisiyle karışmasın */
  --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(9, 28, 53, .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: #090D14;
  --kart: #10161F;
  --kart-2: #141B26;
  --kart-3: #19212D;
  --cizgi: #222C3A;
  --metin: #E8EDF4;
  --ikincil: #A3AEBC;
  --soluk: #8592A3;
  --etiket: #D3DCE7;
  --yer-tutucu: #5E6B7C;
  --cizgi-g: #2E3A4B;
  --marka: #3B7DE6;
  --marka-koyu: #8CB6FF;
  --marka-acik: rgba(59, 125, 230, .16);
  --mavi: #6EA0FF; --mavi-acik: rgba(59, 130, 246, .15);
  --camgobegi: #4CC9E6; --camgobegi-acik: rgba(8, 145, 178, .18);
  --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%, #2A5C9A 0%, transparent 60%), linear-gradient(170deg, #14335C 0%, #0E2747 55%, #091C35 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(96, 165, 250, .2), transparent); pointer-events: none; }
/* marka (1 Eki): Gilbarco halka ikonu (beyaz) + "Fix360" — Gilbarco360 kenar çubuğundaki dille aynı; "360" buz mavisi (2 Eki, önce 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); }
/* "Ürün Kime Ait" Turpak düğmesinde Turpak logosu (2 Eki); koyu temada beyaz */
.kaynak-logo { display: block; height: 22px; width: auto; }
[data-tema="koyu"] .kaynak-logo { filter: brightness(0) invert(1); }
[data-tema="koyu"] .mu-marka img, [data-tema="koyu"] .giris-logo { filter: brightness(0) invert(1); } /* açık zemindeki lacivert halka koyu temada beyaz */
.marka-ad { font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.marka-ad span { color: #8FD3FF; }
.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: #0E7A6B; color: #fff; } /* uygulamanın yeşili (2 Eki: turuncu üstünde beyaz rakam okunmuyordu 2.3:1 → vişne → "yeşil de olabilir"; 5.2:1) */
.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 > div:first-child { align-self: flex-start; } /* alt yazısız sayfada (Yeni kayıt) başlık aşağı kaymasın: her sayfada aynı yükseklik */
.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-camgobegi { --c: var(--camgobegi); --c-acik: var(--camgobegi-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); }
/* sayfa kartları beklemeden, tam görünür gelir (2 Eki: "ekranı yenileyince donuk donuk geliyor"); .giris yalnız işaret. Açılır liste ve
   pencerenin kısa açılışı (giris anahtar karesi) tıklamayla oynar, durur */
/* giriş animasyonu her kartı ayrı katman yapıyor: açılır liste (EPDK, ürün, malzeme, aksesuar…) alttaki kartın ARKASINDA kalıyordu
   (2 Eki: "kayma var") → açık listesi ya da odağı olan kart öne alınır */
.kart:has(.acilir.acik), .kart:focus-within { z-index: 6; }
#baslik:empty::before { content: "\200b"; } /* başlık yazılana kadar satır yüksekliği dursun (sayfa kaymasın) */
@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, #0B2546 0%, #174C8C 52%, #2273BE 100%); background-size: 160% 160%; animation: 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: #2F6BD0; }
.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; }
/* 6 Eki 2026 (çoklu seri yeniden): çipte SAP durumu ve "N. geliş" küçük rozet; engelli seride kırmızı çerçeve */
.seri-cip .rozet { height: 22px; padding: 0 7px; gap: 4px; font-size: 11.5px; letter-spacing: 0; }
.seri-cip .rozet svg { width: 13px; height: 13px; }
.seri-cip .sap-rozet.tik { cursor: pointer; }
.seri-cip.engel { border-color: color-mix(in srgb, var(--kirmizi) 50%, transparent); background: var(--kirmizi-acik); }
.seri-giris .arti:disabled { opacity: .4; pointer-events: none; box-shadow: 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; }
/* biten işte hiç işlem seçilmeden Kaydet denendi (5 Eki 2026): seçilmemiş kartlar kırmızı çerçeveli */
.islem-izgara.hata .islem-kart:not(.secili), .islem-izgara.hata .islem-kart:not(.secili) .tik { border-color: var(--kirmizi); }

/* 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, #0B2546, #174C8C 55%, #2273BE); 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 */
/* 2 Eki ("burası biraz karışık"): arama kalan yeri doldurur, durum hapları sağa yaslanır; alttaki 5 süzgeç eşit genişlikte satırı doldurur
   (Petrol şirketi kutusu en uzun EPDK adı kadar genişleyip son kutuyu alt satıra itiyordu) → iki satırın sağ kenarı hizalı */
.suzgec .arama { max-width: none; }
.suzgec > .cip-grup { max-width: 100%; } /* sığmazsa bütün olarak alt satıra iner, orada da sığmazsa kendi içinde kırılır */
.suzgec > select, .suzgec > .sec-ikon { flex: 1 1 150px; min-width: 0; }
.suzgec > .sec-ikon select { width: 100%; }
.suzgec > select { text-overflow: ellipsis; }
.suzgec > .aralik { flex: none; }
/* tarih kutusu (2 Eki: "direkt tarih seçebilsin"): her zaman iki tarih; tarih seçilince marka zeminiyle vurgulanır; sağda hazır aralıklar */
.suzgec > .tarih-kutu { position: relative; flex: none; display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 4px 0 13px; border: 1px solid var(--cizgi-g); border-radius: 12px; background: var(--kart); color: var(--metin); transition: border-color .15s, box-shadow .15s; }
.suzgec > .tarih-kutu:hover { border-color: color-mix(in srgb, var(--cizgi-g) 60%, var(--ikincil)); }
.suzgec > .tarih-kutu:focus-within { border-color: var(--marka); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka) 14%, transparent); }
.suzgec > .tarih-kutu.dolu { border-color: var(--marka); background: var(--marka-acik); color: var(--marka-koyu); }
.tarih-kutu > svg { width: 17px; height: 17px; flex: none; margin-right: 4px; color: var(--soluk); }
.tarih-kutu.dolu > svg { color: var(--marka); }
.suzgec .tarih-kutu input[type=date] { width: 124px; height: 40px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: inherit; box-shadow: none; font-size: 14px; }
.suzgec .tarih-kutu input[type=date]:focus { box-shadow: none; background: color-mix(in srgb, var(--marka) 10%, transparent); }
.tarih-kutu .ayrac { color: var(--soluk); }
.tk-dugme { flex: none; width: 30px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--ikincil); }
.tk-dugme:hover { background: color-mix(in srgb, var(--marka) 12%, transparent); color: var(--marka-koyu); }
.tk-dugme svg { width: 16px; height: 16px; }
.tk-dugme[hidden] { display: none; }
.tarih-kutu .tk-menu { left: auto; right: 0; width: 190px; }
.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) */
.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 select { height: 40px; min-width: 150px; padding: 0 30px 0 6px; border: 0; border-radius: 8px; background-color: transparent; color: var(--marka-koyu); box-shadow: none; }
.suzgec .aralik select:focus { box-shadow: none; background-color: 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: #0E2747; 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; white-space: nowrap; flex-shrink: 0; }
.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); }

/* ================= 2 Eki 2026: tanımlamalar, EPDK, çoklu seçim, tek seri no, kronoloji, kayıt bilgileri, iptal, pano tipleri =================
   ("manuel hiçbir şey olmayacak, tanımlamalardan drop down", "cihaz kronolojisi net görünsün", "künye daha anlaşılır olsun") */
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* form: her satır kendi ızgarası (EPDK lisans + ünvan, servis + no yan yana kalsın); satırlar arası boşluk ızgaranınkiyle aynı */
.izgara-grup { display: flex; flex-direction: column; gap: 16px; }
/* isteğe bağlı açılır kutu boşken (Söken Yetkili Servis) yer tutucu gibi soluk */
.alan select.bos { color: var(--yer-tutucu); font-weight: 400; }
/* kendiliğinden dolan, elle yazılmayan kutu (İstasyon Ünvanı, Turpak Yetkili Servis No): zemin gri, değer koyu */
.alan input:not([type=checkbox]):not([type=file]):not([type=range]).oto { background: var(--kart-2); color: var(--metin); cursor: default; text-overflow: ellipsis; }

/* çoklu seçimli açılır kutu (aksesuar, dış görünüm): kapalıyken öteki açılır kutularla aynı, açılınca işaretli liste */
.coklu { position: relative; }
.coklu-dugme { display: block; width: 100%; height: 46px; border: 1px solid var(--cizgi-g); border-radius: 12px; padding: 0 42px 0 14px; color: var(--metin); font-size: 15px; font-weight: 500; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s;
  background: var(--kart) 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") no-repeat right 14px center / 18px; }
.coklu.acik .coklu-dugme { 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='m18 15-6-6-6 6'/%3E%3C/svg%3E"); }
[data-tema="koyu"] .coklu-dugme { 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"); }
[data-tema="koyu"] .coklu.acik .coklu-dugme { 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='m18 15-6-6-6 6'/%3E%3C/svg%3E"); }
.coklu-dugme .yer { color: var(--yer-tutucu); font-weight: 400; }
.coklu-dugme:hover { border-color: color-mix(in srgb, var(--cizgi-g) 60%, var(--ikincil)); }
.coklu-dugme:focus-visible, .coklu.acik .coklu-dugme { outline: none; border-color: var(--marka); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka) 14%, transparent); }
.alan.hata .coklu-dugme { border-color: var(--kirmizi); }
.coklu-liste button { grid-template-columns: auto minmax(0, 1fr); padding: 9px 12px; }
.coklu-liste button b { font-weight: 500; }
.coklu-liste button:focus-visible { outline: none; background: var(--marka-acik); }
.coklu-liste .kutucuk { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--cizgi-g); background: var(--kart); color: transparent; display: grid; place-items: center; transition: background .12s, border-color .12s; }
.coklu-liste .kutucuk svg { width: 14px; height: 14px; stroke-width: 3; }
.coklu-liste [aria-selected="true"] .kutucuk { background: var(--marka); border-color: var(--marka); color: #fff; }
.coklu-liste [aria-selected="true"] b { font-weight: 600; color: var(--marka-koyu); }
/* tek seçimli açılır kutu (2 Eki: "hep aşağıda olmalı"): <select> yerinde, görünmez; seçili satırda sağda onay */
.tek-secim > select { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.coklu-dugme:disabled { background-color: var(--kart-2); color: var(--soluk); cursor: not-allowed; }
.coklu-dugme:disabled, [data-tema="koyu"] .coklu-dugme:disabled { background-image: none; } /* kilitli: açılır ok yok */
.rozet.t-kilit { background: var(--kart); color: var(--ikincil); box-shadow: inset 0 0 0 1px var(--cizgi-g); }
/* SAP'ın doldurduğu alanlar kilitli (7 Eki 2026, SAP 3. aşama; yalnız Tamir Kontrol): kilitli açılır kutularla (.coklu-dugme:disabled) aynı salt okunur görünüm.
   Ürün Adı'nın satır içi zemini olduğundan !important; kilit kalkınca (seri listeden çıkınca) sınıf gider, kutular eski görünümüne döner */
.alan.sap-kilit input:disabled { background: var(--kart-2) !important; color: var(--ikincil); cursor: not-allowed; }
.alan.sap-kilit select:disabled { background-color: var(--kart-2); background-image: none; color: var(--ikincil); cursor: not-allowed; } /* dokunmatikte yerel select (fareli ekranda özel düğme: .coklu-dugme:disabled); açılır ok yok */
.alan.sap-kilit .secim button:disabled { cursor: not-allowed; }
.alan.sap-kilit .secim button:disabled:not(.secili) { opacity: .5; }
.alan.sap-kilit .secim button:disabled:not(.secili):hover { border-color: var(--cizgi-g); }
.tek-liste button { grid-template-columns: minmax(0, 1fr) auto; }
.tek-liste button svg { width: 17px; height: 17px; stroke-width: 2.6; color: var(--marka); visibility: hidden; }
.tek-liste [aria-selected="true"] { background: var(--marka-acik); }
.tek-liste [aria-selected="true"] svg { visibility: visible; }
.tek-liste .bos-secenek b { color: var(--soluk); font-weight: 400; }
.tek-liste button:disabled { opacity: .45; cursor: not-allowed; }
.coklu-liste { scroll-margin-bottom: 16px; }
@media (max-width: 760px) { .coklu-liste { scroll-margin-bottom: 104px; } } /* telefonda alttaki sabit çubuğun üstünde kalsın */
.girdi-sar:has(.tek-secim) .ic-rozet { right: 40px; } /* rozet aşağı okun solunda */
.ml-bas.alan .tek-secim { width: 132px; }

/* seri no: tek cihaz (kutu + kamera + "Seri numarası yok") */
.seri-kutu.tek { border: 0; padding: 0; background: none; }
.seri-yok { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; height: 46px; padding: 0 16px; border: 1px solid var(--cizgi-g); border-radius: 14px; background: var(--kart); font-size: 14px; font-weight: 600; color: var(--ikincil); white-space: nowrap; cursor: pointer; user-select: none; transition: border-color .15s, background .15s, color .15s; }
.seri-yok input { width: 18px; height: 18px; margin: 0; accent-color: var(--marka); cursor: pointer; }
.seri-yok:hover { border-color: color-mix(in srgb, var(--cizgi-g) 60%, var(--ikincil)); color: var(--metin); }
.seri-yok:has(input:checked) { border-color: var(--marka); background: var(--marka-acik); color: var(--marka-koyu); }
/* seri numarası yoksa adet (2 Eki) */
.adet-kutu { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 46px; padding: 0 5px 0 14px; border: 1px solid var(--marka); border-radius: 14px; background: var(--marka-acik); color: var(--marka-koyu); font-size: 14px; font-weight: 600; white-space: nowrap; }
.adet-kutu[hidden] { display: none; }
.alan .adet-kutu input:not([type=checkbox]):not([type=file]):not([type=range]) { width: 76px; height: 40px; padding: 0 8px; border-radius: 10px; text-align: center; font-size: 16px; font-weight: 700; background: var(--kart); }
/* kilitli adet kutusu (seri numarasız pencereden eklenmiş, SAP adet kontrolü; Düzeltme turu 1): öteki kilitli alanlar gibi soluk. Girdilerin temel kuralı :not×3 öncelikte
   (0,5,1) → kilit kuralı aynı zincire :disabled eklenerek yazıldı (0,6,1); kutu da kilitli zeminde, sayı öteki kilitli girdiler (Ürün Adı, Stok Kodu) gibi normal kalınlıkta. Kilitsiz adet kutusu eskisi gibi */
.adet-kutu:has(input:disabled) { border-color: var(--cizgi-g); background: var(--kart-2); color: var(--ikincil); }
.alan .adet-kutu input:not([type=checkbox]):not([type=file]):not([type=range]):disabled { background: var(--kart-2); border-color: var(--cizgi-g); color: var(--metin); font-weight: 500; cursor: not-allowed; }
.adet-rozet { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 6px; background: var(--marka-acik); color: var(--marka-koyu); font-size: 12px; font-weight: 700; }
.kayit-tablo .k-seri .adet-rozet { display: table; margin: 4px 0 0; }
.kayit-tablo .seri-ic { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* çok uzun seri tabloyu taşırmasın; tamamı title'da */ /* "Seri no yok"un altında: seri sütunu genişlemesin */
/* atanan: formu açan kişi, kilitli (2 Eki) */
.kilitli-kisi { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 8px 0 10px; border: 1px dashed var(--cizgi-g); border-radius: 12px; background: var(--kart-2); }
.kilitli-kisi b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kilitli-kisi .rozet { margin-left: auto; flex-shrink: 0; }
.seri-giris .tarayici input:disabled { background: var(--kart-2); border-style: solid; border-color: var(--cizgi); cursor: not-allowed; }
.kamera-btn:disabled { opacity: .4; pointer-events: none; }
.alan.hata .seri-kutu.tek .tarayici input { border-color: var(--kirmizi); border-style: solid; }

/* işlem kartları: 5 işlem tek satırda (2 Eki akşam: "hepsini ufak küçültürsek tek satırda olabilir"; önce 3 + 2); kart içi sıkı:
   ikon 32, başlık 14, açıklama 12. Dar formda (< 700 px) 2'li ve eski ölçüler, tek kalan tam satır (DUYARLI bölümünde) */
.islem-izgara { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.islem-kart { padding: 12px; gap: 8px; border-radius: 14px; }
.islem-kart .ikon-cip { width: 32px; height: 32px; border-radius: 10px; }
.islem-kart .ikon-cip svg { width: 17px; height: 17px; }
.islem-kart b { font-size: 14px; line-height: 1.25; }
.islem-kart small { font-size: 12px; line-height: 1.4; }
.islem-kart .tik { top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 6px; }
.islem-kart .tik svg { width: 13px; height: 13px; }
/* Ürün Kime Ait · Petrol Şirketi · İş Emri No (2 Eki akşam: "tek satıra düşürebilirsin"): düğmeler sığınca (≥1700) tek satır,
   dar ekranda Ürün Kime Ait kendi satırında (1600'de "Dağıtım Şirketi" düğmesi sıkışıyordu) */
.izgara.kaynak-satir > .kaynak-alan { flex-basis: 100%; }
@media (min-width: 1700px) {
  .izgara.kaynak-satir > * { flex: 1 1 0; }
  .izgara.kaynak-satir > .kaynak-alan { flex: 1.7 1 0; } /* Petrol Şirketi / İş Emri No içerikleri kısa: pay Ürün Kime Ait düğmelerine (2 Eki akşam: "sol tarafla dip dibe") */
}
/* Ürün Kime Ait satırının altındaki iki kutulu satırlar üstteki sütunlarla hizalı (3 Eki): ≥1700'de ilk kutu = Ürün Kime Ait sütunu, ikincisi = Petrol
   Şirketi + İş Emri No sütunları. Tamirde İstasyon EPDK Lisans Numarası · İstasyon Ünvanı ("burayı da düzeltelim"); sevkte İş Tipi · Sevk Edilecek
   Petrol Şirketi ("montaj servis genel kutucuklarını küçültüp sağ tarafa pay bırakıyoruz"). Daha dar ekranda iki eşit kutu = Petrol Şirketi · İş Emri No */
@media (min-width: 1700px) {
  .izgara.ikili-satir > :first-child { flex: 1.7 1 0; }
  .izgara.ikili-satir > :last-child { flex: 2 1 18px; }
}
/* boş parça alanı ("Parça değişimi" seçili değil) dizilimde yer tutmasın: kartlarla İşlem Açıklaması arası 32 px oluyordu (2 Eki akşam: "çok fazla
   boşluk var, componentler arasındaki boşlukta dengesizlik var, nizami olsun") — bütün satırlar arası 16 px */
#parcaAlan:empty, #dParca:empty { display: none; }
/* Cihaz: Garanti Durumu Ürün Adı'nın yanında (2 Eki akşam: "sadece bu kısım ürün adının yanına"; üçlü satır beğenilmedi) — ≥1600'de, ikisi
   satırı tam doldurur (Stok Kodu alt satıra iner); altında ikisi de tam satır, Garanti Ürün Adı'nın hemen altında. Seri No (tam) bölümün ilk
   satırı (5 Eki: iş akışı seriyle başlar) */
.izgara > .urun-alan, .izgara > .garanti-alan { flex-basis: 100%; }
/* 3 Eki: alttaki satırla aynı sütunlar ("cihaz türü kutusunun bittiği yerde ürün adı kutusu da bitsin") — üç eşit sütun: Ürün Adı ikisini,
   Garanti Durumu Marka - Model'in sütununu alır */
@media (min-width: 1600px) {
  .izgara:has(> .garanti-alan) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .izgara:has(> .garanti-alan) > .urun-alan { grid-column: span 2; }
  .izgara:has(> .garanti-alan) > .tam { grid-column: 1 / -1; }
}
/* sevk hazırlıkta Kabul Bilgisi: Geliş Tarihi, Aksesuarlar, Dış Görünüm tek satırda, eşit (2 Eki akşam: "alanı güzel kullanırsak tek satır") */
.izgara.uclu > * { flex-basis: 10rem; }

/* cihaz kronolojisi: dikey zaman çizelgesi */
.kronoloji-kart .kart-ic { padding: 18px 20px 20px; }
.kronoloji { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kr-adim { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; position: relative; padding-bottom: 18px; }
.kr-adim:last-child { padding-bottom: 0; }
.kr-adim::before { content: ''; position: absolute; left: 19px; top: 46px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--cizgi); }
.kr-adim:last-child::before { display: none; }
.kr-adim.ok::before { background: color-mix(in srgb, var(--c) 32%, var(--cizgi)); }
.kr-nokta { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--kart); color: var(--soluk); border: 1.5px dashed var(--cizgi-g); }
.kr-nokta svg { width: 18px; height: 18px; }
.kr-adim.ok .kr-nokta { background: var(--c); color: #fff; border: 0; box-shadow: 0 8px 18px -10px var(--c); }
.kr-ic { min-width: 0; padding-top: 2px; }
.kr-bas { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.kr-bas b { font-size: 15px; font-weight: 600; }
.kr-bas time { font-size: 13.5px; font-weight: 600; color: var(--c); font-variant-numeric: tabular-nums; }
.kr-adim.bekliyor .kr-bas b { color: var(--ikincil); font-weight: 500; }
.kr-ic p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ikincil); }
.kr-ic p b { color: var(--metin); font-weight: 600; }
.kr-ic p .rozet { height: 22px; vertical-align: middle; }
.kr-ic p.kr-bek { font-size: 13px; color: var(--soluk); }
.kr-sure { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; height: auto; min-height: 26px; padding: 3px 10px; line-height: 1.35; border-radius: 8px; background: var(--kart-2); box-shadow: inset 0 0 0 1px var(--cizgi); font-size: 12.5px; font-weight: 600; color: var(--ikincil); font-variant-numeric: tabular-nums; }
.kr-sure svg { width: 14px; height: 14px; }
.kr-sure.vurgu { background: var(--c-acik); box-shadow: none; color: var(--c); }
.kr-once { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 18px; border-radius: 14px; background: var(--turuncu-acik); }
.kr-once b { font-size: 14px; }
.kr-once-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kr-once-liste a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--kart); box-shadow: inset 0 0 0 1px var(--cizgi); font-size: 12.5px; font-weight: 600; color: var(--metin); font-variant-numeric: tabular-nums; }
.kr-once-liste a:hover { box-shadow: inset 0 0 0 1px var(--turuncu); color: var(--turuncu); }
.kr-once-liste svg { width: 14px; height: 14px; color: var(--turuncu); }

/* kayıt bilgileri: formdaki bölümlerle aynı gruplar, her grupta etiket – değer satırları */
.kunye-gruplar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kunye-grup { border: 1px solid var(--cizgi); border-radius: 16px; overflow: hidden; }
.kunye-grup h4 { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 13.5px; font-weight: 700; color: var(--c); background: var(--c-acik); }
.kunye-grup h4 .ikon-cip { background: var(--kart); }
.kunye-grup dl { margin: 0; padding: 2px 14px 4px; }
.kv { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--cizgi); }
.kv:first-child { border-top: 0; }
.kv dt { font-size: 13px; color: var(--ikincil); }
.kv dd { margin: 0; min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.kv dd small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--soluk); }
.kv dd .rozet { height: 24px; }
.kv .bos-deger { color: var(--soluk); font-weight: 500; }
/* Kayıt Bilgileri'nde düzeltilebilen İş Tipi (6 Eki 2026): satırı büyütmeyen küçük seçim */
.kv:has(.kv-secim) { grid-template-columns: minmax(0, 1fr); gap: 8px; } /* değer sütunu üç düğmeye dar: etiket üstte, seçim tam genişlik */
.kv .kv-secim { gap: 6px; }
.kv .kv-secim button { flex: 1 1 0; min-width: 0; height: 32px; padding: 0 8px; border-radius: 9px; font-size: 13px; white-space: nowrap; overflow-wrap: normal; } /* dar formda da tek satır */
.kv .kv-secim button.secili { box-shadow: none; }

/* iptal */
.iptal-bant { background: var(--kirmizi-acik); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--kirmizi) 40%, transparent); }
.iptal-bant .kart-ic { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.iptal-bant .kart-ic > div { flex: 1; min-width: 0; }
.iptal-bant b { display: block; font-size: 15px; color: var(--kirmizi); }
.iptal-bant small { display: block; margin-top: 2px; font-size: 13px; color: var(--ikincil); overflow-wrap: anywhere; }
.kart.kilitli > * { opacity: .55; } /* kartın kendisinde değil: giriş animasyonu (both) kartın opacity'sini 1'de tutuyor */
.iptal-kart .kart-ic { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.iptal-kart .kart-ic > div { flex: 1; min-width: 0; }
.iptal-kart b { display: block; font-size: 14.5px; }
.iptal-kart small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ikincil); }
.btn-tehlike { background: var(--kart); color: var(--kirmizi); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--kirmizi) 55%, transparent); }
.btn-tehlike:hover { background: var(--kirmizi); color: #fff; }
.pencere .btn-tehlike { background: var(--kirmizi); color: #fff; box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--kirmizi) 70%, transparent); }
.pencere .btn-tehlike:hover { background: color-mix(in srgb, var(--kirmizi) 86%, #000); }
.ikon-btn.tehlike:hover { color: var(--kirmizi); border-color: var(--kirmizi); }
.kayit-tablo tr.iptal td:not(.k-durum):not(.k-pdf) { opacity: .5; }
/* satır sonu: PDF + iptal kısayolu (2 Eki) */
.satir-eylem { display: inline-flex; align-items: center; gap: 6px; }
/* erişim yetkileri (2 Eki): kişi × sayfa işaret tablosu */
.erisim-tablo th { text-align: center; white-space: normal; vertical-align: top; line-height: 1.3; width: 86px; padding: 12px 6px; letter-spacing: .03em; } /* ikonlar aynı hizada; iki satırlık ad aşağı uzar */
.erisim-tablo td { padding: 12px 6px; }
.erisim-tablo th span { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; }
.erisim-tablo th svg { width: 18px; height: 18px; color: var(--ikincil); }
.erisim-tablo th.e-kisi, .erisim-tablo td.e-kisi { text-align: left; width: auto; min-width: 210px; padding-left: 18px; vertical-align: middle; }
.erisim-tablo td { text-align: center; }
.erisim-tablo tbody tr { cursor: default; }
.erisim-tablo .kisi { display: inline-flex; align-items: center; gap: 11px; }
.erisim-tablo .kisi b { display: block; font-size: 14px; }
.erisim-tablo .kisi small { display: block; margin-top: 2px; color: var(--soluk); font-size: 12px; }
.erisim-tablo .kisi em { font-style: normal; font-weight: 600; color: var(--mor, #7C3AED); }
.erisim-kutu { width: 20px; height: 20px; margin: 0; accent-color: var(--marka); cursor: pointer; vertical-align: middle; }
.erisim-kutu:disabled { cursor: wait; }
.erisim-tablo th.e-eylem, .erisim-tablo td.e-eylem { text-align: right; width: 128px; padding-right: 18px; }
.satir-eylem .ikon-btn { width: 34px; height: 34px; box-shadow: none; }
/* Kayıtlar tablosu kartına sığar (2 Eki: "mac'de niye yarım gözüküyor"): tam tablo ~1600 px; kart daha darsa seri no ürün adının
   altına, serviste günü geliş tarihinin altına, garanti durumun altına, tür rozeti numaranın altına iner. Kendi kutusunda kayan tablo
   Mac'te (kaydırma çubuğu görünmüyor) sağdan kesik görünüyordu. Ölçü yalnız bu kartta (#icerik 1440 ve üstünde ölçülmez) */
/* satıra iptal kısayolu eklenince tablo 1920'de de kartına sığsın (2 Eki, ölçüldü: 1651 → ≤1602 px) */
.kayit-tablo .urun b { max-width: 262px; }
.kayit-tablo th.k-pdf, .kayit-tablo td.k-pdf { padding-left: 8px; padding-right: 8px; }
.satir-eylem .satir-iptal:hover { color: var(--kirmizi); border-color: color-mix(in srgb, var(--kirmizi) 40%, transparent); background: color-mix(in srgb, var(--kirmizi) 8%, var(--kart)); }
/* uzun EPDK unvanı tabloyu genişletmesin: sınır hücrede değil yazıda (hücrede olunca sütun eşit dağıtımdan pay alamıyordu) */
.kayit-tablo .k-musteri { white-space: nowrap; }
.kayit-tablo .sirket-ad { display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } /* 2 Eki akşam: 170 → 120 ("şirket ile iş tipi arasında uçurum var"; çoğu ad kısa: Turpak) */
/* İş tipi sütunu Şirket ile Geliş arasında (2 Eki akşam); kart 1200 px'ten darsa sütun gizlenir, iş tipi şirket adının altında küçük yazı */
.kayit-tablo th.k-istipi, .kayit-tablo td.k-istipi { padding-left: 12px; padding-right: 12px; white-space: nowrap; }
.kayit-tablo td.k-istipi { font-weight: 500; color: var(--metin); }
.kayit-tablo .dar-istipi { display: none; }
@container kayitlar (max-width: 1199px) {
  .kayit-tablo .k-istipi { display: none; }
  .kayit-tablo .dar-istipi { display: block; margin-top: 3px; font-size: 12px; font-weight: 500; color: var(--ikincil); }
}
.kayit-kart { container: kayitlar / inline-size; }
.kayit-tablo .dar-gun, .kayit-tablo .dar-garanti { display: none; }
@container kayitlar (max-width: 1600px) {
  .kayit-tablo .k-seri, .kayit-tablo .k-bekleme, .kayit-tablo .k-garanti { display: none; }
  .kayit-tablo .dar-seri { display: inline; }
  .kayit-tablo .dar-gun, .kayit-tablo .dar-garanti { display: block; margin-top: 6px; line-height: 1; }
  .kayit-tablo .dar-gun .ipucu { font-size: 12px; }
  .kayit-tablo .dar-gun .gun { display: inline-block; }
  .kayit-tablo .k-no .tur-rozet, .kayit-tablo .k-no .grup-rozet { display: flex; width: fit-content; margin: 5px 0 0; }
  .kayit-tablo .urun b, .kayit-tablo .urun small { max-width: 262px; } /* geliş altındaki "3 gündür serviste" yazısına yer */
  .kayit-tablo .urun small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@container kayitlar (max-width: 1060px) {
  .kayit-tablo .urun b, .kayit-tablo .urun small { max-width: 210px; }
  .kayit-tablo .sirket-ad { max-width: 110px; }
}

/* tanımlamalar (fiyat sayfasının düzeni: solda tür listesi, sağda satır içi düzenleme) */
.tanim-duzen .ml-ic button b { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.tanim-duzen .ml-ic button b svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--soluk); }
.tanim-duzen .ml-ic button.secili b svg { color: var(--marka); }
.fiyat-duzen:not(.tanim-duzen) .ml-ic button b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* uzun EPDK unvanı */
.tanim-bas { flex-wrap: wrap; row-gap: 12px; }
.tanim-ekle { margin-left: auto; display: flex; gap: 8px; }
.tanim-ekle input { width: 240px; height: 40px; border: 1px solid var(--cizgi-g); border-radius: 10px; padding: 0 12px; background: var(--kart); color: var(--metin); font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.tanim-ekle input.kod { width: 180px; }
.tanim-ekle input::placeholder { color: var(--yer-tutucu); }
.tanim-ekle input:focus { border-color: var(--marka); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka) 14%, transparent); }
.tanim-ekle .btn { height: 40px; }
.tanim-tablo tbody tr { cursor: default; }
.tanim-tablo td { vertical-align: middle; }
.tanim-tablo .t-sira { width: 84px; white-space: nowrap; }
/* Ürün Kataloğu: en üstte görünecek kalemler (3 Eki) — en üsttekilerde yukarı / aşağı / çıkar, ötekilerde "en üste al"; Tanımlamalar'daki oklarla aynı */
.urun-tablo .u-sira { width: 1%; white-space: nowrap; padding-right: 4px; }
.urun-tablo .u-sira .ikon-btn { display: inline-grid; width: 30px; height: 30px; margin-right: 4px; box-shadow: none; }
.urun-tablo .u-sira .ikon-btn svg { width: 15px; height: 15px; }
/* kalem grubu rozeti süzer (6 Eki 2026): basılınca yalnız o grup, seçiliyken yeniden basınca hepsi */
.urun-tablo button.kat-suz { border: 0; font-family: inherit; cursor: pointer; transition: box-shadow .15s; }
.urun-tablo button.kat-suz:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.urun-tablo button.kat-suz.secili { box-shadow: inset 0 0 0 1.5px var(--c); }
/* ürün penceresinde Sil: solda, kırmızı yazı (asıl eylem sağda) */
.pencere-alt .urun-sil { margin-right: auto; color: var(--kirmizi); }
.tanim-tablo .t-sira .ikon-btn { display: inline-grid; width: 30px; height: 30px; margin-right: 4px; box-shadow: none; }
.tanim-tablo .t-sira .ikon-btn svg { width: 15px; height: 15px; }
.tanim-tablo .ikon-btn:disabled { opacity: .3; pointer-events: none; }
.tanim-tablo .t-kod { width: 230px; }
.tanim-tablo .t-say { width: 80px; text-align: right; }
.tanim-tablo .t-eylem { width: 60px; text-align: right; }
.tanim-tablo .t-eylem .ikon-btn { display: inline-grid; width: 34px; height: 34px; box-shadow: none; }
.tanim-gir { width: 100%; max-width: 440px; height: 38px; border: 1px solid var(--cizgi); border-radius: 10px; padding: 0 10px; background: var(--kart); color: var(--metin); font-size: 14.5px; font-weight: 600; outline: none; transition: border-color .15s, box-shadow .15s, background .3s; }
.tanim-gir.kod { max-width: 200px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tanim-gir::placeholder { color: var(--yer-tutucu); font-weight: 400; }
.tanim-gir:hover { border-color: color-mix(in srgb, var(--cizgi-g) 60%, var(--ikincil)); }
.tanim-gir:focus { border-color: var(--marka); box-shadow: 0 0 0 4px color-mix(in srgb, var(--marka) 14%, transparent); }
.tanim-gir.kaydedildi { border-color: var(--yesil); background: var(--yesil-acik); }
.tanim-gir.hata { border-color: var(--kirmizi); background: var(--kirmizi-acik); }
.tanim-ek { display: block; margin-top: 3px; font-size: 12px; color: var(--soluk); white-space: normal; max-width: 440px; }
.tanim-kaldirilan { border-top: 1px solid var(--cizgi); }
.tanim-kaldirilan summary { display: flex; align-items: center; gap: 8px; padding: 14px 20px; font-size: 14px; font-weight: 600; color: var(--ikincil); cursor: pointer; list-style: none; }
.tanim-kaldirilan summary::-webkit-details-marker { display: none; }
.tanim-kaldirilan summary svg { width: 16px; height: 16px; }
.tanim-kaldirilan summary small { margin-left: 6px; font-size: 12.5px; font-weight: 500; color: var(--soluk); }
.epdk-tablo tbody tr { cursor: default; }
/* EPDK güncelleme şeridi (yönetici, 3-4 günde bir): son güncelleme, ilerleme, düğme */
.epdk-guncel { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--cizgi); background: var(--kart-2); font-size: 13.5px; }
.epdk-guncel > div { flex: 1; min-width: 0; }
.epdk-guncel b { display: block; font-size: 14px; }
.epdk-guncel small { display: block; margin-top: 2px; color: var(--ikincil); font-size: 12.5px; }
.epdk-ilerleme { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--kart-3); overflow: hidden; }
.epdk-ilerleme span { display: block; height: 100%; border-radius: 3px; background: var(--marka); transform-origin: left center; transition: transform .6s ease; } /* genişlik değil ölçek: yerleşimi yeniden hesaplatmaz */

/* maliyet panosu (yalnız yönetici): 5 özet kutusu, dökümler, kalem grubu bedelleri (satır içi) */
.maliyet-kpi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.maliyet-kpi .kart-ic { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.maliyet-kpi .kart-ic > div { min-width: 0; }
.maliyet-kpi b.say { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maliyet-kpi small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--soluk); }
.maliyet-uyari { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: var(--turuncu-acik); }
.maliyet-uyari > div { flex: 1; min-width: 0; }
.maliyet-uyari b { display: block; font-size: 14.5px; color: var(--metin); }
.maliyet-uyari small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ikincil); }
.maliyet-tablo th.sag, .maliyet-tablo td.sag, .bedel-tablo th.sag, .bedel-tablo td.sag { text-align: right; }
.maliyet-tablo td.ad { font-weight: 600; white-space: normal; }
.maliyet-tablo tbody tr, .bedel-tablo tbody tr { cursor: default; }
.bedel-tablo td.ad { font-weight: 600; } /* hücre flex olursa tablo satır çizgisi kayıyordu: içi span */
.bedel-tablo td.ad .ad-ic { display: inline-flex; align-items: center; gap: 10px; }
.bedel-tablo .bir-is .eksik { color: var(--turuncu); font-weight: 600; }
.bedel-not { display: flex; align-items: center; gap: 6px; margin-top: 4px !important; color: var(--marka) !important; font-weight: 600; }
.bedel-not svg { width: 14px; height: 14px; }
.bedel-tablo .bedel-gir { width: 120px; }
.bedel-tablo .bir-is small { display: block; font-size: 11.5px; font-weight: 500; color: var(--soluk); }
.bedel-eylem { flex-wrap: wrap; justify-content: flex-end; }

/* pano: cihaz tipine göre sahadan sökülen (turuncu) / sıfır ürün (yeşil) */
/* pano "Sökülen ve sıfır ürün" (2 Eki akşam: tip tip tablo yerine toplamlar büyük halka grafikte); ortada toplam, altında iki rakam */
.tur-grafik { padding: 6px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tur-halka { position: relative; width: min(230px, 100%); aspect-ratio: 1; }
.tur-orta { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; pointer-events: none; }
.tur-orta b { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--metin); font-variant-numeric: tabular-nums; }
.tur-orta span { margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--soluk); }
.tur-lejant { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tur-lejant a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--cizgi); color: inherit; text-decoration: none; transition: border-color .15s, background-color .15s; }
.tur-lejant a.s { --c: var(--turuncu); --c-acik: var(--turuncu-acik); }
.tur-lejant a.y { --c: var(--yesil); --c-acik: var(--yesil-acik); }
.tur-lejant a:hover { border-color: var(--c); background: var(--c-acik); }
.tur-lejant span { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ikincil); }
.tur-lejant i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex-shrink: 0; }
.tur-lejant b { font-size: 32px; font-weight: 800; line-height: 1.1; color: var(--c); font-variant-numeric: tabular-nums; }
.tur-lejant small { font-size: 12px; line-height: 1.35; color: var(--soluk); }

/* ================= 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 .sirket-ad { max-width: none; }
  .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; white-space: nowrap; }
  .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)); gap: 12px; }
  /* 2'li düzende kartlar eski ölçüde (tek satır yalnız geniş formda) */
  .islem-kart { padding: 16px; gap: 10px; border-radius: 16px; }
  .islem-kart .ikon-cip { width: 38px; height: 38px; border-radius: 11px; }
  .islem-kart .ikon-cip svg { width: 18px; height: 18px; }
  .islem-kart b { font-size: 15px; line-height: inherit; }
  .islem-kart small { font-size: 12.5px; line-height: inherit; }
  .islem-kart .tik { top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 8px; }
  .islem-kart .tik svg { width: 15px; height: 15px; }
/* biten işte hiç işlem seçilmeden Kaydet denendi (5 Eki 2026): seçilmemiş kartlar kırmızı çerçeveli */
.islem-izgara.hata .islem-kart:not(.secili), .islem-izgara.hata .islem-kart:not(.secili) .tik { border-color: var(--kirmizi); }
  .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; }
  .izgara.uclu > * { flex-basis: 100%; } /* telefonda alt alta */
  .secim[data-secim="isTipi"] button { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; } /* üç düğme tek satır */
}

/* --- dokunmatik: kamerayla okutma düğmeleri --- */
@media (pointer: coarse), (max-width: 760px) {
  .kamera-btn { display: grid; }
  .seri-giris .arti { display: none; } /* dokunmatikte seri klavyenin "Bitti" tuşu, kamera ve kutudan çıkışla eklenir: kutu dar kalmasın */
  /* dokunma hedefi ≥40 px: İş Tipi seçimi; katalogdaki grup rozeti aynı görünür, basılan alan saydam kenarla 40 px */
  .kv .kv-secim button { height: 40px; }
  .urun-tablo button.kat-suz { height: 40px; border-block: 7px solid transparent; background-clip: padding-box; }
  .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 lacivert 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%, #2A5C9A 0%, transparent 60%), linear-gradient(170deg, #14335C 0%, #0E2747 55%, #091C35 100%);
    box-shadow: 0 20px 44px -16px rgba(8, 22, 44, .6), 0 2px 8px rgba(8, 22, 44, .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, #B5E3FF 0%, #5DB2F5 100%); color: #0B2546; box-shadow: 0 0 0 5px #10294B, 0 14px 26px -10px rgba(56, 140, 230, .9); 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: #0E7A6B; color: #fff; font: 700 10.5px/1 Inter, system-ui, sans-serif; box-shadow: 0 0 0 2px #10294B; }
  .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; }
  /* süzgeçler düğmeyle açılır yalnız düğmesi olan satırda (Kayıtlar); düğmesiz satırda (Maliyet Panosu) her zaman görünür, tam genişlik
     (4 Eki 2026: telefonda Maliyet'in dönem / şirket / tür seçimi görünmüyordu) */
  .suzgec > .sec-ikon, .suzgec > select { order: 4; flex: 1 1 100%; min-width: 0; }
  .suzgec > .sec-ikon { display: flex; }
  .suzgec > .sec-ikon select { width: 100%; }
  .suzgec:has(> .suzgec-ac):not(.acik) > :is(.sec-ikon, select) { display: none; }
  .suzgec.acik > select { display: block; } /* 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:has(> .suzgec-ac):not(.acik) > .aralik { display: none !important; }
  .aralik input[type=date], .aralik select { flex: 1; min-width: 0; }
  .suzgec > .tarih-kutu { order: 4; flex: 1 1 100%; min-width: 0; } /* telefonda süzgeç panelinde tam genişlik */
  .suzgec:has(> .suzgec-ac):not(.acik) > .tarih-kutu { display: none !important; }
  .suzgec:not(:has(> .suzgec-ac)) > #mExcel { order: 5; flex: 1 1 100%; margin-left: 0 !important; justify-content: center; }
  .suzgec .tarih-kutu input[type=date] { flex: 1; min-width: 0; width: auto; font-size: 16px; }
  .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; }
  .maliyet .tablo-sar { overflow-x: auto; overscroll-behavior-x: contain; } /* Maliyet tabloları kartın içinde yana kayar, sayfa kaymaz (4 Eki 2026) */
  /* ü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: #0B2546; }
.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 */
/* giriş ekranının zemini: giriş katmanı ve açılış aynı zemini kullanır */
:root { --giris-zemin: radial-gradient(900px 520px at 12% 8%, rgba(56, 125, 220, .32), transparent 62%), linear-gradient(135deg, #0B2546, #12386A 55%, #1A5590); }
/* açılış (4 Eki 2026, "login ekranından önce bu ekran çıkıyor", "yenileyince ekran flaşlı beyaz oluyor"): sunucu sayfayı verirken oturumu
   bilir (index.html: body.acilis + girisli). Oturum varsa kabuk ilk karede görünür; yoksa sayfa ilk karesinden giriş ekranının zeminiyle
   açılır, kabuk çizilmez, giriş kartı aynı zeminin üstüne gelir — ne kabuk ne beyaz ekran çakar */
body.acilis:not(.girisli) { background: var(--giris-zemin); background-attachment: fixed; overflow: hidden; }
body.acilis:not(.girisli) .uygulama, body.acilis:not(.girisli) .mobil-ust, body.acilis:not(.girisli) .mobil-alt { visibility: hidden; }
/* oturumlu açılış: Angular gelene kadar (app-root boş) sol menünün — telefonda alt çubuğun — yerinde aynı ölçü ve renkte yer tutucu;
   yenileyince boş sayfanın ardından lacivert menü "pat" diye belirmez. Ölçüler .uygulama / .yan / .mobil-alt ile aynı (değişirse ikisi birlikte) */
@media (min-width: 761px) {
  body.girisli app-root:empty::before { content: ''; position: fixed; left: 16px; top: calc(16px + var(--yan-ust)); width: var(--yan-g);
    height: calc(100vh - 32px - var(--yan-ust)); border-radius: 24px; box-shadow: var(--golge-b);
    background: radial-gradient(120% 60% at 0% 0%, #2A5C9A 0%, transparent 60%), linear-gradient(170deg, #14335C 0%, #0E2747 55%, #091C35 100%); }
}
@media (min-width: 761px) and (max-width: 1365px) { body.girisli app-root:empty::before { border-radius: 22px; } }
@media (max-width: 760px) {
  html:not(.alt-cubuksuz) body.girisli app-root:empty::after { content: ''; position: fixed; left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); height: 70px; border-radius: 24px;
    background: radial-gradient(120% 160% at 0% 0%, #2A5C9A 0%, transparent 60%), linear-gradient(170deg, #14335C 0%, #0E2747 55%, #091C35 100%);
    box-shadow: 0 20px 44px -16px rgba(8, 22, 44, .6), 0 2px 8px rgba(8, 22, 44, .22); }
}
.giris-katman { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; overflow: auto;
  background: var(--giris-zemin); }
.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: halka + Fix360 tek satır (2 Eki: alt yazı kalktı) */
.giris-marka .marka-ad { color: var(--metin); }
.giris-marka .marka-ad span { color: var(--marka); }
.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-not.kotu { background: var(--kirmizi-acik); color: var(--kirmizi); } /* geçici şifre e-postası gönderilemedi (2 Eki 2026) */
.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; }

/* --- 2 Eki 2026: yeni parçalar dar içerikte / formda (≥1440'a dokunmaz: kapsayıcılar yalnız ≤1439'da tanımlı) --- */
@container form (max-width: 700px) {
  /* işlem kartları 2'li: 3 + 2 düzeninin genişlikleri sıfırlanır, tek kalan (5.) kart tam satır */
  .islem-izgara > *, .islem-izgara > :nth-child(4):nth-last-child(2), .islem-izgara > :nth-child(5):nth-last-child(1) { grid-column: auto; }
  .islem-izgara > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@container form (max-width: 620px) {
  .kunye-gruplar { grid-template-columns: minmax(0, 1fr); }
}
@container form (max-width: 560px) {
  .seri-kutu.tek .seri-giris { flex-wrap: wrap; }
  .seri-yok { flex: 1 1 100%; justify-content: center; height: 46px; }
  .adet-kutu { flex: 1 1 100%; justify-content: space-between; height: 46px; padding-left: 16px; } /* telefonda "Seri numarası yok" gibi tam genişlik */
  .iptal-kart .kart-ic, .iptal-bant .kart-ic { flex-wrap: wrap; }
  .iptal-kart .btn, .iptal-bant .btn { width: 100%; }
}
@container icerik (max-width: 899px) {
  .tanim-ekle { flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; }
  .tanim-ekle input, .tanim-ekle input.kod { flex: 1 1 160px; width: auto; }
  .tanim-bas .arama { flex: 1 1 100%; margin-left: 0 !important; }
  .tanim-bas .arama input { width: 100%; }
  .epdk-guncel { flex-wrap: wrap; }
  .epdk-guncel .btn { width: 100%; }
}
@container icerik (max-width: 1100px) {
  .maliyet-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container icerik (max-width: 700px) {
  .maliyet-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maliyet-uyari { flex-wrap: wrap; }
  .maliyet-uyari .btn { width: 100%; }
  .bedel-tablo .bedel-gir { width: 92px; }
}
@container icerik (max-width: 600px) {
  .tanim-tablo .t-say { display: none; }
  .tanim-tablo .t-kod { width: auto; }
  .tanim-tablo .t-sira { width: 72px; }
}
@media (max-width: 760px) {
  .coklu-dugme { height: 48px; font-size: 16px; } /* öteki girdilerle aynı: iOS büyütmesin, parmakla rahat */
}

/* Önerilen yama (test ajanı d, 2 Eki 2026) — css/app.css sonuna; 1440+ görünümünü yalnız Tanımlamalar'da değiştirir */
/* B) "Kayıt" sütununda 0 da sağa yaslı (.ipucu display:flex, text-align etkilemiyor) */
.tanim-tablo .t-say .ipucu { justify-content: flex-end; }
/* C) EPDK araması: görünen kutu sarmalayıcıyı doldursun (sağa yaslı, üstteki düğmeyle hizalı) */
.tanim-bas .arama input { width: 100%; }

@media (max-width: 760px) {
  /* D) telefonda tanım tablosu satır kartı: [yukarı/aşağı] [ad · altında numara] [kaldır]; sayfa yana kaymaz */
  .tanim-tablo thead { display: none; }
  .tanim-tablo, .tanim-tablo tbody { display: block; }
  .tanim-tablo tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "sira ad eylem" "sira kod eylem"; align-items: center; gap: 6px 10px; padding: 10px 12px; border-bottom: 1px solid var(--cizgi); }
  .tanim-tablo tr:has(.bos-durum) { display: block; padding: 0; }
  .tanim-tablo td { display: block; min-width: 0; width: auto !important; padding: 0; border: 0; white-space: normal; }
  .tanim-tablo .t-sira { grid-area: sira; display: flex; flex-direction: column; gap: 4px; }
  .tanim-tablo .t-ad { grid-area: ad; }
  .tanim-tablo .t-kod { grid-area: kod; }
  .tanim-tablo .t-kod:has(.say) { font-size: 13px; color: var(--ikincil); }
  .tanim-tablo .t-say { display: none; }
  .tanim-tablo .t-eylem { grid-area: eylem; }
  .tanim-tablo .t-sira .ikon-btn, .tanim-tablo .t-eylem .ikon-btn { width: 40px; height: 40px; margin: 0; }
  /* E) telefonda tanım kutuları 16 px (iOS odaklanınca sayfayı büyütmesin), 44 px yükseklik */
  .tanim-gir, .tanim-gir.kod, .tanim-ekle input { max-width: none; height: 44px; font-size: 16px; }
  .tanim-ekle .btn { height: 44px; }
  /* F) telefonda EPDK sonuçları kart düzeninde */
  .epdk-tablo thead { display: none; }
  .epdk-tablo, .epdk-tablo tbody { display: block; }
  .epdk-tablo tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "unvan unvan" "no il" "dagitici dagitici"; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--cizgi); }
  .epdk-tablo tr:has(.bos-durum) { display: block; padding: 0; }
  .epdk-tablo td { display: block; min-width: 0; padding: 0; border: 0; white-space: normal; }
  .epdk-tablo td:nth-child(1) { grid-area: no; font-size: 13px; color: var(--ikincil); }
  .epdk-tablo td:nth-child(2) { grid-area: unvan; }
  .epdk-tablo td:nth-child(3) { grid-area: il; text-align: right; font-size: 13px; color: var(--ikincil); }
  .epdk-tablo td:nth-child(4) { grid-area: dagitici; font-size: 12.5px; color: var(--soluk); }
  /* G) çoklu açılır liste seçenekleri, önceki geliş bağlantıları: parmakla ≥ 44 / 40 px */
  .coklu-liste button { min-height: 44px; }
  .kr-once-liste a { height: 40px; }
  /* H) kayıt sayfasındaki "Değişen Malzeme(ler)" araması 16 px (parcaAlani satır içi font-size: 14.5px veriyor) */
  #parcaAra { font-size: 16px !important; }
}

/* Erişim Yetkileri telefonda sayfayı yana kaydırmasın: tablo kendi kutusunda kayar, kişi sütunu sabit (2 Eki) */
@media (max-width: 760px) {
  .erisim-kart .tablo-sar { overflow-x: auto; }
  .erisim-tablo .e-kisi { position: sticky; left: 0; z-index: 1; background: var(--kart); min-width: 168px; box-shadow: 1px 0 0 var(--cizgi); }
  .erisim-tablo .kisi small { white-space: normal; }
}

/* telefon / dar kart düzeninde Kayıtlar satırı eskisi gibi: gün ve garanti kendi yerinde, tür rozeti numaranın yanında */
@container icerik (max-width: 899px) {
  .kayit-tablo .dar-gun, .kayit-tablo .dar-garanti { display: none; }
  .kayit-tablo .k-no .tur-rozet, .kayit-tablo .k-no .grup-rozet { display: inline-flex; margin: 0 0 0 6px; }
}
/* satır sonu (PDF + iptal kısayolu) kart yetiyorsa dar ekranda da görünür (1366 dizüstü; 2 Eki) */
@container kayitlar (min-width: 1040px) { .kayit-tablo th.k-pdf, .kayit-tablo td.k-pdf { display: table-cell; } }

/* Pano, Kayıtlar erişimi kapalı kişide (5 Eki 2026): kayıtlara götüren kutu, satır ve bağlantılar tıklanmaz, "Tümü" gizli */
.kayitsiz .durum-kutu, .kayitsiz .satir[data-no], .kayitsiz a[href^="#/kayit"] { pointer-events: none; cursor: default; }
.kayitsiz a[href="#/kayitlar?durum=hepsi"] { display: none; }

/* ================= SAP entegrasyonu (5 Eki 2026; #/entegrasyon, yalnız yönetici) =================
   Bağlantı bilgileri · zamanlama (her GET methodu: N saatte bir / günün belirli saatleri) · günlük (çalışma → istekler → gövde) */
.sap-kpi .kart-ic { display: flex; align-items: center; gap: 14px; min-height: 100%; }
.sap-kpi b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.sap-kpi .ipucu { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sap-uyari, .sap-sonuc { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.45;
  border: 1px solid color-mix(in srgb, var(--kirmizi) 30%, var(--cizgi)); background: var(--kirmizi-acik); color: var(--kirmizi); }
.sap-sonuc.tamam { border-color: color-mix(in srgb, var(--yesil) 30%, var(--cizgi)); background: var(--yesil-acik); color: var(--yesil); }
.sap-uyari svg, .sap-sonuc svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.sap-sonuc span { min-width: 0; overflow-wrap: anywhere; }
.sap-eylem { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.sap-eylem .ipucu { flex: 1 1 100%; margin: 0; } /* "Son değişiklik" kendi satırında, düğmeler altında sağda */
.sap-planlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.sap-planlar > .sap-not { grid-column: 1 / -1; }
/* formdaki seri doğrulaması kartı (5 Eki gece): kurallar, deneme kutusu ve sonucu */
.sap-kurallar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--ikincil); line-height: 1.45; }
.sap-kurallar li { display: flex; gap: 10px; align-items: flex-start; }
.sap-kurallar li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--marka); }
.sap-kurallar b { color: var(--metin); font-weight: 600; }
.sap-dene { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--cizgi); }
.sap-dene > .alan { flex: 1 1 180px; min-width: 0; }
.sap-dene-tur { flex: 0 0 auto; }
.sap-dene-tur button { height: 46px; padding: 0 14px; font-size: 14px; }
.sap-dene > .btn { height: 46px; }
.sap-dene-sonuc { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--kart-2); font-size: 13.5px; }
.sap-dene-sonuc > b.hatali { color: var(--kirmizi); }
.sap-dene-satir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--kart); border: 1px solid var(--cizgi); }
.sap-dene-satir > span:first-child { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.sap-dene-satir small { color: var(--ikincil); font-size: 12.5px; overflow-wrap: anywhere; }
.sap-dene-satir small.hatali { flex-basis: 100%; color: var(--kirmizi); font-weight: 600; }
.sap-dene-satir.hatali { border-color: color-mix(in srgb, var(--kirmizi) 35%, var(--cizgi)); }
/* yeni kayıt formu: SAP seri rozeti, stok kaydı seçimi ve iade deposu uyarısı (5 Eki gece) */
.ic-rozet .sap-rozet[data-sap="secim"], .ic-rozet .sap-rozet[data-sap="iade-degil"] { cursor: pointer; pointer-events: auto; }
.ic-rozet:has(.sap-rozet) { gap: 6px; } /* SAP rozeti ile "N. geliş" yan yana */
.sap-secim-liste { display: flex; flex-direction: column; gap: 8px; }
.sap-secim { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kart);
  color: var(--metin); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.sap-secim:hover { border-color: var(--marka); background: var(--marka-acik); }
.sap-secim.uyari { border-color: color-mix(in srgb, var(--turuncu) 45%, var(--cizgi)); }
.sap-secim-yazi { min-width: 0; flex: 1; }
.sap-secim-yazi b { display: block; font-weight: 600; font-size: 14.5px; }
.sap-secim-yazi small { display: block; margin-top: 2px; color: var(--ikincil); font-size: 12.5px; overflow-wrap: anywhere; }
.sap-secim-yazi small.hatali { color: var(--kirmizi); font-weight: 600; }
.sap-secim > .rozet { flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sap-uyari-ic { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 28px 22px; text-align: center; }
.sap-uyari-ic h3 { margin: 4px 0 2px; max-width: 30ch; font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--kirmizi); letter-spacing: .01em; text-wrap: balance; }
.sap-uyari-ic p { margin: 0; color: var(--ikincil); font-size: 13.5px; }
/* 6 Eki 2026 ("daha okunaklı, ürün adı bold, textler arasında orantısızlık"): seri, ürün ve depo etiketli satırlarda */
.sap-uyari-bilgi { width: 100%; margin: 0; padding: 2px 16px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--kart-2); text-align: left; }
.sap-uyari-bilgi > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; }
.sap-uyari-bilgi > div + div { border-top: 1px solid var(--cizgi); }
.sap-uyari-bilgi dt { font-size: 13px; color: var(--ikincil); }
.sap-uyari-bilgi dd { margin: 0; min-width: 0; font-size: 14px; font-weight: 500; color: var(--metin); overflow-wrap: anywhere; }
.sap-uyari-bilgi dd b { font-weight: 700; }
.sap-uyari-bilgi dd small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--soluk); }
.sap-uyari-ic p.ipucu { max-width: 46ch; font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.sap-uyari-ikon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--kirmizi-acik); color: var(--kirmizi); }
.sap-uyari-ikon svg { width: 28px; height: 28px; }
.sap-plan { border: 1px solid var(--cizgi); border-radius: 16px; overflow: hidden; background: var(--kart); }
.sap-plan > .anahtar { border: 0; border-radius: 0; border-bottom: 1px solid var(--cizgi); }
.sap-plan-ic { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.sap-plan.kapali .sap-tur, .sap-plan.kapali .sap-aralik, .sap-plan.kapali .sap-saatler { opacity: .62; }
.sap-aralik { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ikincil); }
.sap-aralik input, .sap-saat-ekle input { height: 44px; padding: 0 12px; border: 1px solid var(--cizgi-g); border-radius: 12px; background: var(--kart); color: var(--metin);
  font: inherit; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sap-aralik input { width: 92px; text-align: center; }
.sap-aralik input:focus, .sap-saat-ekle input:focus { outline: none; border-color: var(--marka); box-shadow: 0 0 0 3px var(--marka-acik); }
.sap-saatler { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sap-saat { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 6px 0 12px; border: 1px solid var(--marka); border-radius: 12px;
  background: var(--marka-acik); color: var(--marka-koyu); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sap-saat > svg { width: 15px; height: 15px; }
.sap-saat button { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: inherit; }
.sap-saat button:hover { background: var(--kirmizi-acik); color: var(--kirmizi); }
.sap-saat button svg { width: 15px; height: 15px; }
.sap-saat-ekle { display: inline-flex; align-items: center; gap: 8px; }
.sap-saat-ekle .btn { height: 44px; }
.sap-plan-alt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px dashed var(--cizgi); }
.sap-plan-bilgi { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--ikincil); }
.sap-plan-bilgi span { display: inline-flex; align-items: center; gap: 6px; }
.sap-plan-bilgi svg { width: 15px; height: 15px; flex-shrink: 0; }
.sap-plan-bilgi .hatali { color: var(--kirmizi); }
.sap-plan-bilgi .sap-suruyor { color: var(--marka-koyu); font-weight: 600; }
.sap-plan-alt > .btn { margin-left: auto; }
.sap-not { align-items: flex-start; line-height: 1.5; margin: 0; }
.sap-not svg { flex-shrink: 0; margin-top: 2px; }
.sap-gunler .cip { height: 40px; }
.sap-gunler .cip .rozet { height: 22px; font-size: 11.5px; }
.sap-tarih { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 6px 0 12px; border: 1px solid var(--cizgi); border-radius: 12px;
  background: var(--kart); color: var(--ikincil); }
.sap-tarih svg { width: 16px; height: 16px; }
.suzgec .sap-tarih input[type=date] { height: 36px; padding: 0 4px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--metin); font-size: 14px; }
.sap-tablo tbody tr[data-calisma] { cursor: pointer; }
.sap-tablo tbody tr.acik > td { background: var(--marka-acik); }
.sap-tablo .sap-ozet { white-space: normal; min-width: 300px; font-size: 13px; color: var(--ikincil); line-height: 1.45; }
.sap-tablo .sap-ozet.hatali { color: var(--kirmizi); }
.sap-tablo .sap-detay > td { padding: 12px 16px 16px; background: var(--kart-2); white-space: normal; }
.sap-istekler { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; background: var(--kart); font-size: 13px; }
.sap-tablo .sap-istekler th { position: static; padding: 8px 12px; background: var(--kart); }
.sap-tablo .sap-istekler td { padding: 8px 12px; background: var(--kart); }
.sap-istekler tr:last-child td { border-bottom: 0; }
.sap-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; white-space: normal !important; overflow-wrap: anywhere; }
.sap-url small.hatali { display: block; margin-top: 2px; color: var(--kirmizi); font-family: 'Inter', system-ui, sans-serif; }
.sap-govde-btn { text-align: right; white-space: nowrap; }
.sap-govde-btn .btn + .btn { margin-left: 6px; }
.pencere.sap-govde-pencere { width: min(980px, 100%); }
.sap-govde { margin: 0; max-height: min(62vh, 640px); overflow: auto; padding: 14px 16px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--kart-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; white-space: pre; tab-size: 2; color: var(--metin); }
.urun-tablo .sap-yok { margin-left: 8px; vertical-align: 1px; }
@media (max-width: 1439px) { .sap-sayfa > .c-6 { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .sap-sayfa > .sap-kpi { grid-column: span 6; }
  .sap-sayfa .tablo-sar { overflow-x: auto; overscroll-behavior-x: contain; } /* günlük tablosu kartın içinde yana kayar, sayfa taşmaz */
  .sap-kpi b { font-size: 19px; }
  .sap-tur { grid-auto-flow: row; }
  .sap-plan-alt > .btn { margin-left: 0; width: 100%; }
  .sap-tarih { margin-left: 0; }
  .sap-eylem .btn { flex: 1 1 auto; }
}

/* Test ortamı (5 Eki 2026, fix360test.turpak.com.tr; sunucu .env ORTAM=staging → body.test-ortami): ekranda üstte şerit — canlıyla karışmasın.
   Kayıt numaraları orada 90001'den başlar (staging-tazele.sh). Yazdırmada görünmez */
@media screen {
  body.test-ortami::after { content: 'TEST ORTAMI'; position: fixed; z-index: 2147483000; top: env(safe-area-inset-top, 0); left: 50%; transform: translateX(-50%);
    padding: 3px 14px 4px; border-radius: 0 0 10px 10px; background: #F59E0B; color: #1F1300; font: 800 11.5px/1.3 'Inter', system-ui, sans-serif; letter-spacing: .08em;
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45); pointer-events: none; }
}

/* ================= SAP 3. aşama (7 Eki 2026): sekmeler, Depolar, Stok Nakilleri, Stok Nakli kartı, seri numarasız pencere, nakil durumu ================= */
.sap-sekmeler-sar { display: flex; }
/* gizli sekmenin içeriği yıkılmaz, yalnız gizlenir (yazılmış girdiler yerinde kalır); !important: display: grid / flex kuralları hidden özniteliğini ezer */
.sekme-gizli { display: none !important; }
.sap-sekmeler-sar .sekmeler button svg { width: 17px; height: 17px; }
.sekmeler .sekme-sayi { height: 20px; padding: 0 7px; font-size: 11.5px; margin-left: 2px; }
.sekmeler button.secili .sekme-sayi { background: #fff; color: var(--kirmizi); }
.dp-ara { width: 280px; }
.dp-ara input { width: 100%; box-shadow: none; }
.dp-uyari { margin: 16px 20px 0; }
.dp-tablo tbody tr { cursor: default; }
/* şirket adı sarar (tamamı görünür; tooltip'e gerek kalmaz): 1440'ta tablo karttan geniş çıkmasın, raf kutularına yer kalsın */
.dp-tablo td.dp-ad { white-space: normal; }
.dp-tablo .dp-ad b { font-weight: 600; }
.dp-tablo .dp-ad .rozet { margin-left: 8px; vertical-align: middle; }
.dp-tablo th.dp-iad, .dp-tablo td.dp-iad { text-align: right; }
.dp-tablo tr.sorunlu > td { background: color-mix(in srgb, var(--kirmizi) 5%, var(--kart)); }
.dp-raf { min-width: 232px; margin: 0; }
.dp-raf select { width: 100%; height: 40px; }
.dp-raf.hatali select { border-color: color-mix(in srgb, var(--kirmizi) 55%, var(--cizgi-g)); }
.dp-raf small.dp-varsayilan { display: block; margin-top: -3px; font-size: 11.5px; font-weight: 500; color: var(--soluk); }
.dp-raf small.hatali { display: block; margin-top: 4px; color: var(--kirmizi); font-size: 12px; font-weight: 500; white-space: normal; }
.dp-etiket { display: none; }
/* tablo düzeninde raf kutusu sıkı: TURPAKMD-M000-TMR-L7-01 gibi kodun tamamı görünsün (kart düzeninde — telefon, dar — kutular öteki girdilerle aynı kalır).
   #icerik kapsayıcısı yalnız < 1440'ta tanımlı (DUYARLI bölüm): 1440+ için @media, dar ekranda kart ≥ 900 px için @container */
@media (min-width: 1440px) {
  .dp-raf select { padding: 0 30px 0 10px; font-size: 13px; background-position: right 8px center; background-size: 16px; }
  /* TMR ve HRD kutuları aynı satırda aynı hizada: "varsayılan · ilk raf" yazısı yalnız seçimi olmayan kutuda çıkıyordu, hücre içeriği farklı yükseklikte olunca kutular kayıyordu →
     yazı akıştan çıkar (kutunun hemen altında, hücre boşluğunda); iki hücrenin akıştaki içeriği aynı. Hata satırı akışta kalır: hatalı satırda iki hücre de üstten hizalı */
  .dp-tablo td.dp-tmr, .dp-tablo td.dp-hrd { padding-top: 18px; padding-bottom: 18px; }
  .dp-tablo tr.sorunlu td.dp-tmr, .dp-tablo tr.sorunlu td.dp-hrd { vertical-align: top; }
  .dp-raf small.dp-varsayilan { position: absolute; top: calc(100% + 1px); left: 0; margin: 0; font-size: 11px; line-height: 13px; white-space: nowrap; }
}
@container icerik (min-width: 900px) {
  .dp-raf select { padding: 0 30px 0 10px; font-size: 13px; background-position: right 8px center; background-size: 16px; }
  /* TMR ve HRD kutuları aynı satırda aynı hizada: "varsayılan · ilk raf" yazısı yalnız seçimi olmayan kutuda çıkıyordu, hücre içeriği farklı yükseklikte olunca kutular kayıyordu →
     yazı akıştan çıkar (kutunun hemen altında, hücre boşluğunda); iki hücrenin akıştaki içeriği aynı. Hata satırı akışta kalır: hatalı satırda iki hücre de üstten hizalı */
  .dp-tablo td.dp-tmr, .dp-tablo td.dp-hrd { padding-top: 18px; padding-bottom: 18px; }
  .dp-tablo tr.sorunlu td.dp-tmr, .dp-tablo tr.sorunlu td.dp-hrd { vertical-align: top; }
  .dp-raf small.dp-varsayilan { position: absolute; top: calc(100% + 1px); left: 0; margin: 0; font-size: 11px; line-height: 13px; white-space: nowrap; }
}
@container icerik (max-width: 899px) {
  .dp-ara { width: 100%; }
  #sapDepolar .kart-bas { flex-wrap: wrap; row-gap: 12px; }
  #sapDepolar .kart-bas > div:not(.sag) { flex: 1 1 0; min-width: 0; }
  #sapDepolar .kart-bas .sag { flex: 1 1 100%; margin-left: 0; }
  .dp-tablo tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ad depo" "kod iad" "tmr tmr" "hrd hrd"; }
  .dp-tablo .dp-ad { grid-area: ad; }
  .dp-tablo .dp-depo { grid-area: depo; justify-self: end; }
  .dp-tablo .dp-depo::before { content: 'Depo '; font-weight: 500; color: var(--soluk); }
  .dp-tablo .dp-kod { grid-area: kod; font-size: 13px; color: var(--ikincil); }
  .dp-tablo .dp-iad { grid-area: iad; justify-self: end; font-size: 13px; color: var(--ikincil); }
  .dp-tablo .dp-iad::after { content: ' IAD yeri'; }
  .dp-tablo .dp-tmr { grid-area: tmr; }
  .dp-tablo .dp-hrd { grid-area: hrd; margin-top: 4px; }
  .dp-raf { min-width: 0; }
  .dp-etiket { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--soluk); }
}
/* kart düzeninde yeterli genişlik varsa (dar ray ≥ 640 px: iPad dikey, 820) TMR ve HRD yan yana; ikisi de üstten hizalı (biri "varsayılan" yazısıyla uzasa da kutular kaymaz).
   640'ın altında (telefon) alt alta. Kutu kodu sığdırır: 15 px yazıda ~260 px, telefon 16 px'te 241 px kullanılabilir */
@container icerik (min-width: 640px) and (max-width: 899px) {
  .dp-tablo tr { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "ad depo" "kod iad" "tmr hrd"; column-gap: 12px; }
  .dp-tablo .dp-tmr, .dp-tablo .dp-hrd { align-self: start; }
  .dp-tablo .dp-hrd { margin-top: 0; }
}
@media (max-width: 760px) {
  .sap-sekmeler-sar .sekmeler button { font-size: 13px; gap: 6px; }
  .sap-sekmeler-sar .sekmeler button svg { display: none; }
  .dp-raf select { height: 48px; } /* telefonda öteki seçim kutularıyla aynı (.alan select) */
  /* sekme bileşenleri (fx-sap-depolar…) ızgarada display: contents ile durur: ".bento > *" kuralı kartlarına ulaşmaz, span 12 telefondaki 6 sütunlu ızgaraya
     6 boş sütun açıp sekme çubuğunu kartlardan dar bırakırdı */
  .sap-sayfa > * > .kart.c-12 { grid-column: 1 / -1; }
}
/* seri numarası olmayan ürün (7 Eki 2026): Tamir Kontrol'de "Seri numarası yok" işaretlenince açılan pencere — ürün, sahip, adet; iade adedi SAP'tan kontrol edilir */
.pencere.serisiz-pencere { width: min(600px, 100%); }
.serisiz-ic { display: flex; flex-direction: column; gap: 16px; }
.serisiz-ic > .btn { align-self: flex-start; height: 46px; }
.serisiz-urun { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 8px 8px 12px; border: 1px solid var(--marka); border-radius: 12px; background: var(--marka-acik); }
.serisiz-urun-yazi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* ürün adı sarar (uzun adların ayırt edici model kısmı sonda: "…" ile kesilince seçilen ürün anlaşılmıyor, 390'ta görüldü) */
.serisiz-urun-yazi b { font-weight: 600; overflow-wrap: anywhere; }
.serisiz-urun-yazi small { color: var(--ikincil); font-size: 12.5px; }
.serisiz-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 280px; overflow: auto; }
.serisiz-liste > button { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--kart); text-align: left; }
.serisiz-liste > button:hover { border-color: var(--marka); background: var(--marka-acik); }
.serisiz-liste .bos { padding: 10px 12px; color: var(--ikincil); font-size: 13.5px; }
.serisiz-satir .serisiz-adet { flex: 0 0 140px; }
.sap-sonuc.uyari { border-color: color-mix(in srgb, var(--turuncu) 35%, var(--cizgi)); background: var(--turuncu-acik); color: var(--turuncu); }
.seri-bilgi.uyari { color: var(--turuncu); }
/* "Değiştir" seri satırında adet kutusunun yanında değil, SAP bilgisinin sağında: yan yana durunca seri kutusu daralıyordu (1440'ta 293 → 186 px, 1100'de 66 px) */
#serisizBilgi > span { flex: 1; min-width: 0; }
#serisizDegistir { flex: none; margin-left: auto; }
@media (max-width: 760px) {
  .serisiz-satir .serisiz-adet { flex-basis: 100%; }
  .serisiz-ic > .btn { align-self: stretch; }
}
/* stok nakli: SAP sayfası kartı, sekmeler (telefonda kısa ad), Stok Nakilleri, ayrıntı penceresi (Görev C4) */
.sap-sekmeler-sar .sk-kisa { display: none; }
.sap-nakil-ic { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; }
.sap-nakil-ic > .anahtar { flex: 1 1 340px; }
.sap-nakil-tur { flex: 0 0 210px; margin: 0; }
.sap-nakil-ozet { display: flex; gap: 12px; flex: 1 1 380px; }
.sap-nakil-ozet a { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--kart); color: inherit; text-decoration: none; }
.sap-nakil-ozet a b { font-size: 22px; font-weight: 700; line-height: 1.15; }
.sap-nakil-ozet a span { font-size: 12.5px; color: var(--ikincil); }
.sap-nakil-ozet a.hatali b { color: var(--kirmizi); }
.sap-nakil-ozet a:hover { border-color: var(--marka); }
.nk-tablo tbody tr { cursor: pointer; }
.nk-tablo td small { display: block; margin-top: 2px; font-size: 12px; color: var(--ikincil); }
.nk-tablo td small.hatali { color: var(--kirmizi); }
.nk-tablo td small.uyari { color: var(--turuncu); }
.nk-tablo .nk-durum .rozet + .rozet { margin-left: 4px; }
.nk-saat { margin-left: 6px; font-size: 12px; font-weight: 500; opacity: .85; }
.nk-tablo th, .nk-tablo td { padding-left: 10px; padding-right: 10px; }
.nk-tablo .nk-urun b { display: block; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.nk-tablo td.nk-sirket { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nk-tablo .nk-durum small { max-width: 190px; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } /* saat metnin başında; iki satıra kadar */
.nk-tablo td.nk-seri { max-width: 130px; white-space: normal; overflow-wrap: anywhere; }
.nk-tablo td.nk-tam { max-width: 100px; white-space: normal; }
.nk-tablo .nk-fix .rozet { margin-left: 6px; height: 20px; padding: 0 6px; vertical-align: middle; }
.nk-tablo th.nk-denesay, .nk-tablo td.nk-denesay { text-align: right; }
.pencere.nakil-pencere { width: min(880px, 100%); }
.nk-detay { display: flex; flex-direction: column; gap: 14px; max-height: min(64vh, 660px); overflow: auto; }
.nk-durum-satir { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.nk-bilgiler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; }
.nk-bilgiler dt { font-size: 12px; font-weight: 600; color: var(--soluk); }
.nk-bilgiler dd { margin: 2px 0 0; min-width: 0; overflow-wrap: anywhere; }
.nk-bilgiler dd small { display: block; font-size: 12px; color: var(--ikincil); }
.nk-bilgiler dd small.hatali { color: var(--kirmizi); }
.nk-istek { min-height: 340px; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; line-height: 1.5; white-space: pre; }
.nk-denemeler h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.nk-deneme { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 12px; }
.nk-deneme + .nk-deneme { margin-top: 8px; }
.nk-deneme-bas { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; font-size: 13px; }
.nk-deneme-dugmeler { margin-left: auto; display: flex; gap: 6px; }
.nk-deneme > small.hatali { color: var(--kirmizi); font-size: 12.5px; }
.nk-govde pre { max-height: 320px; overflow: auto; margin: 0; }
.nk-govde-dugme { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
/* tablo karta sığsın (1440'ta kart ~1120 px): önce Son Deneme, sonra Deneme sütunu kalkar; ayrıntı penceresinde ikisi de var */
@media (min-width: 1440px) and (max-width: 1599px) { .nk-tablo .nk-denesay { display: none; } } /* 1440'ta #icerik kapsayıcı değil */
.nk-tablo .nk-hedef small { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container icerik (max-width: 1499px) { .nk-tablo .nk-denesay { display: none; } }
@container icerik (max-width: 1099px) { .nk-tablo .nk-tam { display: none; } }
@container icerik (max-width: 899px) {
  .nk-tablo tr { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "fix durum" "urun urun" "seri hedef" "sirket sirket"; }
  .nk-tablo .nk-fix { grid-area: fix; font-weight: 600; }
  .nk-tablo .nk-fix { white-space: nowrap; }
  .nk-tablo .nk-durum { grid-area: durum; justify-self: end; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; min-width: 0; max-width: 100%; }
  .nk-tablo .nk-durum .rozet + .rozet { margin-left: 0; }
  .nk-tablo .nk-durum small { flex-basis: 100%; max-width: 100%; margin-top: 0; }
  .nk-tablo .nk-urun { grid-area: urun; }
  .nk-tablo .nk-urun b { max-width: 100%; }
  .nk-tablo .nk-seri { grid-area: seri; font-size: 13px; color: var(--ikincil); }
  .nk-tablo .nk-hedef { grid-area: hedef; justify-self: end; text-align: right; }
  .nk-tablo td.nk-sirket { grid-area: sirket; max-width: 100%; font-size: 13px; color: var(--ikincil); }
  .nk-tablo .nk-tam, .nk-tablo .nk-denesay { display: none; }
}
@media (max-width: 760px) {
  .sap-sekmeler-sar .sk-uzun { display: none; }
  .sap-sekmeler-sar .sk-kisa { display: inline; }
  .sap-nakil-ic { flex-direction: column; align-items: stretch; }
  .sap-nakil-ic > .anahtar, .sap-nakil-tur, .sap-nakil-ozet { flex: none; } /* sütun düzeninde flex-basis yüksekliktir: 340 px'lik boş kutu oluyordu */
  .nk-bilgiler { grid-template-columns: 1fr; }
  .nk-suzgec .tarih-kutu input[type=date]::-webkit-calendar-picker-indicator { display: none; } /* iki tarih + hazır menü 390'a sığsın; tarih kutuya basınca seçici açılır */
  /* süzgeç hapları tek satırda yana kayar (üç satır yer tutuyordu) */
  .nk-suzgec .cip-grup { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .nk-suzgec .cip-grup .cip { flex: none; }
  .nk-detay { max-height: none; }
  .nk-istek { min-height: 260px; }
}

/* kayıt sayfasında stok nakli durumu (Görev C5) */
.nakil-durum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--kart-2); }
.nakil-durum .nakil-bilgi { font-size: 13.5px; color: var(--ikincil); min-width: 0; overflow-wrap: anywhere; }
.nakil-durum .nakil-bilgi b { color: var(--metin); font-weight: 600; }
.nakil-durum .nakil-bag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--marka); text-decoration: none; }
.nakil-durum .nakil-bag svg { width: 14px; height: 14px; }
.nakil-durum small { flex-basis: 100%; font-size: 12.5px; color: var(--ikincil); }
.nakil-durum small.hatali { color: var(--kirmizi); }
.kayit-sayfa .secim button:disabled:not(.secili) { opacity: .5; cursor: not-allowed; }
.satir-eylem .satir-iptal.kilitli { opacity: .45; cursor: not-allowed; }