/* Ortak bileşenler. Sadece tasarim.css'teki değişkenleri kullanır. */

/* ---------- Kabuk: sol menü + üst çubuk + içerik ---------- */
.kabuk { display: grid; grid-template-columns: var(--menu-gen) minmax(0, 1fr); min-height: 100%; }
.menu { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--ray); border-right: 1px solid var(--cizgi); padding: var(--b18) var(--b12); display: flex; flex-direction: column; gap: var(--b22); }
.marka { display: flex; align-items: center; gap: var(--b10); padding: 0 var(--b10); font-weight: 700; font-size: var(--y18); letter-spacing: -.01em; text-decoration: none; }
.marka svg { width: 20px; height: 24px; flex: none; }
.menu nav { display: grid; gap: var(--b14); align-content: start; flex: 1; }
.menu-grup h2 { font-size: var(--y12); font-weight: 600; color: var(--ink3); padding: 0 var(--b10) var(--b6); }
.menu a.oge { display: flex; align-items: center; gap: var(--b10); padding: 7px var(--b10); border-radius: var(--kose); color: var(--ink2); text-decoration: none; font-weight: 500; }
.menu a.oge:hover { background: var(--yuzey); color: var(--ink); }
.menu a.oge[aria-current="page"] { background: var(--yuzey2); color: var(--ink); }
.menu a.oge[aria-current="page"] svg { color: var(--sari); }
.menu a.oge.yakinda { color: var(--ink3); }
.menu a.oge.yakinda svg { opacity: .7; }
.menu a.oge .ek { margin-left: auto; font-size: var(--y12); color: var(--ink3); font-weight: 400; }
.menu-alt { border-top: 1px solid var(--cizgi); padding-top: var(--b12); display: grid; gap: 2px; }

.ana { display: flex; flex-direction: column; min-width: 0; }
.ust { display: flex; align-items: center; gap: var(--b16); padding: var(--b14) var(--b28); border-bottom: 1px solid var(--cizgi); }
.ust .arama-ac { flex: 1; max-width: 460px; justify-content: flex-start; color: var(--ink3); background: var(--girdi); font-weight: 400; }
.ust .arama-ac kbd { margin-left: auto; }
.ust .sag { margin-left: auto; display: flex; align-items: center; gap: var(--b12); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--yuzey2); font-weight: 600; font-size: var(--y12); border: 0; cursor: pointer; text-decoration: none; }
.icerik { padding: var(--b28); display: grid; gap: var(--b22); align-content: start; }
.icerik:focus { outline: none; }

/* ---------- Simge ---------- */
svg.s { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Düğmeler ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--b8); height: var(--kontrol); padding: 0 var(--b14); border-radius: var(--kose); border: 1px solid var(--cizgi2); background: var(--yuzey); color: var(--ink); font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none; transition: border-color var(--gecis), background-color var(--gecis); }
.btn:hover { border-color: var(--sari); }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-ana { background: var(--sari); color: var(--sari-ustu); border-color: transparent; }
.btn-ana:hover { background: var(--sari-acik); }
.btn-ana kbd { border-color: rgba(30, 24, 5, .35); color: rgba(30, 24, 5, .7); }
.btn-sade { background: none; border-color: transparent; color: var(--ink2); padding: 0 var(--b8); }
.btn-sade:hover { color: var(--ink); border-color: transparent; background: var(--yuzey); }
.btn-tehlike { color: var(--kirmizi); }
.btn-tehlike:hover { border-color: var(--kirmizi); }
.btn-genis { width: 100%; height: 46px; font-size: var(--y15); }

kbd { display: inline-block; font: 500 11px/1 var(--yazi); padding: 3px 5px; border-radius: 4px; border: 1px solid var(--cizgi2); color: var(--ink3); }

/* ---------- Form ---------- */
.alan { display: grid; gap: var(--b6); align-content: start; }
.alan > label, .alan > .etiket { font-size: var(--y13); font-weight: 500; color: var(--ink2); }
.ipucu { font-size: var(--y12); color: var(--ink3); }
.bolum { display: grid; gap: var(--b18); align-content: start; }
.alan .hata-yazi { font-size: var(--y13); color: var(--kirmizi); display: flex; gap: var(--b6); align-items: center; }
.girdi { height: var(--kontrol); width: 100%; padding: 0 var(--b12); background: var(--girdi); border: 1px solid var(--cizgi2); border-radius: var(--kose); color: var(--ink); transition: border-color var(--gecis); }
textarea.girdi { height: auto; min-height: 76px; padding: var(--b10) var(--b12); resize: vertical; }
.girdi:hover { border-color: rgba(178, 204, 230, .32); }
.girdi:focus { outline: none; border-color: var(--sari); box-shadow: 0 0 0 1px var(--sari); }
.girdi[aria-invalid="true"] { border-color: var(--kirmizi); }
select.girdi { appearance: none; padding-right: var(--b28); background-image: linear-gradient(45deg, transparent 50%, var(--ink3) 50%), linear-gradient(135deg, var(--ink3) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.sifre-kutu { position: relative; }
.sifre-kutu .girdi { padding-right: 44px; }
.sifre-kutu button { position: absolute; right: 4px; top: 4px; height: 30px; width: 36px; border: 0; background: none; color: var(--ink3); cursor: pointer; border-radius: var(--kose-kucuk); display: grid; place-items: center; }
.sifre-kutu button:hover { color: var(--ink); }
.onay { display: flex; align-items: center; gap: var(--b10); cursor: pointer; color: var(--ink2); }
.onay input { width: 18px; height: 18px; accent-color: var(--sari); margin: 0; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: var(--b14); }
.form-eylem { display: flex; gap: var(--b10); align-items: center; }
.form-eylem .not { margin-left: auto; font-size: var(--y12); color: var(--ink3); }

/* ---------- Başlık satırı ---------- */
.sayfa-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--b22); flex-wrap: wrap; }
.sayfa-bas h1 { font-size: var(--y30); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.sayfa-bas p { color: var(--ink2); margin-top: var(--b6); font-size: var(--y15); }

/* ---------- Sekmeler ---------- */
.sekme-cizgi { display: flex; gap: var(--b22); border-bottom: 1px solid var(--cizgi); }
.sekme-cizgi a { padding: var(--b8) 0 var(--b10); color: var(--ink3); text-decoration: none; font-weight: 500; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.sekme-cizgi a:hover { color: var(--ink2); }
.sekme-cizgi a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--sari); }

/* ---------- Liste (tablo yerine çizgili satırlar) ---------- */
.liste { width: 100%; border-collapse: collapse; }
.liste th { text-align: left; font-size: var(--y12); font-weight: 500; color: var(--ink3); padding: 0 var(--b10) var(--b10); border-bottom: 1px solid var(--cizgi); }
.liste td { padding: var(--b12) var(--b10); border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.liste tbody tr { cursor: pointer; }
.liste tbody tr:hover td { background: rgba(35, 51, 70, .5); }
.liste tbody tr[aria-selected="true"] td { background: var(--yuzey2); }
.liste td .alt { display: block; color: var(--ink3); font-size: var(--y13); }
.liste td b { font-weight: 600; }

/* ---------- Panel ---------- */
.panel { background: var(--yuzey); border-radius: var(--kose-buyuk); padding: var(--b6) var(--b22); }
.panel > section { padding: var(--b18) 0; border-bottom: 1px solid var(--cizgi); }
.panel > section:last-child { border-bottom: 0; }
.panel h2 { font-size: var(--y15); font-weight: 600; margin-bottom: var(--b10); }

/* ---------- Etiket (durum) ---------- */
.durum { display: inline-flex; align-items: center; gap: var(--b6); font-size: var(--y13); color: var(--ink2); }
.durum::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink3); }
.durum.iyi::before { background: var(--yesil); }
.durum.kapali { color: var(--ink3); }
.cip { display: inline-flex; align-items: center; height: 22px; padding: 0 var(--b8); border-radius: 11px; background: var(--yuzey2); font-size: var(--y12); color: var(--ink2); }

/* ---------- Çekmece (sağdan açılan düzenleme paneli) ---------- */
.cekmece-arka { position: fixed; inset: 0; background: rgba(8, 13, 19, .55); z-index: 30; }
.cekmece { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--cekmece-gen), 100vw); background: var(--yuzey); border-left: 1px solid var(--cizgi2); z-index: 31; display: flex; flex-direction: column; animation: cekmece-gel 200ms cubic-bezier(.23, 1, .32, 1); }
@keyframes cekmece-gel { from { transform: translateX(24px); opacity: 0; } }
.cekmece header { display: flex; justify-content: space-between; align-items: center; padding: var(--b18) var(--b22); border-bottom: 1px solid var(--cizgi); }
.cekmece header h2 { font-size: var(--y18); font-weight: 600; }
.cekmece .govde { padding: var(--b22); display: grid; gap: var(--b18); overflow-y: auto; align-content: start; flex: 1; }
.cekmece footer { padding: var(--b16) var(--b22); border-top: 1px solid var(--cizgi); display: flex; gap: var(--b10); }

/* ---------- Geçici şifre kutusu ---------- */
.sifre-goster { display: grid; gap: var(--b10); padding: var(--b16); background: var(--girdi); border: 1px solid var(--sari); border-radius: var(--kose); }
.sifre-goster .deger { display: flex; align-items: center; justify-content: space-between; gap: var(--b12); font-size: var(--y22); font-weight: 600; letter-spacing: .04em; }
.sifre-goster p { color: var(--ink2); font-size: var(--y13); }
.sifre-goster .deger .btn { font-size: var(--y14); letter-spacing: 0; }

/* ---------- Arama penceresi (Ctrl+K) ---------- */
.palet-arka { position: fixed; inset: 0; background: rgba(8, 13, 19, .6); z-index: 40; display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; }
.palet { width: min(620px, calc(100vw - 32px)); background: var(--yuzey); border: 1px solid var(--cizgi2); border-radius: var(--kose-buyuk); overflow: hidden; }
.palet .palet-girdi { display: flex; align-items: center; gap: var(--b10); padding: 0 var(--b16); border-bottom: 1px solid var(--cizgi); color: var(--ink3); }
.palet input { flex: 1; height: 54px; border: 0; background: none; outline: none; font-size: var(--y17); color: var(--ink); }
.palet ul { max-height: 360px; overflow-y: auto; padding: var(--b6); }
.palet li { display: flex; align-items: center; gap: var(--b10); padding: var(--b10) var(--b12); border-radius: var(--kose); cursor: pointer; color: var(--ink2); }
.palet li .tur { margin-left: auto; font-size: var(--y12); color: var(--ink3); }
.palet li[aria-selected="true"] { background: var(--yuzey2); color: var(--ink); }
.palet li[aria-selected="true"] svg { color: var(--sari); }
.palet .bos { padding: var(--b18); color: var(--ink3); }
.palet footer { display: flex; gap: var(--b16); padding: var(--b10) var(--b16); border-top: 1px solid var(--cizgi); font-size: var(--y12); color: var(--ink3); }

/* ---------- Pencere (kısayollar vb.) ---------- */
dialog.pencere { background: var(--yuzey); color: var(--ink); border: 1px solid var(--cizgi2); border-radius: var(--kose-buyuk); padding: 0; width: min(520px, calc(100vw - 32px)); }
dialog.pencere::backdrop { background: rgba(8, 13, 19, .6); }
dialog.pencere header { display: flex; justify-content: space-between; align-items: center; padding: var(--b16) var(--b22); border-bottom: 1px solid var(--cizgi); }
dialog.pencere h2 { font-size: var(--y17); font-weight: 600; }
dialog.pencere .govde { padding: var(--b16) var(--b22) var(--b22); }
.kisayollar { display: grid; grid-template-columns: auto 1fr; gap: var(--b10) var(--b18); align-items: center; }
.kisayollar dt { display: flex; gap: var(--b4); }
.kisayollar dd { margin: 0; color: var(--ink2); }

/* ---------- Bildirim ---------- */
.bildirimler { position: fixed; left: var(--b22); bottom: var(--b22); display: grid; gap: var(--b8); z-index: 50; }
.bildirim { display: flex; align-items: center; gap: var(--b14); min-width: 280px; max-width: 460px; padding: var(--b12) var(--b16); background: var(--yuzey2); border: 1px solid var(--cizgi2); border-radius: var(--kose); animation: bildirim-gel 180ms cubic-bezier(.23, 1, .32, 1); }
.bildirim.hata { border-color: var(--kirmizi); }
.bildirim button { margin-left: auto; }
@keyframes bildirim-gel { from { transform: translateY(8px); opacity: 0; } }

/* ---------- Boş ve yakında ekranları ---------- */
.bos-ekran { max-width: 560px; display: grid; gap: var(--b12); padding: var(--b28) 0; }
.bos-ekran h2 { font-size: var(--y22); font-weight: 600; }
.bos-ekran p { color: var(--ink2); }

/* ---------- Giriş ekranı ---------- */
.giris-sayfa { min-height: 100%; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.giris-marka { background: var(--ray); border-right: 1px solid var(--cizgi); padding: var(--b28) 48px; display: flex; flex-direction: column; justify-content: space-between; }
.giris-marka .buyuk-damla { width: 56px; height: 68px; }
.giris-marka h1 { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; margin-top: var(--b22); }
.giris-marka p { color: var(--ink2); font-size: var(--y17); margin-top: var(--b10); max-width: 34ch; }
.giris-marka .alt-bilgi { color: var(--ink3); font-size: var(--y13); }
.giris-form { display: flex; align-items: center; padding: 48px; }
.giris-form form { width: 100%; max-width: 380px; display: grid; gap: var(--b18); }
.giris-form h2 { font-size: var(--y30); font-weight: 600; letter-spacing: -.02em; }
.giris-form .aciklama { color: var(--ink2); margin-top: calc(-1 * var(--b8)); }
.hizli-giris { width: 100%; max-width: 420px; display: grid; gap: var(--b18); }
.hizli-giris > .btn-sade { justify-self: start; }
.kisi-listesi { display: grid; gap: var(--b8); }
.kisi-sec { display: flex; align-items: center; gap: var(--b12); width: 100%; padding: var(--b12) var(--b14); background: var(--yuzey); border: 1px solid var(--cizgi2); border-radius: var(--kose); text-align: left; cursor: pointer; transition: border-color var(--gecis), background-color var(--gecis); }
.kisi-sec:hover, .kisi-sec:focus-visible { border-color: var(--sari); background: var(--yuzey2); }
.kisi-sec b { display: block; font-weight: 600; }
.kisi-sec .alt { color: var(--ink3); font-size: var(--y13); }
.kisi-sec kbd { margin-left: auto; }
.uyari-satir { font-size: var(--y13); color: var(--sari); display: flex; gap: var(--b6); align-items: center; }


/* ---------- Aşama çubuğu (imza): biten gri, şu anki sarı, sonraki boş ---------- */
.asama-cubugu { display: flex; gap: 3px; width: 160px; }
.asama-cubugu i { flex: 1; height: 6px; border-radius: 3px; background: var(--cizgi2); }
.asama-cubugu i.bitti { background: var(--ink3); }
.asama-cubugu i.simdi { background: var(--sari); }

/* ---------- Adım listesi (kurulum gibi sıralı işler) ---------- */
.adim-listesi { max-width: 720px; display: grid; }
.adim-listesi li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: var(--b14); align-items: center; padding: var(--b16) 0; border-bottom: 1px solid var(--cizgi); }
.adim-listesi li:first-child { border-top: 1px solid var(--cizgi); }
.adim-listesi .isaret { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--cizgi2); }
.adim-listesi .isaret svg { width: 14px; height: 14px; stroke-width: 3; }
.adim-listesi li.bitti .isaret { background: var(--ink3); border-color: var(--ink3); color: var(--zemin); }
.adim-listesi li.simdi .isaret { border-color: var(--sari); }
.adim-listesi b { display: block; font-weight: 600; font-size: var(--y15); }
.adim-listesi li.bitti b { color: var(--ink2); }
.adim-listesi .alt { color: var(--ink3); font-size: var(--y13); }
.bolum-bas { display: flex; justify-content: space-between; align-items: center; gap: var(--b16); }
.bolum-bas h2 { font-size: var(--y17); font-weight: 600; }
.sayac { color: var(--ink2); font-size: var(--y13); display: flex; gap: var(--b10); align-items: center; }
.dar { max-width: 720px; display: grid; gap: var(--b12); }

/* ---------- Form düzenleri ---------- */
.yan-duzen { display: grid; grid-template-columns: minmax(0, 1fr) var(--yan-gen); gap: var(--b28); align-items: start; max-width: 1100px; }
.iki-sutun { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b28); max-width: 900px; align-items: start; }
.form-blok { display: grid; gap: var(--b18); }
.form-blok h2 { font-size: var(--y17); font-weight: 600; }
.tam-satir { grid-column: 1 / -1; }
fieldset.alan { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.alan legend { padding: 0; margin-bottom: var(--b6); }
.onay .ipucu { display: block; }
.ikincil-yazi { color: var(--ink3); display: flex; align-items: center; gap: var(--b4); }
.belge-onizleme { display: grid; gap: var(--b4); }
.belge-onizleme b { font-size: var(--y17); }
.belge-onizleme .ust-yazi { color: var(--ink2); }
.belge-onizleme span:not(.ust-yazi) { color: var(--ink3); font-size: var(--y13); }
.cekmece footer .sag-yasli { margin-left: auto; }

@media (max-width: 860px) { .yan-duzen, .iki-sutun { grid-template-columns: 1fr; } }

/* ---------- Liste sayfası araç çubuğu ---------- */
.arac-cubugu { display: flex; gap: var(--b12); align-items: center; flex-wrap: wrap; }
.arac-cubugu .arama-kutu { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.arac-cubugu .arama-kutu svg { position: absolute; left: 11px; top: 10px; color: var(--ink3); pointer-events: none; }
.arac-cubugu .arama-kutu .girdi { padding-left: 36px; }
.arac-cubugu select.girdi { width: auto; min-width: 160px; }
.segment { display: flex; gap: var(--b4); padding: var(--b4); background: var(--girdi); border: 1px solid var(--cizgi); border-radius: 10px; }
.segment a { padding: 6px var(--b12); border-radius: 7px; color: var(--ink2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.segment a:hover { color: var(--ink); }
.segment a[aria-current="page"] { background: var(--yuzey2); color: var(--ink); }
.liste-alt { display: flex; justify-content: space-between; align-items: center; color: var(--ink3); font-size: var(--y13); }
.liste td.sag, .liste th.sag { text-align: right; }
.liste td.sayi { white-space: nowrap; }
.liste .borc { color: var(--kirmizi); }
.liste .alacak { color: var(--yesil); }
.liste .iptal td { color: var(--ink3); text-decoration: line-through; text-decoration-color: var(--cizgi2); }
.az { color: var(--sari); }
.para-rozet { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; margin-right: var(--b6); border-radius: 4px; border: 1px solid var(--cizgi2); font-size: 11px; font-weight: 600; color: var(--ink2); }

/* ---------- Kayıt kartı (müşteri, ürün) ---------- */
.kart-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--b22); flex-wrap: wrap; }
.kart-bas h1 { font-size: var(--y30); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.kart-bas .alt-bilgi { color: var(--ink2); margin-top: var(--b6); display: flex; gap: var(--b16); flex-wrap: wrap; align-items: center; }
.kart-bas .eylemler { display: flex; gap: var(--b8); flex-wrap: wrap; }
.geri { display: inline-flex; align-items: center; gap: var(--b6); color: var(--ink3); text-decoration: none; font-size: var(--y13); margin-bottom: var(--b8); }
.geri:hover { color: var(--ink); }
.ozet-serit { display: flex; flex-wrap: wrap; gap: var(--b6) var(--b28); padding: var(--b16) var(--b22); background: var(--yuzey); border-radius: var(--kose-buyuk); }
.ozet-serit div { display: grid; gap: 2px; align-content: start; }
.ozet-serit dt { font-size: var(--y12); color: var(--ink3); }
.ozet-serit dd { margin: 0; font-size: var(--y17); font-weight: 600; }
.ozet-serit dd.buyuk { font-size: var(--y22); }
.etiket-listesi { display: flex; gap: var(--b6); flex-wrap: wrap; }
.satir-ekle { display: grid; gap: var(--b10); }
.satir-ekle > .btn { justify-self: start; }
.satir-ekle .satir { display: grid; gap: var(--b8); align-items: end; }
.satir-ekle .satir .btn { height: var(--kontrol); }
.kutucuk { display: grid; gap: var(--b14); padding: var(--b16); border: 1px solid var(--cizgi); border-radius: var(--kose); }
.kutucuk > h3 { font-size: var(--y15); font-weight: 600; }
.kar-bilgi { display: flex; gap: var(--b16); flex-wrap: wrap; color: var(--ink2); font-size: var(--y13); min-height: 20px; }
.kar-bilgi b { color: var(--ink); }
.kar-bilgi .zarar { color: var(--kirmizi); }
.uc-sutun { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--b14); }
.dort-sutun { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--b14); }
.fiyat-grafik { width: 100%; height: 90px; display: block; }

/* ---------- Kur ve çevirici ---------- */
.kur-dugme { display: flex; gap: var(--b16); align-items: baseline; background: none; border: 0; color: var(--ink3); font-size: var(--y13); cursor: pointer; padding: var(--b6) var(--b8); border-radius: var(--kose-kucuk); }
.kur-dugme:hover { background: var(--yuzey); }
.kur-dugme b { color: var(--ink); font-weight: 600; }
.cevirici { position: fixed; z-index: 35; width: 300px; padding: var(--b16); background: var(--yuzey2); border: 1px solid var(--cizgi2); border-radius: var(--kose-buyuk); display: grid; gap: var(--b12); }
.cevirici .sonuc { font-size: var(--y22); font-weight: 600; }
.cevirici .not { font-size: var(--y12); color: var(--ink3); }

.borc-yazi { color: var(--kirmizi); }
.ozet-serit .ipucu { font-size: var(--y12); color: var(--ink3); font-weight: 400; }
dl.d-bilgi { margin: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--b10) var(--b16); align-content: start; }
dl.d-bilgi dt { color: var(--ink3); }
dl.d-bilgi dd { margin: 0; white-space: pre-line; }
.form-blok-baslik { font-size: var(--y15); font-weight: 600; margin-bottom: var(--b10); }
.yetkili-listesi { display: grid; gap: var(--b10); }
.yetkili-listesi li { display: grid; padding-bottom: var(--b10); border-bottom: 1px solid var(--cizgi); }
.yetkili-listesi .alt { color: var(--ink3); font-size: var(--y13); }
details > summary { list-style: none; width: fit-content; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary { margin-bottom: var(--b14); }
.liste tfoot td { border-bottom: 0; padding-top: var(--b14); }

.girdi-grup { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--b6); }
.dar-genis { max-width: 920px; }
fieldset.kutucuk { margin: 0; min-width: 0; }
fieldset.kutucuk[disabled] .girdi { opacity: .8; }
.alan-hiza { align-self: end; min-height: var(--kontrol); }
table.dar { max-width: 720px; }

/* ---------- Açılır arama listesi (müşteri ve ürün seçici) ---------- */
.acilir-kap { position: relative; }
.acilir { position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + 4px); max-height: 300px; overflow-y: auto; padding: var(--b4); background: var(--yuzey2); border: 1px solid var(--cizgi2); border-radius: var(--kose); }
.acilir li { display: grid; padding: var(--b8) var(--b10); border-radius: var(--kose-kucuk); cursor: pointer; }
.acilir li .alt { color: var(--ink3); font-size: var(--y12); }
.acilir li[aria-selected="true"], .acilir li:hover { background: var(--yuzey); }
.acilir li.eylem { display: flex; gap: var(--b8); align-items: center; color: var(--ink); }
.acilir li.eylem svg { color: var(--sari); }
.secili-kayit { display: flex; align-items: center; justify-content: space-between; gap: var(--b10); min-height: var(--kontrol); padding: var(--b6) var(--b6) var(--b6) var(--b12); background: var(--girdi); border: 1px solid var(--cizgi2); border-radius: var(--kose); }
.secili-kayit b { display: block; }
.secili-kayit .alt { color: var(--ink3); font-size: var(--y12); }

/* ---------- Belge ---------- */
.zincir { display: flex; flex-wrap: wrap; align-items: center; gap: var(--b6); }
.zincir .halka { display: grid; padding: var(--b6) var(--b12); border: 1px solid var(--cizgi2); border-radius: var(--kose); text-decoration: none; color: var(--ink2); }
.zincir .halka b { font-size: var(--y12); font-weight: 600; color: var(--ink3); }
.zincir .halka span { font-variant-numeric: tabular-nums; }
.zincir .halka.bu { border-color: var(--sari); color: var(--ink); }
.zincir a.halka:hover { border-color: var(--ink3); }
.zincir .ok { color: var(--ink3); display: flex; }
.belge-govde { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--b18); }
.toplam-kutu { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--b8) var(--b14); padding: var(--b16) var(--b18); background: var(--yuzey); border-radius: var(--kose-buyuk); justify-self: end; width: min(400px, 100%); }
.toplam-kutu dt { color: var(--ink2); }
.toplam-kutu dd { margin: 0; text-align: right; }
.toplam-kutu .genel { font-size: var(--y17); font-weight: 700; color: var(--ink); padding-top: var(--b8); border-top: 1px solid var(--cizgi); }
.belge-satirlari .aciklama-satiri td, .duzenleme-tablosu .aciklama-satiri td { background: rgba(35, 51, 70, .35); }
.uyari-kutu { display: flex; align-items: center; gap: var(--b10); padding: var(--b10) var(--b14); border: 1px solid var(--sari); border-radius: var(--kose); color: var(--ink); margin: 0; }
.uyari-kutu svg { color: var(--sari); }
.kalan-buyuk { display: flex; justify-content: space-between; align-items: baseline; padding: var(--b14) var(--b16); background: var(--girdi); border-radius: var(--kose); }
.kalan-buyuk b { font-size: var(--y30); color: var(--kirmizi); }
.arac-cubugu.ikincil { padding-top: var(--b8); border-top: 1px solid var(--cizgi); }
.ilerleme-kutu { display: inline-flex; gap: var(--b8); align-items: center; }
.ilerleme-kutu .asama-cubugu { width: 80px; }
.revizyonlar { width: fit-content; }

/* Düzenleyici tablo */
.satir-kutusu { gap: var(--b10); }
.secenek-cubugu { display: flex; flex-wrap: wrap; gap: var(--b8); align-items: center; }
.secenek-cubugu .secenek-ad { display: flex; gap: var(--b8); align-items: center; color: var(--ink2); font-size: var(--y13); }
.secenek-cubugu .secenek-ad .girdi { width: 180px; }
.duzenleme-tablosu { width: 100%; border-collapse: collapse; table-layout: fixed; }
.duzenleme-tablosu th:nth-child(1) { width: 32px; }
.duzenleme-tablosu th:nth-child(3) { width: 150px; }
.duzenleme-tablosu th:nth-child(4) { width: 84px; }
.duzenleme-tablosu th:nth-child(5) { width: 110px; }
.duzenleme-tablosu th:nth-child(6) { width: 64px; }
.duzenleme-tablosu th:nth-child(7) { width: 80px; }
.duzenleme-tablosu th:nth-child(8) { width: 136px; }
.duzenleme-tablosu .girdi { width: 100%; }
.duzenleme-tablosu th { text-align: left; font-size: var(--y12); font-weight: 500; color: var(--ink3); padding: 0 var(--b6) var(--b8); border-bottom: 1px solid var(--cizgi); }
.duzenleme-tablosu td { padding: var(--b8) var(--b6); vertical-align: top; border-bottom: 1px solid var(--cizgi); }
.duzenleme-tablosu tr.is-satiri td { border-bottom: 1px solid var(--cizgi2); padding-top: 0; }
.duzenleme-tablosu tr:has(+ .is-satiri) td { border-bottom: 0; }
.duzenleme-tablosu .sira { width: 28px; color: var(--ink3); padding-top: 18px; }
.duzenleme-tablosu td.urun-hucre { display: table-cell; }
.duzenleme-tablosu .urun-hucre > * + * { margin-top: var(--b6); }
.duzenleme-tablosu .girdi { height: 34px; }
.duzenleme-tablosu .ikincil-girdi { height: 30px; font-size: var(--y13); color: var(--ink2); }
.duzenleme-tablosu .toplam-hucre { white-space: nowrap; padding-top: 16px; }
.duzenleme-tablosu .toplam-hucre .btn { height: 28px; margin-left: var(--b4); vertical-align: middle; }
.duzenleme-tablosu tr.hatali td { background: rgba(255, 126, 111, .06); }
.secili-urun { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 var(--b8); min-height: 34px; }
.secili-urun .alt { grid-column: 1; }
.secili-urun .btn { grid-column: 2; grid-row: 1 / span 2; }
.secili-urun .alt { color: var(--ink3); font-size: var(--y12); }
.secili-urun .btn { height: 26px; padding: 0 var(--b6); }
.olcu { display: flex; align-items: center; gap: var(--b4); color: var(--ink3); }
.olcu .girdi { width: 100%; min-width: 0; padding: 0 var(--b6); }
.birim-yazi { display: inline-block; padding-top: 8px; color: var(--ink2); }
.son-fiyat { color: var(--sari); }
.is-alanlari { display: flex; flex-wrap: wrap; gap: var(--b8) var(--b14); align-items: center; font-size: var(--y12); color: var(--ink3); }
.is-alanlari label { display: flex; align-items: center; gap: var(--b6); }
.is-alanlari .girdi { height: 30px; width: auto; font-size: var(--y13); }
.is-alanlari .genis { flex: 1; min-width: 200px; }
.is-alanlari .genis .girdi { flex: 1; }

/* Talep */
.madde-satiri { grid-template-columns: 2fr 1fr 80px 1.5fr; display: grid; gap: var(--b8); padding-bottom: var(--b10); border-bottom: 1px solid var(--cizgi); }
.durum-cubugu { display: flex; gap: var(--b4); counter-reset: d; }
.durum-cubugu li { flex: 1; padding: var(--b8) var(--b12); background: var(--girdi); border-radius: var(--kose-kucuk); color: var(--ink3); font-size: var(--y13); border-top: 3px solid var(--cizgi2); }
.durum-cubugu li.bitti { color: var(--ink2); border-top-color: var(--ink3); }
.durum-cubugu li.simdi { color: var(--ink); border-top-color: var(--sari); }
.liste tr.gecikti td:first-child b { color: var(--kirmizi); }

/* Notlar ve dosyalar */
.iki-sutun.genis { max-width: none; }
.ek-listesi { display: grid; gap: var(--b6); }
.ek-listesi li { display: flex; justify-content: space-between; gap: var(--b10); }
.ek-listesi a { display: flex; gap: var(--b8); align-items: center; text-decoration: none; }
.ek-listesi a:hover { color: var(--sari); }
.birak { display: flex; gap: var(--b10); align-items: center; padding: var(--b16); border: 1px dashed var(--cizgi2); border-radius: var(--kose); color: var(--ink3); cursor: pointer; }
.birak.ustunde, .birak:hover { border-color: var(--sari); color: var(--ink2); }
.not-akisi { display: grid; gap: var(--b12); }
.not-akisi li { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--b10); }
.not-akisi time { color: var(--ink3); font-size: var(--y12); align-self: center; }
.not-akisi p { grid-column: 1 / -1; color: var(--ink2); white-space: pre-line; }
.not-yaz { display: flex; gap: var(--b8); }


@media (max-width: 860px) { .uc-sutun, .dort-sutun { grid-template-columns: 1fr 1fr; } }

@media (max-width: 860px) {
  .kabuk { grid-template-columns: 1fr; }
  .menu { position: static; height: auto; }
  .giris-sayfa { grid-template-columns: 1fr; }
  .giris-marka { padding: var(--b22); gap: var(--b18); }
  .giris-marka h1 { font-size: var(--y30); }
  .giris-form { padding: var(--b22); }
  .icerik, .ust { padding-inline: var(--b16); }
  .form-satir { grid-template-columns: 1fr; }
}

/* ---------------- Para: tahsilat, gider, kasa günlüğü (5. adım) ---------------- */
.s.ters { transform: scaleX(-1); }
.dar-girdi { width: 84px; }
.tarih-girdi { width: 170px; }
.iyi-yazi { color: var(--yesil); }
.kalan-buyuk.sade b { color: var(--ink); font-size: var(--y22); }
.kalan-buyuk.para-ustu b { color: var(--yesil); font-size: var(--y30); }
.odeme-satiri { display: flex; flex-wrap: wrap; gap: var(--b10) var(--b14); align-items: flex-start; padding-block: var(--b10); border-bottom: 1px solid var(--cizgi); }
.odeme-satiri .alan { min-width: 150px; flex: 1 1 150px; }
.odeme-satiri .alan-hiza { align-self: flex-end; }
.hizli-gider { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr); gap: var(--b12) var(--b14); align-items: end; }
.oneri-listesi { display: grid; gap: var(--b8); }
.oneri-listesi .uyari-kutu span { flex: 1; }
.dagilim { display: grid; gap: var(--b12); }
.dagilim li { display: grid; grid-template-columns: 1fr auto; gap: var(--b4) var(--b10); }
.dagilim i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: var(--cizgi); position: relative; overflow: hidden; }
.dagilim i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--oran) * 100%); background: var(--ink3); }

/* ---------------- Kasa ---------------- */
.kasa { display: grid; grid-template-columns: minmax(0, 1fr) 396px; gap: var(--b22); align-items: start; }
.kasa-sol { display: grid; gap: var(--b14); min-width: 0; }
.kasa-ust { display: flex; flex-wrap: wrap; gap: var(--b8) var(--b16); align-items: center; color: var(--ink3); font-size: var(--y13); }
.kasa-ust .sag-yasli { margin-left: auto; display: flex; gap: var(--b6); }
.kasa-ust .bekleyen { color: var(--sari); }
.barkod-kap { position: relative; }
.girdi.barkod { height: 56px; font-size: var(--y18); border: 2px solid var(--sari); padding-inline: var(--b16); }
.kategoriler { flex-wrap: wrap; }
.harf-kasasi { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); grid-auto-rows: minmax(96px, auto); gap: 1px; background: var(--cizgi2); border: 1px solid var(--cizgi2); border-radius: var(--kose-buyuk); overflow: hidden; }
.harf-kasasi > .ipucu { background: var(--zemin); padding: var(--b16); grid-column: 1 / -1; margin: 0; }
.bolme { display: flex; flex-direction: column; gap: var(--b4); align-items: flex-start; text-align: left; padding: var(--b12) var(--b14); background: var(--yuzey); color: var(--ink); border: 0; font: inherit; cursor: pointer; transition: background var(--gecis); }
.bolme:hover, .bolme:focus-visible { background: var(--yuzey2); outline: none; }
.bolme:focus-visible { box-shadow: inset 0 0 0 2px var(--sari); }
.bolme b { font-weight: 600; font-size: var(--y14); line-height: 1.3; }
.bolme .fiyat { margin-top: auto; font-weight: 600; }
.bolme .fiyat .alt { display: block; font-weight: 400; color: var(--ink3); font-size: var(--y12); }
.bolme .stok { color: var(--ink3); font-size: var(--y12); }
.bolme .stok.borc-yazi { color: var(--kirmizi); }
.bolme.buyuk { grid-column: span 2; grid-row: span 2; padding: var(--b18); }
.bolme.buyuk b { font-size: var(--y18); }
.bolme.buyuk .fiyat { font-size: var(--y22); }
.kasa-sag { position: sticky; top: var(--b16); display: grid; gap: var(--b14); padding: var(--b18); background: var(--yuzey); border-radius: var(--kose-buyuk); }
.sepet { display: grid; max-height: 42vh; overflow-y: auto; margin: 0 calc(var(--b6) * -1); padding-inline: var(--b6); }
.sepet .bos { color: var(--ink3); padding-block: var(--b14); }
.sepet-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "ad ad sil" "miktar fiyat tutar"; gap: var(--b6) var(--b8); padding-block: var(--b10); border-bottom: 1px solid var(--cizgi); align-items: center; }
.sepet-satir .ad { grid-area: ad; display: grid; gap: var(--b4); }
.sepet-satir .ad .girdi { height: 32px; }
.sepet-satir.hatali .ad b { color: var(--kirmizi); }
.sepet-satir .miktar, .sepet-satir .olcu { grid-area: miktar; display: flex; gap: var(--b4); align-items: center; }
.sepet-satir .miktar .girdi { width: 58px; height: 32px; text-align: center; }
.sepet-satir .olcu .girdi { width: 64px; height: 32px; }
.sepet-satir .miktar .btn { width: 30px; height: 32px; padding: 0; justify-content: center; }
.sepet-satir .fiyat { grid-area: fiyat; display: flex; gap: var(--b4); align-items: center; }
.sepet-satir .fiyat .girdi { width: 84px; height: 32px; }
.sepet-satir .fiyat .dar-girdi { width: 58px; }
.sepet-satir .tutar { grid-area: tutar; text-align: right; min-width: 84px; }
.sepet-satir > [data-sil] { grid-area: sil; }
.kasa-sag .toplam-kutu { width: 100%; padding: 0; background: none; border-radius: 0; }
.kasa-tutar { font-size: var(--y34); }
.odeme-bolumu { display: grid; gap: var(--b12); }
.odeme-dugmeleri { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--b8); }
.odeme-dugmeleri .btn { justify-content: center; }
.kasa-odeme { display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--b8); align-items: center; }
.kasa-odeme .alt { display: block; color: var(--ink3); font-size: var(--y12); }
.kasa-odeme .girdi { height: 34px; }
.belge-turu { justify-self: start; }
.kasa-alt { display: flex; flex-wrap: wrap; gap: var(--b4); justify-content: center; }
.satis-bitti { display: grid; gap: var(--b14); }
.satis-bitti h2 { display: flex; gap: var(--b8); align-items: center; font-size: var(--y22); margin: 0; }
.satis-bitti h2 svg { color: var(--yesil); }
.satis-bitti .eylemler { display: flex; flex-wrap: wrap; gap: var(--b8); }

@media (max-width: 1180px) {
  .kasa { grid-template-columns: 1fr; }
  .kasa-sag { position: static; }
  .hizli-gider { grid-template-columns: 1fr 1fr; }
}