:root{
  /* Elite Z-Index Aliases */
  --z-tooltip: var(--z-1000, 1000);
  --z-popover: var(--z-2000, 2000);
  --z-modal: var(--z-9000, 9000);
  --z-toast: var(--z-9500, 9500);

  --bg0: #05060a;
  --bg1: #070a12;
  --glass: rgba(255, 255, 255, .05);
  --glass2: rgba(255, 255, 255, .08);
  --stroke: rgba(255, 255, 255, .12);
  --text: rgba(255, 255, 255, .92);
  --muted: rgba(255, 255, 255, .62);
  --ok: #34C759;
  --bad: #FF453A;
  --warn: #FF9F0A;
  --radius: 18px;
  --radius2: 14px;
  --shadow2: 0 10px 30px rgba(0,0,0,.35);
  --bg-main: var(--bg0);
  --bg-panel: rgba(255,255,255,.06);
  --text-main: var(--text);
  --border-color: var(--stroke);
  --accent-color: var(--accent);
  --opt-bg: var(--w-05);
  --opt-hover: var(--w-10);
  --accent: rgba(168,85,247,1);
  --accent-12: rgba(168,85,247,.12);
  --accent-18: rgba(168,85,247,.18);
  --accent-26: rgba(168,85,247,.26);
  --accent-45: rgba(168,85,247,.45);
  --glass-bg: rgba(255,255,255,.06);
  --glass-border: rgba(255,255,255,.12);
  --glass-bg-hover: rgba(168,85,247,.14);
  --glass-border-hover: rgba(168,85,247,.45);
  --text-strong: rgba(244,244,245,.92);
  --text-muted: rgba(244,244,245,.66);
  --sticky-grad-1: rgba(10,10,14,0);
  --sticky-grad-2: rgba(10,10,14,.75);
  --sticky-grad-3: rgba(10,10,14,.92);
  --sticky-grad-4: rgba(10,10,14,.98);
  --ac-purple: #a855f7;
  --ac-purple-08: rgba(168,85,247,.08);
  --ac-purple-12: rgba(168,85,247,.12);
  --ac-purple-18: rgba(168,85,247,.18);
  --ac-purple-26: rgba(168,85,247,.26);
  --ac-purple-45: rgba(168,85,247,.45);
  --ac-purple-65: rgba(168,85,247,.65);
  /* Frequently used raw colors */
  --white: #fff;
  --brand: #a855f7;
  --danger: #ef4444;
  --success: #10b981;



  /* radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 14px;
  --r-2xl: 16px;
  --r-3xl: 20px;
  --r-pill: 999px;


  /* spacing scale */
  --s-1: 4px;
  --s-2: 6px;
  --s-3: 8px;
  --s-4: 10px;
  --s-5: 12px;
  --s-6: 14px;
  --s-7: 16px;
  --s-8: 20px;
  --s-9: 24px;
  --s-10: 32px;

  /* shadows */
  --shadow-1: 0 4px 12px var(--b-10);
  --shadow-2: 0 4px 15px var(--b-10);
  --shadow-3: 0 4px 15px var(--b-30);
  --shadow-4: 0 20px 50px var(--b-10);
  --shadow-5: 0 20px 50px rgba(0,0,0,0.5);
  --shadow-inset-accent: 0 0 0 1px var(--ac-purple-12) inset;
  /* Alpha colors */
  --w-02: rgba(255,255,255,0.02);
  --w-03: rgba(255,255,255,0.03);
  --w-05: rgba(255,255,255,0.05);
  --w-06: rgba(255,255,255,0.06);
  --w-08: rgba(255,255,255,0.08);
  --w-10: rgba(255,255,255,0.10);
  --w-12: rgba(255,255,255,0.12);
  --w-15: rgba(255,255,255,0.15);
  --w-18: rgba(255,255,255,0.18);
  --w-20: rgba(255,255,255,0.20);
  --w-22: rgba(255,255,255,0.22);
  --w-26: rgba(255,255,255,0.26);
  --w-30: rgba(255,255,255,0.30);

  --b-06: rgba(0,0,0,0.06);
  --b-08: rgba(0,0,0,0.08);
  --b-10: rgba(0,0,0,0.10);
  --b-12: rgba(0,0,0,0.12);
  --b-14: rgba(0,0,0,0.14);
  --b-16: rgba(0,0,0,0.16);
  --b-18: rgba(0,0,0,0.18);
  --b-20: rgba(0,0,0,0.20);
  --b-30: rgba(0,0,0,0.30);

  /* Typography scale */
  --fs-8: 8px;
  --fs-9: 9px;
  --fs-10: 10px;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  /* Border widths */
  --bw-1: 1px;
  --bw-2: 2px;

  /* Z-Index Scale (Elite mode) */
  --z-1: 1;
  --z-2: 2;
  --z-5: 5;
  --z-10: 10;
  --z-50: 50;
  --z-100: 100;
  --z-950: 950;
  --z-999: 999;
  --z-1000: 1000;
  --z-9000: 9000;
  --z-9999: 9999;
  --z-10000: 10000;
  --z-10001: 10001;
  --z-20000: 20000;
  --z-30000: 30000;
  --z-40000: 40000;
  --z-99999: 99999;
  --z-100000: 100000;

  /* Elite Motion Tokens */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --dur-1: 0.10s;
  --dur-2: 0.18s;
  --dur-3: 0.28s;
  --dur-4: 0.35s;
  --dur-5: 0.50s;

  --tr-fast: transform var(--dur-1) var(--ease-out);
  --tr-pop: transform var(--dur-2) var(--ease-spring);
  --tr-smooth: all var(--dur-3) ease;

  /* Elite Color Aliases */
  --focus-ring: rgba(168, 85, 247, 0.55);
  --focus-ring-offset: 2px;

  /* Elite Typography Tokens */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 900;

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.4;
  --lh-relaxed: 1.6;

  /* Elite Surface Tokens (semantic, opt-in) */
  --surface-0: rgba(255,255,255,0.00);
  --surface-1: rgba(255,255,255,0.06);
  --surface-2: rgba(255,255,255,0.10);
  --surface-3: rgba(255,255,255,0.16);

  --border-1: rgba(255,255,255,0.12);
  --border-2: rgba(255,255,255,0.18);
  --border-3: rgba(255,255,255,0.26);

  --glass-blur: 12px;

  /* Modal surface tokens (theme-aware, consistent geometry) */
  --modal-overlay-bg: rgba(0,0,0,.12);
  --modal-overlay-blur: 8px;

  --modal-card-bg: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  --modal-card-tint: rgba(18,20,28,.55);
  --modal-card-border: rgba(255,255,255,.12);
  --modal-card-shadow: 0 20px 60px rgba(0,0,0,.45);
  --modal-card-blur: 18px;

/* Modal layout tokens (uniform system) */
  --modal-w: min(560px, 92vw);
  --modal-pad: 20px;
  --modal-radius: 22px;

  --modal-header-gap: 12px;
  --modal-title-size: var(--fs-18);
  --modal-sub-size: var(--fs-13);

  --modal-actions-gap: 10px;
  --modal-actions-mt: 16px;

  --modal-close-size: 36px;
  --modal-close-bg: rgba(255,255,255,.10);
  --modal-close-border: rgba(255,255,255,.10);
}

body.light-mode{
  --bg0: #F2F2F7;
  --bg1: #FFFFFF;
  --glass: rgba(0, 0, 0, 0.05);
  --glass2: var(--b-08);
  --stroke: var(--b-12);
  --text: #1C1C1E;
  --muted: #636366;
  --accent: #007AFF;
  --shadow2: 0 10px 30px rgba(0,0,0,0.05);
  --bg-main: #f2f2f7;
  --bg-panel: #ffffff;
  --text-main: #1c1c1e;
  --text-muted: #636366;
  --border-color: #d1d1d6;
  --accent-color: #5856d6;
  --opt-bg: #f2f2f7;
  --opt-hover: #e5e5ea;

/* Modal surface overrides (Light) */
  --modal-overlay-bg: rgba(0,0,0,.04);

  --modal-card-bg: linear-gradient(180deg,
    rgba(255,255,255,.38),
    rgba(255,255,255,.16)
  );

  --modal-card-tint: transparent;
  --modal-card-border: rgba(0,0,0,.08);
  --modal-card-shadow: 0 18px 50px rgba(0,0,0,.12);

}

body.sepia-mode{
  --bg0: #F4ECD8;
  --bg1: #FDF6E3;
  --glass: rgba(91, 70, 54, 0.07);
  --glass2: rgba(91, 70, 54, 0.12);
  --stroke: rgba(91, 70, 54, 0.15);
  --text: #5B4636;
  --muted: #948678;
  --accent: #D33682;
  --shadow2: 0 10px 30px rgba(91, 70, 54, 0.1);
  --bg-main: #f4ecd8;
  --bg-panel: #fdf6e3;
  --text-main: #5b4636;
  --text-muted: #948678;
  --border-color: #eaddc5;
  --accent-color: #d33682;
  --opt-bg: #eee8d5;
  --opt-hover: #e4dcc3;

/* Modal surface overrides (Sepia) */
  --modal-overlay-bg: rgba(91,70,54,.04);

  --modal-card-bg: linear-gradient(180deg,
    rgba(253,246,227,.42),
    rgba(244,236,216,.18)
  );

  --modal-card-tint: transparent;
  --modal-card-border: rgba(91,70,54,.10);
  --modal-card-shadow: 0 18px 50px rgba(91,70,54,.12);

}

/* =========================================
   APPLE EXAM UI THEME (FINAL FULL VERSION)
   - Navigasyon Bar Sticky (Sabit) Yapıldı
   - Renklendirmeler ve Focus Modu Korundu
   ========================================= *//* ===== UNIFIED VARIABLES ===== *//* ☀️ LIGHT MODE OVERRIDE *//* 📖 SEPIA MODE OVERRIDE *//* ===== RESET ===== */*{
  box-sizing: border-box;
}/* ===== HEADER ===== */h1{
  margin: 0 0 6px;
  font-size: var(--fs-20);
}/* ===== LAYOUT ===== */main{
  max-width: 1300px;
  margin: 0 auto;
  padding: 14px 16px ;
  display: grid;
  grid-template-columns: 360px minmax(0,1fr);
  gap: 18px;
  height: calc(100vh - 100px); /* Header yüksekliğine göre ayarla */
  overflow: hidden; 
  box-sizing: border-box; /* Padding'in genişliğe dahil olmasını sağlar */
}@media (min-width: 1400px){

main{
  grid-template-columns: 400px minmax(0,1fr);
}
}@media (max-width:1100px){

main{
  grid-template-columns: 1fr;
}
}/* Sticky kontrol panel (Sol Taraf) */@media (min-width:1100px){

main > section:first-child{
  position: sticky;
  top: var(--s-6);
  align-self: start;
  max-height: calc(100vh - 28px);
  overflow: auto;
}main > section:first-child::-webkit-scrollbar{
  width: 10px;
}main > section:first-child::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: var(--r-md);
}
}/* ===== CARDS ===== */.card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
}@media (min-width:1100px){

main > section:last-child{
  padding: 18px 18px;
}
}/* ===== UTILS ===== */.row{
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: center;
}.between{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}.small,.meta{
  font-size: var(--fs-12);
  color: var(--muted);
}.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}/* ===== PILL ===== */.pill{
  font-size: var(--fs-12);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke);
  background: var(--glass);
  color: var(--muted);
  display: inline-flex;
  gap: var(--s-3);
  align-items: center;
}/* ===== INPUTS ===== */input[type="file"]{
  width: 100%;
}textarea, select, input[type="number"]{
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  color: var(--text);
  padding: var(--s-4);
}textarea{
  min-height: 140px;
  resize: vertical;
}textarea:focus, select:focus, input[type="number"]:focus{
  outline: none;
  border-color: rgba(10,132,255,.60);
  box-shadow: 0 0 0 4px rgba(10,132,255,.15);
}input[type="checkbox"]{
  accent-color: var(--accent);
}/* ===== BUTTONS ===== */button{
  background: var(--glass2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
  transition: filter .12s ease, transform .06s ease, border-color .12s ease;
}button:hover{
  filter: brightness(1.08);
  border-color: rgba(255,255,255,.18);
}button:active{
  transform: translateY(1px);
}button:disabled{
  opacity: .45;
  cursor: not-allowed;
}.primary{
  background: rgba(10,132,255,.25);
  border-color: rgba(10,132,255,.40);
}.ok{
  background: rgba(52,199,89,.18);
  border-color: rgba(52,199,89,.40);
}.bad{
  background: rgba(255,69,58,.18);
  border-color: rgba(255,69,58,.40);
}.ghost{
  background: rgba(255,255,255,.02);
}main > section:first-child .toolbar button{
  flex: 1 1 140px;
}@media (max-width:1100px){

main > section:first-child .toolbar button{
  flex: 1 1 160px;
}
}/* ===== TOOLBAR ===== */.toolbar{
  margin-top: var(--s-4);
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: center;
  padding: var(--s-5);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
}.sep{
  flex: 1;
}/* ===== WARN ===== */.warnBox{
  display: none;
  margin-top: var(--s-4);
  border: 1px solid rgba(255,159,10,.45);
  background: rgba(255,159,10,.10);
  padding: var(--s-4);
  border-radius: var(--radius);
  color: rgba(255,236,200,.95);
  font-size: var(--fs-12);
  white-space: pre-wrap;
}/* ===== KPI ===== */.kpi{
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--s-4);
}.kpi .v{
  font-size: var(--fs-18);
  font-weight: 700;
}.kpi .l{
  font-size: var(--fs-12);
  color: var(--muted);
}/* ===== EXAM LAYOUT ===== */@media (max-width:980px){

.layoutExam{
  grid-template-columns: 1fr;
}



.navPanel{
  position: static;
  max-height: none;
}
}/* --- DURUMLAR --- *//* 1. AKTİF (Şu an çözülen) *//* 2. İŞARETLENMİŞ (Mavi) *//* 3. SONUÇ - DOĞRU (Yeşil) */.navBtn.correct{
  background: rgba(52, 199, 89, 0.2);
  border-color: rgba(52, 199, 89, 0.6);
  color: #b9fbc0;
}
/* Ziyaret edildi ama cevap verilmedi — soluk turuncu kenarlık */
.navBtn.visited-unanswered{
  border-color: rgba(251, 191, 36, 0.5);
  background: rgba(251, 191, 36, 0.07);
  color: rgba(251, 191, 36, 0.85);
}/* 4. SONUÇ - YANLIŞ (Kırmızı) *//* 5. SONUÇ - BOŞ (Turuncu) *//* ===== QUESTIONS ===== *//* Options */.opt input[type="radio"]{
  width: auto;
  margin-top: 2px;
}.opt.correct{
  border-color: rgba(52,199,89,.60);
  background: rgba(52,199,89,.12);
}.opt.wrong{
  border-color: rgba(255,69,58,.60);
  background: rgba(255,69,58,.10);
}/* Badge */.badge{
  font-size: var(--fs-11);
  padding: 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke);
  background: var(--glass);
  color: var(--muted);
}.badge.ok{
  border-color: var(--ok);
  color: #b9fbc0;
  background: rgba(52,199,89,.15);
}.badge.bad{
  border-color: var(--bad);
  color: #ffd0cd;
  background: rgba(255,69,58,.15);
}.badge.warn{
  border-color: var(--warn);
  color: #ffe7b3;
  background: rgba(255,159,10,.15);
}/* =========================================
   FOCUS MODE - KESİN DÜZELTMELER
   ========================================= *//* Focus modda ana bileşenleri gizle */body.focusMode header,
body.focusMode main > section:first-child,
body.focusMode .navPanel,
body.focusMode #resultTools,
body.focusMode #examTitle,
body.focusMode #examMeta,
body.focusMode .row{
  display: none !important;
}body.focusMode main{
  display: block !important;
  max-width: 800px !important;
  margin: 80px auto 0 auto !important;
  padding: 0 20px 180px 20px !important;
}body.focusMode .layoutExam{
  display: block !important;
  margin-top: 0 !important;
}/* FOCUS ÜST BAR (TOP BAR) */.focusBar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  padding: 0 16px;
  z-index: var(--z-10000);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(5, 6, 10, 0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}.focusBar .pill{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
  color: var(--white);
  font-size: var(--fs-14);
  padding: 8px 12px;
}/* Sınavı Bitir Butonu */#btnFinishFocus{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 16px;
  margin-left: auto;
  margin-right: var(--s-3);
  background: rgba(255, 69, 58, 0.25);
  border: 1px solid rgba(255, 69, 58, 0.5);
  color: #ff6055;
  font-weight: 700;
  font-size: var(--fs-13);
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
}#btnFinishFocus:hover{
  background: rgba(255, 69, 58, 0.35);
  transform: translateY(1px);
}#btnExitFocus{
  height: 36px;
  padding: 0 14px;
  font-size: var(--fs-13);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  border-radius: var(--r-sm);
}/* FOCUS ALT NAVİGASYON (FLOATING - YÜZEN BAR) */.focusMiniNav{
  position: fixed !important;
  left: 50% !important;
  bottom: 40px !important;
  transform: translateX(-50%) !important;
  z-index: var(--z-20000) !important;
  display: flex !important;
  align-items: center;
  gap: var(--s-4);
  padding: 10px 16px;
  background: rgba(20, 22, 30, 0.95);
  border: 1px solid var(--w-20);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  max-width: 90vw;
  white-space: nowrap;
}.focusMiniNav .dots{
  display: flex;
  gap: var(--s-2);
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0;
}.focusMiniNav .dots::-webkit-scrollbar{
  display: none;
}.focusMiniNav .navDot{
  min-width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.6);
  font-size: var(--fs-12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}.focusMiniNav .navDot:hover{
  background: rgba(255,255,255,.15);
  transform: translateY(-2px);
}.focusMiniNav .navDot.done{
  border-color: rgba(10,132,255,.5);
  background: rgba(10,132,255,.15);
  color: #5ac8fa;
}.focusMiniNav .navDot.active{
  border-color: #0A84FF;
  background: #0A84FF;
  color: white;
  font-weight: bold;
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(10,132,255,.4);
}.focusMiniNav .navPageBtn{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  color: white;
  font-size: var(--fs-18);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}.focusMiniNav .navPageBtn:hover{
  background: rgba(255,255,255,.1);
}.focusMiniNav .navPageBtn:disabled{
  opacity: 0.3;
  cursor: default;
}/* ===== MODAL & OVERLAYS ===== */.modalOverlay{
  position: fixed;
  inset: 0;
  background: var(--modal-overlay-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: var(--z-30000);
  backdrop-filter: blur(var(--modal-overlay-blur));
  -webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}

/* ===== SUMMARY: DUAL MODAL (KARNE + KONU DAĞILIMI) ===== */
.dualModalWrap{
  display:flex;
  align-items:flex-start;
  /* left-align the modal group (keeps side panel next to the main modal) */
  justify-content:flex-start;
  gap: 14px;
  width: 100%;
}
.modalCard--side{
  width: 320px;
  padding: 14px;
}
@media (max-width: 980px){
  .dualModalWrap{ flex-direction: column; align-items: stretch; }
  .modalCard--side{ width: 100%; }
}

.modalCard{
  width: var(--modal-w);
  border-radius: var(--modal-radius);
  padding: var(--modal-pad);

  /* Glass surface (theme-aware tokens) */
  background: var(--modal-card-bg);
  background-color: var(--modal-card-tint);
  background-blend-mode: overlay;

  border: 1px solid var(--modal-card-border);
  box-shadow: var(--modal-card-shadow);

  backdrop-filter: blur(var(--modal-card-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--modal-card-blur)) saturate(140%);
}.modalTop{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--modal-header-gap);
  margin-bottom: var(--s-6);
}.modalTitle{
  font-size: var(--modal-title-size);
  font-weight: 800;
  letter-spacing: -0.2px;
}.modalSub{
  font-size: var(--modal-sub-size);
  color: var(--text-muted);
}.modalClose{
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  border-radius: 50%;
  background: var(--modal-close-bg);
  border: 1px solid var(--modal-close-border);
  color: var(--white);
  display: grid;
  place-items: center;
}.modalGrid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
}.modalKpi{
  background: rgba(255,255,255,.05);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  text-align: center;
}.modalKpi b{
  display: block;
  font-size: var(--fs-16);
  margin-bottom: 2px;
}.modalKpi span{
  font-size: var(--fs-11);
  color: var(--muted);
}.modalActions{
  display: flex;
  justify-content: flex-end;
  gap: var(--modal-actions-gap);
  margin-top: var(--modal-actions-mt);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}.modalActions button{
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  font-weight: 700;
}
/* Charts */.miniStat{
  padding: var(--s-3);
  background: rgba(255,255,255,.03);
  border-radius: var(--r-sm);
}.grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}.divider{
  height: 1px;
  background: var(--stroke);
  margin: 12px 0;
}/* Loading */.loadingOverlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-40000);
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}.loadingCard{
  background: #1c1c1e;
  padding: 20px 30px;
  border-radius: var(--r-2xl);
  display: flex;
  align-items: center;
  gap: var(--s-6);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}.spinner{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}@keyframes spin{to{transform: rotate(360deg);}}/* Toasts */.toastHost{
  position: fixed;
  bottom: var(--s-8);
  right: var(--s-8);
  z-index: var(--z-40000);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}/* Bildirimlerin giriş animasyonunu da sağdan gelecek şekilde güncelleyelim */.toast{
  background: rgba(28, 28, 30, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid var(--w-10) !important;
  padding: 12px 20px;
  border-radius: var(--r-xl);
  color: white;
  box-shadow: 0 8px 32px var(--b-30);
  animation: toastSlideIn 0.3s ease-out;
  min-width: 200px;
  max-width: 300px;
}.toast.ok{
  border-color: var(--ok);
}.toast.bad{
  border-color: var(--bad);
}.toast.warn{
  border-color: var(--warn);
}.tTitle{
  font-weight: 700;
  font-size: var(--fs-14);
  margin-bottom: 2px;
}.tMsg{
  font-size: var(--fs-13);
  color: rgba(255,255,255,.7);
}/* Aktif Soru Vurgusu */.q.active{
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow2);
}/* =========================================
   SRS (TEKRAR) WIDGET STİLLERİ
   (Bunu dosyanın en altına ekleyin)
   ========================================= */.srsWrap{
  margin-top: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}.srsLine{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--fs-13);
}.srsBtns{
  display: flex;
  gap: var(--s-3);
}.srsBtn:hover{
  background: rgba(255,255,255,.15);
  transform: translateY(-1px);
}.srsBtn[data-quality="3"]:hover{
  border-color: var(--bad);
  color: var(--bad);
}/* Zor */.srsBtn[data-quality="4"]:hover{
  border-color: var(--warn);
  color: var(--warn);
}/* Orta */.srsBtn[data-quality="5"]:hover{
  border-color: var(--ok);
  color: var(--ok);
}/* Kolay */.srsHint{
  margin-top: var(--s-2);
  font-size: var(--fs-11);
  color: var(--muted);
}/* =========================================
   FIX: Focus Modu Kapandığında Barı Gizle
   ========================================= */body:not(.focusMode) .focusMiniNav{
  display: none !important;
}/* =========================================
   GELİŞMİŞ SONUÇ MODALI (KARNE)
   ========================================= *//* Modalın yapısını değiştiriyoruz: Solda Grafik, Sağda Grid */.summaryLayout{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-8);
  align-items: start;
}@media (max-width: 600px){

.summaryLayout{
  grid-template-columns: 1fr;
  justify-items: center;
}
}
/* Summary: two-panel layout (topic distribution as separate "mini modal") */
.summaryRow{
  display:flex;
  gap: var(--s-10);
  align-items: flex-start;
}
.summaryMain{flex: 1; min-width: 0;}
.topicDistPanel{
  /* Keep as a separate mini-modal using modalCard tokens */
}
.topicDistTitle{
  font-weight: 800;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--text-main);
}
.topicDistRow{ margin-bottom: 10px; }
.topicDistMeta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #cbd5e1;
  margin-bottom: 6px;
}
.topicDistBar{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.topicDistFill{
  height: 100%;
  border-radius: 999px;
  background: rgba(56,189,248,.9);
  width: 0%;
  transition: width 0.8s cubic-bezier(.22,.61,.36,1);
}
@media (max-width: 860px){
  .summaryRow{ flex-direction: column; }
  .topicDistPanel{ width: 100%; }
}
/* Grafik Alanı */.chartContainer{
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}/* Grafiğin ortasındaki puan */.chartCenter{
  position: absolute;
  text-align: center;
  pointer-events: none;
}.chartCenter .scoreVal{
  font-size: 28px;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
}.chartCenter .scoreLabel{
  font-size: var(--fs-11);
  color: var(--muted);
  margin-top: 2px;
}/* Detay Grid (Daha kompakt) */.summaryGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  width: 100%;
}.statCard{
  background: var(--w-03);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
}.statCard b{
  font-size: var(--fs-16);
  margin-bottom: 2px;
}.statCard span{
  font-size: var(--fs-11);
  color: var(--muted);
}/* Renkli vurgular */.statCard.ok b{
  color: var(--ok);
}.statCard.bad b{
  color: var(--bad);
}.statCard.warn b{
  color: var(--warn);
}/* Alt Butonlar */.summaryActions{
  margin-top: var(--s-8);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--stroke);
  padding-top: var(--s-6);
}/* =========================================
   MODERN KONTROL PANELİ STİLLERİ
   ========================================= *//* TABS & INPUTS */.input-group{
  background: var(--w-03);
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
  overflow: hidden;
}.tabs{
  display: flex;
  background: var(--b-20);
}.tab-btn{
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: var(--fs-12);
  padding: var(--s-4);
  border-radius: 0;
}.tab-btn.active{
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--w-02);
}.tab-content{
  display: none;
  padding: var(--s-5);
}.tab-content.active{
  display: block;
}/* DROP ZONE */.drop-zone{
  border: 2px dashed var(--stroke);
  border-radius: var(--r-sm);
  padding: var(--s-8);
  text-align: center;
  cursor: pointer;
  transition: .2s;
  display: block;
}.drop-zone:hover{
  border-color: var(--accent);
  background: rgba(10,132,255,0.05);
}.dz-icon{
  font-size: 24px;
  margin-bottom: 5px;
}.dz-text{
  font-size: var(--fs-12);
  color: var(--muted);
  line-height: 1.4;
}.dz-text .lnk{
  color: var(--accent);
  text-decoration: underline;
}/* SETTINGS BOX */.settings-box{
  background: var(--w-03);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}.setting-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}.setting-row.low-gap{
  margin-bottom: 0;
  justify-content: flex-start;
  gap: 15px;
}.inp-group label{
  display: block;
  font-size: var(--fs-11);
  color: var(--muted);
  margin-bottom: var(--s-1);
}.inp-group input{
  width: 70px;
  padding: var(--s-2);
  font-size: var(--fs-13);
  border-radius: var(--r-xs);
}.toggles{
  display: flex;
  gap: var(--s-3);
}.toggle{
  font-size: var(--fs-11);
  background: var(--w-05);
  padding: 6px 10px;
  border-radius: var(--r-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid transparent;
}.toggle:has(input:checked){
  background: rgba(10,132,255,0.15);
  border-color: rgba(10,132,255,0.3);
  color: var(--white);
}.chk{
  font-size: var(--fs-11);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}/* MAIN ACTIONS */.btn-lg{
  width: 100%;
  padding: var(--s-5);
  font-size: var(--fs-14);
  font-weight: 700;
  border-radius: var(--r-md);
}.sub-actions{
  display: flex;
  gap: var(--s-3);
}.sub-actions button{
  flex: 1;
  font-size: var(--fs-12);
  padding: var(--s-3);
}/* TOOLS SECTION */.tools-grid button{
  font-size: var(--fs-12);
  padding: var(--s-3);
  background: rgba(255,255,255,0.04);
  border-color: var(--stroke);
}.text-btn:hover{
  color: var(--text);
  text-decoration: underline;
  background: none;
}/* TIMER */.panel-timer{
  background: var(--b-30);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--stroke);
}.panel-timer .large{
  font-size: var(--fs-18);
  color: var(--text);
}/* RETRY BUTTON STİLİ */button.warn{
  background: rgba(255, 159, 10, 0.20);
  border: 1px solid rgba(255, 159, 10, 0.45);
  color: #ffb340;
  transition: all 0.2s ease;
}button.warn:hover{
  background: rgba(255, 159, 10, 0.30);
  transform: translateY(-1px);
}/* AI BUTONU VE AÇIKLAMA KUTUSU *//* "Neden?" Butonu */.btn-ai-explain{
  background: linear-gradient(135deg, #6366f1, var(--brand));
  border: none;
  color: white;
  font-size: var(--fs-11);
  padding: 4px 10px;
  border-radius: var(--r-lg);
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: var(--s-3);
  box-shadow: 0 2px 5px rgba(168, 85, 247, 0.4);
  transition: .2s;
}.btn-ai-explain:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(168, 85, 247, 0.6);
}/* Açıklama Alanı */.ai-box{
  margin-top: var(--s-5);
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: var(--r-sm);
  padding: var(--s-5);
  font-size: var(--fs-13);
  line-height: 1.5;
  color: #e9d5ff;
  display: none;
  animation: fadeIn 0.3s ease;
}.ai-box strong{
  color: var(--white);
}/* Pre-stored AI explanation — shown inline on wrong/blank answers in result mode */.q-explanation{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
  padding: 10px 13px;
  background: rgba(168,85,247,.07);
  border: 1px solid rgba(168,85,247,.25);
  border-left: 3px solid #a855f7;
  border-radius: 8px;
  animation: fadeIn .3s ease;
}.q-explanation-icon{
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}.q-explanation-text{
  font-size: 12.5px;
  line-height: 1.6;
  color: #e9d5ff;
  flex: 1;
}.q-explanation--collapsed{
  opacity: .55;
  cursor: pointer;
  background: rgba(168,85,247,.04);
  border-color: rgba(168,85,247,.15);
}.q-explanation--collapsed:hover{
  opacity: .85;
  border-color: rgba(168,85,247,.3);
}.q-explanation--collapsed .q-explanation-text{
  display: none;
}.q-explanation-toggle{
  font-size: 11px;
  color: #a855f7;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
}/* Yükleniyor Animasyonu */.ai-loading{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-style: italic;
  color: var(--brand);
}.ai-loading::after{
  content: "✨ Gemini düşünüyor...";
}@keyframes fadeIn{from { opacity:0; transform:translateY(-5px); }to { opacity:1; transform:translateY(0); }}/* AI GENERATOR - BENZER SORU MODU */.btn-ai-similar{
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  color: white;
  font-size: var(--fs-11);
  padding: 4px 10px;
  border-radius: var(--r-lg);
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: var(--s-2);
  box-shadow: 0 2px 5px rgba(245, 158, 11, 0.4);
  transition: .2s;
}.btn-ai-similar:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(245, 158, 11, 0.6);
}/* Yeni Soru Kutusu */.ai-challenge-box{
  margin-top: 15px;
  border: 2px dashed #f59e0b;
  border-radius: var(--r-lg);
  padding: 15px;
  background: rgba(245, 158, 11, 0.08);
  animation: fadeIn 0.4s ease;
}.ai-challenge-header{
  color: #fbbf24;
  font-weight: bold;
  font-size: var(--fs-13);
  margin-bottom: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}.ai-new-q-text{
  font-size: var(--fs-15);
  font-weight: 500;
  margin-bottom: var(--s-5);
  line-height: 1.5;
  color: var(--white);
}/* AI Şıkları */.ai-opt-btn{
  display: block;
  width: 100%;
  text-align: left;
  background: var(--w-05);
  border: 1px solid #444;
  padding: 10px 12px;
  margin-bottom: var(--s-3);
  border-radius: var(--r-sm);
  color: #ddd;
  cursor: pointer;
  transition: all 0.2s;
}.ai-opt-btn:hover{
  background: var(--w-10);
  border-color: #666;
}/* Doğru/Yanlış Durumları */.ai-opt-btn.correct{
  background: var(--success) !important;
  border-color: var(--success);
  color: white;
  font-weight: bold;
}.ai-opt-btn.wrong{
  background: var(--danger) !important;
  border-color: var(--danger);
  color: white;
  opacity: 0.7;
}.ai-opt-btn.disabled{
  pointer-events: none;
}.ai-explanation{
  margin-top: var(--s-4);
  padding: var(--s-4);
  background: var(--b-20);
  border-radius: var(--r-xs);
  font-size: var(--fs-13);
  color: #fbbf24;
  display: none;
}/* ============================================================ *//* 🌓 TEMA YÖNETİMİ & RENK AYARLARI (CLEAN VERSION)             *//* ============================================================ *//* 1. TEMEL DEĞİŞKENLER (ALIAS - UNIFIED THEME) *//* 2. MOD TANIMLARI (DEĞİŞKENLER) *//* ☀️ AYDINLIK MOD *//* 📖 KİTAP (SEPYA) MODU *//* 3. GLOBAL TEMA UYGULAMASI (ZORLAYICI KURALLAR) *//* Ana Gövde */body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               "SF Pro Display","SF Pro Text","Segoe UI",Roboto,Ubuntu,Arial;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background 0.25s ease, color 0.2s ease;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(34,197,94,.10), transparent 60%),
              radial-gradient(900px 600px at 90% 20%, rgba(6,182,212,.10), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  transition: background 0.3s, color 0.3s;
}/* Metin Okunabilirliği (Light/Sepia için zorunlu) */body.light-mode h1, body.sepia-mode h1,
body.light-mode h2, body.sepia-mode h2,
body.light-mode h3, body.sepia-mode h3,
body.light-mode p, body.sepia-mode p,
body.light-mode span, body.sepia-mode span,
body.light-mode div, body.sepia-mode div,
body.light-mode label, body.sepia-mode label,
body.light-mode b, body.sepia-mode b,
body.light-mode i, body.sepia-mode i,
body.light-mode .qText, body.sepia-mode .qText,
body.light-mode .sub, body.sepia-mode .sub,
body.light-mode .muted, body.sepia-mode .muted,
body.light-mode .meta, body.sepia-mode .meta{
  color: var(--text-main) !important;
}/* Silik Yazılar (Override) */body.light-mode .sub, body.sepia-mode .sub,
body.light-mode .muted, body.sepia-mode .muted,
body.light-mode .meta, body.sepia-mode .meta,
body.light-mode .srsHint, body.sepia-mode .srsHint{
  color: var(--text-muted) !important;
}/* 4. ARAYÜZ ELEMANLARI (KARTLAR, BUTONLAR, INPUTLAR) *//* Arka Plan ve Kenarlıklar */body.light-mode .card, body.sepia-mode .card,
body.light-mode .settings-box, body.sepia-mode .settings-box,
body.light-mode .toolbar, body.sepia-mode .toolbar,
body.light-mode .navGrid, body.sepia-mode .navGrid,
body.light-mode input, body.sepia-mode input,
body.light-mode textarea, body.sepia-mode textarea,
body.light-mode select, body.sepia-mode select{
  background-color: var(--bg-panel) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}/* Şıklar (Options) */body.light-mode .opt, body.sepia-mode .opt{
  background-color: var(--opt-bg) !important;
  border-color: var(--border-color) !important;
}body.light-mode .opt:hover, body.sepia-mode .opt:hover{
  background-color: var(--opt-hover) !important;
}/* Butonlar (Genel) - Yazıyı Koyu Yap */body.light-mode button, body.sepia-mode button,
body.light-mode .g-btn, body.sepia-mode .g-btn,
body.light-mode input[type="button"], body.sepia-mode input[type="button"],
body.light-mode input[type="submit"], body.sepia-mode input[type="submit"]{
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}/* Ana Aksiyon Butonları (Başlat/Bitir) - Ekstra Vurgu */body.light-mode #btnStart, body.sepia-mode #btnStart,
body.light-mode #btnFinish, body.sepia-mode #btnFinish,
body.light-mode #btnReset, body.sepia-mode #btnReset{
  color: #000 !important;
  font-weight: 800;
}/* 5. NAVİGASYON (AKILLI RENKLENDİRME) *//* Durum A: Boş Kutular (Koyu Yazı) */body.light-mode .navBtn, body.sepia-mode .navBtn{
  color: var(--text-main) !important;
  background: transparent !important;
  border: 1px solid var(--border-color) !important;
}/* Durum B: Aktif Soru (Vurgulu) */body.light-mode .navBtn.active, body.sepia-mode .navBtn.active{
  color: var(--text-main) !important;
  border-color: var(--accent) !important;
  background: rgba(10, 132, 255, 0.15) !important;
  font-weight: 900;
  box-shadow: 0 0 0 2px var(--accent) !important;
}/* Durum C: Sonuçlar (Renkli Yazı - Okunabilirlik İçin) */body.light-mode .navBtn.answered, body.sepia-mode .navBtn.answered{
  color: #0056b3 !important;
  background: rgba(10, 132, 255, 0.25) !important;
  border-color: #0056b3 !important;
}body.light-mode .navBtn.correct, body.sepia-mode .navBtn.correct{
  color: #14532d !important;
  background: rgba(34, 197, 94, 0.3) !important;
  border-color: #14532d !important;
}body.light-mode .navBtn.wrong, body.sepia-mode .navBtn.wrong{
  color: #7f1d1d !important;
  background: rgba(239, 68, 68, 0.25) !important;
  border-color: #7f1d1d !important;
}body.light-mode .navBtn.empty-result, body.sepia-mode .navBtn.empty-result{
  color: #7c2d12 !important;
  background: rgba(249, 115, 22, 0.25) !important;
}/* 6. İSTİSNALAR (Rengini Koruması Gerekenler) *//* Toast mesajları, Badge'ler ve AI butonları her zaman beyaz yazı kalsın */body.light-mode .toast, body.sepia-mode .toast,
body.light-mode .toast div, body.sepia-mode .toast div,
body.light-mode .badge, body.sepia-mode .badge,
body.light-mode .btn-ai-explain, body.sepia-mode .btn-ai-explain,
body.light-mode .btn-ai-similar, body.sepia-mode .btn-ai-similar{
  color: var(--white) !important;
}/* AI Kutusu (Zemini renkli olduğu için yazısı açık renk kalmalı) */body.light-mode .ai-box, body.sepia-mode .ai-box,
body.light-mode .ai-challenge-box, body.sepia-mode .ai-challenge-box{
  color: inherit !important;
}/* =========================================
   SRS DASHBOARD (Analiz Paneli) STİLLERİ
   ========================================= *//* Renkli Vurgular *//* Mavi *//* Turuncu *//* Yeşil *//* Grafik Kutusu *//* =========================================
   KARNE BUTONLARI FIX (ELIF ÖZEL)
   - Root silinse bile bu butonlar görünür kalır
   ========================================= *//* 1. Hataları Tekrarla Butonu (Turuncu) */.summaryActions button.warn,
button[onclick*="retry"],
.srsBtn[data-quality]{
  background: rgba(255, 159, 10, 0.15) !important;
  border: 1px solid rgba(255, 159, 10, 0.4) !important;
  color: #c27800 !important;
  display: inline-flex !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
}/* 2. İncele Butonu (Pembe/Kırmızı) */.summaryActions button.bad,
button[onclick*="review"],
.modalActions .ghost{
  background: rgba(255, 69, 58, 0.1) !important;
  border: 1px solid rgba(255, 69, 58, 0.3) !important;
  color: #d73a30 !important;
  display: inline-flex !important;
  padding: 10px 16px !important;
}/* 3. Tamam Butonu (Mavi) */.summaryActions .primary,
button#btnFinishModal{
  background: rgba(10, 132, 255, 0.2) !important;
  border: 1px solid rgba(10, 132, 255, 0.4) !important;
  color: #007aff !important;
  display: inline-flex !important;
  padding: 10px 16px !important;
}/* Karanlık modda yazı renklerini tekrar parlat */body:not(.light-mode):not(.sepia-mode) .summaryActions button{
  color: var(--white) !important;
}.step-icon{
  font-size: 24px;
  background: var(--glass);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid var(--stroke);
}.step-text{
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text-muted);
}.step-text strong{
  display: block;
  color: var(--text-main);
  margin-bottom: var(--s-1);
}.dot.active{
  background: var(--accent);
  width: 20px;
  border-radius: var(--r-md);
}/* İçerik animasyonu */.onboarding-page{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  animation: fadeIn 0.4s ease;
}.step-item{
  display: flex;
  gap: 15px;
  margin-bottom: var(--s-8);
  align-items: flex-start;
  background: var(--w-02);
  padding: 15px;
  border-radius: var(--r-2xl);
  border: 1px solid var(--stroke);
}/* SRS konu chip *//* ============================================================ *//* FIX: LIGHT VE SEPIA MODDA DOĞRU/YANLIŞ GÖRÜNÜM DÜZELTMESİ    *//* ============================================================ *//* Doğru Cevap (Yeşil) - Light ve Sepia Mod */body.light-mode .opt.correct,
body.sepia-mode .opt.correct{
  background-color: rgba(52, 199, 89, 0.25) !important;
  border-color: #28a745 !important;
  color: #14532d !important;
}/* Yanlış Cevap (Kırmızı) - Light ve Sepia Mod */body.light-mode .opt.wrong,
body.sepia-mode .opt.wrong{
  background-color: rgba(255, 69, 58, 0.20) !important;
  border-color: #dc3545 !important;
  color: #7f1d1d !important;
}/* Seçili Radyo Butonu Vurgusu (Opsiyonel Güzelleştirme) */body.light-mode .opt.correct input, body.sepia-mode .opt.correct input{
  accent-color: #28a745;
}body.light-mode .opt.wrong input, body.sepia-mode .opt.wrong input{
  accent-color: #dc3545;
}/* =========================================
   YENİ HEADER & TOOLBAR TASARIMI
   ========================================= */header{
  padding: 20px 20px 10px 20px;
  max-width: 1300px;
  margin: 0 auto;
}.titles h1{
  margin: 0 0 4px 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}.titles .sub{
  font-size: var(--fs-13);
  color: var(--muted);
  font-weight: 500;
}/* Sağ Üst Araç Çubuğu */.top-toolbar{
  display: flex;
  align-items: center;
  gap: var(--s-7);
  background: var(--w-03);
  border: 1px solid var(--stroke);
  padding: 6px 8px;
  border-radius: var(--r-xl);
  backdrop-filter: blur(10px);
}/* Durum Grubu (Pills) */.h-val{
  font-weight: 600;
  color: var(--text);
}/* Tema Butonu (Toolbar İçinde) */.theme-switcher{
  background: transparent !important;
  border: 1px solid transparent !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  border-radius: 8px !important;
  height: 32px;
  display: flex;
  align-items: center;
}.theme-switcher:hover{
  background: var(--glass2) !important;
  border-color: var(--stroke) !important;
}/* Mobil Uyumluluk */@media (max-width: 600px){

.header-content{
  flex-direction: column;
  align-items: flex-start;
}.top-toolbar{
  width: 100%;
  justify-content: space-between;
}.status-group{
  flex: 1;
  border-right: none;
}
}/* =========================================
   KONTROL MERKEZİ HEADER TASARIMI
   ========================================= *//* Sol Taraf: İkon ve Başlık */.p-icon{
  font-size: var(--fs-16);
  opacity: 0.8;
}.panel-header h3{
  margin: 0;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}/* Sağ Taraf: Durum Göstergesi (Status Badge) */.status-badge{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  background: rgba(10, 132, 255, 0.1);
  border: 1px solid rgba(10, 132, 255, 0.2);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  transition: all 0.3s ease;
}/* Yanıp sönen nokta (Canlılık katar) */.status-dot{
  width: 6px;
  height: 6px;
  background-color: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s infinite;
}/* Durum Metni */#parseStatus{
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}/* Nefes alma animasyonu */@keyframes pulse{0% { opacity: 1; transform: scale(1); }50% { opacity: 0.5; transform: scale(0.9); }100% { opacity: 1; transform: scale(1); }}/* Tema Uyumluluğu (Light/Sepia Mod İçin Renk Ayarı) */body.light-mode .status-badge, body.sepia-mode .status-badge{
  background: rgba(0, 0, 0, 0.05);
  border-color: var(--b-10);
}body.light-mode #parseStatus, body.sepia-mode #parseStatus{
  color: var(--text-muted);
}body.light-mode .status-dot, body.sepia-mode .status-dot{
  background-color: var(--ok);
  box-shadow: none;
}/* =========================================
   DİNAMİK AI UYARISI (MINIMIZE/MAXIMIZE)
   ========================================= *//* --- BAR KONUMU --- */.ai-disclaimer-bar{
  position: fixed;
  bottom: var(--s-8);
  left: var(--s-8);
  z-index: var(--z-10000);
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
}
.ai-disclaimer-bar .d-text-wrapper{
  transition: width 0.5s ease, opacity 0.4s ease, max-width 0.5s ease;
  max-width: 320px;
}
.ai-disclaimer-bar.minimized .d-text-wrapper{
  max-width: 0 !important;
  width: 0 !important;
  opacity: 0;
  overflow: hidden;
}
.ai-disclaimer-bar.minimized .disclaimer-track{
  padding-right: 3px;
}
.ai-disclaimer-bar.minimized{
  opacity: 0.55;
  transition: opacity 0.3s;
}
.ai-disclaimer-bar.minimized:hover{
  opacity: 1;
}/* --- ANA GÖVDE (GLASS EFEKTİ - TEMA DOSTU) --- */.ai-disclaimer-bar .disclaimer-track{
  display: flex;
  align-items: center;
  background: var(--glass-bg, var(--w-10));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border, var(--w-20));
  box-shadow: 0 4px 20px var(--b-10);
  border-radius: 99px;
  height: 44px;
  padding: 3px;
  overflow: hidden;
}/* Koyu mod aktifse barın arka planını karart (Eğer body'de class varsa) */body.dark-mode .ai-disclaimer-bar .disclaimer-track,
body.dark-theme .ai-disclaimer-bar .disclaimer-track{
  background: rgba(30, 30, 30, 0.6);
  border-color: var(--w-10);
}/* --- 1. LOGO KUTUSU (SABİT & SAĞLAM) --- */.ai-disclaimer-bar .d-logo-circle{
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 50%;
  cursor: help;
  z-index: var(--z-10);
  animation: bounceIcon 3s infinite ease-in-out;
}/* İkonun Kendisi *//* --- 2. YAZI KUTUSU (KAPANAN ALAN) --- */.ai-disclaimer-bar .d-text-wrapper{
  overflow: hidden;
  max-width: 400px;
  opacity: 1;
  margin-left: var(--s-3);
  animation: closeTextZone 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 10s;
}/* --- 3. KAYAN YAZI --- */.ai-disclaimer-bar .d-marquee{
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 500;
  color: inherit;
  display: inline-block;
  padding-left: 100%;
  animation: scrollLinear 9s linear infinite;
}/* --- ANİMASYONLAR --- */@keyframes closeTextZone{to {
        max-width: 0;
        opacity: 0;
        margin-left: 0; /* Boşluğu sıfırla */
    }}@keyframes scrollLinear{from { transform: translateX(0); }to { transform: translateX(-100%); }}@keyframes bounceIcon{0%, 100% { transform: translateY(0); }50% { transform: translateY(-4px); }}/* --- 4. HOVER (ÜZERİNE GELİNCE AÇ) --- *//* Animasyonu eziyoruz */.ai-disclaimer-bar:hover .d-text-wrapper{
  animation: none !important;
  max-width: 400px !important;
  opacity: 1 !important;
  margin-left: 8px !important;
}/* Hover olunca yazı dursun */.ai-disclaimer-bar:hover .d-marquee{
  animation-play-state: paused;
}.disclaimer-content{
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 99px;
  padding: 8px 8px 8px 16px;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  pointer-events: auto;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  max-width: 500px;
  overflow: hidden;
}/* --- İÇERİK METNİ --- */.d-text{
  font-size: var(--fs-11);
  color: #555;
  font-weight: 500;
  white-space: nowrap;
}
  opacity: 1;
  transition: opacity 0.2s ease;
}.d-icon{
  color: currentColor;
  filter: drop-shadow(0 2px 5px var(--b-20));
  font-size: var(--fs-14);
}/* --- TOGGLE BUTONU --- */.d-toggle-btn{
  background: rgba(0,0,0,0.05);
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  transition: all 0.3s ease;
  padding: 0;
}.d-toggle-btn:hover{
  background: var(--b-10);
  transform: scale(1.1);
}.d-toggle-btn svg{
  transition: transform 0.4s ease;
}/* Koyu Tema Uyumu */body:not(.light-mode):not(.sepia-mode) .disclaimer-content{
  background: rgba(20, 20, 20, 0.6);
  border-color: var(--w-10);
}body:not(.light-mode):not(.sepia-mode) .d-text,
body:not(.light-mode):not(.sepia-mode) .d-toggle-btn{
  color: rgba(255, 255, 255, 0.6);
}.srsWrap.srsPulse{
  animation: srsPulse .28s ease-out;
}@keyframes srsPulse{0% { transform: translateY(0); }50% { transform: translateY(-2px); }100% { transform: translateY(0); }}/* ===== SRS TOOLTIP ===== */.srsBtn{
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  font-size: var(--fs-12);
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
}.srsBtn::after{
  content: attr(data-tip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  background: rgba(25, 25, 28, 0.95);
  color: #e5e7eb;
  font-size: var(--fs-12);
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
  box-shadow: 0 6px 18px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
  transition: all .18s ease;
  z-index: var(--z-50);
}.srsBtn::before{
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: rgba(25,25,28,.95) transparent transparent transparent;
  transition: all .18s ease;
}.srsBtn:hover::after,
.srsBtn:hover::before{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}.srsBtn[data-quality="3"]::after{
  border-left: 3px solid #f59e0b;
}/* amber */.srsBtn[data-quality="4"]::after{
  border-left: 3px solid #3b82f6;
}/* blue */.srsBtn[data-quality="5"]::after{
  border-left: 3px solid #22c55e;
}/* green *///* =========================================
   1. ARCADE / KOMBO EFEKTLERİ
   ========================================= */
.combo-container{
  position: fixed;
  top: 15%;
  right: 5%;
  z-index: var(--z-1000);
  text-align: center;
  pointer-events: none;
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}.combo-value{
  font-size: 64px;
  font-weight: 900;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: rotate(-5deg);
  text-shadow: 0 4px 10px var(--b-20);
}.combo-label{
  font-size: var(--fs-14);
  color: var(--white);
  background: var(--b-30);
  padding: 4px 12px;
  border-radius: var(--r-3xl);
  backdrop-filter: blur(4px);
}/* Titreme Efekti */@keyframes shake{0%, 100% { transform: translateX(0); }25% { transform: translateX(-10px); }75% { transform: translateX(10px); }}.shake-screen{
  animation: shake 0.4s ease-in-out;
}/* =========================================
   3. ARAÇLAR (TOOLS) BÖLÜMÜ
   ========================================= */.sec-title{
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-muted, #888);
  margin-bottom: var(--s-5);
  text-transform: uppercase;
  padding-left: var(--s-1);
}.tools-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}/* Cam Butonlar */.glass-btn{
  background: var(--w-03);
  border: 1px solid var(--stroke, var(--w-10));
  color: var(--text-main, #eee);
  padding: 10px 8px;
  border-radius: var(--r-lg);
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  backdrop-filter: blur(4px);
}.glass-btn:not(:disabled):hover{
  background: var(--w-08);
  border-color: var(--accent, var(--brand));
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--b-10);
}.glass-btn:active{
  transform: scale(0.96);
}.glass-btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
  border-style: dashed;
}.glass-btn .icon{
  font-size: var(--fs-14);
  filter: grayscale(0.5);
  transition: filter 0.2s;
}.glass-btn:hover .icon{
  filter: grayscale(0);
  transform: scale(1.1);
}/* Mini Araçlar (Yan Yana) */.mini-tools{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px dashed var(--w-10);
}.text-btn{
  background: var(--w-02);
  border: 1px solid var(--w-05);
  color: var(--text-muted, #888);
  font-size: var(--fs-10);
  cursor: pointer;
  padding: 6px 4px;
  border-radius: var(--r-sm);
  transition: all 0.2s;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  white-space: nowrap;
}.text-btn:not(:disabled):hover{
  background: var(--w-08);
  color: var(--text-main, var(--white));
  border-color: var(--w-20);
}.text-btn.warn:hover{
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.3);
}/* Light Mode Override */body.light-mode .glass-btn{
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--b-10);
  color: #333;
}body.light-mode .glass-btn:hover{
  background: var(--b-06);
}/* =========================================
   4. LOGIN EKRANI
   ========================================= */.blob{
  position: absolute;
  filter: blur(80px);
  opacity: 0.6;
  animation: floatBlob 10s infinite alternate ease-in-out;
}.blob-1{
  width: 300px;
  height: 300px;
  background: #8e2de2;
  top: -50px;
  left: -50px;
}.blob-2{
  width: 400px;
  height: 400px;
  background: #4a00e0;
  bottom: -100px;
  right: -100px;
  animation-delay: -5s;
}@keyframes floatBlob{0% { transform: translate(0, 0) scale(1); }100% { transform: translate(30px, 50px) scale(1.1); }}@keyframes popIn{from { transform: scale(0.8); opacity: 0; }to { transform: scale(1); opacity: 1; }}@keyframes bounceDog{0%, 100% { transform: translateY(0); }50% { transform: translateY(-15px) rotate(5deg); }}.app-title{
  color: white;
  font-weight: 800;
  letter-spacing: 3px;
  margin: 0;
  font-size: 28px;
  text-shadow: 0 2px 10px var(--b-30);
}.app-subtitle{
  color: #b8b8d9;
  margin: 5px 0 30px;
  font-size: var(--fs-15);
  font-weight: 400;
}.google-btn:active{
  transform: scale(0.95);
}.login-error{
  color: #ff6b6b;
  font-size: var(--fs-13);
  margin-top: var(--s-4);
  display: none;
}.footer-note{
  margin-top: 25px;
  font-size: var(--fs-11);
  color: var(--w-30);
}/* =========================================
   BAĞIMSIZ ÇIKIŞ BUTONU (FIXED)
   ========================================= */.logout-fixed{
  position: fixed !important;
  top: 20px !important;
  right: 20px !important;
  z-index: var(--z-10000) !important;
  background: rgba(220, 38, 38, 0.85);
  color: white;
  border: 1px solid var(--w-20);
  padding: 8px 16px;
  border-radius: var(--r-3xl);
  font-size: var(--fs-13);
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-3);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}.logout-fixed:hover{
  background: var(--danger);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}/* Mobil için biraz küçültelim */@media (max-width: 600px){

.logout-fixed{
  top: 10px !important;
  right: 10px !important;
  padding: 6px 12px;
  font-size: var(--fs-11);
}
}/* =========================================
   GELİŞMİŞ LOGIN EKRANI TASARIMI
   ========================================= *//* Yüzen Semboller (Matematik/Okul İkonları) */.floating-icon{
  position: absolute;
  font-size: 40px;
  opacity: 0.15;
  color: white;
  animation: floatIcon 8s infinite ease-in-out;
  z-index: var(--z-1);
  pointer-events: none;
}.icon-1{
  top: 15%;
  left: 10%;
  animation-delay: 0s;
  font-size: 50px;
}.icon-2{
  bottom: 20%;
  left: 15%;
  animation-delay: 2s;
  font-size: 40px;
}.icon-3{
  top: 20%;
  right: 15%;
  animation-delay: 4s;
  font-size: 45px;
}.icon-4{
  bottom: 15%;
  right: 10%;
  animation-delay: 1s;
  font-size: 35px;
}@keyframes floatIcon{0%, 100% { transform: translateY(0) rotate(0deg); }50% { transform: translateY(-30px) rotate(15deg); }}/* Avatar Çerçevesi */.avatar-container{
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}.dog-anim{
  margin-bottom: var(--s-4);
  display: inline-block;
  font-size: 70px;
  z-index: var(--z-2);
  animation: bounceDog 3s infinite;
}/* Kartın Kendisi (Güncelleme) */.login-card{
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 40px 60px;
  border-radius: 30px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  background: rgba(20, 20, 30, 0.6);
  border: 1px solid var(--w-15);
}/* Karta Mouse Gelince Parlama */.card-shine{
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
        45deg,
        transparent 45%,
        var(--w-03) 50%,
        transparent 55%
    );
  transform: rotate(30deg);
  pointer-events: none;
  transition: transform 0.5s;
}/* Buton Efekti (Nefes Alma) */.google-btn{
  background: white;
  color: #333;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  font-size: var(--fs-16);
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px var(--w-20);
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  animation: btnBreath 3s infinite ease-in-out;
  border: 2px solid transparent;
}.google-btn:hover{
  border-color: var(--brand);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}/* Butonun üzerinden geçen ışık */.btn-shine{
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  animation: shineMove 3s infinite;
}@keyframes shineMove{0% { left: -100%; }20% { left: 200%; }/* Hızlıca geçsin */100% { left: 200%; }/* Beklesin */}@keyframes btnBreath{0%, 100% { transform: scale(1); }50% { transform: scale(1.02); }}/* =========================================
   HEADER İNCE AYAR (HİZALAMA & ÇIKIŞ)
   ========================================= *//* Sağ Tarafı Düzenle *//* Çıkış Butonu (Header İçi Zarif Stil) *//* =========================================
   ÇIKIŞ BUTONU (DÜZELTİLMİŞ HAP MODÜLÜ)
   ========================================= */.btn-logout-header{
  position: static !important;
  margin: 0 !important;
  height: 36px;
  width: auto !important;
  min-width: 36px;
  padding: 0 12px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  white-space: nowrap;
}
  transition: all 0.2s ease;
}/* Hover Efekti */.btn-logout-header:hover{
  background: rgba(239, 68, 68, 0.25);
  border-color: var(--danger);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}/* --- TEMA UYUMLULUĞU --- *//* Açık Mod (Light) */body.light-mode .btn-logout-header{
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}body.light-mode .btn-logout-header:hover{
  background: #fecaca;
  border-color: var(--danger);
}/* Sepya Mod */body.sepia-mode .btn-logout-header{
  background: rgba(120, 50, 50, 0.1);
  border-color: rgba(120, 50, 50, 0.2);
  color: #8a3b3b;
}/* MOBİL İÇİN KÜÇÜLTME */@media (max-width: 768px){

.btn-logout-header{
  padding: 0 8px;
  font-size: var(--fs-12);
}/* Mobilde sadece ikonu gösterip yazıyı gizleyebilirsin istersen *//* .btn-logout-header span { display: none; } */
}/* =========================================
   MODERN KONTROL MERKEZİ (SOL PANEL)
   ========================================= *//* Panel Genel Yapısı */
  .panel-left {
  gap: var(--s-5);
  display: flex;
  flex-direction: column;
  /* 100px yerine daha güvenli bir pay (örneğin 140px) bırakıyoruz */
  height: calc(100vh - 140px); 
  background: var(--w-02);
  border: 1px solid var(--w-05);
  backdrop-filter: blur(10px);
  border-radius: var(--r-3xl);
  /* Panelin kendisinin taşmasını engelliyoruz */
  overflow: hidden; 
  /* Sayfa boyutuna göre esnemesini sağlıyoruz */
  position: relative;
}
}.scrollable-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; /* Yatayda asla scroll çıkmasın */
  padding: var(--s-8);
  /* Scrollbar'ı daha zarif yapalım ki içerik alanından çalmasın */
  scrollbar-width: thin;
  scrollbar-color: var(--brand) transparent;
}

/* Chrome/Safari için ince scrollbar */
.scrollable-content::-webkit-scrollbar {
  width: 4px;
}
.scrollable-content::-webkit-scrollbar-thumb {
  background: var(--brand);
  border-radius: var(--r-pill);
}.panel-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important; /* Bu satır dikey hizalamayı sağlar */
  padding: 15px 20px !important;
  height: 64px !important; /* Yüksekliği sabitleyerek padding karmaşasını bitirir */
  border-bottom: 1px solid var(--w-05);
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  position: relative;
}.panel-title{
  display: flex;
  gap: var(--s-4);
  align-items: center;
}.icon-box{
  font-size: var(--fs-20);
  background: var(--w-05);
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}.title-text h3{
  margin: 0;
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--text-main);
}.status-text{
  font-size: var(--fs-11);
  color: var(--text-muted);
}/* Yeşil noktayı sağ tarafa çiviler */
.status-indicator {
  position: static !important; /* Absolute varsa mutlaka static yapmalıyız */
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  margin: 0 !important;
  background: #333;
  flex-shrink: 0;
}.status-indicator.ready {
  background: #10b981 !important; /* Başarılı yeşili */
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.6) !important;
}
.status-indicator.loading{
  background: #3b82f6 !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.55) !important;
}
.status-indicator.running{
  background: #ef4444 !important;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.55) !important;
}
.status-indicator.finished{
  background: #a855f7 !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.55) !important;
}

/* Label rengi (Kontrol Merkezi) */
#parseStatus.ready{ color:#10b981 !important; }
#parseStatus.loading{ color:#3b82f6 !important; }
#parseStatus.running{ color:#ef4444 !important; }
#parseStatus.finished{ color:#a855f7 !important; }

body.light-mode #parseStatus.ready,
body.sepia-mode #parseStatus.ready{ color:#0f766e !important; }
body.light-mode #parseStatus.loading,
body.sepia-mode #parseStatus.loading{ color:#1d4ed8 !important; }
body.light-mode #parseStatus.running,
body.sepia-mode #parseStatus.running{ color:#b91c1c !important; }
body.light-mode #parseStatus.finished,
body.sepia-mode #parseStatus.finished{ color:#7c3aed !important; }

/* Tabs (Kapsül Tasarım) *//* Dropzone (Dosya Alanı) */.modern-dropzone{
  border: 2px dashed var(--w-15);
  border-radius: var(--r-2xl);
  padding: 10px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  display: block;
  background: rgba(255,255,255,0.01);
}.modern-dropzone:hover{
  border-color: var(--brand);
  background: rgba(168, 85, 247, 0.05);
}.dz-icon-circle{
  font-size: 24px;
  margin-bottom: var(--s-3);
  opacity: 0.8;
}.dz-main-text{
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-main);
}.dz-sub-text{
  font-size: var(--fs-11);
  color: var(--text-muted);
  margin-top: 2px;
}.dz-filename{
  word-break: break-all;
  font-size: var(--fs-12);
  color: var(--brand);
  margin-top: var(--s-3);
  font-weight: bold;
}/* Metin Alanı */.glass-input{
  border: 2px dashed var(--w-15);
  border-radius: var(--r-2xl);
  padding: 10px 10px;
  text-align: left;
  cursor: text;
  caret-color: var(--accent, #a855f7);
  color: var(--text, rgba(255,255,255,.92));
  transition: border-color 0.2s ease, border-style 0.2s ease;
  display: block;
  background: rgba(255,255,255,0.01);
}.glass-input:focus{
  border-color: var(--brand);
  border-style: solid;
  outline: none;
}textarea.glass-input{
  min-height: 80px;
  resize: vertical;
}/* Ayarlar & Switchler */.config-section{
  margin-top: var(--s-8);
}.config-title{
  font-size: var(--fs-10);
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: var(--s-4);
}.config-label{
  font-size: var(--fs-13);
  color: var(--text-main);
}.switches-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}.switch-card{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  background: var(--w-03);
  padding: 8px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background 0.2s;
  border: 1px solid transparent;
}.switch-card:hover{
  background: var(--w-06);
}.switch-card input{
  display: none;
}/* Checkbox'ı gizle */.switch-card .label{
  font-size: var(--fs-12);
  color: #bbb;
  user-select: none;
}/* Özel Switch Tasarımı (iOS Tarzı) */.slider{
  width: 28px;
  height: 16px;
  background: #444;
  border-radius: var(--r-3xl);
  position: relative;
  transition: 0.3s;
}.slider::before{
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: 0.3s;
}input:checked + .slider{
  background: var(--brand);
}input:checked + .slider::before{
  transform: translateX(12px);
}input:checked ~ .label{
  color: var(--white);
}/* Butonlar */.btn-hero{
  background: linear-gradient(135deg, var(--brand), #7c3aed);
  color: white;
  border: none;
  padding: var(--s-6);
  border-radius: var(--r-xl);
  font-size: var(--fs-14);
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}.btn-hero:disabled{
  background: #333;
  color: #666;
  cursor: not-allowed;
}.btn-hero:not(:disabled):hover{
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(168, 85, 247, 0.4);
}.sub-actions-row{
  display: flex;
  gap: var(--s-4);
}.btn-secondary{
  flex: 1;
  background: var(--w-05);
  border: 1px solid var(--w-10);
  color: #ccc;
  padding: var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}.btn-secondary:hover{
  background: var(--w-10);
  color: var(--white);
}.btn-secondary.ok:hover{
  border-color: var(--success);
  color: var(--success);
  background: rgba(16, 185, 129, 0.1);
}.btn-secondary.bad:hover{
  border-color: var(--danger);
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}/* AI Magic Button */.btn-ai-magic{
  width: 100%;
  margin-top: var(--s-4);
  background: linear-gradient(90deg, #f59e0b, #d97706);
  border: none;
  color: var(--white);
  padding: var(--s-4);
  border-radius: var(--r-md);
  font-size: var(--fs-12);
  font-weight: bold;
  cursor: pointer;
}

/* Open-ended PRO: batch grading running state */
.btn-ai-magic.is-running{
  background: linear-gradient(90deg, #a855f7 0%, #3b82f6 100%);
  box-shadow: 0 8px 24px rgba(168,85,247,.22);
}

.ai-hint{
  font-size: var(--fs-10);
  color: #888;
  text-align: center;
  margin-top: var(--s-1);
}/* AI key readiness badge (Settings + quick actions) */.ai-ready-badge{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .2px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(72,187,120,0.35);
  background: rgba(72,187,120,0.12);
  color: rgba(230,255,240,0.92);
  white-space: nowrap;
}.ai-key-status{
  margin-top: var(--s-2);
  font-size: var(--fs-12);
  opacity: .9;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--w-12);
  background: var(--w-06);
  width: fit-content;
}/* Tools Chips */.tools-grid-compact{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}.tool-chip{
  background: var(--b-20);
  border: 1px solid var(--w-05);
  color: #aaa;
  padding: 8px 4px;
  border-radius: var(--r-sm);
  font-size: var(--fs-10);
  cursor: pointer;
  white-space: nowrap;
}
  overflow: hidden;
  text-overflow: ellipsis;
  transition: 0.2s;
}.tool-chip:hover{
  border-color: var(--brand);
  color: var(--white);
  background: rgba(168, 85, 247, 0.1);
}/* Footer Timer */.timer-footer{
  margin-top: auto;
  padding: 15px 20px;
  background: var(--b-30);
  border-top: 1px solid var(--w-05);
  text-align: center;
}.timer-label{
  font-size: var(--fs-10);
  color: #666;
  letter-spacing: 1px;
  margin-bottom: 2px;
}.timer-digital{
  font-family: "Courier New", monospace;
  font-size: 28px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 2px;
  text-shadow: 0 0 10px var(--w-20);
}.danger-zone{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
}.text-link{
  background: none;
  border: none;
  color: #666;
  font-size: var(--fs-11);
  cursor: pointer;
  padding: 0;
}.text-link:hover{
  text-decoration: underline;
  color: #ccc;
}.text-link.warn:hover{
  color: var(--danger);
}.dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--glass2);
  border: 1px solid var(--stroke);
  transition: all 0.3s;
  color: #444;
}.divider-line{
  height: 1px;
  background: var(--w-05);
  margin: 15px 0;
}/* =========================================
   MODERN SINAV ALANI (EXAM AREA)
   ========================================= *//* Ana Konteyner *//* 1. Üst Bar */.exam-header-bar{
  padding: 15px 20px;
  border-bottom: 1px solid var(--w-05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--b-10);
}.exam-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}.exam-info{
  display: flex;
  align-items: center;
  gap: var(--s-5);
}.exam-icon{
  font-size: 24px;
  background: var(--w-05);
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
}#examTitle{
  margin: 0;
  font-size: var(--fs-18);
  font-weight: 700;
  color: var(--text-main);
}.exam-meta{
  font-size: var(--fs-12);
  color: var(--text-muted);
  margin-top: 2px;
}/* Filtre Butonları (Sonuç Ekranı İçin) */.filter-chip{
  background: var(--w-05);
  border: 1px solid var(--w-10);
  padding: 6px 12px;
  border-radius: var(--r-3xl);
  font-size: var(--fs-12);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  transition: 0.2s;
  user-select: none;
  color: #aaa;
}.filter-chip input{
  display: none;
}.filter-chip:hover{
  background: var(--w-10);
  color: var(--white);
}.filter-chip:has(input:checked){
  background: var(--brand);
  border-color: var(--brand);
  color: var(--white);
}

/* Last Exam Summary Button (Exam tab header) */
.last-exam-btn{
  display: none; /* toggled via JS */
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: var(--r-3xl);
  border: 1px solid var(--w-10);
  background: var(--w-05);
  color: var(--white);
  cursor: pointer;
  user-select: none;
  transition: 0.2s;
}
.last-exam-btn:hover{ background: var(--w-10); }
.last-exam-btn .lex-ico{ font-size: 14px; }
.last-exam-btn .lex-label{ font-size: var(--fs-12); font-weight: 700; }
.last-exam-chip{
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-muted);
  white-space: nowrap;
}


/* Last Exam Chip - Dinamik Renkler (puana göre) */
.last-exam-chip--good{
  background: rgba(16,185,129,0.16);
  border-color: rgba(16,185,129,0.28);
  color: var(--success);
}
.last-exam-chip--ok{
  background: rgba(99,102,241,0.16);
  border-color: rgba(99,102,241,0.28);
  color: var(--accent);
}
.last-exam-chip--bad{
  background: rgba(239,68,68,0.14);
  border-color: rgba(239,68,68,0.28);
  color: var(--danger);
}

/* 2. Ana Düzen (Grid) *//* --- SOL: Navigasyon Paneli --- */.navPanel{
  gap: var(--s-4);
  position: -webkit-sticky;
  top: var(--s-8);
  align-self: start;
  z-index: var(--z-5);
  max-height: calc(100vh - 40px);
  background: var(--b-20);
  border-right: 1px solid var(--w-05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}/* Navigasyon Butonları (Soru Numaraları) *//* Yeşil *//* Kırmızı *//* Sarı *//* --- SAĞ: Kağıt Alanı --- *//* Soruların Kendisi (Soru Kartı) */.q:hover{
  border-color: var(--w-20);
}.qTop{
  gap: var(--s-4);
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}.qNum{
  font-size: var(--fs-18);
  font-weight: 800;
  color: var(--brand);
}.qText{
  margin: 12px 0;
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--text-main);
  margin-bottom: var(--s-8);
}/* Şıklar (Radio Button Süsleme) */.opt{
  margin-top: var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 12px 15px;
  margin-bottom: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--w-02);
}.opt:hover{
  border-color: rgba(255,255,255,.20);
  background: var(--w-05);
}/* Seçili Şık */.opt:has(input:checked){
  background: rgba(168, 85, 247, 0.1);
  border-color: var(--brand);
  color: var(--white);
}/* Boş Durum (Sınav Yüklenmeyince) */.empty-state{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  opacity: 0.5;
}/* MOBİL UYUM */@media (max-width: 900px){

/* Mobilde tek sütun */.navPanel{
  display: none !important;
}/* Mobilde navigasyonu gizle (veya ayrı menü yap) */.paper-area{
  padding: 15px;
}
}/* =========================================
   MODERN ARAÇLAR PANELİ (TOOLS)
   ========================================= */.tools-section{
  margin-top: var(--s-8);
  padding-top: var(--s-8);
  border-top: 1px solid var(--w-10);
}/* Grid Yapısı */.tools-grid-modern{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-bottom: 15px;
}/* Araç Kartları (Tool Cards) */.tool-card{
  background: var(--w-03);
  border: 1px solid var(--w-08);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-4);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  text-align: left;
}.tool-card.full-width{
  grid-column: span 2;
}/* Kart İçeriği */.tc-icon{
  font-size: var(--fs-20);
  filter: grayscale(0.2);
  transition: 0.2s;
}.tc-info{
  display: flex;
  flex-direction: column;
}.tc-title{
  font-size: var(--fs-12);
  font-weight: 700;
  color: #e2e8f0;
}.tc-desc{
  font-size: var(--fs-10);
  color: #94a3b8;
  margin-top: 2px;
}/* Renk Efektleri (Hover) */.tool-card:hover{
  transform: translateY(-2px);
  border-color: var(--w-20);
}.tool-card.purple-glow:hover{
  background: rgba(168, 85, 247, 0.1);
  border-color: var(--brand);
}.tool-card.purple-glow:hover .tc-icon{
  filter: grayscale(0);
  transform: scale(1.1);
}.tool-card.purple-glow:hover .tc-title{
  color: #d8b4fe;
}.tool-card.blue-glow:hover{
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}.tool-card.blue-glow:hover .tc-icon{
  filter: grayscale(0);
  transform: scale(1.1);
}.tool-card.blue-glow:hover .tc-title{
  color: #93c5fd;
}.tool-card.green-glow:hover{
  background: rgba(16, 185, 129, 0.1);
  border-color: var(--success);
}.tool-card.green-glow:hover .tc-icon{
  filter: grayscale(0);
  transform: scale(1.1);
}.tool-card.green-glow:hover .tc-title{
  color: #6ee7b7;
}/* Tehlikeli Bölge (Danger Zone) */.danger-zone-modern{
  background: rgba(239, 68, 68, 0.05);
  border: 1px dashed rgba(239, 68, 68, 0.2);
  border-radius: var(--r-lg);
  padding: var(--s-3);
  display: flex;
  gap: var(--s-3);
}.danger-btn{
  flex: 1;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  padding: var(--s-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-11);
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
}.danger-btn:hover{
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}.danger-btn.outline{
  background: transparent;
  border-color: transparent;
  color: #7f1d1d;
}/* Sepya Mod için Danger Yazı Rengi Düzeltmesi */body.sepia-mode .danger-btn.outline{
  color: #5f4b32;
  opacity: 0.7;
}body.sepia-mode .danger-btn.outline:hover{
  background: rgba(0,0,0,0.05);
  color: #3e3020;
  opacity: 1;
}.danger-btn.outline:hover{
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border-color: rgba(239, 68, 68, 0.3);
}/* =========================================
   SORU HARİTASI (COMPACT & MODERN)
   ========================================= *//* Harita Başlığı (Sabit Kalsın) */.navPanel .navHeader{
  position: sticky;
  top: 0;
  z-index: var(--z-10);
  background: rgba(20, 20, 30, 0.95);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid var(--w-10);
  padding: 12px 15px;
}/* Izgara Yapısı (Dinamik Sıkıştırma) */.navGrid{
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: rgba(255,255,255,.02);
  padding: var(--s-4);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  gap: var(--s-2);
  max-height: 250px;
  overflow-y: auto;
  align-content: start;
  scrollbar-gutter: stable;
}/* Soru Butonları (Küçültülmüş & Şık) */.navBtn{
  aspect-ratio: 1;
  height: 32px;
  font-size: var(--fs-11);
  font-weight: 600;
  border-radius: var(--r-xs);
  background: var(--w-03);
  border: 1px solid var(--w-08);
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}/* Hover Efekti */.navBtn:hover{
  background: var(--w-10);
  color: var(--white);
  border-color: var(--w-30);
  transform: scale(1.1);
  z-index: var(--z-2);
}/* Aktif Soru (Seçili Olan) *//* Durum Renkleri (Daha Pastel ve Göz Yormayan) *//* Yeşil */.navBtn.wrong{
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}/* Kırmızı */.navBtn.empty-result{
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}/* Turuncu *//* --- İNCE SCROLLBAR (Kaba Çubuğu Kaldır) --- */.navGrid::-webkit-scrollbar{
  width: 4px;
}.navGrid::-webkit-scrollbar-track{
  background: var(--b-10);
}.navGrid::-webkit-scrollbar-thumb{
  background: var(--w-20);
  border-radius: var(--r-md);
}.navGrid::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,0.4);
}/* 1. Ana Çerçeve (Tüm Sınav Alanı) */
.exam-container {
  padding: 0;
  /* 85px yerine 110px yaparak yüksekliği biraz daha kısalttık */
  height: calc(100vh - 140px); 
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Tasarım bütünlüğü için sol panel ile aynı border-radius */
  border-radius: var(--r-3xl);
  background: var(--w-02);
  border: 1px solid var(--w-05);
  backdrop-filter: blur(10px);
}

/* 2. Orta Bölüm (Grid Yapısı) */
.layoutExam {
  gap: 0; 
  margin-top: var(--s-2); /* Üstteki boşluğu biraz daralttık */
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 260px 1fr;
  overflow: hidden;
}

/* 3. Sağ Taraf (Kağıt Alanı - Sorular) */
.paper-area {
  background: rgba(255,255,255,0.01);
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 30px;
  scroll-behavior: smooth;
  /* Alt kısımda soruların bitişini rahatlatmak için */
  padding-bottom: 100px; 
}
}/* =========================================
   DROPZONE TEMA GÖRÜNÜRLÜK DÜZELTMESİ
   ========================================= *//* 1. AÇIK MOD (LIGHT MODE) */body.light-mode .modern-dropzone{
  border-color: var(--b-20) !important;
  background: rgba(0, 0, 0, 0.02) !important;
}body.light-mode .modern-dropzone:hover{
  border-color: var(--brand) !important;
  background: rgba(168, 85, 247, 0.05) !important;
}body.light-mode .dz-icon-circle{
  background: rgba(0, 0, 0, 0.05);
  color: #444;
}/* 2. SEPYA MOD (KİTAP MODU) */body.sepia-mode .modern-dropzone{
  border-color: rgba(95, 75, 50, 0.2) !important;
  background: rgba(95, 75, 50, 0.03) !important;
}body.sepia-mode .modern-dropzone:hover{
  border-color: var(--brand) !important;
  background: rgba(168, 85, 247, 0.05) !important;
}body.sepia-mode .dz-icon-circle{
  background: rgba(95, 75, 50, 0.08);
  color: #5f4b32;
}/* Dosya Adı Rengi (Her tema için okunaklı olsun) */body.light-mode .dz-filename,
body.sepia-mode .dz-filename{
  color: #d946ef;
  font-weight: 700;
}/* =========================================
   ÖZEL MODAL PENCERESİ (ÇIKIŞ ONAYI)
   ========================================= *//* Arka Plan (Perde) */.custom-modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: var(--z-99999);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}/* Modal Kutusu */.custom-modal-box{
  background: rgba(30, 30, 40, 0.95);
  border: 1px solid var(--w-10);
  padding: 30px;
  border-radius: 24px;
  width: 90%;
  max-width: 320px;
  text-align: center;
  box-shadow: var(--shadow-5);
  transform: scale(0.9);
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}/* Animasyonlar */@keyframes fadeIn{from { opacity: 0; }to { opacity: 1; }}@keyframes popIn{to { transform: scale(1); }}/* İçerik Stilleri */.modal-icon-top{
  font-size: 40px;
  margin-bottom: var(--s-4);
  display: inline-block;
  animation: wave 1s infinite;
}@keyframes wave{0%, 100% {transform: rotate(0deg);}50% {transform: rotate(20deg);}}.modal-title{
  margin: 0 0 8px 0;
  color: var(--white);
  font-size: var(--fs-18);
  font-weight: 700;
}.modal-desc{
  margin: 0 0 20px 0;
  color: #aaa;
  font-size: var(--fs-13);
  line-height: 1.5;
}/* Butonlar */.modal-actions{
  display: flex;
  gap: var(--s-4);
}.modal-btn{
  flex: 1;
  border: none;
  padding: var(--s-5);
  border-radius: var(--r-lg);
  font-size: var(--fs-13);
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}/* Vazgeç Butonu */.modal-btn.secondary{
  background: var(--w-05);
  color: #ccc;
}.modal-btn.secondary:hover{
  background: var(--w-10);
  color: var(--white);
}/* Çıkış Yap Butonu */.modal-btn.danger{
  background: var(--danger);
  color: white;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}.modal-btn.danger:hover{
  background: #dc2626;
  transform: translateY(-2px);
}/* --- TEMA UYUMLULUĞU --- *//* Açık Mod (Light Mode) */body.light-mode .custom-modal-box{
  background: var(--white)fff;
  border: 1px solid var(--b-10);
  box-shadow: var(--shadow-4);
}body.light-mode .modal-title{
  color: #111;
}body.light-mode .modal-desc{
  color: #666;
}body.light-mode .modal-btn.secondary{
  background: #f3f4f6;
  color: #444;
}body.light-mode .modal-btn.secondary:hover{
  background: #e5e7eb;
}/* Sepya Mod */body.sepia-mode .custom-modal-box{
  background: #fdf6e3;
  border: 1px solid rgba(95, 75, 50, 0.1);
}body.sepia-mode .modal-title{
  color: #5f4b32;
}body.sepia-mode .modal-desc{
  color: #8c7356;
}body.sepia-mode .modal-btn.secondary{
  background: rgba(95, 75, 50, 0.05);
  color: #5f4b32;
}body.sepia-mode .modal-btn.secondary:hover{
  background: rgba(95, 75, 50, 0.1);
}/* =========================================
   FOCUS MODE (İYİLEŞTİRİLMİŞ)
   ========================================= *//* 1. Üst Barın Tasarımı (Sabit ve Şık) */#focusBar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  z-index: var(--z-9999);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  background: rgba(15, 15, 20, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--w-10);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: all 0.3s ease;
}/* 2. Tema Uyumluluğu (Renkler Otomatik Değişsin) *//* ☀️ Açık Mod (Light Mode) */body.light-mode #focusBar{
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--b-10);
  color: #333;
}body.light-mode #focusBar .pill{
  background: rgba(0, 0, 0, 0.05);
  color: #000;
}body.light-mode #btnExitFocus{
  color: #555;
  border-color: #ddd;
}/* 📖 Sepya Mod (Kitap Modu - Ekrandaki görüntüye uygun) */body.sepia-mode #focusBar{
  background: rgba(243, 235, 215, 0.98);
  border-bottom: 1px solid rgba(95, 75, 50, 0.15);
  color: #5f4b32;
}body.sepia-mode #focusBar .pill{
  background: rgba(95, 75, 50, 0.08);
  color: #46331f;
}body.sepia-mode #btnExitFocus{
  color: #5f4b32;
  border-color: rgba(95, 75, 50, 0.3);
}body.sepia-mode #btnExitFocus:hover{
  background: rgba(95, 75, 50, 0.1);
}/* 3. Soruların Barın Altında Kalmasını Engelleme *//* Focus modu açılınca tüm sayfanın üstüne boşluk ekle */body.focusMode{
  overflow-y: scroll;
  padding-top: 80px !important;
}/* KRİTİK AYAR: Otomatik kaydırma yapıldığında (scrollIntoView),
   sorunun tam tepesi yerine biraz yukarısını hedefler.
   Böylece soru barın altında kalmaz. */.q{
  margin: 14px 0;
  background: var(--w-03);
  border: 1px solid var(--w-08);
  border-radius: var(--r-2xl);
  padding: 25px;
  margin-bottom: 30px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  scroll-margin-top: 100px;
}/* =========================================
   SRS (HAFIZA) MODAL TASARIMI
   ========================================= *//* Modalın Kendisi (Kart) */#srsModal .modalCard{
  background: #18181b;
  border: 1px solid #27272a;
  color: #e4e4e7;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.5);
}/* İstatistik Izgarası */.srs-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-8);
  margin-bottom: var(--s-8);
}/* Tekil İstatistik Kutusu */.srs-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--w-03);
  border: 1px solid var(--w-05);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-align: center;
  transition: transform 0.2s;
}.srs-card:hover{
  background: var(--w-05);
  transform: translateY(-2px);
}/* Rakamlar */.srs-val{
  font-size: var(--fs-20);
  font-weight: 800;
  margin-bottom: var(--s-1);
  color: var(--white);
}/* Etiketler */.srs-label{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #a1a1aa;
}/* Özel Renklendirmeler */.srs-card.highlight .srs-val{
  color: #fbbf24;
}/* Toplam - Sarı */.srs-card.urgent .srs-val{
  color: #f87171;
}/* Acil - Kırmızı */.srs-card.good .srs-val{
  color: #4ade80;
}/* İyi - Yeşil *//* Grafik Alanı */.chart-wrapper{
  position: relative;
  height: 220px;
  width: 100%;
  background: var(--b-20);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  border: 1px solid var(--w-05);
}/* Konu Etiketleri (Chips) */.srs-subject-chip{
  font-weight: 500;
  backdrop-filter: blur(6px);
  background: #27272a;
  border: 1px solid #3f3f46;
  color: #d4d4d8;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  cursor: pointer;
  transition: all 0.2s;
}.srs-subject-chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(120,120,255,0.25);
  background: #3f3f46;
  color: var(--white);
  border-color: var(--brand);
}.srs-subject-chip b{
  color: var(--brand);
  margin-left: var(--s-1);
}/* Açık Mod Uyumluluğu (Eğer Light Mode seçilirse bozulmasın) */body.light-mode #srsModal .modalCard{
  background: var(--white)fff;
  border-color: #e4e4e7;
  color: #18181b;
}body.light-mode .srs-card{
  background: #f4f4f5;
  border-color: #e4e4e7;
}body.light-mode .srs-val{
  color: #18181b;
}body.light-mode .chart-wrapper{
  background: #fafafa;
  border-color: #e4e4e7;
}/* =========================================
   SRS MODAL - KİTAP (SEPYA) MODU UYUMU
   ========================================= *//* 1. Modal Kartı (Krem Zemin) */body.sepia-mode #srsModal .modalCard{
  background: #fdf6e3;
  border: 1px solid rgba(95, 75, 50, 0.15);
  color: #5f4b32;
  box-shadow: 0 20px 60px -10px rgba(95, 75, 50, 0.15);
}/* 2. İstatistik Kutuları */body.sepia-mode .srs-card{
  background: rgba(95, 75, 50, 0.05);
  border: 1px solid rgba(95, 75, 50, 0.1);
}body.sepia-mode .srs-card:hover{
  background: rgba(95, 75, 50, 0.1);
  transform: translateY(-2px);
}/* 3. Yazı Renkleri */body.sepia-mode .srs-val{
  color: #46331f;
}body.sepia-mode .srs-label{
  color: #8c7356;
}/* 4. Grafik Alanı */body.sepia-mode .chart-wrapper{
  background: rgba(95, 75, 50, 0.03);
  border: 1px solid rgba(95, 75, 50, 0.1);
}/* 5. Konu Çipleri (Chips) */body.sepia-mode .srs-subject-chip{
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(95, 75, 50, 0.15);
  color: #5f4b32;
}body.sepia-mode .srs-subject-chip:hover{
  background: var(--white);
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(95, 75, 50, 0.1);
}/* 6. Kapatma Butonu */body.sepia-mode .iconBtn{
  color: #5f4b32;
  background: rgba(95, 75, 50, 0.05);
}body.sepia-mode .iconBtn:hover{
  background: rgba(95, 75, 50, 0.15);
}/* 7. Özel Renklerin Kitap Modu Hali *//* Rakamların rengini koruyoruz ama biraz daha pastel yapıyoruz */body.sepia-mode .srs-card.highlight .srs-val{
  color: #d97706;
}/* Koyu Sarı */body.sepia-mode .srs-card.urgent .srs-val{
  color: #dc2626;
}/* Koyu Kırmızı */body.sepia-mode .srs-card.good .srs-val{
  color: #16a34a;
}/* Koyu Yeşil *//* =========================================
   SORU HARİTASI - TÜM TEMALAR İÇİN UYUM (UNIVERSAL)
   ========================================= *//* --- 1. GENEL YAPI (Sıfırlama ve Temel Ayarlar) --- */#navPanel{
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
  border-radius: var(--r-2xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}.navHeader{
  margin-bottom: var(--s-1);
  padding-left: var(--s-1);
  color: var(--text-muted);
  border-bottom: 1px solid var(--w-05);
  padding: 12px 16px;
  font-size: var(--fs-13);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  transition: all 0.3s ease;
}/* --- 2. KOYU MOD (Varsayılan / Dark Mode) --- *//* (Eğer body'de hiçbir sınıf yoksa veya dark-mode varsa) */body:not(.light-mode):not(.sepia-mode) #navPanel{
  background: rgba(30, 30, 40, 0.6) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--w-08) !important;
}body:not(.light-mode):not(.sepia-mode) .navHeader{
  background: var(--b-30) !important;
  color: #e4e4e7 !important;
  border-bottom: 1px solid var(--w-05) !important;
}body:not(.light-mode):not(.sepia-mode) .navBtn{
  background: var(--w-05);
  color: #a1a1aa;
  border: 1px solid transparent;
}body:not(.light-mode):not(.sepia-mode) .navBtn.active{
  background: var(--brand);
  color: white;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}/* --- 3. AÇIK MOD (Light Mode) --- */body.light-mode #navPanel{
  background: var(--white)fff !important;
  border: 1px solid #e4e4e7 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}body.light-mode .navHeader{
  background: #f4f4f5 !important;
  color: #18181b !important;
  border-bottom: 1px solid #e4e4e7 !important;
}body.light-mode .navBtn{
  background: var(--white)fff;
  border: 1px solid #e4e4e7;
  color: #52525b;
}body.light-mode .navBtn:hover{
  border-color: var(--brand);
  background: #fafafa;
}body.light-mode .navBtn.active{
  background: #18181b !important;
  color: var(--white) !important;
  border-color: #18181b !important;
}body.light-mode .navBtn.answered{
  background: #f4f4f5;
  color: #18181b;
  border-color: #d4d4d8;
  font-weight: 600;
}/* --- 4. SEPYA / KİTAP MODU (Book Mode) --- */body.sepia-mode #navPanel{
  background: #fdf6e3 !important;
  border: 1px solid rgba(95, 75, 50, 0.2) !important;
  box-shadow: 0 4px 15px rgba(95, 75, 50, 0.1) !important;
}body.sepia-mode .navHeader{
  background: rgba(95, 75, 50, 0.08) !important;
  color: #5f4b32 !important;
  border-bottom: 1px solid rgba(95, 75, 50, 0.15) !important;
}body.sepia-mode .navBtn{
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(95, 75, 50, 0.15);
  color: #5f4b32;
}body.sepia-mode .navBtn:hover{
  background: var(--white);
  border-color: #8c7356;
}body.sepia-mode .navBtn.active{
  background: #5f4b32 !important;
  color: #fdf6e3 !important;
  border-color: #5f4b32 !important;
  box-shadow: 0 2px 8px rgba(95, 75, 50, 0.3);
}body.sepia-mode .navBtn.answered{
  background: #e6dbb9;
  color: #46331f;
  font-weight: 600;
}/* =========================================
   YAPIMCI İMZASI (LOGIN EKRANI)
   ========================================= */.maker-signature{
  margin-top: 15px;
  font-size: var(--fs-11);
  color: #71717a;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}.maker-name{
  color: var(--brand);
  font-weight: 800;
  background: linear-gradient(90deg, var(--brand), #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}.maker-signature:hover .maker-name{
  filter: drop-shadow(0 0 5px rgba(168, 85, 247, 0.5));
}/* =========================================
   HATA BUTONU (DÜZELTİLMİŞ HİZA)
   ========================================= *//* =========================================
   EĞLENCELİ HATA BİLDİRİM EKRANI (UNIVERSAL TEMA)
   ========================================= *//* --- 1. TEMEL YAPI & KOYU MOD (Varsayılan) --- */.report-card-fun{
  background: linear-gradient(145deg, #18181b, #0f0f12);
  border: 1px solid #27272a;
  box-shadow: var(--shadow-5);
  color: var(--white);
  max-width: 450px !important;
  width: 90%;
  overflow: hidden;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}.report-header{
  text-align: center;
  padding: 20px 20px 0;
}.report-header h3{
  font-size: var(--fs-20);
  margin: 10px 0 5px;
  font-weight: 800;
  background: linear-gradient(90deg, #f472b6, var(--brand));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}.report-header p{
  color: #a1a1aa;
  font-size: var(--fs-13);
}.bouncing-icon{
  font-size: 40px;
  animation: bounceDet 2s infinite;
  display: inline-block;
}@keyframes bounceDet{0%, 20%, 50%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-10px) rotate(-5deg);}60% {transform: translateY(-5px) rotate(5deg);}}/* Seçenekler Alanı */.report-options{
  display: flex;
  gap: var(--s-4);
  margin: 20px 0;
  justify-content: center;
}.r-option input{
  display: none;
}.opt-box{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 80px;
  background: var(--w-03);
  border: 1px solid #3f3f46;
  color: #a1a1aa;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all 0.2s;
  font-size: var(--fs-11);
  font-weight: 600;
}.opt-icon{
  font-size: 24px;
  margin-bottom: 5px;
  filter: grayscale(1);
  transition: filter 0.2s;
}/* Seçili Durum (Dark) */.r-option input:checked + .opt-box{
  background: var(--w-10);
  transform: translateY(-3px);
  color: white;
  border-color: white;
  box-shadow: 0 5px 15px var(--b-30);
}/* Kategori Renkleri (Hepsinde Aynı) */.r-option input:checked + .opt-box.bug .opt-icon{
  filter: grayscale(0);
  text-shadow: 0 0 10px var(--danger);
}.r-option input:checked + .opt-box.bug{
  border-color: var(--danger) !important;
}.r-option input:checked + .opt-box.idea .opt-icon{
  filter: grayscale(0);
  text-shadow: 0 0 10px #eab308;
}.r-option input:checked + .opt-box.idea{
  border-color: #eab308 !important;
}.r-option input:checked + .opt-box.love .opt-icon{
  filter: grayscale(0);
  text-shadow: 0 0 10px #ec4899;
}.r-option input:checked + .opt-box.love{
  border-color: #ec4899 !important;
}/* Textarea (Dark) */#reportText{
  width: 100%;
  background: var(--b-30);
  border: 1px solid #3f3f46;
  color: white;
  padding: 15px;
  border-radius: var(--r-lg);
  resize: none;
  font-size: var(--fs-14);
  transition: all 0.3s;
}#reportText:focus{
  outline: none;
  border-color: var(--brand);
  background: rgba(0,0,0,0.5);
}/* Butonlar */.report-actions{
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-8);
  justify-content: flex-end;
}.btn-ghost{
  background: transparent;
  border: 1px solid #3f3f46;
  color: #a1a1aa;
  padding: 8px 16px;
  border-radius: var(--r-sm);
  cursor: pointer;
}.btn-ghost:hover{
  color: white;
  border-color: white;
}.btn-send-rocket{
  background: linear-gradient(90deg, var(--danger), #f97316);
  border: none;
  color: white;
  padding: 8px 20px;
  border-radius: var(--r-sm);
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
  transition: transform 0.2s;
}.btn-send-rocket:hover{
  transform: scale(1.05);
}/* --- 2. AÇIK MOD (LIGHT MODE) --- */body.light-mode .report-card-fun{
  background: var(--white)fff;
  border: 1px solid #e4e4e7;
  box-shadow: var(--shadow-4);
}body.light-mode .report-header p{
  color: #52525b;
}body.light-mode .opt-box{
  background: #f4f4f5;
  border-color: #e4e4e7;
  color: #52525b;
}body.light-mode .r-option input:checked + .opt-box{
  background: var(--white);
  color: #18181b;
  box-shadow: var(--shadow-1);
}body.light-mode #reportText{
  background: #fafafa;
  border-color: #e4e4e7;
  color: #18181b;
}body.light-mode #reportText:focus{
  background: var(--white);
  border-color: var(--brand);
}body.light-mode .btn-ghost{
  border-color: #e4e4e7;
  color: #52525b;
}body.light-mode .btn-ghost:hover{
  background: #f4f4f5;
  color: #18181b;
  border-color: #d4d4d8;
}/* --- 3. SEPYA / KİTAP MODU (BOOK MODE) --- */body.sepia-mode .report-card-fun{
  background: #fdf6e3;
  border: 1px solid rgba(95, 75, 50, 0.2);
  box-shadow: 0 20px 50px rgba(95, 75, 50, 0.15);
}body.sepia-mode .report-header h3{
  background: none;
  -webkit-text-fill-color: initial;
  color: #5f4b32;
}body.sepia-mode .report-header p{
  color: #8c7356;
}body.sepia-mode .opt-box{
  background: rgba(95, 75, 50, 0.05);
  border-color: rgba(95, 75, 50, 0.15);
  color: #8c7356;
}body.sepia-mode .r-option input:checked + .opt-box{
  background: var(--white);
  color: #5f4b32;
  box-shadow: 0 4px 12px rgba(95, 75, 50, 0.2);
}body.sepia-mode #reportText{
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(95, 75, 50, 0.2);
  color: #5f4b32;
}body.sepia-mode #reportText:focus{
  background: var(--white);
  border-color: var(--brand);
}body.sepia-mode .btn-ghost{
  border-color: rgba(95, 75, 50, 0.2);
  color: #8c7356;
}body.sepia-mode .btn-ghost:hover{
  background: rgba(95, 75, 50, 0.1);
  color: #5f4b32;
  border-color: rgba(95, 75, 50, 0.4);
}/* =========================================
   EĞLENCELİ & HAREKETLİ BUTON (DÜZELTİLMİŞ KONUM)
   ========================================= */@keyframes wiggleIcon{0% { transform: rotate(0deg) scale(1); }25% { transform: rotate(-8deg) scale(1.1); }50% { transform: rotate(8deg) scale(1.1); }75% { transform: rotate(-5deg) scale(1.1); }100% { transform: rotate(0deg) scale(1); }}#btnReportBug{
  transition: all 0.2s ease;
  transform: none;
  position: fixed;
  bottom: 85px;
  left: var(--s-8);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF9966 0%, #FF5E62 100%);
  border: 2px solid var(--white);
  color: var(--white);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-99999);
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(255, 94, 98, 0.4);
  animation: wiggleIcon 2.5s ease-in-out infinite;
}/* Üzerine gelince */#btnReportBug:hover{
  color: white;
  animation: none;
  transform: scale(1.2);
  box-shadow: 0 0 25px rgba(255, 94, 98, 0.8);
  background: linear-gradient(135deg, #FF5E62 0%, #FF9966 100%);
}/* =========================================
   ÖZEL BİLDİRİM (TOAST) - FİNAL (PATİ STİLİ)
   ========================================= *//* Bildirim Konumu */#toastHost{
  position: fixed;
  bottom: 90px;
  right: var(--s-8);
  z-index: var(--z-10000);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-end;
  pointer-events: none;
}/* KART YAPISI (Ekran Görüntüsündeki Gibi) */.toast-msg{
  pointer-events: auto;
  min-width: 260px;
  max-width: 320px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  background: rgba(25, 25, 30, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--w-12);
  border-radius: var(--r-xl);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  animation: toastPop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}/* 1. BAŞLIK ("Bildirim", "Hata", "Harika İş") */.toast-head{
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--white)fff;
  letter-spacing: 0.3px;
  line-height: 1.2;
}/* 2. GÖVDE (İkon + Mesaj) */.toast-body{
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}/* İkon (Metinle aynı hizada) */.toast-icon{
  font-size: var(--fs-14);
  margin-top: 1px;
  flex-shrink: 0;
}/* Mesaj Metni */.toast-text{
  font-size: var(--fs-13);
  font-weight: 400;
  color: #b0b0b0;
  line-height: 1.4;
}/* --- ANİMASYONLAR --- */@keyframes toastPop{to { opacity: 1; transform: translateY(0) scale(1); }}.toast-msg.hiding{
  animation: toastFadeOut 0.2s ease forwards;
}@keyframes toastFadeOut{to { opacity: 0; transform: scale(0.9); }}/* --- TEMA RENK VURGULARI (Solda ince çizgi yerine ikon rengi) --- *//* Başarılı (Yeşil) */.toast-msg.success .toast-icon{
  color: #4ade80;
}.toast-msg.success{
  border-left: 3px solid #22c55e;
}/* Hata (Kırmızı) */.toast-msg.error .toast-icon{
  color: #f87171;
}.toast-msg.error{
  border-left: 3px solid var(--danger);
}/* Uyarı (Sarı) */.toast-msg.warn .toast-icon{
  color: #fbbf24;
}.toast-msg.warn{
  border-left: 3px solid #f59e0b;
}/* Normal (Mor) */.toast-msg.neutral .toast-icon{
  color: #c084fc;
}.toast-msg.neutral{
  border-left: 3px solid var(--brand);
}/* --- AÇIK MOD (LIGHT MODE) --- */body.light-mode .toast-msg{
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--b-10);
  box-shadow: var(--shadow-2);
}body.light-mode .toast-head{
  color: #111;
}body.light-mode .toast-text{
  color: #555;
}/* --- SEPYA MOD (BOOK MODE) --- */body.sepia-mode .toast-msg{
  background: #fdf6e3;
  border: 1px solid rgba(95, 75, 50, 0.2);
}body.sepia-mode .toast-head{
  color: #5f4b32;
}body.sepia-mode .toast-text{
  color: #8c7356;
}/* =========================================
   GİRİŞ EKRANI KATMAN DÜZELTMESİ
   ========================================= */.login-wrapper{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #24243e, #0f0c29);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: "Segoe UI", sans-serif;
  z-index: var(--z-100000) !important;
}/* Şablon Stüdyosu Ana Kartı */.template-section{
  margin-top: 15px;
  padding: 12px 15px;
  background: rgba(6, 182, 212, 0.05);
  border: 1px dashed rgba(6, 182, 212, 0.4);
  border-radius: var(--r-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  transition: all 0.3s ease;
}.template-section:hover{
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(6, 182, 212, 0.8);
}/* Başlık ve İkon Grubu */.ts-header{
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex: 1;
  min-width: 140px;
}.ts-icon-box .material-icons-round{
  color: #06b6d4;
  font-size: 24px;
  background: rgba(6, 182, 212, 0.1);
  padding: var(--s-3);
  border-radius: var(--r-sm);
}.ts-titles h4{
  margin: 0;
  font-size: 0.95rem;
  color: #e2e8f0;
  font-weight: 600;
}.ts-titles small{
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.2;
}/* Buton ve Rozet Grubu */.ts-actions{
  display: flex;
  align-items: center;
  gap: var(--s-3);
}/* Oluştur Butonu */.ts-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  background: #0f172a;
  border: 1px solid #06b6d4;
  color: #06b6d4;
  padding: 6px 12px;
  border-radius: var(--r-xs);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}.ts-btn:hover{
  background: #06b6d4;
  color: #0f172a;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}.ts-btn .material-icons-round{
  font-size: var(--fs-16);
}/* Aktif Rozeti */.ts-badge.active-badge{
  display: flex;
  align-items: center;
  gap: var(--s-1);
  background: #22c55e;
  color: #000;
  padding: 4px 8px;
  border-radius: var(--r-3xl);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
  animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}.ts-badge .material-icons-round{
  font-size: var(--fs-14);
}/* Animasyon: Rozet açılırken hoş bir efekt */@keyframes popIn{0% { transform: scale(0.5); opacity: 0; }100% { transform: scale(1); opacity: 1; }}/* =============================
   UX FALLBACKS (PDF visual options)
   ============================= */.opt-missing-chip{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  line-height: 1.2;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
}.modern-dropzone.drag-over .dz-content,
.modern-dropzone.drag-over{
  outline: 2px dashed rgba(34,197,94,.65);
  outline-offset: 10px;
  box-shadow: 0 0 0 6px rgba(34,197,94,.10);
}/* ============================================================
   SADECE AÇIK (LIGHT) VE KİTAP (BOOK) MODU DÜZELTMELERİ
   (Koyu temaya dokunmaz)
   ============================================================ *//* 1. KART GÖVDESİ (Sadece Light ve Book modunda değişir) */body.light-mode .template-section,
body.book-theme .template-section{
  background: linear-gradient(135deg, var(--white)fff 40%, #ecfeff 100%) !important;
  border: 1px solid rgba(8, 145, 178, 0.25) !important;
  box-shadow: 0 4px 15px rgba(8, 145, 178, 0.08) !important;
}/* 2. BAŞLIK VE YAZILAR (Sadece Light ve Book modunda koyu renk olur) */body.light-mode .ts-titles h4,
body.book-theme .ts-titles h4{
  color: #0f172a !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}body.light-mode .ts-titles small,
body.book-theme .ts-titles small{
  color: #475569 !important;
  font-weight: 600 !important;
}/* 3. OLUŞTUR BUTONU (Sadece Light ve Book modunda beyaz/cyan olur) */body.light-mode .ts-btn,
body.book-theme .ts-btn{
  background-color: var(--white)fff !important;
  color: #0891b2 !important;
  border: 1px solid #0891b2 !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}/* Buton Hover (Sadece Light ve Book modunda) */body.light-mode .ts-btn:hover,
body.book-theme .ts-btn:hover{
  background-color: #0891b2 !important;
  color: var(--white)fff !important;
  box-shadow: 0 4px 10px rgba(8, 145, 178, 0.3) !important;
}/* 4. İKON KUTUSU (İkon arka planını uyumlu hale getir) */body.light-mode .ts-icon-box .material-icons-round,
body.book-theme .ts-icon-box .material-icons-round{
  background: rgba(8, 145, 178, 0.1) !important;
  color: #0e7490 !important;
}.navBtn.answered{
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(168, 85, 247, 0.25) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  color: #f5f3ff !important;
  box-shadow: 0 4px 12px var(--b-10), inset 0 0 0 1px var(--w-10) !important;
  opacity: 1 !important;
}/* Aktif soruya tıklandığında cam efektini daha belirgin yapalım */.navBtn.active{
  z-index: var(--z-2);
  border-color: var(--brand);
  color: var(--white);
  background: rgba(168, 85, 247, 0.4) !important;
  border: 1px solid rgba(168, 85, 247, 0.8) !important;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.5) !important;
  transform: scale(1.05);
}/* ===== Drive Tab UI (v16) ===== */.drive-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--w-10);
  border-radius: var(--r-2xl);
  padding: var(--s-6);
}.drive-row{
  display: flex;
  gap: var(--s-4);
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}.drive-input{
  flex: 1;
  min-width: 240px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.15);
  color: inherit;
}.drive-select{
  width: 100%;
  padding: var(--s-4);
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.15);
  color: inherit;
}.drive-label{
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--w-12);
  border-radius: var(--r-pill);
  cursor: pointer;
}.drive-status{
  font-size: var(--fs-12);
  opacity: 0.85;
}.drive-status.err{
  color: #ff6b6b;
  opacity: 1;
}.drive-hint{
  font-size: var(--fs-12);
  opacity: 0.75;
  margin-top: var(--s-2);
}/* ===================== DRIVE PICKER MODERN (driveX - Compact v2) ===================== */.driveX{
  --x-bg: rgba(255,255,255,.06);
  --x-bg2: rgba(255,255,255,.10);
  --x-br: rgba(255,255,255,.12);
  --x-br2: rgba(255,255,255,.18);
  --x-t: rgba(255,255,255,.92);
  --x-m: rgba(255,255,255,.62);
  --x-m2: rgba(255,255,255,.42);
  --x-shadow: 0 18px 60px rgba(0,0,0,.45);
  --x-glow: 0 0 0 4px rgba(120,210,255,.10);
  --x-ac1: rgba(120,210,255,1);
  --x-ac2: rgba(160,110,255,1);
  color: var(--x-t);
}.driveX-card{
  background: radial-gradient(120% 140% at 10% 0%, rgba(120,210,255,.12), transparent 45%),
              radial-gradient(120% 140% at 90% 10%, rgba(160,110,255,.12), transparent 50%),
              rgba(0,0,0,.30);
  border: 1px solid var(--x-br);
  border-radius: 18px;
  padding: var(--s-6);
  box-shadow: var(--x-shadow);
  backdrop-filter: blur(14px);
}.driveX-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}.driveX-title{
  display: flex;
  gap: var(--s-3);
  align-items: center;
}.driveX-ico{
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--x-br);
  font-size: var(--fs-16);
}.driveX-h1{
  font-weight: 700;
  font-size: var(--fs-14);
  line-height: 1.1;
}.driveX-sub{
  font-size: var(--fs-11);
  color: var(--x-m);
  margin-top: 2px;
}/* Listele Butonu (Temel Stil) */.driveX-cta{
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: var(--x-t);
  padding: 6px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}.driveX-cta:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.11);
  border-color: var(--x-br2);
}/* Segmented Control (Drive'ım / Klasör) */.driveX-seg{
  display: flex;
  gap: var(--s-1);
  padding: var(--s-1);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--x-br);
  margin-bottom: var(--s-4);
}.driveX-pill{
  flex: 1;
  border: 1px solid transparent;
  background: transparent;
  color: var(--x-m);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}.driveX-pill:hover{
  color: var(--x-t);
}.driveX-pill.is-active{
  color: var(--x-t);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 2px 8px var(--b-20);
  font-weight: 600;
}.driveX-row{
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-3);
}.driveX-input{
  flex: 1;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: var(--x-t);
  padding: 8px 10px;
  font-size: var(--fs-12);
  outline: none;
  transition: all .15s ease;
}.driveX-input::placeholder{
  color: var(--x-m2);
}.driveX-input:focus{
  border-color: rgba(120,210,255,.40);
  background: rgba(0,0,0,.4);
}.driveX-icon{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--x-t);
  cursor: pointer;
  font-size: var(--fs-14);
}.driveX-list{
  border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding: var(--s-1);
  max-height: 220px;
  overflow: auto;
}.driveX-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s ease;
}.driveX-item:hover{
  background: rgba(255,255,255,.07);
}.driveX-item.is-selected{
  background: rgba(10, 132, 255, 0.15);
  border-color: rgba(10, 132, 255, 0.3);
}.driveX-name{
  font-weight: 600;
  font-size: var(--fs-12);
}.driveX-meta{
  font-size: var(--fs-10);
  color: var(--x-m);
}.driveX-bottom{
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}/* Seçileni Aç Butonu */.driveX-primary{
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-lg);
  font-size: var(--fs-13);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--x-t);
  border: 1px solid rgba(120,210,255,.30);
  background: linear-gradient(90deg, rgba(120,210,255,.22), rgba(160,110,255,.22));
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}.driveX-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(0,0,0,.3);
}.driveX-hint{
  font-size: var(--fs-10);
  color: var(--x-m);
  text-align: center;
}.driveX-hint b{
  color: var(--x-t);
}/* Scrollbar */.driveX-list::-webkit-scrollbar{
  width: 6px;
}.driveX-list::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.15);
  border-radius: 99px;
}/* ===================== DRIVEX LISTELE BUTONU (VURGULU & KOMPAKT) ===================== */#btnDriveList{
  background: linear-gradient(135deg, #0A84FF 0%, var(--brand) 100%) !important;
  border: 1px solid var(--w-30) !important;
  color: white !important;
  padding: 8px 16px;
  font-size: var(--fs-13);
  font-weight: 700;
  border-radius: var(--r-lg);
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(10, 132, 255, 0.4);
  animation: pulse-attention 2s infinite ease-in-out;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}/* Hover (Üzerine Gelince) */#btnDriveList:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 25px rgba(168, 85, 247, 0.6);
  background: linear-gradient(135deg, var(--brand) 0%, #0A84FF 100%) !important;
  animation: none;
}/* Animasyon Keyframes (Eğer silindiyse tekrar ekleyelim) */@keyframes pulse-attention{0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.7); }50% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(10, 132, 255, 0); }100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(10, 132, 255, 0); }}/* --- TEMA UYUMLULUĞU --- *//* Aydınlık Mod (Light Mode) */body.light-mode #btnDriveList{
  border-color: var(--b-10) !important;
  box-shadow: 0 4px 15px rgba(10, 132, 255, 0.3);
}/* Kitap Modu (Sepia) - Turuncu Tonları */body.sepia-mode #btnDriveList{
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
  border-color: rgba(95, 75, 50, 0.2) !important;
  box-shadow: 0 4px 15px rgba(217, 119, 6, 0.4);
}body.sepia-mode #btnDriveList:hover{
  background: linear-gradient(135deg, #b45309 0%, #d97706 100%) !important;
}/* ===================== DRIVE BREADCRUMB (GEZİNME ÇUBUĞU) ===================== */.driveX-crumbs{
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  padding: 8px 12px;
  background: var(--b-20);
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  overflow-x: auto;
  white-space: nowrap;
}.crumb-item{
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px 8px;
  border-radius: var(--r-xs);
  transition: all 0.2s;
}.crumb-item:hover{
  background: var(--w-10);
  color: var(--text);
}.crumb-item.active{
  color: var(--accent);
  background: rgba(168, 85, 247, 0.1);
  pointer-events: none;
}.crumb-sep{
  color: var(--muted);
  font-size: var(--fs-10);
  opacity: 0.5;
}/* Klasör İkonu Rengi ve İkon Kutusu */.driveX-icon-box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--w-05);
  font-size: var(--fs-18);
}/* Klasör ise sarı yap */.driveX-item[data-mime="application/vnd.google-apps.folder"] .driveX-icon-box{
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.1);
}/* Light Mode Uyumu */body.light-mode .driveX-crumbs{
  background: #f4f4f5;
  border-color: #e4e4e7;
}body.light-mode .crumb-item:hover{
  background: #e4e4e7;
  color: #000;
}/* ============================================================
   📱 MOBİL CİLA: NATIVE APP NAVİGASYON BARI
   ============================================================ */@media (max-width: 900px){

/* 1. Alt Navigasyon Barı (Sabit & Glassmorphism) */#navPanel{
  display: flex !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: auto;
  height: auto;
  max-height: 85px;
  width: 100%;
  background: rgba(20, 20, 30, 0.90) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-right: none;
  border-top: 1px solid var(--w-10);
  border-radius: 24px 24px 0 0;
  z-index: var(--z-9000);
  padding-bottom: env(safe-area-inset-bottom, 20px);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
  animation: slideUpNav 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}@keyframes slideUpNav{from { transform: translateY(100%); }to { transform: translateY(0); }}/* 2. Başlığı Gizle (Mobilde yer kaplamasın) */.navHeader{
  display: none !important;
}/* 3. Yatay Kaydırılabilir Grid */.navGrid{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 15px 20px 10px 20px;
  gap: var(--s-5);
  width: 100%;
  max-height: none;
  background: transparent !important;
  border: none;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}.navGrid::-webkit-scrollbar{
  display: none;
}/* 4. Butonlar (Daha Büyük & Dokunmatik Dostu) */.navBtn{
  flex: 0 0 48px;
  height: 48px;
  border-radius: var(--r-xl);
  font-size: var(--fs-15);
  font-weight: 700;
  scroll-snap-align: center;
  box-shadow: 0 4px 10px var(--b-20);
}/* Aktif Soru (Parlayan Efekt) */.navBtn.active{
  transform: scale(1.1);
  box-shadow: 0 0 15px var(--accent);
  border-color: var(--accent);
  background: var(--accent) !important;
  color: white !important;
}/* 5. Sayfa Düzeni Düzeltmeleri */.exam-container{
  height: 100vh;
}.paper-area{
  padding-bottom: 120px !important;
}/* Focus Mod Açıkken Navigasyonu Gizle (Çakışmasın) */body.focusMode #navPanel{
  display: none !important;
}
}/* ================= HEADER MODERNİZASYON (FİNAL) ================= *//* 1. Ana Kapsayıcı (Cam Efekti) */.glass-header{
  position: relative;
  z-index: var(--z-100);
  padding: 12px 24px;
  margin-bottom: var(--s-9);
  background: rgba(20, 20, 30, 0.6);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-bottom: 1px solid var(--w-08);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 4px 20px var(--b-20);
}.header-content{
  gap: var(--s-8);
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
}/* 2. Logo ve Marka Alanı */.brand-area{
  display: flex;
  align-items: center;
  gap: var(--s-6);
}.logo-circle{
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: brain-pulse 3s infinite ease-in-out;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
}@keyframes brain-pulse{0%, 100% { transform: scale(1); filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.4)); }50% { transform: scale(1.12); filter: drop-shadow(0 0 20px rgba(168, 85, 247, 0.7)); }}.title-group h1{
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.5px;
  background: linear-gradient(135deg, var(--white) 0%, #94a3b8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}.sub{
  line-height: 1.4;
  font-size: var(--fs-11);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  margin-top: var(--s-1);
  letter-spacing: 0.2px;
}/* Sürüm Rozeti (v1.2) */.version-badge{
  font-size: var(--fs-10);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.25);
  margin-left: var(--s-3);
  display: inline-block;
  vertical-align: middle;
}/* 3. Durum Hapları (Hazırlık / Anahtar) */.status-group{
  padding-right: var(--s-5);
  margin-right: var(--s-1);
  border-right: 1px solid var(--stroke);
  display: flex;
  gap: var(--s-5);
}.h-pill{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 16px;
  border-radius: var(--r-xl);
  background: var(--w-05);
  border: 1px solid var(--w-10);
  color: #e2e8f0;
  font-size: var(--fs-13);
  font-weight: 600;
  transition: all 0.2s ease;
  cursor: default;
}.h-pill:hover{
  color: var(--text);
  border-color: var(--stroke);
  background: var(--w-08);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}.h-icon{
  font-size: var(--fs-14);
  opacity: 0.9;
}/* 4. Sağ Taraf (Kullanıcı & Butonlar) */.user-avatar{
  font-size: var(--fs-16);
  background: var(--w-10);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}.user-name{
  font-size: var(--fs-13);
  font-weight: 600;
  color: #cbd5e1;
}/* Sağ taraftaki grup için düzen */.header-right{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-shrink: 0;
}/* Tema butonu için düzeltme */.theme-btn-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg);
  background: var(--w-05);
  border: 1px solid var(--w-10);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  flex-shrink: 0;
}/* Hover efekti (opsiyonel) */.theme-btn-icon:hover{
  background: var(--w-10);
  transform: translateY(-2px);
}/* ================= TEMA UYUMLARI ================= *//* Sepya Modu (Kitap Havası) */body.sepia-mode .glass-header{
  background: rgba(253, 246, 227, 0.65);
  border-bottom: 1px solid rgba(95, 75, 50, 0.15);
}body.sepia-mode .title-group h1{
  background: linear-gradient(135deg, #5f4b32 0%, #8c7356 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}body.sepia-mode .sub{
  color: rgba(95, 75, 50, 0.6);
}body.sepia-mode .h-pill{
  background: rgba(95, 75, 50, 0.08);
  border-color: rgba(95, 75, 50, 0.15);
  color: #5f4b32;
}body.sepia-mode .version-badge{
  background: rgba(95, 75, 50, 0.1);
  color: #5f4b32;
  border-color: rgba(95, 75, 50, 0.2);
}body.sepia-mode .user-chip,
body.sepia-mode .theme-btn-icon,
body.sepia-mode .btn-logout-header{
  background: rgba(95, 75, 50, 0.05);
  border-color: rgba(95, 75, 50, 0.15);
  color: #5f4b32;
}body.sepia-mode .user-name{
  color: #5f4b32;
}/* Aydınlık Mod (Light) */body.light-mode .glass-header{
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid var(--b-08);
}body.light-mode .title-group h1{
  background: linear-gradient(135deg, #1e293b 0%, #475569 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}body.light-mode .sub{
  color: #64748b;
}body.light-mode .h-pill{
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--b-08);
  color: #334155;
}body.light-mode .user-chip,
body.light-mode .theme-btn-icon,
body.light-mode .btn-logout-header{
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--b-08);
  color: #334155;
}body.light-mode .user-name{
  color: #334155;
}/* ================= YENİ MODERN LOGO İKONU ================= *//* 1. İkon Yuvası (Modern Kutu) */.logo-circle.modern-icon{
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand) 0%, #3b82f6 100%);
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--w-20);
}/* Kutu üzerine düşen hafif parlama efekti (Opsiyonel) */.logo-circle.modern-icon::after{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, var(--w-30) 0%, transparent 60%);
  opacity: 0.4;
  pointer-events: none;
}/* 2. İçindeki Kıvılcım (✦) */.spark{
  font-size: 22px;
  color: var(--white)fff;
  display: inline-block;
  animation: spark-intelligence 6s linear infinite;
}/* Animasyon Tanımı: Yavaşça dön ve parılda */@keyframes spark-intelligence{0% {
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
  }50% {
    transform: rotate(180deg) scale(1.15); /* Ortada biraz büyü ve parla */
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.9));
  }100% {
    transform: rotate(360deg) scale(1);
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
  }}/* --- TEMA UYUMLARI --- *//* Sepya Modu için Logoyu Uyarlama (Kahve Tonları) */body.sepia-mode .logo-circle.modern-icon{
  background: linear-gradient(135deg, #8c7356 0%, #5f4b32 100%);
  box-shadow: 0 0 20px rgba(95, 75, 50, 0.4);
  border-color: rgba(95, 75, 50, 0.3);
}/* Aydınlık Mod için (Daha net mavi) */body.light-mode .logo-circle.modern-icon{
  background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}/* ================= KULLANICI DROPDOWN MENÜSÜ ================= *//* 1. Kapsayıcı (Pozisyonlama için) */.user-menu-wrapper{
  position: relative;
}/* 2. Kullanıcı Çipi (Tıklanabilir) */.user-chip{
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 6px 12px 6px 6px;
  background: var(--b-20);
  border: 1px solid var(--w-08);
  border-radius: var(--r-3xl);
  cursor: pointer;
  transition: all 0.2s ease;
  padding-right: var(--s-6);
}.user-chip:hover{
  background: var(--w-10);
  border-color: var(--w-20);
}/* Küçük Ok İşareti */.dropdown-arrow{
  font-size: var(--fs-10);
  margin-left: var(--s-2);
  opacity: 0.6;
  transition: transform 0.3s ease;
}/* Menü açıldığında ok dönsün */.user-menu-wrapper.active .dropdown-arrow{
  transform: rotate(180deg);
}/* 3. Açılır Menü (Glass Style) */.glass-dropdown{
  position: absolute;
  top: 120%;
  right: 0;
  width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: rgba(30, 30, 40, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--w-10);
  border-radius: var(--r-xl);
  padding: var(--s-2);
  box-shadow: 0 10px 40px var(--b-30);
  z-index: var(--z-1000);
}/* Menü Aktif Olduğunda */.user-menu-wrapper.active .glass-dropdown{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}/* 4. Menü Elemanları */.dropdown-item{
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: #e2e8f0;
  font-size: var(--fs-13);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}.dropdown-item:hover{
  background: var(--w-10);
  color: var(--white);
}.item-icon{
  font-size: var(--fs-16);
}/* --- TEMA UYUMLARI --- */body.light-mode .glass-dropdown{
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--b-10);
  box-shadow: 0 10px 30px var(--b-10);
}body.light-mode .dropdown-item{
  color: #334155;
}body.light-mode .dropdown-item:hover{
  background: rgba(0,0,0,0.05);
}body.sepia-mode .glass-dropdown{
  background: #fdf6e3;
  border-color: rgba(95, 75, 50, 0.2);
}body.sepia-mode .dropdown-item{
  color: #5f4b32;
}body.sepia-mode .dropdown-item:hover{
  background: rgba(95, 75, 50, 0.1);
}/* seçili + doğru: yeşil baskın gelsin */.opt.correct-chosen,
.opt.correct-chosen:has(input:checked),
.opt.correct-chosen input:checked + div{
  border-color: #2ecc71 !important;
  background: rgba(46, 204, 113, 0.12) !important;
}/* Güvenlik Açıklaması *//* --- TEMA ADAPTİF GÜVENLİK SEKMESİ --- */.modern-sst{
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: var(--z-10001);
  display: flex;
  align-items: center;
  font-family: inherit;
}/* --- KULAKÇIK (TEMA RENGİNİ ARKADAN ALIR) --- */.sst-visible{
  background: rgba(125, 125, 125, 0.1);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid currentColor;
  border-right: none;
  border-left: 3px solid var(--success);
  padding: 18px 8px;
  border-radius: 12px 0 0 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-5);
  cursor: help;
  transition: all 0.3s ease;
  opacity: 0.8;
}.modern-sst:hover .sst-visible{
  opacity: 1;
  background: rgba(16, 185, 129, 0.2);
}.sst-icon{
  font-size: 1.3rem;
}.sst-vertical-text{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: inherit;
}/* --- PANEL (DİNAMİK CAM) --- */.sst-panel{
  width: 0;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  background: rgba(125, 125, 125, 0.05);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid currentColor;
  border-right: none;
  border-radius: 15px 0 0 15px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}.modern-sst:hover .sst-panel{
  width: 280px;
  max-width: 280px;
  opacity: 1;
  margin-right: -1px;
}.sst-panel-inner{
  padding: var(--s-8);
  color: inherit;
}.sst-header{
  margin-bottom: 15px;
  border-bottom: 1px solid currentColor;
  padding-bottom: var(--s-3);
  opacity: 0.8;
}.sst-header strong{
  color: var(--success);
}.sst-item{
  display: flex;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
  padding: var(--s-3);
  background: rgba(125, 125, 125, 0.1);
  border-radius: var(--r-sm);
}.item-text strong{
  display: block;
  font-size: 0.85rem;
}.item-text span{
  font-size: 0.75rem;
  opacity: 0.7;
}.sst-signature{
  font-size: var(--fs-9);
  text-align: right;
  opacity: 0.4;
  margin-top: var(--s-4);
}/* =========================================
   NOTES TAB (AI PRACTICE) - Theme-aware
   ========================================= */#tab-notes{
  display: none;
}.notesLayout{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}.notesHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
}.notesHeader .pill{
  background: var(--glass);
}.noteTitle{
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
  max-width: 320px;
}.noteMeta{
  display: flex;
  align-items: center;
  gap: var(--s-3);
}.noteMeta .btn, .noteRow-btns .btn{
  padding: 3px 8px;
  border-radius: var(--r-md);
  font-size: 9.5px;
}.source-icon-badge{
  font-size: 13px;
  line-height: 1;
  cursor: default;
  flex-shrink: 0;
}.emptyMini{
  padding: var(--s-6);
  border: 1px dashed var(--stroke);
  border-radius: var(--r-xl);
  background: var(--w-02);
}.emptyMini .t{
  font-weight: 800;
  margin-bottom: var(--s-1);
}.emptyMini .s{
  font-size: var(--fs-12);
  color: var(--muted);
}.notesPreview{
  width: 100%;
  min-height: 120px;
  max-height: 240px;
  overflow: auto;
  background: var(--w-02);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: var(--s-5);
  color: var(--muted);
  font-size: var(--fs-12);
  white-space: pre-wrap;
}.drivePickHint{
  font-size: var(--fs-12);
  color: var(--muted);
  margin-bottom: var(--s-4);
}.drivePickItem:hover{
  background: var(--w-06);
}/* Book (sepia) mode minor tweaks */body.sepia-mode .noteRow{
  background: rgba(91,70,54,0.06);
}body.sepia-mode .notesPreview{
  background: rgba(91,70,54,0.04);
}.notesActions{
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}.notesSplit{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}@media (min-width: 980px){

.notesSplit{
  grid-template-columns: 1fr 1fr;
}
}.notesList{
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  background: var(--w-02);
  overflow: hidden;
}/* Distribution segmented control */.segBtn:hover{
  filter: brightness(1.08);
}/* Priority list */.notesPriority{
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  background: var(--w-02);
  padding: var(--s-5);
  margin-bottom: var(--s-4);
}.notesPriorityTitle{
  font-size: var(--fs-12);
  font-weight: 900;
  color: var(--text);
  margin-bottom: var(--s-3);
  display: flex;
  gap: var(--s-3);
  align-items: center;
}.notesPriorityHint{
  font-size: var(--fs-11);
  color: var(--muted);
  font-weight: 700;
}.notesPriorityList{
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}.prioItem[draggable="true"]{
  cursor: grab;
}.prioItem:active{
  cursor: grabbing;
}.prioLeft{
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-width: 0;
}.prioHandle{
  opacity: 0.75;
  font-size: var(--fs-14);
}.prioTitle{
  font-size: var(--fs-12);
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}.prioBadge{
  font-size: var(--fs-11);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke);
  background: var(--glass);
  color: var(--muted);
}.prioItem.is-dragover{
  border-color: rgba(10,132,255,0.55);
  box-shadow: 0 0 0 2px rgba(10,132,255,0.12) inset;
}body.sepia-mode .notesDist{
  background: rgba(91,70,54,0.05);
}body.sepia-mode .segBtn{
  background: rgba(91,70,54,0.06);
}body.sepia-mode .notesPriority{
  background: rgba(91,70,54,0.04);
}.drivePickItem:disabled{
  opacity: .45;
  cursor: not-allowed;
}.drivePickNav{
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-3);
}.driveCrumb{
  font-size: var(--fs-12);
  opacity: .75;
}/* 1. Liste Alanı: Daha sıkı bir ızgara */
.drivePickList {
  display: grid;
  /* Min genişliği 110px'ten 85px'e düşürdük */
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); 
  gap: var(--s-3); /* Boşlukları biraz daralttık */
  margin-top: var(--s-4);
  max-height: 55vh;
  overflow-y: auto;
  padding: 8px;
}

/* 2. Dosya Kartı: Daha küçük boyutlar */
.drivePickItem {
  width: 100%;
  height: 95px; /* 110px'ten 95px'e düştü */
  text-align: center;
  padding: 12px 6px; /* İç boşluğu azalttık */
  border-radius: var(--r-lg); /* XL yerine LG kullanarak ölçeğe uydurduk */
  border: 1px solid var(--stroke);
  background: var(--w-03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.drivePickItem:hover {
  background: var(--w-05);
  border-color: var(--brand);
  transform: translateY(-2px); /* Zıplama etkisini de küçülttük */
}

/* 3. İkon ve İsim: Ölçeklendirme */
.drivePickIcon {
  font-size: 26px; /* 36px'ten 26px'e düştü */
  margin-bottom: 0;
}

.drivePickName {
  font-size: 10.5px; /* Daha küçük font */
  font-weight: 600;
  line-height: 1.2;
  width: 100%;
  /* Yine 2 satırda kesiyoruz */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 4. Rozet (Badge): Daha minik */
.drivePickBadge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 8px;
  padding: 1px 4px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 4px;

}/* Not satırlarını kartlaştır *//* Checkbox ve Metin hizalaması */.noteChk{
  cursor: pointer;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  font-weight: 600;
  font-size: var(--fs-14);
}/* Öncelik Listesi (Drag & Drop) için Cam Efekti */.prioItem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 10px 12px;
  background: var(--glass2);
  border: 1px solid rgba(168, 85, 247, 0.3);
  backdrop-filter: blur(5px);
  margin-bottom: var(--s-2);
  border-radius: var(--r-md);
}/* --- Yöntem Seçici (Segmented Control) --- */.notesDist{
  display: inline-flex;
  background: var(--w-05);
  border: 1px solid var(--w-10);
  padding: var(--s-1);
  border-radius: var(--r-lg);
  gap: var(--s-1);
}.segBtn{
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  font-size: var(--fs-13);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}/* Aktif Buton (Mavi Parlama) */.segBtn.is-active{
  border-color: rgba(10,132,255,0.55);
  background: var(--accent);
  color: white;
  box-shadow: 0 0 15px rgba(10, 132, 255, 0.5);
}/* --- Deneme Üret Butonu (Magic Style) --- */#btnGeneratePractice{
  background: linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
  border: 1px solid var(--w-20);
  color: white;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: var(--s-6);
  border-radius: var(--r-2xl);
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}#btnGeneratePractice:hover:not(:disabled){
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(124, 58, 237, 0.6);
  filter: brightness(1.1);
}/* Butonun içindeki parıltı efekti */#btnGeneratePractice::before{
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--w-30), transparent);
  transform: skewX(-25deg);
  animation: shineMove 3s infinite;
}@keyframes shineMove{0% { left: -100%; }20% { left: 150%; }100% { left: 150%; }}/* --- Not Satırı (İnce Dokunuş) --- */.noteRow{
  gap: 6px;
  margin-bottom: var(--s-3);
  background: var(--w-03);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  transition: all 0.2s;
}.noteRow:hover{
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--brand);
}.noteRow-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}.noteRow-top .noteChk{
  flex: 1;
  min-width: 80px;
  overflow: hidden;
}.noteActions{
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  max-width: 60%;
}.noteRow-btns{
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px;
  padding-left: 22px;
}/* Deneme sayısı inputu için özel stil */.glass-input.small{
  width: 60px;
  text-align: center;
  background: var(--b-20);
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-weight: 800;
  padding: 5px;
}.config-row{
  margin-bottom: var(--s-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}/* ================= Şablon Stüdyo Preview Butonu ================= */.qPreviewBtn{
  height: 22px;
  min-width: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-12);
  line-height: 1;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: .15s ease;
}/* Preview varsa: mor vurgulu, ama şık *//* Hafif pulse: 2 tur sonra dursun (rahatsız etmesin) */.qPreviewBtn--has{
  background: rgba(168,85,247,.18);
  border-color: rgba(168,85,247,.45);
  box-shadow: 0 0 0 1px rgba(168,85,247,.12) inset;
  animation: qPreviewPulse 1.2s ease-out 2;
}@keyframes qPreviewPulse{0%   { box-shadow:0 0 0 0 rgba(168,85,247,.0), 0 0 0 1px rgba(168,85,247,.12) inset; }50%  { box-shadow:0 0 0 6px rgba(168,85,247,.12), 0 0 0 1px rgba(168,85,247,.18) inset; }100% { box-shadow:0 0 0 0 rgba(168,85,247,.0), 0 0 0 1px rgba(168,85,247,.12) inset; }}.qPreviewBtn:hover{
  background: rgba(168,85,247,.28);
  border-color: rgba(168,85,247,.65);
  color: var(--white);
  transform: translateY(-1px);
}/* ================================
   THEME-AWARE GLASS TOKENS
================================ *//* Eğer temayı body attribute/class ile set ediyorsan bu selectorlerden biri tutar.
   Projede hangisi varsa o çalışır; diğerleri zarar vermez. */body[data-theme="light"], body.theme-light, html[data-theme="light"]{
  --glass-bg: rgba(10,10,14,.04);
  --glass-border: rgba(10,10,14,.10);
  --glass-bg-hover: rgba(168,85,247,.10);
  --glass-border-hover: rgba(168,85,247,.35);
  --text-strong: rgba(10,10,14,.92);
  --text-muted: rgba(10,10,14,.62);
  --sticky-grad-1: rgba(248,248,252,0);
  --sticky-grad-2: rgba(248,248,252,.70);
  --sticky-grad-3: rgba(248,248,252,.86);
  --sticky-grad-4: rgba(248,248,252,.94);
}body[data-theme="book"], body.theme-book, html[data-theme="book"]{
  --glass-bg: rgba(80,60,30,.06);
  --glass-border: rgba(80,60,30,.14);
  --glass-bg-hover: rgba(168,85,247,.10);
  --glass-border-hover: rgba(168,85,247,.38);
  --text-strong: rgba(32,24,18,.92);
  --text-muted: rgba(32,24,18,.62);
  --sticky-grad-1: rgba(250,244,232,0);
  --sticky-grad-2: rgba(250,244,232,.70);
  --sticky-grad-3: rgba(250,244,232,.86);
  --sticky-grad-4: rgba(250,244,232,.94);
}/* ================================
   TOP NAV PILLS - GLASS + PURPLE HOVER
================================ *//* ================================
   STICKY FOOTER - THEME AWARE
================================ */.panel-sticky-footer{
  background: linear-gradient(
    to bottom,
    var(--sticky-grad-1),
    var(--sticky-grad-2) 18%,
    var(--sticky-grad-3) 46%,
    var(--sticky-grad-4)
  );
  border-top: 1px solid var(--glass-border);
}/* ================================
   COLLAPSIBLE (GELİŞMİŞ / ARAÇLAR) - GLASS + HOVER
================================ */.adv-settings{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}.adv-settings:hover{
  border-color: var(--glass-border-hover);
}.adv-settings[open]{
  border-color: var(--glass-border-hover);
  box-shadow: 0 0 0 1px var(--accent-12) inset;
}.btn-secondary:hover,
.btn-hero:hover,
.driveX-cta:hover,
.driveX-primary:hover{
  border-color: var(--glass-border-hover) !important;
  box-shadow: 0 0 0 1px var(--accent-12) inset, 0 10px 30px rgba(168,85,247,.10);
}/* ==========================================================
   ACUMEN • Theme-aware Purple Glass Hover (non-sticky update)
   - Nav pills hover glow (purple)
   - Details/collapsible headers (advanced/tools) hover glow
   - Works with: default (dark), .light-mode, .sepia-mode, .book-theme
   ========================================================== *//* Purple accent tokens (independent from theme --accent) *//* ---------- NAV PILLS (Dosya/Metin/Drive/Notlar) ---------- *//* ==============================
   NAV PILL FIX (TEXT OVERFLOW)
   ============================== */.nav-pills{
  margin-bottom: 15px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-xl);
  padding: var(--s-2);
  display: flex;
  gap: var(--s-2);
}.nav-item{
  font-size: var(--fs-12);
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  border-radius: var(--r-lg);
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
  flex: 1;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
}
  overflow: hidden;
  text-overflow: ellipsis;
}/* ikon + text hizalama */.nav-item span{
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}.nav-item:hover{
  background: var(--ac-purple-12);
  border-color: var(--ac-purple-45);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--ac-purple-12) inset,
    0 10px 28px rgba(168,85,247,.14);
  transform: translateY(-1px);
}.nav-item.active{
  shadow: 0 2px 5px var(--b-20);
  background: linear-gradient(135deg, var(--ac-purple-26), rgba(99,102,241,.22));
  border-color: var(--ac-purple-65);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(168,85,247,.18) inset;
}/* Light / Sepia / Book: keep glow but softer text contrast */body.light-mode .nav-item,
body.sepia-mode .nav-item,
body.book-theme .nav-item{
  color: var(--muted);
}body.light-mode .nav-item:hover,
body.sepia-mode .nav-item:hover,
body.book-theme .nav-item:hover{
  box-shadow: 0 8px 18px rgba(168,85,247,.12);
}body.light-mode .nav-item.active,
body.sepia-mode .nav-item.active,
body.book-theme .nav-item.active{
  box-shadow: 0 0 0 1px rgba(168,85,247,.16) inset;
}/* ---------- Collapsible (Gelişmiş / Araçlar) ---------- *//* Works for both native <details> (adv-settings) and any collapsible-header class */.adv-settings,
.tools-collapsible{
  background: var(--glass);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-xl);
  overflow: hidden;
}.adv-summary{
  color: var(--text-strong);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}.adv-settings:hover .adv-summary,
.tools-collapsible:hover .adv-summary{
  background: var(--ac-purple-08);
}.adv-settings:hover,
.tools-collapsible:hover{
  border-color: var(--ac-purple-45);
  box-shadow: var(--shadow-inset-accent);
}.adv-settings[open],
.tools-collapsible[open]{
  border-color: var(--ac-purple-45);
  box-shadow: var(--shadow-inset-accent);
}/* Legacy collapsible header hover (if used elsewhere) */.collapsible-header{
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}.collapsible-header:hover{
  background: var(--ac-purple-08);
  border-color: var(--ac-purple-45);
  box-shadow: var(--shadow-inset-accent);
  transform: translateY(-1px);
}/* ---------- Premium micro-hover for primary buttons (non-sticky) ---------- */.btn-hero.primary:hover:not(:disabled),
.ts-btn:hover,
.driveX-cta:hover,
.driveX-primary:hover{
  border-color: var(--ac-purple-45);
  box-shadow: 0 0 0 1px var(--ac-purple-12) inset, 0 10px 28px rgba(168,85,247,.12);
  transform: translateY(-1px);
}/* Ensure disabled buttons don't look "broken" across themes */.btn-hero:disabled,
.btn-secondary:disabled{
  opacity: .55;
  filter: grayscale(.15);
}/* Focus ring (consistent) */button:focus-visible,
input:focus-visible,
textarea:focus-visible{
  outline: 2px solid rgba(168,85,247,.85);
  outline-offset: 2px;
}/* ==============================
   PANEL VISUAL RHYTHM • MODERN
   ============================== */.input-section,
.template-section--mini,
.config-section,
.main-actions,
.tools-section{
  position: relative;
  background: linear-gradient(
      180deg,
      var(--w-03),
      rgba(255,255,255,0.01)
  );
  border: 1px solid var(--w-08);
  border-radius: var(--r-2xl);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 30px rgba(0,0,0,0.25);
  transition: transform .18s ease, box-shadow .18s ease;
}/* subtle hover lift */.input-section:hover,
.template-section--mini:hover,
.config-section:hover,
.tools-section:hover{
  transform: translateY(-2px);
  box-shadow: 0 1px 0 var(--w-06) inset,
    0 18px 40px rgba(0,0,0,0.35);
}/* ==============================
   HERO ACTION (BAŞLAT BLOĞU)
   ============================== */.main-actions{
  margin-top: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: radial-gradient(
      circle at 20% 20%,
      rgba(168,85,247,0.18),
      transparent 60%
    ),
    linear-gradient(
      135deg,
      rgba(168,85,247,.08),
      rgba(99,102,241,.06)
    );
  border: 1px solid rgba(168,85,247,.28);
  box-shadow: 0 0 0 1px rgba(168,85,247,.12) inset,
    0 20px 50px rgba(168,85,247,.25);
}.drive-error-box{
  margin-top: var(--s-4);
}.drive-error-card{
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-xl);
  background: var(--glass);
  border: 1px solid rgba(239,68,68,.35);
  backdrop-filter: blur(12px);
}.drive-error-title{
  font-weight: 800;
  font-size: var(--fs-13);
  color: var(--text);
}.drive-error-desc{
  font-size: var(--fs-12);
  color: var(--muted);
}.drive-error-btn{
  margin-left: auto;
  padding: 6px 10px;
  border-radius: var(--r-md);
  border: 1px solid rgba(168,85,247,.4);
  background: rgba(168,85,247,.15);
  color: var(--text);
  cursor: pointer;
}/* Notlar sekmesinde uyarı, Drive'daki konuma uyum */#tab-notes #notesErrorBox.drive-error-box{
  margin-top: var(--s-3);
  margin-bottom: var(--s-4);
}/* =========================
   AI Lock (no key / invalid)
   ========================= */.ai-locked{
  opacity: .65 !important;
  cursor: not-allowed !important;
  filter: grayscale(0.15);
}.ai-locked:hover{
  transform: none !important;
}.ai-locked:active{
  transform: none !important;
}/* ================= AI NUDGE CHECKLIST (premium) ================= */.ai-nudge-checklist{
  text-align: left;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--w-08);
  border-radius: var(--r-xl);
  padding: 10px 12px;
  margin: 0 0 14px;
}.ai-nudge-item{
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: 7px 6px;
  border-radius: var(--r-lg);
  opacity: 0;
  transform: translateY(6px);
  animation: aiNudgeItemIn .28s ease forwards;
  animation-delay: var(--d, 0ms);
}.ai-nudge-item + .ai-nudge-item{
  margin-top: 2px;
}.ai-nudge-item:hover{
  background: var(--w-05);
}.ai-nudge-check{
  width: 18px;
  height: 18px;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.34);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.22) inset;
  margin-top: 2px;
}.ai-nudge-check::before{
  content: "✓";
  font-size: var(--fs-12);
  font-weight: 800;
  line-height: 1;
  color: rgba(52, 211, 153, 0.95);
  transform: translateY(-0.5px);
}.ai-nudge-txt{
  font-size: 12.5px;
  opacity: .92;
  line-height: 1.25;
}@keyframes aiNudgeItemIn{to{ opacity:1; transform: translateY(0); }}.answerkey-warning.hidden{
  display: none;
}.exam-timer-inline{
  margin-left: var(--s-4);
  font-weight: 700;
  font-size: var(--fs-12);
  color: #d4d4d8;
  background: var(--w-06);
  border: 1px solid var(--w-12);
  padding: 3px 8px;
  border-radius: var(--r-sm);
}.answerkey-warning{
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-left: var(--s-3);
  padding: 3px 8px;
  font-size: var(--fs-12);
  font-weight: 600;
  border-radius: var(--r-sm);
  color: #ffc857;
  background: rgba(255,200,87,0.12);
  border: 1px solid rgba(255,200,87,0.35);
}@keyframes timerPulse{0%   { transform: scale(1); opacity: 1; }50%  { transform: scale(1.08); opacity: 0.85; }100% { transform: scale(1); opacity: 1; }}.timer-pulse{
  animation: timerPulse 0.8s ease-in-out infinite;
}/* =========================================
   PATI — TEKİLLEŞTİRİLMİŞ
   - Compact glass HUD
   - Mini mod (sınav odak)
   - Speech + Bubble (ikisi de desteklenir)
   - Avatar action animasyonları
   ========================================= *//* 1) Widget konumu */.pati-widget{
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom));
  right: var(--s-7);
  z-index: var(--z-950);
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: var(--s-2);
}.pati-speech{
  position: absolute;
  right: 0;
  bottom: 46px;
  border-radius: var(--r-lg);
  font-size: var(--fs-11);
  background: rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  max-width: 180px;
  pointer-events: none;
  z-index: var(--z-999);
}.pati-speech::after{
  content: "";
  position: absolute;
  right: 18px;
  top: 100%;
  height: 10px;
  background: rgba(0,0,0,.55);
  transform: rotate(45deg);
  border-right: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  bottom: -6px;
  width: 10px;
}/* 2) Container (glass) */.pati-container{
  position: relative;
  display:flex;
  align-items:center;
  gap: var(--s-4);

padding: 7px 9px;
  border-radius: var(--r-xl);

background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);

backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

box-shadow: 0 8px 20px rgba(0,0,0,.14);
}/* 3) Sol HUD (üst progress + avatar + 2 mini bar) */.pati-left{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 5px;
  min-width: 42px;
}.pati-top-progress{
  width: 34px;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.10);
  overflow:hidden;
}.pati-top-fill{
  height:100%;
  background: linear-gradient(90deg,#22c55e,#4ade80);
  transition: width .28s ease, background .2s ease;
}.pati-mini-bars{
  display:flex;
  flex-direction:column;
  gap: 3px;
  width: 34px;
}.mini-bar{
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(0,0,0,.10);
  overflow: hidden;
}.mini-fill{
  height: 100%;
  background: linear-gradient(90deg,var(--brand),#c084fc);
  transition: width .28s ease, background .2s ease;
}.mini-fill.alt{
  background: linear-gradient(90deg,#f59e0b,#fbbf24);
}/* 4) Avatar (tek tanım) */.pati-avatar{
  font-size: var(--fs-20);
  line-height: 1;
  cursor: pointer;
  user-select: none;

filter: drop-shadow(0 6px 10px rgba(0,0,0,.18));
  transform-origin: bottom center;

/* Hover/interaction */
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), filter .2s ease;
}.pati-avatar:hover{
  transform: scale(1.12) rotate(10deg);
}/* eski class'lar bozulmasın */.pati-avatar.sad{ filter: grayscale(.8) drop-shadow(0 6px 10px rgba(0,0,0,.18)); transform: scale(.92); }/* 5) Feed button (modern + playful) */.btn-feed{
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);

display:grid;
  place-items:center;

border: 1px solid rgba(168,85,247,.26);
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.26), rgba(168,85,247,.16));
  box-shadow:
    0 10px 18px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.18);

color: rgba(255,255,255,.92);
  font-size: var(--fs-16);
  font-weight: 900;
  line-height: 1;

cursor:pointer;
  position: relative;
  overflow:hidden;

transition: transform .10s ease, filter .15s ease, background .15s ease;
}.btn-feed::before{
  content:"";
  position:absolute;
  inset:-20%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.22), transparent);
  transform: translateX(-60%) rotate(12deg);
  transition: transform .35s ease;
}.btn-feed:hover::before{ transform: translateX(60%) rotate(12deg); }.btn-feed:hover{ filter: brightness(1.08); }.btn-feed:active{ transform: translateY(1px) scale(.98); }.btn-feed:disabled{ opacity:.45; cursor:not-allowed; filter:none; }/* -----------------------------------------
   7) Konuşma: .pati-bubble (senin eski sistemin)
   - Mevcut tema uyumunu koruyoruz
   ----------------------------------------- */.pati-bubble{
  background: rgba(30, 30, 35, 0.95);
  color: #f0f0f0;
  border: 1px solid rgba(255, 215, 0, 0.4);

padding: 12px 16px;
  border-radius: var(--r-lg);
  border-bottom-left-radius: 2px;

font-size: var(--fs-13);
  font-weight: 500;
  position: relative;
  margin-top: var(--s-4);
  box-shadow: var(--shadow-3);
  z-index: var(--z-100);
  max-width: 200px;
  line-height: 1.4;

opacity: 0;
  transform: translateY(10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  pointer-events: none;
  backdrop-filter: blur(10px);
}.pati-bubble::after{
  content:"";
  position: absolute;
  bottom: -8px;
  left: var(--s-4);
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: rgba(30, 30, 35, 0.95) transparent;
  display:block;
  width:0;
}body.light-mode .pati-bubble{
  background:var(--white);
  color:#333;
  border:1px solid #FFD700;
  box-shadow: var(--shadow-2);
}body.light-mode .pati-bubble::after{ border-color:var(--white) transparent; }body.sepia-mode .pati-bubble{
  background:#fdf6e3;
  color:#5f4b32;
  border:1px solid #dcb35c;
  box-shadow: 0 4px 10px rgba(95,75,50,0.15);
}body.sepia-mode .pati-bubble::after{ border-color:#fdf6e3 transparent; }/* Glow halkası (opsiyonel, bozmuyor) */.avatar-glow{
  position:absolute;
  width:100%;
  height:100%;
  background: radial-gradient(circle, rgba(168,85,247,0.4) 0%, rgba(0,0,0,0) 70%);
  border-radius:50%;
  animation: pulseGlow 3s infinite;
}@keyframes pulseGlow{0%,100%{ transform: scale(1); opacity:.5; }50%{ transform: scale(1.3); opacity:.8; }}/* -----------------------------------------
   8) Mini Mod (Sınav Odak)
   - Eski davranışı korur
   ----------------------------------------- */#patiWidget.mini .pati-stats-area,
#patiWidget.mini .btn-feed,
#patiWidget.mini .pati-lvl{
  display:none !important;
}/* Mini mod container */#patiWidget.mini .pati-container{
  padding: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  justify-content:center;
  gap: 0;

background: rgba(30,30,40,0.4);
  border: 1px solid var(--w-10);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 10px var(--b-10);
}/* Mini mod avatar */#patiWidget.mini .pati-avatar{
  font-size: 24px;
  margin: 0;
  transform: none !important;
  pointer-events: none;
}/* Mini mod bubble konumu */#patiWidget.mini .pati-bubble{
  bottom: 60px;
  right: 0;
  font-size: var(--fs-11);
  padding: 8px 12px;
}/* -----------------------------------------
   9) Canlı Pati Animasyonları
   - Eski class isimlerini bozmaz
   - NOT: #patiAvatar selector'ını “override” etmiyoruz,
     sadece class ile animasyon ekliyoruz (çakışmasın)
   ----------------------------------------- *//* Nefes alma (isteğe bağlı: JS ile is-alive eklenince çalışsın) */@keyframes pati-breathe{0%,100%{ transform: scale(1) translateY(0); }50%{ transform: scale(1.05) translateY(-2px); }}.pati-avatar.is-alive{
  animation: pati-breathe 3s infinite ease-in-out;
}/* Action sınıfları (JS tetikler) */.pati-avatar.action-tilt{ animation: pati-tilt 1s ease-in-out; }@keyframes pati-tilt{0%,100%{ transform: rotate(0deg); }25%{ transform: rotate(-15deg) scale(1.1); }75%{ transform: rotate(10deg) scale(1.1); }}.pati-avatar.action-sniff{ animation: pati-sniff .8s linear; }@keyframes pati-sniff{0%{ transform: translateX(0); }25%{ transform: translateX(-3px) rotate(-2deg); }50%{ transform: translateX(3px) rotate(2deg); }75%{ transform: translateX(-3px) rotate(-2deg); }100%{ transform: translateX(0); }}.pati-avatar.action-jump{ animation: pati-jump .6s ease-out; }@keyframes pati-jump{0%{ transform: translateY(0) scale(1); }40%{ transform: translateY(-15px) scale(1.1, 0.9); }100%{ transform: translateY(0) scale(1); }}.pati-avatar.action-sleep{
  opacity:.85;
  filter: grayscale(.4) drop-shadow(0 6px 10px rgba(0,0,0,.18));
  animation: pati-sleep 4s infinite ease-in-out;
}@keyframes pati-sleep{0%,100%{ transform: scale(1); }50%{ transform: scale(.95) translateY(2px); }}.pati-avatar.action-spin{ animation: pati-spin .8s ease-in-out; }@keyframes pati-spin{0%{ transform: rotateY(0deg) scale(1); }50%{ transform: rotateY(180deg) scale(1.1); }100%{ transform: rotateY(360deg) scale(1); }}/* Eski "eating" class'ı (bozulmasın) */.pati-avatar.eating{ animation: eat .5s; }@keyframes eat{0%{ transform: scale(1); }50%{ transform: scale(1.3); }100%{ transform: scale(1); }}
/* v7: grouped transition tokens */

/* Elite Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Elite Utilities: State helpers (opt-in) */
.is-hidden{ display:none !important; }
.is-disabled{ opacity:.55; pointer-events:none; }

/* Elite Utilities: Typography (opt-in) */
.fw-regular{ font-weight: var(--fw-regular); }
.fw-medium{ font-weight: var(--fw-medium); }
.fw-bold{ font-weight: var(--fw-bold); }
.fw-black{ font-weight: var(--fw-black); }

.lh-tight{ line-height: var(--lh-tight); }
.lh-snug{ line-height: var(--lh-snug); }
.lh-normal{ line-height: var(--lh-normal); }
.lh-relaxed{ line-height: var(--lh-relaxed); }

.text-muted{ opacity:.72; }
.text-faint{ opacity:.55; }

/* Elite Accessibility: ARIA disabled */
[aria-disabled="true"]{
  opacity: .55;
  pointer-events: none;
}

/* Elite Utilities: Surfaces (opt-in) */
.u-glass{
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.u-surface-1{ background: var(--surface-1); }
.u-surface-2{ background: var(--surface-2); }
.u-surface-3{ background: var(--surface-3); }

.u-border-1{ border: 1px solid var(--border-1); }
.u-border-2{ border: 1px solid var(--border-2); }
.u-border-3{ border: 1px solid var(--border-3); }

.rounded-xs{ border-radius: var(--r-xs); }
.rounded-sm{ border-radius: var(--r-sm); }
.rounded-md{ border-radius: var(--r-md); }
.rounded-lg{ border-radius: var(--r-lg); }
.rounded-xl{ border-radius: var(--r-xl); }
.rounded-2xl{ border-radius: var(--r-2xl); }
.rounded-pill{ border-radius: var(--r-pill); }


.modalClose:hover{ filter: brightness(1.08); }

/* Modal blend fix (Light / Sepia) */
body.light-mode .modalCard,
body.sepia-mode .modalCard{
  background-blend-mode: normal;
}

/* ============================================================
   MODAL MOTION SYSTEM (ACUMEN)
   - Open: fade + soft zoom + lift
   - Close: optional (requires .isClosing class)
   - Respects prefers-reduced-motion
   ============================================================ */

@keyframes modalOverlayIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes modalCardIn{
  from{
    opacity: 0;
    transform: translateY(10px) scale(.985);
    filter: blur(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes modalOverlayOut{
  from{ opacity: 1; }
  to{ opacity: 0; }
}

@keyframes modalCardOut{
  from{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
  to{
    opacity: 0;
    transform: translateY(6px) scale(.992);
    filter: blur(6px);
  }
}

/* Open animation runs automatically when modal is inserted into DOM */
.modalOverlay{
  animation: modalOverlayIn 180ms var(--ease-out, ease) both;
}

.modalOverlay .modalCard{
  transform-origin: 50% 40%;
  animation: modalCardIn 240ms var(--ease-out, ease) both;
  will-change: transform, opacity, filter;
}

/* Optional close animation hook (add .isClosing to .modalOverlay before removing) */
.modalOverlay.isClosing{
  animation: modalOverlayOut 140ms var(--ease-out, ease) both;
}

.modalOverlay.isClosing .modalCard{
  animation: modalCardOut 160ms var(--ease-out, ease) both;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .modalOverlay,
  .modalOverlay .modalCard,
  .modalOverlay.isClosing,
  .modalOverlay.isClosing .modalCard{
    animation: none !important;
    transition: none !important;
  }
  .modalOverlay .modalCard{
    filter: none !important;
    transform: none !important;
  }
}


/* ============================================================
   PATI SPEECH (THEME-AWARE) — Widget üstü mesaj balonu
   - Sadece görünüş: JS / HTML bozulmaz
   ============================================================ */

:root{
  --pati-speech-bg: linear-gradient(180deg, rgba(12,14,20,.78), rgba(12,14,20,.58));
  --pati-speech-border: rgba(255,255,255,.14);
  --pati-speech-text: rgba(255,255,255,.92);
  --pati-speech-shadow: 0 14px 34px rgba(0,0,0,.42);
  --pati-speech-blur: 14px;
}

body.light-mode{
  --pati-speech-bg: linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.72));
  --pati-speech-border: rgba(0,0,0,.10);
  --pati-speech-text: rgba(10,12,16,.92);
  --pati-speech-shadow: 0 12px 26px rgba(0,0,0,.16);
}

body.sepia-mode{
  --pati-speech-bg: linear-gradient(180deg, rgba(253,246,227,.90), rgba(244,236,216,.70));
  --pati-speech-border: rgba(91,70,54,.18);
  --pati-speech-text: rgba(91,70,54,.95);
  --pati-speech-shadow: 0 12px 26px rgba(91,70,54,.18);
}

/* Override the existing .pati-speech block */
.pati-speech{
  padding: 10px 12px;
  border-radius: 14px;
  max-width: 220px;

  background: var(--pati-speech-bg);
  color: var(--pati-speech-text);
  border: 1px solid var(--pati-speech-border);
  box-shadow: var(--pati-speech-shadow);

  backdrop-filter: blur(var(--pati-speech-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--pati-speech-blur)) saturate(135%);

  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.1px;

  /* daha temiz kırpma */
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.pati-speech::after{
  background: var(--pati-speech-bg);
  border-right: 1px solid var(--pati-speech-border);
  border-bottom: 1px solid var(--pati-speech-border);
}

/* Mini modda daha kompakt kalsın */
#patiWidget.mini .pati-speech{
  max-width: 200px;
  padding: 8px 10px;
  font-size: 11px;
  border-radius: 12px;
}

/* =====================================================
   UNSURE FLAG ("Emin değilim") UI
===================================================== */
.btn-unsure{
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:800;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn-unsure:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22);
}
.btn-unsure.active{
  background:rgba(245,158,11,.20);
  border-color:rgba(245,158,11,.55);
  color:#ffd199;
  box-shadow:0 0 14px rgba(245,158,11,.25);
}

/* Nav grid button highlight */
.navBtn.unsure{
  border-color: rgba(245,158,11,.55) !important;
  box-shadow: 0 0 0 1px rgba(245,158,11,.20) inset;
  position: relative;
}
.navBtn.unsure::after{
  content:"?";
  position:absolute;
  top:-6px;
  right:-6px;
  width:16px;
  height:16px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  color:#111;
  background: rgba(245,158,11,.95);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* Focus mini nav dot */
.navDot.unsure{
  border-color: rgba(245,158,11,.55) !important;
  box-shadow: 0 0 0 1px rgba(245,158,11,.20) inset;
  position: relative;
}
.navDot.unsure::after{
  content:"?";
  position:absolute;
  top:-7px;
  right:-7px;
  width:14px;
  height:14px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:900;
  color:#111;
  background: rgba(245,158,11,.95);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* Unsure list in nav panel */
.unsureList{
  margin: 10px 10px 6px 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
}
.unsureListTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.unsureListTitle{
  font-size:12px;
  letter-spacing:.2px;
  opacity:.9;
}
.unsureListCount{
  font-size:12px;
  font-weight:800;
  color:#f59e0b;
  background: rgba(245,158,11,.14);
  border: 1px solid rgba(245,158,11,.25);
  padding: 3px 8px;
  border-radius: 999px;
}
.unsureListGrid{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.unsureChip{
  min-width:34px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(245,158,11,.35);
  background: rgba(245,158,11,.10);
  color: rgba(255,255,255,.88);
  cursor:pointer;
  font-weight:700;
  font-size:12px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.unsureChip:hover{
  transform: translateY(-1px);
  background: rgba(245,158,11,.16);
  box-shadow: 0 10px 18px rgba(245,158,11,.10);
}

/* Light / Sepia */
body.light-mode .btn-unsure,
body.sepia-mode .btn-unsure{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.55);
}
body.light-mode .btn-unsure.active,
body.sepia-mode .btn-unsure.active{
  background: rgba(245,158,11,.18);
  border-color: rgba(245,158,11,.40);
  color: rgba(0,0,0,.75);
}
body.light-mode .unsureList,
body.sepia-mode .unsureList{
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}
body.light-mode .unsureChip,
body.sepia-mode .unsureChip{
  color: rgba(0,0,0,.75);
}


/* ===== ACUMEN SCRATCHPAD (Karalama) ===== */
.scratchpad-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: none; /* sadece sınavda */
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--w-12, rgba(255,255,255,.12));
  background: var(--glass, rgba(20,20,24,.55));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text, #e5e7eb);
  cursor: pointer;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  user-select: none;
}
.scratchpad-fab:hover{
  transform: translateY(-2px);
  border-color: rgba(168,85,247,.35);
  background: rgba(24,24,28,.62);
}
.scratchpad-fab .ico{
  width: 18px;height: 18px; display:inline-flex; align-items:center; justify-content:center;
  opacity: .95;
  filter: drop-shadow(0 0 10px rgba(168,85,247,.25));
}
.scratchpad-fab .txt{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  opacity: .92;
}

.scratchpad-panel{
  position: fixed;
  right: 18px;
  bottom: 70px;
  width: min(460px, calc(100vw - 36px));
  height: min(52vh, 520px);
  z-index: 9999;
  display: none;
  border-radius: 18px;
  border: 1px solid var(--w-12, rgba(255,255,255,.12));
  background: rgba(15,15,18,.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
  overflow: hidden;
}
.scratchpad-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
}
.scratchpad-title{
  display:flex; align-items:center; gap:8px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .4px;
  color: var(--text, #e5e7eb);
  opacity: .95;
}
.scratchpad-actions{ display:flex; align-items:center; gap:8px; }
.scratchpad-btn{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text, #e5e7eb);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.scratchpad-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(168,85,247,.35);
  background: rgba(168,85,247,.10);
}
.scratchpad-area{
  height: calc(100% - 46px);
  padding: 12px;
}
.scratchpad-text{
  width: 100%;
  height: 100%;
  resize: none;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.20);
  color: var(--text, #e5e7eb);
  padding: 12px 12px;
  font-size: 13px;
  line-height: 1.45;
  outline: none;
}
.scratchpad-text:focus{
  border-color: rgba(168,85,247,.38);
  box-shadow: 0 0 0 2px rgba(168,85,247,.16);
}
.scratchpad-text::placeholder{
  color: rgba(229,231,235,.55);
}

/* Light/Sepya uyumu */
body.light-mode .scratchpad-panel,
body.sepia-mode .scratchpad-panel{
  background: rgba(255,255,255,.78);
  border-color: rgba(0,0,0,.10);
}
body.light-mode .scratchpad-top,
body.sepia-mode .scratchpad-top{
  border-bottom-color: rgba(0,0,0,.08);
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,0));
}
body.light-mode .scratchpad-title,
body.sepia-mode .scratchpad-title{
  color: var(--text-main, #111827);
}
body.light-mode .scratchpad-text,
body.sepia-mode .scratchpad-text{
  background: rgba(255,255,255,.70);
  border-color: rgba(0,0,0,.10);
  color: var(--text-main, #111827);
}
body.light-mode .scratchpad-btn,
body.sepia-mode .scratchpad-btn,
body.light-mode .scratchpad-fab,
body.sepia-mode .scratchpad-fab{
  color: var(--text-main, #111827);
  border-color: rgba(0,0,0,.12);
  background: rgba(255,255,255,.70);
}


/* ===== SCRATCHPAD ===== */

.sp-btn{
  position:fixed;
  left:20px;
  top:130px;
  z-index:9999;
  display:none;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(20,20,24,.6);
  color:white;
  cursor:pointer;
}

.sp-panel{
  position:fixed;
  left:20px;
  top:180px;
  width:340px;
  height:460px;
  background:rgba(20,20,24,.85);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  z-index:9999;
  display:none;
  padding:10px;
}

.sp-panel.open{
  display:block;
}

.sp-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:8px;
}

.sp-text{
  width:100%;
  height:70px;
  margin-bottom:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  color:white;
}

.sp-canvasWrap{
  width:100%;
  height:260px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
}

.sp-canvas{
  width:100%;
  height:100%;
}


/* Scratchpad minimal UI (non-breaking) */
.filter-chip.scratchpad{ display:inline-flex; align-items:center; gap:8px; }
.filter-chip.scratchpad .sp-ico{ font-size:14px; line-height:1; }

.scratchpadOverlay{
  position:fixed; inset:0;
  display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.35);
  z-index:10000;
  pointer-events:none;
}
.scratchpadOverlay.sp-active{
  pointer-events:auto;
}
.scratchpadCard{
  width:min(760px, calc(100vw - 28px));
  border-radius:18px;
  border:1px solid var(--stroke);
  background: rgba(14,16,24,0.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:0 24px 70px rgba(0,0,0,.45);
  padding:12px;
  /* Taşıma desteği */
  position:fixed;
  cursor:default;
  user-select:none;
}
.scratchpadCard.sp-dragging{
  opacity:0.92;
  box-shadow:0 32px 90px rgba(0,0,0,.6);
}
.scratchpadTop{
  cursor:move;
}
.scratchpadTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.scratchpadTitle{ display:flex; align-items:center; gap:10px; font-weight:900; }
.scratchpadTopBtns{ display:flex; gap:8px; }
.spIconBtn{
  width:34px; height:34px; border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
.scratchpadTabs{ display:flex; gap:8px; margin:10px 0; }
.scratchpadTab{
  padding:8px 12px; border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--text); cursor:pointer; font-weight:800; font-size:12px;
}
.scratchpadTab.is-active{ border-color:rgba(168,85,247,.45); background:rgba(168,85,247,.12); }
.scratchpadPane{ display:none; }
.scratchpadPane.is-active{ display:block; }
.spTools{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.spTool{
  padding:7px 10px; border-radius:12px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--text); cursor:pointer; font-weight:800; font-size:12px;
}
.spTool.is-active{ border-color:rgba(34,197,94,.35); background:rgba(34,197,94,.10); }
.spTool.warn{ border-color:rgba(255,69,58,.35); background:rgba(255,69,58,.10); }
.spCanvasWrap{
  height:360px;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  overflow:hidden;
}
#scratchpadCanvas{ width:100%; height:100%; display:block; touch-action:none; }
.spTextarea{
  width:100%; height:360px; resize:none;
  border-radius:16px; border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:12px;
}


/* --- Emin Değilim (? ) butonu: sadece bu class'ları etkiler --- */
.btn-unsure{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: #facc15;
  font-weight: 900;
  cursor: pointer;
  transition: .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-unsure:hover{
  background: rgba(250,204,21,0.12);
  border-color: rgba(250,204,21,0.35);
}

.btn-unsure.active{
  background: rgba(250,204,21,0.18);
  border-color: rgba(250,204,21,0.55);
  box-shadow: 0 0 0 2px rgba(250,204,21,0.18);
}


/* ==========================
   Emin Değilim (?) Toggle
   - badge/pill görünümüyle uyumlu
   ========================== */
.unsureToggle{
  padding: 4px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--stroke);
  background: var(--glass);
  color: var(--muted);
  font-size: var(--fs-11);
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  height: auto;
  min-height: 0;
}
.unsureToggle:hover{
  filter: brightness(1.08);
  border-color: rgba(255,255,255,.18);
}
.unsureToggle.on{
  border-color: var(--warn);
  color: #ffe7b3;
  background: rgba(255,159,10,.15);
}

/* ================= ACUMEN Onboarding Tour ================= */

/* Theme-aware tokens */
:root{
  --tour-overlay: rgba(0,0,0,.55);
  --tour-overlay-shadow: rgba(0,0,0,.35);
  --tour-card-bg: rgba(18,18,20,.74);
  --tour-card-border: rgba(255,255,255,.14);
  --tour-card-shadow: 0 16px 60px rgba(0,0,0,.45);

  --tour-text: rgba(255,255,255,.92);
  --tour-muted: rgba(255,255,255,.82);

  --tour-btn-bg: rgba(255,255,255,.06);
  --tour-btn-bg-ghost: rgba(255,255,255,.04);
  --tour-btn-border: rgba(255,255,255,.12);

  --tour-primary-bg: var(--accent);
  --tour-primary-text: #fff;

  --tour-chip-bg: rgba(255,255,255,.04);
  --tour-chip-border: rgba(255,255,255,.10);

  --tour-tip-bg: rgba(18,18,26,.82);
  --tour-tip-border: rgba(255,255,255,.14);
  --tour-tip-shadow: 0 18px 60px rgba(0,0,0,.35);
}

/* Light/Sepia overrides to match existing theme modes */
body.light-mode{
  --tour-overlay: rgba(0,0,0,.38);
  --tour-overlay-shadow: rgba(0,0,0,.16);
  --tour-card-bg: rgba(255,255,255,.92);
  --tour-card-border: rgba(0,0,0,.10);
  --tour-card-shadow: 0 16px 60px rgba(0,0,0,.18);

  --tour-text: var(--text-main);
  --tour-muted: var(--text-muted);

  --tour-btn-bg: rgba(0,0,0,.04);
  --tour-btn-bg-ghost: rgba(0,0,0,.03);
  --tour-btn-border: rgba(0,0,0,.10);

  --tour-primary-text: #fff;

  --tour-chip-bg: rgba(0,0,0,.03);
  --tour-chip-border: rgba(0,0,0,.08);

  --tour-tip-bg: rgba(255,255,255,.94);
  --tour-tip-border: rgba(0,0,0,.10);
  --tour-tip-shadow: 0 18px 60px rgba(0,0,0,.18);
}

body.sepia-mode{
  --tour-overlay: rgba(91,70,54,.34);
  --tour-overlay-shadow: rgba(91,70,54,.14);
  --tour-card-bg: rgba(253,246,227,.92);
  --tour-card-border: rgba(91,70,54,.14);
  --tour-card-shadow: 0 16px 60px rgba(91,70,54,.16);

  --tour-text: var(--text-main);
  --tour-muted: var(--text-muted);

  --tour-btn-bg: rgba(91,70,54,.06);
  --tour-btn-bg-ghost: rgba(91,70,54,.05);
  --tour-btn-border: rgba(91,70,54,.14);

  --tour-primary-text: #fff;

  --tour-chip-bg: rgba(91,70,54,.05);
  --tour-chip-border: rgba(91,70,54,.14);

  --tour-tip-bg: rgba(253,246,227,.94);
  --tour-tip-border: rgba(91,70,54,.14);
  --tour-tip-shadow: 0 18px 60px rgba(91,70,54,.18);
}

#acumenTourRoot{
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  font-family: inherit;
}

#acumenTourRoot .acumenTourSpot{
  position: fixed;
  border-radius: 16px;
  box-shadow:
    0 0 0 9999px var(--tour-overlay),
    0 12px 50px var(--tour-overlay-shadow);
  border: 1px solid var(--tour-card-border);
  pointer-events: none;
  transition: all .18s ease;
}

#acumenTourRoot .acumenTourCard{
  position: fixed;
  width: min(420px, calc(100vw - 28px));
  border-radius: 18px;
  background: var(--tour-card-bg);
  border: 1px solid var(--tour-card-border);
  box-shadow: var(--tour-card-shadow);
  padding: 14px 14px 12px;
  pointer-events: auto;
  transform: translateZ(0);
  animation: acumenTourPop .22s ease;


/* Tooltip arrow (theme-aware) */
.acumenTourCard::after{
  content:"";
  position:absolute;
  width: 14px;
  height: 14px;
  background: var(--tour-card-bg);
  border-right: 1px solid var(--tour-card-border);
  border-bottom: 1px solid var(--tour-card-border);
  transform: rotate(45deg);
  filter: drop-shadow(0 10px 20px var(--tour-overlay-shadow));
  opacity: .96;
}

/* Default placement: bottom (arrow on top) */
.acumenTourCard[data-place="bottom"]::after{
  top: -7px;
  left: 28px;
}

/* Arrow on bottom */
.acumenTourCard[data-place="top"]::after{
  bottom: -7px;
  left: 28px;
  transform: rotate(225deg);
}

/* Arrow on left/right */
.acumenTourCard[data-place="left"]::after{
  right: -7px;
  top: 34px;
  transform: rotate(135deg);
}
.acumenTourCard[data-place="right"]::after{
  left: -7px;
  top: 34px;
  transform: rotate(-45deg);
}
}

@keyframes acumenTourPop{
  from{ opacity: 0; transform: translateY(8px) scale(.985); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  #acumenTourRoot .acumenTourCard{ animation: none; }
}

@supports (backdrop-filter: blur(12px)){
  #acumenTourRoot .acumenTourCard{
    backdrop-filter: blur(14px);
  }
}

#acumenTourRoot .acumenTourTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

#acumenTourRoot .acumenTourMeta{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 0 0 auto;
}

#acumenTourRoot .acumenTourStep{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--tour-chip-border);
  background: var(--tour-chip-bg);
  color: var(--tour-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;
}

/* Premium pulse for important CTAs during tour */
.acumenPulse{
  animation: acumenPulse 1.25s ease-in-out infinite;
}

@keyframes acumenPulse{
  0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 38%, transparent); transform: translateZ(0); }
  60%{ box-shadow: 0 0 0 10px transparent; }
  100%{ box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce){
  .acumenPulse{ animation: none; }
}

#acumenTourRoot .acumenTourHeading{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 0;
}

#acumenTourRoot .acumenTourMascot{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 5px 10px;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid var(--tour-chip-border);
  background: var(--tour-chip-bg);
  color: var(--tour-muted);
  font-size: 11px;
  line-height: 1;
}

#acumenTourRoot .acumenTourMascotIcon{
  font-size: 14px;
  line-height: 1;
}

#acumenTourRoot .acumenTourMascotName{
  font-weight: 850;
  letter-spacing: .15px;
}

#acumenTourRoot .acumenTourTitle{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  color: var(--tour-text);
}

#acumenTourRoot .acumenTourX{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--tour-btn-border);
  background: var(--tour-btn-bg);
  color: var(--tour-text);
  cursor: pointer;
}


.acumenTourMode{
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--tour-chip-border);
  background: var(--tour-chip-bg);
  color: var(--tour-text);
  font-size: 11px;
  letter-spacing: .2px;
  cursor: pointer;
}
#acumenTourRoot .acumenTourMode:hover{ filter: brightness(1.08); }

.acumenTourBtn.mini{
  padding: 8px 10px;
  font-size: 11px;
}

#acumenTourRoot .acumenTourX:hover{
  filter: brightness(1.06);
}

#acumenTourRoot .acumenTourBody{
  font-size: 13px;
  line-height: 1.45;
  color: var(--tour-muted);
  margin-bottom: 10px;
  white-space: pre-wrap;
}

#acumenTourRoot .acumenTourBottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

#acumenTourRoot .acumenTourDots{
  display:flex;
  gap:6px;
  align-items:center;
}

#acumenTourRoot .acumenTourDot{
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tour-text) 22%, transparent);
}

#acumenTourRoot .acumenTourDot.is-on{
  background: color-mix(in srgb, var(--tour-text) 78%, transparent);
}

#acumenTourRoot .acumenTourBtns{
  display:flex;
  gap:8px;
  align-items:center;
}

#acumenTourRoot .acumenTourBtn{
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--tour-btn-border);
  background: var(--tour-btn-bg);
  color: var(--tour-text);
  font-size: 12px;
  cursor: pointer;
}

#acumenTourRoot .acumenTourBtn:hover{
  filter: brightness(1.06);
}

#acumenTourRoot .acumenTourBtn.primary{
  background: var(--tour-primary-bg);
  border-color: color-mix(in srgb, var(--tour-primary-bg) 72%, transparent);
  color: var(--tour-primary-text);
  font-weight: 850;
}

#acumenTourRoot .acumenTourBtn.ghost{
  background: var(--tour-btn-bg-ghost);
}

#acumenTourRoot .acumenTourBtn:disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: none;
}

/* Small helper button next to theme toggle */
.tour-btn-icon{
  margin-left: 8px;
  opacity: .95;
}

/* Tour: "show only once" checkbox — smaller + cleaner */
#acumenTourRoot .acumenTourOnce{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid var(--tour-chip-border);
  background: var(--tour-chip-bg);
  color: var(--tour-muted);
  font-size: 11px;
  pointer-events: auto;
  user-select: none;
}

#acumenTourRoot .acumenTourOnce span{
  line-height: 1.2;
}

#acumenTourRoot .acumenTourOnceChk{
  width: 14px;
  height: 14px;
  accent-color: var(--accent);
}

/* ================= ACUMEN Contextual Tips ================= */

.acumenTip{
  position: fixed;
  z-index: 999998;
  width: min(360px, calc(100vw - 24px));
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid var(--tour-tip-border);
  background: var(--tour-tip-bg);
  backdrop-filter: blur(10px);
  box-shadow: var(--tour-tip-shadow);
  color: var(--tour-text);
}

.acumenTipHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
}

.acumenTipMascot{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--tour-chip-border);
  background: var(--tour-chip-bg);
  color: var(--tour-muted);
  font-size: 11px;
  line-height: 1;
}

.acumenTipMascotIcon{ font-size: 14px; line-height: 1; }
.acumenTipMascotName{ font-weight: 850; letter-spacing: .15px; }

.acumenTipTitle{
  font-weight: 850;
  letter-spacing: .2px;
  margin-bottom: 0;
  color: var(--tour-text);
}

.acumenTipBody{
  font-size: 13px;
  line-height: 1.35;
  color: var(--tour-muted);
}

.acumenTipActions{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.acumenTipBtn{
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--tour-btn-border);
  background: var(--tour-primary-bg);
  color: var(--tour-primary-text);
  font-weight: 850;
  cursor: pointer;
}

.acumenTipBtn:hover{
  filter: brightness(1.06);
}


/* Drive: PDF badge for premium guidance */
.driveX-name{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.driveX-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: inherit;
  opacity: .92;
}
body.light-mode .driveX-badge, body.sepia-mode .driveX-badge{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}
.driveX-badge .dot{
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent);
  display:inline-block;
}


/* === Open-ended PRO (theme-aware) === */

/* Uses existing design tokens; falls back to legacy vars. */
:root{
  --oe-bg: var(--glass-bg, var(--glass));
  --oe-bd: var(--glass-border, var(--stroke));
  --oe-bg2: var(--glass-bg-hover, var(--glass2));
  --oe-text: var(--text-strong, var(--text));
  --oe-muted: var(--text-muted, var(--muted));
}

/* Scenario card */
.oe-scenarioCard{ margin-bottom: 12px; }
.oe-scenarioCard .qNum{ font-weight: 900; letter-spacing: .6px; }
.oe-scenario details.oe-scenario{
  border: 1px solid var(--oe-bd);
  border-radius: calc(var(--radius2) + 4px);
  background: var(--oe-bg);
  box-shadow: var(--shadow2);
  overflow: hidden;
}
.oe-scn-title{
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 900;
  color: var(--oe-text);
}
.oe-scn-title::-webkit-details-marker{ display:none; }
.oe-scn-body{
  padding: 10px 12px 12px;
  color: var(--oe-muted);
  line-height: 1.55;
}

/* Link row on question cards */
.oe-scn-row{ display:flex; justify-content:flex-end; margin-bottom: 8px; }

/* Main wrapper */
.oe-wrap{
  border: 1px solid var(--oe-bd);
  border-radius: calc(var(--radius2) + 4px);
  background: var(--oe-bg);
  box-shadow: var(--shadow2);
  overflow: hidden;
}

/* Header */
.oe-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--oe-bd);
  background: linear-gradient(180deg, var(--oe-bg2), var(--oe-bg));
}
.oe-title{
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--oe-text);
}
.oe-actions{ display:flex; align-items:center; gap:10px; }
.oe-progress{ color: var(--oe-muted); font-weight: 700; font-size: 12px; }

/* Items */
.oe-list{ padding: 10px 12px 12px; display:flex; flex-direction:column; gap: 12px; }
.oe-item{
  border: 1px solid var(--oe-bd);
  border-radius: var(--radius2);
  background: rgba(0,0,0,0); /* keep it theme-consistent */
  padding: 10px 10px 12px;
}
.oe-itemTop{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.oe-q{ color: var(--oe-text); font-weight: 800; line-height: 1.4; }
.oe-itemBtns{ display:flex; align-items:center; gap:8px; }
.oe-save{ color: var(--oe-muted); font-size: 11px; font-weight: 700; }

/* Textarea matches app fields */
.oe-ta{
  width: 100%;
  margin-top: 10px;
  border-radius: var(--radius2);
  border: 1px solid var(--oe-bd);
  background: rgba(0,0,0,0);
  color: var(--oe-text);
  padding: 10px 12px;
  outline: none;
  resize: vertical;
  min-height: 120px;
}
.oe-ta:focus{
  border-color: var(--glass-border-hover, rgba(168,85,247,.45));
  box-shadow: 0 0 0 3px rgba(168,85,247,.15);
}

/* Grade box */
.oe-grade{ margin-top: 10px; }
.oe-gradeTop{ display:flex; gap:10px; align-items:flex-start; }
.oe-score{
  min-width: 44px;
  height: 44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 14px;
  font-weight: 900;
  border: 1px solid var(--oe-bd);
  background: var(--oe-bg2);
}
.oe-score.ok{ border-color: rgba(52,199,89,.45); }
.oe-score.mid{ border-color: rgba(255,159,10,.45); }
.oe-score.bad{ border-color: rgba(255,69,58,.45); }

.oe-gradeFeedback{ color: var(--oe-text); font-weight: 800; }
.oe-gradeConf{ color: var(--oe-muted); font-size: 12px; margin-top: 2px; }
.oe-gradeModel{ color: var(--oe-muted); font-size: 12px; margin-top: 2px; }
.oe-subs{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-top: 10px; }
.oe-sub{
  border: 1px solid var(--oe-bd);
  border-radius: 12px;
  padding: 8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: var(--oe-muted);
  background: rgba(0,0,0,0);
}
.oe-details{
  border: 1px solid var(--oe-bd);
  border-radius: 12px;
  padding: 8px 10px;
  margin-top: 10px;
  background: rgba(0,0,0,0);
}
.oe-details summary{ cursor:pointer; font-weight: 900; color: var(--oe-text); }
.oe-details ul{ margin: 8px 0 0 18px; color: var(--oe-muted); }

/* === Summary modal dual layout (side-by-side like two separate modals) === */
#summaryModal.modalOverlay{
  align-items: flex-start;
  justify-content: flex-start;
  padding-top: 22px;
}
#summaryModal .dualModalWrap{
  width: auto;
  max-width: min(1400px, calc(100% - 16px));
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 32px;
}
#summaryModal .modalCard{
  flex: 0 0 var(--modal-w);
}
#summaryModal .topicDistPanel{
  flex: 0 0 420px;
  width: 420px; /* looks like a separate mini-modal */
  margin-top: 0;
}
/* keep responsive stacking */
@media (max-width: 980px){
  #summaryModal.modalOverlay{ align-items: center; padding-top: 18px; }
  #summaryModal .dualModalWrap{ justify-content: flex-start; gap: 14px; }
  #summaryModal .topicDistPanel{ width: 100%; flex-basis: auto; }
}


.weakInsight{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 12px;
  color: rgba(255,255,255,.9);
  line-height: 1.35;
}

.weakInsightMsg{
  margin-bottom: 10px;
}

.weakInsightCta{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.95);
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.weakInsightCta:hover{
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.18);
}

.weakInsightCta:active{
  transform: translateY(1px);
}


.scoreBadge{
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,215,0,.95), rgba(255,176,0,.9));
  color: rgba(20,20,20,.95);
  font-weight: 700;
}


.badge.ai-badge{
  color:#fff;
  background:linear-gradient(135deg,#7c5cff,#a855f7);
  border:1px solid rgba(168,85,247,.6);
  box-shadow:
    0 2px 6px rgba(124,92,255,.35),
    inset 0 1px 0 rgba(255,255,255,.25);
}