/* Giriş ve kayıt sayfalarının ortak görünümü (giris.html, kayit.html) */
:root{
  --primary:#FFC83D; --secondary:#FFD463; --orange-deep:#D68A00; --on-primary:#1A1305;
  --white:#FFFFFF; --ink:#111722; --ink-deep:#070A0F; --ink-14:#090D14; --ink-2:#232B3A; --ink-3:#566074;
  --cream:#FFF7E6; --cream-2:#FFF4DE; --sand:#AEB6C5;
  --purple-glow:rgba(116,74,214,.22);
  --font:"Inter Tight", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* form/.or/.oauth display kuralları hidden özniteliğini ezmesin (kod formu ve Apple düğmesi baştan görünüyordu) */
[hidden]{display:none!important}
body{background:linear-gradient(180deg,#05070b 0%,#090d14 100%) fixed;color:var(--white);font-family:var(--font);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
button,input{font:inherit}

.auth{min-height:100vh;padding:12px;display:grid;grid-template-columns:.94fr 1.06fr;gap:12px}

/* ---------- sol: form ---------- */
.form-side{border-radius:40px;background:var(--cream);color:var(--ink);display:flex;flex-direction:column;padding:32px clamp(24px,5vw,80px)}
.form-top{display:flex;justify-content:space-between;align-items:center}
.brand img{display:block;width:150px;height:auto;background:var(--ink);border-radius:200px;padding:10px 16px;box-sizing:content-box}
.back{font-size:14px;font-weight:500;color:var(--ink-3);text-decoration:none;display:flex;align-items:center;gap:6px}
.back:hover{color:var(--ink)}
.form-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 0}
.form-in{width:100%;max-width:440px}
.tabs{display:inline-flex;background:rgba(17,23,34,.07);border-radius:200px;padding:4px;margin-bottom:28px}
.tabs button{border:0;background:none;padding:8px 18px;border-radius:200px;font-size:14px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:background .2s,color .2s}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--white)}
.form-in h1{font-size:clamp(30px,3.2vw,40px);line-height:1.1;font-weight:400;letter-spacing:-.02em}
.form-in .sub{margin-top:8px;color:var(--ink-3);font-size:15px}
.oauth{margin-top:28px;width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:200px;border:1px solid rgba(17,23,34,.15);background:var(--white);font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;transition:background .2s,border-color .2s}
.oauth:hover{border-color:rgba(17,23,34,.3);background:#fbfcfe}
.or{margin:22px 0;display:flex;align-items:center;gap:14px;font-size:12px;font-weight:500;color:rgba(17,23,34,.4)}
.or::before,.or::after{content:"";height:1px;flex:1;background:rgba(17,23,34,.1)}
form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;font-weight:600;color:rgba(17,23,34,.6)}
.field label .req{color:var(--orange-deep)}
.inp{position:relative;display:flex;align-items:center;height:46px;border-radius:14px;border:1px solid rgba(17,23,34,.15);background:var(--white);padding:0 14px;transition:border-color .2s,box-shadow .2s}
.inp:focus-within{border-color:var(--orange-deep);box-shadow:0 0 0 4px rgba(255,200,61,.25)}
.inp input{width:100%;border:0;outline:0;background:transparent;font-size:15px;color:var(--ink)}
.inp input::placeholder{color:rgba(17,23,34,.3)}
.eye{position:absolute;right:12px;border:0;background:none;color:rgba(17,23,34,.4);cursor:pointer;display:grid;place-items:center;padding:4px}
.eye:hover{color:var(--ink)}
.eye svg{width:18px;height:18px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:rgba(17,23,34,.55)}
.row a{font-weight:600;color:var(--ink);text-underline-offset:3px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:19px;color:rgba(17,23,34,.5);cursor:pointer}
.check input{appearance:none;width:16px;height:16px;flex:none;margin-top:2px;border-radius:4px;border:1px solid rgba(17,23,34,.3);background:var(--white);cursor:pointer;display:grid;place-items:center}
.check input:checked{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8.1 9 3.9' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;border-color:var(--ink)}
.check a{font-weight:600;color:rgba(17,23,34,.7);text-underline-offset:2px}
.submit{margin-top:10px;height:48px;border:0;border-radius:200px;background:var(--primary);color:var(--on-primary);font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,transform .2s}
.submit:hover{background:var(--secondary);transform:translateY(-1px)}
.switch{margin-top:20px;text-align:center;font-size:14px;color:rgba(17,23,34,.55)}
.switch button{border:0;background:none;font-weight:600;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.link{border:0;background:none;padding:0;font-weight:600;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.msg{display:none;margin-bottom:18px;padding:12px 14px;border-radius:14px;font-size:14px;line-height:20px}
.msg.err{display:block;background:#fdecec;color:#9b1c1c;border:1px solid #f5c2c2}
.msg.ok{display:block;background:#ecfdf3;color:#05603a;border:1px solid #abefc6}
.msg a{font-weight:600}
.submit:disabled{opacity:.6;cursor:wait;transform:none}
.code{letter-spacing:.3em;font-size:20px!important;text-align:center}
.pane{display:none}
.pane.on{display:block;animation:paneIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes paneIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.form-foot{font-size:12px;color:rgba(17,23,34,.4);text-align:center}

/* ---------- sağ: marka paneli ---------- */
.brand-side{position:relative;overflow:hidden;border-radius:40px;background:radial-gradient(circle at 68% 20%,var(--purple-glow),transparent 30%),radial-gradient(circle at 84% 38%,rgba(255,200,61,.10),transparent 28%),linear-gradient(180deg,#05070b 0%,#090d14 100%);padding:clamp(32px,5vw,64px);display:flex;flex-direction:column;isolation:isolate}
/* mor ışıma: repertuvar.app hero'sundaki katmanlar */
.brand-side::before{content:"";position:absolute;inset:-10%;z-index:-2;pointer-events:none;opacity:.9;
  background:
    linear-gradient(106deg,transparent 0 48%,rgba(137,83,230,.13) 53%,transparent 58%),
    radial-gradient(ellipse at 62% 82%,rgba(112,58,175,.30),transparent 38%),
    radial-gradient(ellipse at 88% 75%,rgba(62,34,112,.22),transparent 28%),
    radial-gradient(ellipse at 18% 92%,rgba(116,74,214,.20),transparent 40%);
  animation:glow 22s ease-in-out infinite alternate}
@keyframes glow{50%{transform:translate(3%,-2%) scale(1.05)}100%{transform:translate(-2%,2%)}}
/* oluklu cam: dikey şeritler */
.brand-side::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(255,255,255,0) 1px 22px,rgba(0,0,0,.18) 22px 23px,rgba(0,0,0,0) 23px 44px),
    linear-gradient(180deg,rgba(7,10,15,.55),rgba(7,10,15,.1) 60%,rgba(7,10,15,.35));
  backdrop-filter:blur(2px)}
.b-top{max-width:480px}
.b-top .who{display:flex;align-items:center;gap:14px}
.b-top .mark{width:44px;height:44px;border-radius:50%;background:var(--ink-deep);border:1px solid rgba(255,255,255,.15);display:grid;place-items:center}
.b-top .mark svg{width:22px;height:22px}
.b-top .who b{display:block;font-weight:600}
.b-top .who span{font-size:12px;color:rgba(255,255,255,.6)}
.b-top h2{margin-top:28px;font-size:clamp(28px,2.6vw,38px);line-height:1.12;font-weight:300;letter-spacing:-.035em;color:rgba(255,255,255,.92)}
.b-top h2 em{font-style:normal;color:var(--primary);font-weight:400}
.b-list{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.b-list span{padding:7px 12px;border-radius:200px;font-size:13px;background:rgba(7,10,15,.45);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
/* eğik uygulama penceresi */
.win{position:absolute;left:14%;bottom:-120px;width:108%;border-radius:22px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.7);padding:8px;box-shadow:0 30px 90px rgba(0,0,0,.5);backdrop-filter:blur(20px);transform:rotate(-3deg);transform-origin:bottom left}
.win-in{border-radius:16px;border:1px solid rgba(255,255,255,.1);background:#0d1119;overflow:hidden}
.win-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.1)}
.win-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3)}
.win-bar i:nth-child(2){opacity:.7}.win-bar i:nth-child(3){opacity:.45}
.win-bar span{margin-left:14px;font:10px ui-monospace,monospace;letter-spacing:.08em;color:rgba(255,255,255,.4)}
.app{display:grid;grid-template-columns:200px 1fr;min-height:360px}
.app-nav{border-right:1px solid rgba(255,255,255,.08);padding:16px 12px;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--sand)}
.app-nav img{width:110px;height:auto;margin:0 0 14px 6px}
.app-nav a{padding:8px 10px;border-radius:10px;text-decoration:none}
.app-nav a.on{background:rgba(255,200,61,.12);color:var(--primary)}
.app-main{padding:16px 20px}
.app-main .h{display:flex;justify-content:space-between;font-weight:600;font-size:15px}
.app-main .s{font-size:11px;color:var(--sand);margin:3px 0 12px}
.tr{display:grid;grid-template-columns:20px 1fr 70px 28px;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;font-size:13px;border:1px solid transparent}
.tr span:first-child{color:var(--sand)}
.tr .m{color:var(--sand);font-size:12px;text-align:right}
.tr .k{justify-self:end;background:rgba(255,200,61,.14);color:var(--primary);border-radius:5px;padding:1px 6px;font-size:11px}
.tr.on{background:rgba(255,200,61,.12);border-color:rgba(255,200,61,.5)}
/* (2026-10-05) tablet listesi dile göre (giris.html): TR makam + karar, EN tempo + ton */
html[lang="en"] .liste-tr,html:not([lang="en"]) .liste-en{display:none}
.liste-en .tr{grid-template-columns:20px 1fr 64px 34px}

/* görünüme girince bulanıktan netleşme */
.rv{opacity:0;transform:translateY(14px);filter:blur(7px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1),filter .8s ease}
.rv.in{opacity:1;transform:none;filter:none}
.win.rv{transform:rotate(-3deg) translateY(72px);filter:blur(10px);transition-duration:1s}
.win.rv.in{transform:rotate(-3deg);filter:none}
@media (prefers-reduced-motion:reduce){.rv,.win.rv{transition:none;opacity:1;filter:none}.win.rv{transform:rotate(-3deg)}.brand-side::before{animation:none}.pane.on{animation:none}}

@media (max-width:1024px){
  .auth{grid-template-columns:1fr}
  .brand-side{min-height:640px}
  .win{left:6%;width:120%;bottom:-100px}
}
@media (max-width:600px){
  .auth{padding:8px;gap:8px}
  .form-side,.brand-side{border-radius:28px}
  .form-side{padding:24px 20px}
  .brand img{width:120px}
  .app{grid-template-columns:1fr}.app-nav{display:none}
  .brand-side{min-height:560px}
  .win{left:4%;width:130%;bottom:-80px}
}

/* ---------- ortak: dil düğmesi, sekme bağlantıları, Google/Apple ---------- */
.top-r{display:flex;align-items:center;gap:16px}
.lang-s{display:inline-flex;background:rgba(17,23,34,.07);border-radius:200px;padding:3px}
.lang-s button{border:0;background:none;padding:5px 10px;border-radius:200px;font-size:12px;font-weight:600;letter-spacing:.8px;color:var(--ink-3);cursor:pointer}
.lang-s button.on{background:var(--ink);color:var(--white)}
.tabs a{padding:8px 18px;border-radius:200px;font-size:14px;font-weight:600;color:var(--ink-3);text-decoration:none;transition:background .2s,color .2s}
.tabs a[aria-current]{background:var(--ink);color:var(--white)}
.tabs a:not([aria-current]):hover{color:var(--ink)}
.sso{margin-top:28px;display:flex;flex-direction:column;gap:10px;align-items:stretch}
.sso[hidden],.or[hidden]{display:none}
.gsi{min-height:44px;display:flex;justify-content:center;font-size:13px;color:var(--ink-3)}
.oauth.apple{margin-top:0;background:#000;color:#fff;border-color:#000}
.oauth.apple:hover{background:#1a1a1a}
.oauth.apple[hidden]{display:none}
.back-link{align-self:center;margin-top:4px}
.switch a{font-weight:600;color:var(--ink);text-underline-offset:3px}
.form-in .sso+.or{margin-top:22px}
:focus-visible{outline:2px solid var(--orange-deep);outline-offset:2px}
@media (max-width:600px){.top-r{gap:10px}.back{font-size:13px}}
@media (max-width:380px){
  .form-side{padding:20px 16px}
  .back{font-size:0;gap:0}.back svg{width:20px;height:20px}   /* yalnızca ok: dar ekranda sığsın */
  .steps li{font-size:11px}
  .tabs a{padding:8px 14px}
}