/* ============================================================
   Online Koçunuz — Çalışma Takip Sistemi (ÇST) · odak/timer ekranı
   Kaynak: design_system/standalone/calisma-takip-sistemi.html (snapshot)
   Tüm kurallar .okt-cst altına scope'landı (global çakışma önleme).
   Token'lar (var(--primary-500) vb.) globalde (style.css) tanımlı.
   ============================================================ */

.okt-cst { color:#fff; }
.okt-cst .num { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.okt-cst .eyebrow { font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em; color:var(--primary-700); }

.okt-cst .btn { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px;
       border-radius:10px; font-family:var(--font-sans); font-size:15px; font-weight:600;
       border:1px solid transparent; cursor:pointer; line-height:1;
       transition: background 120ms var(--ease-out), transform 120ms var(--ease-out); }
.okt-cst .btn:hover { transform:translateY(-1px); }
.okt-cst .btn-primary { background:var(--primary-500); color:#fff; }
.okt-cst .btn-primary:hover { background:var(--primary-600); }
.okt-cst .btn-secondary { background:#fff; color:var(--ink-700); border-color:var(--ink-100); }
.okt-cst .btn-secondary:hover { background:var(--ink-10); }
.okt-cst .btn-accent { background:var(--accent-500); color:var(--ink-900); }
.okt-cst .btn-accent:hover { background:var(--accent-300); }
.okt-cst .btn-lg { height:52px; padding:0 24px; font-size:16px; border-radius:12px; }

.okt-cst .container { max-width:1200px; margin:0 auto; padding:0 24px; }

@keyframes okt-cst-twinkle { 0%,100%{opacity:.2} 50%{opacity:1} }
@keyframes okt-cst-fade-in-up {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes okt-cst-timer-pulse {
  0%   { transform:scale(.96); opacity:0; }
  60%  { transform:scale(1.02); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}
@keyframes okt-cst-float-soft {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-4px); }
}

/* Animatable gradient colors — softer subject color transitions */
@property --cst-tint   { syntax: '<color>'; initial-value: rgba(91,114,255,.55); inherits: false; }
@property --cst-tint-2 { syntax: '<color>'; initial-value: rgba(91,114,255,.22); inherits: false; }
@property --cst-stroke { syntax: '<color>'; initial-value: rgba(91,114,255,.22); inherits: false; }
@property --cst-glow   { syntax: '<color>'; initial-value: #5A72FF;             inherits: false; }
.okt-cst .cst-stage { background:#0B0F1A; }

/* === UZAY TEMASI: hareketli arka plan katmanları === */
@keyframes cst-nebula-rot   { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes cst-nebula-rot-r { from{transform:rotate(0)} to{transform:rotate(-360deg)} }
@keyframes cst-aurora-pulse {
  0%,100% { opacity:.45; transform:translate(-3%,-2%) scale(1); }
  50%     { opacity:.85; transform:translate(3%,2%)  scale(1.05); }
}
@keyframes cst-orbit-spin { from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes cst-orbit-spin-r { from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(-360deg)} }
@keyframes cst-twinkle-soft { 0%,100%{opacity:.15} 50%{opacity:.9} }
@keyframes cst-drift-x { 0%,100%{transform:translateX(0)} 50%{transform:translateX(2%)} }

.okt-cst .cst-nebula {
  position:absolute; inset:-25%;
  pointer-events:none;
  background:
    radial-gradient(55% 50% at 50% 30%, var(--cst-tint), transparent 65%),
    radial-gradient(45% 40% at 70% 25%, var(--cst-tint-2), transparent 60%),
    radial-gradient(40% 35% at 25% 75%, var(--cst-tint-2), transparent 65%);
  transition: --cst-tint 1100ms cubic-bezier(.2,.8,.2,1),
              --cst-tint-2 1100ms cubic-bezier(.2,.8,.2,1);
  animation: cst-nebula-rot 240s linear infinite;
  will-change: transform;
}
/* Sabit (dönmeyen) ana ders rengi katmanı — net renk değişimi için */
.okt-cst .cst-tint-glow {
  position:absolute; inset:0;
  pointer-events:none;
  background: radial-gradient(70% 60% at 50% 0%, var(--cst-tint), transparent 70%);
  transition: --cst-tint 1100ms cubic-bezier(.2,.8,.2,1);
}
.okt-cst .cst-aurora {
  position:absolute; inset:-15%;
  pointer-events:none;
  background: radial-gradient(50% 50% at 50% 100%, rgba(198,242,90,.10), transparent 60%);
  animation: cst-aurora-pulse 18s ease-in-out infinite;
}
.okt-cst .cst-orbit {
  position:absolute; left:50%; top:50%;
  width:90vmax; height:90vmax;
  border:1px solid var(--cst-stroke);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation: cst-orbit-spin 300s linear infinite;
  pointer-events:none;
  opacity:.7;
  transition: --cst-stroke 1100ms cubic-bezier(.2,.8,.2,1),
              opacity 800ms var(--ease-out);
}
.okt-cst .cst-orbit::before {
  content:'';
  position:absolute; top:50%; right:-5px;
  width:9px; height:9px;
  background:var(--cst-glow);
  border-radius:50%;
  transform:translateY(-50%);
  box-shadow:0 0 16px var(--cst-glow);
  transition: --cst-glow 1100ms cubic-bezier(.2,.8,.2,1);
}
.okt-cst .cst-orbit-2 {
  position:absolute; left:50%; top:50%;
  width:140vmax; height:140vmax;
  border:1px solid var(--cst-stroke);
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation: cst-orbit-spin-r 480s linear infinite;
  pointer-events:none;
  opacity:.55;
  transition: --cst-stroke 1100ms cubic-bezier(.2,.8,.2,1);
}
.okt-cst .cst-star {
  position:absolute;
  background:#fff;
  border-radius:50%;
  pointer-events:none;
  animation: cst-twinkle-soft 4s ease-in-out infinite;
}
/* Running'de hareketler biraz hızlanır */
.okt-cst .cst-stage.running .cst-nebula { animation-duration: 140s; }
.okt-cst .cst-stage.running .cst-orbit  { animation-duration: 180s; opacity:1; }
.okt-cst .cst-stage.running .cst-aurora { animation-duration: 11s; }

/* Subject panel "defter sayfası" davranışı: idle / running / tucked */
.okt-cst .cst-page {
  transition: opacity 540ms var(--ease-out),
              transform 540ms var(--ease-out),
              filter 540ms var(--ease-out),
              box-shadow 540ms var(--ease-out);
  transform-origin: top right;
  will-change: transform;
}
.okt-cst .cst-page.idle    { opacity:1; transform:none; filter:none; }
.okt-cst .cst-page.running { opacity:.55; transform:translateX(20px) scale(.96); filter:saturate(.7); }
.okt-cst .cst-page.running:hover { opacity:1; transform:translateX(0) scale(1); filter:none; }
.okt-cst .cst-page.tucked {
  transform: translate(8px,-12px) scale(.92) rotate(-1.4deg);
  opacity:.74; filter:saturate(.85);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.45);
}
.okt-cst .cst-page.tucked:hover {
  transform: translate(0,0) scale(1) rotate(0);
  opacity:1; filter:none;
  box-shadow: 0 22px 50px -14px rgba(0,0,0,.55);
}

/* Timer area entry effect when starting */
.okt-cst .cst-timer { transition: transform 600ms var(--ease-out); }
.okt-cst .cst-timer.running { animation: okt-cst-timer-pulse 700ms var(--ease-out); }

/* Active subject dot — soft breathing */
.okt-cst .cst-dot-running { animation: okt-cst-float-soft 2.4s ease-in-out infinite; }

/* Floating corner widgets */
.okt-cst .cst-corner {
  position: fixed;
  z-index: 80;
  background: rgba(20,24,40,.78);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  color: #fff;
  font-family: var(--font-sans);
  box-shadow: 0 14px 36px -10px rgba(0,0,0,.45);
  transition: width 320ms var(--ease-out), height 320ms var(--ease-out);
}

/* ===== JS ile enjekte edilen çalışma katmanı (gate / modal / kontroller) ===== */
.okt-cst-gate {
  min-height: calc(100vh - 130px);
  display: flex; align-items: center; justify-content: center;
  background:#0B0F1A; padding: 60px 24px; text-align: center;
}
.okt-cst-gate-inner { max-width: 560px; }
.okt-cst-gate-pill {
  display:inline-block; padding:6px 14px; border-radius:999px; font-size:12px; font-weight:700;
  background:rgba(91,114,255,.18); color:#8FA5FF; border:1px solid rgba(91,114,255,.35);
  text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px;
}
.okt-cst-gate-title { font-size:30px; font-weight:800; color:#fff; margin:0 0 14px; letter-spacing:-0.02em; }
.okt-cst-gate-sub { font-size:15px; color:#B7BECC; line-height:1.6; margin:0 0 26px; }
.okt-cst-gate-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.okt-cst-gate-note { margin-top:18px; font-size:12.5px; color:#6B7488; }

.okt-cst-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5,7,14,.72); backdrop-filter: blur(6px);
  padding: 24px; animation: okt-cst-fade-in-up 220ms var(--ease-out);
}
.okt-cst-modal[hidden] { display:none; }
.okt-cst-modal-card {
  width: 100%; max-width: 420px; background:#0F121E;
  border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:24px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.6); color:#fff;
}
.okt-cst-modal-card--center { text-align:center; max-width:380px; }
.okt-cst-modal-eyebrow { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#8FA5FF; margin-bottom:6px; }
.okt-cst-modal-eyebrow--amber { color:#E59A1F; }
.okt-cst-modal-title { font-size:19px; font-weight:700; color:#fff; margin:0 0 8px; }
.okt-cst-modal-sub { font-size:13.5px; color:#B7BECC; line-height:1.55; margin:0 0 16px; }
.okt-cst-modal-input {
  width:100%; height:48px; padding:0 14px; font-size:18px; font-weight:700; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:10px;
  font-family:var(--font-mono); margin-bottom:12px;
}
.okt-cst-modal-input:focus { outline:none; border-color:#5A72FF; }
.okt-cst-modal-error { font-size:12.5px; color:#FF8A9B; margin:0 0 12px; }
.okt-cst-modal-actions { display:flex; gap:10px; }
.okt-cst-modal-actions .btn { flex:1 1 0; justify-content:center; }
.okt-cst-alive-icon { display:flex; justify-content:center; margin-bottom:10px; }

/* JS ile basılan kontrol butonları (start dışındakiler) */
.okt-cst-ctlbtn {
  height:52px; padding:0 22px; border-radius:12px; font-family:var(--font-sans);
  font-size:15px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.08); color:#fff;
  transition: background 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.okt-cst-ctlbtn:hover { transform:translateY(-1px); }
.okt-cst-ctlbtn--finish { background:rgba(212,58,79,.18); color:#FF8A9B; border-color:rgba(212,58,79,.30); }
.okt-cst-ctlbtn[hidden] { display:none; }

/* JS ile basılan oturum segment listesi */
.okt-cst-segments { margin-top:26px; }
.okt-cst-segments[hidden] { display:none; }
.okt-cst-segments-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.okt-cst-segments-title { font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#8FA5FF; }
.okt-cst-segments-note { font-size:11px; color:#6B7488; }
.okt-cst-seg {
  display:flex; align-items:center; gap:12px; padding:8px 12px; margin-bottom:6px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-left:3px solid #3B5BFF; border-radius:8px;
}
.okt-cst-seg-name { flex:1 1 0; font-size:13px; font-weight:700; color:#fff; }
.okt-cst-seg-time { font-size:13px; font-weight:700; color:#B7BECC; }
.okt-cst-seg-q { font-size:11px; color:#6B7488; }

.okt-cst-loading { font-size:13px; color:#6B7488; }

@media (prefers-reduced-motion: reduce) {
  .okt-cst *, .okt-cst *::before, .okt-cst *::after { animation-duration:1ms !important; transition-duration:1ms !important; }
}