*{box-sizing:border-box}
:root{
  --bg:#f4f8fc;
  --surface:rgba(255,255,255,.84);
  --surface-soft:rgba(255,255,255,.74);
  --panel:#fbfdff;
  --text:#14263c;
  --muted:#6e8195;
  --line:#d9e4ef;
  --aes:#0b5ea8;
  --aes-2:#1678c8;
  --orange:#f4a72d;
  --success:#26a26d;
  --danger:#d64e4e;
  --shadow:0 28px 72px rgba(17,52,86,.13);
  --grid:rgba(11,94,168,.055);
}
html[data-theme="dark"]{
  --bg:#0f1a27;
  --surface:rgba(20,34,51,.84);
  --surface-soft:rgba(18,30,45,.78);
  --panel:#122131;
  --text:#eef5fb;
  --muted:#93a8bb;
  --line:#2a4158;
  --aes:#68b5ff;
  --aes-2:#3d9cf2;
  --orange:#ffbf57;
  --success:#4cc986;
  --danger:#ff7b7b;
  --shadow:0 28px 72px rgba(2,8,16,.40);
  --grid:rgba(104,181,255,.08);
}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
body{overflow-x:hidden}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
.background-scene{
  position:fixed; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 16% 15%, color-mix(in srgb, var(--aes) 13%, transparent), transparent 24%),
    radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--aes) 10%, transparent), transparent 24%),
    linear-gradient(135deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,#fff 12%) 52%,var(--bg) 100%);
}
.cad-grid{
  position:absolute; inset:0;
  background:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(circle at 38% 45%,#000 20%,rgba(0,0,0,.45) 58%,transparent 90%);
}
.cad-axis{position:absolute;background:color-mix(in srgb,var(--aes) 10%,transparent)}
.axis-x{left:7%;right:42%;top:52%;height:1px}
.axis-y{top:15%;bottom:12%;left:28%;width:1px}
.halo{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--aes) 10%,transparent)}
.halo-1{width:420px;height:420px;left:5%;top:22%}
.halo-2{width:600px;height:600px;left:-5%;top:12%}
.login-page{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(560px,1.08fr) minmax(430px,.92fr)}
.visual-pane{padding:28px 40px 24px 48px;border-right:1px solid color-mix(in srgb,var(--aes) 16%,transparent);overflow:hidden}
.brand-bar{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;position:relative;z-index:4}
.brand-lockup{display:flex;align-items:center;gap:16px}
.brand-logo{width:98px;height:auto}
.brand-copy strong{display:block;font-size:29px;font-weight:850;letter-spacing:-.04em}
.brand-copy span{display:block;margin-top:4px;color:var(--muted);font-size:11px;letter-spacing:.16em;font-weight:800}
.brand-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.file-badges{display:flex;gap:8px;flex-wrap:wrap}
.file-badges span,.theme-toggle{
  border:1px solid color-mix(in srgb,var(--aes) 16%,transparent);background:var(--surface-soft);color:var(--aes);
  backdrop-filter:blur(14px);border-radius:999px;padding:8px 11px;font-size:10px;font-weight:900;letter-spacing:.13em;
  box-shadow:0 12px 24px rgba(18,52,84,.07);
}
.theme-toggle{display:flex;align-items:center;gap:7px;cursor:pointer}
.theme-label{font-size:10px}
.assistant-panel{min-height:calc(100vh - 100px);display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;z-index:2}
.mascot-stage{width:100%;min-height:620px;display:flex;justify-content:center;align-items:center}
.mascot-wrap{position:relative;width:min(515px,90%);display:flex;justify-content:center;align-items:flex-end}
.mascot-aura{
  position:absolute;inset:10% 6% 5% 6%;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--aes) 12%,transparent),transparent 68%);
  filter:blur(12px);
}
.mascot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; filter:drop-shadow(0 28px 44px rgba(14,39,64,.14));
}
.mascot-wrap::before{content:"";display:block;padding-top:131%}
.mascot-wrap{perspective:1600px}
.mascot-base{transform-origin:56% 67%}

/* video-driven mascot: idle = original render; turn/write clips are H.264 with
   the alpha channel packed under the image, recombined on a WebGL canvas so
   transparency works identically on every browser (iOS Safari included).
   Every hand-off happens on an identical (or adjacent) frame on the SAME
   canvas — no cross-fades, so two poses can never blend into a ghost image. */
.mascot-rig{
  position:absolute; inset:0; z-index:1;
  animation:idleFloat 3.8s ease-in-out infinite;
}
.mascot-canvas{opacity:0; pointer-events:none}
.mascot-feed{
  position:absolute; width:2px; height:2px; opacity:0.01;
  pointer-events:none; left:0; top:0;
}
.mascot-rig.video-active .mascot-canvas{opacity:1}
.mascot-rig.video-active .mascot-base{opacity:0}

/* soft contact shadow that narrows as he pivots away */
.mascot-shadow{
  position:absolute; left:24%; right:24%; bottom:2.5%; height:4.5%;
  border-radius:50%; z-index:0;
  background:radial-gradient(ellipse at center, rgba(14,39,64,.22), transparent 70%);
  filter:blur(6px);
  transition:transform 1s cubic-bezier(.45,.02,.18,1), opacity 1s ease;
}
.assistant-panel.turned .mascot-shadow{transform:scaleX(.86);opacity:.85}

/* base states */
.assistant-panel.loading .mascot-rig{animation:loadingMotion .86s ease-in-out infinite}
.assistant-panel.success .mascot-rig{animation:successMotion .85s ease-in-out 2}

.form-pane{display:flex;align-items:center;justify-content:center;padding:42px}
.form-card{
  width:min(510px,100%);padding:40px;border-radius:26px;border:1px solid color-mix(in srgb,var(--aes) 15%,transparent);
  background:var(--surface);box-shadow:var(--shadow);backdrop-filter:blur(18px);
}
.eyebrow{display:block;color:var(--aes);font-size:11px;font-weight:900;letter-spacing:.18em;margin-bottom:10px}
.heading-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.heading-row h1{margin:0;font-size:clamp(31px,3vw,44px);line-height:1;letter-spacing:-.045em}
.secure-badge{
  padding:7px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--aes) 16%,transparent);
  background:color-mix(in srgb,var(--aes) 8%,transparent);color:var(--aes);font-size:10px;font-weight:900;letter-spacing:.14em;
}
.form-heading p{margin:14px 0 28px;color:var(--muted);font-size:14px;line-height:1.62}
.field-group+.field-group{margin-top:17px}
.field-group label{display:block;margin:0 0 8px;color:color-mix(in srgb,var(--text) 82%,transparent);font-size:12px;font-weight:800;letter-spacing:.03em}
.input-shell{
  min-height:56px;display:flex;align-items:center;gap:12px;padding:0 15px;border-radius:14px;border:1px solid var(--line);background:var(--panel);transition:.2s ease;
}
.input-shell:focus-within{
  border-color:color-mix(in srgb,var(--aes) 56%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--aes) 12%,transparent);
}
.input-shell.valid{border-color:color-mix(in srgb,var(--success) 42%,transparent)}
.input-shell.invalid{
  border-color:color-mix(in srgb,var(--danger) 56%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 10%,transparent);
}
.input-shell svg{width:20px;flex:0 0 20px;color:color-mix(in srgb,var(--muted) 82%,transparent)}
.input-shell input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:14px}
.input-shell input::placeholder{color:color-mix(in srgb,var(--muted) 78%,transparent)}
/* Otomatik doldurma: Chrome girdinin arkasina kendi acik rengini basiyor ve koyu
   temada icerideki kutu gibi gorunuyordu. Arka plan kabugun rengiyle ezilir;
   9999s'lik gecis, Chrome'un stili yeniden uygulamasini da etkisiz birakir. */
.input-shell input:-webkit-autofill,
.input-shell input:-webkit-autofill:hover,
.input-shell input:-webkit-autofill:focus,
.input-shell input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--panel) inset;
  box-shadow:0 0 0 1000px var(--panel) inset;
  transition:background-color 9999s ease-in-out 0s;
  font:inherit;
}
.input-shell input:autofill{
  color:var(--text);
  box-shadow:0 0 0 1000px var(--panel) inset;
}
.password-toggle{border:0;background:transparent;color:var(--aes);font-size:12px;font-weight:800;cursor:pointer;padding:8px 0 8px 8px}
.field-state{width:8px;height:8px;border-radius:50%;background:transparent}
.input-shell.valid .field-state{background:var(--success);box-shadow:0 0 0 4px color-mix(in srgb,var(--success) 12%,transparent)}
.input-hint{min-height:16px;margin-top:6px}
.caps-lock{font-size:12px;color:var(--orange)}
.hidden{display:none}
.form-options{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:16px 0 24px}
.remember{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;font-weight:650}
.remember input{accent-color:var(--aes)}
.forgot-link{color:var(--aes);font-size:13px;font-weight:750}
.forgot-link:hover{text-decoration:underline}
.login-button{
  width:100%;min-height:56px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--aes),var(--aes-2));color:#fff;
  display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:850;cursor:pointer;
  box-shadow:0 16px 34px color-mix(in srgb,var(--aes) 24%,transparent);transition:.18s ease;
}
.login-button:hover{transform:translateY(-1px)}
.login-button:disabled{opacity:.92;cursor:not-allowed}
.login-arrow{width:18px}
.spinner{
  display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .9s linear infinite;
}
.login-button.loading .spinner{display:inline-block}
.login-button.loading .login-arrow{display:none}
.feedback{min-height:22px;margin:14px 0 0;font-size:12px;color:var(--muted)}
.feedback.error{color:var(--danger)}
.feedback.success{color:var(--success)}
footer{
  margin-top:20px;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--aes) 10%,transparent);
  color:color-mix(in srgb,var(--muted) 92%,transparent);font-size:10.5px;line-height:1.64;
}
.alt-divider{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.alt-divider::before,.alt-divider::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--aes) 14%,transparent)}
.google-button{
  width:100%;min-height:52px;border-radius:15px;border:1px solid var(--line);background:var(--panel);color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;font-weight:800;cursor:pointer;transition:.18s ease;
}
.google-button:hover{border-color:color-mix(in srgb,var(--aes) 45%,transparent);transform:translateY(-1px)}
.google-button svg{flex:0 0 18px}
.shake{animation:shake .32s linear 1}
.workspace-transition{
  position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:linear-gradient(135deg,#0a4f8e,#0b5ea8 55%,#1a86da);color:#fff;
  opacity:0;visibility:hidden;transition:opacity .42s ease,visibility .42s ease;
}
.workspace-transition.active{opacity:1;visibility:visible}
.transition-content{width:min(920px,92vw);text-align:center}
.transition-logo{width:110px;filter:brightness(0) invert(1)}
.transition-kicker{display:block;margin-top:12px;font-size:11px;font-weight:900;letter-spacing:.2em;opacity:.78}
.transition-content h2{margin:10px 0 8px;font-size:clamp(30px,4vw,50px);letter-spacing:-.04em}
.transition-content p{margin:0 0 24px;opacity:.78}
.blueprint{width:100%;color:rgba(255,255,255,.82);filter:drop-shadow(0 20px 35px rgba(0,0,0,.12))}
.blueprint-lines *{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:1200;stroke-dashoffset:1200}
.workspace-transition.active .blueprint-lines *{animation:blueprintDraw 1.5s ease forwards}
.progress-track{width:min(560px,82%);height:5px;margin:16px auto 0;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.progress-bar{display:block;height:100%;width:0;background:#fff;border-radius:999px}
.workspace-transition.active .progress-bar{animation:progress 2s ease forwards}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes idleFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-5px) rotate(.35deg)}
}
@keyframes loadingMotion{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(3px) rotate(.7deg)}
}
@keyframes successMotion{
  0%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-6px) scale(1.01)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  40%{transform:translateX(5px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}
@keyframes blueprintDraw{to{stroke-dashoffset:0}}
@keyframes progress{0%{width:0}60%{width:74%}100%{width:100%}}

@media (max-width:1080px){
  .login-page{grid-template-columns:1fr}
  .visual-pane{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--aes) 16%,transparent);padding:24px 24px 16px}
  .assistant-panel{min-height:510px}
  .mascot-stage{min-height:470px}
  .mascot-wrap{width:min(390px,88%)}
  .form-pane{padding:30px 20px 44px}
}
@media (max-width:700px){
  .brand-bar{flex-direction:column;align-items:flex-start}
  .brand-actions{width:100%;justify-content:flex-start}
  .form-card{padding:28px 22px;border-radius:20px}
  .form-options{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}
}