/* FORVAL Teklif - uygulama arayuzu
   Marka renkleri logodan ornekilendi: #0084FB / #0139C0 / #6730FD / #4528E2 / #100274 */

:root {
  --mavi: #0084fb;
  --mavi-koyu: #0139c0;
  --mor: #6730fd;
  --mor-koyu: #4528e2;
  --lacivert: #100274;

  --zemin: #070914;
  --yuzey: #0e1225;
  --yuzey-2: #151a31;
  --yuzey-3: #1d2440;
  --kenar: rgba(255, 255, 255, 0.09);
  --kenar-parlak: rgba(120, 160, 255, 0.35);

  --metin: #e9ecfb;
  --metin-2: #aab3d6;
  --metin-3: #7c86ad;

  --yesil: #21c17a;
  --sari: #f0b429;
  --kirmizi: #f2545b;

  --gradyan: linear-gradient(135deg, #0084fb 0%, #4528e2 55%, #100274 100%);
  --gradyan-yatay: linear-gradient(90deg, #0084fb, #6730fd, #100274);

  --r: 14px;
  --r-kucuk: 9px;
  --golge: 0 18px 45px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
}

/* display:flex/grid tanimli ogelerde hidden ozelligi calissin */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--zemin);
  color: var(--metin);
  font: 14px/1.55 'Segoe UI', 'Inter', system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 500px at 8% -5%, rgba(0, 132, 251, 0.16), transparent 60%),
    radial-gradient(800px 500px at 95% 0%, rgba(103, 48, 253, 0.15), transparent 60%),
    radial-gradient(700px 600px at 60% 110%, rgba(16, 2, 116, 0.35), transparent 65%);
  pointer-events: none;
  z-index: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------------------ duzen */

#uygulama {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 248px 1fr;
  height: 100vh;
}

.kenar-cubuk {
  background: linear-gradient(180deg, rgba(14, 18, 37, 0.95), rgba(7, 9, 20, 0.98));
  border-right: 1px solid var(--kenar);
  display: flex;
  flex-direction: column;
  padding: 20px 14px;
  gap: 6px;
  overflow-y: auto;
}

.marka {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 20px;
}

.marka img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0, 132, 251, 0.45));
}

.marka-ad {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 3px;
  line-height: 1;
  background: linear-gradient(90deg, #ffffff 35%, #7aa8ff 75%, #8b6bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.marka-alt {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--metin-3);
  margin-top: 3px;
}

.menu-baslik {
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--metin-3);
  padding: 14px 10px 6px;
}

.menu-oge {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--r-kucuk);
  color: var(--metin-2);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  border: 1px solid transparent;
}

.menu-oge:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--metin);
}

.menu-oge.aktif {
  background: linear-gradient(135deg, rgba(0, 132, 251, 0.22), rgba(103, 48, 253, 0.18));
  border-color: var(--kenar-parlak);
  color: #fff;
}

.menu-oge .ikon {
  width: 18px;
  text-align: center;
  font-size: 15px;
  opacity: 0.95;
}

.menu-oge .rozet {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 1px 8px;
  font-size: 11px;
}

.kenar-alt {
  margin-top: auto;
  padding: 14px 10px 0;
  border-top: 1px solid var(--kenar);
  font-size: 11px;
  color: var(--metin-3);
  display: grid;
  gap: 4px;
}

.icerik {
  overflow-y: auto;
  padding: 26px 30px 60px;
}

/* ------------------------------------------------------------------ baslik */

.sayfa-bas {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}

.sayfa-bas h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.4px;
}

.sayfa-bas .alt {
  color: var(--metin-3);
  font-size: 13px;
  margin-top: 3px;
}

.sayfa-bas .sag {
  margin-left: auto;
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------- dugme */

.dugme {
  border: 1px solid var(--kenar);
  background: var(--yuzey-2);
  color: var(--metin);
  padding: 9px 16px;
  border-radius: var(--r-kucuk);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: 0.15s;
  white-space: nowrap;
}

.dugme:hover {
  background: var(--yuzey-3);
  border-color: var(--kenar-parlak);
}

.dugme.ana {
  background: var(--gradyan);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 90, 240, 0.35);
}

.dugme.ana:hover {
  filter: brightness(1.12);
}

.dugme.sade {
  background: transparent;
}

.dugme.tehlike {
  background: rgba(242, 84, 91, 0.14);
  border-color: rgba(242, 84, 91, 0.4);
  color: #ff9ba0;
}

.dugme.tehlike:hover {
  background: rgba(242, 84, 91, 0.24);
}

.dugme.kucuk {
  padding: 6px 11px;
  font-size: 12.5px;
}

.dugme:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

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

.kart {
  background: linear-gradient(180deg, rgba(21, 26, 49, 0.85), rgba(14, 18, 37, 0.92));
  border: 1px solid var(--kenar);
  border-radius: var(--r);
  padding: 18px;
}

.kart-bas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
}

.kart-bas .sag {
  margin-left: auto;
  font-size: 12px;
  color: var(--metin-3);
  font-weight: 400;
}

.izgara {
  display: grid;
  gap: 16px;
}

.izgara.k4 {
  grid-template-columns: repeat(4, 1fr);
}

.izgara.k3 {
  grid-template-columns: repeat(3, 1fr);
}

.izgara.k2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1250px) {
  .izgara.k4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .izgara.k3 {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------- olcut karti */

.olcut {
  position: relative;
  overflow: hidden;
}

.olcut::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gradyan-yatay);
  opacity: 0.85;
}

.olcut .etiket {
  font-size: 11.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--metin-3);
}

.olcut .deger {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.7px;
  margin: 7px 0 2px;
}

.olcut .deger .pb {
  font-size: 15px;
  font-weight: 500;
  color: var(--metin-2);
  margin-left: 3px;
}

.olcut .aciklama {
  font-size: 12px;
  color: var(--metin-3);
}

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

.tablo-sar {
  overflow-x: auto;
  border-radius: var(--r);
  border: 1px solid var(--kenar);
}

table.veri {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: rgba(14, 18, 37, 0.6);
}

table.veri th {
  text-align: left;
  padding: 12px 14px;
  font-size: 11px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--metin-3);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--kenar);
  white-space: nowrap;
}

table.veri td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}

table.veri tbody tr:hover {
  background: rgba(255, 255, 255, 0.035);
}

table.veri tbody tr:last-child td {
  border-bottom: none;
}

table.veri .sayi {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

table.veri .islem {
  text-align: right;
  white-space: nowrap;
}

.satir-tik {
  cursor: pointer;
}

.bos-durum {
  text-align: center;
  padding: 48px 20px;
  color: var(--metin-3);
}

.bos-durum .ikon {
  font-size: 34px;
  opacity: 0.5;
  display: block;
  margin-bottom: 10px;
}

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

.rozet-durum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 550;
  white-space: nowrap;
}

.rozet-durum::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.rozet-durum.gri {
  background: rgba(160, 170, 200, 0.13);
  color: #b7c0dd;
}
.rozet-durum.mavi {
  background: rgba(0, 132, 251, 0.16);
  color: #6fb4ff;
}
.rozet-durum.mor {
  background: rgba(103, 48, 253, 0.18);
  color: #a98cff;
}
.rozet-durum.yesil {
  background: rgba(33, 193, 122, 0.15);
  color: #55dda0;
}
.rozet-durum.kirmizi {
  background: rgba(242, 84, 91, 0.15);
  color: #ff8f95;
}

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

.alan {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.alan > label {
  font-size: 12px;
  color: var(--metin-2);
  font-weight: 550;
  letter-spacing: 0.2px;
}

.alan .ipucu {
  font-size: 11.5px;
  color: var(--metin-3);
}

input[type='text'],
input[type='number'],
input[type='date'],
input[type='email'],
input[type='tel'],
input[type='password'],
input[type='search'],
select,
textarea {
  width: 100%;
  background: rgba(7, 9, 20, 0.75);
  border: 1px solid var(--kenar);
  border-radius: var(--r-kucuk);
  color: var(--metin);
  padding: 9px 12px;
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--mavi);
  box-shadow: 0 0 0 3px rgba(0, 132, 251, 0.18);
}

textarea {
  resize: vertical;
  min-height: 78px;
  line-height: 1.5;
}

select option {
  background: #0e1225;
}

input.sayi,
td input.sayi {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.onay-satir {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 0;
  cursor: pointer;
}

.onay-satir input[type='checkbox'] {
  width: 17px;
  height: 17px;
  accent-color: var(--mavi);
  cursor: pointer;
}

.form-izgara {
  display: grid;
  gap: 0 16px;
  grid-template-columns: repeat(2, 1fr);
}

.form-izgara.k3 {
  grid-template-columns: repeat(3, 1fr);
}

.form-izgara .tam {
  grid-column: 1 / -1;
}

@media (max-width: 900px) {
  .form-izgara,
  .form-izgara.k3 {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ arama */

.arac-cubugu {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.arama {
  position: relative;
  flex: 1;
  min-width: 220px;
}

.arama input {
  padding-left: 36px;
}

.arama::before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.6;
}

.suzgec {
  display: flex;
  gap: 4px;
  background: var(--yuzey-2);
  border: 1px solid var(--kenar);
  border-radius: var(--r-kucuk);
  padding: 3px;
}

.suzgec button {
  border: none;
  background: transparent;
  color: var(--metin-2);
  padding: 6px 12px;
  border-radius: 7px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.suzgec button.aktif {
  background: var(--gradyan);
  color: #fff;
}

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

.ortu {
  position: fixed;
  inset: 0;
  background: rgba(4, 6, 14, 0.72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  animation: bel 0.15s ease;
}

@keyframes bel {
  from {
    opacity: 0;
  }
}

.kutu {
  background: linear-gradient(180deg, #151a31, #0d1122);
  border: 1px solid var(--kenar-parlak);
  border-radius: var(--r);
  box-shadow: var(--golge);
  width: min(560px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  animation: yukari 0.18s ease;
}

.kutu.genis {
  width: min(940px, 100%);
}

@keyframes yukari {
  from {
    transform: translateY(12px);
    opacity: 0;
  }
}

.kutu-bas {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--kenar);
}

.kutu-bas h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.kutu-bas .kapat {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--metin-3);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.kutu-bas .kapat:hover {
  color: var(--metin);
}

.kutu-govde {
  padding: 20px;
  overflow-y: auto;
}

.kutu-alt {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--kenar);
}

.onay-kutu {
  padding: 22px;
  width: min(430px, 100%);
}

.onay-kutu h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.onay-kutu p {
  margin: 0 0 4px;
  color: var(--metin-2);
}

.onay-kutu .kutu-alt {
  border: none;
  padding: 18px 0 0;
}

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

#bildirimler {
  position: fixed;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 300;
}

.bildirim {
  background: linear-gradient(135deg, #1a2140, #11162b);
  border: 1px solid var(--kenar-parlak);
  border-left: 3px solid var(--mavi);
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: var(--golge);
  max-width: 380px;
  animation: kaydir 0.22s ease;
}

.bildirim.basari {
  border-left-color: var(--yesil);
}

.bildirim.hata {
  border-left-color: var(--kirmizi);
}

.bildirim.cikis {
  animation: sondur 0.28s ease forwards;
}

@keyframes kaydir {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
}

@keyframes sondur {
  to {
    transform: translateX(30px);
    opacity: 0;
  }
}

/* ------------------------------------------------------- teklif duzenleyici */

.duzen-duzeni {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  gap: 22px;
  align-items: start;
}

@media (max-width: 1450px) {
  .duzen-duzeni {
    grid-template-columns: 1fr;
  }
}

.bolum {
  margin-bottom: 18px;
}

.bolum > h3 {
  font-size: 13px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--metin-3);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.bolum > h3::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--kenar);
}

.kalem-tablosu {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.kalem-tablosu th {
  font-size: 10.5px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--metin-3);
  text-align: left;
  padding: 0 6px 8px;
  font-weight: 600;
}

.kalem-tablosu td {
  padding: 5px 6px;
  vertical-align: top;
}

.kalem-tablosu input,
.kalem-tablosu select,
.kalem-tablosu textarea {
  padding: 7px 9px;
  font-size: 13px;
}

.kalem-tablosu textarea {
  min-height: 34px;
  font-size: 12.5px;
}

.kalem-satir {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--kenar);
  border-radius: var(--r-kucuk);
}

.kalem-kart {
  border: 1px solid var(--kenar);
  border-radius: var(--r-kucuk);
  padding: 12px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.025);
  display: grid;
  gap: 10px;
  grid-template-columns: 74px minmax(0, 1fr);
}

.kalem-kart .kalem-gorsel {
  width: 74px;
  height: 74px;
  border-radius: 9px;
  border: 1px dashed var(--kenar-parlak);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.25);
  font-size: 11px;
  color: var(--metin-3);
  text-align: center;
  position: relative;
}

.kalem-kart .kalem-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.kalem-kart .kalem-gorsel .sil-gorsel {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.65);
  border: none;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
  padding: 1px 5px;
}

.kalem-satir-ust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
}

.kalem-sayilar {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 1100px) {
  .kalem-sayilar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.kalem-sayilar label {
  font-size: 10.5px;
  color: var(--metin-3);
  display: block;
  margin-bottom: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kalem-toplam {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  color: #8fc0ff;
  padding-top: 20px;
  text-align: right;
  font-size: 13.5px;
}

.satir-sil {
  background: none;
  border: 1px solid transparent;
  color: var(--metin-3);
  cursor: pointer;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 14px;
}

.satir-sil:hover {
  color: #ff9ba0;
  border-color: rgba(242, 84, 91, 0.35);
  background: rgba(242, 84, 91, 0.1);
}

.ozet-kutu {
  display: grid;
  gap: 7px;
  font-size: 13.5px;
}

.ozet-kutu .satir {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--metin-2);
}

.ozet-kutu .satir.genel {
  border-top: 1px solid var(--kenar);
  margin-top: 6px;
  padding-top: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.ozet-kutu .satir span:last-child {
  font-variant-numeric: tabular-nums;
}

.yazi-ile-kutu {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--metin-3);
  border-top: 1px dashed var(--kenar);
  padding-top: 9px;
  line-height: 1.45;
}

/* ------------------------------------------------------------- onizleme */

.onizleme-sar {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 60px);
  overflow: auto;
  border-radius: var(--r);
  border: 1px solid var(--kenar);
  background: #3a3f52;
  padding: 16px;
}

.onizleme-sar .a4 {
  transform-origin: top center;
}

.onizleme-bas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--metin-2);
  font-size: 12.5px;
}

/* --------------------------------------------------------------- katalog */

.katalog-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

.urun-kart {
  border: 1px solid var(--kenar);
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(21, 26, 49, 0.9), rgba(14, 18, 37, 0.95));
  display: flex;
  flex-direction: column;
  transition: 0.15s;
}

.urun-kart:hover {
  border-color: var(--kenar-parlak);
  transform: translateY(-2px);
}

.urun-kart .gorsel {
  height: 128px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.urun-kart .gorsel img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.urun-kart .gorsel.yok {
  background: linear-gradient(135deg, rgba(0, 132, 251, 0.15), rgba(103, 48, 253, 0.12));
  font-size: 30px;
  opacity: 0.5;
}

.urun-kart .govde {
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.urun-kart .kod {
  font-size: 10.5px;
  letter-spacing: 0.8px;
  color: var(--metin-3);
  text-transform: uppercase;
}

.urun-kart .ad {
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
}

.urun-kart .aciklama {
  font-size: 12px;
  color: var(--metin-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.urun-kart .fiyat {
  margin-top: auto;
  padding-top: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  color: #8fc0ff;
  font-variant-numeric: tabular-nums;
}

.urun-kart .fiyat .birim {
  font-size: 11px;
  color: var(--metin-3);
  font-weight: 400;
}

.urun-kart .islemler {
  display: flex;
  gap: 6px;
  padding: 0 12px 12px;
}

.etiket-cip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 11px;
  background: rgba(0, 132, 251, 0.14);
  color: #7fb8ff;
  border: 1px solid rgba(0, 132, 251, 0.25);
}

/* ------------------------------------------------------------------ cesitli */

.yukleniyor {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  color: var(--metin-3);
  gap: 12px;
}

.donuyor {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--mavi);
  border-radius: 50%;
  animation: don 0.8s linear infinite;
}

@keyframes don {
  to {
    transform: rotate(360deg);
  }
}

.cizgi-liste {
  display: grid;
  gap: 2px;
}

.cizgi-liste .satir {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.12s;
}

.cizgi-liste .satir:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cizgi-liste .satir .ad {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cizgi-liste .satir .yan {
  color: var(--metin-3);
  font-size: 12px;
  white-space: nowrap;
}

.oran-cubuk {
  height: 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  display: flex;
}

.oran-cubuk i {
  display: block;
  height: 100%;
}

.efsane {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--metin-2);
}

.efsane span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.efsane i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
}

.uyari-serit {
  background: rgba(240, 180, 41, 0.12);
  border: 1px solid rgba(240, 180, 41, 0.32);
  color: #ffd479;
  border-radius: var(--r-kucuk);
  padding: 11px 15px;
  margin-bottom: 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.uyari-serit .dugme {
  margin-left: auto;
}

.belge-cerceve {
  background: #3a3f52;
  padding: 20px;
  border-radius: var(--r);
  overflow: auto;
}

/* Yazdirma sirasinda uygulama arayuzu tamamen gizlenir */
@media print {
  body {
    overflow: visible;
    background: #fff;
  }
  body::before,
  .kenar-cubuk,
  .ust-bar,
  .menu-ortu,
  .sayfa-bas,
  .arac-cubugu,
  .uyari-serit,
  #bildirimler,
  .ortu,
  .yazdirma-cubugu {
    display: none !important;
  }
  #uygulama {
    display: block;
    height: auto;
  }
  .icerik {
    overflow: visible;
    padding: 0;
  }
  .belge-cerceve {
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
}

/* ------------------------------------------- surum 5: bolum, opsiyonel, marj */

.kalem-kart.bolum-kart {
  grid-template-columns: 40px minmax(0, 1fr);
  background: rgba(69, 40, 226, 0.12);
  border-color: rgba(120, 96, 255, 0.4);
}

.bolum-isaret {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #b3a4ff;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(120, 96, 255, 0.35);
}

.bolum-ad-giris {
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.bolum-not {
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--metin-3);
}

.kalem-kart.opsiyonel-kart {
  border-color: rgba(255, 196, 87, 0.4);
  background: rgba(255, 196, 87, 0.07);
}

.kalem-secenek-satiri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--kenar);
}

.kalem-secenek-satiri .onay-satir {
  padding: 2px 0;
  font-size: 12.5px;
  color: var(--metin-2);
}

.kalem-uyari {
  font-size: 11.5px;
  color: #ffd479;
}

.maliyet-giris {
  border-color: rgba(255, 196, 87, 0.35) !important;
}

.alan-not {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--metin-3);
  line-height: 1.35;
}

.ozet-baslik {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--metin-3);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--kenar);
  display: flex;
  align-items: center;
  gap: 8px;
}

.sadece-yonetici {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10.5px;
  color: #ffd479;
  background: rgba(255, 196, 87, 0.12);
  border: 1px solid rgba(255, 196, 87, 0.3);
  border-radius: 6px;
  padding: 1px 6px;
}

.secenek-ozet .satir.genel {
  font-size: 15px;
}

.marj-cubuk {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 4px;
}

.marj-cubuk i {
  display: block;
  height: 100%;
  border-radius: 4px;
}

.marj-oran {
  font-size: 12.5px;
  font-weight: 650;
  text-align: right;
}

.marj-uyari {
  font-size: 11.5px;
  color: #ffd479;
  background: rgba(255, 196, 87, 0.1);
  border-left: 2px solid #ffd479;
  padding: 5px 8px;
  border-radius: 0 6px 6px 0;
}

/* ------------------------------------------- surum 5: satis takibi (panel) */

.yapilacak-kart {
  border-color: rgba(0, 132, 251, 0.35);
  background: linear-gradient(180deg, rgba(0, 132, 251, 0.08), transparent 70%);
}

.yapilacak-kart .cizgi-liste .satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

.yapilacak-kart .ad {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.yapilacak-kart .ad small {
  color: var(--metin-3);
  font-size: 11.5px;
}

.sebepler {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.sebep {
  font-style: normal;
  font-size: 11px;
  font-weight: 650;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}

.kart-not {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px dashed var(--kenar);
  font-size: 11.5px;
  color: var(--metin-3);
  line-height: 1.45;
}

@media (max-width: 720px) {
  .yapilacak-kart .cizgi-liste .satir {
    grid-template-columns: minmax(0, 1fr);
  }

  .sebepler {
    justify-content: flex-start;
  }
}

.huni {
  display: grid;
  gap: 13px;
}

.huni-ust {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--metin-2);
  margin-bottom: 5px;
}

.huni-ust strong {
  color: #fff;
  font-size: 15px;
}

.huni-gecis {
  font-style: normal;
  font-size: 11.5px;
  color: var(--metin-3);
  margin-left: 5px;
}

.huni-cubuk {
  height: 11px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.huni-cubuk i {
  display: block;
  height: 100%;
  border-radius: 6px;
}

table.veri th.sayi,
table.veri td.sayi {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ----------------------------------------------- surum 5: gorusme notlari */

.not-giris {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.not-giris-alt {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.not-giris-alt label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--metin-3);
}

.not-giris-alt input[type='date'] {
  width: auto;
}

.not-giris-alt .dugme {
  margin-left: auto;
}

.not-listesi {
  display: grid;
  gap: 9px;
}

.not-satiri {
  border-left: 2px solid var(--mavi);
  background: rgba(255, 255, 255, 0.025);
  border-radius: 0 8px 8px 0;
  padding: 9px 11px;
}

.not-ust {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--metin-3);
  margin-bottom: 4px;
}

.not-ust strong {
  color: var(--metin-2);
  font-size: 12.5px;
}

.not-ust .satir-sil {
  margin-left: auto;
  padding: 2px 6px;
  font-size: 12px;
}

.not-metin {
  font-size: 13.5px;
  color: var(--metin-2);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* --------------------------------------------- surum 5: stok ve siparis */

.rozet-durum.sari {
  background: rgba(255, 196, 87, 0.15);
  color: #ffd479;
}

table.veri.dar th {
  width: 42%;
  color: var(--metin-3);
  font-weight: 500;
  white-space: nowrap;
}

table.veri.dar td {
  font-weight: 600;
}

.kalem-alt {
  display: block;
  font-size: 11.5px;
  color: var(--metin-3);
  font-weight: 400;
  margin-top: 2px;
}

td.sayi .kalem-alt {
  display: inline;
  margin-left: 4px;
}

.salt-okunur {
  padding: 10px 12px;
  border: 1px solid var(--kenar);
  border-radius: var(--r-kucuk);
  background: rgba(255, 255, 255, 0.03);
  color: var(--metin-2);
  font-weight: 600;
}

.uyari-serit.bilgi {
  background: rgba(0, 132, 251, 0.1);
  border-color: rgba(0, 132, 251, 0.3);
  color: #8fc0ff;
}

.urun-kart .stok-rozet {
  margin-top: 7px;
}

/* ------------------------------------- surum 5: musteriye acilan teklif linki */

.paylasim-alan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
}

@media (max-width: 820px) {
  .paylasim-alan {
    grid-template-columns: minmax(0, 1fr);
  }
}

.paylasim-sol label {
  font-size: 10.5px;
  color: var(--metin-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 5px;
}

.paylasim-link {
  display: flex;
  gap: 8px;
}

.paylasim-link input {
  flex: 1;
  min-width: 0;
  font-family: 'Consolas', 'SF Mono', monospace;
  font-size: 12.5px;
}

.paylasim-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.paylasim-durum {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--kenar);
  font-size: 12.5px;
  color: var(--metin-2);
  line-height: 1.6;
}

.paylasim-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
}

.paylasim-qr svg {
  display: block;
}

.paylasim-qr span {
  font-size: 10.5px;
  color: #5b6178;
}

.etiket-cip.imzali {
  background: rgba(33, 193, 122, 0.15);
  color: #55dda0;
  border-color: rgba(33, 193, 122, 0.3);
  margin-left: 5px;
}

.etiket-cip.goruldu {
  background: rgba(160, 170, 200, 0.13);
  color: #b7c0dd;
  border-color: rgba(160, 170, 200, 0.25);
  margin-left: 5px;
}

.etiket-cip.temas {
  background: rgba(255, 196, 87, 0.13);
  color: #ffd479;
  border-color: rgba(255, 196, 87, 0.28);
  margin-left: 5px;
}

/* Alis fiyati alani eklendiginde 7 sutun (yalnizca yonetici gorur) */
.kalem-sayilar.maliyetli {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

@media (max-width: 1400px) {
  .kalem-sayilar.maliyetli {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .kalem-sayilar.maliyetli {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}