/* ==========================================================================
   NoktApp Kontrol Merkezi
   Otel panelinin dili: açık tema, turuncu vurgu, kum grisi yüzeyler.
   Yeşil kullanılmaz. Simgeler satır içi SVG'dir; emoji yoktur.
   ========================================================================== */

:root {
  --marka-50:#FFF7ED; --marka-100:#FFEDD5; --marka-200:#FED7AA; --marka-300:#FDBA74;
  --marka-400:#FB923C; --marka-500:#F97316; --marka-600:#EA580C; --marka-700:#C2410C;
  --marka-800:#9A3412; --marka-900:#7C2D12; --marka-950:#431407;

  --kum-50:#FAFAF9; --kum-100:#F5F5F4; --kum-200:#E7E5E4; --kum-300:#D6D3D1;
  --kum-400:#A8A29E; --kum-500:#78716C; --kum-600:#57534E; --kum-700:#44403C;
  --kum-800:#292524; --kum-900:#1C1917; --kum-950:#0C0A09;

  --kirmizi:#DC2626; --kirmizi-yumusak:#FEE2E2;
  --sari:#D97706;   --sari-yumusak:#FEF3C7;
  --mavi:#2563EB;   --mavi-yumusak:#DBEAFE;

  --zemin: var(--kum-100);
  --kart: #FFFFFF;
  --metin: var(--kum-900);
  --soluk: var(--kum-500);
  --cizgi: var(--kum-200);
  --golge: 0 1px 3px rgba(28,25,23,.07), 0 1px 2px rgba(28,25,23,.04);
  --golge-lg: 0 10px 30px rgba(28,25,23,.12), 0 2px 8px rgba(28,25,23,.06);
  --yuvarlak: 12px;
  --kenar-genislik: 244px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--zemin);
  color: var(--metin);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

svg.sim { width: 17px; height: 17px; flex: 0 0 17px; stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
svg.sim.kucuk { width: 14px; height: 14px; flex-basis: 14px; }
svg.sim.buyuk { width: 22px; height: 22px; flex-basis: 22px; }

/* ---------------------------- Giriş ekranı ----------------------------
   Masaüstü uygulamasıyla aynı dil: solda marka, sağda form.
   Dar ekranda sol taraf gizlenir, form tam genişliğe yayılır.
   ---------------------------------------------------------------------*/

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

.giris-marka {
  width: 44%; min-width: 340px; padding: 44px 44px 36px; color: #fff;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--marka-600) 0%, var(--marka-800) 58%, #5A1D08 100%);
}
.giris-marka::before, .giris-marka::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.06);
}
.giris-marka::before { width: 420px; height: 420px; top: -160px; right: -140px; }
.giris-marka::after  { width: 300px; height: 300px; bottom: -120px; left: -100px; }

.giris-marka .tepe { display: flex; align-items: center; gap: 13px; position: relative; }
.giris-marka .isaret {
  width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.16);
  display: grid; place-items: center; font-weight: 800; font-size: 21px;
  border: 1px solid rgba(255,255,255,.22);
}
.giris-marka .tepe h1 { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.giris-marka .tepe p  { font-size: 12.5px; opacity: .78; }

.giris-marka .tanitim { margin-top: auto; position: relative; }
.giris-marka .tanitim h2 {
  font-size: 26px; font-weight: 700; line-height: 1.28; letter-spacing: -.5px; margin-bottom: 14px;
}
.giris-marka .tanitim p { font-size: 14px; opacity: .86; line-height: 1.6; max-width: 380px; }

.giris-marka .ozellikler {
  margin-top: 26px; display: flex; flex-direction: column; gap: 10px; position: relative;
}
.giris-marka .ozellik { display: flex; align-items: center; gap: 11px; font-size: 13.5px; opacity: .93; }
.giris-marka .ozellik i {
  width: 21px; height: 21px; border-radius: 50%; background: rgba(255,255,255,.2); flex: 0 0 21px;
  display: grid; place-items: center; font-style: normal;
}
.giris-marka .ozellik i svg { width: 12px; height: 12px; stroke-width: 2.4; }
.giris-marka .altbilgi { margin-top: 26px; font-size: 11.5px; opacity: .6; position: relative; }

.giris-taraf {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 40px; background: var(--kum-100); overflow-y: auto;
}
.giris-kart { width: 100%; max-width: 392px; }
.giris-kart h3 { font-size: 22px; font-weight: 700; letter-spacing: -.4px; margin-bottom: 5px; }
.giris-kart .alt { font-size: 13.5px; color: var(--soluk); margin-bottom: 26px; }
.giris-kart .destek {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--cizgi);
  font-size: 12.5px; color: var(--soluk); line-height: 1.7;
}

@media (max-width: 900px) {
  .giris-marka { display: none; }
  .giris-taraf { padding: 24px; }
}

/* ------------------------- Ürün seçim ekranı -------------------------
   Girişten sonraki ilk karar: hangi ürünü yöneteceğiz. Kartlar canlı
   sayı gösterir; erişilemeyen ürün boş liste yerine sebebini yazar.
   ---------------------------------------------------------------------*/

.secim-sayfa {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  padding: 56px 24px 40px; background: var(--kum-100);
}
.secim-tepe { width: 100%; max-width: 1000px; display: flex; align-items: center; gap: 13px; margin-bottom: 34px; }
.secim-tepe .isaret {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--marka-500), var(--marka-700));
  color: #fff; font-weight: 800; font-size: 17px;
}
.secim-tepe h1 { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.secim-tepe p { font-size: 12.5px; color: var(--soluk); }
.secim-tepe .sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.secim-basi { width: 100%; max-width: 1000px; margin-bottom: 20px; }
.secim-basi h2 { font-size: 25px; font-weight: 700; letter-spacing: -.5px; }
.secim-basi p { font-size: 14px; color: var(--soluk); margin-top: 5px; }

.secim-izgara {
  width: 100%; max-width: 1000px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 900px) { .secim-izgara { grid-template-columns: 1fr; } }

.urun-kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 16px;
  padding: 22px; box-shadow: var(--golge); text-align: left; display: flex;
  flex-direction: column; gap: 14px; cursor: pointer; font: inherit; color: inherit;
  transition: border-color .14s, box-shadow .14s, transform .08s;
  position: relative; overflow: hidden; min-height: 232px;
}
.urun-kart::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--marka-500), var(--marka-700));
}
.urun-kart:hover:not(:disabled) { border-color: var(--marka-300); box-shadow: var(--golge-lg); transform: translateY(-2px); }
.urun-kart:disabled { cursor: not-allowed; opacity: .82; }
.urun-kart:disabled::after { background: var(--kum-300); }

.urun-kart .rozet-satir { display: flex; align-items: center; gap: 9px; }
.urun-kart .amblem {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--marka-50); color: var(--marka-700); border: 1px solid var(--marka-200);
}
.urun-kart:disabled .amblem { background: var(--kum-100); color: var(--kum-500); border-color: var(--kum-200); }
.urun-kart .amblem svg { width: 20px; height: 20px; }
.urun-kart h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.2px; }
.urun-kart .aciklama { font-size: 12.5px; color: var(--soluk); }

.urun-kart .rakamlar { display: flex; gap: 26px; margin-top: auto; }
.urun-kart .rakam .deger { font-size: 27px; font-weight: 750; letter-spacing: -.7px;
  font-variant-numeric: tabular-nums; line-height: 1.1; }
.urun-kart .rakam .etiket { font-size: 11.5px; color: var(--soluk); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.urun-kart .rakam.uyari .deger { color: var(--sari); }

.urun-kart .git { display: flex; align-items: center; gap: 6px; font-size: 13px;
  font-weight: 650; color: var(--marka-700); }
.urun-kart:disabled .git { color: var(--kum-500); }

/* ---------------------------- Yerleşim ---------------------------- */

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

.kenar {
  width: var(--kenar-genislik); flex: 0 0 var(--kenar-genislik);
  background: var(--kum-900); color: var(--kum-300);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.kenar-baslik { padding: 18px 16px 14px; display: flex; align-items: center; gap: 11px; }
.kenar-baslik .isaret {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--marka-500), var(--marka-700));
  color: #fff; font-weight: 800; font-size: 15px; flex: 0 0 36px;
}
.kenar-baslik b { color: #fff; font-size: 14.5px; display: block; letter-spacing: -.2px; }
.kenar-baslik span { font-size: 11.5px; color: var(--kum-500); }

/* Ürün değiştirici — hangi üründe olduğumuz her an görünür, bir tık uzakta */
.kenar-urun {
  margin: 0 12px 10px; padding: 9px 11px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; gap: 9px; cursor: pointer; width: calc(100% - 24px);
  font: inherit; color: var(--kum-300); text-align: left;
}
.kenar-urun:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); }
.kenar-urun .nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--marka-500); flex: 0 0 8px; }
.kenar-urun b { color: #fff; font-size: 13px; display: block; }
.kenar-urun small { font-size: 10.5px; color: var(--kum-500); text-transform: uppercase; letter-spacing: .06em; }
.kenar-urun svg { margin-left: auto; color: var(--kum-500); }

.kenar-menu { flex: 1; overflow-y: auto; padding: 4px 10px 16px; }
.kenar-grup { margin-top: 15px; padding: 0 8px 6px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .09em; color: var(--kum-600); font-weight: 700; }
.kenar-menu a {
  display: flex; align-items: center; gap: 10px; padding: 8.5px 10px; border-radius: 9px;
  color: var(--kum-300); font-size: 13.5px; font-weight: 500; text-decoration: none; margin-bottom: 1px;
}
.kenar-menu a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.kenar-menu a.etkin { background: var(--marka-600); color: #fff; box-shadow: 0 4px 12px rgba(234,88,12,.35); }
.kenar-menu a .rozet {
  margin-left: auto; background: rgba(255,255,255,.16); color: #fff; font-size: 11px;
  padding: 1px 7px; border-radius: 999px; font-weight: 600; border: 0;
}
.kenar-menu a.etkin .rozet { background: rgba(0,0,0,.22); }

.kenar-alt { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.08); }
.kenar-alt .kisi { display: flex; align-items: center; gap: 10px; }
.kenar-alt .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--marka-600); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 12.5px; flex: 0 0 32px;
}
.kenar-alt b { color: #fff; font-size: 12.5px; display: block; }
.kenar-alt small { color: var(--kum-500); font-size: 11px; }

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

.ust {
  min-height: 60px; background: var(--kart); border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: 14px; padding: 10px 24px;
  position: sticky; top: 0; z-index: 30;
}
.ust h2 { font-size: 17px; font-weight: 700; letter-spacing: -.25px; }
.ust .ust-aciklama { font-size: 12.5px; color: var(--soluk); }
.ust .sag { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* Başlıktaki ürün etiketi: hangi ürünün verisine baktığımız hep görünür */
.ust-urun {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px;
  border: 1px solid var(--marka-200); background: var(--marka-50); color: var(--marka-800);
  border-radius: 999px; font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.ust-urun:hover { background: var(--marka-100); border-color: var(--marka-300); }
.ust-urun .nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--marka-600); }

.icerik { padding: 22px 24px 60px; flex: 1; }

/* ---------------------------- Kartlar ---------------------------- */

.kart {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--yuvarlak); box-shadow: var(--golge);
}
.kart-baslik {
  padding: 14px 16px; border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.kart-baslik h3 { font-size: 14px; font-weight: 700; }
.kart-baslik .sag { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.kart-govde { padding: 16px; }

.izgara { display: grid; gap: 16px; }
.iz-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.iz-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.iz-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.iz-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.iz-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
@media (max-width: 1240px) { .iz-5, .iz-6 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1180px) { .iz-4, .iz-5, .iz-6 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px)  { .iz-2, .iz-3, .iz-4, .iz-5, .iz-6 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .iz-2, .iz-3, .iz-4, .iz-5, .iz-6 { grid-template-columns: 1fr; } }

.sayac {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: 15px 16px; box-shadow: var(--golge); position: relative; overflow: hidden;
}
.sayac::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--marka-500);
}
.sayac.uyari::after { background: var(--sari); }
.sayac.tehlike::after { background: var(--kirmizi); }
.sayac.bilgi::after { background: var(--mavi); }
.sayac.sessiz::after { background: var(--kum-300); }
.sayac .etiket { font-size: 11.5px; color: var(--soluk); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; }
.sayac .deger { font-size: 25px; font-weight: 750; letter-spacing: -.6px; margin-top: 3px;
  font-variant-numeric: tabular-nums; }
.sayac .alt { font-size: 12px; color: var(--soluk); margin-top: 2px; }

/* ---------------------------- Tablolar ---------------------------- */

.tablo-sar { overflow-x: auto; }
table.tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tablo th {
  text-align: left; padding: 9px 12px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--soluk);
  border-bottom: 1px solid var(--cizgi); white-space: nowrap; background: var(--kum-50);
}
table.tablo td { padding: 10px 12px; border-bottom: 1px solid var(--kum-100); vertical-align: middle; }
table.tablo tbody tr:last-child td { border-bottom: 0; }
table.tablo tbody tr:hover { background: var(--marka-50); }
table.tablo tbody tr.tiklanir { cursor: pointer; }
table.tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tablo .islem { text-align: right; white-space: nowrap; }
.bos-durum { padding: 44px 20px; text-align: center; color: var(--soluk); }
.bos-durum .simge { display: grid; place-items: center; margin: 0 auto 10px; width: 42px; height: 42px;
  border-radius: 12px; background: var(--kum-100); color: var(--kum-400); }
.bos-durum .simge svg { width: 20px; height: 20px; }
.bos-durum b { display: block; color: var(--metin); font-size: 14px; margin-bottom: 4px; }

/* ---------------------------- Rozetler ---------------------------- */

.rozet {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
  background: var(--kum-100); color: var(--kum-700); border: 1px solid var(--kum-200);
}
.rozet.turuncu  { background: var(--marka-100); color: var(--marka-800); border-color: var(--marka-200); }
.rozet.kirmizi  { background: var(--kirmizi-yumusak); color: #991B1B; border-color: #FECACA; }
.rozet.sari     { background: var(--sari-yumusak); color: #92400E; border-color: #FDE68A; }
.rozet.mavi     { background: var(--mavi-yumusak); color: #1E40AF; border-color: #BFDBFE; }
.rozet.koyu     { background: var(--kum-800); color: #fff; border-color: var(--kum-800); }
.rozet .nokta { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------------------------- Formlar ---------------------------- */

.alan { margin-bottom: 14px; }
.alan label { display: block; font-size: 12.5px; font-weight: 650; margin-bottom: 5px; color: var(--kum-700); }
.alan .ipucu { font-size: 11.5px; color: var(--soluk); margin-top: 4px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; padding: 8.5px 11px; border: 1px solid var(--kum-300); border-radius: 9px;
  font: inherit; font-size: 13.5px; background: #fff; color: var(--metin);
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marka-500); box-shadow: 0 0 0 3px var(--marka-100);
}
input:disabled, select:disabled, textarea:disabled { background: var(--kum-100); color: var(--soluk); }
textarea { min-height: 88px; resize: vertical; }
select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2378716C' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }

.onay { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.onay input { width: 16px; height: 16px; accent-color: var(--marka-600); cursor: pointer; }

/* ---------------------------- Düğmeler ---------------------------- */

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px; border: 1px solid transparent;
  font: inherit; font-size: 13.5px; font-weight: 620; cursor: pointer;
  background: var(--marka-600); color: #fff; transition: background .12s, transform .06s, box-shadow .12s;
  white-space: nowrap; text-decoration: none;
}
.dugme:hover { background: var(--marka-700); text-decoration: none; color: #fff; }
.dugme:active { transform: translateY(1px); }
.dugme:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.dugme.ikincil { background: #fff; color: var(--kum-700); border-color: var(--kum-300); }
.dugme.ikincil:hover { background: var(--kum-50); border-color: var(--kum-400); color: var(--kum-800); }
.dugme.hafif { background: var(--marka-50); color: var(--marka-700); border-color: var(--marka-200); }
.dugme.hafif:hover { background: var(--marka-100); color: var(--marka-800); }
.dugme.tehlike { background: var(--kirmizi); }
.dugme.tehlike:hover { background: #B91C1C; }
/* Yumuşak tehlike: bir ekranda tek bir dolu kırmızı düğme olsun, gerisi bu. */
.dugme.tehlike-hafif { background: #fff; color: var(--kirmizi); border-color: #FECACA; }
.dugme.tehlike-hafif:hover { background: var(--kirmizi-yumusak); color: #991B1B; border-color: #FCA5A5; }
.dugme.kucuk { padding: 5px 10px; font-size: 12.5px; border-radius: 7px; }
.dugme.tam { width: 100%; }
.dugme.duz { background: transparent; color: var(--kum-600); border-color: transparent; padding: 5px 8px; }
.dugme.duz:hover { background: var(--kum-100); color: var(--metin); }

.dugme-grup { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------------------------- Araç çubuğu ---------------------------- */

.arac {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--cizgi); background: var(--kum-50);
  border-radius: var(--yuvarlak) var(--yuvarlak) 0 0;
}
.arac .ara { position: relative; flex: 1 1 220px; max-width: 330px; }
.arac .ara input { padding-left: 33px; }
.arac .ara svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--kum-400); pointer-events: none; }
.arac select { width: auto; min-width: 132px; }
.arac input[type=date] { width: auto; }
.arac .sag { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.arac label.kucuk { color: var(--soluk); font-weight: 600; }

/* ---------------------------- Sayfalama ---------------------------- */

.sayfalama {
  display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-top: 1px solid var(--cizgi); font-size: 12.5px; color: var(--soluk);
}
.sayfalama .sag { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* ---------------------------- Kip (modal) ---------------------------- */

.kip-fon {
  position: fixed; inset: 0; background: rgba(28,25,23,.5); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 22px; z-index: 100;
  animation: bel .12s ease-out;
}
@keyframes bel { from { opacity: 0 } to { opacity: 1 } }
.kip {
  background: var(--kart); border-radius: 16px; box-shadow: var(--golge-lg);
  width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column;
  animation: yukari .16s cubic-bezier(.2,.8,.3,1);
}
@keyframes yukari { from { opacity: 0; transform: translateY(10px) scale(.99) } to { opacity: 1; transform: none } }
.kip.genis { max-width: 940px; }
.kip.dar { max-width: 420px; }
.kip-baslik { padding: 16px 20px; border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: 12px; }
.kip-baslik h3 { font-size: 15.5px; font-weight: 700; }
.kip-baslik .kapat {
  margin-left: auto; background: none; border: none; line-height: 1;
  color: var(--kum-400); cursor: pointer; padding: 4px; border-radius: 7px; display: grid; place-items: center;
}
.kip-baslik .kapat:hover { background: var(--kum-100); color: var(--metin); }
.kip-govde { padding: 20px; overflow-y: auto; }
.kip-alt { padding: 14px 20px; border-top: 1px solid var(--cizgi); display: flex; gap: 9px;
  justify-content: flex-end; background: var(--kum-50); border-radius: 0 0 16px 16px; }

/* ---------------------------- Bildirim ---------------------------- */

.bildirim-yuva { position: fixed; top: 16px; right: 16px; z-index: 200; display: flex;
  flex-direction: column; gap: 9px; max-width: 380px; }
.bildirim {
  background: var(--kum-900); color: #fff; padding: 11px 15px; border-radius: 11px;
  box-shadow: var(--golge-lg); font-size: 13.5px; display: flex; align-items: flex-start; gap: 10px;
  animation: kaydir .18s cubic-bezier(.2,.8,.3,1);
}
@keyframes kaydir { from { opacity: 0; transform: translateX(20px) } to { opacity: 1; transform: none } }
.bildirim.basari { background: var(--marka-600); }
.bildirim.hata { background: var(--kirmizi); }
.bildirim svg { margin-top: 1px; }

/* ---------------------------- Sekmeler ---------------------------- */

.sekmeler { display: flex; gap: 2px; border-bottom: 1px solid var(--cizgi); padding: 0 4px; overflow-x: auto; }
.sekmeler button {
  background: none; border: none; padding: 10px 14px; font: inherit; font-size: 13.5px; font-weight: 620;
  color: var(--soluk); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.sekmeler button:hover { color: var(--metin); }
.sekmeler button.etkin { color: var(--marka-700); border-bottom-color: var(--marka-600); }

/* ---------------------------- Çeşitli ---------------------------- */

.satir { display: flex; align-items: center; gap: 10px; }
.esit { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 620px) { .esit { grid-template-columns: 1fr; } }
.soluk { color: var(--soluk); }
.kucuk { font-size: 12px; }
.kalin { font-weight: 650; }
.tek { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.sag-hiza { text-align: right; }
.bosluk-8 { height: 8px; } .bosluk-16 { height: 16px; } .bosluk-24 { height: 24px; }
.ayrac { height: 1px; background: var(--cizgi); margin: 16px 0; }
.kes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tanim { display: grid; grid-template-columns: 156px 1fr; gap: 8px 14px; font-size: 13px; }
.tanim dt { color: var(--soluk); font-weight: 600; }
.tanim dd { color: var(--metin); word-break: break-word; }
@media (max-width: 620px) { .tanim { grid-template-columns: 1fr; gap: 2px 0; } .tanim dd { margin-bottom: 8px; } }

.kopyala { cursor: pointer; border-bottom: 1px dashed var(--kum-300); }
.kopyala:hover { color: var(--marka-600); border-bottom-color: var(--marka-400); }

.yukleniyor { display: grid; place-items: center; padding: 46px; color: var(--soluk); }
.donen {
  width: 26px; height: 26px; border: 2.5px solid var(--kum-200); border-top-color: var(--marka-500);
  border-radius: 50%; animation: don .7s linear infinite; margin-bottom: 10px;
}
@keyframes don { to { transform: rotate(360deg) } }

.uyari-kutu {
  padding: 11px 14px; border-radius: 10px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start;
  background: var(--sari-yumusak); color: #92400E; border: 1px solid #FDE68A;
}
.uyari-kutu svg { flex: 0 0 17px; margin-top: 1px; }
.uyari-kutu.tehlike { background: var(--kirmizi-yumusak); color: #991B1B; border-color: #FECACA; }
.uyari-kutu.bilgi { background: var(--marka-50); color: var(--marka-800); border-color: var(--marka-200); }
.uyari-kutu.sessiz { background: var(--kum-50); color: var(--kum-700); border-color: var(--kum-200); }

/* Çubuk grafik (saf SVG) */
.grafik { width: 100%; height: 190px; display: block; }
.grafik .cubuk { fill: var(--marka-400); transition: fill .12s; }
.grafik .cubuk:hover { fill: var(--marka-600); }
.grafik .eksen { stroke: var(--cizgi); stroke-width: 1; }
.grafik text { font-size: 9.5px; fill: var(--kum-500); }

.ilerleme { height: 6px; background: var(--kum-200); border-radius: 999px; overflow: hidden; }
.ilerleme > i { display: block; height: 100%; background: var(--marka-500); border-radius: 999px; }
.ilerleme.dolu > i { background: var(--kirmizi); }

/* Zaman çizgisi — işletme detayındaki son hareketler */
.iz { display: flex; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--kum-100); }
.iz:last-child { border-bottom: 0; }
.iz .imle { width: 8px; height: 8px; border-radius: 50%; background: var(--marka-400);
  flex: 0 0 8px; margin-top: 6px; }
.iz .imle.pos, .iz .imle.otel { background: var(--kum-300); }
.iz .govde { flex: 1; min-width: 0; }
.iz .zaman { font-size: 11.5px; color: var(--soluk); white-space: nowrap; }

@media (max-width: 860px) {
  .kenar { position: fixed; left: -100%; z-index: 90; transition: left .2s; }
  .kenar.acik { left: 0; box-shadow: var(--golge-lg); }
  .menu-dugmesi { display: inline-flex !important; }
  .icerik { padding: 16px 14px 60px; }
  .ust { padding: 10px 14px; }
}
.menu-dugmesi { display: none; }