/* ═══════════════════════════════════════════════════════
   BDT Oturum Oluşturucu - Stil Dosyası
   Klinik, modern, temiz tasarım
   ═══════════════════════════════════════════════════════ */

:root {
  --birincil: #1B5E87;
  --birincil-ac: #2980b9;
  --ikincil: #27AE60;
  --ikincil-ac: #2ecc71;
  --uyari: #F39C12;
  --hata: #E74C3C;
  --mor: #8E44AD;
  --koyu: #1a1a2e;
  --arka: #F0F4F8;
  --kart-arka: #FFFFFF;
  --sinir: #E2E8F0;
  --metin: #2D3748;
  --metin-ik: #718096;
  --golge: 0 2px 12px rgba(0,0,0,0.08);
  --golge-buyuk: 0 8px 30px rgba(0,0,0,0.12);
  --radius: 12px;
  --radius-kucuk: 8px;
  --gecis: all 0.25s ease;
}

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

body {
  font-family: 'Inter', sans-serif;
  background: var(--arka);
  color: var(--metin);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.6;
}

/* ─── HEADER ─────────────────────────────────────────── */
.header {
  background: linear-gradient(135deg, #1B5E87 0%, #0D3350 100%);
  color: white;
  padding: 0 24px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.2);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.logo h1 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.logo p {
  font-size: 11px;
  opacity: 0.75;
  font-weight: 400;
  margin-top: 1px;
}

.header-sag {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.12);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.kullanici-bilgi {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kullanici-ad {
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 500;
}

.mini-buton-cikis {
  background: rgba(231,76,60,0.25) !important;
  border-color: rgba(231,76,60,0.5) !important;
  color: #ffaaaa !important;
}
.mini-buton-cikis:hover {
  background: rgba(231,76,60,0.5) !important;
}

/* ─── AUTH MODAL ──────────────────────────────────────── */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(13,51,80,0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.auth-kart {
  background: white;
  border-radius: 16px;
  padding: 36px 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.auth-logo {
  text-align: center;
  margin-bottom: 24px;
}

.auth-logo span { font-size: 40px; }
.auth-logo h2 { font-size: 18px; color: var(--birincil); margin: 8px 0 4px; }
.auth-logo p { font-size: 13px; color: var(--metin-ik); }

.auth-sekmeler {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--sinir);
  margin-bottom: 24px;
}

.auth-sekme {
  flex: 1;
  padding: 10px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--metin-ik);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: var(--gecis);
}

.auth-sekme-aktif {
  color: var(--birincil);
  border-bottom-color: var(--birincil);
}

.auth-alan {
  margin-bottom: 16px;
}

.auth-alan label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--metin-ik);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.auth-alan input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--sinir);
  border-radius: var(--radius-kucuk);
  font-size: 14px;
  font-family: inherit;
  transition: var(--gecis);
  outline: none;
}

.auth-alan input:focus {
  border-color: var(--birincil);
}

.auth-hata {
  background: #fdf2f2;
  border: 1px solid #fca5a5;
  color: #dc2626;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 12px;
}

.buton-google {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 16px;
  border: 2px solid #e2e8f0;
  border-radius: var(--radius-kucuk);
  background: white;
  color: #3c4043;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--gecis);
  margin-bottom: 4px;
  font-family: 'Inter', sans-serif;
}
.buton-google:hover {
  border-color: #4285F4;
  background: #f8faff;
  box-shadow: 0 2px 8px rgba(66,133,244,0.15);
}

.auth-ayrac {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
  color: var(--metin-ik);
  font-size: 12px;
}
.auth-ayrac::before,
.auth-ayrac::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--sinir);
}

/* ─── PROJELERİM MODAL ───────────────────────────────── */
.modal-genis {
  max-width: 780px;
  width: 95%;
}

.proje-liste {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}

.proje-satir {
  border: 2px solid var(--sinir);
  border-radius: var(--radius-kucuk);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--gecis);
}

.proje-satir:hover { border-color: var(--birincil-ac); background: #f7fbff; }

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

.proje-satir-ad {
  font-weight: 600;
  font-size: 14px;
  color: var(--metin);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.proje-satir-meta {
  font-size: 11px;
  color: var(--metin-ik);
  margin-top: 3px;
}

.proje-satir-butonlar {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: nabiz 2s ease-in-out infinite;
}
.dot-green { background: #27AE60; }
.dot-sari { background: #F39C12; }
.dot-kirmizi { background: #E74C3C; }

@keyframes nabiz {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* ─── ANA DÜZEN ──────────────────────────────────────── */
.main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; }
}

/* ─── PANEL ──────────────────────────────────────────── */
.panel { display: flex; flex-direction: column; gap: 16px; }
.panel-sol { position: sticky; top: 80px; }

/* ─── KART ───────────────────────────────────────────── */
.kart {
  background: var(--kart-arka);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--golge);
  border: 1px solid var(--sinir);
}

.kart-baslik {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sinir);
}

.kart-baslik h2 {
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}

.kart-akciyonlar { margin-left: auto; }

.adim-no {
  width: 28px;
  height: 28px;
  background: var(--birincil);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ─── PDF YÜKLEME ────────────────────────────────────── */
.yukleme-alani {
  border: 2px dashed var(--sinir);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--gecis);
  background: #FAFBFC;
}

.yukleme-alani:hover,
.yukleme-alani.surukle-uzerinde {
  border-color: var(--birincil);
  background: #EBF5FB;
}

.yukleme-ikon { font-size: 36px; margin-bottom: 10px; }
.yukleme-metin { font-size: 14px; font-weight: 500; color: var(--metin); }
.yukleme-alt { color: var(--metin-ik); margin: 6px 0; font-size: 12px; }
.yukleme-bilgi { font-size: 11px; color: var(--metin-ik); margin-top: 10px; }

.yuklenen-liste {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.yuklenen-dosya {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F7FAFC;
  border: 1px solid var(--sinir);
  border-radius: var(--radius-kucuk);
  padding: 10px 12px;
}

.dosya-ikon { font-size: 18px; }
.dosya-isim { flex: 1; font-size: 12px; font-weight: 500; word-break: break-all; }
.dosya-boyut { font-size: 11px; color: var(--metin-ik); }
.dosya-sil {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hata);
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 4px;
  transition: var(--gecis);
}
.dosya-sil:hover { background: #FDECEA; }

/* ─── FORM ELEMANLARı ────────────────────────────────── */
.form-grup { margin-bottom: 16px; }

.form-etiket {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--metin-ik);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.slider-konteyner {
  display: flex;
  align-items: center;
  gap: 14px;
}

.slider {
  flex: 1;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--birincil) 0%, var(--birincil) 50%, var(--sinir) 50%);
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--birincil);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: var(--gecis);
}
.slider::-webkit-slider-thumb:hover { transform: scale(1.15); }

.slider-deger {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 65px;
}

#oturumDeger {
  font-size: 28px;
  font-weight: 700;
  color: var(--birincil);
  line-height: 1;
}

.slider-birim { font-size: 12px; color: var(--metin-ik); }

.slider-etiketler {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10px;
  color: var(--metin-ik);
}

/* Toggle */
.toggle-konteyner { display: flex; align-items: center; gap: 12px; }

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  display: inline-block;
  flex-shrink: 0;
}
.toggle input { display: none; }

.toggle-slider {
  position: absolute;
  inset: 0;
  background: #CBD5E0;
  border-radius: 12px;
  cursor: pointer;
  transition: var(--gecis);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: var(--gecis);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-slider { background: var(--ikincil); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

.toggle-metin { font-size: 12px; color: var(--metin-ik); }

.textarea {
  width: 100%;
  border: 1px solid var(--sinir);
  border-radius: var(--radius-kucuk);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--metin);
  resize: vertical;
  transition: var(--gecis);
  outline: none;
}
.textarea:focus { border-color: var(--birincil); box-shadow: 0 0 0 3px rgba(27,94,135,0.1); }

/* ─── BUTONLAR ───────────────────────────────────────── */
.buton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-kucuk);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: var(--gecis);
  text-decoration: none;
}

.buton-birincil {
  background: var(--birincil);
  color: white;
  box-shadow: 0 2px 8px rgba(27,94,135,0.3);
}
.buton-birincil:hover:not(:disabled) {
  background: var(--birincil-ac);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(27,94,135,0.4);
}
.buton-birincil:disabled {
  background: #CBD5E0;
  color: #A0AEC0;
  cursor: not-allowed;
  box-shadow: none;
}

.buton-ikincil {
  background: white;
  color: var(--birincil);
  border: 1.5px solid var(--birincil);
}
.buton-ikincil:hover { background: #EBF5FB; }

.buton-tam { width: 100%; margin-top: 4px; padding: 12px; font-size: 14px; }
.buton-ikon { font-size: 16px; }

.mini-buton {
  background: none;
  border: 1px solid var(--sinir);
  color: var(--metin-ik);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: var(--gecis);
}
.mini-buton:hover { background: var(--sinir); }

/* ─── BİLDİRİMLER ────────────────────────────────────── */
.bildirim {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-kucuk);
  font-size: 13px;
  font-weight: 500;
}
.bildirim-basarili { background: #D4EDDA; color: #155724; border: 1px solid #C3E6CB; }
.bildirim-hata { background: #FDECEA; color: #721C24; border: 1px solid #F5C6CB; }
.bildirim-bilgi { background: #CCE5FF; color: #004085; border: 1px solid #B8DAFF; }

.rozet {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  background: #E2E8F0;
  color: var(--metin-ik);
}
.rozet-bekliyor { background: #E2E8F0; color: #718096; }
.rozet-calisiyor { background: #FFF3CD; color: #856404; }
.rozet-tamamlandi { background: #D4EDDA; color: #155724; }
.rozet-hata { background: #FDECEA; color: #721C24; }

/* ─── AJAN PİPELINE ──────────────────────────────────── */
.ajan-pipeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bos-durum {
  text-align: center;
  padding: 32px 20px;
  color: var(--metin-ik);
}
.bos-ikon { font-size: 44px; margin-bottom: 12px; }
.bos-alt { font-size: 12px; margin-top: 6px; }

.ajan-kart {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-kucuk);
  border: 1.5px solid var(--sinir);
  background: #FAFBFC;
  transition: var(--gecis);
  position: relative;
  overflow: hidden;
}

.ajan-kart.calisiyor {
  border-color: var(--uyari);
  background: #FFFBF0;
  box-shadow: 0 0 0 3px rgba(243,156,18,0.1);
}
.ajan-kart.tamamlandi {
  border-color: var(--ikincil);
  background: #F0FFF4;
}
.ajan-kart.hata {
  border-color: var(--hata);
  background: #FFF5F5;
}

.ajan-kart::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sinir);
}
.ajan-kart.calisiyor::before { background: var(--uyari); }
.ajan-kart.tamamlandi::before { background: var(--ikincil); }
.ajan-kart.hata::before { background: var(--hata); }

.ajan-ikon { font-size: 22px; flex-shrink: 0; }

.ajan-bilgi { flex: 1; min-width: 0; }
.ajan-isim { font-size: 13px; font-weight: 600; }
.ajan-aciklama { font-size: 11px; color: var(--metin-ik); margin-top: 1px; }
.ajan-mesaj {
  font-size: 11px;
  color: var(--uyari);
  margin-top: 3px;
  font-style: italic;
}

.ajan-ilerleme-cizgi {
  width: 60px;
  height: 4px;
  background: var(--sinir);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.ajan-ilerleme-dolgu {
  height: 100%;
  background: var(--ikincil);
  border-radius: 2px;
  transition: width 0.5s ease;
}

.ajan-durum-ikon { font-size: 18px; flex-shrink: 0; }

/* Bekleme animasyonu */
@keyframes doner {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.donen { display: inline-block; animation: doner 1s linear infinite; }

/* ─── LOG KONSOL ─────────────────────────────────────── */
.log-konteyner {
  margin-top: 14px;
  border: 1px solid var(--sinir);
  border-radius: var(--radius-kucuk);
  overflow: hidden;
}

.log-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--koyu);
  color: white;
  font-size: 12px;
  font-weight: 500;
}

.log-icerik {
  background: #1a1a2e;
  color: #00ff88;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 10px 12px;
  max-height: 180px;
  overflow-y: auto;
  line-height: 1.7;
}

.log-satir { margin: 1px 0; }
.log-hata { color: #ff6b6b; }
.log-basari { color: #00ff88; }
.log-bilgi { color: #64b5f6; }

/* ─── İLERLEME ÇUBUĞU ───────────────────────────────── */
.ilerleme-konteyner { margin-bottom: 16px; }

.ilerleme-cubuğu {
  height: 8px;
  background: var(--sinir);
  border-radius: 4px;
  overflow: hidden;
}

.ilerleme-dolgu {
  height: 100%;
  background: linear-gradient(to right, var(--birincil), var(--ikincil));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.ilerleme-metin { font-size: 12px; color: var(--metin-ik); font-weight: 500; }

/* ─── PROGRAM BİLGİ ──────────────────────────────────── */
.program-bilgi {
  background: linear-gradient(135deg, #EBF5FB, #E8F8F5);
  border: 1px solid #AED6F1;
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.program-bilgi h3 { font-size: 16px; font-weight: 700; color: var(--birincil); margin-bottom: 6px; }
.program-bilgi p { font-size: 12px; color: var(--metin-ik); }
.program-meta { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.program-meta-item { font-size: 12px; color: var(--metin); }
.program-meta-item strong { color: var(--birincil); }

/* ─── OTURUM KARTLARI ────────────────────────────────── */
.oturum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.oturum-kart {
  border: 1.5px solid var(--sinir);
  border-radius: var(--radius);
  padding: 16px;
  background: white;
  transition: var(--gecis);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.oturum-kart::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--sinir);
  transition: var(--gecis);
}

.oturum-kart.bekliyor::before { background: #CBD5E0; }
.oturum-kart.uretildi::before { background: var(--birincil); }
.oturum-kart.tamamlandi::before { background: var(--ikincil); }

.oturum-kart:hover { box-shadow: var(--golge-buyuk); transform: translateY(-2px); }

.oturum-kart-baslik {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.oturum-no-badge {
  width: 32px;
  height: 32px;
  background: var(--birincil);
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.oturum-baslik-metin {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  flex: 1;
}

.oturum-durum {
  font-size: 10px;
  margin-bottom: 10px;
}

.oturum-kart-butonlar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.indir-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid;
  text-decoration: none;
  transition: var(--gecis);
}

.indir-btn-klinisyen {
  border-color: var(--birincil);
  color: var(--birincil);
  background: white;
}
.indir-btn-klinisyen:hover { background: var(--birincil); color: white; }

.indir-btn-calisma {
  border-color: var(--ikincil);
  color: var(--ikincil);
  background: white;
}
.indir-btn-calisma:hover { background: var(--ikincil); color: white; }

.indir-btn-yardim {
  border-color: var(--mor);
  color: var(--mor);
  background: white;
}
.indir-btn-yardim:hover { background: var(--mor); color: white; }

.indir-btn-podcast {
  border-color: #E67E22;
  color: #E67E22;
  background: white;
}
.indir-btn-podcast:hover { background: #E67E22; color: white; }

.detay-btn {
  border-color: var(--metin-ik);
  color: var(--metin-ik);
  background: white;
}
.detay-btn:hover { background: var(--metin-ik); color: white; }

.oturum-kart.bekliyor .oturum-kart-butonlar { opacity: 0.4; pointer-events: none; }

/* Yükleniyor animasyonu kart için */
.oturum-kart.yukleniyor::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 25%, rgba(255,255,255,0.6) 50%, transparent 75%);
  animation: parlama 1.5s ease-in-out infinite;
}
@keyframes parlama {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ─── TAMAMLANDI MESAJI ──────────────────────────────── */
.tamamlandi-kutu {
  text-align: center;
  padding: 30px;
  background: linear-gradient(135deg, #F0FFF4, #EBF5FB);
  border: 1px solid var(--ikincil);
  border-radius: var(--radius);
  margin-top: 16px;
}
.tamamlandi-ikon { font-size: 48px; margin-bottom: 12px; }
.tamamlandi-kutu h3 { font-size: 18px; font-weight: 700; color: var(--ikincil); }
.tamamlandi-kutu p { color: var(--metin-ik); margin-top: 6px; }

/* ─── MODAL ──────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}

.modal {
  background: white;
  border-radius: var(--radius);
  max-width: 800px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--golge-buyuk);
  animation: modal-gir 0.25s ease;
}

@keyframes modal-gir {
  from { opacity: 0; transform: scale(0.95) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--sinir);
  flex-shrink: 0;
}
.modal-baslik h3 { font-size: 16px; font-weight: 700; }

.modal-kapat {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--metin-ik);
  padding: 4px 8px;
  border-radius: 6px;
  transition: var(--gecis);
}
.modal-kapat:hover { background: var(--sinir); color: var(--metin); }

.modal-icerik {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.modal-alt {
  padding: 14px 20px;
  border-top: 1px solid var(--sinir);
  flex-shrink: 0;
}

.modal-indirme-butlari {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Modal içerik bölümleri */
.modal-bolum {
  margin-bottom: 20px;
}

.modal-bolum-baslik {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--birincil);
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #EBF5FB;
  border-radius: 6px;
}

.modal-bolum-icerik {
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  padding: 0 4px;
}

.modal-alt-baslik {
  font-size: 12px;
  font-weight: 600;
  color: var(--mor);
  margin: 10px 0 4px;
}

.odev-kutu {
  background: #FFF9E6;
  border: 1px solid #F0C040;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
}

.odev-kutu-baslik { font-weight: 600; font-size: 13px; color: #B7700A; margin-bottom: 4px; }
.odev-kutu-metin { font-size: 12px; line-height: 1.6; }

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

/* Yardımcı */
[hidden] { display: none !important; }

/* ─── ÇIKTI MOD SEÇİCİ ───────────────────────────────── */
.mod-secici {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mod-secici-kart {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 2px solid var(--sinir);
  border-radius: var(--radius-kucuk);
  cursor: pointer;
  transition: var(--gecis);
  background: white;
}

.mod-secici-kart:hover {
  border-color: var(--birincil-ac);
  background: #F0F8FF;
}

.mod-secici-kart.mod-secici-secili {
  border-color: var(--birincil);
  background: #EBF5FB;
  box-shadow: 0 0 0 3px rgba(27,94,135,0.12);
}

.mod-ikon {
  font-size: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}

.mod-metin {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mod-metin strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--metin);
}

.mod-metin small {
  font-size: 11px;
  color: var(--metin-ik);
  line-height: 1.4;
}