/* ==========================================================================
   Kuru Temizleme SaaS — Ortak Tasarım Sistemi (ONAYLANAN PALET)
   Bazalt-yeşil zemin / Porselen pencere / Kızgın-ütü Amber / Deterjan Yeşili
   ========================================================================== */

@import url('fonts.css');

:root {
  --zemin: #1C2422;
  --zemin-doku: #223029;
  --pencere: #F6F3EC;
  --pencere-kenar: #E4DDCB;
  --yuzey: #FFFFFF;
  --yuzey-2: #FBF9F4;
  --ember: #C4652B;
  --ember-koyu: #A8501F;
  --ember-acik: rgba(196, 101, 43, 0.1);
  --sage: #6B8F71;
  --sage-koyu: #4E6E54;
  --murekkep: #262321;
  --ikincil-metin: #6F675C;
  --soluk: #A79C8E;
  --hata: #B65C4A;
  --hata-zemin: #FBEAE5;
  --basari-zemin: #E4EEE5;
  --uyari-zemin: #F4E9D8;
  --font-baslik: 'Space Grotesk', system-ui, sans-serif;
  --font-govde: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 12px;
  --golge: 0 1px 2px rgba(38,35,33,0.05), 0 6px 20px -8px rgba(38,35,33,0.12);
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-govde);
  color: var(--murekkep);
  background: var(--pencere);
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-baslik);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--murekkep);
  margin: 0 0 10px 0;
}
h1 { font-size: 1.45rem; }
h2 { font-size: 1.05rem; margin-top: 22px; margin-bottom: 10px; }

a { color: var(--ember-koyu); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { display: none; }

/* label zaten display:block olduğu için, şablonlardaki eski
   <label>...</label><br><input> deseninde <br> gereksiz/fazladan boşluk
   yaratıyordu — form içindeki <br> etiketleri görünmez. */
form br { display: none; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Üst menü (sayfa masaüstü dışında, doğrudan açıldığında görünür)
   -------------------------------------------------------------------------- */
nav {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 10px 20px;
  background: rgba(28, 36, 34, 0.96);
  font-family: var(--font-baslik);
  font-size: 0.88rem;
}
nav a {
  color: #E8E3D8;
  padding: 7px 12px;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
nav a:hover { background: rgba(255,255,255,0.08); color: #fff; text-decoration: none; }
nav .nav-marka { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; margin-right: 10px; }
nav .nav-logo {
  width: 28px; height: 28px; border-radius: 8px; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, #D8792F, var(--ember));
}
/* Masaüstü penceresi içinde üst menü gizli — masaüstünün kendi
   görev çubuğu/başlat menüsü aynı gezinmeyi sağlıyor. */
html.pencerede nav#icerik-nav { display: none; }

/* İçerik kapsayıcı — TEK kapsayıcı, tek dolgu (bkz. eski not: her öğeye
   ayrı dolgu verilmesi devasa boşluklara yol açıyordu). */
.icerik-kapsayici {
  padding: 18px 24px 28px;
  max-width: 1200px;
}
html:not(.pencerede) .icerik-kapsayici { margin: 0 auto; }

p { margin: 0 0 8px; }

/* Kaydırma sırasında sabit kalan üst bölüm (başlık, arama, filtreler) */
.sabit-ust {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(246, 243, 236, 0.94);
  backdrop-filter: blur(10px);
  margin: -18px -24px 12px;
  padding: 18px 24px 12px;
  border-bottom: 1px solid transparent;
}

.sabit-ust .baslik-satiri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sabit-ust .baslik-satiri h1 { margin-bottom: 0; }
.baslik-alt { font-size: 0.85rem; color: var(--ikincil-metin); margin: -6px 0 12px; }

.yenile-buton {
  background: transparent;
  color: var(--ikincil-metin);
  border: 1px solid var(--pencere-kenar);
  padding: 6px 12px;
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 0;
}
.yenile-buton:hover { background: #EFEAE0; border-color: var(--ember); color: var(--murekkep); }
/* Pencere başlığında zaten "Yenile" düğmesi var — içerikteki gereksiz */
html.pencerede .yenile-buton { display: none; }

/* Araç çubuğu: sayfa üstündeki işlem düğmeleri + arama */
.arac-cubugu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arac-cubugu .bosluk { flex: 1; }
.arama-kutusu { position: relative; flex: 1 1 260px; max-width: 380px; }
.arama-kutusu::before {
  content: "⌕"; position: absolute; left: 12px; top: 50%; transform: translateY(-52%);
  color: var(--soluk); font-size: 1.05rem; pointer-events: none;
}
.arama-kutusu input { padding-left: 34px !important; max-width: none !important; margin: 0 !important; }
.arama-sayac { font-size: 0.78rem; color: var(--soluk); font-family: var(--font-mono); white-space: nowrap; }

/* Tablo başlığı — .sabit-ust bloğunun HEMEN ALTINA sabitlenir.
   --sabit-ust-yukseklik değeri app.js tarafından ölçülüp yazılıyor.
   sticky, <thead> yerine her <th> hücresine uygulanıyor (daha güvenilir). */
table thead th {
  position: sticky;
  top: var(--sabit-ust-yukseklik, 0px);
  z-index: 20;
}

/* --------------------------------------------------------------------------
   Bildirim (flash) mesajları
   -------------------------------------------------------------------------- */
ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
ul li {
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 0.9rem;
  background: #EFEAE0;
  border: 1px solid var(--pencere-kenar);
}
.flash-liste li {
  position: relative; display: flex; align-items: flex-start; gap: 10px; padding-right: 40px;
  animation: flash-gel 0.25s ease-out; transition: opacity 0.4s, transform 0.4s;
}
.flash-liste li::before { font-weight: 700; }
.flash-liste li.msg-basari::before { content: "✓"; }
.flash-liste li.msg-hata::before { content: "!"; }
.flash-liste li.kayboluyor { opacity: 0; transform: translateY(-6px); }
.flash-kapat {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; margin: 0; padding: 0; border-radius: 7px;
  background: transparent !important; color: inherit !important; opacity: 0.55; font-size: 0.8rem; border: none !important;
}
.flash-kapat:hover { opacity: 1; background: rgba(0,0,0,0.06) !important; }
@keyframes flash-gel { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
li.msg-hata { background: var(--hata-zemin); border-color: #EAC5BC; color: #8A3E2E; }
li.msg-basari { background: var(--basari-zemin); border-color: #C9DBCB; color: #3F6B46; }
li.msg-plan_uyarisi, li.msg-plan_kisitlama { background: var(--uyari-zemin); border-color: #E6D3AD; color: #8C6E2E; }
li.msg-info { background: #EFEAE0; border-color: var(--pencere-kenar); color: var(--ikincil-metin); }

/* --------------------------------------------------------------------------
   Tablolar
   -------------------------------------------------------------------------- */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  background: var(--yuzey);
  border-radius: var(--radius);
  /* NOT: 'overflow: hidden' BİLEREK yok — üst öğede overflow:hidden
     position:sticky'yi bozuyor (tablo başlığı satırların ortasında
     "yüzüyordu"). Köşeler bunun yerine hücre bazında yuvarlanıyor. */
  box-shadow: var(--golge);
  border: 1px solid var(--pencere-kenar) !important;
}
table th, table td {
  border: none !important;
  border-bottom: 1px solid #EEE8DB !important;
  padding: 11px 14px !important;
  text-align: left;
  font-size: 0.9rem;
  vertical-align: middle;
}
table th {
  background: #F3EFE6;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ikincil-metin);
  border-bottom: 1px solid var(--pencere-kenar) !important;
}
table thead tr:first-child th:first-child { border-top-left-radius: calc(var(--radius) - 1px); }
table thead tr:first-child th:last-child { border-top-right-radius: calc(var(--radius) - 1px); }
table tr:last-child td { border-bottom: none !important; }
table tbody tr { transition: background 0.1s; }
table tbody tr:hover td { background: rgba(196,101,43,0.04); }
td.bos-hucre, td[colspan] { color: var(--soluk); text-align: center; padding: 28px 14px !important; }
.ikon-hucre { font-size: 1.25rem; text-align: center !important; width: 48px; }
.sag { text-align: right !important; }
.soluk { color: var(--soluk); }
.guclu { font-weight: 600; }

/* Satır sonundaki işlem düğmeleri (Detay / Düzenle / Sil ...) */
.satir-aksiyon { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.satir-aksiyon form { display: inline; margin: 0; }

/* --------------------------------------------------------------------------
   Durum rozetleri
   -------------------------------------------------------------------------- */
.rozet {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600;
  background: #EFEAE0; color: var(--ikincil-metin);
}
.rozet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.8; }
.durum-teslim_alindi { background: #ECEAE6; color: #5E5A55; }
.durum-bekliyor      { background: #F6EBD6; color: #8C6420; }
.durum-yikamada      { background: #DFEDF4; color: #2B6384; }
.durum-terzide       { background: #ECE3F3; color: #6B4E88; }
.durum-hazir         { background: #DDEEDF; color: #2F6B3A; }
.durum-teslim_edildi { background: #EFEDEA; color: #9A9186; }
.durum-kurutmada     { background: #DDF0EE; color: #2A6B66; }
.durum-utude         { background: #FBE6D8; color: #A0501F; }
.durum-islemde       { background: #E3E8F6; color: #3F5190; }
.odeme-odendi        { background: #DDEEDF; color: #2F6B3A; }
.odeme-kismi_odendi  { background: #F6EBD6; color: #8C6420; }
.odeme-odenmedi      { background: #F8E3DE; color: #9A3F2D; }

/* --------------------------------------------------------------------------
   İşlem aşaması adım çubuğu (bkz. templates/urun/_durum.html)
   -------------------------------------------------------------------------- */
.durum-adimlari { display: flex; flex-direction: column; gap: 8px; min-width: 300px; margin: 0; }
.adim-serit { display: flex; align-items: flex-start; }
.adim-serit .adim {
  flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 56px; padding: 2px 0; margin: 0; border: none; border-radius: 8px;
  background: transparent; color: var(--soluk); cursor: pointer;
  font-family: var(--font-govde); font-weight: 500; white-space: normal;
}
.adim-serit .adim:hover { background: transparent; }
.adim-serit .adim:active { transform: none; }
/* Adımlar arası bağlantı çizgisi */
.adim-serit .adim:not(:last-child)::after {
  content: ""; position: absolute; top: 15px; height: 2px; z-index: 0;
  left: calc(50% + 17px); right: calc(-50% + 17px);
  background: var(--pencere-kenar); transition: background 0.25s;
}
.adim-serit .adim.tamam::after { background: var(--sage); }
.adim-nokta {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  background: var(--yuzey); border: 2px solid var(--pencere-kenar);
  filter: grayscale(1); opacity: 0.55;
  transition: transform 0.15s, background 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s, filter 0.2s;
}
.adim-ad { font-size: 0.68rem; line-height: 1.15; text-align: center; transition: color 0.2s; }
.adim-serit .adim:hover .adim-nokta { opacity: 1; filter: none; border-color: var(--ember); transform: scale(1.1); }
.adim-serit .adim:hover .adim-ad { color: var(--murekkep); }
.adim-serit .adim:focus-visible { outline: none; }
.adim-serit .adim:focus-visible .adim-nokta { box-shadow: 0 0 0 3px rgba(196,101,43,0.35); }
.adim.tamam .adim-nokta { background: #E4EEE5; border-color: var(--sage); filter: none; opacity: 1; }
.adim.tamam .adim-ad { color: var(--sage-koyu); }
.adim.simdiki .adim-nokta {
  background: var(--ember); border-color: var(--ember); filter: none; opacity: 1;
  box-shadow: 0 0 0 4px rgba(196,101,43,0.18); transform: scale(1.12);
}
.adim.simdiki[data-adim="hazir"] .adim-nokta { background: var(--sage); border-color: var(--sage); box-shadow: 0 0 0 4px rgba(107,143,113,0.22); }
.adim.simdiki .adim-ad { color: var(--murekkep); font-weight: 700; }
.adim-eylem { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adim-eylem button { margin: 0; }
.adim-simdiki { font-size: 0.8rem; font-weight: 700; margin-right: 4px; }
.durum-adimlari.kaydediliyor { opacity: 0.6; pointer-events: none; }

/* Kompakt (Ürünler listesi): sadece noktalar; etiket üzerine gelince */
.durum-adimlari.kompakt { min-width: 200px; gap: 6px; }
.durum-adimlari.kompakt .adim { min-width: 34px; }
.durum-adimlari.kompakt .adim-nokta { width: 24px; height: 24px; font-size: 11px; }
.durum-adimlari.kompakt .adim:not(:last-child)::after { top: 13px; left: calc(50% + 13px); right: calc(-50% + 13px); }
.durum-adimlari.kompakt .adim-ad { display: none; }

/* Aşaması değişen satır kısa bir an vurgulanır */
@keyframes satir-vurgu { from { background: rgba(107,143,113,0.22); } to { background: transparent; } }
tr.vurgu td { animation: satir-vurgu 1.2s ease-out; }

/* Sayfa içi kısa bildirim (alt ortada) */
#sayfa-bildirim {
  position: fixed; left: 50%; bottom: 18px; z-index: 1000;
  display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px);
  padding: 10px 12px 10px 16px; border-radius: 12px;
  background: #262321; color: #F6F3EC; font-size: 0.86rem;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none; transform: translate(-50%, 12px);
  transition: opacity 0.2s, transform 0.2s;
}
#sayfa-bildirim.gorunur { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
#sayfa-bildirim.hata { background: #8A3E2E; }
#sayfa-bildirim button {
  margin: 0; padding: 5px 12px; font-size: 0.8rem; border-radius: 7px;
  background: rgba(255,255,255,0.14); color: #fff;
}
#sayfa-bildirim button:hover { background: rgba(255,255,255,0.26); }

/* Teslim penceresi */
.teslim-penceresi {
  width: min(420px, calc(100vw - 24px)); padding: 0; border: none; border-radius: 16px;
  background: var(--pencere); color: var(--murekkep);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.5);
}
.teslim-penceresi::backdrop { background: rgba(20,26,24,0.45); backdrop-filter: blur(2px); }
.teslim-penceresi[open] { animation: pencere-gel 0.18s ease-out; }
@keyframes pencere-gel { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }
.teslim-penceresi form { padding: 20px 22px 18px; }
.teslim-penceresi h2 { margin: 0 0 2px; font-size: 1.2rem; }
.teslim-urun { color: var(--ikincil-metin); font-size: 0.9rem; margin-bottom: 14px; }
.teslim-ozet { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.teslim-ozet > div { background: var(--yuzey); border: 1px solid var(--pencere-kenar); border-radius: 10px; padding: 9px 12px; }
.teslim-ozet span { display: block; font-size: 0.72rem; color: var(--ikincil-metin); text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-baslik); }
.teslim-ozet strong { font-size: 1.05rem; }
.teslim-tutar-satiri { display: flex; gap: 6px; align-items: center; }
.teslim-tutar-satiri input { flex: 1; min-width: 0; max-width: none; font-family: var(--font-mono); font-size: 1.05rem; }
.teslim-tutar-satiri button { flex-shrink: 0; }
.secim-grubu { display: flex; gap: 6px; }
.secim-grubu label { flex: 1; margin: 0; }
.secim-grubu input { position: absolute; opacity: 0; pointer-events: none; }
.secim-grubu span {
  display: block; text-align: center; padding: 9px 6px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--pencere-kenar); background: var(--yuzey);
  font-size: 0.85rem; font-weight: 600; color: var(--murekkep); transition: border-color 0.15s, background 0.15s;
}
.secim-grubu span:hover { border-color: #D6CCB6; }
.secim-grubu input:checked + span { border-color: var(--ember); background: var(--ember-acik); color: var(--ember-koyu); }
.secim-grubu input:focus-visible + span { box-shadow: 0 0 0 3px rgba(196,101,43,0.25); }
.teslim-penceresi [data-t-uyari] { color: #8C6420; margin-top: 10px; }
.teslim-penceresi .form-butonlar { margin-top: 18px; }
.teslim-penceresi .form-butonlar button[type=submit] { flex: 1; }

/* --------------------------------------------------------------------------
   Admin paneli (bkz. templates/admin/)
   -------------------------------------------------------------------------- */
.admin-ust {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: -18px -24px 18px; padding: 14px 24px 0;
  background: linear-gradient(180deg, #EFEAE0, var(--pencere));
  border-bottom: 1px solid var(--pencere-kenar);
}
.admin-marka { font-family: var(--font-baslik); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; padding-bottom: 12px; }
.admin-marka-ikon {
  width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(155deg, #71838A, #3E4B50); font-size: 16px;
}
.admin-sekmeler { display: flex; gap: 2px; overflow-x: auto; align-self: flex-end; }
.admin-sekme {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px 11px; white-space: nowrap;
  font-family: var(--font-baslik); font-weight: 600; font-size: 0.86rem; color: var(--ikincil-metin);
  border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; text-decoration: none;
}
.admin-sekme:hover { color: var(--murekkep); background: rgba(0,0,0,0.04); text-decoration: none; }
.admin-sekme.aktif { color: var(--ember-koyu); border-bottom-color: var(--ember); background: var(--pencere); }

/* Admin sayfalarında sabit üst blok sekmelerin altına yapışır */
.admin-ust + .sabit-ust { margin-top: -18px; }

.sayfa-baslik { margin-bottom: 14px; }
.sayfa-baslik h1 { margin-bottom: 4px; }
.geri-link { font-size: 0.82rem; font-weight: 600; display: inline-block; margin-bottom: 6px; }

.admin-kart {
  background: var(--yuzey); border: 1px solid var(--pencere-kenar); border-radius: var(--radius);
  box-shadow: var(--golge); padding: 16px 18px; margin-bottom: 14px;
}
.admin-kart h2 { margin: 0 0 12px; font-size: 1rem; }
.admin-kart-baslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.admin-kart-baslik h2 { margin: 0; }
.admin-kart table { box-shadow: none; }

/* KPI kartları */
.kpi-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  background: var(--yuzey); border: 1px solid var(--pencere-kenar); border-radius: var(--radius); box-shadow: var(--golge);
}
.kpi-ikon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; color: #fff; font-size: 19px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.kpi-ikon.renk-mavi  { background: linear-gradient(155deg, #4F93B5, #2B5A75); }
.kpi-ikon.renk-yesil { background: linear-gradient(155deg, #7FA585, #4E6E54); }
.kpi-ikon.renk-altin { background: linear-gradient(155deg, #C9A24F, #8C6E2E); }
.kpi-ikon.renk-amber { background: linear-gradient(155deg, #E08A3C, #B45A22); }
.kpi-deger { font-family: var(--font-mono); font-size: 1.55rem; font-weight: 700; line-height: 1.15; }
.kpi-deger.tutar { font-size: 1.3rem; }
.kpi-etiket { font-size: 0.8rem; font-weight: 600; color: var(--ikincil-metin); margin-top: 2px; }
.kpi-alt { font-size: 0.74rem; color: var(--soluk); margin-top: 4px; }
.artis { color: var(--sage-koyu); font-weight: 700; }

.panel-izgara { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.panel-izgara .admin-kart { margin-bottom: 14px; }

.dikkat-satir { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #EEE8DB; }
.dikkat-satir:last-child { border-bottom: none; }
.dikkat-bilgi { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dikkat-bilgi strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bos-durum { padding: 22px 8px; text-align: center; color: var(--ikincil-metin); font-size: 0.88rem; }

/* Yatay oran çubukları (plan dağılımı, limit kullanımı) */
.cubuk { height: 8px; border-radius: 5px; background: #EEE8DB; overflow: hidden; flex: 1; min-width: 50px; }
.cubuk-dolu { height: 100%; border-radius: 5px; background: var(--sage); min-width: 2px; transition: width 0.4s; }
.cubuk-dolu.gri { background: #B8AFA2; }
.cubuk-dolu.kritik { background: #D2922E; }
.cubuk-dolu.tasti { background: #B63A2A; }
.dagilim-satir { margin-bottom: 12px; }
.dagilim-ust { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85rem; margin-bottom: 4px; }
.kullanim-satir { display: grid; grid-template-columns: 50px 1fr auto; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--ikincil-metin); }
.kullanim-satir + .kullanim-satir { margin-top: 4px; }
.kucuk-metin { font-size: 0.75rem; }
.pasif-satir td { opacity: 0.6; }
.pasif-satir:hover td { opacity: 1; }
tr.filtre-disi { display: none; }
.pasifler-gizli tr.pasif-satir { display: none; }
.onay-satir-kucuk { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.sade-tablo { border: none !important; }

/* Düzenleme sayfaları: form + yan özet */
.duzen-iki-sutun { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.form-izgara .alan-tam { grid-column: 1 / -1; }
.admin-kart .form-izgara input, .admin-kart .form-izgara select { max-width: none; }
.form-izgara label { margin-top: 10px; }
.yan-ozet { position: sticky; top: 12px; }
.yan-ozet-satir { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid #EEE8DB; font-size: 0.85rem; }

.bilgi-kutusu {
  padding: 10px 14px; border-radius: 10px; font-size: 0.84rem; line-height: 1.45;
  background: #EAF1F4; border: 1px solid #CFE0E8; color: #2B5A75; margin: 0 0 14px;
}
.bilgi-kutusu.uyari { background: var(--uyari-zemin); border-color: #E6D3AD; color: #7A5A1E; margin-top: 12px; }

/* Aç/kapa anahtarı (checkbox) */
.anahtar-satir { display: flex; align-items: flex-start; gap: 12px; margin: 0; cursor: pointer; font-weight: 400; color: var(--murekkep); font-size: 0.9rem; }
input[type=checkbox].anahtar {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 1px 0 0; cursor: pointer;
  width: 40px; height: 22px; border-radius: 11px; background: #D6CCB6; position: relative; transition: background 0.2s;
}
input[type=checkbox].anahtar::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.2s;
}
input[type=checkbox].anahtar:checked { background: var(--sage); }
input[type=checkbox].anahtar:checked::after { transform: translateX(18px); }
input[type=checkbox].anahtar:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

/* Plan kartları */
.plan-kartlari { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.plan-karti {
  display: flex; flex-direction: column; gap: 12px; padding: 18px;
  background: var(--yuzey); border: 1px solid var(--pencere-kenar); border-radius: 14px; box-shadow: var(--golge);
  border-top: 4px solid var(--ember); transition: transform 0.15s, box-shadow 0.15s;
}
.plan-karti:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -14px rgba(38,35,33,0.3); }
.plan-karti.pasif { border-top-color: #C9C1B3; opacity: 0.75; }
.plan-karti-ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-karti-ust h2 { margin: 0; font-size: 1.1rem; }
.plan-fiyat .tutar { font-size: 1.6rem; font-weight: 700; }
.plan-fiyat .soluk { margin-left: 3px; }
.plan-ozellik { margin: 0; }
.plan-ozellik li {
  display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; margin: 0;
  background: none; border: none; border-top: 1px solid #EEE8DB; border-radius: 0; font-size: 0.86rem;
}
.plan-karti-alt { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }

@media (max-width: 860px) {
  .panel-izgara, .duzen-iki-sutun { grid-template-columns: 1fr; }
  .yan-ozet { position: static; }
}
@media (max-width: 640px) {
  .admin-ust { margin: -12px -14px 14px; padding: 10px 14px 0; }
  .admin-ust + .sabit-ust { margin-top: -14px; }
}
@media (max-width: 560px) {
  .form-izgara { grid-template-columns: 1fr; }
}

/* Hizmet türü (katalog): etiket + formdaki seçim kartları */
.hizmet-etiketi { font-size: 0.8rem; white-space: nowrap; cursor: help; border-bottom: 1px dotted var(--soluk); }
.hizmet-secim { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; max-width: 760px; margin-bottom: 6px; }
.hizmet-kart {
  display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--pencere-kenar); border-radius: 10px; background: var(--yuzey);
  font-weight: 400; color: var(--murekkep); transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.hizmet-kart:hover { border-color: #D6CCB6; }
.hizmet-kart input { position: absolute; opacity: 0; pointer-events: none; }
.hizmet-kart:has(input:checked) { border-color: var(--ember); background: var(--ember-acik); box-shadow: 0 0 0 1px var(--ember); }
.hizmet-kart:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(196,101,43,0.3); }
.hk-ust { display: flex; align-items: center; gap: 7px; font-size: 0.88rem; }
.hk-ikon { font-size: 1.05rem; }
.hk-aciklama { font-size: 0.74rem; color: var(--ikincil-metin); line-height: 1.3; }
.hk-akis { font-size: 0.7rem; color: var(--sage-koyu); font-weight: 600; line-height: 1.35; margin-top: 2px; }

/* --------------------------------------------------------------------------
   Formlar
   -------------------------------------------------------------------------- */
label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ikincil-metin);
  margin: 12px 0 5px;
}
label:first-child { margin-top: 0; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=tel],
input[type=number], input[type=date], select, textarea {
  font-family: var(--font-govde);
  font-size: 0.92rem;
  padding: 9px 12px;
  border: 1px solid var(--pencere-kenar);
  border-radius: 9px;
  background: var(--yuzey);
  color: var(--murekkep);
  width: 100%;
  max-width: 360px;
  margin-bottom: 2px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder, textarea::placeholder { color: #B4AA9C; }
input:hover, select:hover, textarea:hover { border-color: #D6CCB6; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(196,101,43,0.15);
}
input[type=search]::-webkit-search-cancel-button { cursor: pointer; }
textarea { min-height: 64px; max-width: 520px; }
input[type=checkbox], input[type=radio] { accent-color: var(--ember); }

/* --------------------------------------------------------------------------
   Düğmeler — <button> ve düğme görünümlü linkler (a.dugme)
   -------------------------------------------------------------------------- */
button, input[type=submit], a.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-baslik);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.2;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--ember);
  color: #fff;
  cursor: pointer;
  margin-top: 6px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}
a.dugme { margin-top: 0; }
button:hover, a.dugme:hover { background: var(--ember-koyu); text-decoration: none; }
button:active, a.dugme:active { transform: scale(0.98); }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.dugme.ikincil, button.ikincil {
  background: var(--yuzey); color: var(--murekkep); border-color: var(--pencere-kenar);
}
.dugme.ikincil:hover, button.ikincil:hover { background: #F3EFE6; border-color: #D6CCB6; }
.dugme.kucuk, button.kucuk { padding: 5px 10px; font-size: 0.78rem; border-radius: 7px; margin-top: 0; }
.dugme.hayalet, button.hayalet { background: transparent; color: var(--ember-koyu); border-color: transparent; }
.dugme.hayalet:hover, button.hayalet:hover { background: var(--ember-acik); }

/* Silme / pasife alma düğmeleri: kırmızı çerçeveli, dolgusuz */
form[action*="sil"] button, form[action*="pasife"] button, button.tehlike {
  background: transparent;
  color: var(--hata);
  border: 1px solid #E3B7AC;
  padding: 5px 10px;
  font-size: 0.78rem;
  margin-top: 0;
}
form[action*="sil"] button:hover, form[action*="pasife"] button:hover, button.tehlike:hover {
  background: var(--hata-zemin); border-color: var(--hata);
}

/* Gönderiliyor göstergesi (bkz. app.js çift gönderim koruması) */
button.gonderiliyor { position: relative; color: transparent !important; }
button.gonderiliyor::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff;
  animation: don 0.7s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Kartlar ve bilgi blokları
   -------------------------------------------------------------------------- */
.kart {
  background: var(--yuzey); border: 1px solid var(--pencere-kenar); border-radius: var(--radius);
  box-shadow: var(--golge); padding: 16px 18px;
}
.bilgi-satirlari { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 0.88rem; color: var(--ikincil-metin); margin-bottom: 12px; }
.bilgi-satirlari strong { color: var(--murekkep); font-weight: 600; }

/* Kategori seçim kartları (katalog ekleme formları) */
.kategori-secim {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.kategori-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--pencere-kenar);
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.85rem;
  background: #fff;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.kategori-chip { margin: 0; font-weight: 500; color: var(--murekkep); }
.kategori-chip input[type=radio] { display: none; }
.kategori-chip:hover { border-color: var(--ember); }
.kategori-chip:has(input:checked) {
  background: var(--ember);
  color: #fff;
  border-color: var(--ember);
}
.yeni-kategori-blok {
  border: 1px solid var(--pencere-kenar);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 14px;
  background: var(--yuzey-2);
}

/* Durum sekmeleri (Ürünler listesi) */
.durum-sekmeleri { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.durum-sekme {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--pencere-kenar);
  background: #fff; color: var(--murekkep); text-decoration: none; font-size: 0.82rem;
  font-family: var(--font-baslik); font-weight: 600; transition: border-color 0.15s, background 0.15s;
}
.durum-sekme:hover { border-color: var(--ember); text-decoration: none; }
.durum-sekme.aktif { background: var(--murekkep); color: #fff; border-color: var(--murekkep); }
.durum-sekme .sayi { opacity: 0.6; font-weight: 500; margin-left: 3px; font-family: var(--font-mono); font-size: 0.75rem; }

/* Ürün listesi hızlı filtreleri (masaüstü "Bugün" paneliyle aynı) */
.hizli-filtreler { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 -4px; }
.hizli-etiket { font-size: 0.74rem; font-weight: 600; color: var(--ikincil-metin); margin-right: 2px; }
.hizli-filtre {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border-radius: 999px;
  border: 1px dashed var(--pencere-kenar); color: var(--ikincil-metin); font-size: 0.78rem; font-weight: 600;
  text-decoration: none; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.hizli-filtre::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.55; }
.hizli-filtre:hover { border-color: var(--ember); color: var(--murekkep); text-decoration: none; }
.hizli-filtre.aktif { border-style: solid; border-color: var(--ember); background: var(--ember-acik); color: var(--ember-koyu); }
.hizli-filtre.hf-geciken::before { background: var(--hata); opacity: 1; }
.hizli-filtre.hf-geciken.aktif { border-color: var(--hata); background: var(--hata-zemin); color: var(--hata); }
.hizli-filtre .hf-kaldir { font-size: 0.95rem; line-height: 1; margin-left: 1px; }

code {
  background: #EFEAE0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  font-family: var(--font-mono);
}

/* Form yardımcı metni ve buton satırı */
.alan-ipucu { font-size: 0.76rem; color: var(--soluk); margin: 2px 0 6px; max-width: 480px; }
.form-butonlar { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.form-butonlar button { margin-top: 0; }
.tutar { font-family: var(--font-mono); white-space: nowrap; font-size: 0.88em; }
.ozet-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 6px 0 16px; }
.ozet-kart { background: #fff; border: 1px solid var(--pencere-kenar); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--golge); }
.ozet-kart .etiket { font-size: 0.72rem; color: var(--ikincil-metin); text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-baslik); }
.ozet-kart .deger { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 700; margin-top: 4px; }
.bilgi-notu { font-size: 0.8rem; color: var(--ikincil-metin); }
.sonuc-yok { color: var(--soluk); text-align: center; padding: 24px 0; }

/* Klavye ile gezinmede odak görünür olsun (erişilebilirlik) */
a:focus-visible, button:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
.onay-kucuk { display: flex; gap: 6px; align-items: flex-start; font-size: 0.74rem; font-weight: 500; color: var(--murekkep); max-width: 260px; margin: 0 0 4px; }
.onay-kucuk input { margin-top: 2px; }
.sade-alt { padding: 14px 22px 24px; font-size: 0.78rem; color: var(--soluk); }
.sade-alt a { color: var(--soluk); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.16); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.28); }

@media (max-width: 640px) {
  nav { flex-wrap: wrap; padding: 8px 12px; }
  .icerik-kapsayici { padding: 12px 14px; }
  /* Dar ekranda sabit üst blok ekranın yarısını kaplıyordu; tablo da kendi
     yatay kaydırma alanı olduğu için sabit başlık satırların ortasında
     "yüzüyordu" — mobilde ikisi de normal akışta. */
  .sabit-ust { position: static; margin: -12px -14px 10px; padding: 12px 14px 10px; }
  table thead th { position: static; }
  .satir-aksiyon { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Diğer sayfalar: ekip, profil, raporlama, planlar, fiyat, hata
   ========================================================================== */
.bos-kutu {
  padding: 18px; border: 1px dashed #D6CCB6; border-radius: var(--radius);
  text-align: center; color: var(--ikincil-metin); font-size: 0.88rem; background: var(--yuzey-2);
}
.zorunlu { color: var(--hata); }
.form-izgara-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-izgara-2 input, .form-izgara-2 select { max-width: none; }
.kart .alan label { margin-top: 12px; }
.kart .alan input { max-width: none; }

/* Ekip */
.uye-listesi { display: flex; flex-direction: column; gap: 8px; max-width: 860px; }
.uye-karti {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px;
  background: var(--yuzey); border: 1px solid var(--pencere-kenar); border-radius: var(--radius); box-shadow: var(--golge);
}
.uye-karti.pasif { opacity: 0.6; }
.uye-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-baslik); font-weight: 700; background: linear-gradient(155deg, #7FA585, #4E6E54);
}
.uye-avatar.yonetici { background: linear-gradient(155deg, #E08A3C, #B45A22); }
.uye-avatar.davet { background: #EFEAE0; font-size: 1.05rem; }
.uye-bilgi { flex: 1; min-width: 180px; display: flex; flex-direction: column; line-height: 1.35; }
.uye-bilgi .soluk { font-size: 0.82rem; }
.uye-eylem { min-width: 110px; display: flex; justify-content: flex-end; }
.uye-eylem form { margin: 0; }

/* Radyo kartları (rol seçimi vb.) */
.secim-kartlari { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.secim-karti {
  display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--pencere-kenar); border-radius: 10px; background: var(--yuzey); font-weight: 400; color: var(--murekkep);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.secim-karti input { position: absolute; opacity: 0; pointer-events: none; }
.secim-karti:has(input:checked) { border-color: var(--ember); background: var(--ember-acik); box-shadow: 0 0 0 1px var(--ember); }
.secim-karti:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(196,101,43,0.3); }
.sk-ust { font-size: 0.92rem; }
.sk-aciklama { font-size: 0.78rem; color: var(--ikincil-metin); line-height: 1.4; }

/* Davet oluşturuldu */
.basari-ikon {
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 10px; font-size: 1.3rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; background: var(--basari-zemin); color: #3F6B46;
}
.kopyala-satiri { display: flex; gap: 8px; margin: 12px 0 10px; }
.kopyala-satiri input { max-width: none; font-family: var(--font-mono); font-size: 0.8rem; }
.kopyala-satiri button { margin: 0; flex-shrink: 0; }
.paylas-dugmeleri { display: flex; gap: 8px; flex-wrap: wrap; }

/* Profil */
.profil-ust { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.profil-ust h1 { margin-bottom: 4px; }
.profil-avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; color: #fff; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center; font-family: var(--font-baslik); font-weight: 700;
  background: linear-gradient(155deg, #7FA585, #4E6E54); box-shadow: 0 6px 16px -6px rgba(38,35,33,0.4);
}
.ayar-satiri { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
input:disabled { background: #F3EFE6; color: var(--ikincil-metin); cursor: not-allowed; }

/* Şifre alanı yardımcıları (profil/şifre — bkz. static/js/auth.js) */
.sifre-kap { position: relative; }
.sifre-kap input { padding-right: 70px !important; max-width: none; }
.sifre-goster {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); margin: 0 !important;
  border: none !important; background: transparent !important; padding: 5px 8px !important;
  font-size: 0.74rem !important; color: var(--soluk) !important;
}
.sifre-goster:hover { background: #EFEAE0 !important; color: var(--murekkep) !important; }
.alan-uyari { font-size: 0.75rem; color: #9A5A1E; margin: 5px 0 0; font-weight: 600; }
.alan-uyari.iyi { color: #3F6B46; }
.sifre-guc { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.72rem; color: var(--soluk); }
.sifre-guc-ray { flex: 1; height: 5px; border-radius: 3px; background: #ECE6D8; overflow: hidden; }
.sifre-guc-ray div { height: 100%; width: 0; border-radius: 3px; transition: width 0.25s; }
.sifre-guc.seviye-0 .sifre-guc-ray div { background: #B63A2A; }
.sifre-guc.seviye-1 .sifre-guc-ray div { background: #D2922E; }
.sifre-guc.seviye-2 .sifre-guc-ray div { background: #8FB08F; }
.sifre-guc.seviye-3 .sifre-guc-ray div { background: #4E8A5A; }

/* Raporlama */
.rapor-filtre { display: flex; flex-direction: column; gap: 10px; }
.hazir-araliklar { display: flex; gap: 6px; flex-wrap: wrap; }
.hazir-araliklar .durum-sekme { margin: 0; cursor: pointer; }
.hazir-araliklar .durum-sekme:hover { background: #fff; }
.hazir-araliklar .durum-sekme.aktif:hover { background: var(--murekkep); }
.tarih-alanlari { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.tarih-alanlari label { margin-top: 0; }
.tarih-alanlari input { width: auto; margin: 0; }
.tarih-ok { color: var(--soluk); padding-bottom: 9px; }
.rapor-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ozet-kart.vurgu-yesil .deger { color: var(--sage-koyu); }
.ozet-kart.vurgu-amber { border-color: #E6D3AD; background: #FFFBF3; }
.ozet-kart.vurgu-amber .deger { color: #9A5A1E; }
.cubuk-dolu.amber { background: linear-gradient(90deg, #E08A3C, var(--ember)); }

/* Planlar (firma görünümü) */
.kullanim-karti { max-width: 560px; margin-bottom: 16px; }
.kullanim-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kullanim-satir.buyuk { grid-template-columns: 60px 1fr auto; font-size: 0.84rem; }
.kullanim-satir.buyuk .cubuk { height: 10px; }
.plan-karti.mevcut { border-top-color: var(--sage); box-shadow: 0 0 0 2px var(--sage), var(--golge); }
.plan-eylem { margin-top: auto; }
.plan-eylem .onay-kucuk { max-width: none; margin-bottom: 8px; }

/* Fiyat belirleme */
.fiyat-karsilastir { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; padding-bottom: 14px; border-bottom: 1px solid #EEE8DB; }
.fiyat-karsilastir > div:not(.ok) { display: flex; flex-direction: column; gap: 2px; }
.fiyat-karsilastir .etiket { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ikincil-metin); font-family: var(--font-baslik); }
.fiyat-karsilastir strong { font-size: 1.2rem; }
.fiyat-karsilastir .ok { color: var(--soluk); font-size: 1.2rem; }
.fark { font-size: 0.78rem; font-weight: 700; }
.fark.artis { color: var(--sage-koyu); }
.fark.azalis { color: var(--hata); }

/* Hata sayfası */
.hata-sayfasi { max-width: 520px; margin: 40px auto; text-align: center; }
.hata-ikon {
  width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 22px; font-size: 2.1rem;
  display: flex; align-items: center; justify-content: center; background: #EFEAE0;
}
.hata-kod { font-family: var(--font-mono); color: var(--soluk); margin-bottom: 4px; }

@media (max-width: 640px) {
  .form-izgara-2, .secim-kartlari, .rapor-izgara { grid-template-columns: 1fr; }
  .uye-eylem { width: 100%; justify-content: flex-start; min-width: 0; }
}
@media print {
  nav, .yazdir-gizle, .yenile-buton, #sayfa-bildirim { display: none !important; }
  body { background: #fff; }
  .sabit-ust { position: static; background: none; }
  table thead th { position: static; }
  .ozet-kart, table { box-shadow: none; }
}

/* Toplu teslim penceresi (bkz. musteri/detay.html) */
.toplu-liste { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.toplu-satir {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--pencere-kenar); border-radius: 10px; background: var(--yuzey);
  font-weight: 400; color: var(--murekkep); font-size: 0.86rem;
}
.toplu-satir:has(input:checked) { border-color: var(--sage); background: #F1F7F2; }
.toplu-satir input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--sage); }
.toplu-ad { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.toplu-ad small { font-size: 0.72rem; }

/* Gün sonu raporu */
.gun-gezinti { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
table tfoot td { background: #F3EFE6; border-top: 1px solid var(--pencere-kenar) !important; }

/* Sayfalama (bkz. templates/_sayfalama.html) */
.sayfalama { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; margin: 16px 0 4px; }
.sayfa-no {
  min-width: 34px; height: 32px; padding: 0 8px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.82rem; color: var(--murekkep); text-decoration: none; border: 1px solid transparent;
}
a.sayfa-no:hover { border-color: var(--pencere-kenar); background: var(--yuzey); text-decoration: none; }
.sayfa-no.aktif { background: var(--murekkep); color: var(--pencere); font-weight: 700; }
.sayfa-bosluk { color: var(--soluk); padding: 0 2px; }

/* ==========================================================================
   KOYU TEMA — <html class="koyu"> (masaüstü sağ tık menüsünden açılır;
   tercih tarayıcıda "kt_tema" anahtarıyla hatırlanır, bkz. base.html)
   ========================================================================== */
html.koyu {
  --pencere: #161C1A; --pencere-kenar: #2C3632; --yuzey: #1E2623; --yuzey-2: #1A211F;
  --murekkep: #ECE7DC; --ikincil-metin: #B3AA9C; --soluk: #8A8175;
  --hata: #E0826E; --hata-zemin: #3A2420; --basari-zemin: #1E3325; --uyari-zemin: #372E1E;
  --ember-koyu: #F0A064; --ember-acik: rgba(224,138,60,0.16);
  --golge: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px -10px rgba(0,0,0,0.6);
  color-scheme: dark;
}
html.koyu body { background: var(--pencere); }
html.koyu .sabit-ust { background: rgba(22,28,26,0.94); }
html.koyu table th, html.koyu table tfoot td { background: #232C29; }
html.koyu table th, html.koyu table td { border-bottom-color: #29332F !important; }
html.koyu table { border-color: var(--pencere-kenar) !important; }
html.koyu table tbody tr:hover td { background: rgba(224,138,60,0.06); }
html.koyu ul li, html.koyu code { background: #232C29; border-color: var(--pencere-kenar); }
html.koyu li.msg-hata { color: #F2B8AA; border-color: #5A3029; }
html.koyu li.msg-basari { color: #A8D8B2; border-color: #2F4A36; }
html.koyu li.msg-plan_uyarisi, html.koyu li.msg-plan_kisitlama { color: #E8CF96; border-color: #5A4A28; }
html.koyu input::placeholder, html.koyu textarea::placeholder { color: #6E675E; }
html.koyu input:hover, html.koyu select:hover, html.koyu textarea:hover { border-color: #3C4843; }
html.koyu input:disabled { background: #232C29; }
html.koyu .dugme.ikincil:hover, html.koyu button.ikincil:hover, html.koyu .yenile-buton:hover { background: #28322E; border-color: #3C4843; }
html.koyu .durum-sekme, html.koyu .kategori-chip { background: var(--yuzey); }
html.koyu .durum-sekme.aktif { background: #ECE7DC; color: #161C1A; border-color: #ECE7DC; }
html.koyu .hazir-araliklar .durum-sekme:hover { background: var(--yuzey); }
html.koyu .hazir-araliklar .durum-sekme.aktif:hover { background: #ECE7DC; }
html.koyu .bilgi-kutusu { background: #1C2A31; border-color: #2D4350; color: #9CCBE0; }
html.koyu .bilgi-kutusu.uyari { background: #2E2718; border-color: #4E4128; color: #E8CF96; }
html.koyu .cubuk { background: #29332F; }
html.koyu .bos-kutu { border-color: #3A4540; }
html.koyu .hata-ikon, html.koyu .uye-avatar.davet { background: #232C29; }
html.koyu .admin-ust { background: linear-gradient(180deg, #1B2320, var(--pencere)); }
html.koyu .admin-sekme:hover { background: rgba(255,255,255,0.05); }
html.koyu .ozet-kart { background: var(--yuzey); }
html.koyu .ozet-kart.vurgu-amber { background: #2A2419; border-color: #4A3D24; }
html.koyu .ozet-kart.vurgu-amber .deger { color: #F0B26E; }
html.koyu .ozet-kart.vurgu-yesil .deger, html.koyu .artis, html.koyu .fark.artis { color: #8FCB9B; }
html.koyu .toplu-satir:has(input:checked) { background: #1E3325; }
html.koyu .adim-nokta { background: var(--yuzey); }
html.koyu .adim.tamam .adim-nokta { background: #1E3325; }
html.koyu .adim.tamam .adim-ad, html.koyu .hk-akis { color: #8FCB9B; }
html.koyu .urun-karti, html.koyu .sepet-panel { background: var(--yuzey) !important; }
html.koyu #sayfa-bildirim { background: #ECE7DC; color: #161C1A; }
html.koyu #sayfa-bildirim button { background: rgba(0,0,0,0.1); color: #161C1A; }
html.koyu .yasal { background: var(--yuzey) !important; }
html.koyu .sifre-goster:hover { background: #28322E !important; }
html.koyu .sifre-guc-ray { background: #29332F; }
/* Rozetler: koyu zeminde okunaklı tonlar */
html.koyu .rozet { background: #28322E; color: var(--ikincil-metin); }
html.koyu .durum-teslim_alindi { background: #2A2F2D; color: #C7C1B8; }
html.koyu .durum-bekliyor, html.koyu .odeme-kismi_odendi { background: #3A3020; color: #E8C27E; }
html.koyu .durum-yikamada { background: #1C3340; color: #8CC7E6; }
html.koyu .durum-kurutmada { background: #193634; color: #82D1C8; }
html.koyu .durum-utude { background: #3E2A1D; color: #F2A873; }
html.koyu .durum-terzide { background: #2F2640; color: #C3A6EC; }
html.koyu .durum-islemde { background: #232B42; color: #A2B3EC; }
html.koyu .durum-hazir, html.koyu .odeme-odendi { background: #1E3325; color: #8FCB9B; }
html.koyu .durum-teslim_edildi { background: #262B29; color: #8A8175; }
html.koyu .odeme-odenmedi { background: #3A2420; color: #F2A796; }
table tfoot td[colspan] { text-align: left; padding: 11px 14px !important; color: var(--murekkep); }

/* ==========================================================================
   Ürün (işlem) detayı + teslim bilgisi (bkz. urun/islem_detay.html, _durum.html)
   ========================================================================== */
.urun-ust { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.urun-ust-ikon {
  width: 64px; height: 64px; border-radius: 18px; flex-shrink: 0; font-size: 2rem;
  display: flex; align-items: center; justify-content: center; background: var(--yuzey); border: 1px solid var(--pencere-kenar);
}
.urun-ust-bilgi { flex: 1; min-width: 240px; }
.urun-ust-bilgi h1 { margin: 0 0 6px; }
.urun-no { font: 800 1.5rem/1 var(--font-mono); letter-spacing: 0.5px; color: var(--ember-koyu); margin-bottom: 4px; }
.urun-ust-eylem { display: flex; gap: 8px; flex-wrap: wrap; }
.urun-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.urun-izgara .kart { margin-bottom: 14px; }
.urun-izgara .sade-tablo { box-shadow: none; }

.tarih-seridi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tarih-adim {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px;
  border: 1px dashed var(--pencere-kenar); background: var(--yuzey-2);
}
.tarih-adim.tamam { border-style: solid; background: var(--yuzey); }
.tarih-adim.vurgu { border-color: var(--sage); background: #F1F7F2; }
.ta-etiket { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ikincil-metin); font-family: var(--font-baslik); }
.tarih-adim strong { font-size: 1.05rem; }
.tarih-adim small { color: var(--ikincil-metin); font-family: var(--font-mono); }

.barkod-onizleme { text-align: center; }
.barkod-onizleme svg { width: 100%; height: 56px; display: block; border-radius: 4px; }
.barkod-no { font: 800 1.6rem/1.2 var(--font-mono); margin-top: 6px; letter-spacing: 1px; }

.teslim-bilgi { display: inline-flex; flex-direction: column; font-size: 0.84rem; white-space: nowrap; line-height: 1.25; }
.teslim-bilgi small { font-family: var(--font-mono); color: var(--ikincil-metin); font-size: 0.72rem; }
.teslim-bilgi.edildi { color: var(--sage-koyu); font-weight: 600; }
.teslim-bilgi.tahmini { color: var(--ikincil-metin); }
.teslim-bilgi.gecikti { color: var(--hata); font-weight: 600; }

html.koyu .tarih-adim.vurgu { background: #1E3325; }
html.koyu .teslim-bilgi.edildi { color: #8FCB9B; }
html.koyu .barkod-onizleme svg { background: #fff; padding: 4px; }

@media (max-width: 760px) {
  .urun-izgara, .tarih-seridi { grid-template-columns: 1fr; }
}

/* Ürün tanımı (alınan ürünün ne olduğu — bkz. islem.urun_tanimi) */
.urun-tanimi { font-size: 0.8rem; font-weight: 600; color: var(--murekkep); margin-top: 1px; max-width: 260px; }
.urun-tanimi::before { content: "↳ "; color: var(--soluk); font-weight: 400; }
.urun-tanimi.buyuk { font-size: 1rem; max-width: none; margin: -2px 0 8px; }
.tanim-formu { display: flex; gap: 8px; }
.tanim-formu input { max-width: none; margin: 0; }

/* ==========================================================================
   TABLOLARIN PENCEREYE SIĞMASI
   - Birleştirilmiş hücreler (müşteri/ürün, tutar+ödeme, geliş+teslim)
   - Aşama çubuğu dar pencerede küçülür (sadece geçerli aşamanın adı)
   - 760 px ve altında tablolar kaydırma çubuğu yerine kartlara dönüşür
     (sütun başlıkları app.js ile hücrelere data-etiket olarak yazılır)
   ========================================================================== */
.urun-hucre { min-width: 170px; }
.urun-hucre .ust-bilgi { font-size: 0.8rem; margin-bottom: 1px; }
.urun-hucre .ust-bilgi .tutar { font-size: 0.72rem; }
.adet-rozeti { display: inline-block; font: 700 0.72rem var(--font-mono); padding: 1px 6px; border-radius: 6px; background: #EFEAE0; color: var(--murekkep); }
html.koyu .adet-rozeti { background: #28322E; }
.tutar-hucre { white-space: nowrap; }
.tutar-hucre .rozet { margin-top: 4px; }
.tarih-hucre { white-space: nowrap; font-size: 0.84rem; }
.tarih-hucre + .tarih-hucre { margin-top: 3px; }

.durum-adimlari { min-width: 0; }
.durum-adimlari:not(.kompakt) .adim-simdiki { display: none; }
.durum-adimlari.kompakt { min-width: 176px; }
.durum-adimlari.kompakt .adim { min-width: 30px; }
@media (max-width: 1120px) {
  /* Tam aşama çubuğu dar pencerede kompakta döner */
  .durum-adimlari:not(.kompakt) { min-width: 176px; }
  .durum-adimlari:not(.kompakt) .adim { min-width: 30px; }
  .durum-adimlari:not(.kompakt) .adim-nokta { width: 24px; height: 24px; font-size: 11px; }
  .durum-adimlari:not(.kompakt) .adim:not(:last-child)::after { top: 13px; left: calc(50% + 13px); right: calc(-50% + 13px); }
  .durum-adimlari:not(.kompakt) .adim-ad { display: none; }
  .durum-adimlari:not(.kompakt) .adim-simdiki { display: inline; }
}

@media (max-width: 760px) {
  table.kartli, table.kartli tbody, table.kartli tr, table.kartli td { display: block; width: 100%; }
  table.kartli { background: transparent; box-shadow: none; border: none !important; }
  table.kartli thead, table.kartli tfoot { display: none; }
  table.kartli tbody tr {
    background: var(--yuzey); border: 1px solid var(--pencere-kenar); border-radius: 12px;
    box-shadow: var(--golge); margin-bottom: 10px; padding: 6px 12px;
  }
  table.kartli tbody tr:hover td { background: transparent; }
  table.kartli td { position: relative; border: none !important; border-bottom: 1px dashed #EEE8DB !important; padding: 8px 0 8px 36% !important; min-height: 34px; text-align: left !important; }
  table.kartli td:last-child { border-bottom: none !important; }
  table.kartli td::before {
    content: attr(data-etiket); position: absolute; left: 0; top: 9px; width: 33%;
    font: 600 0.7rem var(--font-baslik); text-transform: uppercase; letter-spacing: .04em; color: var(--ikincil-metin);
  }
  table.kartli td:not([data-etiket])::before, table.kartli td[data-etiket=""]::before { content: none; }
  table.kartli td:not([data-etiket]), table.kartli td[data-etiket=""] { padding-left: 0 !important; }
  table.kartli td.ikon-hucre { display: none; }
  table.kartli td[colspan] { padding: 16px 0 !important; text-align: center !important; }
  table.kartli .satir-aksiyon { justify-content: flex-start; }
  html.koyu table.kartli td { border-bottom-color: #29332F !important; }
}

/* Dar pencerede sığma: simge sütunu gizlenir, admin sekmeleri kendi içinde kayar */
@media (max-width: 900px) {
  table .ikon-hucre, table th:first-child:empty { display: none; }
}
.admin-ust > * { min-width: 0; }
.admin-sekmeler { max-width: 100%; scrollbar-width: none; }
.admin-sekmeler::-webkit-scrollbar { display: none; }
.panel-izgara { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.admin-kart, .kart { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 860px) { .panel-izgara { grid-template-columns: minmax(0, 1fr); } }

/* Ürün satırı: ürün adı ana başlık, müşteri + fiş no altta; en sağda Detay
   düğmesi; satırın boş yerine tıklamak da detayı açar (bkz. app.js) */
.urun-hucre .urun-adi { font-weight: 700; font-size: 0.95rem; color: var(--murekkep); line-height: 1.3; }
.urun-hucre .alt-bilgi { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 0.8rem; }
.musteri-baglanti { color: var(--ikincil-metin); font-weight: 500; }
.musteri-baglanti:hover { color: var(--ember-koyu); }
.fis-no-rozeti {
  font: 600 0.72rem var(--font-mono); padding: 1px 7px; border-radius: 6px; white-space: nowrap;
  background: var(--yuzey-2); border: 1px solid var(--pencere-kenar); color: var(--ikincil-metin);
}
.eylem-hucre { width: 1%; white-space: nowrap; text-align: right !important; }
.detay-dugmesi { gap: 4px; }
.detay-dugmesi span[aria-hidden] { font-size: 1.05rem; line-height: 1; }
tr.tiklanabilir { cursor: pointer; }
tr.tiklanabilir:hover td { background: rgba(196,101,43,0.06); }
tr.tiklanabilir:hover .detay-dugmesi { border-color: var(--ember); color: var(--ember-koyu); }
@media (max-width: 760px) {
  table.kartli td.eylem-hucre { width: 100%; }
  table.kartli .detay-dugmesi { width: 100%; justify-content: center; padding: 8px; }
}

/* 761–960 px: Detay düğmesi yalnızca ok (›), aşama düğmeleri sıkı */
@media (min-width: 761px) and (max-width: 960px) {
  .detay-dugmesi .detay-yazi { display: none; }
  .detay-dugmesi { padding: 6px 10px; }
  .durum-adimlari .adim-eylem button { padding: 5px 8px; font-size: 0.74rem; }
  table th, table td { padding: 10px 10px !important; }
}

/* ==========================================================================
   Onay penceresi (bkz. app.js ktOnay) — tarayıcının confirm() kutusu yerine
   ========================================================================== */
.kt-onay-ortu {
  position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(20, 26, 24, 0.5); backdrop-filter: blur(3px); animation: kt-onay-belir 0.15s ease-out;
}
.kt-onay-ortu.kapaniyor { opacity: 0; transition: opacity 0.15s; }
.kt-onay {
  width: 100%; max-width: 420px; background: var(--yuzey); color: var(--murekkep);
  border-radius: 16px; padding: 22px 22px 18px; text-align: center;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,0,0,0.05);
  animation: kt-onay-yuksel 0.2s cubic-bezier(.2,.8,.2,1);
}
.kt-onay-ikon {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; font-size: 1.6rem;
  display: flex; align-items: center; justify-content: center; background: var(--uyari-zemin);
}
.kt-onay.tehlike .kt-onay-ikon { background: var(--hata-zemin); }
.kt-onay.bilgi .kt-onay-ikon { background: #EAF1F4; }
.kt-onay h2 { margin: 0 0 8px; font-size: 1.15rem; }
.kt-onay p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--ikincil-metin); white-space: pre-line; }
.kt-onay-dugmeler { display: flex; gap: 8px; margin-top: 20px; }
.kt-onay-dugmeler button { flex: 1; margin: 0; padding: 11px 14px; font-size: 0.9rem; }
button.tehlike-dolu { background: #C8412F; color: #fff; }
button.tehlike-dolu:hover { background: #A8321F; }
@keyframes kt-onay-belir { from { opacity: 0; } to { opacity: 1; } }
@keyframes kt-onay-yuksel { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
html.koyu .kt-onay.bilgi .kt-onay-ikon { background: #1C2A31; }

/* Silinemeyen kayıt düğmesi: kilitli görünür, tıklanınca nedenini anlatır */
button.kilitli, .kilitli {
  background: transparent !important; color: var(--soluk) !important; border: 1px dashed var(--pencere-kenar) !important;
  cursor: help;
}
button.kilitli:hover { border-color: var(--soluk) !important; background: transparent !important; }