/* falcım.com — işletme paneli.
 *
 * Müşteri tarafındaki stil.css'ten AYRI dosya: müşteri sayfası tek sütun ve
 * saniyeler sürüyor, panel çok bölümlü ve uzun oturuluyor. Tek dosyada
 * birleştirilseydi her müşteri, hiç görmeyeceği panel CSS'ini indirirdi.
 *
 * Renkler stil.css'teki kahve paletinin devamı (--kahve, --altin, --krem aynı
 * değerler): iki ekran aynı ürüne ait görünmeli.
 */

:root {
  /* çekirdek palet */
  --espresso: #2a1a10;
  --kahve: #3b2417;
  --sut-kahve: #6b4c35;
  --altin: #c08a3e;
  --altin-acik: #e6b970;
  --krem: #f6efe6;
  --kagit: #fffdfa;
  --kenar: #e8dccd;
  --metin: #241a12;
  --soluk: #7a6a5c;

  /* durum renkleri — kahve paletiyle çakışmasın diye doygunluğu düşük */
  --iyi: #2f6b46;
  --iyi-zemin: #e8f2ec;
  --kotu: #a33124;
  --kotu-zemin: #fbeae7;
  --uyari-renk: #8a5a12;
  --uyari-zemin: #fdf3e3;

  /* ölçek */
  --ara-1: .35rem;
  --ara-2: .65rem;
  --ara-3: 1rem;
  --ara-4: 1.5rem;
  --ara-5: 2.25rem;
  --yuvarlak: .8rem;
  --yuvarlak-kucuk: .5rem;
  --golge: 0 1px 2px rgb(59 36 23 / 6%), 0 4px 16px rgb(59 36 23 / 6%);
  --yan-en: 15rem;
}

* { box-sizing: border-box; }

.panel-govde {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--krem);
  color: var(--metin);
  line-height: 1.6;
  /* Sayılar sütun sütun okunuyor; orantılı rakamlarda hizalar kayıyor. */
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- kabuk ---- */

.kabuk { display: flex; min-height: 100vh; min-height: 100dvh; }

.yan {
  flex-shrink: 0;
  width: var(--yan-en);
  display: flex;
  flex-direction: column;
  padding: var(--ara-4) var(--ara-3);
  color: #efe3d6;
  background: var(--espresso);
  /* Kenardaki altın çizgi tek süs öğesi: menüyü içerikten ayırıyor ve markanın
     vurgu rengini ekranda bir kez, doğru yerde kullanıyor. */
  border-right: 1px solid rgb(192 138 62 / 25%);
}

.marka {
  display: flex;
  align-items: center;
  gap: var(--ara-2);
  margin-bottom: var(--ara-5);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.marka-fincan { font-size: 1.3rem; }
.marka-ad { color: #fff; }

.menu { display: flex; flex-direction: column; gap: var(--ara-1); }

.menu-bag {
  display: flex;
  align-items: center;
  gap: var(--ara-2);
  padding: .6rem .75rem;
  color: #d9c9b8;
  font-size: .95rem;
  text-decoration: none;
  border-radius: var(--yuvarlak-kucuk);
  transition: background .15s, color .15s;
}
.menu-bag:hover { background: rgb(255 255 255 / 7%); color: #fff; }
.menu-bag.etkin {
  color: var(--espresso);
  background: var(--altin-acik);
  font-weight: 600;
}
.menu-simge { width: 1.1rem; text-align: center; opacity: .9; }

.yan-alt {
  margin-top: auto;
  padding-top: var(--ara-3);
  border-top: 1px solid rgb(255 255 255 / 12%);
}
.yan-isletme { margin: 0; font-weight: 600; color: #fff; font-size: .95rem; }
.yan-eposta {
  margin: 0 0 var(--ara-2);
  font-size: .78rem;
  color: #b3a08e;
  word-break: break-all;
}

.icerik { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.ust {
  padding: var(--ara-4) var(--ara-4) var(--ara-3);
  background: var(--kagit);
  border-bottom: 1px solid var(--kenar);
}
.ust h1 { margin: 0; font-size: 1.4rem; color: var(--kahve); }

.govde {
  flex: 1;
  padding: var(--ara-4);
  display: flex;
  flex-direction: column;
  gap: var(--ara-3);
}

.panel-ibare {
  padding: 0 var(--ara-4) var(--ara-4);
  color: var(--soluk);
  font-size: .75rem;
}

/* -------------------------------------------------------------- kutu ---- */

.kutu {
  padding: var(--ara-3) var(--ara-4) var(--ara-4);
  background: var(--kagit);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
}
.kutu-bas {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ara-3);
  margin-bottom: var(--ara-3);
}
.kutu-bas h2 { margin: 0; font-size: 1.05rem; color: var(--kahve); }
.kutu-yan { font-size: .85rem; color: var(--soluk); }

.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--ara-3);
}
.ikili {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--ara-3);
  align-items: start;
}

/* ------------------------------------------------------------ ölçüm ----- */

.olcum {
  padding: var(--ara-3);
  background: var(--kagit);
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak);
  box-shadow: var(--golge);
}
/* Kafecinin panele bakma sebebi "kaç falım kaldı" — o kart koyu zeminle
   diğerlerinden ayrılıyor, ekranı taramak gerekmesin diye. */
.olcum.vurgu {
  color: #f4e9dc;
  background: linear-gradient(150deg, var(--kahve), var(--espresso));
  border-color: var(--espresso);
}
.olcum.vurgu .olcum-etiket,
.olcum.vurgu .olcum-alt { color: #cdb8a2; }
.olcum.uyari { border-color: var(--altin); background: var(--uyari-zemin); }

.olcum-etiket {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--soluk);
}
.olcum-deger {
  margin: .2rem 0 0;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.15;
  color: inherit;
}
.olcum-alt { margin: .2rem 0 0; font-size: .82rem; color: var(--soluk); }

/* ------------------------------------------------------------ liste ----- */

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ara-3);
  padding: .6rem 0;
  border-bottom: 1px solid var(--kenar);
}
.liste li:last-child { border-bottom: 0; }
.liste-ana { font-size: .95rem; }
.liste-alt { display: block; font-size: .78rem; color: var(--soluk); }
.liste-tutar { flex-shrink: 0; font-weight: 600; }
.liste-tutar.artan { color: var(--iyi); }
.liste-tutar.azalan { color: var(--soluk); }

.yorum { padding: .75rem 0; border-bottom: 1px solid var(--kenar); }
.yorum:last-child { border-bottom: 0; }
.yorum-bas {
  display: flex;
  align-items: center;
  gap: var(--ara-2);
  font-size: .82rem;
  color: var(--soluk);
}
.yorum-metin { margin: .3rem 0 0; }

.bos-durum {
  margin: 0;
  padding: var(--ara-3) 0;
  color: var(--soluk);
  font-size: .9rem;
}

.rozet {
  display: inline-block;
  padding: .1rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 1rem;
}
.rozet.iyi { color: var(--iyi); background: var(--iyi-zemin); }
.rozet.kotu { color: var(--kotu); background: var(--kotu-zemin); }
.rozet.bekle { color: var(--uyari-renk); background: var(--uyari-zemin); }

.yildiz { letter-spacing: .06em; white-space: nowrap; }
.yildiz-dolu { color: var(--altin); }
.yildiz-bos { color: var(--kenar); }
.yildiz.bos { color: var(--soluk); }

/* Sütun grafiği. Yükseklik JS'te değil, sunucudan gelen inline `height`
   yüzdesiyle veriliyor — grafik için istemciye tek satır kod inmiyor. */
.sutunlar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 6rem;
  margin-top: var(--ara-2);
}
.sutun {
  flex: 1;
  min-height: 2px;
  background: var(--altin);
  border-radius: 2px 2px 0 0;
}
/* Sessiz gün silinmiyor, soluk bir taban olarak duruyor: "o gün fal yok"
   bilgisi, o günün grafikte hiç olmamasından farklı. */
.sutun.bos { background: var(--kenar); }

.sutun-eksen {
  display: flex;
  justify-content: space-between;
  margin-top: .35rem;
  font-size: .75rem;
  color: var(--soluk);
}

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

.form { display: flex; flex-direction: column; gap: var(--ara-3); }
.alan { display: flex; flex-direction: column; gap: .25rem; }
.alan label { font-size: .85rem; font-weight: 600; color: var(--kahve); }
.alan .ipucu { font-size: .78rem; color: var(--soluk); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
select {
  width: 100%;
  padding: .6rem .75rem;
  font: inherit;
  color: var(--metin);
  background: #fff;
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak-kucuk);
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--altin);
  outline-offset: 1px;
}

button, .dugme {
  display: inline-block;
  padding: .7rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: var(--kahve);
  border: 0;
  border-radius: var(--yuvarlak-kucuk);
  cursor: pointer;
}
button:hover, .dugme:hover { background: var(--espresso); }
button:disabled { opacity: .5; cursor: progress; }

.dugme-sade {
  width: 100%;
  padding: .5rem;
  font-size: .85rem;
  color: #d9c9b8;
  background: rgb(255 255 255 / 8%);
}
.dugme-sade:hover { background: rgb(255 255 255 / 16%); color: #fff; }

.dugme-ikincil { color: var(--kahve); background: transparent; border: 1px solid var(--kenar); }
.dugme-ikincil:hover { background: var(--krem); color: var(--kahve); }

.dugme-sira { display: flex; flex-wrap: wrap; gap: var(--ara-2); }

/* Hazır tutar düğmeleri: radio görünmez, etiket düğme gibi davranır —
   seçim tek dokunuşta ve seçili tutar gözle görünür kalsın diye. */
.tutar-secim { display: flex; flex-wrap: wrap; gap: var(--ara-2); }
.tutar-secim input { position: absolute; opacity: 0; pointer-events: none; }
.tutar-secim label {
  padding: .6rem 1rem;
  font-weight: 600;
  background: #fff;
  border: 1px solid var(--kenar);
  border-radius: var(--yuvarlak-kucuk);
  cursor: pointer;
}
.tutar-secim input:checked + label {
  color: #fff;
  background: var(--kahve);
  border-color: var(--kahve);
}
.tutar-secim input:focus-visible + label { outline: 2px solid var(--altin); }

.bildirim {
  padding: .75rem 1rem;
  font-size: .9rem;
  border-radius: var(--yuvarlak-kucuk);
  border-left: 3px solid;
}
.bildirim.iyi { color: var(--iyi); background: var(--iyi-zemin); border-color: var(--iyi); }
.bildirim.kotu { color: var(--kotu); background: var(--kotu-zemin); border-color: var(--kotu); }
.bildirim.bilgi { color: var(--uyari-renk); background: var(--uyari-zemin); border-color: var(--altin); }

.cerceve {
  width: 100%;
  min-height: 40rem;
  border: 0;
  border-radius: var(--yuvarlak);
}

/* ------------------------------------------------------------- giriş ---- */

.giris-sayfa {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--ara-3);
  background:
    radial-gradient(circle at 20% 15%, rgb(192 138 62 / 18%), transparent 55%),
    var(--espresso);
}
.giris-kutu {
  width: 100%;
  max-width: 23rem;
  padding: var(--ara-4);
  background: var(--kagit);
  border-radius: var(--yuvarlak);
  box-shadow: 0 18px 40px rgb(0 0 0 / 28%);
}
.giris-kutu h1 {
  margin: 0 0 .25rem;
  font-size: 1.3rem;
  color: var(--kahve);
}
.giris-kutu .alt { margin: 0 0 var(--ara-3); color: var(--soluk); font-size: .9rem; }
.giris-ibare {
  margin: var(--ara-3) auto 0;
  max-width: 23rem;
  color: #b3a08e;
  font-size: .72rem;
  text-align: center;
}

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

/* Yönetim ekranının çok kolonlu listeleri. Renk ve boşluk token'ları
   :root'takilerin aynısı — yönetim ekranı ayrı bir tasarım değil, aynı
   tasarımın başka bir sayfası. */
.tablo-sar { overflow-x: auto; }
.tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.tablo th {
  padding: .45rem .6rem;
  text-align: left;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--soluk);
  border-bottom: 1px solid var(--kenar);
  white-space: nowrap;
}
.tablo td {
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--kenar);
  vertical-align: middle;
}
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover { background: var(--krem); }
.tablo .sag { text-align: right; font-variant-numeric: tabular-nums; }
/* Deste kodları gözle karşılaştırılıyor (çantadaki desteyle ekrandaki satır);
   eşit genişlikli yazı tipi olmadan 8 ile B yan yana ayırt edilmiyor. */
.tablo .kod {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  font-weight: 600;
}
.tablo a { color: var(--kahve); font-weight: 600; }

/* Satır içi işlem düğmeleri (ata / geri al / iptal). */
.satir-islem { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.satir-islem form { display: inline-flex; gap: .3rem; align-items: center; }
.dugme-mini {
  padding: .28rem .55rem;
  font-size: .8rem;
  width: auto;
}
.satir-islem select { padding: .28rem .4rem; font-size: .8rem; }

/* Bir kez gösterilen şifre. Seçilebilir olması şart: süperadmin bunu kopyalayıp
   kafeye gönderiyor, elle yazdırmak hata kaynağı. */
.sifre-goster {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.35rem;
  letter-spacing: .06em;
  padding: var(--ara-3);
  background: var(--krem);
  border: 1px dashed var(--altin);
  border-radius: var(--yuvarlak-kucuk);
  user-select: all;
  word-break: break-all;
}

/* -------------------------------------------------------------- dar ----- */

/* Kafede panel çoğu zaman telefondan açılıyor: yan menü üstte yatay şeride
   dönüyor, içerik tam genişliğe yayılıyor. */
@media (max-width: 46rem) {
  .kabuk { flex-direction: column; }
  .yan {
    width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ara-2);
    padding: var(--ara-2) var(--ara-3);
    border-right: 0;
    border-bottom: 1px solid rgb(192 138 62 / 25%);
  }
  .marka { margin: 0; }
  .menu {
    flex-direction: row;
    flex: 1 1 100%;
    order: 3;
    gap: var(--ara-1);
    overflow-x: auto;
  }
  .menu-bag { white-space: nowrap; padding: .45rem .7rem; font-size: .88rem; }
  .yan-alt {
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    text-align: right;
  }
  .yan-isletme { font-size: .85rem; }
  .yan-eposta { display: none; }
  .dugme-sade { width: auto; padding: .35rem .7rem; }
  .ust, .govde { padding: var(--ara-3); }
  .panel-ibare { padding: 0 var(--ara-3) var(--ara-3); }
  .kutu { padding: var(--ara-3); }

  /* Tablo satırı karta dönüyor; başlık satırı gizlendiği için her hücre kendi
     etiketini yanında taşıyor (data-etiket). */
  .tablo thead { display: none; }
  .tablo, .tablo tbody, .tablo tr, .tablo td { display: block; width: 100%; }
  .tablo tr {
    padding: var(--ara-2) 0;
    border-bottom: 1px solid var(--kenar);
  }
  .tablo td {
    display: flex;
    justify-content: space-between;
    gap: var(--ara-2);
    padding: .25rem 0;
    border: 0;
  }
  .tablo td::before {
    content: attr(data-etiket);
    color: var(--soluk);
    font-size: .78rem;
  }
  .tablo .sag { text-align: right; }
}