:root {
  --renk-metin: #1f2430;
  --renk-metin-soluk: #5b6472;
  --renk-zemin: #f5f6f8;
  --renk-yuzey: #ffffff;
  --renk-cizgi: #dfe3e8;
  --renk-vurgu: #2f6fed;
  --renk-vurgu-koyu: #1f4fbf;
  --renk-basari: #1f8a4c;
  --renk-hata: #c0392b;
  --renk-uyari: #b8860b;
  --radius: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--renk-zemin);
  color: var(--renk-metin);
  line-height: 1.5;
}

.konteyner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.ust-bar {
  background: var(--renk-yuzey);
  border-bottom: 1px solid var(--renk-cizgi);
}

.ust-bar-ic {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.25rem;
}

.marka {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--renk-vurgu-koyu);
  text-decoration: none;
}

.ust-nav {
  display: flex;
  gap: 1rem;
  flex: 1;
}

.ust-nav a {
  color: var(--renk-metin-soluk);
  text-decoration: none;
  font-size: 0.95rem;
}

.ust-nav a:hover { color: var(--renk-vurgu-koyu); }

.ust-kullanici {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--renk-metin-soluk);
}

.baglanti-dugme {
  background: none;
  border: none;
  color: var(--renk-vurgu);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

main.konteyner { padding-top: 1.5rem; padding-bottom: 3rem; }

h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.75rem 0 0.75rem; }

.mesajlar { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.mesaj { padding: 0.6rem 0.9rem; border-radius: var(--radius); font-size: 0.9rem; }
.mesaj-success { background: #e7f6ec; color: var(--renk-basari); }
.mesaj-error { background: #fceceb; color: var(--renk-hata); }
.mesaj-info, .mesaj-warning { background: #fff6e0; color: var(--renk-uyari); }

.alan { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.3rem; max-width: 420px; }
.alan label { font-size: 0.9rem; color: var(--renk-metin-soluk); }
input, select, textarea {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  font: inherit;
  background: var(--renk-yuzey);
  color: var(--renk-metin);
}

button, input[type="submit"] {
  background: var(--renk-vurgu);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  font: inherit;
  cursor: pointer;
}
button:hover { background: var(--renk-vurgu-koyu); }
button:disabled, input[type="submit"]:disabled {
  background: var(--renk-metin-soluk);
  cursor: not-allowed;
  opacity: 0.6;
}
button:disabled:hover { background: var(--renk-metin-soluk); }

a.dugme-baglanti {
  display: inline-block;
  background: var(--renk-vurgu);
  color: #fff;
  border-radius: var(--radius);
  padding: 0.55rem 1.1rem;
  text-decoration: none;
}
a.dugme-baglanti:hover { background: var(--renk-vurgu-koyu); }

.giris-kutu {
  max-width: 360px;
  margin: 3rem auto 0;
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: 1.75rem;
}

.errorlist { color: var(--renk-hata); font-size: 0.85rem; margin: 0.2rem 0 0; padding: 0; list-style: none; }

.tablo-sarici { overflow-x: auto; }
.tablo { width: 100%; border-collapse: collapse; background: var(--renk-yuzey); }
.tablo th, .tablo td {
  text-align: left;
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--renk-cizgi);
  font-size: 0.85rem;
}
.tablo th { color: var(--renk-metin-soluk); font-weight: 600; }
/* Çok kolonlu (müşteri listesi gibi) tablolar için daha sıkışık görünüm */
.tablo-kompakt th, .tablo-kompakt td { padding: 0.2rem 0.4rem; font-size: 0.78rem; }
.tablo-kompakt .rozet { padding: 0.05rem 0.4rem; font-size: 0.7rem; }
/* Satır içi küçük buton (ör. Pasifleştir) — taşmayı önler */
.btn-mini {
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  white-space: nowrap;
  cursor: pointer;
}
.giren-eposta { white-space: nowrap; font-family: monospace; font-size: 0.82em; }
.giren-eposta-satir { margin: 0.25rem 0 0.75rem; }

/* Sorgu işleme ekranı — "Firma Geçmişi" üst menüsü (bu sorgunun VKN/TC'siyle
   eşleşen geçmiş kayıtlar). Eski sistemdeki sekme şeridi gibi YAN YANA durur;
   kayıt OLAN sekme SARI vurgulanır (kullanıcı talebi) — editör/moderatör sonuç
   yazmadan önce dikkatini çeksin. Panel açma/kapama istemci tarafındadır:
   panel, sonuç yazılan formun üstünde olduğu için sayfa yenilenirse yazılmış
   metin kaybolurdu. */
.firma-gecmisi { margin: 0.5rem 0 1rem; }
.fg-serit {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  border-bottom: 2px solid var(--renk-cizgi); padding-bottom: 0.3rem;
}
.fg-sekme {
  cursor: pointer; font: inherit; font-weight: 600; font-size: 0.85rem;
  padding: 0.35rem 0.8rem; border: 1px solid var(--renk-cizgi);
  border-radius: 6px 6px 0 0; background: #f7f8fa;
  color: var(--renk-metin-soluk);
}
.fg-sekme:hover { background: #eef1f5; }
.fg-sayi {
  display: inline-block; min-width: 1.2rem; text-align: center;
  padding: 0 0.35rem; border-radius: 999px; font-size: 0.72rem;
  background: #e3e7ee; color: var(--renk-metin-soluk);
}
/* Kayıt OLAN sekme: sarı vurgulu. Sarı zeminde okunurluk için metin koyu
   kahve/amber tonunda — soluk gri kontrastı düşürürdü. */
.fg-dolu {
  background: #fff3cd; border-color: #e0a800; color: #7a5600;
}
.fg-dolu:hover { background: #ffe9a8; }
.fg-dolu .fg-sayi { background: #e0a800; color: #4a3400; }
/* Açık olan sekme */
.fg-aktif { border-bottom-color: transparent; box-shadow: inset 0 -2px 0 0 var(--renk-vurgu, #4f46e5); }
.fg-panel {
  border: 1px solid var(--renk-cizgi); border-top: none;
  border-radius: 0 0 6px 6px; padding: 0.5rem;
}
.tablo tr.tiklanabilir { cursor: pointer; }
.tablo tr.tiklanabilir:hover td { background: var(--renk-vurgu-soluk, #eef2ff); }
.dugme-iptal {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.78rem;
  font-family: inherit;
  border-radius: 999px;
  border: none;
  background: #fceceb;
  color: var(--renk-hata);
  cursor: pointer;
}
.dugme-iptal:hover { background: #f8d7d5; }

.rozet {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: #eef1f5;
  color: var(--renk-metin-soluk);
}
.rozet-cevaplandi, .rozet-onaylandi { background: #e7f6ec; color: var(--renk-basari); }
.rozet-iptal { background: #fceceb; color: var(--renk-hata); }
.rozet-iade, .rozet-itiraz { background: #fff6e0; color: var(--renk-uyari); }
.rozet-girildi, .rozet-islemde, .rozet-onay_bekliyor, .rozet-bekliyor { background: #e8eefd; color: var(--renk-vurgu-koyu); }
.rozet-tamamlandi { background: #fff6e0; color: var(--renk-uyari); }
/* Durum rozeti = düğme (Hizmet Açma): ayrı "Pasif Yap" butonu yerine rozetin
   kendisine tıklanır. Rozet görünümünü korur, yalnız tıklanabilir olduğunu
   belli eder. */
.durum-dugmesi {
  cursor: pointer; font: inherit; font-size: 0.78rem; font-weight: 600;
  border: 1px solid transparent;
}
.durum-dugmesi:hover { filter: brightness(0.94); border-color: currentColor; }

/* Hizmet Açma > Dönemler: yıl bazlı açılır gruplar + kutucuklu liste.
   44-132 dönem düz basıldığında ekran boğuluyordu. */
.donem-yil { border: 1px solid var(--renk-cizgi); border-radius: 6px; margin: 0.3rem 0; }
.donem-yil > summary {
  cursor: pointer; padding: 0.3rem 0.6rem; font-size: 0.85rem;
  display: flex; gap: 0.6rem; align-items: baseline;
}
.donem-yil > summary:hover { background: #f7f8fa; }
.donem-yil > form, .donem-yil > details { padding: 0.4rem 0.6rem 0.6rem; }
.donem-kutucuklar {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-bottom: 0.5rem;
}
.donem-kutucuklar label {
  font-size: 0.82rem; font-weight: normal; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.donem-kutucuk { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.donem-gorunurluk-link { font-size: 0.7rem; color: var(--renk-metin-soluk); }

/* Dönem görünürlük ekranı: mod seçimi + aramalı müşteri listesi */
.donem-arama { margin: 0.5rem 0 1rem; display: flex; gap: 0.4rem; align-items: center; }
.gorunurluk-secim { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.4rem; }
.gorunurluk-secim label { font-weight: normal; display: inline-flex; gap: 0.3rem; align-items: center; }
.musteri-secim {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 0.15rem 1rem; max-height: 22rem; overflow-y: auto;
  border: 1px solid var(--renk-cizgi); border-radius: 6px; padding: 0.5rem;
}
.musteri-secim label {
  font-weight: normal; font-size: 0.85rem;
  display: flex; gap: 0.35rem; align-items: baseline;
}
.donem-ayrinti > summary { cursor: pointer; font-size: 0.78rem; color: var(--renk-metin-soluk); }
/* İki ekleme formu (yıl toplu + tek dönem) tek satırda */
.donem-ekle-satiri {
  margin-top: 0.5rem; display: flex; flex-wrap: wrap;
  gap: 0.3rem 1rem; align-items: center;
}
.donem-ekle-satiri .donem-mini-form { display: inline-flex; gap: 0.3rem; align-items: center; }

/* Dönem ekleme: "yalnız belirli müşteriler" bölümü (varsayılan kapalı) */
.donem-kisit { margin-top: 0.4rem; }
.donem-kisit > summary { cursor: pointer; font-size: 0.8rem; color: var(--renk-metin-soluk); }
.donem-kisit select { max-width: 100%; }

/* Geri butonu — base.html'den tüm ekranlara verilir (ana sayfa hariç). */
.geri-dugmesi {
  display: inline-block; margin-bottom: 0.6rem;
  padding: 0.2rem 0.65rem; font-size: 0.82rem; font-weight: 600;
  border: 1px solid var(--renk-cizgi); border-radius: 999px;
  background: #f7f8fa; color: var(--renk-metin-soluk); text-decoration: none;
}
.geri-dugmesi:hover { background: #eef1f5; color: var(--renk-metin); }
@media print { .geri-dugmesi { display: none; } }

/* Moderasyon listesi: hiç üzerine alınmamış sepet — nötr gri, "işlemde"nin
   mavisinden ayrılsın diye ayrı sınıf (ikisi aynı renk olunca ayırt edilmiyordu). */
.rozet-bosta { background: #eef1f5; color: var(--renk-metin-soluk); }
/* Sepetteki kalemlerin durum kırılımı (Boşta 2 · İşlemde 1 · ...) */
.kalem-kirilim { font-size: 0.78rem; color: var(--renk-metin-soluk); white-space: nowrap; }
.kalem-kirilim span + span::before { content: " · "; }

/* Müşteri listesi — paket süresi / bakiye dikkat vurguları */
.paket-yeni-dolmus { background: #fceceb; color: var(--renk-hata); font-weight: 600; }
.paket-eski-dolmus { color: var(--renk-metin-soluk); }
.paket-bitmek-uzere { background: #fff6e0; color: var(--renk-uyari); font-weight: 600; }
.bakiye-dusuk { color: var(--renk-hata); font-weight: 600; }

.fiyat-bakiye { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0.5rem 0 1rem; }
.fiyat-bakiye dt { color: var(--renk-metin-soluk); }
.fiyat-bakiye dd { margin: 0; font-weight: 600; }

.uyari { color: var(--renk-hata); font-size: 0.9rem; }
.ipucu { color: var(--renk-metin-soluk); font-size: 0.9rem; }

.giris-listesi { list-style: none; margin: 0.4rem 0 0; padding: 0; font-size: 0.85rem; }
.giris-listesi li { padding: 0.3rem 0; border-bottom: 1px dotted var(--renk-cizgi); }
.giris-listesi li:last-child { border-bottom: none; }

.filtre-form { margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: flex-end; }
.filtre-form > label { display: flex; flex-direction: column; font-size: 0.8rem; gap: 0.15rem; }
.durum-checkbox {
  border: 1px solid var(--renk-cizgi); border-radius: 6px;
  padding: 0.25rem 0.7rem 0.4rem; display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap;
}
.durum-checkbox legend { font-size: 0.72rem; color: var(--renk-metin-soluk); padding: 0 0.3rem; }
.durum-checkbox label { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.85rem; }
.durum-checkbox .ipucu { font-size: 0.72rem; }
.ara-grup { display: inline-flex; gap: 0.3rem; align-items: stretch; }
.tarih-satiri { flex-basis: 100%; display: flex; gap: 1rem; flex-wrap: wrap; }
.tarih-satiri > label { display: flex; flex-direction: column; font-size: 0.8rem; gap: 0.15rem; }

.sekmeler { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--renk-cizgi); }
.sekme {
  padding: 0.5rem 0.9rem;
  color: var(--renk-metin-soluk);
  text-decoration: none;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
}
.sekme:hover { color: var(--renk-vurgu-koyu); }
.sekme-aktif { color: var(--renk-vurgu-koyu); border-bottom-color: var(--renk-vurgu); font-weight: 600; }
.sekme { cursor: pointer; }
/* Müşteri Kontrol Ekranı sekme panelleri: JS aktif sekmeyi gösterir; JS yoksa
   noscript kuralı hepsini görünür yapar. */
.detay-sekme-menu { flex-wrap: wrap; }
.detay-panel { display: none; }
.detay-panel.detay-panel-aktif { display: block; }

.moderasyon-eylem { display: flex; flex-direction: column; gap: 0.4rem; min-width: 220px; }
.moderasyon-eylem input[type="text"] { max-width: 140px; }

.moderasyon-sorgu { border: 1px solid var(--renk-cizgi); border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; }
.moderasyon-sorgu h2 { margin-top: 0; }

.moderasyon-detay-duzen { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; margin: 1rem 0; }
.moderasyon-kalem-listesi { flex: 1 1 360px; min-width: 300px; }
.moderasyon-kalem-detay { flex: 1 1 320px; min-width: 280px; border: 1px solid var(--renk-cizgi); border-radius: 8px; padding: 1rem; }
.moderasyon-kalem-detay h2 { margin-top: 0; }
.moderasyon-kalem-listesi tbody tr.secili-satir { background: var(--renk-yuzey); font-weight: 600; }

.sayfalama { display: flex; gap: 0.3rem; align-items: center; margin-top: 0.8rem; font-size: 0.85rem; flex-wrap: wrap; }
.sayfalama a, .sayfalama .aktif {
  padding: 0.18rem 0.5rem; border: 1px solid var(--renk-cizgi); border-radius: 4px;
  color: var(--renk-vurgu); text-decoration: none; cursor: pointer; min-width: 1.6rem; text-align: center;
}
.sayfalama a:hover { background: var(--renk-vurgu-soluk, #eef2ff); }
.sayfalama .aktif { background: var(--renk-vurgu); color: #fff; border-color: var(--renk-vurgu); }

.kart-satiri { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.kart {
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  min-width: 110px;
  /* Kartlar satiri esit bolup gerilmesin; icerigi kadar yer kaplasin.
     (flex:1 idi — 3 kartli ekranlarda her biri ~330px olup buyuk gorunuyordu.) */
  flex: 0 1 auto;
}
.kart h3 { margin: 0 0 0.15rem; font-size: 0.66rem; color: var(--renk-metin-soluk); font-weight: 600; }
.kart .kart-deger { font-size: 0.92rem; font-weight: 700; }

.yetki-form { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; max-width: none; }
.yetki-form label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; color: var(--renk-metin-soluk); white-space: nowrap; }

.hizmet-secenek { padding: 0.15rem 0; }
.hizmet-alt-grup { margin-left: 1.25rem; }
.alt-grup-basligi { font-weight: 600; margin: 0.5rem 0 0.1rem; }
.firma-ortaklari-basligi {
  font-weight: 700;
  margin: 1rem 0 0.35rem;
  padding-top: 0.6rem;
  border-top: 2px solid var(--renk-cizgi);
  color: var(--renk-vurgu-koyu, #1e3a8a);
}
.firma-ortaklari-not {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--renk-hata, #b91c1c);
}
.hizmet-dondurulmus { color: var(--renk-metin-soluk); }
.hizmet-dondurulmus span { text-decoration: line-through; }
.hizmet-dondurulmus .uyari { margin: 0.15rem 0 0.4rem; font-size: 0.82rem; }

.donem-yonetimi { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px dashed var(--renk-cizgi); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.donem-satiri { display: inline-flex; gap: 0.5rem; align-items: center; padding: 0.15rem 0; border-bottom: 1px dashed var(--renk-cizgi); }
.donem-mini-form { display: inline-flex; gap: 0.3rem; align-items: center; }
.donem-mini-form input[type="text"] { width: 8rem; }
.donem-ekle-form { display: inline-flex; gap: 0.3rem; align-items: center; }

.alan-satiri { display: flex; gap: 1rem; flex-wrap: wrap; }
.ortaklik-sorgusu { margin: 1rem 0; padding: 1rem; background: var(--renk-yuzey); border: 1px solid var(--renk-cizgi); border-radius: var(--radius); }
.ortaklik-sorgusu h2 { margin-top: 0; }
#ortaklar-tablosu input[type="text"] { width: 100%; min-width: 7rem; }
.checkbox-grup { display: flex; flex-direction: column; gap: 0.15rem; min-width: 9rem; font-size: 0.85rem; white-space: nowrap; }
.checkbox-grup label { display: flex; align-items: center; gap: 0.3rem; font-weight: normal; }
.donem-ekle-form input[type="text"] { width: 8rem; }

.donem-yil-gruplari { display: flex; flex-direction: column; gap: 0.25rem; max-width: 20rem; }
.donem-yil-gruplari details { border: 1px solid var(--renk-cizgi); border-radius: var(--radius); padding: 0.4rem 0.6rem; }
.donem-yil-gruplari summary { cursor: pointer; font-weight: 600; }
.donem-yil-gruplari label { display: flex; align-items: center; gap: 0.4rem; font-weight: normal; padding: 0.2rem 0 0.2rem 0.3rem; }

.cikti-butonlari { font-size: 0.9rem; }
.cikti-butonlari button {
  background: none; border: none; color: var(--renk-vurgu); cursor: pointer;
  font-size: inherit; padding: 0; text-decoration: underline;
}

@media print {
  .ust-bar, .sekmeler, .no-print, form, button,
  .kart-satiri, .sayfalama, .filtre-form { display: none !important; }
  body { background: #fff; }
  .tablo, .tablo th, .tablo td { border: 1px solid #999; }
}

.detay-sekme {
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}
.detay-sekme summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.05rem;
}
.detay-sekme[open] summary { margin-bottom: 0.75rem; }

.tablo td.tutar, .tablo th.tutar {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Yeni Sorgu: hizmetler açılır gruplarda (39 hizmet düz listede çok uzundu) */
.hizmet-grubu { border: 1px solid var(--renk-cizgi); border-radius: 6px; margin: 0.35rem 0; }
.hizmet-grubu > summary {
  cursor: pointer; padding: 0.4rem 0.7rem; font-weight: 600; font-size: 0.9rem;
}
.hizmet-grubu > summary:hover { background: #f7f8fa; }
.hizmet-grubu > *:not(summary) { padding-left: 0.9rem; padding-right: 0.7rem; }
.hizmet-grubu > *:last-child { padding-bottom: 0.5rem; }