/* =============================================================
 *  Zafer — kurumsal yönetim paneli teması
 *  Beyaz yüzeyler · turuncu vurgu · Inter tipografi
 * ============================================================= */

@import url("/font/inter.css");

:root {
  /* marka */
  --turuncu:        #ef6c1a;
  --turuncu-koyu:   #d3590c;
  --turuncu-acik:   #fff4ec;
  --turuncu-cizgi:  #f7c9a8;

  /* yüzeyler */
  --zemin:          #f6f7f9;   /* içerik tuvali */
  --panel:          #ffffff;   /* kartlar, menü, üst çubuk */
  --panel-2:        #f8f9fb;   /* tablo başlığı, iç kutular */
  --cizgi:          #e9ebf0;
  --cizgi-koyu:     #d8dce4;

  /* metin */
  --metin:          #10151f;
  --metin-2:        #3f4757;
  --soluk:          #7c8595;
  --cok-soluk:      #a2aab8;

  /* durum */
  --yesil:          #0f9d6e;
  --yesil-acik:     #e7f6f0;
  --kirmizi:        #d92d4b;
  --kirmizi-acik:   #fdecef;
  --sari:           #b97a00;
  --sari-acik:      #fdf4e3;
  --mavi:           #2563c7;
  --mavi-acik:      #ebf1fb;

  --r-kucuk:        8px;
  --r:              12px;
  --r-buyuk:        16px;

  --golge-1: 0 1px 2px rgba(16, 21, 31, .04), 0 1px 1px rgba(16, 21, 31, .03);
  --golge-2: 0 1px 3px rgba(16, 21, 31, .06), 0 4px 12px rgba(16, 21, 31, .04);
  --golge-3: 0 12px 32px rgba(16, 21, 31, .12), 0 2px 8px rgba(16, 21, 31, .06);

  --yan-genislik: 252px;
  --ust-yukseklik: 68px;

  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv05", "cv11";
}

::selection { background: var(--turuncu-cizgi); color: var(--metin); }

/* ince kaydırma çubuğu */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d5d9e0; border-radius: 6px; border: 2px solid var(--zemin); }
::-webkit-scrollbar-thumb:hover { background: #bcc2cc; }

/* ikonlar */
.ikon {
  width: 18px; height: 18px; flex: 0 0 auto;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ikon-b { width: 20px; height: 20px; }
.ikon-k { width: 15px; height: 15px; stroke-width: 1.9; }

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

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

.yan {
  width: var(--yan-genislik); flex: 0 0 var(--yan-genislik);
  background: var(--panel);
  border-right: 1px solid var(--cizgi);
  display: flex; flex-direction: column;
  position: fixed; inset: 0 auto 0 0; z-index: 30;
}

.marka {
  display: flex; align-items: center; gap: 12px;
  height: var(--ust-yukseklik); flex: 0 0 auto;
  padding: 0 20px;
  border-bottom: 1px solid var(--cizgi);
}
.marka-mark {
  width: 40px; height: 40px; flex: 0 0 auto;
  object-fit: contain; display: block;
}
.marka-ad { font-size: 15.5px; font-weight: 750; letter-spacing: -.1px; line-height: 1.15; }
.marka-alt {
  font-size: 10px; font-weight: 600; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--cok-soluk); margin-top: 1px;
}

.menu { padding: 14px 12px; flex: 1; overflow-y: auto; }
.menu .baslik {
  font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--cok-soluk); padding: 16px 10px 7px; font-weight: 700;
}
.menu .baslik:first-child { padding-top: 4px; }
.menu button {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  /* genel button kuralindaki justify-content:center burada bilerek eziliyor;
     yoksa menu ogeleri ortalanip hizasiz gorunuyor */
  justify-content: flex-start;
  width: 100%; text-align: left;
  height: 40px; padding: 0 12px; margin-bottom: 2px;
  border: 0; border-radius: var(--r-kucuk); background: none; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 550; color: var(--metin-2);
  transition: background .13s, color .13s;
}
.menu button .ikon { color: var(--soluk); transition: color .13s; }
.menu button:hover { background: var(--panel-2); color: var(--metin); }
.menu button:hover .ikon { color: var(--metin-2); }
.menu button.aktif { background: var(--turuncu-acik); color: var(--turuncu-koyu); font-weight: 650; }
.menu button.aktif .ikon { color: var(--turuncu); }
/* Etkin ogenin sol kenarindaki isaret, hapin kendi icinde durur */
.menu button.aktif::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px; background: var(--turuncu);
}

.yan-alt {
  border-top: 1px solid var(--cizgi);
  padding: 12px; display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  background: linear-gradient(140deg, #f7873a, var(--turuncu-koyu));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; letter-spacing: .3px;
}
.kim { flex: 1; min-width: 0; }
.kim-ad {
  font-weight: 650; font-size: 13px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kim-rol { font-size: 11.5px; color: var(--soluk); line-height: 1.25; }
.ikon-btn {
  width: 34px; height: 34px; padding: 0; flex: 0 0 auto;
  border-radius: var(--r-kucuk); color: var(--soluk);
}
.ikon-btn:hover { color: var(--kirmizi); border-color: var(--kirmizi); background: var(--kirmizi-acik); }

.icerik { flex: 1; min-width: 0; margin-left: var(--yan-genislik); }

header.ust {
  position: sticky; top: 0; z-index: 20;
  height: var(--ust-yukseklik);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--cizgi);
  padding: 0 32px;
  display: flex; align-items: center; gap: 16px;
}
header.ust h1 { font-size: 19px; font-weight: 700; margin: 0; letter-spacing: -.3px; }
header.ust .bosluk { flex: 1; }
.magaza-etiket {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--metin-2);
  background: var(--panel-2); border: 1px solid var(--cizgi);
  padding: 6px 12px; border-radius: 20px;
}
.magaza-etiket .nokta {
  width: 7px; height: 7px; border-radius: 50%; background: var(--yesil);
  box-shadow: 0 0 0 3px var(--yesil-acik);
}

main { padding: 26px 32px 56px; }

/* ------------------------------------------------------------ sayfalar */

.sayfa { display: none; }
.sayfa.aktif { display: block; animation: ac .18s ease-out; }
@keyframes ac { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.kart {
  background: var(--panel);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
  box-shadow: var(--golge-1);
  margin-bottom: 20px;
  overflow: hidden;
}
.kart > h2 {
  margin: 0; padding: 15px 20px;
  font-size: 13.5px; font-weight: 650; letter-spacing: -.1px;
  color: var(--metin); border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: 10px;
  background: var(--panel);
}
.kart > h2 .ikon { color: var(--soluk); }
.kart > h2 .bosluk { flex: 1; }
.kart > h2 .sayac {
  font-size: 11.5px; font-weight: 650; color: var(--soluk);
  background: var(--panel-2); border: 1px solid var(--cizgi);
  padding: 1px 8px; border-radius: 20px;
}
.kart-govde { padding: 20px; }
.kart-alt { padding: 14px 20px; border-top: 1px solid var(--cizgi); background: var(--panel-2); }

.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.ucler { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1180px) { .ikili, .ucler { grid-template-columns: 1fr; } }

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

label {
  display: block; font-size: 12px; color: var(--metin-2);
  font-weight: 600; margin: 0 0 6px; letter-spacing: .1px;
}
label.satirici { display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer; }

input, select, textarea {
  width: 100%; height: 38px; padding: 0 12px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r-kucuk);
  background: #fff; color: var(--metin);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  outline: none; transition: border-color .13s, box-shadow .13s;
}
textarea { height: auto; padding: 10px 12px; }
input:hover, select:hover { border-color: #c3c9d3; }
input:focus, select:focus, textarea:focus {
  border-color: var(--turuncu);
  box-shadow: 0 0 0 3.5px rgba(239, 108, 26, .12);
}
input::placeholder { color: var(--cok-soluk); font-weight: 450; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--turuncu); cursor: pointer; }
input[type="date"] { padding-right: 8px; }
select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237c8595' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}

.satir { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.satir > * { flex: 1 1 150px; min-width: 0; }
.satir > .dar { flex: 0 0 auto; }
.satir > .esne { flex: 1 1 auto; }
.alan { margin-bottom: 16px; }

/* ------------------------------------------------------------ düğmeler */

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 15px; border-radius: var(--r-kucuk);
  border: 1px solid var(--cizgi-koyu); background: #fff; color: var(--metin);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .13s, border-color .13s, color .13s, box-shadow .13s;
}
button:hover, .btn:hover { background: var(--panel-2); border-color: #c3c9d3; }
button:focus-visible, .btn:focus-visible {
  outline: none; box-shadow: 0 0 0 3.5px rgba(239, 108, 26, .18);
}
button:active { transform: translateY(.5px); }
button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-ana {
  background: var(--turuncu); border-color: var(--turuncu); color: #fff;
  box-shadow: 0 1px 2px rgba(211, 89, 12, .28);
}
.btn-ana:hover { background: var(--turuncu-koyu); border-color: var(--turuncu-koyu); color: #fff; }
.btn-yesil { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.btn-yesil:hover { background: #0c8a60; border-color: #0c8a60; color: #fff; }
.btn-kirmizi { background: #fff; border-color: #f0bfc7; color: var(--kirmizi); }
.btn-kirmizi:hover { background: var(--kirmizi-acik); border-color: var(--kirmizi); color: var(--kirmizi); }
.btn-kucuk { height: 32px; padding: 0 11px; font-size: 12.5px; }
.btn-genis { width: 100%; }
.btn-sessiz { border-color: transparent; background: var(--panel-2); }

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

.tablo-kutu { overflow-x: auto; }
table.tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tablo th {
  text-align: left; padding: 11px 20px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--soluk); background: var(--panel-2);
  border-bottom: 1px solid var(--cizgi); white-space: nowrap;
}
table.tablo td {
  padding: 13px 20px; border-bottom: 1px solid var(--cizgi);
  vertical-align: middle; color: var(--metin-2);
}
table.tablo tbody tr:last-child td { border-bottom: 0; }
table.tablo tbody tr { transition: background .1s; }
table.tablo tbody tr.tiklanir { cursor: pointer; }
table.tablo tbody tr.tiklanir:hover { background: var(--turuncu-acik); }
table.tablo .sag { text-align: right; white-space: nowrap; }
table.tablo .orta { text-align: center; }
table.tablo .ad { font-weight: 650; color: var(--metin); }
table.tablo .alt { font-size: 12px; color: var(--soluk); margin-top: 1px; font-weight: 500; }
table.tablo .para { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--metin); }
table.tablo .sayi { font-variant-numeric: tabular-nums; }
table.tablo .kod { font-variant-numeric: tabular-nums; letter-spacing: .2px; color: var(--soluk); }
table.tablo .urun-hucre { display: flex; align-items: center; gap: 12px; }

.bos {
  text-align: center; color: var(--soluk); padding: 44px 16px; font-size: 13.5px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bos .ikon { width: 26px; height: 26px; color: var(--cok-soluk); }

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

.rozet {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 20px; border: 1px solid transparent;
  font-size: 11px; font-weight: 650; white-space: nowrap; letter-spacing: .1px;
}
.rozet.yesil   { background: var(--yesil-acik);   color: var(--yesil);       border-color: #c8ebde; }
.rozet.mavi    { background: var(--mavi-acik);    color: var(--mavi);        border-color: #cddfF7; }
.rozet.sari    { background: var(--sari-acik);    color: var(--sari);        border-color: #f2ddb5; }
.rozet.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi);     border-color: #f7ccd4; }
.rozet.turuncu { background: var(--turuncu-acik); color: var(--turuncu-koyu); border-color: var(--turuncu-cizgi); }
.rozet.gri     { background: var(--panel-2);      color: var(--metin-2);     border-color: var(--cizgi); }

/* ------------------------------------------------------------ istatistik */

.izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.stat {
  background: var(--panel); border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 18px 20px; box-shadow: var(--golge-1);
  display: flex; align-items: flex-start; gap: 14px;
}
.stat .govde { flex: 1; min-width: 0; }
.stat .baslik {
  font-size: 10.5px; color: var(--soluk); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700;
}
.stat .deger {
  font-size: 25px; font-weight: 750; margin-top: 6px; letter-spacing: -.6px;
  font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--metin);
}
.stat .alt { font-size: 12px; color: var(--soluk); margin-top: 4px; font-weight: 500; }
.stat .cip {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--turuncu-acik); color: var(--turuncu);
}
.stat .cip.yesil   { background: var(--yesil-acik);   color: var(--yesil); }
.stat .cip.mavi    { background: var(--mavi-acik);    color: var(--mavi); }
.stat .cip.kirmizi { background: var(--kirmizi-acik); color: var(--kirmizi); }
.stat .cip.gri     { background: var(--panel-2);      color: var(--soluk); }

/* ------------------------------------------------------------ kasa */

#kamera-kutu, .kamera-kutu {
  position: relative; width: 100%; max-width: 460px; aspect-ratio: 4/3;
  background: #0c0f16; border-radius: var(--r); overflow: hidden; display: none;
  margin-top: 16px; box-shadow: var(--golge-2);
}
#kamera-kutu.acik, .kamera-kutu.acik { display: block; }
#kamera, .kamera-kutu video { width: 100%; height: 100%; object-fit: cover; }
#kamera-cerceve, .kamera-cerceve {
  position: absolute; inset: 22% 12%;
  border: 2px solid rgba(255, 255, 255, .9); border-radius: 10px;
  box-shadow: 0 0 0 2000px rgba(0, 0, 0, .34);
}
#kamera-cerceve::after, .kamera-cerceve::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 50%;
  height: 2px; background: var(--turuncu); border-radius: 2px;
  box-shadow: 0 0 12px rgba(239, 108, 26, .9);
}

.sonuc {
  border: 1px solid var(--cizgi); border-radius: var(--r);
  background: var(--panel); box-shadow: var(--golge-2);
  padding: 22px; margin-bottom: 20px; position: relative; overflow: hidden;
}
.sonuc::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.sonuc.bulundu::before { background: var(--yesil); }
.sonuc.yok::before { background: var(--kirmizi); }
.sonuc-ust { display: flex; gap: 20px; align-items: center; }
.sonuc .ad { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.sonuc .fiyat {
  font-size: 42px; font-weight: 800; color: var(--turuncu);
  letter-spacing: -1.6px; line-height: 1.05; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.sonuc .detay {
  color: var(--metin-2); font-size: 13px; margin-top: 16px; line-height: 1.85;
  border-top: 1px solid var(--cizgi); padding-top: 14px;
}
.sonuc .detay b { color: var(--metin); font-weight: 650; }

.sepet-satir {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--cizgi);
}
.sepet-satir:first-child { padding-top: 0; }
.sepet-satir:last-child { border-bottom: 0; padding-bottom: 0; }
.sepet-satir .bilgi { flex: 1; min-width: 0; }
.sepet-satir .bilgi .ad { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sepet-satir .bilgi .alt { font-size: 12px; color: var(--soluk); }
.adet-kutu {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r-kucuk); overflow: hidden;
}
.adet-kutu button { width: 28px; height: 30px; padding: 0; border: 0; border-radius: 0; background: #fff; }
.adet-kutu button:hover { background: var(--panel-2); }
.adet-kutu span {
  min-width: 30px; text-align: center; font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.sepet-satir .tutar { font-weight: 700; min-width: 84px; text-align: right; font-variant-numeric: tabular-nums; }

.toplam-cubuk {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 0 0; margin-top: 14px; border-top: 1px solid var(--cizgi);
  font-size: 12.5px; color: var(--soluk); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.toplam-cubuk .buyuk {
  font-size: 27px; font-weight: 800; color: var(--metin);
  font-variant-numeric: tabular-nums; letter-spacing: -.8px; text-transform: none;
}

/* seçici listeler */
.mini-liste { margin-top: 10px; border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); overflow: hidden; }
.mini-liste:empty { display: none; }
.mini-satir {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--cizgi); cursor: pointer;
  transition: background .1s;
}
.mini-satir:last-child { border-bottom: 0; }
.mini-satir:hover { background: var(--turuncu-acik); }
.mini-satir .bilgi { flex: 1; min-width: 0; }
.mini-satir .ad { font-weight: 650; font-size: 13.5px; }
.mini-satir .alt { font-size: 12px; color: var(--soluk); }
.mini-satir .sag { text-align: right; }
.mini-satir .sag .f { font-weight: 700; font-variant-numeric: tabular-nums; }
.mini-satir .sag .s { font-size: 11.5px; color: var(--soluk); }

/* ------------------------------------------------------------ görseller */

.kucuk-gorsel {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--r-kucuk);
  object-fit: cover; background: var(--panel-2); border: 1px solid var(--cizgi);
}
.bos-gorsel { display: flex; align-items: center; justify-content: center; color: var(--cok-soluk); }
.bos-gorsel .ikon { width: 18px; height: 18px; }
.sonuc-gorsel {
  width: 88px; height: 88px; flex: 0 0 auto; border-radius: var(--r);
  object-fit: cover; background: var(--panel-2); border: 1px solid var(--cizgi);
}
.sonuc-gorsel.bos-gorsel .ikon { width: 30px; height: 30px; }

.gorsel-alan {
  display: flex; gap: 18px; align-items: center;
  padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--cizgi);
}
.gorsel-onizleme {
  width: 100px; height: 100px; flex: 0 0 auto; border-radius: var(--r);
  background: var(--panel-2); border: 1px dashed var(--cizgi-koyu);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  color: var(--cok-soluk); text-align: center; font-size: 11.5px;
}
.gorsel-onizleme img { width: 100%; height: 100%; object-fit: cover; }
.gorsel-dugmeler { flex: 1; display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }

.barkod-onizleme {
  background: #fff; padding: 10px 12px; border: 1px solid var(--cizgi);
  border-radius: var(--r-kucuk); display: inline-block;
}
.barkod-onizleme img { display: block; max-width: 100%; }
#he-onizleme .barkod-onizleme { flex: 0 0 auto; }
#he-onizleme .barkod-onizleme img { max-width: 190px; }

/* ------------------------------------------------------------ ödeme */

.odeme-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.odeme-btn {
  flex-direction: column; gap: 7px; height: auto; padding: 15px 8px;
  font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center;
  white-space: normal;
}
.odeme-btn .ikon { width: 20px; height: 20px; color: var(--soluk); }
.odeme-btn.secili {
  background: var(--turuncu-acik); border-color: var(--turuncu); color: var(--turuncu-koyu);
  box-shadow: 0 0 0 1px var(--turuncu) inset;
}
.odeme-btn.secili .ikon { color: var(--turuncu); }

.secili-musteri {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--turuncu-acik); border: 1px solid var(--turuncu-cizgi);
  border-radius: var(--r-kucuk); padding: 12px 14px;
}
.secili-musteri .ad { font-weight: 700; }
.secili-musteri .alt { font-size: 12.5px; color: var(--metin-2); margin-top: 1px; }

/* ------------------------------------------------------------ cari */

.bakiye-kutu {
  background: var(--panel-2); border: 1px solid var(--cizgi);
  border-radius: var(--r); padding: 18px 20px; margin-bottom: 20px;
}
.bakiye-kutu.borclu { background: var(--kirmizi-acik); border-color: #f7ccd4; }
.bakiye-kutu .etiket {
  font-size: 10.5px; color: var(--soluk); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700;
}
.bakiye-kutu .tutar {
  font-size: 31px; font-weight: 800; margin: 4px 0 5px;
  font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1.05;
}
.bakiye-kutu.borclu .tutar { color: var(--kirmizi); }
.bakiye-kutu .alt { font-size: 12.5px; color: var(--metin-2); }

/* çubuk grafik */
.cubuk-satir { display: flex; align-items: center; gap: 14px; margin-bottom: 9px; }
.cubuk-satir:last-child { margin-bottom: 0; }
.cubuk-satir .etiket {
  width: 150px; flex: 0 0 150px; font-size: 12px; color: var(--metin-2);
  line-height: 1.3; font-weight: 500;
}
.cubuk-satir .yol { flex: 1; background: var(--panel-2); border-radius: 5px; overflow: hidden; height: 10px; }
.cubuk-satir .dolu { height: 100%; background: var(--turuncu); border-radius: 5px; transition: width .3s ease-out; }
.cubuk-satir .deger {
  width: 128px; text-align: right; font-size: 13px; font-weight: 650;
  font-variant-numeric: tabular-nums; color: var(--metin);
}
.cubuk-satir .deger .alt { color: var(--soluk); font-weight: 500; font-size: 11.5px; }

/* ------------------------------------------------------------ modal */

.modal-arka {
  /* backdrop-filter burada bilerek yok: bazi tarayicilarda modalin kendisini
     saydam gosteriyor. Karartma tek basina yeterli. */
  position: fixed; inset: 0; background: rgba(12, 16, 24, .48);
  z-index: 60; display: none; align-items: center; justify-content: center; padding: 32px;
}
.modal-arka.acik { display: flex; animation: fade .15s ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--panel); width: 100%; max-width: 680px;
  border-radius: var(--r-buyuk); box-shadow: var(--golge-3);
  max-height: 88vh; overflow-y: auto;
}
/* Modalin kendisine giris animasyonu verilmiyor: opaklik animasyonu bazi
   olusturucularda kaliciymis gibi katman birakip paneli saydam gosterebiliyor. */
.modal.genis { max-width: 940px; }
.modal h3 {
  margin: 0; padding: 20px 24px; font-size: 16px; font-weight: 700; letter-spacing: -.2px;
  border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; background: var(--panel); z-index: 2;
}
.modal-govde { padding: 24px; }
.modal-alt {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 16px 24px; border-top: 1px solid var(--cizgi);
  position: sticky; bottom: 0; background: var(--panel);
}
.modal-alt .sol { margin-right: auto; }

.ic-kart {
  background: var(--panel-2); border: 1px solid var(--cizgi);
  border-radius: var(--r); margin-bottom: 18px; overflow: hidden;
}
.ic-kart > h2 {
  margin: 0; padding: 12px 16px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--soluk);
  border-bottom: 1px solid var(--cizgi); background: #fff;
}
.ic-kart .ic-govde { padding: 16px; }
.ic-kart table.tablo th { background: #fff; }

/* ------------------------------------------------------------ bildirim */

#bildirim {
  position: fixed; right: 28px; bottom: 28px; z-index: 90; max-width: 420px;
  background: var(--metin); color: #fff;
  padding: 13px 18px; border-radius: var(--r-kucuk);
  font-size: 13.5px; font-weight: 600;
  box-shadow: var(--golge-3);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s, transform .2s;
}
#bildirim.goster { opacity: 1; transform: none; }
#bildirim.iyi { background: var(--yesil); }
#bildirim.kotu { background: var(--kirmizi); }

.ipucu { font-size: 12.5px; color: var(--soluk); line-height: 1.6; font-weight: 450; }
.ipucu b { color: var(--metin-2); font-weight: 650; }

/* ------------------------------------------------------------ giriş sayfası */

body.giris-sayfasi {
  background: var(--zemin);
  background-image:
    radial-gradient(900px 460px at 50% -180px, rgba(239, 108, 26, .10), transparent 70%);
}
.giris-sarici { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.giris-kutu {
  width: 100%; max-width: 400px;
  background: var(--panel); border: 1px solid var(--cizgi);
  border-radius: var(--r-buyuk); box-shadow: var(--golge-3); padding: 36px;
}
.giris-marka { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }
.giris-marka .marka-mark { width: 96px; height: 96px; margin-bottom: 16px; }

/* ---- giris ekranindaki uygulama indirme dugmeleri ---- */

/* Marka logolari dolu sekildir; genel .ikon kurali cizgi tabanli oldugu icin
   bunlara ayri sinif veriliyor. */
.marka-ikon { width: 22px; height: 22px; fill: currentColor; stroke: none; flex: 0 0 auto; }

.uygulama-indir { margin-top: 26px; }

.ayirac {
  display: flex; align-items: center; gap: 12px;
  color: var(--cok-soluk); font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px;
}
.ayirac::before, .ayirac::after {
  content: ""; flex: 1; height: 1px; background: var(--cizgi);
}

.magaza-dugmeleri { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.magaza-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: auto; padding: 13px 8px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r-kucuk);
  background: #fff; color: var(--metin); text-decoration: none;
  transition: border-color .13s, background .13s, transform .13s;
}
.magaza-btn:hover {
  background: var(--panel-2); border-color: var(--turuncu);
  transform: translateY(-1px);
}
.magaza-btn .marka-ikon { margin-bottom: 3px; color: var(--metin); }
.magaza-btn .ust { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.magaza-btn .alt { font-size: 11px; color: var(--soluk); font-weight: 500; line-height: 1.2; }

/* giris ekranindaki yonerge penceresinin adimlari */
#ios-icerik .adim {
  display: flex; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--cizgi);
}
#ios-icerik .adim:last-child { border-bottom: 0; padding-bottom: 0; }
#ios-icerik .adim .no {
  width: 25px; height: 25px; flex: 0 0 auto; border-radius: 50%;
  background: var(--turuncu-acik); color: var(--turuncu-koyu);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
#ios-icerik .adim .metin { flex: 1; font-size: 13.5px; line-height: 1.6; color: var(--metin-2); }
#ios-icerik .adim .metin b { color: var(--metin); font-weight: 650; }



/* =============================================================
 *  UYGULAMA (MOBIL) YERLESIMI
 *  Yalnizca html.mobil isaretliyken devreye girer. Bu isareti
 *  app.js koyar: kurulmus PWA, native kabuk ya da gercek
 *  dokunmatik telefon. Masaustu tarayici penceresi daraltilsa
 *  bile masaustu duzeni oldugu gibi kalir.
 * ============================================================= */

.hamburger { display: none; }
.yan-perde {
  position: fixed; inset: 0; background: rgba(12, 16, 24, .45);
  z-index: 29; opacity: 0; pointer-events: none; transition: opacity .2s;
}

html.mobil .hamburger { display: inline-flex; margin-left: -6px; }

html.mobil .yan {
  width: 284px; flex-basis: 284px;
  transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.3, .8, .3, 1);
  padding-top: env(safe-area-inset-top);
}
/* Acik durumda 'none' yerine acik acik translateX(0): bazi olusturucularda
   none <-> translate gecisi ara degerde takilip cekmeceyi ekran disinda birakiyor. */
html.mobil .yan.acik { transform: translateX(0); box-shadow: var(--golge-3); }
html.mobil .yan-perde.acik { opacity: 1; pointer-events: auto; }

html.mobil .icerik { margin-left: 0; }
html.mobil header.ust {
  padding: env(safe-area-inset-top) 14px 0; gap: 10px;
  height: calc(60px + env(safe-area-inset-top));
}
html.mobil header.ust h1 { font-size: 17px; }
html.mobil .magaza-etiket { padding: 5px 10px; font-size: 12px; }
html.mobil .magaza-etiket span:last-child {
  max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

html.mobil main { padding: 16px 14px 40px; }

html.mobil .ikili, html.mobil .ucler { grid-template-columns: 1fr; gap: 16px; }
html.mobil .izgara { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
html.mobil .stat { padding: 14px 16px; }
html.mobil .stat .deger { font-size: 22px; }
html.mobil .stat .cip { width: 34px; height: 34px; }

html.mobil .kart { margin-bottom: 16px; }
html.mobil .kart > h2 { padding: 13px 16px; }
html.mobil .kart-govde { padding: 16px; }
html.mobil .kart-alt { padding: 12px 16px; }

/* iOS, 16px'ten kucuk alanlara odaklaninca sayfayi yakinlastirir */
html.mobil input, html.mobil select, html.mobil textarea { font-size: 16px; height: 46px; }
html.mobil button, html.mobil .btn { height: 46px; font-size: 14.5px; }
html.mobil .btn-kucuk { height: 40px; font-size: 13.5px; }
html.mobil .ikon-btn { width: 42px; height: 42px; }
html.mobil .adet-kutu button { width: 40px; height: 40px; }
html.mobil .satir > * { flex: 1 1 100%; }
html.mobil .satir > .dar { flex: 1 1 auto; }

html.mobil table.tablo th { padding: 9px 14px; }
html.mobil table.tablo td { padding: 13px 14px; }

/* modaller alttan acilan sayfa seklinde */
html.mobil .modal-arka { padding: 0; align-items: flex-end; }
html.mobil .modal, html.mobil .modal.genis {
  max-width: 100%; max-height: 94vh;
  border-radius: var(--r-buyuk) var(--r-buyuk) 0 0;
}
html.mobil .modal h3 { padding: 18px 18px 16px; }
html.mobil .modal-govde { padding: 18px; }
html.mobil .modal-alt { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
html.mobil .modal-alt button { flex: 1; }
html.mobil .modal-alt .sol { flex: 0 0 auto; }

html.mobil .odeme-izgara { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
html.mobil .odeme-btn { height: auto; padding: 14px 6px; font-size: 11.5px; }

html.mobil .sonuc { padding: 18px; }
html.mobil .sonuc .fiyat { font-size: 38px; }
html.mobil .sonuc-gorsel { width: 68px; height: 68px; }
html.mobil #kamera-kutu, html.mobil .kamera-kutu { max-width: 100%; }

html.mobil .cubuk-satir .etiket { width: 104px; flex-basis: 104px; font-size: 11.5px; }
html.mobil .cubuk-satir .deger { width: 96px; font-size: 12px; }

html.mobil .gorsel-alan { gap: 14px; }
html.mobil .gorsel-onizleme { width: 84px; height: 84px; }

html.mobil #bildirim {
  right: 14px; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom));
  max-width: none; text-align: center;
}

/* cok dar telefonlar */
@media (max-width: 420px) {
  html.mobil header.ust .magaza-etiket { display: none; }
  html.mobil main { padding: 14px 10px 36px; }
  html.mobil .kart-govde { padding: 14px; }
  html.mobil table.tablo th, html.mobil table.tablo td { padding-left: 12px; padding-right: 12px; }
  html.mobil .sonuc .fiyat { font-size: 33px; }
}

/* ------------------------------------------------------------ etiket yazdırma */

#yazdir-alan {
  position: fixed; left: -100000px; top: 0;
  width: 190mm;
  display: grid;
  grid-template-columns: repeat(var(--sutun, 4), 1fr);
  gap: 4mm;
  background: #fff; color: #000;
}
#yazdir-alan .et {
  /* kesik cizgi kesme kilavuzu; etiket kagidina basarken de rahatsiz etmiyor */
  border: 1px dashed #ccc; border-radius: 2mm; padding: 2mm 1mm;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm;
}
#yazdir-alan .et-ad {
  font-size: 8pt; font-weight: 700; line-height: 1.15;
  max-height: 2.4em; overflow: hidden; width: 100%;
}
/* Barkodun basimda okunabilir kalmasi icin genisligi fiziksel olarak
   sinirliyoruz. EAN-13'un standart genisligi 37,3 mm; bunun altina cok
   inince cizgiler birbirine giriyor ve el terminali okuyamiyor.
   4 sutunda A4'te hucre ~47 mm, yani barkod tam boyunda cikar. */
#yazdir-alan .et img { width: 100%; max-width: 38mm; height: auto; }
#yazdir-alan .et-fiyat { font-size: 12pt; font-weight: 800; }
#yazdir-alan .et-kod { font-size: 7pt; font-family: monospace; letter-spacing: .3px; }

/* ------------------------------------------------------------ fiş */

#fis-alan {
  position: fixed; left: -100000px; top: 0;
  background: #fff; color: #000;
}

.fis {
  width: 74mm;                       /* 80 mm rulo, 3 mm kenar payı */
  margin: 0 auto;
  color: #000;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 9pt;
  line-height: 1.35;
}
.fis.fis-58 { width: 52mm; font-size: 7.5pt; }
.fis.fis-a4 { width: 100mm; font-size: 10pt; }

.fis-logo { display: block; width: 52px; height: 52px; margin: 0 auto 6px; }
.fis.fis-58 .fis-logo { width: 40px; height: 40px; }
.fis-ad {
  text-align: center; font-size: 13pt; font-weight: 800;
  letter-spacing: .4px; line-height: 1.15;
}
.fis.fis-58 .fis-ad { font-size: 11pt; }
.fis-tur {
  text-align: center; font-size: 7.5pt; letter-spacing: 2.4px;
  margin-top: 2px; font-weight: 600;
}
.fis-cizgi { border-top: 1px dashed #000; margin: 7px 0; }
.fis-satir { display: flex; justify-content: space-between; gap: 8px; }
.fis-satir span:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.fis-kalem { margin-bottom: 5px; }
.fis-kalem:last-of-type { margin-bottom: 0; }
.fis-kalem .ad { font-weight: 700; line-height: 1.25; }
.fis-kalem .detay {
  display: flex; justify-content: space-between; gap: 8px;
  font-variant-numeric: tabular-nums;
}

.fis-toplam {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12.5pt; font-weight: 800; font-variant-numeric: tabular-nums;
}
.fis.fis-58 .fis-toplam { font-size: 11pt; }
.fis-iptal {
  text-align: center; font-weight: 800; margin-top: 8px;
  border: 1.5px solid #000; padding: 4px;
}
.fis-dip { text-align: center; font-size: 7.5pt; margin-top: 2px; }

/* modaldaki önizleme: kâğıt görünümlü kutu */
.fis-onizleme {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-kucuk);
  padding: 16px 12px; max-height: 46vh; overflow-y: auto;
  display: flex; justify-content: center;
}

/* ------------------------------------------------------------ yazdırma */

@media print {
  html, body { background: #fff !important; }

  /* Ekran dışı baskı alanları normalde basılmaz; hangisinin basılacağını
     body üzerindeki sınıf belirler. Sınıf yoksa (Ctrl+P) sayfanın kendisi
     basılır, boş kâğıt çıkmaz. */
  #yazdir-alan, #fis-alan { display: none !important; }

  body.baski-etiket > *:not(#yazdir-alan) { display: none !important; }
  body.baski-etiket #yazdir-alan {
    display: grid !important;
    position: static !important; left: auto !important; top: auto !important;
    width: auto !important;
  }
  body.baski-etiket #yazdir-alan .et { break-inside: avoid; page-break-inside: avoid; }

  body.baski-fis > *:not(#fis-alan) { display: none !important; }
  body.baski-fis #fis-alan {
    display: block !important;
    position: static !important; left: auto !important; top: auto !important;
    width: auto !important;
  }
  body.baski-fis .fis { width: auto !important; }
}