@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Syne:wght@400;600;800&display=swap');

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

:root {
  --bg:             #f4f4f0;   /* Sayfa arka planı */
  --surface:        #eaeae6;   /* Kart, panel, tablo yüzeyi */
  --border:         #c4c4bc;   /* Kenarlık rengi */
  --accent:         #80b070;   /* Ana vurgu — yeşil (logo, aktif link, btn-add) */
  --accent2:        #1a50cc;   /* İkincil vurgu — mavi (linkler, focus, btn-edit) */
  --text:           #202020;   /* Ana metin */
  --text-secondary: #3a3a3a;   /* İkincil metin */
  --muted:          #686868;   /* Pasif metin (placeholder, label, th) */
  --danger:         #cc2020;   /* Hata, silme */
  --radius: 12px;              /* Genel köşe yuvarlama */
} /* :root — global CSS değişkenleri (design tokens) */

body {
  font-family: 'Syne', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
} /* body — temel sayfa stili */

/* ══════════════════════════════════════════════════════
   NAV — Yatay üst navigasyon çubuğu (nav.php)
   ══════════════════════════════════════════════════════ */
nav {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-wrap: wrap;
} /* nav — ana navigasyon şeridi */

nav .logo {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--accent);
  text-decoration: none;
  margin-right: 1.5rem;
  padding: 0.69rem 0;
} /* nav .logo — sol üstteki GUniGu logosu */

.nav-group {
  display: flex;
  align-items: center;
} /* .nav-group — nav içindeki bağlantı grubu kapsayıcısı */

.nav-group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.69rem 0.65rem 0.69rem 1rem;
  border-left: 1px solid var(--border);
} /* .nav-group-label — Parameters ▼, Import ▼ gibi accordion başlıkları */

nav a.navlink {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.69rem 0.65rem;
  transition: color 0.15s;
  white-space: nowrap;
} /* nav a.navlink — tekil nav bağlantısı */

nav a.navlink:hover { color: var(--text); font-style: italic; } /* nav bağlantısı — mouse üzerinde */
nav a.navlink.active { color: var(--accent); font-style: italic; } /* nav bağlantısı — aktif sayfa */

/* ══════════════════════════════════════════════════════
   LAYOUT — Genel sayfa düzeni
   ══════════════════════════════════════════════════════ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
} /* .container — standart sayfa içerik genişliği */

h1 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 1.8rem;
  color: var(--text);
} /* h1 — sayfa başlığı */

h1 span { color: var(--accent); } /* h1 içindeki vurgulu kelime */

/* ══════════════════════════════════════════════════════
   ALERTS — Bildirim kutuları
   ══════════════════════════════════════════════════════ */
.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  font-size: 0.88rem;
  margin-bottom: 1.5rem;
  font-family: 'JetBrains Mono', monospace;
} /* .alert — bildirim kutusu temel stili */

.alert-ok  { background: #1a2a0a; border: 1px solid #4a7a10; color: #c8f060; } /* başarı bildirimi */
.alert-err { background: #2a0a0a; border: 1px solid #7a1010; color: #ff9090; } /* hata bildirimi */

/* ══════════════════════════════════════════════════════
   FORM — Veri giriş bileşenleri
   ══════════════════════════════════════════════════════ */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
} /* .form-card — form kapsayıcı kart */

.form-card h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
} /* .form-card h2 — form bölüm başlığı */

.form-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 0.8rem;
} /* .form-row — yatay alan grubu */

.form-row:last-child { margin-bottom: 0; } /* son form-row'da alt boşluk kaldır */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 120px;
  margin-bottom: 0.5rem;
} /* .form-group — tek alan (label + input) kapsayıcısı */

.form-group label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
} /* .form-group label — alan etiketi */

.form-group label .req { color: var(--accent); margin-left: 2px; } /* zorunlu alan yıldızı (*) */

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg);
  border: 1px solid #ba3a42;
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
} /* .form-group input/select/textarea — metin kutusu, seçim listesi ve metin alanı */

.form-group input::placeholder,
.form-group textarea::placeholder { color: #6a6a7a; font-size: 0.82rem; } /* placeholder metni */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: var(--accent2); } /* focus durumunda kenarlık rengi */

.form-group select option { background: var(--surface); color: var(--text); } /* dropdown seçenekleri */

.form-group textarea { resize: vertical; min-height: 70px; } /* textarea — dikey yeniden boyutlanabilir */

/* ══════════════════════════════════════════════════════
   BUTTONS — Buton stilleri
   .btn-add    : Ekle / Güncelle (yeşil)
   .btn-edit   : Düzenle (mavi)
   .btn-del    : Sil (kırmızı)
   .btn-cancel : İptal (gri)
   .btn-filter : Filtre aç (beyaz)
   .btn-neutral: Programs, Web gibi yardımcı butonlar
   .btn-map    : Harita butonu
   ══════════════════════════════════════════════════════ */
.btn {
  padding: 0.5rem 1.0rem;
  border-radius: var(--radius);
  border: none;
  font-family: 'Syne', sans-serif;
  color: #202020;
  font-size: 0.68rem;
  font-weight: 650;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
} /* .btn — tüm butonların temel stili */

.btn:hover { filter: invert(0.15); } /* buton hover efekti — hafif renk negatifi */

.btn-add    { background: #20d020; } /* Ekle / Güncelle butonu — yeşil */
.btn-edit   { background: #8ac2f2; } /* Düzenle butonu — açık mavi */
.btn-del    { background: #db1717; } /* Sil butonu — kırmızı */
.btn-cancel { background: #e0e0e0; } /* İptal butonu — açık gri */
.btn-filter { background: #ffffff; } /* + Filter butonu — beyaz */
.btn-neutral{ background: #e0e0e0; } /* Programs butonu — nötr gri */
.btn-map    { background: #e0e0e0; } /* Map / Web butonu — nötr gri */

/* ══════════════════════════════════════════════════════
   TABLE — Veri tablosu bileşenleri
   ══════════════════════════════════════════════════════ */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
} /* .table-wrap — yatay kaydırmalı tablo kapsayıcısı */

table { width: max-content; min-width: 100%; border-collapse: collapse; } /* tablo temel stili */
table th { font-size:0.7rem; padding:0.5rem 0.6rem; } /* th — tablo başlığı genel boyut */
table td { font-size:0.75rem; padding:0.45rem 0.6rem; } /* td — tablo hücresi genel boyut */
thead tr { background: #d8d8d0; } /* thead satırı — açık gri arka plan */

tr.selected-row,
tr.m2-selected,
tbody tr.selected-row:hover,
tbody tr.m2-selected:hover { background: #b0f8f0 !important; } /* seçili satır fonu */
tbody tr:last-child td { border-bottom: none; } /* son satırda alt kenarlık kaldır */
tbody tr:hover { background: #b0b0f8; } /* satır üzerinde gezerken */

.lnk-btn {
  display:inline-block; font-size:0.7rem; font-weight:700; color:var(--accent2);
  background:#a0b0d0; border:1px solid #2a384a; border-radius:4px;
  padding:0 5px; text-decoration:none; vertical-align:middle;
} /* .lnk-btn — tablo içi URL ikonu butonu (↗) */

.lnk-btn:hover { background:#2a3a5a; } /* lnk-btn hover */

th {
  padding: 0.7rem 0.9rem;
  text-align: left;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #303030;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
} /* th — tablo başlık hücresi (sıralama için cursor:pointer) */

td {
  padding: 0.65rem 0.9rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
  color: #605086;
} /* td — tablo veri hücresi */

td.primary { color: var(--text); } /* td.primary — öne çıkan kolon (örn. isim) */
td.primary a { color: var(--text); text-decoration: none; }
td.primary a:hover { color: var(--accent2); }

.badge {
  display: inline-block;
  background: #88aaff;
  border: 1px solid #2a3a5a;
  color: #203040;
  border-radius: 4px;
  padding: 0.12rem 0.45rem;
  font-size: 0.76rem;
  font-family: 'JetBrains Mono', monospace;
} /* .badge — ülke kodu gibi küçük etiket */

.empty { padding: 2rem; text-align: center; color: var(--muted); font-size: 0.9rem; } /* boş tablo mesajı */
.id-cell { color: var(--muted); font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; } /* ID kolonu — pasif mono */

/* ══════════════════════════════════════════════════════
   SPLIT LAYOUT — İki sütunlu sayfa düzeni
   Sol: .side-panel (sabit 360px, detay/form)
   Sağ: .main-content (esnek, tablo)
   Kullanıldığı sayfalar: uni3.php, majors.php
   ══════════════════════════════════════════════════════ */
.split-layout {
  display: flex;
  height: calc(100vh - 60px);
  overflow: hidden;
} /* .split-layout — iki sütunlu tam ekran düzen kapsayıcısı */

.side-panel {
  width: 360px;
  min-width: 360px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
} /* .side-panel — sol panel (detay görüntüleme ve form) */

.side-panel-header {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  flex-shrink: 0;
} /* .side-panel-header — panel üst başlık çubuğu (başlık + butonlar) */

.side-panel-header h2 { font-size: 0.85rem; font-weight: 700; color: var(--text); margin: 0; } /* panel başlık metni */
.side-panel-body      { flex: 1; overflow-y: auto; padding: 0.8rem 1rem; } /* panel kaydırılabilir içerik alanı */

.btns-edit-row {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
} /* .btns-edit-row — edit mod buton satırı (title üstünde), altına çizgi */

.btn-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
} /* .btn-row — buton grubu (Update/Cancel/Del üst satırı) */

.btn-row .spacer { flex: 1; } /* .btn-row .spacer — Del butonunu sağa iter */

.read-action-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
} /* .read-action-bar — read mode altındaki buton şeridi (Edit + Web bitişik sol) + ayraç çizgi */


.side-panel-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--muted); font-size: 0.85rem;
  font-style: italic; text-align: center; padding: 2rem;
} /* .side-panel-empty — henüz satır seçilmemişken gösterilen placeholder */

.main-content {
  flex: 1; overflow: hidden; display: flex;
  flex-direction: column; padding: 0.75rem 1rem;
} /* .main-content — sağ taraf, tablo ve araç çubuğu kapsayıcısı */

.main-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem; gap: 0.75rem; flex-wrap: wrap; flex-shrink: 0;
} /* .main-toolbar — tablo üstü araç çubuğu (arama, butonlar, sayaç) */

.main-table-wrap {
  flex: 1; overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
} /* .main-table-wrap — sağ taraftaki tablo kaydırma kapsayıcısı */

/* ══════════════════════════════════════════════════════
   PANEL FIELD ROWS — View modda key:value satırları
   ══════════════════════════════════════════════════════ */
.field-row {
  display: flex; gap: 0.4rem; padding: 0.35rem 0;
  border-bottom: 1px solid var(--border); font-size: 0.82rem;
  align-items: center;
} /* .field-row — panel içi tek alan satırı (label + değer) */

.field-row:last-child { border-bottom: none; } /* son field-row'da alt kenarlık kaldır */

.field-label {
  width: 100px; min-width: 100px; color: var(--muted);
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
} /* .field-label — alan adı (sol kolon, sabit genişlik) */

.field-value {
  flex: 1; color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem; word-break: break-word;
} /* .field-value — alan değeri (sağ kolon, esnek) */

.field-value a       { color: var(--accent2); text-decoration: none; } /* field-value içi link */
.field-value a:hover { text-decoration: underline; } /* field-value içi link hover */
.empty-val { color: var(--muted); font-style: italic; } /* .empty-val — boş alan göstergesi (—) */

/* ══════════════════════════════════════════════════════
   PANEL EDIT FORM — Sol panel içindeki düzenleme formu
   .edit-form ile sarılmış form elemanları daha kompakt
   ══════════════════════════════════════════════════════ */
.edit-form .form-row   { margin-bottom: 0.5rem; } /* edit form satır boşluğu — standarttan küçük */
.edit-form .form-group { min-width: 80px; } /* edit form grup min genişliği — panel'e sığsın */

.edit-form .form-group label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
} /* edit form label — panel içinde daha küçük */

.edit-form .form-group input,
.edit-form .form-group select,
.edit-form .form-group textarea {
  font-size: 0.82rem; padding: 0.4rem 0.6rem;
} /* edit form input/select/textarea — panel içinde daha kompakt */

#sf-foundationyear { width: 80px; } /* Kuruluş yılı input — dar */
#sf-country-group  { max-width: 48px; } /* Country seçici — 2 karakter (kod) genişliği */ /* edit form textarea */

/* ══════════════════════════════════════════════════════
   REPORTS — Bar chart tarzı basit raporlar
   Kullanıldığı sayfa: rep_uni_countries.php
   ══════════════════════════════════════════════════════ */
.report-bars {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
} /* .report-bars — rapor satırları kapsayıcısı */

.report-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
} /* .report-row — tek ülke satırı (label + bar + sayı) */

.report-label {
  width: 140px;
  min-width: 140px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
} /* .report-label — ülke adı */

.report-bar-track {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 18px;
  overflow: hidden;
} /* .report-bar-track — bar arka plan kanalı */

.report-bar-fill {
  background: var(--accent);
  height: 100%;
  border-radius: var(--radius);
  transition: width 0.3s ease;
} /* .report-bar-fill — doluluk çubuğu */

.report-count {
  width: 40px;
  min-width: 40px;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  color: var(--muted);
} /* .report-count — sağdaki sayı */

.report-cell-center { text-align: center; } /* .report-cell-center — pivot tablo hücresini ortala */
.report-cell-total { font-weight: 700; color: var(--text); } /* .report-cell-total — pivot satır/kolon toplam hücresi */
.report-cell-grandtotal { font-weight: 700; color: var(--accent); } /* .report-cell-grandtotal — pivot genel toplam hücresi */

/* ══════════════════════════════════════════════════════
   IMPORT — Excel şablon indirme, upload ve önizleme
   Kullanıldığı sayfalar: import.php
   ══════════════════════════════════════════════════════ */
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
} /* .tpl-grid — şablon kartları için 4 kolonlu grid */

@media (max-width: 900px) {
  .tpl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .tpl-grid { grid-template-columns: 1fr; }
}

.tpl-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
} /* .tpl-card — tek şablon kartı (başlık + açıklama + buton) */

.tpl-card h3 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
} /* .tpl-card h3 — şablon başlığı */

.tpl-card p {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
  flex: 1;
} /* .tpl-card p — şablon açıklaması */

.dl-btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  gap: 0.4rem;
  background: #1a3a6a; border: 1px solid #2a5aaa; color: #a8c8ff;
  border-radius: var(--radius); padding: 0.5rem 0.8rem;
  font-size: 0.76rem; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background 0.15s;
  white-space: normal; line-height: 1.3; max-width: 180px;
} /* .dl-btn — şablon indirme butonu (2 satıra sarılabilir, dar) */
.dl-btn:hover { background: #2a5aaa; } /* .dl-btn hover */

.dl-btn.dl-btn-disabled {
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
  cursor: not-allowed; pointer-events: none; opacity: 0.6;
} /* .dl-btn-disabled — henüz hazır olmayan şablon (soluk, tıklanamaz) */

/* ══════════════════════════════════════════════════════
   NAV ACCORDION — Reports / Parameters açılır grupları
   ══════════════════════════════════════════════════════ */
.nav-accordion { cursor: pointer; user-select: none; } /* .nav-accordion — tıklanabilir grup başlığı */