/* ============================================================
   YDS ÇALIŞMA MASASI — TASARIM SİSTEMİ
   Tema: Sınav kağıdı + optik form + sınav giriş belgesi
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --paper: #F4F5EF;
  --paper-line: #C9D6E3;
  --ink: #20242B;
  --pencil: #5B6472;
  --ballpoint: #1E3A8A;
  --ballpoint-light: #2D4FC4;
  --correction: #A81C31;
  --stamp: #2F6F4E;
  --stamp-bg: #E3EFE7;
  --card: #FDFDFB;
  --border: #D6D0C2;
  --radius: 4px;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Work Sans', sans-serif;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:
    repeating-linear-gradient(180deg, transparent, transparent 27px, var(--paper-line) 28px),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
}
body::before{
  content:"";
  position:fixed; top:0; left:64px; width:1px; height:100%;
  background: var(--correction); opacity:.35; z-index:0;
}
a{ color: var(--ballpoint); }
button{ font-family: inherit; }
::selection{ background: var(--ballpoint); color:#fff; }

.app{ display:flex; min-height:100vh; position:relative; z-index:1; }

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:220px; flex-shrink:0;
  background: var(--card);
  border-right: 2px solid var(--ink);
  padding: 22px 0;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
}
.brand{
  padding: 0 20px 18px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 14px;
}
.brand .code{
  font-family: var(--font-mono); font-size:11px; letter-spacing:.08em;
  color: var(--pencil); text-transform:uppercase;
}
.brand h1{
  font-family: var(--font-mono); font-size:19px; font-weight:800; margin:4px 0 0;
  letter-spacing:-0.01em;
}
.brand h1 span{ color: var(--correction); }

nav{ display:flex; flex-direction:column; gap:2px; padding: 0 10px; }
.navlink{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius: var(--radius);
  color: var(--ink); text-decoration:none; cursor:pointer;
  font-size:14px; font-weight:500; border:1px solid transparent;
  background:none; text-align:left; width:100%;
}
.navlink .num{
  font-family: var(--font-mono); font-size:11px; color: var(--pencil);
  width:18px;
}
.navlink:hover{ background:#EFEEE6; }
.navlink.active{
  background: var(--ink); color:#fff; border-color:var(--ink);
}
.navlink.active .num{ color:#B9C0CC; }

.sidebar-foot{
  margin-top:auto; padding: 14px 20px 0;
  border-top:1px dashed var(--border);
  font-family: var(--font-mono); font-size:11px; color:var(--pencil);
}

/* ---------- MAIN ---------- */
main{ flex:1; padding: 30px 40px 60px; max-width: 980px; }
.page{ display:none; animation: fadein .25s ease; }
.page.active{ display:block; }
@keyframes fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

.page-title{
  font-family: var(--font-mono); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--pencil); margin:0 0 4px;
}
.page-heading{
  font-size:26px; font-weight:700; margin:0 0 22px; letter-spacing:-0.01em;
}

/* ---------- ADMISSION TICKET (signature element) ---------- */
.ticket{
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 6px;
  display:grid;
  grid-template-columns: 1fr 150px;
  margin-bottom: 26px;
  position:relative;
  overflow:hidden;
}
.ticket::before{
  content:"e-YDS GİRİŞ BELGESİ";
  position:absolute; top:10px; right:166px;
  font-family: var(--font-mono); font-size:9px; letter-spacing:.14em;
  color: var(--pencil);
}
.ticket-body{ padding: 22px 24px 18px; }
.ticket-row{ display:flex; gap:8px; font-size:13px; margin-bottom:7px; }
.ticket-row .label{ font-family: var(--font-mono); font-size:10px; color:var(--pencil); text-transform:uppercase; width:110px; padding-top:2px;}
.ticket-row .value{ font-weight:600; }
.ticket-photo{
  background: var(--ink); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; border-left:2px dashed #7A7566;
  position:relative;
}
.ticket-photo .days{ font-family: var(--font-mono); font-size:44px; font-weight:800; line-height:1; color:#F4B4BC; }
.ticket-photo .days.urgent{ color: #FF6B7A; }
.ticket-photo .caption{ font-family: var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#C9CDD6; }

/* ---------- STAT GRID ---------- */
.stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; margin-bottom:28px; }
.stat-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding:16px 16px 14px; position:relative;
}
.stat-card .k{ font-family: var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--pencil); }
.stat-card .v{ font-family: var(--font-mono); font-size:26px; font-weight:700; margin-top:6px; }
.stat-card .v small{ font-size:13px; font-weight:500; color:var(--pencil); }

section.block{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding:20px 22px; margin-bottom:22px;
}
.block h3{ margin:0 0 14px; font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px;}
.block h3 .tag{
  font-family: var(--font-mono); font-size:10px; background: var(--stamp-bg); color:var(--stamp);
  padding:2px 6px; border-radius:3px; border:1px solid #BFDBC9;
}

/* mini bar chart */
.barchart{ display:flex; align-items:flex-end; gap:10px; height:120px; padding-top:10px; }
.barchart .bar-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; height:100%; justify-content:flex-end; }
.barchart .bar{ width:100%; max-width:34px; background: var(--ballpoint); border-radius:2px 2px 0 0; position:relative; }
.barchart .bar .val{ position:absolute; top:-18px; left:0; right:0; text-align:center; font-family:var(--font-mono); font-size:11px; font-weight:700; }
.barchart .lbl{ font-family: var(--font-mono); font-size:10px; color:var(--pencil); text-align:center; }

/* ---------- BUTTONS ---------- */
.btn{
  font-family: var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:9px 16px; border-radius: var(--radius); border:1.5px solid var(--ink);
  background: var(--ink); color:#fff; cursor:pointer; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:7px;
}
.btn:hover{ background: #33384380; }
.btn.ghost{ background:transparent; color:var(--ink); }
.btn.ghost:hover{ background:#EFEEE6; }
.btn.danger{ border-color: var(--correction); background: var(--correction); }
.btn.stamp{ border-color: var(--stamp); background: var(--stamp); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- TIMER ---------- */
.timer-display{
  font-family: var(--font-mono); font-size:56px; font-weight:800; letter-spacing:.02em;
  text-align:center; padding:18px 0 10px;
}
.timer-sub{ text-align:center; font-size:12px; color:var(--pencil); margin-bottom:14px; font-family: var(--font-mono);}

/* ---------- VOCAB / CONNECTOR FLASHCARD ---------- */
.flash{
  background: var(--card); border:2px solid var(--ink); border-radius:8px;
  padding: 34px 30px; text-align:center; margin-bottom:18px; min-height:170px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  cursor:pointer; position:relative;
}
.flash .cat-tag{
  position:absolute; top:12px; left:14px; font-family:var(--font-mono); font-size:10px;
  color:var(--pencil); text-transform:uppercase; letter-spacing:.06em;
}
.flash .front{ font-size:26px; font-weight:700; }
.flash .back{ display:none; }
.flash.flipped .back{ display:block; }
.flash.flipped .front{ font-size:20px; color:var(--pencil); }
.flash .tr{ color: var(--ballpoint); font-size:19px; font-weight:600; }
.flash .exmp{ font-size:13px; color:var(--pencil); font-style:italic; max-width:520px; }
.flash .hint{ font-family: var(--font-mono); font-size:10px; color:var(--pencil); text-transform:uppercase; letter-spacing:.08em; }

/* optic-form style bubble buttons */
.optic-row{ display:flex; gap:12px; justify-content:center; margin-top:6px; }
.optic-btn{
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
  background:none; border:none; padding:0;
}
.bubble{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; font-size:13px;
  background: var(--card);
}
.optic-btn.know .bubble:hover, .optic-btn.know:active .bubble{ background: var(--stamp); color:#fff; border-color:var(--stamp); }
.optic-btn.unsure .bubble:hover, .optic-btn.unsure:active .bubble{ background: #C79A2E; color:#fff; border-color:#C79A2E;}
.optic-btn.dontknow .bubble:hover, .optic-btn.dontknow:active .bubble{ background: var(--correction); color:#fff; border-color:var(--correction);}
.optic-btn .lbl{ font-size:11px; font-family: var(--font-mono); color:var(--pencil); text-transform:uppercase; }

.progress-bar{ height:8px; background:#E7E4D9; border-radius:4px; overflow:hidden; border:1px solid var(--border); }
.progress-bar .fill{ height:100%; background: var(--stamp); }

/* filters/search */
.filter-row{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.chip{
  font-family: var(--font-mono); font-size:11px; padding:6px 11px; border-radius:20px;
  border:1px solid var(--border); background:var(--card); cursor:pointer; text-transform:uppercase;
}
.chip.active{ background: var(--ink); color:#fff; border-color:var(--ink); }
input[type=text]{
  font-family: var(--font-body); font-size:13px; padding:8px 12px; border-radius: var(--radius);
  border:1px solid var(--border); background:var(--card); width:220px;
}

/* connector/vocab table list */
.wordlist{ display:flex; flex-direction:column; gap:0; }
.wordrow{
  display:grid; grid-template-columns: 40px 1fr 1fr auto; align-items:center; gap:14px;
  padding:11px 4px; border-bottom:1px solid var(--border); font-size:13.5px;
}
.wordrow .box-badge{
  font-family: var(--font-mono); font-size:10px; text-align:center; padding:3px 0; border-radius:3px;
  border:1px solid var(--border); color:var(--pencil);
}
.wordrow .box-badge.mastered{ background: var(--stamp-bg); color:var(--stamp); border-color:#BFDBC9; }
.wordrow .en{ font-weight:600; }
.wordrow .tr{ color:var(--pencil); }
.wordrow .cat{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; color:var(--ballpoint); }

/* ---------- EXAM MODE ---------- */
.exam-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.exam-clock{ font-family: var(--font-mono); font-size:20px; font-weight:700; }
.qcard{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius);
  padding:20px 22px; margin-bottom:14px;
}
.qcard .qnum{ font-family: var(--font-mono); font-size:11px; color:var(--pencil); margin-bottom:8px; }
.qcard .qtext{ font-size:15.5px; margin-bottom:14px; line-height:1.6; }
.qcard .qtext .blank{ display:inline-block; border-bottom:2px solid var(--ink); min-width:70px; }
.opt-list{ display:flex; flex-direction:column; gap:8px; }
.opt{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--border);
  border-radius: var(--radius); cursor:pointer; font-size:13.5px;
}
.opt:hover{ background:#F0EFE7; }
.opt .letter{
  width:22px; height:22px; border-radius:50%; border:1.5px solid var(--ink); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:700;
}
.opt.selected .letter{ background: var(--ballpoint); color:#fff; border-color:var(--ballpoint); }
.opt.correct{ border-color: var(--stamp); background: var(--stamp-bg); }
.opt.correct .letter{ background:var(--stamp); color:#fff; border-color:var(--stamp); }
.opt.wrong{ border-color: var(--correction); background:#FBE8E9; }
.opt.wrong .letter{ background:var(--correction); color:#fff; border-color:var(--correction); }
.qcard .explain{
  margin-top:12px; padding:10px 12px; background:#F0EFE7; border-left:3px solid var(--ballpoint);
  font-size:12.5px; color:var(--pencil); display:none;
}
.qcard .explain.show{ display:block; }

.result-banner{
  border:2px solid var(--ink); border-radius:6px; padding:22px; text-align:center; margin-bottom:20px;
  background: var(--card);
}
.result-banner .score{ font-family: var(--font-mono); font-size:44px; font-weight:800; }
.result-banner .desc{ color:var(--pencil); font-size:13px; margin-top:4px; }

.exam-picker{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.exam-pick-card{
  background: var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:18px;
}
.exam-pick-card h4{ margin:0 0 6px; font-size:15px; }
.exam-pick-card .meta{ font-family:var(--font-mono); font-size:11px; color:var(--pencil); margin-bottom:14px;}

.empty-state{ text-align:center; padding:50px 20px; color:var(--pencil); }
.empty-state .stamp-icon{
  display:inline-block; border:2px dashed var(--stamp); color:var(--stamp); border-radius:50%;
  width:56px; height:56px; line-height:52px; font-size:24px; margin-bottom:14px; font-family:var(--font-mono);
}

@media (max-width: 800px){
  .app{ flex-direction:column; }
  .sidebar{ width:100%; height:auto; position:relative; border-right:none; border-bottom:2px solid var(--ink); }
  nav{ flex-direction:row; overflow-x:auto; }
  main{ padding: 20px; }
  .stat-grid{ grid-template-columns: repeat(2,1fr); }
  .ticket{ grid-template-columns: 1fr; }
  .ticket-photo{ border-left:none; border-top:2px dashed #7A7566; padding:16px 0; }
  .exam-picker{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

button:focus-visible, .navlink:focus-visible, .opt:focus-visible, .chip:focus-visible{
  outline: 2px solid var(--ballpoint); outline-offset: 2px;
}