/* Tahta ekranı simülasyonu. Kilit ekranı: ürünün tasarım prototipi (windows/agent/tasarim) ve tokens.json. */
@font-face{font-family:'TK Mono';font-style:normal;font-weight:200 700;font-display:swap;src:url(assets/cascadia-mono-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'TK Mono';font-style:normal;font-weight:200 700;font-display:swap;src:url(assets/cascadia-mono-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#f9f8f5;--surface:#fffffe;--raise:#f5f3ef;--fg:#1e170f;--muted:#5f5a54;--faint:#8a8580;--faint-metin:#7a7670;
  --border:#dcdbd6;--border-2:#cac7c2;--accent:#a74639;--accent-2:#973023;--accent-soft:rgb(167 70 57/.10);--accent-ring:rgb(167 70 57/.40);
  --on-accent:#fdfcf9;--warn:#a43f00;--warn-soft:rgb(218 114 13/.14);--ok:#137738;
  --font-display:'Segoe UI Variable Display','Segoe UI',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
  --font-text:'Segoe UI Variable Text','Segoe UI',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
  --font-mono:'TK Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --panel-w:clamp(430px,37vw,560px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font-text);background:#000;color:var(--fg);-webkit-font-smoothing:antialiased;overflow:hidden;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
:focus-visible{outline:2.5px solid var(--accent-ring);outline-offset:3px}
[hidden]{display:none!important}
.eyebrow{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.screen{position:fixed;inset:0;overflow:hidden}
.fade-in{animation:fade .35s ease both}
@keyframes fade{from{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.7);opacity:0}}

/* ---------- açılış ---------- */
.boot{background:#000;display:grid;place-items:center}
.win-dots{position:absolute;left:50%;top:72%;width:44px;height:44px;margin-left:-22px}
.win-dots i{position:absolute;inset:0;animation:orbit 4.2s cubic-bezier(.5,.15,.5,.85) infinite}
.win-dots i::before{content:'';position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#fff}
.win-dots i:nth-child(2){animation-delay:.14s}.win-dots i:nth-child(3){animation-delay:.28s}.win-dots i:nth-child(4){animation-delay:.42s}.win-dots i:nth-child(5){animation-delay:.56s}
@keyframes orbit{0%{transform:rotate(0);opacity:0}8%{opacity:1}70%{transform:rotate(720deg);opacity:1}80%,100%{transform:rotate(720deg);opacity:0}}
.welcome{background:radial-gradient(ellipse at 50% 40%,#0b4d86,#062a4d 70%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.avatar{width:170px;height:170px;border-radius:50%;background:rgb(255 255 255/.18);display:grid;place-items:center}
.avatar svg{width:92px;height:92px}
.welcome-name{font:300 38px var(--font-text)}
.welcome-line{display:flex;align-items:center;gap:14px;font:400 22px var(--font-text);opacity:.9}
.welcome-line .win-dots{position:relative;left:auto;top:auto;margin:0;width:26px;height:26px}
.welcome-line .win-dots i::before{width:3px;height:3px}
.shutdown{background:#0a5da8;color:#fff;display:flex;align-items:center;justify-content:center;gap:16px;font:400 24px var(--font-text)}
.shutdown .win-dots{position:relative;left:auto;top:auto;margin:0;width:30px;height:30px}

/* ---------- kilit ekranı ---------- */
.lockscreen{display:flex;background:var(--bg)}
.showcase{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:#101014;isolation:isolate}
.hero-photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:0;transition:opacity .45s ease}
.hero-photo.is-ready{opacity:1}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgb(4 1 0/.5) 0%,transparent 24%),linear-gradient(to top,rgb(4 1 0/.82) 0%,transparent 46%),linear-gradient(to right,rgb(4 1 0/.4) 0%,transparent 32%)}
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.showcase-top{position:absolute;z-index:2;top:40px;left:52px;right:52px;display:flex;align-items:center;justify-content:space-between;color:#f6f6f6}
.brand{display:flex;align-items:center;gap:13px}
.brand-mark{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgb(255 255 255/.16);border:1px solid rgb(255 255 255/.28);backdrop-filter:blur(6px)}
.brand-name{font-family:var(--font-display);font-size:19px;font-weight:500;line-height:1.1}
.brand-sub{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.72;margin-top:3px}
.showcase-top .eyebrow{color:rgb(246 246 246/.82)}
.showcase-bottom{position:absolute;z-index:2;left:52px;right:56px;bottom:44px;color:#f8f8f8}
.clock{font-family:var(--font-display);font-weight:500;font-variant-numeric:tabular-nums;font-size:clamp(64px,8.5vw,120px);line-height:.92;letter-spacing:-.01em;display:flex;align-items:baseline;gap:.06em}
.clock .colon{opacity:.55;animation:blink 2s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.datestr{margin-top:10px;font-size:16px;letter-spacing:.02em;opacity:.9}
.panel{flex:0 0 var(--panel-w);position:relative;z-index:3;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.panel-inner{flex:1;display:flex;flex-direction:column;padding:46px 46px 40px;overflow:hidden}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.status-chip{display:inline-flex;align-items:center;gap:9px;color:var(--muted)}
.beacon{position:relative;width:8px;height:8px}
.beacon i{position:absolute;inset:0;border-radius:50%;background:var(--faint)}
.beacon i.ping{animation:ping 1.9s ease-out infinite}
[data-tone="ok"] .beacon i{background:var(--ok)}
[data-tone="warn"] .beacon i{background:var(--warn)}
.safe{color:var(--faint-metin)}
.meta{margin-top:30px;min-height:20px}
.org{font-size:15px;color:var(--muted);letter-spacing:.01em}
.title{margin-top:16px;font-family:var(--font-display);font-weight:500;font-size:clamp(34px,3.4vw,44px);line-height:1.02;letter-spacing:-.01em}
.title .lock-i{display:inline-block;vertical-align:-4px;margin-right:12px;color:var(--accent)}
.reason,.notice{margin-top:14px;font-size:17px;color:var(--muted);line-height:1.45}
.rule{height:1px;background:var(--border);margin:30px 0}
.body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.live{display:inline-flex;align-items:center;gap:8px;color:var(--muted);margin-bottom:18px}
.live b{position:relative;width:7px;height:7px}
.live b i{position:absolute;inset:0;border-radius:50%;background:var(--ok)}
.live b i.ping{animation:ping 1.9s ease-out infinite}
.big-number{position:relative;isolation:isolate;font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:500;font-size:clamp(120px,15vw,168px);line-height:.86;letter-spacing:-.02em;color:var(--accent)}
.big-number::after{content:"";position:absolute;z-index:-1;inset:-12% -8% -12% -14%;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 70%);animation:breathe 3.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}
.big-number span{display:inline-block;animation:rise .55s cubic-bezier(.2,.8,.2,1) both}
.big-number span:nth-child(2){animation-delay:.07s}
@keyframes rise{from{transform:translateY(.16em);opacity:0}to{transform:none;opacity:1}}
.cue{margin-top:22px;font-size:18px;color:var(--muted);line-height:1.5;max-width:34ch}
.fallback{display:inline-flex;align-items:center;gap:13px;font-size:20px;color:var(--muted);line-height:1.45}
.fallback[data-tone="warn"]{color:var(--warn)}
.spin{flex:none;width:18px;height:18px;border-radius:50%;border:2.5px solid var(--border-2);border-top-color:var(--accent);animation:spin .9s linear infinite}
.approve .status-line{display:inline-flex;align-items:center;gap:10px;font-size:17px;color:var(--muted)}
.approve .spin{width:16px;height:16px;border-top-color:var(--warn)}
.board-code{margin:20px 0 14px;font-family:var(--font-mono);font-size:clamp(46px,6vw,60px);font-weight:600;letter-spacing:.01em;line-height:1}
.approve .note{font-size:17px;font-weight:500}
.approve .foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--border);font-size:15px;color:var(--muted)}
.entry{display:flex;flex-direction:column;gap:20px}
.code-field{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 2px}
.code-field .label{font-size:14px;color:var(--muted)}
.code-digits{margin-top:12px;display:flex;gap:18px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:42px;font-weight:500}
.code-digits span{width:32px;text-align:center;color:var(--fg)}
.code-digits span.empty{color:var(--faint-metin)}
.code-digits span.active{color:var(--accent)}
.entry-status{display:flex;align-items:center;gap:10px;min-height:22px;font-size:16px;font-weight:500;color:var(--warn)}
.entry-status[data-kind="neutral"]{color:var(--muted)}
.entry-status .spin{width:14px;height:14px;border-color:var(--warn-soft);border-top-color:var(--warn)}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.key{height:70px;border:1px solid var(--border);border-radius:8px;background:var(--surface);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:27px;font-weight:500;color:var(--fg);display:flex;align-items:center;justify-content:center;transition:transform .08s ease,background .14s ease,border-color .14s ease;-webkit-tap-highlight-color:transparent}
.key:hover{background:var(--raise);border-color:var(--border-2)}
.key.pressed{transform:translateY(2px);background:var(--accent-soft);border-color:var(--accent-ring)}
.key.util{color:var(--muted)}
.key.submit{background:var(--accent);color:var(--on-accent);border-color:transparent}
.key.submit:hover{background:var(--accent-2)}
.key svg{width:24px;height:24px}
.keypad[data-locked="true"]{opacity:.45;pointer-events:none}

/* ---------- Windows masaüstü (Tahta oturumu) ---------- */
.desktop{background:radial-gradient(ellipse at 72% 30%,#2f6fb5 0%,transparent 55%),radial-gradient(ellipse at 20% 90%,#0b2a52 0%,transparent 60%),linear-gradient(160deg,#0f3a6b,#06182f);font-family:var(--font-text)}
.icons{position:absolute;top:10px;left:6px;display:grid;grid-auto-flow:row;gap:6px}
.dicon{width:96px;padding:6px 4px 8px;border:1px solid transparent;border-radius:2px;display:flex;flex-direction:column;align-items:center;gap:6px;color:#fff;font-size:13px;line-height:1.25;text-align:center;text-shadow:0 1px 3px rgb(0 0 0/.75)}
.dicon:hover{background:rgb(255 255 255/.12);border-color:rgb(255 255 255/.18)}
.dicon:active,.dicon.is-selected{background:rgb(120 180 255/.28);border-color:rgb(160 205 255/.5)}
.dicon .glyph{width:48px;height:48px;display:grid;place-items:center;border-radius:10px;box-shadow:0 2px 6px rgb(0 0 0/.35)}
.dicon .glyph svg{width:30px;height:30px}
.taskbar{position:absolute;left:0;right:0;bottom:0;height:44px;background:rgb(16 16 18/.92);backdrop-filter:blur(8px);display:flex;align-items:center;color:#fff;font-size:12px}
.tb-start{width:48px;height:44px;display:grid;place-items:center}
.tb-start:hover,.tb-app:hover{background:rgb(255 255 255/.1)}
.tb-search{height:36px;width:300px;margin-left:2px;background:#f3f3f3;color:#555;display:flex;align-items:center;gap:10px;padding:0 12px;font-size:13px}
.tb-app{width:48px;height:44px;display:grid;place-items:center;position:relative}
.tb-app.is-open::after{content:'';position:absolute;left:10px;right:10px;bottom:0;height:2px;background:#76b9ed}
.tb-tray{margin-left:auto;display:flex;align-items:center;height:100%}
.tb-tray>span{height:100%;display:flex;align-items:center;padding:0 8px}
.tb-clock{flex-direction:column;justify-content:center;text-align:center;line-height:1.3;padding:0 12px!important}
.tray-kcs{width:14px;height:14px;border-radius:50%;background:#c62b2b;box-shadow:0 0 0 1.5px #fff}
.tray-tip{position:absolute;right:120px;bottom:52px;background:#2b2b2b;color:#fff;border:1px solid #555;padding:5px 9px;font-size:12px;white-space:nowrap}
.appwin{position:absolute;left:300px;top:90px;width:760px;height:470px;background:#fff;box-shadow:0 18px 50px rgb(0 0 0/.45);border:1px solid #6d8fb5;display:flex;flex-direction:column;animation:fade .2s ease}
.appwin-bar{height:34px;display:flex;align-items:center;justify-content:space-between;padding-left:12px;font-size:13px;color:#222;background:#f2f2f2}
.appwin-bar button{width:46px;height:34px;font-size:16px}
.appwin-bar button:hover{background:#e81123;color:#fff}
.appwin-body{flex:1;display:grid;place-items:center;text-align:center;padding:40px;color:#333;font-size:17px;line-height:1.5}
.appwin-body strong{display:block;font-size:24px;font-weight:600;margin-bottom:8px}
.msgbox{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:430px;background:#fff;border:1px solid #888;box-shadow:0 18px 50px rgb(0 0 0/.45);font-size:14px;color:#111}
.msgbox-bar{height:32px;display:flex;align-items:center;padding:0 12px;font-size:13px}
.msgbox-body{display:flex;gap:16px;padding:18px 22px 22px;align-items:flex-start}
.msgbox-body svg{flex:none;width:34px;height:34px;color:#e8a200}
.msgbox-foot{background:#f0f0f0;padding:12px;display:flex;justify-content:flex-end}
.msgbox-foot button{min-width:84px;height:26px;border:1px solid #0078d7;background:#e1e1e1;font-size:13px}

/* ---------- kilitlenme uyarısı (masaüstünde, odak almaz) ---------- */
.pre-lock{position:absolute;top:32px;left:calc((100% - var(--panel-w))/2);transform:translateX(-50%);z-index:20;width:408px;background:var(--surface);border:1px solid var(--border-2);border-radius:4px;box-shadow:0 24px 60px rgb(0 0 0/.28);padding:20px 22px;animation:pl-in .28s ease both;color:var(--fg)}
@keyframes pl-in{from{opacity:0;transform:translate(-50%,-14px)}}
.pl-top{display:flex;gap:13px}
.pl-icon{flex:none;width:34px;height:34px;border-radius:8px;background:var(--warn-soft);color:var(--warn);display:grid;place-items:center}
.pl-title{font-family:var(--font-display);font-size:19px;font-weight:500;color:var(--warn);line-height:1.2}
.pl-reason{margin-top:4px;font-size:14px;color:var(--muted)}
.pl-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}
.btn-extend{height:44px;padding:0 20px;border-radius:6px;background:var(--accent);color:var(--on-accent);font-size:15px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.btn-extend:hover{background:var(--accent-2)}
.pl-remaining{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.pl-remaining .spin{width:12px;height:12px;border-width:2px}

/* ---------- ilk kurulum kartı (setup_window.cpp) ---------- */
.setup-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);width:920px;background:#fff;border-radius:20px;padding:32px 36px 26px;box-shadow:0 30px 80px rgb(0 0 0/.45);color:#000;font-family:var(--font-text)}
.setup-id{position:absolute;right:36px;top:30px;font-size:17px;font-weight:600;color:#6d6d72}
.setup-head{font-size:30px;font-weight:600;line-height:1.2;padding-right:260px}
.setup-sub{margin-top:6px;font-size:17px;color:#6d6d72}
.setup-sep{height:1px;background:#c6c6c8;margin:18px 0 12px}
.setup-steps{display:grid;grid-template-columns:1fr 1fr;gap:9px 28px}
.setup-step{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;min-height:28px}
.setup-step small{display:block;font-weight:400;font-size:13px;color:#6d6d72}
.badge{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff}
.badge svg{width:15px;height:15px}
.badge[data-s="ok"]{background:#249c41}
.badge[data-s="run"]{background:#9c4600}
.badge[data-s="run"]::before{content:'';width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}
.badge[data-s="queue"]{border:2px solid #c6c6c8}
.setup-todo{margin-top:16px;border-radius:12px;border:1px solid rgb(156 70 0/.45);background:rgb(156 70 0/.10);border-left:5px solid #9c4600;padding:12px 16px}
.setup-todo b{display:block;font-size:13px;letter-spacing:.06em;color:#9c4600}
.setup-todo p{margin-top:4px;font-size:17px;font-weight:600}
.setup-foot{margin-top:16px;text-align:center;font-size:15px;color:#6d6d72}

/* ---------- Windows giriş ekranı (yönetici modu) ---------- */
.signin{background:#0d2140;color:#fff;font-family:var(--font-text)}
.signin-bg{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(28px) brightness(.55);transform:scale(1.1)}
.signin-center{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:18px}
.signin-name{font-size:36px;font-weight:300}
.signin-pass{display:flex;height:36px;width:300px;border:2px solid rgb(255 255 255/.6);background:rgb(255 255 255/.9)}
.signin-pass input{flex:1;border:0;padding:0 10px;font:15px var(--font-text);color:#000;background:transparent;outline:none;user-select:text}
.signin-pass button{width:36px;background:rgb(0 0 0/.25);color:#fff;font-size:18px}
.signin-hint{font-size:14px;opacity:.8}
.signin-users{position:absolute;left:24px;bottom:28px;display:flex;flex-direction:column;gap:4px;font-size:15px}
.signin-users span{display:flex;align-items:center;gap:12px;padding:6px 10px}
.signin-users span.is-on{background:rgb(255 255 255/.18)}
.signin-users i{width:34px;height:34px;border-radius:50%;background:rgb(255 255 255/.25);display:block}
.signin-tools{position:absolute;right:28px;bottom:30px;display:flex;gap:22px;opacity:.9}
.signin-tools svg{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Kısa ekran: ürün önce dikey boşlukları, sonra yazı ve tuşları küçültür (lock_layout sığdırma kuralı). */
@media (max-height:640px){
  .panel-inner{padding:26px 28px 22px}
  .meta{margin-top:14px}
  .title{margin-top:8px;font-size:30px}
  .reason,.notice{margin-top:6px;font-size:15px}
  .rule{margin:14px 0}
  .live{margin-bottom:10px}
  .big-number{font-size:118px}
  .cue{margin-top:12px;font-size:16px}
  .entry{gap:10px}
  .code-field{padding:8px 2px}
  .code-digits{margin-top:4px;font-size:30px;gap:12px}
  .code-digits span{width:24px}
  .keypad{gap:8px}
  .key{height:48px;font-size:22px}
  .showcase-top{top:24px;left:30px;right:30px}
  .showcase-bottom{left:30px;right:30px;bottom:26px}
  .clock{font-size:84px}
  .dicon{width:88px;font-size:12.5px}
  .setup-card{width:780px;padding:20px 26px 16px}
  .setup-id{top:20px;right:26px;font-size:14px}
  .setup-head{font-size:24px}
  .setup-sub{font-size:15px}
  .setup-sep{margin:10px 0 8px}
  .setup-steps{gap:4px 22px}
  .setup-step{font-size:14px;min-height:22px}
  .badge{width:20px;height:20px}
  .setup-todo{margin-top:10px;padding:8px 12px}
  .setup-todo p{font-size:15px}
  .setup-foot{margin-top:8px;font-size:13px}
}

@media (max-height:640px){ .key{height:52px} }