/* ==========================================================================
   Davetimde — Yönetim paneli (manage.davetimde.com)
   --------------------------------------------------------------------------
   KOYU TEMA — bilinçli istisna.

   Davetimde'nin kuralı "koyu tema yok": ürün açık/kağıt. Ama bu ekran
   MÜŞTERİYE GÖSTERİLMİYOR; işletme sahibinin kendi aracı. Genel tercih
   (mat koyu, keskin hat, amber vurgu) burada geçerli, vitrinde değil.

   Kural: müşteriye görünen hiçbir yüzey bu dosyayı yüklemez.
   ========================================================================== */

/* Koyu — VARSAYILAN. Açık tema `[data-tema="açık"]` ile geçersiz kılınır.

   Renkler yalnızca burada tanımlı; bileşenler hep değişken kullanır. Tema
   değiştirmek tek bir öznitelik yazmak demek — hiçbir bileşen kuralı
   değişmiyor. */
:root {
  --zemin:     #0E0E10;
  --yuzey:     #16161A;
  --yuzey-2:   #1C1C21;
  --cizgi:     #26262C;
  --cizgi-2:   #33333B;

  --metin:     #E8E6E1;
  --soluk:     #8A8780;
  --cok-soluk: #5C5A55;

  --amber:     #C8A24A;
  --amber-sol: rgba(200, 162, 74, .14);
  --amber-uzerine: #14110A;   /* amber zemin üstünde okunacak yazı rengi */

  --iyi:       #5FA97A;
  --kotu:      #D06B5F;
  --bekle:     #C8964A;
  --bilgi:     #6F8FB8;

  /* Uyarı bandı YAZI renkleri. Bunlar `--iyi/--kotu`dan ayrı: rozetler
     renkli kenarlıkla çiziliyor ve koyu tonlar orada iyi duruyor, ama
     dolgulu bandın içinde okunması için daha açık ton gerekiyor.
     (İlk sürümde sabit yazılmışlardı; açık temada bant okunmaz oluyordu.) */
  --uyari-iyi:  #9BD0AE;
  --uyari-kotu: #E8A79E;
  --uyari-not:  #DDC182;

  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --yan: 232px;
}

/* Açık tema — "kağıt" değil, nötr bir araç yüzeyi.

   Amber koyulaştırıldı (#C8A24A → #8A6A18): açık zeminde parlak amber
   okunmuyor, kontrast oranı WCAG AA'nın altına düşüyordu. Aynı sebeple
   durum renkleri de bir ton koyu. */
:root[data-tema="acik"] {
  --zemin:     #F2F1EE;
  --yuzey:     #FFFFFF;
  --yuzey-2:   #F7F6F3;
  --cizgi:     #E4E2DD;
  --cizgi-2:   #D3D0C9;

  --metin:     #1A1917;
  --soluk:     #6B6862;
  --cok-soluk: #94918A;

  --amber:     #8A6A18;
  --amber-sol: rgba(138, 106, 24, .1);
  --amber-uzerine: #FFFFFF;

  --iyi:       #2F7A4E;
  --kotu:      #B2432F;
  --bekle:     #8A6A18;
  --bilgi:     #37639B;

  --uyari-iyi:  #1F5C3A;
  --uyari-kotu: #8E3B38;
  --uyari-not:  #6B5210;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* --------------------------------------------------------------- yerleşim */

.duzen {
  display: grid;
  grid-template-columns: var(--yan) 1fr;
  min-height: 100vh;
}

.yan {
  background: var(--yuzey);
  border-right: 1px solid var(--cizgi);
  padding: 22px 0 28px;
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
}

.marka {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px 22px 22px;
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 16px;
}
.marka > div { flex: 1; min-width: 0; }

/* Tema düğmesi — açık/koyu. Tercih tarayıcıda saklanır. */
.tema-dugme {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--cizgi-2);
  border-radius: 2px;
  color: var(--soluk);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.tema-dugme:hover { border-color: var(--amber); color: var(--amber); }
.marka b {
  display: block;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--metin);
}
.marka span {
  display: block;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--amber); margin-top: 3px;
}

.menu { list-style: none; padding: 0 10px; flex: 1; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 2px;
  color: var(--soluk);
  font-size: 13.5px;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.menu a:hover { background: var(--yuzey-2); color: var(--metin); text-decoration: none; }
.menu a.secili { background: var(--amber-sol); color: var(--amber); }
.menu a .sayi {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px;
  background: var(--cizgi); color: var(--soluk);
  padding: 1px 7px; border-radius: 20px;
}
.menu a.secili .sayi { background: rgba(200,162,74,.22); color: var(--amber); }

.yan-alt {
  padding: 16px 22px 0;
  border-top: 1px solid var(--cizgi);
  font-size: 12px; color: var(--cok-soluk);
}
.yan-alt b { color: var(--soluk); font-weight: 500; display: block; }
.yan-alt button {
  margin-top: 10px;
  background: none; border: 1px solid var(--cizgi-2); color: var(--soluk);
  font-family: inherit; font-size: 12px;
  padding: 6px 12px; border-radius: 2px; cursor: pointer; width: 100%;
}
.yan-alt button:hover { border-color: var(--kotu); color: var(--kotu); }

.icerik { padding: 26px 32px 60px; max-width: 1240px; }

/* ------------------------------------------------------------------- başlık */

.baslik-satir {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 24px; flex-wrap: wrap;
}
h1 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
}
h1 + p { color: var(--soluk); font-size: 13px; margin-top: 3px; }

/* -------------------------------------------------------------------- kart */

.kart {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 3px;
}
.kart-baslik {
  padding: 14px 18px;
  border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 600;
}
.kart-baslik small { font-weight: 400; color: var(--cok-soluk); font-size: 12px; }
.kart-govde { padding: 18px; }

.izgara { display: grid; gap: 14px; }
.izgara-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.izgara-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.mt { margin-top: 18px; }

/* --------------------------------------------------------------- sayı kutusu */

.olcu {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  padding: 16px 18px;
}
.olcu .etiket {
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cok-soluk); margin-bottom: 8px;
}
.olcu .deger {
  font-family: var(--mono);
  font-size: 26px; font-weight: 500; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.olcu .alt { font-size: 12px; color: var(--soluk); margin-top: 5px; }
.olcu.vurgu .deger { color: var(--amber); }

/* -------------------------------------------------------------------- tablo */

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cok-soluk);
  padding: 10px 14px;
  border-bottom: 1px solid var(--cizgi);
  white-space: nowrap;
}
td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 13.5px;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--yuzey-2); }
.sag { text-align: right; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.soluk-yazi { color: var(--soluk); }
.kucuk-yazi { font-size: 12px; color: var(--cok-soluk); }

.bos {
  padding: 44px 20px; text-align: center;
  color: var(--cok-soluk); font-size: 13.5px;
}
.bos b { display: block; color: var(--soluk); font-size: 14px; margin-bottom: 5px; font-weight: 500; }

/* -------------------------------------------------------------------- rozet */

.rozet {
  display: inline-block;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2.5px 8px; border-radius: 2px;
  border: 1px solid currentColor;
}
.rozet.odendi   { color: var(--iyi); }
.rozet.bekliyor { color: var(--bekle); }
.rozet.iptal    { color: var(--cok-soluk); }
.rozet.iade     { color: var(--bilgi); }
.rozet.yayinda  { color: var(--iyi); }
.rozet.taslak   { color: var(--cok-soluk); }
.rozet.arsiv    { color: var(--cok-soluk); }
.rozet.suresi_doldu { color: var(--bekle); }

/* -------------------------------------------------------------------- form */

label { display: block; }
.alan { margin-bottom: 16px; }
.alan > span {
  display: block;
  font-size: 12px; font-weight: 500; color: var(--soluk);
  margin-bottom: 6px;
}
.alan .ipucu { font-size: 11.5px; color: var(--cok-soluk); margin-top: 5px; line-height: 1.5; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=url], input[type=tel], input[type=search], select, textarea {
  width: 100%;
  font-family: inherit; font-size: 13.5px;
  color: var(--metin);
  background: var(--zemin);
  border: 1px solid var(--cizgi-2);
  border-radius: 2px;
  padding: 9px 11px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--amber);
}
input[readonly] { color: var(--soluk); }
textarea { resize: vertical; line-height: 1.6; }
select { cursor: pointer; }

.dugme {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 9px 16px;
  border-radius: 2px;
  border: 1px solid var(--cizgi-2);
  background: var(--yuzey-2); color: var(--metin);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.dugme:hover { border-color: var(--soluk); }
.dugme.ana { background: var(--amber); border-color: var(--amber); color: var(--amber-uzerine); font-weight: 600; }
.dugme.ana:hover { filter: brightness(1.12); }
.dugme.sessiz { background: none; }
.dugme[disabled] { opacity: .5; cursor: default; }

.dugme-satir { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ mesaj */

.uyari {
  padding: 11px 14px; border-radius: 2px; font-size: 13px;
  border: 1px solid var(--cizgi-2); background: var(--yuzey-2);
  margin-bottom: 16px;
}
.uyari.iyi  { border-color: var(--iyi);  background: color-mix(in srgb, var(--iyi) 10%, transparent);  color: var(--uyari-iyi); }
.uyari.kotu { border-color: var(--kotu); background: color-mix(in srgb, var(--kotu) 10%, transparent); color: var(--uyari-kotu); }
.uyari.not  { border-color: var(--amber); background: var(--amber-sol); color: var(--uyari-not); }

/* ------------------------------------------------------------- giriş ekranı */

.giris-sayfa {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.giris-kutu {
  width: 100%; max-width: 372px;
}
.giris-kutu .marka { padding: 0 0 20px; border-bottom: 0; margin-bottom: 4px; text-align: center; }
.giris-kutu .kart { padding: 26px 24px; }

/* ---------------------------------------------------------------- sekme */

.sekmeler { display: flex; gap: 2px; border-bottom: 1px solid var(--cizgi); margin-bottom: 20px; }
.sekmeler button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--soluk); font-family: inherit; font-size: 13.5px;
  padding: 10px 14px; cursor: pointer; margin-bottom: -1px;
}
.sekmeler button:hover { color: var(--metin); }
.sekmeler button.secili { color: var(--amber); border-bottom-color: var(--amber); }

/* ------------------------------------------------------------ grafik */

.cubuklar { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding-top: 8px; }
.cubuklar > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.cubuklar .cubuk {
  width: 100%; max-width: 46px;
  background: linear-gradient(180deg, var(--amber) 0%, rgba(200,162,74,.35) 100%);
  border-radius: 2px 2px 0 0;
  min-height: 3px;
}
.cubuklar .ay { font-size: 10.5px; color: var(--cok-soluk); font-family: var(--mono); }

/* ------------------------------------------------- dikkat isteyenler listesi */

.dikkat-satir {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--cizgi);
  text-decoration: none; color: inherit;
  transition: background .12s;
}
.dikkat-satir:last-child { border-bottom: 0; }
.dikkat-satir:hover { background: var(--yuzey-2); text-decoration: none; }

/* Aciliyet göstergesi: renkli dikey şerit. Rozetten daha sakin duruyor ve
   satır başına bir tane yeterli. */
.dikkat-serit {
  width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0;
  background: var(--cok-soluk);
}
.dikkat-satir.yuksek .dikkat-serit { background: var(--kotu); }
.dikkat-satir.orta   .dikkat-serit { background: var(--bekle); }
.dikkat-satir.dusuk  .dikkat-serit { background: var(--cizgi-2); }

.dikkat-govde { flex: 1; min-width: 0; }
.dikkat-govde b { font-weight: 500; font-size: 13.5px; display: block; }
.dikkat-govde span { font-size: 12px; color: var(--cok-soluk); }
.dikkat-ok { color: var(--cok-soluk); font-size: 13px; flex-shrink: 0; }
.dikkat-satir:hover .dikkat-ok { color: var(--amber); }

/* ------------------------------------------------------------ hareket akışı */

.akis { max-height: 460px; overflow-y: auto; }
.akis-satir {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--cizgi);
  font-size: 13px;
}
.akis-satir:last-child { border-bottom: 0; }
.akis-saat {
  font-family: var(--mono); font-size: 11px; color: var(--cok-soluk);
  flex-shrink: 0; width: 74px;
  /* Tek satır şart: "08.10" ile "10:30" arasındaki boşlukta kırılıp
     iki satıra düşüyordu ve sütun dağınık görünüyordu. */
  white-space: nowrap;
}
.akis-nokta {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  align-self: center; background: var(--cok-soluk);
}
.akis-nokta.geldi   { background: var(--iyi); }
.akis-nokta.gelmedi { background: var(--cok-soluk); }
.akis-nokta.odeme   { background: var(--amber); }
.akis-nokta.kayit   { background: var(--bilgi); }
.akis-govde { flex: 1; min-width: 0; }
.akis-govde b { font-weight: 500; }
.akis-govde span { color: var(--cok-soluk); font-size: 12px; }
.akis-sag { margin-left: auto; flex-shrink: 0; font-family: var(--mono); font-size: 12px; }

/* --------------------------------------------------------- hızlı işlemler */

.hizli { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.hizli a, .hizli button {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 16px;
  background: var(--yuzey-2);
  border: 1px solid var(--cizgi-2);
  border-radius: 2px;
  color: var(--metin); font-family: inherit; font-size: 13.5px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  transition: border-color .12s, color .12s;
  text-align: left;
}
.hizli a:hover, .hizli button:hover {
  border-color: var(--amber); color: var(--amber); text-decoration: none;
}
.hizli .isaret { color: var(--amber); font-size: 15px; line-height: 1; }

/* ------------------------------------------------------------------ mobil */

@media (max-width: 860px) {
  .duzen { grid-template-columns: 1fr; }
  .yan {
    position: static; height: auto;
    border-right: 0; border-bottom: 1px solid var(--cizgi);
    padding: 16px 0 12px;
  }
  .menu { display: flex; overflow-x: auto; gap: 4px; padding: 0 12px; }
  .menu a { white-space: nowrap; }
  .menu a .sayi { display: none; }
  .yan-alt { display: none; }
  .icerik { padding: 18px 16px 50px; }
  table { font-size: 12.5px; }
  th, td { padding: 9px 10px; }
}