/* İyilik Hali Akademi LMS — teal marka, kenar menü, sıcak kartlar */
:root { --ink: #06919D; --ink-dark: #057A84; --sand: #F6F4EF; --text: #1f2a2c; }
body { font-family: 'Public Sans', system-ui, sans-serif; color: var(--text); margin: 0; background: #f4f6f6; }
h1, h2, h3 { font-family: 'Instrument Serif', Georgia, serif; }

.btn-portal { background: var(--ink); color: #fff; border: none; border-radius: 10px; padding: .5rem 1.1rem; font-weight: 600; }
.btn-portal:hover { background: var(--ink-dark); color: #fff; }
/* Rozet — moss tonlu yumuşak zemin (eski sabit teal tint kaldırıldı; ih-tema paletiyle uyumlu) */
.badge-soft { display: inline-block; background: rgba(61,90,61,.12); color: var(--ink-dark); border-radius: 999px; padding: .15rem .7rem; font-size: .78rem; font-weight: 600; }
.lms-title { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.card-soft { background: #fff; border: 1px solid #eaeaea; border-radius: 14px; padding: 1.2rem; text-decoration: none; color: inherit; }

/* LMS shell */
.lms-shell { display: flex; min-height: 100vh; }
.lms-sidebar { width: 240px; background: #0f1718; color: #cdd7d8; flex-shrink: 0; padding: 1.2rem 0; }
.lms-brand { font-family: 'Instrument Serif', serif; font-size: 1.4rem; color: #fff; padding: 0 1.4rem 1rem; display: flex; align-items: center; gap: .5rem; }
.lms-sidebar nav { display: flex; flex-direction: column; }
.lms-sidebar nav a { color: #aebcbd; text-decoration: none; padding: .65rem 1.4rem; display: flex; align-items: center; gap: .7rem; }
.lms-sidebar nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.lms-sidebar nav a.active { background: var(--ink); color: #fff; }
.lms-content { flex: 1; display: flex; flex-direction: column; }
.lms-topbar { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.4rem; background: #fff; border-bottom: 1px solid #eee; }

/* Kartlar — kapak bandı + gövde; hover'da hafif yükselme */
.kurs-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e0d3; border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s, border-color .2s; height: 100%; }
.kurs-card:hover { box-shadow: 0 10px 28px rgba(28,31,25,.10); transform: translateY(-3px); border-color: #c8d8c2; }
.kurs-kapak { display: grid; place-items: center; height: 96px; background: linear-gradient(135deg, #3d5a3d 0%, #2d4a2d 60%, #1c2b1c 100%); color: #dfe9da; font-size: 2.4rem; flex-shrink: 0; }
.kurs-card-govde { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.1rem 1.1rem; }
.kurs-card-baslik { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.15rem; line-height: 1.3; }
.kurs-card-ozet { font-size: .85rem; color: #6a6458; line-height: 1.55; margin: .6rem 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kurs-card-meta { display: flex; align-items: center; gap: .9rem; margin-top: auto; padding-top: .8rem; font-size: .8rem; color: #8a9698; }
.kurs-card-meta .mdi { margin-right: .15rem; }
.kurs-card-git { margin-left: auto; color: var(--ink-dark); font-weight: 600; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.kurs-card:hover .kurs-card-git { opacity: 1; transform: none; }

/* Katalog vitrini + boş/yükleniyor durumu */
.katalog-vitrin { margin-bottom: 1.4rem; }
.katalog-vitrin-alt { color: #6a6458; font-size: 1.02rem; }
.katalog-bos { background: #fff; border: 1px dashed #d9d1bf; border-radius: 14px; padding: 1.6rem; text-align: center; }

/* ═══════════════ Girişsiz ziyaretçi kabuğu (halka açık katalog) ═══════════════ */
.halk-kabuk { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg, #f5f1ea); }
.halk-ust { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 4vw, 2.5rem); background: #1c2b1c; color: #c8d8c2; }
.halk-marka { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-family: 'Instrument Serif', Georgia, serif; font-size: 1.25rem; }
.halk-marka em { font-style: italic; color: #c9a766; }
.halk-marka-ikon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: rgba(255,255,255,.10); font-size: 1.2rem; }
.halk-nav { display: flex; align-items: center; gap: 1.1rem; }
.halk-nav a { color: #c8d8c2; text-decoration: none; font-size: .9rem; }
.halk-nav a:hover { color: #fff; }
.halk-giris { display: inline-flex; align-items: center; gap: .35rem; background: #3d5a3d; color: #fff !important; border-radius: 999px; padding: .4rem 1rem; font-weight: 600; transition: background .15s; }
.halk-giris:hover { background: #2d4a2d; }
.halk-icerik { flex: 1; width: 100%; max-width: 1140px; margin: 0 auto; padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1rem, 4vw, 2.5rem); }
.halk-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem clamp(1rem, 4vw, 2.5rem); border-top: 1px solid #d9d1bf; color: #6a6458; font-size: .85rem; }
.halk-alt a { color: var(--ink-dark); }
.ders-listesi { background: #fff; border: 1px solid #eaeaea; border-radius: 14px; overflow: hidden; }
.ders-satir { padding: .8rem 1.1rem; border-bottom: 1px solid #f1f1f1; display: flex; align-items: center; gap: .6rem; }
.ders-satir:last-child { border-bottom: none; }
.ders-satir .mdi { color: var(--ink); }
.sertifika-card { background: #fff; border: 1px solid #eaeaea; border-radius: 14px; padding: 1.1rem; display: flex; gap: .9rem; align-items: center; }
.sertifika-card .mdi { font-size: 2rem; color: var(--ink); }
.progress-bar { background: var(--ink); }

/* Login / doğrulama */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--ink) 0%, var(--ink-dark) 100%); padding: 1rem; }
.login-card { background: #fff; border-radius: 18px; padding: 2rem; width: 100%; max-width: 400px; box-shadow: 0 20px 50px rgba(0,0,0,.2); }

/* ═══════════════ Kurs oynatıcı ═══════════════ */
.text-ink { color: var(--ink-dark); }
.kurs-duzen { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 992px) { .kurs-duzen { grid-template-columns: minmax(0, 1fr) 340px; } }

/* Udemy tarzı koyu vitrin bandı */
.kurs-hero { background: linear-gradient(135deg, #1c2b1c 0%, #2d4a2d 100%); color: #e9efe4; border-radius: 20px; padding: clamp(1.2rem, 3vw, 2rem); margin-bottom: 1.5rem; }
.kurs-hero-geri { display: inline-flex; align-items: center; gap: .3rem; color: #c8d8c2; text-decoration: none; font-size: .85rem; }
.kurs-hero-geri:hover { color: #fff; }
.kurs-hero-baslik { font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: #fff; margin: .45rem 0 .35rem; }
.kurs-hero-aciklama { color: #c8d8c2; font-size: .95rem; line-height: 1.6; max-width: 72ch; margin-bottom: .8rem; }
.kurs-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; font-size: .85rem; color: #c8d8c2; }
.kurs-hero-meta .mdi { margin-right: .2rem; }
.kurs-hero .badge-soft { background: rgba(255,255,255,.14); color: #e9efe4; }

.kurs-bitti { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; border: 1px solid rgba(61,90,61,.3); background: rgba(61,90,61,.06); border-radius: 16px; padding: 1rem; }
.kurs-bitti-ikon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: 1.3rem; }

.oynatici-kart { background: #fff; border: 1px solid #eaeaea; border-radius: 16px; overflow: hidden; }
.oynatici-sekmeler { display: flex; border-bottom: 1px solid #eaeaea; padding: 0 .5rem; }
.oynatici-sekme { display: flex; align-items: center; gap: .35rem; background: none; border: none; border-bottom: 2px solid transparent; padding: .75rem 1rem; font-size: .9rem; font-weight: 500; color: #6b7a7c; cursor: pointer; }
.oynatici-sekme:hover { color: var(--text); }
.oynatici-sekme.aktif { border-bottom-color: var(--ink); color: var(--ink-dark); }
.oynatici-video { display: block; width: 100%; aspect-ratio: 16/9; }
.oynatici-embed { aspect-ratio: 16/9; width: 100%; background: #000; }
.oynatici-embed iframe { width: 100%; height: 100%; border: 0; }
.ders-metin { font-size: .95rem; line-height: 1.7; white-space: pre-wrap; }
.oynatici-aksiyon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid #eaeaea; padding-top: 1rem; }

.ders-not { border: 1px solid #eaeaea; border-radius: 12px; }
.ders-not summary { cursor: pointer; padding: .6rem .75rem; font-size: .9rem; font-weight: 500; }
.not-noktasi { display: inline-block; width: .4rem; height: .4rem; border-radius: 50%; background: var(--ink); margin-left: .25rem; vertical-align: middle; }
.calisma-kagitlari { border: 1px solid #eaeaea; border-radius: 12px; background: var(--sand); padding: .75rem; }
.ek-link { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid #eaeaea; border-radius: 10px; padding: .5rem .75rem; font-size: .85rem; font-weight: 500; text-decoration: none; color: var(--text); }
.ek-link:hover { border-color: var(--ink); color: var(--ink-dark); }

/* ═══ Kurs içeriği paneli (yan) — Udemy tarzı: yapışkan, kendi içinde kaydıran ═══
   Eski sürümün 3 kusuru düzeltildi: (1) panel kaydırmıyordu → max-height + iç scroll,
   (2) uzun başlıklar text-truncate ile karttan taşıyordu → min-width:0 + sarma,
   (3) aktif satır koyu blok olarak paneli aşıyordu → açık vurgu + iç kenarlık. */
.kurs-duzen { align-items: start; }
.ders-yan { position: sticky; top: 1rem; display: flex; flex-direction: column; max-height: calc(100vh - 2rem); background: #fff; border: 1px solid #e6e0d3; border-radius: 16px; overflow: hidden; }
.ders-yan-ust { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid #eee7d9; }
.ders-yan-ilerleme { padding: .7rem 1rem; border-bottom: 1px solid #eee7d9; background: #faf7f0; }
.ders-yan-liste { flex: 1; min-height: 0; overflow-y: auto; padding: .45rem; scrollbar-width: thin; }
.ilerleme-bar { height: .5rem; border-radius: 999px; background: #e8e2d4; overflow: hidden; }
.ilerleme-dolu { height: 100%; border-radius: 999px; background: var(--ink); transition: width .3s; }
.ders-modul-baslik { display: flex; align-items: center; gap: .4rem; width: 100%; min-width: 0; background: #f1ede3; border: none; border-radius: 10px; padding: .55rem .6rem; font-size: .78rem; font-weight: 700; color: #2d322a; cursor: pointer; margin-top: .4rem; text-align: left; }
.ders-modul-baslik:first-child { margin-top: 0; }
.ders-modul-baslik:hover { background: #e8e2d4; }
.ders-modul-ad { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ders-modul-sayi { flex-shrink: 0; font-weight: 500; font-size: .72rem; color: #8a9698; }
.ders-yan-satir { display: flex; align-items: flex-start; gap: .5rem; width: 100%; min-width: 0; background: none; border: none; border-radius: 10px; padding: .5rem .6rem; font-size: .84rem; cursor: pointer; color: var(--text); text-align: left; }
.ders-yan-satir:hover { background: var(--sand); }
.ders-yan-satir.aktif { background: #e4ece0; color: #1c1f19; font-weight: 600; box-shadow: inset 3px 0 0 #3d5a3d; }
.ders-yan-ad { flex: 1 1 auto; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.ders-yan-tur { flex-shrink: 0; opacity: .45; margin-top: .1rem; }
.ders-yan-no { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; flex-shrink: 0; border-radius: 50%; font-size: .72rem; border: 1px solid currentColor; opacity: .85; }
.ders-yan-no.tamam { background: #2e9e6b; border-color: #2e9e6b; color: #fff; opacity: 1; }

/* ═══════════════ Kurs oluşturucu (Olustur.razor) ═══════════════ */
.ders-duzenle-kart { border: 1px solid #eaeaea; border-radius: 12px; padding: .9rem; background: var(--sand); }
.quiz-duzenle { border-top: 1px dashed #d8d8d8; padding-top: .6rem; }
.quiz-soru-duzenle { border: 1px solid #eaeaea; border-radius: 10px; padding: .6rem; background: #fff; }

/* ═══════════════ Quiz ═══════════════ */
.quiz-govde { display: grid; gap: 1.1rem; }
.quiz-onceki { display: flex; align-items: center; gap: .4rem; background: var(--sand); border-radius: 12px; padding: .5rem .75rem; font-size: .85rem; color: #6b7a7c; }
.quiz-sonuc { display: flex; align-items: center; gap: .75rem; border: 1px solid; border-radius: 14px; padding: 1rem; }
.quiz-sonuc.basarili { border-color: #b6e0c8; background: #effaf3; }
.quiz-sonuc.tekrar { border-color: #f0d9a8; background: #fdf6e8; }
.quiz-sonuc-ikon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex-shrink: 0; border-radius: 50%; color: #fff; font-size: 1.3rem; }
.quiz-sonuc.basarili .quiz-sonuc-ikon { background: #2e9e6b; }
.quiz-sonuc.tekrar .quiz-sonuc-ikon { background: #d39e3a; }
.quiz-soru { border: 1px solid #eaeaea; border-radius: 14px; padding: 1rem; }
.quiz-sik { display: flex; align-items: center; gap: .65rem; width: 100%; border: 1px solid #eaeaea; border-radius: 10px; padding: .55rem .75rem; font-size: .9rem; background: #fff; cursor: pointer; transition: border-color .12s, background .12s; }
.quiz-sik:hover:not(:disabled) { background: var(--sand); }
.quiz-sik.secili { border-color: var(--ink); background: rgba(61,90,61,.07); }
.quiz-sik.dogru { border-color: #71c79b; background: #effaf3; }
.quiz-sik.yanlis { border-color: #e7a3a3; background: #fdeeee; }
.quiz-sik.soluk { opacity: .6; }
.quiz-sik-harf { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 50%; border: 1px solid currentColor; font-size: .72rem; font-weight: 600; }
.quiz-sik.dogru .quiz-sik-harf { background: #2e9e6b; border-color: #2e9e6b; color: #fff; }
.quiz-sik.yanlis .quiz-sik-harf { background: #d35858; border-color: #d35858; color: #fff; }
.quiz-aciklama { margin-top: .75rem; background: rgba(61,90,61,.08); border-radius: 10px; padding: .5rem .75rem; font-size: .8rem; line-height: 1.5; color: var(--ink-dark); }
.quiz-detay { border: 1px solid #eaeaea; border-radius: 12px; padding: .75rem 1rem; }
.quiz-detay summary { cursor: pointer; font-weight: 500; }