/* EduPanel — Ana Stil Dosyası */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ─── Değişkenler ──────────────────────────────────────────── */
:root {
  --kenar-koyu:    #13302D;
  --kenar-vurgu:   #1C5C57;
  --aktif:         #E8743B;
  --aktif-hover:   #d4622a;
  --zemin:         #F5F3EE;
  --kart:          #ffffff;
  --metin-koyu:    #1a2e2c;
  --metin-orta:    #4a6361;
  --metin-acik:    #7a9896;
  --sinir:         #e0ddd8;
  --kenar-gen:     248px;
  --ust-bar-y:     60px;
  --golge-kart:    0 2px 8px rgba(19, 48, 45, .07);
  --golge-ustbar:  0 1px 0 var(--sinir), 0 2px 8px rgba(0,0,0,.04);
  --r:             10px;
  --r-kucuk:       6px;
  --gecis:         .18s ease;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  background: var(--zemin);
  color: var(--metin-koyu);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* ─── Uygulama Düzeni ─────────────────────────────────────── */
.uygulama {
  display: flex;
  min-height: 100vh;
}

/* ─── Kenar Çubuğu ────────────────────────────────────────── */
.kenar-cubuk {
  width: var(--kenar-gen);
  background: var(--kenar-koyu);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: var(--kenar-vurgu) transparent;
}

.kenar-logo {
  padding: 1.4rem 1.25rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.logo-adi {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.3px;
}

.logo-alt {
  font-size: .68rem;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .7px;
}

.kenar-nav {
  flex: 1;
  padding: .6rem 0;
}

.kenar-nav a {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .62rem 1.2rem;
  color: rgba(255,255,255,.68);
  font-size: .84rem;
  font-weight: 400;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}

.kenar-nav a:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
  border-left-color: rgba(255,255,255,.25);
  text-decoration: none;
}

.kenar-nav a.aktif {
  background: rgba(232,116,59,.16);
  color: #fff;
  border-left-color: var(--aktif);
  font-weight: 500;
}

.nav-ikon {
  font-size: .95rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  opacity: .85;
}

.kenar-alt {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.07);
}

.kenar-rol-rozet {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: rgba(232,116,59,.2);
  color: var(--aktif);
  padding: .2rem .6rem;
  border-radius: 20px;
}

/* ─── Ana Alan ────────────────────────────────────────────── */
.ana-alan {
  flex: 1;
  margin-left: var(--kenar-gen);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ─── Üst Bar ─────────────────────────────────────────────── */
.ust-bar {
  height: var(--ust-bar-y);
  background: var(--kart);
  box-shadow: var(--golge-ustbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.6rem;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}

.ust-bar-sol {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.ust-bar-sayfa {
  font-size: .95rem;
  font-weight: 600;
  color: var(--metin-koyu);
}

.ust-bar-sube {
  font-size: .75rem;
  color: var(--metin-orta);
  background: var(--zemin);
  border: 1px solid var(--sinir);
  padding: .18rem .65rem;
  border-radius: 20px;
}

.ust-bar-sag {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.kullanici-bilgi {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--metin-orta);
}

.kullanici-avatar {
  width: 32px;
  height: 32px;
  background: var(--kenar-vurgu);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.cikis-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .79rem;
  font-weight: 500;
  color: #c0392b;
  background: #fef5f4;
  border: 1px solid #f8c8c3;
  border-radius: var(--r-kucuk);
  padding: .28rem .8rem;
  text-decoration: none;
  transition: background var(--gecis);
}

.cikis-btn:hover {
  background: #fce8e6;
  text-decoration: none;
}

/* ─── İçerik ──────────────────────────────────────────────── */
.icerik {
  flex: 1;
  padding: 1.75rem;
}

/* ─── Kart ────────────────────────────────────────────────── */
.kart {
  background: var(--kart);
  border-radius: var(--r);
  box-shadow: var(--golge-kart);
  border: 1px solid var(--sinir);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.kart-baslik {
  font-size: .88rem;
  font-weight: 600;
  color: var(--metin-koyu);
  margin-bottom: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--sinir);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

/* ─── İstatistik Kartları ─────────────────────────────────── */
.istatistik-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}

.istatistik-kart {
  background: var(--kart);
  border-radius: var(--r);
  box-shadow: var(--golge-kart);
  border: 1px solid var(--sinir);
  padding: 1.2rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.istatistik-ikon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-kucuk);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.ikon-teal   { background: rgba(28,92,87,.11);   color: var(--kenar-vurgu); }
.ikon-coral  { background: rgba(232,116,59,.11);  color: var(--aktif); }
.ikon-mor    { background: rgba(108,92,231,.11);  color: #6c5ce7; }
.ikon-yesil  { background: rgba(0,184,148,.11);   color: #00b894; }
.ikon-mavi   { background: rgba(26,95,163,.11);   color: #1a5fa3; }

.istatistik-icerik {}

.istatistik-sayi {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--metin-koyu);
  line-height: 1;
}

.istatistik-etiket {
  font-size: .73rem;
  color: var(--metin-orta);
  margin-top: .22rem;
}

/* ─── Yapım Aşamasında Kutusu ─────────────────────────────── */
.yapilanacak-kutu {
  background: var(--kart);
  border-radius: var(--r);
  border: 2px dashed var(--sinir);
  padding: 3.5rem 2rem;
  text-align: center;
  color: var(--metin-orta);
}

.yapilanacak-kutu .buyuk-ikon {
  font-size: 2.8rem;
  margin-bottom: .9rem;
  opacity: .45;
}

.yapilanacak-kutu h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--metin-koyu);
  margin-bottom: .4rem;
}

.yapilanacak-kutu p {
  font-size: .83rem;
}

/* ─── Düğmeler ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .48rem 1.1rem;
  border-radius: var(--r-kucuk);
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  font-family: inherit;
  text-decoration: none;
  transition: background var(--gecis), opacity var(--gecis);
}

.btn:active { opacity: .85; }

.btn-birincil { background: var(--aktif); color: #fff; }
.btn-birincil:hover { background: var(--aktif-hover); text-decoration: none; color: #fff; }

.btn-ikincil { background: var(--zemin); color: var(--metin-koyu); border: 1px solid var(--sinir); }
.btn-ikincil:hover { background: #ebe9e4; text-decoration: none; }

/* ─── Formlar ─────────────────────────────────────────────── */
.form-grup { margin-bottom: 1rem; }

.form-etiket {
  display: block;
  font-size: .79rem;
  font-weight: 500;
  color: var(--metin-koyu);
  margin-bottom: .32rem;
}

.form-girdi {
  width: 100%;
  padding: .52rem .85rem;
  border: 1px solid var(--sinir);
  border-radius: var(--r-kucuk);
  font-size: .875rem;
  font-family: inherit;
  background: #fff;
  color: var(--metin-koyu);
  transition: border-color var(--gecis), box-shadow var(--gecis);
  outline: none;
}

.form-girdi:focus {
  border-color: var(--kenar-vurgu);
  box-shadow: 0 0 0 3px rgba(28,92,87,.12);
}

.form-yardim {
  font-size: .74rem;
  color: var(--metin-acik);
  margin-top: .25rem;
}

/* ─── Uyarı Kutuları ──────────────────────────────────────── */
.uyari {
  padding: .72rem 1rem;
  border-radius: var(--r-kucuk);
  font-size: .84rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.uyari-hata   { background: #fef5f4; border: 1px solid #f8c8c3; color: #c0392b; }
.uyari-basari { background: #f0faf7; border: 1px solid #a8dfd3; color: #1e7d62; }
.uyari-bilgi  { background: #f0f7ff; border: 1px solid #bdd9f8; color: #1a5fa3; }
.uyari-uyari  { background: #fef9ec; border: 1px solid #f5dea2; color: #856404; }

/* ─── Tablo ───────────────────────────────────────────────── */
.tablo-sarici { overflow-x: auto; }

.tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
}

.tablo th {
  text-align: left;
  padding: .65rem .9rem;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--metin-orta);
  border-bottom: 2px solid var(--sinir);
  background: var(--zemin);
  white-space: nowrap;
}

.tablo td {
  padding: .72rem .9rem;
  border-bottom: 1px solid var(--sinir);
  color: var(--metin-koyu);
}

.tablo tr:last-child td { border-bottom: none; }
.tablo tbody tr:hover td { background: rgba(245,243,238,.7); }

/* ─── Rozetler ────────────────────────────────────────────── */
.rozet {
  display: inline-block;
  padding: .18rem .58rem;
  border-radius: 20px;
  font-size: .71rem;
  font-weight: 600;
  white-space: nowrap;
}

.rozet-yesil   { background: #eaf7f3; color: #1e7d62; }
.rozet-sari    { background: #fef9ec; color: #856404; }
.rozet-kirmizi { background: #fef5f4; color: #c0392b; }
.rozet-mavi    { background: #f0f7ff; color: #1a5fa3; }
.rozet-gri     { background: #f0f0f0; color: #555; }

/* ─── Giriş Sayfası ───────────────────────────────────────── */
.giris-zemin {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--kenar-koyu) 0%, var(--kenar-vurgu) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.giris-kutu {
  background: var(--kart);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 2.5rem 2.25rem;
  width: 100%;
  max-width: 400px;
}

.giris-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.giris-logo .logo-cember {
  width: 56px;
  height: 56px;
  background: var(--kenar-koyu);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto .8rem;
  color: var(--aktif);
}

.giris-logo h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--metin-koyu);
}

.giris-logo p {
  font-size: .78rem;
  color: var(--metin-orta);
  margin-top: .2rem;
}

.giris-btn {
  width: 100%;
  padding: .72rem;
  background: var(--aktif);
  color: #fff;
  border: none;
  border-radius: var(--r-kucuk);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--gecis);
  margin-top: .5rem;
}

.giris-btn:hover { background: var(--aktif-hover); }

/* ─── Kurulum Sayfası ─────────────────────────────────────── */
.kurulum-zemin {
  min-height: 100vh;
  background: var(--zemin);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.kurulum-kutu {
  background: var(--kart);
  border-radius: 16px;
  box-shadow: var(--golge-kart);
  border: 1px solid var(--sinir);
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 520px;
}

.kurulum-baslik {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .4rem;
}

.kurulum-baslik h2 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--metin-koyu);
}

.kurulum-aciklama {
  font-size: .81rem;
  color: var(--metin-orta);
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--sinir);
}

.bolum-baslik {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--metin-acik);
  margin: 1.25rem 0 .65rem;
}

/* ─── Alt Bar ─────────────────────────────────────────────── */
.alt-bar {
  padding: .65rem 1.75rem;
  font-size: .73rem;
  color: var(--metin-acik);
  border-top: 1px solid var(--sinir);
  background: var(--kart);
  text-align: right;
  flex-shrink: 0;
}

/* ─── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar              { width: 5px; height: 5px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: var(--sinir); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: #c8c5c0; }

/* ─── Yardımcılar ─────────────────────────────────────────── */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.text-orta { color: var(--metin-orta); }
.text-kucuk { font-size: .78rem; }
.d-flex { display: flex; }
.hizala-merkez { align-items: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.ml-auto { margin-left: auto; }