/* ============ LMS Theme (Base) ============ */
:root{
  --bg: #f5f7fb;
  --card: #ffffff;
  --text: #1f2a44;
  --muted: #8a94a6;
  --stroke: rgba(16, 24, 40, 0.08);

  /* Primary brand color */
  --brand: #2f3e46;  /* koyu mavi/petrol */

  /* Accent color */
  --accent: #8e2c5a; /* magenta/bordo-pembe */

  --shadow: 0 14px 40px rgba(17, 24, 39, 0.08);
  --radius: 18px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(1200px 600px at 100% 0%, rgba(142, 44, 90, 0.14), transparent 40%),
              radial-gradient(900px 500px at 100% 100%, rgba(142, 44, 90, 0.10), transparent 45%),
              var(--bg);
}

/* ============ Layout ============ */
.app{ display:flex; min-height:100vh; }

.sidebar{
  width: 270px;
  background: #fff;
  border-right: 1px solid var(--stroke);
  padding: 22px 18px;
  position: sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  overflow: hidden;
}

.main{ flex:1; display:flex; flex-direction:column; }

.content{
  padding: 18px 20px 28px 20px;
  max-width: 1180px;
}

/* ============ Brand ============ */
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 4px 6px 18px 6px;
}
.brand__logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: var(--brand);
  background: rgba(47, 62, 70, 0.12);
  font-size: 20px;
}
.brand__name{
  font-weight: 800;
  font-size: 18px;
}


.brand__img{
  max-width: 180px;
  height: auto;
  display: block;
}

/* ============ Find-in-Page (Search) ============ */
.ev-findbar{
  display:flex;
  align-items:center;
  gap: 8px;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--stroke);
}
.ev-findbar__count{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.ev-findbar__btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: #fff;
  display:grid;
  place-items:center;
  color: var(--text);
}
.ev-findbar__btn:hover{ border-color: rgba(142,44,90,0.35); color: var(--accent); }

mark.ev-find-hit{
  background: rgba(142, 44, 90, 0.18);
  color: inherit;
  padding: 0 2px;
  border-radius: 4px;
}
mark.ev-find-hit.ev-find-active{
  background: rgba(142, 44, 90, 0.32);
  outline: 2px solid rgba(142, 44, 90, 0.45);
  outline-offset: 1px;
}
/* ============ Menu ============ */
.menu{ margin-top: 14px; flex: 1; overflow: auto; padding-right: 4px; }
.menu__title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--brand);
  text-transform: capitalize;
  margin: 18px 10px 10px 10px;
}
.menu__item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #6b7280;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  width: 100%;
}
.menu__item i{ width: 18px; text-align:center; }
.menu__item:hover{ background: rgba(47, 62, 70, 0.06); color: #334155; }
.menu__item.active{
  color: var(--brand);
  background: rgba(47, 62, 70, 0.10);
}

.menu__sub{
  display:block;
  padding: 8px 12px 8px 44px;
  color: #9aa3b2;
  text-decoration:none;
  font-size: 13px;
  border-radius: 10px;
  margin: 2px 0;
  width: 100%;
}
.menu__sub:hover{
  background: rgba(15, 23, 42, 0.04);
  color: #475569;
}

.sidebar__foot{ margin-top:auto; padding: 14px 10px 4px 10px; }

/* ============ Topbar ============ */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 18px 22px;
}
.search{
  flex:1;
  max-width: 560px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.05);
}
.search i{ color: #a1a8b4; }
.search input{
  border:0;
  outline:0;
  width: 100%;
  background: transparent;
  font-weight: 700;
  color: #334155;
}
.search input::placeholder{ color: #a1a8b4; font-weight: 700; }

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

.icon-btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.85);
  display:grid;
  place-items:center;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.05);
  cursor:pointer;
  position: relative;
}
.icon-btn i{ color: #6b7280; font-size: 18px; }
.icon-btn:hover i{ color:#334155; }
.icon-btn .dot{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
}

.user__avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.05);
}

/* ============ Cards ============ */
.cardx{
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px;
}

.stat-card{ display:flex; align-items:center; gap: 16px; min-height: 92px; }
.stat-icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-size: 22px;
  border: 1px solid rgba(16, 24, 40, 0.08);
}

/* Primary blue */
.stat-icon--blue{ color: var(--brand); background: rgba(47,62,70,0.12); }

/* Notification tone */
.stat-icon--red{ color: var(--accent); background: rgba(142,44,90,0.12); }

/* Warm accent */
.stat-icon--orange{ color: var(--accent); background: rgba(142,44,90,0.14); }

/* Teal accent */
.stat-icon--teal{ color: var(--brand); background: rgba(47,62,70,0.12); }

.stat-meta{ line-height: 1.05; }
.stat-value{ font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.stat-label{ margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--muted); }

/* ============ Survey ============ */
.section-title{ font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }

.kpis{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 4px 0 8px 0;
}
.kpi{ text-align:center; padding: 10px 6px; }
.kpi__value{ font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.kpi__label{ margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--muted); }

.chart-wrap{ padding: 8px 4px 2px 4px; }

.chart-tools{ display:flex; align-items:center; gap: 6px; }
.tool{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.8);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.tool i{ color:#a1a8b4; font-size: 14px; }
.tool:hover i{ color:#334155; }

/* ============ Responsive ============ */
@media (max-width: 991.98px){
  .sidebar{ position: fixed; left:0; top:0; transform: translateX(-100%); z-index: 20; }
  .content{ padding-left: 14px; padding-right: 14px; }
  .kpis{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 575.98px){
  .kpis{ grid-template-columns: 1fr; }
  .stat-value{ font-size: 30px; }
}


/* ===== Added for Content/Video pages (layout preserved) ===== */
.content-card{ padding: 22px 22px; }
.content-text{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  opacity: 0.9;
  line-height: 1.55;
  margin: 10px 0 0 0;
}
.content-image{
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: #fff;
}
.content-caption{
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
}
.video-shell{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.9);
}
.video-player{
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Exam page FIX ===== */
.exam-badge{font-weight:800;color:var(--brand);background:#fff}
.exam-actions{display:flex;gap:10px;flex-wrap:wrap}
.exam-btn{border-radius:14px;font-weight:800}
.q{border:1px solid var(--stroke);border-radius:16px;padding:14px;margin-top:12px;background:#fff}
.q-title{font-weight:800}
.q-options{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.opt{display:flex;gap:10px;padding:10px;border-radius:12px;border:1px solid var(--stroke)}
.exam-feedback{margin-top:10px;border-radius:14px;padding:12px;border:1px solid var(--stroke)}
.exam-feedback.ok{border-color:var(--brand)}
.exam-feedback.bad{border-color:var(--accent)}
.exam-score__pill{display:inline-flex;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--stroke)}


/* ===== Added for Exam page (layout preserved) ===== */
.exam-badge{
  font-weight: 800;
  color: var(--brand);
  background: rgba(255,255,255,0.7) !important;
}
.exam-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}
.exam-btn{
  border-radius: 14px;
  font-weight: 800;
  padding: 10px 14px;
}
.btn-primary.exam-btn{
  background: var(--accent);
  border-color: var(--accent);
}
.btn-primary.exam-btn:hover{ filter: brightness(0.95); }
.exam-score{ font-weight: 800; color: var(--brand); }
.exam-score__pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.9);
}

.exam-section-title{
  font-size: 16px;
  font-weight: 900;
  color: var(--brand);
  margin: 0 0 10px 0;
}

.q{
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 14px 14px;
  margin-top: 12px;
  background: rgba(255,255,255,0.75);
}
.q-title{
  font-weight: 800;
  color: var(--text);
  font-size: 14px;
}
.q-options{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-top: 10px;
}
.opt{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.9);
  font-weight: 700;
  color: #334155;
}
.opt input{ accent-color: var(--accent); }

.exam-feedback{
  margin-top: 10px;
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,0.95);
}
.exam-feedback.ok{ border-color: rgba(47,62,70,0.22); }
.exam-feedback.bad{ border-color: rgba(142,44,90,0.25); }
.exam-feedback__title{
  font-weight: 900;
  display:flex;
  align-items:center;
  color: var(--brand);
}
.exam-feedback.bad .exam-feedback__title{ color: var(--accent); }
.exam-feedback__msg{
  margin-top: 6px;
  font-weight: 650;
  color: #475569;
  line-height: 1.5;
}

.match-grid{ display:flex; flex-direction:column; gap: 10px; }
.match-row{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
  align-items:center;
}
.match-left{ font-weight: 800; color: #334155; }
.match-select{ border-radius: 12px; font-weight: 700; }

.blank-wrap{ display:inline-block; min-width: 160px; }
.blank{
  width: 180px;
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--stroke);
  padding: 8px 10px;
  font-weight: 800;
  outline: none;
}
.blank:focus{
  border-color: rgba(142,44,90,0.45);
  box-shadow: 0 0 0 4px rgba(142,44,90,0.10);
}
@media (max-width: 575.98px){
  .match-row{ grid-template-columns: 1fr; }
  .blank{ width: 100%; }
}


/* ===== Learning flow (Prev/Next + Active step) ===== */
.menu__sub.is-active{
  color: var(--accent);
  background: rgba(142, 44, 90, 0.12);
  font-weight: 900;
  border-left: 4px solid var(--accent);
}
.ev-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ev-pager__spacer{ flex: 1; }
.ev-btn{
  border-radius: 14px;
  font-weight: 900;
  padding: 10px 14px;
  border: 1px solid var(--stroke);
}
.ev-btn--primary{
  background: var(--accent);
  border-color: var(--accent);
  color: #fff !important;
}
.ev-btn--primary:hover{ filter: brightness(0.95); }
.ev-btn--ghost{
  background: rgba(255,255,255,0.85);
  color: #334155 !important;
}


/* ===== Exam attempts / result block ===== */
#finalResult .exam-feedback{ margin-top: 12px; }


/* ===== Exam: hide questions until start ===== */
body.exam-not-started #questionSections{ display:none; }
body.exam-not-started #checkExam,
body.exam-not-started #resetExam{ display:none; }
body:not(.exam-not-started) #startExam{ display:none; }
#attemptHistory .exam-feedback{ margin-top: 10px; }


/* ============ Splash Screen ============ */
.ev-splash-body{
  background: radial-gradient(1200px 600px at 100% 0%, rgba(142, 44, 90, 0.14), transparent 40%),
              radial-gradient(900px 500px at 100% 100%, rgba(142, 44, 90, 0.10), transparent 45%),
              var(--bg);
  min-height: 100vh;
}
.ev-splash__logo{
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(17,24,39,.10));
}
.ev-splash__kicker{
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .78rem;
}
.ev-splash__title{
  font-size: 1.6rem;
  font-weight: 800;
}
.ev-splash-card{
  padding: 18px;
}
.ev-splash-list{
  padding-left: 1.1rem;
  margin-bottom: 0;
}
.ev-splash-list li{
  margin: .35rem 0;
  color: rgba(31,42,68,.92);
}
.ev-splash-note{
  background: rgba(142, 44, 90, 0.06);
  border: 1px solid rgba(142, 44, 90, 0.12);
}
@media (min-width: 992px){
  .ev-splash__title{ font-size: 2rem; }
  .ev-splash-card{ padding: 22px; }
}


/* ===== SPA: lock page scroll, scroll only content area ===== */
html, body{
  height: 100%;
  overflow: hidden; /* prevent page from scrolling */
}

.app{
  height: 100vh;
}

.main{
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* ensure inner scroll only */
}

/* Content host becomes the scroll container */
#evContentHost{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 96px; /* keep space so pager/buttons never feel clipped */
}

/* Make sidebar stable if content grows */
.sidebar{
  height: 100vh;
  overflow: hidden;
}

.sidebar .menu{
  overflow-y: auto;
  max-height: calc(100vh - 140px); /* brand + footer approx */
  padding-bottom: 16px;
}


/* ===== Mobile Sidebar Toggle ===== */
.ev-nav-toggle{
  flex-direction: column;
  display:none;
  width:42px;
  height:42px;
  border:1px solid rgba(16,24,40,.10);
  background: rgba(255,255,255,.75);
  border-radius: 12px;
  padding: 10px 10px;
  align-items:center;
  justify-content:center;
  gap:4px;
  box-shadow: 0 10px 24px rgba(17,24,39,.06);
}
.ev-nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background: var(--accent);
  border-radius: 10px;
}
.ev-backdrop{
  display:none;
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.35);
  z-index: 110;
}

@media (max-width: 991.98px){
  .ev-nav-toggle{ display:inline-flex; }

  /* Sidebar becomes off-canvas */
  .sidebar{
    position: fixed;
    top:0;
    left:0;
    z-index: 120;
    width: 280px;
    max-width: 86vw;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: 0 18px 60px rgba(17,24,39,.18);
  }

  body.ev-sidebar-open .sidebar{
    transform: translateX(0);
  }

  body.ev-sidebar-open .ev-backdrop{
    display:block;
  }

  /* Main fills screen */
  .main{
    width:100vw;
  }
}


/* Topbar hamburger (always accessible on mobile) */
.ev-nav-toggle--top{
  margin-right: 10px;
}
.topbar{
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content: center; /* center the progress bar block */
}

/* Keep header below the off-canvas menu/backdrop on mobile */
.topbar{ position: sticky; top: 0; z-index: 60; }


@media (max-width: 991.98px){
  /* Place hamburger at the same spot (top-left) whether menu is open or closed */
  .ev-nav-toggle--top{
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 130; /* above backdrop and sidebar */
    margin-right: 0;
  }
  /* Give topbar some left padding so content doesn't collide with the button */
  .topbar{
    padding-left: 72px;
  }
}


/* Top progress (replaces search bar) */
.ev-top-progress{
  flex: 0 1 auto;
  width: clamp(220px, 48vw, 520px);
  max-width: 520px;
  min-width: 200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ev-top-progress__row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ev-top-progress__label{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  color: var(--text);
  opacity: .9;
}

.ev-top-progress__value{
  font-weight: 800;
  font-size: 13px;
  color: var(--accent);
}

.ev-top-progress__bar{
  height: 10px;
  background: rgba(16, 24, 40, 0.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.ev-top-progress__fill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .25s ease;
}

/* Mobile adjustments */
@media (max-width: 575.98px){
  /* Keep space for the fixed hamburger */
  .topbar{ padding: 14px 16px; padding-left: 72px; }
  .ev-top-progress{ width: clamp(180px, 62vw, 340px); min-width: 160px; }
  .ev-top-progress__label{ font-size: 12px; }
  .ev-top-progress__value{ font-size: 12px; }
}



/* Active top-level menu items (Exam / SSS / İçerik parent) */
.menu__item.is-active{
  background: rgba(142, 44, 90, 0.10);
  border: 1px solid rgba(142, 44, 90, 0.22);
  color: #111827;
}
.menu__item.is-active i{ color: var(--accent); }

/* Step completion pill */
.ev-complete-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(16, 24, 40, 0.06);
  color: #334155;
  border: 1px solid rgba(16, 24, 40, 0.10);
}
.ev-complete-pill.is-done{
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.22);
  color: #166534;
}

/* Small badges inside toast */
.ev-badge{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(142, 44, 90, 0.10);
  border: 1px solid rgba(142, 44, 90, 0.18);
  color: var(--accent);
}

/* Toast (replaces alert) */
.ev-toast-wrap{
  position: fixed;
  right: 16px;
  top: 16px;
  z-index: 200; /* above sidebar/backdrop/hamburger */
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease;
}
.ev-toast-wrap.is-show{
  opacity: 1;
  transform: translateY(0);
}
.ev-toast{
  pointer-events: auto;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(16,24,40,0.12);
  box-shadow: 0 18px 60px rgba(17,24,39,.18);
}
.ev-toast__icon{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(142, 44, 90, 0.12);
  color: var(--accent);
  flex: 0 0 auto;
}
.ev-toast__title{
  font-weight: 900;
  color: #111827;
  margin-bottom: 2px;
}
.ev-toast__msg{
  color: #334155;
  font-weight: 600;
  line-height: 1.35;
}
.ev-toast__close{
  margin-left: auto;
  border: none;
  background: transparent;
  color: #64748b;
  padding: 4px 6px;
  border-radius: 10px;
}
.ev-toast__close:hover{ background: rgba(16,24,40,0.06); }


/* tiny visual cue for hidden reset shortcut */
.ev-flash{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Sidebar locking (step-by-step flow) */
.menu__sub.is-locked,
.menu__item.is-locked{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: auto; /* we intercept clicks in JS */
}
.menu__sub.is-locked:hover,
.menu__item.is-locked:hover{
  background: transparent;
}
.ev-lock{
  margin-left: auto;
  font-size: .8rem;
  opacity: .9;
}
/* ensure lock icon aligns nicely on sub items */
.menu__sub{ display:flex; align-items:center; }


/* Dynamic content renderer (Builder Preview Template)
   NOTE: Page scroll is locked (html/body overflow hidden above).
   So we must provide an internal scroll container for oversized content (e.g. large videos).
*/
.ev-shell{
  display:flex;
  min-height:100vh;
  height:100vh;
  background:#f6f7fb;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

.ev-side{
  width: 320px;
  background:#fff;
  border-right: 1px solid rgba(15,23,42,.08);
  padding: 18px 16px;
  display:flex;
  flex-direction:column;
  gap: 14px;

  /* allow inner nav to scroll */
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  min-height: 0;
}

.ev-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.ev-logo{ width:84px; height:84px; object-fit:contain; border-radius:16px; }
.ev-brandText{ font-weight:800; color:#0f172a; }

.ev-nav{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 2px 6px 0 2px;

  /* scroll when menu grows */
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* Section titles like "Eğitim Sonu Sınavı", "Soru Cevap" */
.ev-navSectionTitle{
  margin: 14px 8px 6px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.55);
}

/* Collapsible group */
.ev-navGroup{ display:flex; flex-direction:column; gap: 2px; }
.ev-navGroup__head{
  width:100%;
  background: rgba(142, 44, 90, 0.06);
  border: 1px solid rgba(142, 44, 90, 0.18);
  border-radius: 14px;
  color: #111827;
  cursor: pointer;
}
.ev-navGroup__head .ev-caret{ margin-left:auto; opacity:.7; transition: transform .15s ease; }
.ev-navGroup__head.is-collapsed .ev-caret{ transform: rotate(-90deg); }

.ev-navGroup__body{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  gap: 0; /* no space between sub items */
}

/* Nav-only headings between items (Ara Başlık) */
.ev-navSubhead{
  padding: 10px 12px 6px 44px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.50);
}

/* Override sub item spacing to be seamless */
.menu__sub{
  margin: 0;
  border-radius: 10px;
  padding: 10px 12px 10px 44px;
  display:flex;
  align-items:center;
  gap: 10px;
  border-left: 3px solid transparent;
}

.menu__sub.is-active{
  background: rgba(142, 44, 90, 0.08);
  color: #111827;
  border-left-color: var(--accent);
}

.menu__sub .ev-lock{ margin-left:auto; opacity:.55; }
.menu__item .ev-lock{ margin-left:auto; opacity:.55; }
.menu__sub .ev-lock.is-done,
.menu__item .ev-lock.is-done{ opacity: 1; color: var(--accent); }

.menu__sub.is-locked{ opacity:.45; }

.menu__item.is-active{
  background: rgba(142, 44, 90, 0.10);
  border: 1px solid rgba(142, 44, 90, 0.22);
  color: #111827;
}
.menu__item.is-active i{ color: var(--accent); }

.menu__item.is-locked{ opacity:.55; cursor:not-allowed; }
.menu__item.is-locked:hover{ background: transparent; }

/* Footer */
.ev-footer{ margin-top:auto; color:rgba(15,23,42,.55); font-size:12px; padding:6px 4px; }

/* Main area (fixed-height column; only body/content scrolls) */
.ev-main{
  flex:1;
  padding:22px 22px 40px;
  height: 100vh;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  min-height: 0;
}
.ev-top{ display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:14px; }
.ev-title{ font-weight:900; font-size:18px; color:#0f172a; }
.ev-progressWrap{ display:flex; align-items:center; gap:12px; width:min(640px, 55vw); }
.ev-progressLbl{ font-weight:800; color:#0f172a; font-size:13px; opacity:.85; }
.ev-progressBar{ flex:1; height:10px; background:rgba(15,23,42,.10); border-radius:999px; overflow:hidden; }
.ev-progressFill{ height:100%; background: var(--accent); width:0%; border-radius:999px; }
.ev-progressPct{ font-weight:900; color: var(--accent); font-size:13px; }

.ev-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  box-shadow: 0 14px 40px rgba(17,24,39,0.08);
  overflow:hidden;

  /* critical: allow internal scrolling for tall content */
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
  min-height: 0;
}
.ev-cardHdr{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid rgba(15,23,42,.08); }
.ev-cardTitle{ font-weight:900; font-size:22px; color:#0f172a; }
.ev-cardBody{
  padding:18px;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-bottom: 28px;
}
.ev-cardActions{ display:flex; gap:10px; padding:16px 18px 18px; }

/* Actions (Next / Complete) */
.ev-cardActions{ justify-content:flex-end; }
#ev_next, #ev_mark_done{
  border-radius: 999px !important;
  padding: 12px 18px !important;
  font-weight: 900 !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--accent) !important;
}
#ev_next{
  background: var(--accent) !important;
  color: #fff !important;
}
#ev_next:hover{ filter: brightness(0.95); }
#ev_mark_done{
  background: var(--accent) !important;
  color: #fff !important;
}
#ev_mark_done:hover{ filter: brightness(0.95); }


/* Quiz */
.ev-quiz-q{padding:14px 12px; border:1px solid rgba(0,0,0,.08); border-radius:14px; margin-top:12px; background:#fff;}
.ev-quiz-qtext{font-weight:800; margin-bottom:10px;}
.ev-quiz-choices{display:flex; flex-direction:column; gap:10px;}
.ev-quiz-choice{display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid rgba(0,0,0,.08); border-radius:12px; cursor:pointer;}
.ev-quiz-choice input{margin-top:3px;}


/* --- Scroll + large media safety --- */
.ev-cardBody{
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.ev-cardBody video,
.ev-cardBody iframe{
  display:block;
  width:100%;
  height:auto;
  max-height: calc(100vh - 280px); /* keep controls visible; allow scroll for rest */
}


/* Responsive video (fit into player) */

.ev-videoStage{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top: 12px;
}

/* Video fits into viewport area without forcing inner scroll.
   Aspect ratio is detected from metadata and written to --ev-ar (fallback 16/9). */
.ev-videoShell{
  position: relative;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: var(--ev-ar, 16 / 9);
  height: min(62vh, 560px);
  width: auto;
  max-width: 100%;
}

.ev-videoShell.ev-videoShell--ready{
  /* no-op, hook for future */
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .ev-videoShell{
    width: 100%;
    height: auto;
  }
}

.ev-videoPlayer{
  width: 100% !important;
  height: 100% !important;
  display: block;
  background: #000;
  object-fit: contain; /* no crop */
}

/* Safety: any legacy video elements should never overflow */
.ev-cardBody video{
  max-width: 100% !important;
  height: auto;
}

/* Improve scrolling on iOS inside the card body */
.ev-cardBody{
  -webkit-overflow-scrolling: touch;
}

/* PDF reader */
.ev-pdf-wrap{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.ev-pdf-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.ev-pdf-status{
  font-size:13px;
  font-weight:900;
  color:#0f172a;
}
.ev-pdf-status.is-ready{ color: var(--accent); }
.ev-pdf-status.is-error{ color:#b42318; }
.ev-pdf-hint{
  font-size:12px;
  color: rgba(15,23,42,.60);
}
.ev-pdf-scroll{
  height: min(70vh, 820px);
  overflow:auto;
  border:1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  background: rgba(15,23,42,.03);
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}
.ev-pdf-stage{
  min-height: 160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 18px;
}
.ev-pdf-loader{
  min-height: 120px;
  width:100%;
  display:grid;
  place-items:center;
  color: rgba(15,23,42,.65);
  font-weight: 800;
}
.ev-pdf-page{
  width: min(100%, 900px);
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 12px 32px rgba(17,24,39,.06);
}
.ev-pdf-page__label{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.55);
  margin-bottom: 10px;
}
.ev-pdf-canvas{
  display:block;
  width:100%;
  height:auto;
  border-radius: 10px;
  background:#fff;
}
@media (max-width: 920px){
  .ev-pdf-scroll{ height: min(68vh, 680px); padding: 10px; }
  .ev-pdf-page{ padding: 10px; }
}

/* Rich content figures inserted from Builder (resizable in builder, static in player) */
.ev-cardBody .ev-figure{
  display:inline-block;
  max-width:100%;
  border:0;
  padding:0;
  resize:none;
  overflow:visible;
  background:transparent;
}
.ev-cardBody .ev-figure img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
}

.ev-completeLock{
  padding:14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background:rgba(0,0,0,.02);
  font-weight:700;
}


/* EV_CONGRATS_OVERLAY */
.ev-congrats-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
}
.ev-congrats-card{
  width: min(520px, calc(100vw - 32px));
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.10);
  padding: 22px 22px 18px;
  transform: translateY(6px);
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
}
.ev-congrats-overlay.is-show .ev-congrats-card{
  opacity: 1;
  transform: translateY(0);
}
.ev-congrats-title{
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.2px;
  margin: 0 0 6px 0;
}
.ev-congrats-sub{
  margin: 0 0 14px 0;
  color: rgba(0,0,0,0.62);
  font-size: 14px;
  line-height: 1.35;
}
.ev-congrats-actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
.ev-congrats-btn{
  appearance: none;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 650;
  cursor: pointer;
}
.ev-congrats-btn.primary{
  background: rgba(0,0,0,0.90);
  color: #fff;
  border-color: rgba(0,0,0,0.0);
}
.ev-congrats-fadeout{
  animation: evCongratsFade 1000ms ease forwards;
}
@keyframes evCongratsFade{
  0%{ opacity: 1; }
  100%{ opacity: 0; }
}