/* ═══════════════════════════════════════════════════════════════
   DamlaMix ERP — Ana Stil Dosyası
   Bohem / krem renk paleti
   ═══════════════════════════════════════════════════════════════ */

:root {
  --zemin:          #F8F3E8;
  --zemin-2:        #F0EBE0;
  --kart:           #FFFFFF;
  --kenarlik:       #D4C4A0;
  --kenarlik-acik:  #E8DEC8;

  --terra:          #C4603A;
  --terra-koyu:     #A84E2E;
  --altin:          #D4A843;
  --koyu:           #2A1208;
  --koyu-2:         #3A1E0C;

  --yesil:          #5A8A30;
  --mavi:           #1A5A90;
  --mor:            #6A30A0;
  --sari:           #8A6010;
  --kirmizi:        #C02020;
  --cok-acil:       #8B0000;

  --metin:          #2A1208;
  --metin-2:        #5A4030;
  --metin-3:        #8A6040;
  --metin-4:        #A08060;

  --r-kucuk: 7px;
  --r-orta:  10px;
  --r-buyuk: 14px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

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

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

/* ── ÜST ÇUBUK ────────────────────────────────────────────────── */
.ust-cubuk {
  background: var(--koyu);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.uc-logo { display: flex; align-items: center; gap: 10px; }
.uc-logo-kare {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--terra), var(--altin));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 15px;
}
.uc-ad   { font-size: 14px; font-weight: 600; color: #F5EDD8; }
.uc-alt  { font-size: 10px; color: rgba(212,168,67,.75); }
.uc-sag  { display: flex; align-items: center; gap: 12px; }
.uc-kisi { font-size: 12px; color: #F5EDD8; text-align: right; }
.uc-rol  { font-size: 10px; color: rgba(245,237,216,.55); }
.uc-cikis {
  background: none;
  border: 1px solid rgba(212,168,67,.4);
  border-radius: var(--r-kucuk);
  padding: 6px 11px;
  font-size: 12px;
  color: var(--altin);
  cursor: pointer;
  font-family: var(--font);
}
.uc-cikis:hover { background: rgba(212,168,67,.12); }

/* ── DÜĞMELER ─────────────────────────────────────────────────── */
.dugme {
  padding: 10px 16px;
  border: none;
  border-radius: var(--r-orta);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s, transform .1s;
}
.dugme:active { transform: scale(.98); }
.dugme:disabled { opacity: .5; cursor: not-allowed; }

.dugme-terra { background: var(--terra); color: #fff; }
.dugme-terra:hover:not(:disabled) { background: var(--terra-koyu); }
.dugme-yesil { background: var(--yesil); color: #fff; }
.dugme-yesil:hover:not(:disabled) { background: #46701F; }
.dugme-mavi  { background: var(--mavi); color: #fff; }
.dugme-mavi:hover:not(:disabled) { background: #124470; }
.dugme-altin { background: var(--altin); color: #fff; }
.dugme-altin:hover:not(:disabled) { background: #BC9030; }
.dugme-bos   { background: var(--kart); color: var(--metin-3);
               border: 1px solid var(--kenarlik); }
.dugme-bos:hover:not(:disabled) {
  background: #FFF0E8; color: var(--terra); border-color: var(--terra);
}
.dugme-tam    { width: 100%; }
.dugme-kucuk  { padding: 6px 11px; font-size: 12px; }

/* ── KARTLAR ──────────────────────────────────────────────────── */
.kart {
  background: var(--kart);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-buyuk);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.kart-baslik {
  font-size: 13px;
  font-weight: 600;
  color: var(--metin);
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--kenarlik-acik);
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ── FORM ─────────────────────────────────────────────────────── */
.alan { margin-bottom: 12px; }
.etiket {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--metin-3);
  margin-bottom: 5px;
}
.etiket .zorunlu { color: var(--terra); }

input[type=text], input[type=number], input[type=password],
input[type=tel], input[type=email], input[type=date],
input[type=time], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-kucuk);
  font-size: 14px;
  font-family: var(--font);
  background: #FDFAF5;
  color: var(--metin);
  outline: none;
  transition: border-color .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--terra);
  background: #fff;
}
textarea { resize: vertical; min-height: 64px; line-height: 1.55; }

.izgara-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.izgara-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.izgara-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* ── ROZETLER ─────────────────────────────────────────────────── */
.rozet {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.rozet-kdv    { background: #FFF0E8; color: var(--terra); border: 1px solid var(--terra); }
.rozet-metraj { background: #FFF0E8; color: var(--terra); }
.rozet-stok   { background: #E8F4FF; color: var(--mavi); }
.rozet-baski  { background: #F4E8FF; color: var(--mor); }
.rozet-adet   { background: #F0F8E8; color: var(--yesil); }
.rozet-hizmet { background: #FFF8E8; color: var(--sari); }

.termin-cok_acil   { background: #FFD0D0; color: var(--cok-acil); border: 1px solid var(--cok-acil); }
.termin-bugun      { background: #FFE8E8; color: var(--kirmizi);  border: 1px solid var(--kirmizi); }
.termin-acil       { background: #FFF0E8; color: var(--terra);    border: 1px solid var(--terra); }
.termin-suresi_var { background: #FFFBE8; color: #C4920A;         border: 1px solid #C4920A; }
.termin-normal     { background: #EBF8EE; color: var(--yesil);    border: 1px solid var(--yesil); }

.durum-beklemede   { background: var(--zemin-2); color: var(--metin-3); }
.durum-tasarim     { background: #F4E8FF; color: var(--mor); }
.durum-onay_bekler { background: #FFF8E8; color: var(--sari); }
.durum-uretimde    { background: #FFF0E8; color: var(--terra); }
.durum-kalite      { background: #E8F4FF; color: var(--mavi); }
.durum-hazir       { background: #EBF8EE; color: var(--yesil); }
.durum-teslim      { background: #E8F0E8; color: #46701F; }
.durum-iptal       { background: #F0F0F0; color: #808080; }

/* ── TABLO ────────────────────────────────────────────────────── */
.tablo-sarmal { overflow-x: auto; border-radius: var(--r-orta); }
.tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.tablo thead th {
  background: var(--koyu);
  color: rgba(245,237,216,.85);
  font-size: 11px;
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
.tablo tbody td {
  padding: 10px;
  border-bottom: 1px solid var(--kenarlik-acik);
  vertical-align: middle;
}
.tablo tbody tr:nth-child(even) { background: var(--zemin); }
.tablo tbody tr:hover { background: #FFF8F4; }
.sag  { text-align: right; }
.orta { text-align: center; }

/* ── UYARI KUTULARI ───────────────────────────────────────────── */
.bilgi-kutu, .uyari-kutu, .hata-kutu, .basari-kutu {
  border-radius: var(--r-kucuk);
  padding: 10px 13px;
  font-size: 12px;
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  line-height: 1.6;
}
.bilgi-kutu  { background: #EBF8EE; border: 1px solid #90C890;     color: #2A6020; }
.uyari-kutu  { background: #FFF8E8; border: 1px solid var(--altin); color: var(--sari); }
.hata-kutu   { background: #FFE8E8; border: 1px solid var(--terra); color: #8A2810; }
.basari-kutu { background: #EBF8EE; border: 1px solid var(--yesil); color: #2A6020; }

/* ── MODÜL IZGARASI ───────────────────────────────────────────── */
.modul-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.modul-kare {
  background: var(--kart);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-buyuk);
  padding: 18px 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, transform .1s, background .15s;
  position: relative;
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.modul-kare:hover {
  border-color: var(--terra);
  background: #FFF8F4;
  transform: translateY(-2px);
}
.modul-ikon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.modul-ad  { font-size: 13px; font-weight: 600; color: var(--metin); }
.modul-alt { font-size: 11px; color: var(--metin-4); }
.modul-nokta {
  position: absolute; top: 10px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--terra);
}

/* ── SAYFA DÜZENİ ─────────────────────────────────────────────── */
.sayfa     { max-width: 1200px; margin: 0 auto; padding: 16px; }
.sayfa-dar { max-width: 680px;  margin: 0 auto; padding: 16px; }

.bolum-baslik {
  font-size: 12px;
  font-weight: 600;
  color: var(--metin-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bolum-baslik::after {
  content: ''; flex: 1; height: 1px; background: var(--kenarlik-acik);
}

/* ── ÖZET KARTLARI ────────────────────────────────────────────── */
.ozet-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ozet-kart {
  background: var(--kart);
  border: 1px solid var(--kenarlik);
  border-radius: var(--r-orta);
  padding: 12px 14px;
}
.ozet-deger  { font-size: 24px; font-weight: 600; color: var(--metin); }
.ozet-etiket { font-size: 11px; color: var(--metin-3); margin-top: 2px; }
.ozet-alt    { font-size: 10px; margin-top: 4px; }

/* ── SEKMELER ─────────────────────────────────────────────────── */
.sekmeler {
  display: flex;
  background: var(--kart);
  border-bottom: 1px solid var(--kenarlik);
  overflow-x: auto;
}
.sekme {
  flex: 1;
  min-width: 110px;
  padding: 12px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  color: var(--metin-3);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.sekme.etkin {
  color: var(--terra);
  border-bottom-color: var(--terra);
  background: #FFF8F5;
}

/* ── YÜKLENİYOR ───────────────────────────────────────────────── */
.yukleniyor {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(196,96,58,.25);
  border-top-color: var(--terra);
  border-radius: 50%;
  animation: don .7s linear infinite;
}
@keyframes don { to { transform: rotate(360deg); } }

.bos-mesaj {
  text-align: center;
  padding: 36px 20px;
  color: var(--metin-4);
  font-size: 13px;
}

.gizli { display: none !important; }

/* ── MOBİL ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .sayfa { padding: 12px; }
  .izgara-2, .izgara-3, .izgara-4 { grid-template-columns: 1fr; }
  .modul-izgara { grid-template-columns: 1fr 1fr; }
  .tablo { font-size: 12px; }
  .tablo thead th, .tablo tbody td { padding: 7px 6px; }
}

/* ── YAZDIRMA ─────────────────────────────────────────────────── */
@media print {
  .ust-cubuk, .dugme, .yazdirma-gizle, .sekmeler { display: none !important; }
  body { background: #fff; }
  .kart { border: 1px solid #ccc; page-break-inside: avoid; }
}