/* ============================================================
   STUDENT V2 DESIGN SYSTEM v1
   Theme: "Oyun gibi ama oyuncak değil"
   ============================================================ */

:root{
  color-scheme:dark;

  /* Core world */
  --sv-bg:#171B2E;
  --sv-bg-soft:#20263D;
  --sv-surface:#293149;
  --sv-surface-raised:#343D59;
  --sv-surface-soft:#242B43;
  --sv-line:#3D4664;

  /* Text */
  --sv-text:#F2F4FA;
  --sv-text-soft:#D7DCEC;
  --sv-text-muted:#AEB6CC;
  --sv-text-faint:#7F89A7;

  /* Semantic accents */
  --sv-primary:#7C6CF2;      /* action / selection */
  --sv-info:#4FA3FF;         /* progress / information */
  --sv-success:#37C9A5;      /* correct / completed */
  --sv-warning:#F2B84B;      /* attention */
  --sv-danger:#EF6A78;       /* wrong / error */
  --sv-companion:#C866E8;    /* AI / Together */

  /* Interaction */
  --sv-primary-soft:rgba(124,108,242,.16);
  --sv-info-soft:rgba(79,163,255,.14);
  --sv-success-soft:rgba(55,201,165,.14);
  --sv-warning-soft:rgba(242,184,75,.14);
  --sv-danger-soft:rgba(239,106,120,.14);
  --sv-companion-soft:rgba(200,102,232,.14);

  /* Shape / elevation */
  --sv-radius-xs:10px;
  --sv-radius-sm:14px;
  --sv-radius-md:18px;
  --sv-radius-lg:24px;
  --sv-shadow:0 18px 45px rgba(5,8,22,.26);
  --sv-shadow-soft:0 10px 28px rgba(5,8,22,.18);
  --sv-nav-bg:rgba(23,27,46,.94);
  --sv-nav-shadow:0 18px 55px rgba(0,0,0,.34);

  /* Spacing */
  --sv-space-1:6px;
  --sv-space-2:10px;
  --sv-space-3:14px;
  --sv-space-4:18px;
  --sv-space-5:24px;
  --sv-space-6:32px;
}
/* ============================================================
   STUDENT V2 — LIGHT THEME
   ============================================================ */

html[data-student-theme="light"] {
  color-scheme: light;

  /* Core world */
  --sv-bg:#E4E9F0;
  --sv-bg-soft:#EDF1F5;
  --sv-surface:#F7F9FB;
  --sv-surface-raised:#FFFFFF;
  --sv-surface-soft:#E9EEF4;
  --sv-line:#BCC6D3;

  /* Text */
  --sv-text:#202C3D;
  --sv-text-soft:#3F4E62;
  --sv-text-muted:#66768A;
  --sv-text-faint:#8996A8;

  /* Semantic accents */
  --sv-primary:#6758D9;
  --sv-info:#277FC7;
  --sv-success:#218C72;
  --sv-warning:#B87818;
  --sv-danger:#C64E60;
  --sv-companion:#A94AC7;

  /* Interaction */
  --sv-primary-soft:rgba(103,88,217,.13);
  --sv-info-soft:rgba(39,127,199,.12);
  --sv-success-soft:rgba(33,140,114,.12);
  --sv-warning-soft:rgba(184,120,24,.13);
  --sv-danger-soft:rgba(198,78,96,.12);
  --sv-companion-soft:rgba(169,74,199,.12);

  /* Elevation */
  --sv-shadow:0 16px 38px rgba(45,58,78,.14);
  --sv-shadow-soft:0 8px 22px rgba(45,58,78,.10);
  --sv-nav-bg:rgba(235,240,245,.96);
  --sv-nav-shadow:0 14px 34px rgba(45,58,78,.18);
}
html{background:var(--sv-bg)}
body{
  background:
    radial-gradient(circle at 8% 0%,rgba(124,108,242,.09),transparent 28%),
    radial-gradient(circle at 94% 8%,rgba(79,163,255,.08),transparent 24%),
    var(--sv-bg);
  color:var(--sv-text);
}
html[data-student-theme="light"] body {
  background:
    radial-gradient(circle at 8% 0%,rgba(103,88,217,.10),transparent 28%),
    radial-gradient(circle at 94% 8%,rgba(39,127,199,.08),transparent 24%),
    var(--sv-bg);
}
body,a,button,input,textarea,select{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit}

/* ---------- Global shell ---------- */
.studentHome .top,
.top{
  color:var(--sv-text);
}
.brand>b{
  background:var(--sv-primary)!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(124,108,242,.24);
}
.brand span small,.me span small{color:var(--sv-text-muted)!important}
.me i{
  background:var(--sv-surface-raised)!important;
  color:var(--sv-text)!important;
  border:1px solid var(--sv-line);
}

/* ---------- Companion hero ---------- */
.companionHero{
  border:1px solid var(--sv-line)!important;
  background:
    radial-gradient(circle at 15% 18%,rgba(200,102,232,.16),transparent 26%),
    radial-gradient(circle at 88% 16%,rgba(79,163,255,.10),transparent 24%),
    var(--sv-bg-soft)!important;
  box-shadow:var(--sv-shadow)!important;
}
.companionHero:after{background:rgba(255,255,255,.025)!important}
.companionCopy>small{color:var(--sv-companion)!important}
.companionCopy h1{color:var(--sv-text)!important}
.companionCopy p{color:var(--sv-text-muted)!important}
.companionPrimary{
  color:#fff!important;
  background:var(--sv-primary)!important;
  box-shadow:0 10px 24px rgba(124,108,242,.22)!important;
}
.companionPrimary:hover{filter:brightness(1.08)}
.companionSecondary{
  color:var(--sv-text-soft)!important;
  border:1px solid var(--sv-line)!important;
  background:var(--sv-surface)!important;
}
.companion-celebrate{
  background:
    radial-gradient(circle at 15% 18%,rgba(55,201,165,.14),transparent 26%),
    radial-gradient(circle at 88% 16%,rgba(79,163,255,.08),transparent 24%),
    var(--sv-bg-soft)!important;
}
.companion-attention{
  background:
    radial-gradient(circle at 15% 18%,rgba(242,184,75,.14),transparent 27%),
    radial-gradient(circle at 88% 16%,rgba(124,108,242,.09),transparent 24%),
    var(--sv-bg-soft)!important;
}
.companion-study{
  background:
    radial-gradient(circle at 15% 18%,rgba(124,108,242,.16),transparent 27%),
    radial-gradient(circle at 88% 16%,rgba(79,163,255,.08),transparent 24%),
    var(--sv-bg-soft)!important;
}

/* ---------- Homepage decision area ---------- */
.homeDecisionGrid{gap:14px!important}
.homeDecisionCard{
  background:var(--sv-surface)!important;
  border:1px solid var(--sv-line)!important;
  box-shadow:var(--sv-shadow-soft)!important;
}
.homeDecisionCard>small{color:var(--sv-primary)!important}
.homeDecisionCard h2{color:var(--sv-text)!important}
.homeDecisionCard p{color:var(--sv-text-muted)!important}
.homeDecisionCard:nth-child(2)>small{color:var(--sv-info)!important}
.homeMiniSummary>div{
  background:var(--sv-bg-soft)!important;
  border:1px solid var(--sv-line)!important;
}
.homeMiniSummary span{color:var(--sv-text-muted)!important}
.homeMiniSummary b{color:var(--sv-text)!important}
.homeDecisionActions a.primary{
  background:var(--sv-primary)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(124,108,242,.18);
}
.homeDecisionActions a.secondary{
  background:var(--sv-bg-soft)!important;
  border-color:var(--sv-line)!important;
  color:var(--sv-text-soft)!important;
}
.bar{background:#141827!important}
.bar i{background:var(--sv-primary)!important}

/* ---------- Route cards ---------- */
.homeRouteCards>a{
  background:var(--sv-surface)!important;
  border:1px solid var(--sv-line)!important;
  box-shadow:var(--sv-shadow-soft)!important;
  color:var(--sv-text)!important;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.homeRouteCards>a:hover{
  transform:translateY(-2px);
  background:var(--sv-surface-raised)!important;
  border-color:#596584!important;
}
.homeRouteCards>a>span{
  background:var(--sv-primary-soft)!important;
  color:var(--sv-primary)!important;
  border:1px solid rgba(124,108,242,.22);
}
.homeRouteCards>a:nth-child(2)>span{
  background:var(--sv-info-soft)!important;
  color:var(--sv-info)!important;
  border-color:rgba(79,163,255,.22);
}
.homeRouteCards>a:nth-child(3)>span{
  background:var(--sv-companion-soft)!important;
  color:var(--sv-companion)!important;
  border-color:rgba(200,102,232,.22);
}
.homeRouteCards b{color:var(--sv-text)!important}
.homeRouteCards small{color:var(--sv-text-muted)!important}
.homeRouteCards strong{color:var(--sv-text-soft)!important}

/* ---------- Fold / completed ---------- */
.homeFold{
  background:var(--sv-surface)!important;
  border:1px solid var(--sv-line)!important;
  color:var(--sv-text)!important;
}
.homeFold summary small{color:var(--sv-text-muted)!important}
.homeFold summary b{color:var(--sv-text)!important}
.homeFold summary>em{
  background:var(--sv-primary-soft)!important;
  color:var(--sv-primary)!important;
}
.homeFold summary>strong,.foldLink{color:var(--sv-primary)!important}
.done a{border-color:var(--sv-line)!important;color:var(--sv-text)!important}
.done a span{
  background:var(--sv-success-soft)!important;
  color:var(--sv-success)!important;
}
.done a small{color:var(--sv-text-muted)!important}

/* ---------- Persistent 4-item navigation ---------- */
.studentAppNav{
  position:fixed;
  left:50%;
  bottom:max(10px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(620px,calc(100% - 20px));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  padding:8px;
  z-index:1000;
  border:1px solid var(--sv-line);
  border-radius:20px;
  background:var(--sv-nav-bg);
  backdrop-filter:blur(16px);
  box-shadow:var(--sv-nav-shadow);
}
.studentAppNav a{
  min-height:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  border-radius:14px;
  color:var(--sv-text-muted);
  text-decoration:none;
  font-weight:800;
}
.studentAppNav a span{font-size:20px;line-height:1}
.studentAppNav a small{font-size:9px;line-height:1.1}
.studentAppNav a.active{
  color:#fff;
  background:var(--sv-primary-soft);
  box-shadow:inset 0 0 0 1px rgba(124,108,242,.22);
}
.studentAppNav a:nth-child(3).active{background:var(--sv-info-soft);box-shadow:inset 0 0 0 1px rgba(79,163,255,.22)}
.studentAppNav a:nth-child(4).active{background:var(--sv-companion-soft);box-shadow:inset 0 0 0 1px rgba(200,102,232,.22)}

/* ---------- Reusable cards ---------- */
.sv-card{
  background:var(--sv-surface);
  border:1px solid var(--sv-line);
  border-radius:var(--sv-radius-md);
  box-shadow:var(--sv-shadow-soft);
}
.sv-card-raised{background:var(--sv-surface-raised)}
.sv-muted{color:var(--sv-text-muted)}
.sv-accent-primary{color:var(--sv-primary)}
.sv-accent-info{color:var(--sv-info)}
.sv-accent-success{color:var(--sv-success)}
.sv-accent-warning{color:var(--sv-warning)}
.sv-accent-danger{color:var(--sv-danger)}
.sv-accent-companion{color:var(--sv-companion)}

/* ---------- Question card standard ---------- */
.sv-question-stage{
  min-height:100vh;
  background:var(--sv-bg);
  color:var(--sv-text);
}
.sv-question-card{
  background:var(--sv-surface);
  border:1px solid var(--sv-line);
  border-radius:var(--sv-radius-lg);
  box-shadow:var(--sv-shadow);
  color:var(--sv-text);
}
.sv-question-text{color:var(--sv-text);line-height:1.65}
.sv-option{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px 16px;
  border:1px solid var(--sv-line);
  border-radius:var(--sv-radius-sm);
  background:var(--sv-bg-soft);
  color:var(--sv-text-soft);
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.sv-option:hover{background:var(--sv-surface-raised);transform:translateY(-1px)}
.sv-option.is-selected{
  border-color:var(--sv-primary);
  background:var(--sv-primary-soft);
  color:var(--sv-text);
}
.sv-option.is-correct{
  border-color:var(--sv-success);
  background:var(--sv-success-soft);
}
.sv-option.is-wrong{
  border-color:var(--sv-danger);
  background:var(--sv-danger-soft);
}
.sv-question-progress{background:#141827}
.sv-question-progress>i{display:block;height:100%;background:var(--sv-primary)}
.sv-ai-note{
  border:1px solid rgba(200,102,232,.28);
  background:var(--sv-companion-soft);
  color:var(--sv-text-soft);
}

/* ---------- Buttons ---------- */
.sv-btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border:1px solid transparent;
  border-radius:var(--sv-radius-sm);
  font:inherit;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
}
.sv-btn-primary{background:var(--sv-primary);color:#fff}
.sv-btn-secondary{background:var(--sv-surface);border-color:var(--sv-line);color:var(--sv-text-soft)}
.sv-btn-info{background:var(--sv-info);color:#08111d}
.sv-btn-companion{background:var(--sv-companion);color:#16091c}

/* ---------- Accessibility / focus ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid rgba(79,163,255,.55);
  outline-offset:3px;
}

@media(max-width:760px){
  body{padding-bottom:88px}
  .studentAppNav{width:calc(100% - 14px);bottom:max(7px,env(safe-area-inset-bottom));border-radius:18px}
  .studentAppNav a{min-height:50px}
  .studentAppNav a span{font-size:19px}
  .studentAppNav a small{font-size:8px}
  .companionHero{grid-template-columns:112px 1fr!important;min-height:170px!important;padding:10px 14px 10px 4px!important}
  .companionVisual{height:150px!important}
  .companionVisual img{max-width:145px!important;max-height:150px!important}
  .companionCopy h1{font-size:22px!important}
  .companionCopy p{font-size:11px!important}
}

@media(max-width:500px){
  .companionHero{grid-template-columns:1fr!important;padding:16px!important}
  .companionVisual{display:none!important}
  .companionCopy{padding:0!important}
  .homeDecisionGrid{grid-template-columns:1fr!important}
  .homeRouteCards{grid-template-columns:1fr!important}
}


/* 2026-09-14 contrast pass */
.sv-btn-primary,.companionPrimary,.homeDecisionActions a.primary{color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.10)}
.sv-btn-secondary,.companionSecondary,.homeDecisionActions a.secondary{color:var(--sv-text,#f4f6fb)!important;border-width:1px!important;border-style:solid!important;border-color:var(--sv-line,#596584)!important;background:var(--sv-surface-raised,#202637)!important}
.sv-btn-secondary:hover,.companionSecondary:hover,.homeDecisionActions a.secondary:hover{filter:brightness(1.12)}
button,a[class*="Primary"],a[class*="Action"],a.primary,a.secondary{font-weight:850}

/* ============================================================
   STUDENT V2 — LIGHT THEME FIXES
   ============================================================ */
html[data-student-theme="light"] .studentAppNav a.active{color:var(--sv-text)}
/* ---------- Student top actions ---------- */

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

.studentTopActions .me{
    display:flex;
    align-items:center;
}
/* ============================================================
   STUDENT V2 — MODAL LAYER ORDER
   Normal modal/confirm her zaman çalışma yüzeyinin üstündedir.
   ============================================================ */

.student-modal-backdrop{
    z-index:2000 !important;
}