/* ==========================================================================
   Trendyix — kimlik ekranları (giriş, kayıt, şifre sıfırlama)
   Renkler, yüzeyler ve hareket dili lansman sayfasıyla (onkayit/index.html)
   ve uygulamanın tasarım sistemiyle (seans-app.jsx C/FX) birebir aynı —
   kullanıcı ürünün içinde ve dışında aynı yerde olduğunu hissetsin.
   ========================================================================== */
:root{
  --ink:#06090F; --panel2:#0D131B; --panel:#121A24; --raised:#18222E;
  --line:#22303F; --lineSoft:#161F2A;
  --bone:#EEF1F5; --dim:#A9B7C6; --muted:#6E7D8F; --faint:#47566A;
  --up:#26D0A0; --down:#FF5C6C; --amber:#FFB020; --info:#5AB2F5; --violet:#7c5cff;
  --cyan:#00d4ff; --blue:#0a84ff;
  --grad:linear-gradient(135deg,var(--cyan) 0%,var(--blue) 48%,var(--violet) 100%);
  --sans:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --glass:linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,0) 42%);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px rgba(0,0,0,.55);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
h1{margin:0;font-weight:500;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* ---- zemin: lansman sayfasındaki aurora ---- */
.bg{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 12% -8%, rgba(10,132,255,.16) 0%, transparent 62%),
    radial-gradient(900px 560px at 92% 4%, rgba(124,92,255,.14) 0%, transparent 58%),
    radial-gradient(1000px 700px at 50% 108%, rgba(0,212,255,.08) 0%, transparent 60%);
}
.bg::after{content:"";position:absolute;inset:0;opacity:.032;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- yerleşim ---- */
.sayfa{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.kart{
  width:100%;max-width:420px;
  background:linear-gradient(180deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,0) 42%),var(--panel);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:34px 32px 30px;
}
.kart.genis{max-width:520px}

.marka{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:26px;
  font-size:19px;font-weight:500;letter-spacing:-.02em}
.marka svg{flex-shrink:0}

.baslik{font-size:22px;margin-bottom:6px;text-align:center}
.altbaslik{font-size:14px;color:var(--muted);text-align:center;margin-bottom:26px}

/* ---- alanlar ---- */
.alan{margin-bottom:16px}
.alan label{display:block;font-size:13px;color:var(--dim);margin-bottom:7px;font-weight:500}
.alan .ipucu{font-size:12px;color:var(--faint);margin-top:6px}
.ikili{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){ .ikili{grid-template-columns:1fr} }

input[type=text],input[type=email],input[type=tel],input[type=password]{
  width:100%;padding:12px 14px;border-radius:10px;
  background:var(--panel2);border:1px solid var(--line);color:var(--bone);
  font:15px/1.4 var(--sans);transition:border-color .2s,background .2s;
}
input::placeholder{color:var(--faint)}
input:focus{outline:none;border-color:var(--info);background:#0f1620}
input[aria-invalid="true"]{border-color:var(--down)}
.alan .hata{font-size:12px;color:var(--down);margin-top:6px;display:none}
.alan.bozuk .hata{display:block}

/* parola göster/gizle */
.parola-sar{position:relative}
.parola-sar input{padding-right:46px}
.goz{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  padding:8px;border-radius:8px;color:var(--muted);line-height:0}
.goz:hover{color:var(--bone);background:rgba(255,255,255,.05)}

/* onay kutusu */
.onay{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--dim);margin-bottom:18px}
.onay input{margin-top:3px;accent-color:var(--blue);width:16px;height:16px;flex-shrink:0}
.onay a{color:var(--info);text-decoration:underline;text-underline-offset:2px}

/* ---- düğmeler ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:13px 24px;border-radius:11px;font-size:15px;font-weight:500;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s,opacity .2s}
.btn-primary{background:var(--grad);color:#04121e;font-weight:600;
  box-shadow:0 8px 26px rgba(10,132,255,.36), 0 1px 0 rgba(255,255,255,.25) inset}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 38px rgba(10,132,255,.48), 0 1px 0 rgba(255,255,255,.3) inset}
.btn-ghost{border:1px solid var(--line);color:var(--dim);background:rgba(255,255,255,.02)}
.btn-ghost:hover{color:var(--bone);border-color:var(--muted);background:rgba(255,255,255,.05)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* yükleniyor halkası */
.halka{width:16px;height:16px;border:2px solid rgba(4,18,30,.3);border-top-color:#04121e;
  border-radius:50%;animation:don .7s linear infinite;display:none}
.btn.bekliyor .halka{display:block}
.btn.bekliyor .yazi{opacity:.75}
@keyframes don{to{transform:rotate(360deg)}}

/* ---- bildirim kutusu ---- */
.kutu{padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.55;margin-bottom:18px;display:none}
.kutu.gorunur{display:block}
.kutu.hata{background:rgba(255,92,108,.10);border:1px solid rgba(255,92,108,.30);color:#ffbac1}
.kutu.basari{background:rgba(38,208,160,.10);border:1px solid rgba(38,208,160,.30);color:#8ae9cd}
.kutu.bilgi{background:rgba(90,178,245,.10);border:1px solid rgba(90,178,245,.28);color:#aed8fb}
.kutu a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.kutu button{text-decoration:underline;text-underline-offset:2px;color:inherit;font-size:inherit}

/* ---- alt bağlantılar ---- */
.altlar{margin-top:20px;padding-top:18px;border-top:1px solid var(--lineSoft);
  font-size:13.5px;color:var(--muted);text-align:center}
.altlar a{color:var(--info)}
.altlar a:hover{text-decoration:underline;text-underline-offset:2px}
.altlar .ara{margin-top:9px}

.ayrac{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--faint);font-size:12px}
.ayrac::before,.ayrac::after{content:"";flex:1;height:1px;background:var(--lineSoft)}

/* ---- parola gücü ---- */
.guc{display:flex;gap:4px;margin-top:8px}
.guc i{flex:1;height:3px;border-radius:2px;background:var(--lineSoft);transition:background .25s}
.guc.s1 i:nth-child(1){background:var(--down)}
.guc.s2 i:nth-child(-n+2){background:var(--amber)}
.guc.s3 i:nth-child(-n+3){background:#9ad36a}
.guc.s4 i{background:var(--up)}
.guc-yazi{font-size:12px;color:var(--faint);margin-top:6px}

/* ---- sayfa altı ---- */
footer{padding:22px 20px;text-align:center;font-size:12px;color:var(--faint)}
footer a{color:var(--muted)}
footer a:hover{color:var(--dim)}

/* ==========================================================================
   TELEFON
   Kimlik ekranları çoğunlukla telefondan açılır: dokunma hedefleri büyük,
   girdi yazısı 16px (altında iOS sayfayı yakınlaştırır ve form zıplar).
   ========================================================================== */
@media (max-width:560px){
  .sayfa{padding:24px 14px;align-items:flex-start}
  .kart,.kart.genis{padding:26px 20px 22px;border-radius:16px;max-width:none}
  .marka{margin-bottom:22px;font-size:18px}
  .baslik{font-size:20px}
  .altbaslik{font-size:13.5px;margin-bottom:22px}

  /* 16px: iOS Safari daha küçük yazıda alana odaklanınca sayfayı büyütür */
  input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=url]{
    font-size:16px;padding:13px 14px;border-radius:11px}
  .alan label{font-size:13.5px}
  .btn{padding:15px 24px;font-size:15.5px;border-radius:12px}
  .goz{padding:10px}
  .onay{font-size:13.5px;gap:11px}
  /* Onay kutusu kayıt için ZORUNLU. Etiket tıklanabilir ama cümlenin çoğu
     bağlantı (koşullar/gizlilik), o yüzden güvenilir dokunma alanı kutunun
     kendisi. 19px parmakla zor; 22px kutu + çevresinde boşlukla isabet
     alanı ~34px'e çıkıyor. */
  .onay input{width:22px;height:22px;margin-top:1px;padding:6px}
  .altlar{font-size:14px}
  /* iki sütunlu ad/soyad telefonda alt alta */
  .ikili{grid-template-columns:1fr;gap:0}
  .kutu{font-size:13.5px;padding:13px 15px}
}
/* Çok dar ekranlar (ör. iPhone SE) */
@media (max-width:360px){
  .kart,.kart.genis{padding:22px 16px 20px}
  .baslik{font-size:18.5px}
}
/* Yatay tutulan telefonda kart ekrana sığsın */
@media (max-height:520px) and (orientation:landscape){
  .sayfa{align-items:flex-start;padding:18px 14px}
  .marka{margin-bottom:14px}
  .altbaslik{margin-bottom:16px}
}