/* ============================================================
   Gemi Yönetim Sistemi — 2026 Tasarım Dili
   Yumuşak gradyanlar, cam efekti (glass), yüksek kontrast,
   büyük tipografi, minimal ama net form/veri sunumu.
   ============================================================ */

:root {
  --renk-zemin: #f3f5f9;
  --renk-yuzey: #ffffff;
  --renk-yuzey-cam: rgba(255, 255, 255, 0.72);
  --renk-sinir: #e2e6ee;
  --renk-metin: #16181d;
  --renk-metin-soluk: #676e7d;
  --renk-birincil: #2f5dfc;
  --renk-birincil-soft: #eef1ff;
  --renk-birincil-koyu: #1f3fc9;
  --renk-basari: #16a34a;
  --renk-basari-soft: #e9f9ee;
  --renk-tehlike: #e0303f;
  --renk-tehlike-soft: #fdecec;
  --renk-uyari: #b8790a;
  --renk-uyari-soft: #fff6e5;
  --golge: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -8px rgba(16, 24, 40, .10);
  --golge-buyuk: 0 12px 32px -12px rgba(16, 24, 40, .22);
  --yaricap: 16px;
  --yaricap-kucuk: 10px;
  --gecis: 160ms cubic-bezier(.4, 0, .2, 1);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-tema="koyu"] {
  --renk-zemin: #0d1017;
  --renk-yuzey: #161a23;
  --renk-yuzey-cam: rgba(22, 26, 35, 0.72);
  --renk-sinir: #262c3a;
  --renk-metin: #eef1f7;
  --renk-metin-soluk: #9aa2b4;
  --renk-birincil-soft: #16234d;
  --renk-basari-soft: #103322;
  --renk-tehlike-soft: #3a1620;
  --renk-uyari-soft: #3a2c0f;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--renk-zemin);
  color: var(--renk-metin);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  transition: background var(--gecis), color var(--gecis);
}

body {
  background-image:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--renk-birincil) 8%, transparent), transparent),
    radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--renk-birincil) 6%, transparent), transparent);
  min-height: 100vh;
}

a { color: var(--renk-birincil); text-decoration: none; }

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

/* --------------------- Kenar Çubuğu --------------------- */
.kenar-cubugu {
  width: 248px;
  flex-shrink: 0;
  background: var(--renk-yuzey);
  border-right: 1px solid var(--renk-sinir);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.marka {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}
.marka .simge {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--renk-birincil), #7c9bff);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 18px;
  box-shadow: var(--golge);
}
.marka .baslik { font-weight: 700; font-size: 15px; line-height: 1.2; }
.marka .alt-baslik { font-size: 12px; color: var(--renk-metin-soluk); }

.menu { display: flex; flex-direction: column; gap: 4px; }
.menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--yaricap-kucuk);
  color: var(--renk-metin-soluk);
  font-size: 14px; font-weight: 500;
  transition: background var(--gecis), color var(--gecis);
}
.menu a:hover { background: var(--renk-birincil-soft); color: var(--renk-birincil); }
.menu a.aktif { background: var(--renk-birincil-soft); color: var(--renk-birincil); }

.kullanici-kutusu {
  margin-top: auto;
  border-top: 1px solid var(--renk-sinir);
  padding-top: 16px;
  font-size: 13px;
  display: flex; flex-direction: column; gap: 8px;
}
.kullanici-kutusu .ad { font-weight: 600; }
.kullanici-kutusu .rol { color: var(--renk-metin-soluk); font-size: 12px; }

/* --------------------- Ana İçerik --------------------- */
.icerik { flex: 1; padding: 28px 32px; max-width: 100%; overflow-x: hidden; }

.ust-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.ust-bar h1 { font-size: 22px; margin: 0; font-weight: 700; }
.ust-bar .aciklama { color: var(--renk-metin-soluk); font-size: 13px; margin-top: 4px; }

.buton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--yaricap-kucuk);
  border: 1px solid transparent;
  font-family: var(--font);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: transform var(--gecis), box-shadow var(--gecis), background var(--gecis);
}
.buton:active { transform: scale(0.97); }
.buton-birincil { background: var(--renk-birincil); color: white; box-shadow: var(--golge); }
.buton-birincil:hover { background: var(--renk-birincil-koyu); }
.buton-ikincil { background: var(--renk-yuzey); color: var(--renk-metin); border-color: var(--renk-sinir); }
.buton-ikincil:hover { border-color: var(--renk-birincil); color: var(--renk-birincil); }
.buton-tehlike { background: var(--renk-tehlike-soft); color: var(--renk-tehlike); }
.buton-tehlike:hover { background: var(--renk-tehlike); color: white; }
.buton-kucuk { padding: 6px 10px; font-size: 12.5px; }

/* --------------------- Kartlar --------------------- */
.kart {
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-sinir);
  border-radius: var(--yaricap);
  box-shadow: var(--golge);
  padding: 20px;
}

.istatistik-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.istatistik-kart {
  background: var(--renk-yuzey-cam);
  backdrop-filter: blur(10px);
  border: 1px solid var(--renk-sinir);
  border-radius: var(--yaricap);
  padding: 18px;
}
.istatistik-kart .deger { font-size: 26px; font-weight: 800; }
.istatistik-kart .etiket { color: var(--renk-metin-soluk); font-size: 13px; margin-top: 4px; }

/* --------------------- Arama / Filtre Çubuğu --------------------- */
.arac-cubugu {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 18px; flex-wrap: wrap;
}
.arama-kutusu {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 8px;
  background: var(--renk-yuzey);
  border: 1px solid var(--renk-sinir);
  border-radius: 999px;
  padding: 10px 16px;
}
.arama-kutusu input {
  border: none; outline: none; background: transparent;
  font-family: var(--font); font-size: 14px; width: 100%;
  color: var(--renk-metin);
}
.arama-kutusu svg { flex-shrink: 0; color: var(--renk-metin-soluk); }

/* --------------------- Tablo --------------------- */
.tablo-sarici { overflow-x: auto; border-radius: var(--yaricap); border: 1px solid var(--renk-sinir); }
table.veri-tablosu { width: 100%; border-collapse: collapse; background: var(--renk-yuzey); font-size: 13.5px; }
table.veri-tablosu th {
  text-align: left; padding: 12px 14px; font-weight: 600;
  color: var(--renk-metin-soluk); background: var(--renk-birincil-soft);
  border-bottom: 1px solid var(--renk-sinir); white-space: nowrap;
}
table.veri-tablosu td { padding: 12px 14px; border-bottom: 1px solid var(--renk-sinir); vertical-align: middle; }
table.veri-tablosu tbody tr { transition: background var(--gecis); }
table.veri-tablosu tbody tr:hover { background: var(--renk-birincil-soft); }
table.veri-tablosu tbody tr:last-child td { border-bottom: none; }

.rozet {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700;
}
.rozet-basari { background: var(--renk-basari-soft); color: var(--renk-basari); }
.rozet-tehlike { background: var(--renk-tehlike-soft); color: var(--renk-tehlike); }
.rozet-uyari { background: var(--renk-uyari-soft); color: var(--renk-uyari); }

.eylem-grubu { display: flex; gap: 6px; }

/* --------------------- Form --------------------- */
.form-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.form-alani { display: flex; flex-direction: column; gap: 6px; }
.form-alani label { font-size: 13px; font-weight: 600; color: var(--renk-metin-soluk); }
.form-alani input, .form-alani select, .form-alani textarea {
  border: 1px solid var(--renk-sinir);
  border-radius: var(--yaricap-kucuk);
  padding: 10px 12px;
  font-family: var(--font); font-size: 14px;
  background: var(--renk-zemin);
  color: var(--renk-metin);
  outline: none;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.form-alani input:focus, .form-alani select:focus, .form-alani textarea:focus {
  border-color: var(--renk-birincil);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--renk-birincil) 18%, transparent);
}
.form-hata { color: var(--renk-tehlike); font-size: 12.5px; }
.form-alani.hatali input, .form-alani.hatali select, .form-alani.hatali textarea { border-color: var(--renk-tehlike); }

/* --------------------- Uyarılar --------------------- */
.uyari-kutusu {
  padding: 12px 16px; border-radius: var(--yaricap-kucuk);
  font-size: 13.5px; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.uyari-basari { background: var(--renk-basari-soft); color: var(--renk-basari); }
.uyari-tehlike { background: var(--renk-tehlike-soft); color: var(--renk-tehlike); }

/* --------------------- Sayfalama --------------------- */
.sayfalama { display: flex; gap: 6px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.sayfalama a, .sayfalama span {
  padding: 8px 12px; border-radius: var(--yaricap-kucuk);
  border: 1px solid var(--renk-sinir); font-size: 13px; color: var(--renk-metin);
}
.sayfalama a:hover { border-color: var(--renk-birincil); color: var(--renk-birincil); }
.sayfalama .aktif { background: var(--renk-birincil); color: white; border-color: var(--renk-birincil); }

/* --------------------- Giriş Ekranı --------------------- */
.giris-sarici {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.giris-kart {
  width: 100%; max-width: 380px;
  background: var(--renk-yuzey-cam);
  backdrop-filter: blur(16px);
  border: 1px solid var(--renk-sinir);
  border-radius: 20px;
  box-shadow: var(--golge-buyuk);
  padding: 32px;
}
.giris-kart h1 { font-size: 20px; margin: 0 0 4px; }
.giris-kart p { color: var(--renk-metin-soluk); font-size: 13.5px; margin: 0 0 24px; }

.tema-degistir {
  border: 1px solid var(--renk-sinir); background: var(--renk-yuzey);
  border-radius: 999px; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}

@media (max-width: 860px) {
  .kenar-cubugu { position: fixed; left: -260px; z-index: 40; transition: left var(--gecis); box-shadow: var(--golge-buyuk); }
  .kenar-cubugu.acik { left: 0; }
  .icerik { padding: 20px 16px; }
  .mobil-menu-buton { display: flex !important; }
}
.mobil-menu-buton { display: none; }