/* İ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; }
.badge-soft { display: inline-block; background: rgba(6,145,157,.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 */
.kurs-card { display: block; background: #fff; border: 1px solid #eaeaea; border-radius: 14px; padding: 1.1rem; text-decoration: none; color: inherit; transition: box-shadow .2s; height: 100%; }
.kurs-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.07); }
.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: 1fr 300px; } }

.kurs-bitti { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; border: 1px solid rgba(6,145,157,.3); background: rgba(6,145,157,.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); }

/* Ders listesi (yan) */
.ders-yan { position: sticky; top: 1rem; background: #fff; border: 1px solid #eaeaea; border-radius: 16px; padding: 1rem; }
.ilerleme-bar { height: .5rem; border-radius: 999px; background: var(--sand); overflow: hidden; }
.ilerleme-dolu { height: 100%; border-radius: 999px; background: var(--ink); transition: width .3s; }
.ders-yan-satir { display: flex; align-items: center; gap: .5rem; width: 100%; background: none; border: none; border-radius: 10px; padding: .5rem .6rem; font-size: .88rem; cursor: pointer; color: var(--text); }
.ders-yan-satir:hover { background: var(--sand); }
.ders-yan-satir.aktif { background: var(--ink); color: #fff; }
.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; }

/* ═══════════════ 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(6,145,157,.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(6,145,157,.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; }