/* ==========================================================================
   İSG Web Yönetim Paneli — Kurumsal Mavi & Ferah Beyaz Tema
   MEB standartlarına uygun, göz yormayan, mor renk içermeyen modern tasarım sistemi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tasarım Değişkenleri (Design Tokens)
   Panel genelinde renk, gölge, boşluk ve tipografi tutarlılığını sağlar.
   -------------------------------------------------------------------------- */
:root {
  /* Ana kurumsal renk paleti (Okyanus / Kurumsal Mavi & Arduvaz) */
  --vurgu: #0284c7;            /* Birincil eylem ve aktif renk (Sky 600) */
  --vurgu-koyu: #0369a1;       /* Hover ve vurgu durumları (Sky 700) */
  --vurgu-derin: #075985;      /* En koyu mavi aksan (Sky 800) */
  --vurgu-acik: #e0f2fe;       /* Aktif arka planlar ve yumuşak rozetler (Sky 100) */
  --vurgu-cok-acik: #f0f9ff;  /* Çok açık ton hover zeminleri (Sky 50) */

  /* Yüzey ve arka plan renkleri (Ferah & Göz Yormayan Açık Tonlar) */
  --zemin: #f8fafc;            /* Sayfa ana gövde zemini (Slate 50) */
  --kart: #ffffff;             /* Kart ve yüzey zemini (Saf Beyaz) */
  --kenar-zemin: #ffffff;      /* Açık ve ferah sol menü zemini (Saf Beyaz) */

  /* Sınır ve ayrım çizgileri */
  --cizgi: #e2e8f0;            /* Standart zarif kenarlık (Slate 200) */
  --cizgi-koyu: #cbd5e1;       /* Belirgin kenarlık ve ayraçlar (Slate 300) */
  --cizgi-acik: #f1f5f9;       /* Çok hafif tablo satır ayrımı (Slate 100) */

  /* Tipografi renk hiyerarşisi */
  --metin: #0f172a;            /* Ana metin ve başlıklar (Slate 900) */
  --metin-orta: #334155;       /* Gövde metinleri ve etiketler (Slate 700) */
  --metin-soluk: #64748b;      /* Açıklama ve ikincil metinler (Slate 500) */
  --metin-sessiz: #94a3b8;     /* İpuçları ve pasif ikonlar (Slate 400) */

  /* Durum ve bildirim renkleri (Mor içermez) */
  --basari: #059669;           /* Onay, tamamlandı ve aktif durumlar (Emerald 600) */
  --basari-acik: #ecfdf5;      /* Başarı yumuşak arka planı (Emerald 50) */
  --basari-sınır: #a7f3d0;     /* Başarı rozet kenarlığı (Emerald 200) */

  --bilgi: #0284c7;            /* Bilgilendirme ve süreç durumları (Sky 600) */
  --bilgi-acik: #f0f9ff;       /* Bilgi yumuşak arka planı (Sky 50) */
  --bilgi-sınır: #bae6fd;      /* Bilgi rozet kenarlığı (Sky 200) */

  --uyari: #d97706;            /* Bekleyen ve dikkat durumları (Amber 600) */
  --uyari-acik: #fffbeb;       /* Uyarı yumuşak arka planı (Amber 50) */
  --uyari-sınır: #fde68a;      /* Uyarı rozet kenarlığı (Amber 200) */

  --tehlike: #dc2626;          /* Hata, silme ve yüksek risk durumları (Red 600) */
  --tehlike-acik: #fef2f2;     /* Tehlike yumuşak arka planı (Red 50) */
  --tehlike-sınır: #fecaca;    /* Tehlike rozet kenarlığı (Red 200) */

  /* Yuvarlatılmış köşe değerleri */
  --yaricap-sm: 6px;           /* Küçük butonlar ve etiketler */
  --yaricap: 10px;             /* Standart butonlar, inputlar ve kutular */
  --yaricap-lg: 14px;          /* Kartlar ve modal pencereleri */
  --yaricap-tam: 9999px;       /* Rozetler ve yuvarlak elemanlar */

  /* Katmanlı, yumuşak gölgeler (Box Shadows) */
  --golge-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --golge: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
  --golge-kart: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --golge-derin: 0 10px 15px -3px rgba(15, 23, 42, 0.06), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --golge-havada: 0 20px 25px -5px rgba(15, 23, 42, 0.07), 0 8px 10px -6px rgba(15, 23, 42, 0.03);
}

/* --------------------------------------------------------------------------
   Genel Sıfırlama ve Temel Font Ayarları
   Tüm elemanların kutu modelini eşitler, okunaklı tipografi tabanı oluşturur.
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--metin);
  background-color: var(--zemin);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--vurgu);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--vurgu-koyu);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Ana Düzen / Kabuk Mimarisi (Layout Shell)
   Açık renkli sol menü ve geniş esnek içerik alanını yan yana konumlandırır.
   -------------------------------------------------------------------------- */
.kabuk {
  display: flex;
  min-height: 100vh;
}

/* Açık & Ferah Sol Menü (Sidebar) */
.kenar {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--kenar-zemin);
  border-right: 1px solid var(--cizgi);
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
  box-shadow: var(--golge-sm);
}

/* Marka ve Logo Alanı */
.marka {
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--cizgi);
  background: #ffffff;
}

.marka-logo-kutu {
  width: 36px;
  height: 36px;
  border-radius: var(--yaricap-sm);
  background: var(--vurgu-cok-acik);
  border: 1px solid var(--vurgu-acik);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vurgu);
  flex-shrink: 0;
}

.marka-yazi-alani {
  display: flex;
  flex-direction: column;
}

.marka-baslik {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--metin);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.marka-alt {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--vurgu);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Menü Bağlantıları Listesi */
.menu {
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  gap: 4px;
  flex: 1;
  overflow-y: auto;
}

.menu-kategori {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--metin-sessiz);
  padding: 10px 12px 4px;
}

.menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--metin-orta);
  padding: 10px 14px;
  border-radius: var(--yaricap-sm);
  font-size: 0.92rem;
  font-weight: 500;
  transition: all 0.15s ease-in-out;
  text-decoration: none;
  position: relative;
}

.menu a .menu-ikon {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
  stroke: var(--metin-soluk);
  flex-shrink: 0;
  transition: stroke 0.15s ease-in-out;
}

.menu a:hover {
  background: var(--zemin);
  color: var(--metin);
}

.menu a:hover .menu-ikon {
  stroke: var(--vurgu);
}

/* Aktif Menü Öğesi */
.menu a.aktif {
  background: var(--vurgu-acik);
  color: var(--vurgu-derin);
  font-weight: 700;
}

.menu a.aktif .menu-ikon {
  stroke: var(--vurgu);
}

.menu a.aktif::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 4px;
  background: var(--vurgu);
  border-radius: 0 4px 4px 0;
}

/* Sol Menü Altı — Kullanıcı Oturum Kutusu */
.oturum {
  padding: 16px 18px;
  border-top: 1px solid var(--cizgi);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.oturum-profil {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.oturum-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--yaricap-tam);
  background: var(--vurgu-acik);
  color: var(--vurgu-derin);
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--cizgi);
  flex-shrink: 0;
}

.oturum-bilgi {
  min-width: 0;
  flex: 1;
}

.oturum-ad {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--metin);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.cikis-form {
  margin: 0;
}

.cikis-dugme {
  background: transparent;
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-sm);
  color: var(--metin-soluk);
  padding: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.cikis-dugme:hover {
  background: var(--tehlike-acik);
  border-color: var(--tehlike-sınır);
  color: var(--tehlike);
}

/* --------------------------------------------------------------------------
   İçerik Alanı ve Sayfa Üst Barı (Main Content & Header)
   -------------------------------------------------------------------------- */
.icerik {
  flex: 1;
  padding: 30px 40px 60px;
  width: 100%;
  min-width: 0;
}

.sayfa-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.sayfa-baslik-sol {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sayfa-baslik h1 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--metin);
  letter-spacing: -0.02em;
  margin: 0;
}

.sayfa-yol-ekmek {
  font-size: 0.82rem;
  color: var(--metin-soluk);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sayfa-yol-ekmek span.ayrac {
  color: var(--metin-sessiz);
}

.sayfa-araclar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Paneller, Kartlar ve Izgara Düzeni (Panels & Cards)
   -------------------------------------------------------------------------- */
.panel-bolum {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-lg);
  box-shadow: var(--golge-kart);
  padding: 24px 26px;
  margin-bottom: 24px;
}

.panel-bolum-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cizgi);
}

.panel-bolum h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--metin);
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.panel-bolum h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--metin-orta);
  margin: 22px 0 12px;
}

/* KPI Metrik Kartları Izgarası */
.kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

/* Tekil KPI Metrik Kartı */
.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-lg);
  box-shadow: var(--golge-kart);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.kart:hover {
  transform: translateY(-2px);
  box-shadow: var(--golge-derin);
  border-color: var(--cizgi-koyu);
}

.kart-ikon-kapsul {
  width: 46px;
  height: 46px;
  border-radius: var(--yaricap);
  background: var(--vurgu-cok-acik);
  border: 1px solid var(--vurgu-acik);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vurgu);
  flex-shrink: 0;
}

.kart-ikon-kapsul svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

.kart-metin-alani {
  display: flex;
  flex-direction: column;
}

.kart-sayi {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--metin);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.kart-sayi-kucuk {
  font-size: 1.35rem;
}

.kart-etiket {
  color: var(--metin-soluk);
  font-size: 0.84rem;
  font-weight: 600;
  margin-top: 4px;
}

/* Senkron / Özet 3'lü Durum Kutusu */
.ozet-uc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.ozet-uc-kutu {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  padding: 16px 20px;
}

/* --------------------------------------------------------------------------
   Modern Tablolar (Tables)
   Kart içine gömülü, şık sütun başlıkları ve yumuşak satır geçişleri.
   -------------------------------------------------------------------------- */
.tablo-kapsayici {
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  overflow: hidden;
  background: #ffffff;
}

.tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  text-align: left;
}

.tablo thead {
  background: #f8fafc;
  border-bottom: 1px solid var(--cizgi);
}

.tablo th {
  color: var(--metin-soluk);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  border: none;
}

.tablo td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--cizgi-acik);
  color: var(--metin-orta);
  vertical-align: middle;
}

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

.tablo tbody tr {
  transition: background-color 0.15s ease;
}

.tablo tbody tr:hover {
  background-color: var(--vurgu-cok-acik);
}

.tablo .sag {
  text-align: right;
}

.islem-hucre {
  white-space: nowrap;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.86em;
  color: var(--metin-orta);
}

.alan-anahtar {
  font-weight: 600;
  white-space: nowrap;
  width: 32%;
  color: var(--metin-soluk);
}

/* --------------------------------------------------------------------------
   Düğmeler (Buttons)
   Modern, dolgulu ve yumuşak micro-interaction özellikli düğmeler.
   -------------------------------------------------------------------------- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--cizgi-koyu);
  background: var(--kart);
  color: var(--metin-orta);
  padding: 8px 16px;
  border-radius: var(--yaricap-sm);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  line-height: 1.4;
  text-decoration: none;
  transition: all 0.15s ease;
  box-shadow: var(--golge-sm);
}

.dugme svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

.dugme:hover {
  background: var(--zemin);
  border-color: #94a3b8;
  color: var(--metin);
  text-decoration: none;
}

/* Birincil / Vurgu Düğmesi (Kurumsal Mavi) */
.dugme-vurgu,
.dugme-birincil {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
}

.dugme-vurgu:hover,
.dugme-birincil:hover {
  background: var(--vurgu-koyu);
  border-color: var(--vurgu-koyu);
  box-shadow: 0 4px 8px rgba(2, 132, 199, 0.3);
  text-decoration: none;
}

/* Tehlike Düğmesi */
.dugme-tehlike {
  background: var(--tehlike);
  border-color: var(--tehlike);
  color: #ffffff !important;
}

.dugme-tehlike:hover {
  background: #b91c1c;
  border-color: #b91c1c;
  text-decoration: none;
}

/* Boyut varyantları */
.dugme-kucuk {
  padding: 5px 12px;
  font-size: 0.82rem;
}

.dugme-tam {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Rozetler ve Durum Etiketleri (Badges & Chips)
   Göz yormayan pastel zeminli soft rozet mimarisi (Mor içermez).
   -------------------------------------------------------------------------- */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--yaricap-tam);
  background: #f1f5f9;
  color: var(--metin-soluk);
  white-space: nowrap;
  border: 1px solid var(--cizgi);
}

/* Rol rozetleri */
.rol-admin {
  background: var(--vurgu-acik);
  color: var(--vurgu-derin);
  border-color: var(--bilgi-sınır);
}

.rol-isg_uzmani {
  background: var(--basari-acik);
  color: #047857;
  border-color: var(--basari-sınır);
}

.rol-goruntuleyici {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

/* Durum rozetleri */
.rozet-aktif,
.durum-tamamlandi {
  background: var(--basari-acik);
  color: #047857;
  border-color: var(--basari-sınır);
}

.rozet-pasif,
.durum-bekliyor {
  background: var(--uyari-acik);
  color: #b45309;
  border-color: var(--uyari-sınır);
}

.durum-calisiyor,
.rozet-siz {
  background: var(--bilgi-acik);
  color: var(--vurgu-derin);
  border-color: var(--bilgi-sınır);
}

.rozet-silinen,
.durum-hata {
  background: var(--tehlike-acik);
  color: #b91c1c;
  border-color: var(--tehlike-sınır);
}

/* --------------------------------------------------------------------------
   Bildirim ve Uyarı Kutuları (Alerts)
   -------------------------------------------------------------------------- */
.uyari {
  padding: 14px 18px;
  border-radius: var(--yaricap);
  margin-bottom: 22px;
  font-size: 0.92rem;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.uyari ul {
  margin: 0;
  padding-left: 18px;
}

.uyari-hata {
  background: var(--tehlike-acik);
  color: #991b1b;
  border: 1px solid var(--tehlike-sınır);
}

.uyari-bilgi {
  background: var(--bilgi-acik);
  color: #075985;
  border: 1px solid var(--bilgi-sınır);
}

/* --------------------------------------------------------------------------
   Form Elemanları ve Filtreleme (Forms & Inputs)
   -------------------------------------------------------------------------- */
.form-izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
}

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

.form-izgara label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--metin-orta);
}

.form-izgara input,
.form-izgara select,
.filtre-form select,
.satir-form select {
  font-family: inherit;
  font-size: 0.94rem;
  color: var(--metin);
  padding: 9px 13px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yaricap-sm);
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-izgara input:focus,
.form-izgara select:focus,
.filtre-form select:focus,
.satir-form select:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.form-eylemler {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.satir-form {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.filtre-form {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.filtre-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--metin-soluk);
}

.bos {
  color: var(--metin-soluk);
  font-style: italic;
  padding: 12px 0;
}

.ipucu {
  color: var(--metin-soluk);
  font-size: 0.86rem;
  margin-top: 14px;
}

.baglanti-geri {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 600;
}

.kod-blok {
  background: #0f172a;
  color: #f1f5f9;
  padding: 16px 18px;
  border-radius: var(--yaricap);
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.kod-hata {
  background: #450a0a;
  color: #fecaca;
}

/* Tanım Listesi */
.tanim-listesi {
  display: grid;
  grid-template-columns: 200px 1fr;
  row-gap: 12px;
  column-gap: 20px;
  margin: 0;
}

.tanim-listesi dt {
  color: var(--metin-soluk);
  font-size: 0.9rem;
  font-weight: 600;
}

.tanim-listesi dd {
  margin: 0;
  color: var(--metin);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Giriş Sayfası (Login View)
   Kurumsal, ferah, iki katmanlı modern karşılama alanı.
   -------------------------------------------------------------------------- */
.giris-beden {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background:
    radial-gradient(1000px 500px at 50% 0%, #e0f2fe 0%, transparent 80%),
    var(--zemin);
  padding: 24px;
}

.giris-kutu {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-lg);
  box-shadow: var(--golge-havada);
  padding: 42px 40px;
  width: min(440px, 100%);
  text-align: center;
}

.giris-marka-kapsul {
  width: 58px;
  height: 58px;
  border-radius: var(--yaricap);
  background: var(--vurgu-cok-acik);
  border: 1px solid var(--vurgu-acik);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--vurgu);
  margin-bottom: 18px;
}

.giris-marka-kapsul svg {
  width: 32px;
  height: 32px;
}

.giris-kutu .marka-buyuk {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--metin);
  letter-spacing: -0.02em;
}

.giris-kutu .marka-buyuk span {
  color: var(--vurgu);
}

.giris-alt {
  color: var(--metin-soluk);
  font-size: 0.92rem;
  margin: 6px 0 26px;
}

.giris-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

.giris-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--metin-orta);
}

.giris-form input {
  font-family: inherit;
  font-size: 0.98rem;
  padding: 10px 14px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yaricap-sm);
  transition: all 0.15s ease;
}

.giris-form input:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

.yetkisiz-kutu {
  text-align: center;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-lg);
  box-shadow: var(--golge-derin);
  padding: 44px;
  max-width: 480px;
  margin: 60px auto;
}

.yetkisiz-kutu h1 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 12px 0 10px;
}

.yetkisiz-kutu p {
  color: var(--metin-soluk);
  font-size: 0.95rem;
}

.yetkisiz-kod {
  font-size: 3.8rem;
  font-weight: 900;
  color: var(--tehlike);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Duyarlı Tasarım (Responsive / Dar Ekran)
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .kabuk {
    flex-direction: column;
  }
  .kenar {
    width: 100%;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--cizgi);
  }
  .menu {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 10px;
  }
  .menu a.aktif::before {
    display: none;
  }
  .oturum {
    border-top: 1px solid var(--cizgi);
    padding: 12px 16px;
  }
  .icerik {
    padding: 20px 16px;
  }
  .form-izgara {
    grid-template-columns: 1fr;
  }
  .tanim-listesi {
    grid-template-columns: 140px 1fr;
  }
}


/* ==========================================================================
   Şablon Kataloğu ve Resmî MEB Doküman Stilleri
   (Ferah, göz yormayan, mor içermeyen kurumsal mavi tasarım)
   ========================================================================== */

/* Sekme navigasyonu */
.sekmeler {
  display: flex;
  gap: 10px;
  border-bottom: 2px solid var(--cizgi);
  margin-bottom: 24px;
}

.sekme-dugme {
  padding: 12px 22px;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--metin-soluk);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  border-radius: 8px 8px 0 0;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sekme-dugme svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.sekme-dugme:hover {
  color: var(--metin);
  background: var(--vurgu-cok-acik);
  text-decoration: none;
}

.sekme-dugme.aktif {
  color: var(--vurgu);
  border-bottom-color: var(--vurgu);
  background: #ffffff;
}

/* Arama ve filtreleme kartı */
.arama-karti {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-lg);
  box-shadow: var(--golge-kart);
  padding: 20px 22px;
  margin-bottom: 26px;
}

.arama-satiri {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.arama-girdi {
  flex: 1;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 10px 16px;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yaricap-sm);
  background: #ffffff;
  color: var(--metin);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.arama-girdi:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
}

/* Kategori hapları */
.kategori-filtre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.kategori-hap {
  padding: 6px 14px;
  border-radius: 20px;
  background: var(--zemin);
  color: var(--metin-orta);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  border: 1px solid var(--cizgi);
  transition: all 0.15s ease;
}

.kategori-hap:hover {
  background: var(--cizgi);
  color: var(--metin);
  text-decoration: none;
}

.kategori-hap.aktif {
  background: var(--vurgu);
  color: #ffffff;
  border-color: var(--vurgu);
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
}

/* Şablon Izgarası ve Kartları */
.sablon-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 20px;
  width: 100%;
}

.sablon-kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap-lg);
  box-shadow: var(--golge-kart);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sablon-kart:hover {
  transform: translateY(-3px);
  box-shadow: var(--golge-derin);
  border-color: #93c5fd;
}

.sablon-kart-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.sablon-kod {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--vurgu-koyu);
  background: var(--vurgu-acik);
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.sablon-kategori {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--metin-soluk);
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  padding: 2px 8px;
  border-radius: 4px;
}

.sablon-baslik {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--metin);
  margin-bottom: 10px;
  line-height: 1.4;
}

.sablon-ozet {
  font-size: 0.86rem;
  color: var(--metin-soluk);
  line-height: 1.5;
  margin-bottom: 18px;
  flex: 1;
}

.sablon-buton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--vurgu);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 16px;
  border-radius: var(--yaricap-sm);
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.sablon-buton svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
}

.sablon-buton:hover {
  background: var(--vurgu-koyu);
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
  text-decoration: none;
}

/* Resmî MEB 3 Sütunlu Başlık Tablosu */
.meb-tablo-kutusu {
  border: 1.5px solid #0f172a;
  border-radius: 4px;
  display: flex;
  margin-bottom: 24px;
  background: #ffffff;
  overflow: hidden;
}

.meb-sol-logo {
  width: 95px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1.5px solid #0f172a;
  background: #f8fafc;
}

.meb-sol-logo img {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.meb-sol-logo-yazi {
  font-size: 10px;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
  margin-top: 4px;
  line-height: 1.2;
}

.meb-orta-baslik {
  flex: 1;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1.5px solid #0f172a;
}

.meb-ilce-yazi {
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.meb-kurum-yazi {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.meb-talimat-yazi {
  font-size: 15px;
  font-weight: 900;
  color: #dc2626;
  letter-spacing: 0.5px;
  border-top: 1px dashed #cbd5e1;
  padding-top: 5px;
  width: 100%;
}

.meb-sag-bilgi {
  width: 180px;
  padding: 8px 12px;
  font-size: 10.5px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: #f8fafc;
  line-height: 1.6;
}

/* Kurum Seçim Barı */
.kurum-secim-bari {
  background: #ffffff;
  border: 1px solid var(--cizgi-koyu);
  border-radius: var(--yaricap-lg);
  box-shadow: var(--golge-kart);
  padding: 14px 20px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.kurum-secim-sol {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 320px;
}

.kurum-secim-etiket {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--metin);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kurum-secim-kutusu {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 9px 14px;
  border-radius: var(--yaricap-sm);
  border: 1.5px solid var(--vurgu);
  background: #ffffff;
  color: var(--metin);
  font-weight: 700;
  flex: 1;
  max-width: 520px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.1);
}

.kurum-secim-kutusu:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
}

.kurum-bilgi-rozet {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vurgu-koyu);
  background: var(--vurgu-cok-acik);
  border: 1px solid var(--bilgi-sınır);
  padding: 8px 16px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   Yazdırma (Print) Kuralları
   -------------------------------------------------------------------------- */
@media print {
  .kenar, .sayfa-baslik, .yazdir-gizle, .uyari, .sekmeler, .arama-karti, .kurum-secim-bari {
    display: none !important;
  }
  body {
    background: #ffffff;
  }
  .icerik {
    padding: 0;
    max-width: none;
  }
  .panel-bolum {
    border: 0;
    box-shadow: none;
    padding: 0;
  }
  .tablo td, .tablo th {
    border-color: #999;
  }
}