/* ÜRETİLMİŞ DOSYA — elle düzenlenmez.
   Kaynak: site/stil/kimlik.css + tema/panel.css
   Üreten: betikler/tema-yap.py
   Elle düzenlenirse bir sonraki üretimde kaybolur; değişiklik kaynak
   dosyalara yazılır. */

/* Tasarım kimliği: cihaz-yonetim
   Karakter: yoğun - Bilgi yoğun, sıkı yerleşim, panel hissi
   Tipografi: teknik · Boşluk: beşli · Köşe: karışık · Derinlik: düz

   Bu dosya üretilmiştir. Değerleri elle değiştirmek yerine kimliği
   yeniden üretmek, tutarlılığı korur. */

:root {
  /* Renk */
  --ana: #7fae29;
  --ana-koyu: #5b7c1d;
  --ana-acik: #f1f4eb;
  --ikincil: #374ab3;
  --vurgu: #da1b67;
  --ana-ustu: #14161a;
  --vurgu-ustu: #ffffff;

  --zemin: #fbfcfb;
  --yuzey: #ffffff;
  --metin: #202419;
  --soluk: #6e7660;
  --cizgi: #e2e4dd;

  /* Tipografi */
  --yazi-baslik: "Segoe UI Semibold", "Roboto", system-ui, sans-serif;
  --yazi-govde: "Consolas", "SF Mono", "Menlo", monospace;
  --yazi-1: 1.0rem;
  --yazi-2: 1.18rem;
  --yazi-3: 1.392rem;
  --yazi-4: 1.643rem;
  --yazi-5: 1.939rem;
  --yazi-6: 2.288rem;

  /* Boşluk */
  --aralik-1: 5px;
  --aralik-2: 10px;
  --aralik-3: 15px;
  --aralik-4: 20px;
  --aralik-5: 30px;
  --aralik-6: 45px;
  --aralik-7: 60px;
  --aralik-8: 90px;
  --aralik-9: 120px;

  /* Köşe */
  --kose-kucuk: 2px;
  --kose-orta: 12px;
  --kose-buyuk: 2px;
  --kose-tam: 999px;

  /* Derinlik */
  --golge-kucuk: none;
  --golge-orta: none;
  --golge-buyuk: none;
  --kenar: 1px solid var(--cizgi);
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #181a14;
    --yuzey: #25281f;
    --metin: #f0f1ef;
    --soluk: #aaafa1;
    --cizgi: #3f4337;
  }
}

:root[data-tema="koyu"] {
  --zemin: #181a14;
  --yuzey: #25281f;
  --metin: #f0f1ef;
  --soluk: #aaafa1;
  --cizgi: #3f4337;
}

:root[data-tema="acik"] {
  --zemin: #fbfcfb;
  --yuzey: #ffffff;
  --metin: #202419;
  --soluk: #6e7660;
  --cizgi: #e2e4dd;
}


/* Etesio Cihaz Yönetim — panel teması
   ================================================================
   Bu dosya tabanın kendi CSS'inden SONRA yüklenir (tema paketi kancası),
   o yüzden aynı seçicileri yeniden tanımlamak yeterli; !important
   yalnızca tabanın satır içi biçimlerini ezmek için kullanılır.

   Renk ve ölçü değerleri BURADA YAZILMAZ. Hepsi kimlik.css'ten gelen
   değişkenlerdir; tema betikle üretilirken kimlik dosyası bu dosyanın
   başına eklenir (betikler/tema-yap.py). Böylece tanıtım sayfası ile
   panel aynı kimliği taşır ve biri değişince öteki geride kalmaz.

   Kimlik: karakter "yoğun" (bilgi yoğun, sıkı yerleşim, panel hissi),
   tipografi "teknik", derinlik "düz", köşe "karışık".
   ================================================================ */

/* --- Gövde --------------------------------------------------------- */

body,
body.fullscreen {
  background: var(--zemin) !important;
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: var(--yazi-1);
}

/* --- Üst başlık ---------------------------------------------------- */
/* Tabanın kendi marka görselini ve degradesini tamamen kaldırıyoruz:
   arka plan resmi (logo.png) ürünün nereden geldiğini ele veriyordu ve
   kabartmalı başlık yazısı tabanın en tanınır işaretiydi. */

#masthead {
  background-image: none !important;
  background-color: var(--ana-ustu) !important;
  border-bottom: 2px solid var(--ana);
  box-shadow: none !important;
  height: auto !important;
  min-height: 56px;
  padding: 0 var(--aralik-4);
  display: flex;
  align-items: center;
}

/* Marka imi: dört kare, biri ayrı renkte — tanıtım sayfasındakinin
   aynısı. Gölgeyle çizilir; sayfanın hiçbir yerinde geçişli renk yok. */
#masthead .masthead-title {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px;
  flex: 0 0 7px;
  margin: 0 var(--aralik-4) 11px 0;
  background: var(--ana) !important;
  background-image: none !important;
  box-shadow:
    11px 0 0 var(--ana),
    0 11px 0 var(--ana),
    11px 11px 0 var(--ikincil);
  border-radius: 0;
}

#masthead .title,
#masthead .title2 {
  color: var(--vurgu-ustu) !important;
  text-shadow: none !important;
  font-family: var(--yazi-baslik);
  letter-spacing: -0.01em;
  text-transform: none;
}

#masthead .title {
  font-size: var(--yazi-3) !important;
  font-weight: 600;
  line-height: 1.2;
}

#masthead .title2 {
  font-size: 0.8rem !important;
  color: var(--soluk) !important;
  font-weight: 400;
}

/* --- Üst gezinme --------------------------------------------------- */
/* Etkin sekme, altındaki 2 piksellik çizgiyle işaretlenir. Tabanın
   dolgulu sekme kutusu kaldırıldı: düz derinlik kimliğin bir parçası. */

/* DİKKAT — GÖRÜNEN gezinme ne `#topbar` ne de `#page_leftbar`.
   İkisi de denendi ve hiçbir şey değişmedi; `#page_leftbar` içindeki
   Bootstrap bağlantıları 0 boyutunda, yani hiç çizilmiyor.
   Ekrandaki menü bir TABLO: `#MainMenuSpan` içinde `td.topbar_td`.
   Koordinattan eleman okunarak bulundu (elementFromPoint), tahminle değil.

   Etkin sekme `fullselect` sınıfını alıyor ve tabanın koyu mavisini
   (#003366) taşıyor; burada düz zemine ve alt çizgiye çevriliyor. */

#MainMenuSpan {
  background: var(--yuzey) !important;
  border-bottom: 1px solid var(--cizgi);
  width: 100%;
}

#MainMenuSpan td.topbar_td,
#MainMenuSpan td.topbar_td_end {
  background: var(--yuzey) !important;
  color: var(--soluk) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-family: var(--yazi-baslik);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  padding: var(--aralik-2) var(--aralik-4) !important;
  cursor: pointer;
}

#MainMenuSpan td.topbar_td:hover {
  background: var(--ana-acik) !important;
  color: var(--metin) !important;
}

#MainMenuSpan td.topbar_td.fullselect,
#MainMenuSpan td.fullselect {
  background: var(--yuzey) !important;
  color: var(--metin) !important;
  border-bottom-color: var(--ana) !important;
  font-weight: 600;
}


#page_leftbar,
#topbar {
  background: var(--yuzey) !important;
  border-bottom: 1px solid var(--cizgi);
  height: auto !important;
  padding: 0 var(--aralik-3);
}

#page_leftbar .nav-link,
#page_leftbar a.nav-link,
#topbar .nav-link,
#topbar a.nav-link {
  color: var(--soluk) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-family: var(--yazi-baslik);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  padding: var(--aralik-2) var(--aralik-4) !important;
}

#page_leftbar .nav-link:hover,
#topbar .nav-link:hover {
  color: var(--metin) !important;
  background: var(--ana-acik) !important;
}

#page_leftbar .nav-link.active,
#page_leftbar .nav-link.lbbuttonsel2,
#topbar .nav-link.active,
#topbar .nav-link.lbbuttonsel2 {
  color: var(--metin) !important;
  background: transparent !important;
  border-bottom-color: var(--ana) !important;
  font-weight: 600;
}

/* Taban etkin sekmeye `text-white` veriyor; bizim zeminimiz açık olduğu
   için yazı görünmez hâle geliyordu. Renk burada geri alınır. */
#page_leftbar .nav-link.text-white,
#page_leftbar .nav-link.text-white.active {
  color: var(--metin) !important;
}

/* --- İçerik alanı --------------------------------------------------- */

#column_l,
#page_content,
#p1 {
  background: transparent;
  color: var(--metin);
}

#column_l h1, #column_l h2, #column_l h3,
#p1 h1, #p1 h2, #p1 h3 {
  font-family: var(--yazi-baslik);
  color: var(--metin);
  letter-spacing: -0.01em;
}

a { color: var(--ana-koyu); }
a:hover { color: var(--ana); }

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

.btn,
input[type=button],
input[type=submit] {
  border-radius: var(--kose-orta) !important;
  font-family: var(--yazi-baslik);
  box-shadow: none !important;
  border: 1px solid transparent;
}

.btn-primary,
input[type=submit] {
  background: var(--ana) !important;
  border-color: var(--ana) !important;
  color: var(--ana-ustu) !important;
}

.btn-primary:hover,
input[type=submit]:hover {
  background: var(--ana-koyu) !important;
  border-color: var(--ana-koyu) !important;
  color: var(--vurgu-ustu) !important;
}

.btn-secondary {
  background: transparent !important;
  border: 1px solid var(--cizgi) !important;
  color: var(--metin) !important;
  border-radius: var(--kose-kucuk) !important;
}

.btn-danger { background: var(--vurgu) !important; border-color: var(--vurgu) !important; }

/* --- Girdiler ------------------------------------------------------- */

input[type=text], input[type=password], input[type=email],
input[type=number], input[type=search], select, textarea,
.form-control, .form-select {
  background: var(--yuzey) !important;
  color: var(--metin) !important;
  border: 1px solid var(--cizgi) !important;
  border-radius: var(--kose-kucuk) !important;
  box-shadow: none !important;
  font-family: var(--yazi-govde);
}

input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
  border-color: var(--ana) !important;
  outline: 2px solid var(--ana-acik);
  outline-offset: 0;
}

/* --- Tablolar ve listeler ------------------------------------------- */
/* Karakter "yoğun": satırlar sıkı, ayraçlar ince, gölge yok. */

table.table, .table {
  --bs-table-bg: transparent;
  color: var(--metin);
  border-color: var(--cizgi);
}

.table > :not(caption) > * > * {
  padding: var(--aralik-2) var(--aralik-3);
  border-bottom-color: var(--cizgi);
  box-shadow: none;
}

.table thead th {
  color: var(--soluk);
  font-family: var(--yazi-baslik);
  font-weight: 500;
  font-size: 0.8rem;
  border-bottom: 1px solid var(--cizgi);
}

/* --- Kartlar ve kutular --------------------------------------------- */

.card, .modal-content, .dropdown-menu, .list-group-item {
  background: var(--yuzey) !important;
  color: var(--metin) !important;
  border: 1px solid var(--cizgi) !important;
  border-radius: var(--kose-orta) !important;
  box-shadow: var(--golge-orta) !important;
}

/* --- Alt bilgi ------------------------------------------------------ */

#footer {
  background: var(--yuzey) !important;
  border-top: 1px solid var(--cizgi);
  color: var(--soluk);
  height: auto !important;
  padding: var(--aralik-3) var(--aralik-4);
}

#footer a { color: var(--soluk); }
#footer a:hover { color: var(--metin); }

/* --- Erişilebilirlik ------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--ana);
  outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}