/* ====================================================================
   giris-tasarim.css — giris penceresi "tam ekran" ailesi (2026-10-14), assets/js/giris-tasarim.js
   12 = sitedeki varsayilan; 21..25 lab cesitleri. Kapsam: .gr-perde[data-aile="tk"].
   Pencere USTE hizali (ortada degil): sekme degisince yukseklik degisir, kart yerinde kalir, ziplamaz.
   ==================================================================== */
.gr-perde[data-aile="tk"] { display:block; padding:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  background:var(--zemin, #EEF3FB); -webkit-backdrop-filter:none; backdrop-filter:none; }
html[data-tema="koyu"] .gr-perde[data-aile="tk"] { background:var(--zemin, #0A0A0A); }
.gr-perde[data-aile="tk"] .gr-pen { margin:clamp(28px, 11vh, 120px) auto 48px; max-width:410px; padding:4px 22px 0; border-radius:0;
  background:transparent; box-shadow:none; z-index:1; }
html[data-tema="koyu"] .gr-perde[data-aile="tk"] .gr-pen { background:transparent; box-shadow:none; }

/* kapat: sag ustte sabit */
.gr-perde[data-aile="tk"] .gr-x { position:fixed; top:16px; right:16px; z-index:3; width:40px; height:40px; border-radius:11px;
  background:var(--kd-yuzey, #fff); box-shadow:inset 0 0 0 1px var(--cizgi, rgba(15,42,86,.12)); }
html[data-tema="koyu"] .gr-perde[data-aile="tk"] .gr-x { background:#141414; box-shadow:inset 0 0 0 1px #222; }

/* ------------------------------------------------ filigran: saydam, yan yatik mm2.money */
.tk-filigran { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.tk-dondur { position:absolute; left:50%; top:50%; width:260vmax; transform:translate(-50%,-50%) rotate(-14deg); display:flex; flex-direction:column; gap:26px; }
.tk-satir { display:flex; width:max-content; white-space:nowrap; animation:tkKay 120s linear infinite; }
.tk-satir.ters { animation-direction:reverse; animation-duration:150s; margin-left:-180px; }
.tk-satir span { display:flex; }
.tk-filigran b { font-size:64px; line-height:1; font-weight:800; letter-spacing:-.05em; padding-right:56px; color:var(--ink, #0F172A); opacity:.045; }
.tk-filigran b i { font-style:normal; color:var(--mavi, #2563EB); opacity:.9; }
.tk-filigran.tk-buyuk .tk-dondur { gap:34px; }
.tk-filigran.tk-buyuk b { font-size:110px; padding-right:80px; }
/* koyu: filigran cok goz aliyordu (kullanici 2026-10-14) -> daha soluk, mavi vurgu yok */
html[data-tema="koyu"] .tk-filigran b { color:#fff; opacity:.018; }
html[data-tema="koyu"] .tk-filigran b i { color:inherit; opacity:1; }
html[data-tema="koyu"] .gr-perde[data-gt="25"] .tk-filigran b { opacity:.03; }
@keyframes tkKay { to { transform:translateX(-50%); } }
/* kenarlara dogru solar: ortadaki form temiz okunur */
.tk-filigran::after { content:""; position:absolute; inset:0;
  background:radial-gradient(60% 55% at 50% 45%, var(--zemin, #EEF3FB) 15%, transparent 75%); }
html[data-tema="koyu"] .tk-filigran::after { background:radial-gradient(60% 55% at 50% 45%, var(--zemin, #0A0A0A) 15%, transparent 75%); }

/* ------------------------------------------------ ust: logo + baslik */
.gr-perde[data-aile="tk"] .gr-ust { margin:0 0 20px; text-align:center; }
.gr-perde[data-aile="tk"] .gr-logo { font-size:26px; margin-bottom:16px; }
.gr-perde[data-aile="tk"] .gr-ust h2 { font-size:28px; letter-spacing:-.04em; }
.gr-perde[data-aile="tk"] .gr-not { margin:14px 0 0; text-align:left; }

/* sekme: sabit genislik, ortada */
.gr-perde[data-aile="tk"] .gr-sekme { margin-bottom:18px; background:var(--kd-yuzey, #fff); box-shadow:inset 0 0 0 1px var(--cizgi, rgba(15,42,86,.12)); }
.gr-perde[data-aile="tk"] .gr-sekme-iz { background:var(--buz, #EEF3FB); box-shadow:inset 0 1px 3px rgba(15,42,86,.16); }
html[data-tema="koyu"] .gr-perde[data-aile="tk"] .gr-sekme { background:#121212; box-shadow:inset 0 0 0 1px #1F1F1F; }
html[data-tema="koyu"] .gr-perde[data-aile="tk"] .gr-sekme-iz { background:#1C1C1C; box-shadow:inset 0 1px 3px rgba(0,0,0,.6); }

/* ------------------------------------------------ alanlar: ikon + yazi icerde, belirgin kenar */
.gr-perde[data-aile="tk"] .gr-form { gap:12px; }
.gr-perde[data-aile="tk"] .gr-alan > span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.gr-perde[data-aile="tk"] .gr-alan input { height:52px; padding:0 16px 0 46px; border-radius:12px; font-size:15px; font-weight:500;
  color:var(--ink); background:var(--kd-yuzey, #fff); box-shadow:inset 0 0 0 1.5px var(--cizgi-2, rgba(15,42,86,.16)); transition:box-shadow .18s ease; }
.gr-perde[data-aile="tk"] .gr-alan input::placeholder { color:var(--ink-3, #64748B); opacity:1; font-weight:500; }
.gr-perde[data-aile="tk"] .gr-alan input:focus { box-shadow:inset 0 0 0 2px var(--mavi, #2563EB), 0 0 0 4px var(--mavi-sis, rgba(37,99,235,.12)); }
html[data-tema="koyu"] .gr-perde[data-aile="tk"] .gr-alan input { background:#121212; box-shadow:inset 0 0 0 1.5px #262626; }
html[data-tema="koyu"] .gr-perde[data-aile="tk"] .gr-alan input:focus { box-shadow:inset 0 0 0 2px #3B82F6, 0 0 0 4px rgba(59,130,246,.16); }
/* tarayici otomatik doldurma sarisi/mavisi yerine kendi rengimiz */
.gr-perde[data-aile="tk"] .gr-alan input:-webkit-autofill { -webkit-text-fill-color:var(--ink); -webkit-box-shadow:inset 0 0 0 1.5px var(--cizgi-2, rgba(15,42,86,.16)), inset 0 0 0 60px var(--kd-yuzey, #fff); caret-color:var(--ink); }
html[data-tema="koyu"] .gr-perde[data-aile="tk"] .gr-alan input:-webkit-autofill { -webkit-box-shadow:inset 0 0 0 1.5px #262626, inset 0 0 0 60px #121212; }
.tk-ik { position:absolute; left:15px; top:0; height:52px; display:flex; align-items:center; color:var(--ink-3, #64748B); pointer-events:none; transition:color .18s ease; }
.tk-ik svg { width:19px; height:19px; }
.gr-alan:focus-within .tk-ik { color:var(--mavi, #2563EB); }
.gr-perde[data-aile="tk"] .gr-goz { bottom:auto; top:8px; }
.gr-perde[data-aile="tk"] .gr-sifre input { padding-right:50px; }
.gr-perde[data-aile="tk"] .gr-kadi input { padding-right:100px; }
.gr-perde[data-aile="tk"] .gr-durum { bottom:auto; top:0; line-height:52px; }
.gr-perde[data-aile="tk"] .gr-sos { height:50px; }
.gr-perde[data-aile="tk"] .gr-ana { height:52px; }
.gr-perde[data-aile="tk"] .gr-govde { overflow:visible; }

/* ================================================= 21 · iki parca */
.gr-perde[data-gt="21"] .gr-pen { max-width:1020px; display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px, 6vw, 90px); align-items:start; padding:0 28px; }
.gr-perde[data-gt="21"] .tk-marka { padding-top:40px; }
.tk-kelime { display:block; font-size:clamp(46px, 6vw, 76px); line-height:1; font-weight:800; letter-spacing:-.055em; color:var(--ink); }
.tk-kelime i, .tk-dev i { font-style:normal; color:var(--mavi, #2563EB); }
.tk-marka p { margin:20px 0 26px; max-width:420px; font-size:17px; line-height:1.6; color:var(--ink-2); }
.tk-marka ul { margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.tk-marka li { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:650; color:var(--ink); }
.tk-marka li::before { content:""; width:10px; height:10px; border-radius:3px; background:var(--mavi, #2563EB); }
.gr-perde[data-gt="21"] .tk-kart { padding:26px 24px 22px; border-radius:20px; background:var(--kd-yuzey, #fff); box-shadow:0 30px 70px -30px rgba(15,42,86,.35), inset 0 0 0 1px var(--cizgi, rgba(15,42,86,.1)); }
html[data-tema="koyu"] .gr-perde[data-gt="21"] .tk-kart { background:#111; box-shadow:0 30px 70px -20px rgba(0,0,0,.8), inset 0 0 0 1px #1F1F1F; }
.gr-perde[data-gt="21"] .gr-ust { text-align:left; }
.gr-perde[data-gt="21"] .gr-logo { display:none; }
.gr-perde[data-gt="21"] .gr-ust h2 { font-size:24px; }

/* ================================================= 22 · buyuk */
.gr-perde[data-gt="22"] .gr-pen { max-width:520px; }
.gr-perde[data-gt="22"] .gr-logo { font-size:34px; }
.gr-perde[data-gt="22"] .gr-ust h2 { font-size:clamp(30px, 5vw, 40px); }
.gr-perde[data-gt="22"] .gr-sekme button, .gr-perde[data-gt="22"] .gr-sekme-iz { height:46px; }
.gr-perde[data-gt="22"] .gr-sekme button { font-size:15.5px; }
.gr-perde[data-gt="22"] .gr-alan input { height:60px; padding-left:52px; font-size:16.5px; border-radius:14px; }
.gr-perde[data-gt="22"] .tk-ik { height:60px; left:18px; }
.gr-perde[data-gt="22"] .tk-ik svg { width:21px; height:21px; }
.gr-perde[data-gt="22"] .gr-goz { top:12px; }
.gr-perde[data-gt="22"] .gr-durum { line-height:60px; }
.gr-perde[data-gt="22"] .gr-sos, .gr-perde[data-gt="22"] .gr-ana { height:58px; font-size:16px; border-radius:14px; }

/* ================================================= 23 · yatay: sosyal solda, e-posta sagda */
.gr-perde[data-gt="23"] .gr-pen { max-width:860px; }
.gr-perde[data-gt="23"] .gr-sekme { max-width:340px; margin-left:auto; margin-right:auto; }
.gr-perde[data-gt="23"] .gr-form[data-gr-form="login"], .gr-perde[data-gt="23"] .gr-form[data-gr-form="register"] {
  display:grid; grid-template-columns:1fr 1fr; column-gap:44px; row-gap:12px; grid-auto-flow:row dense; }
.gr-perde[data-gt="23"] .gr-form > * { grid-column:2; }
.gr-perde[data-gt="23"] .gr-form > .gr-sosyal { grid-column:1; grid-row:1 / span 8; align-self:start; padding-right:44px; margin-right:-44px; border-right:1px solid var(--cizgi, rgba(15,42,86,.12)); }
.gr-perde[data-gt="23"] .gr-form > .gr-ayrac { display:none; }
.gr-perde[data-gt="23"] .gr-sosyal::before { content:"Quick sign-in"; display:block; margin-bottom:4px; font-size:13px; font-weight:700; color:var(--ink-3); }
.gr-perde[data-gt="23"] .gr-form[data-gr-form="forgot"], .gr-perde[data-gt="23"] .gr-tamam { max-width:410px; margin:0 auto; }
html[data-tema="koyu"] .gr-perde[data-gt="23"] .gr-form > .gr-sosyal { border-right-color:#1F1F1F; }

/* ================================================= 24 · sola hizali, sagda dev marka */
.gr-perde[data-gt="24"] .gr-pen { margin-left:max(22px, 9vw); margin-right:auto; }
.gr-perde[data-gt="24"] .gr-ust { text-align:left; }
.gr-perde[data-gt="24"] .tk-filigran { opacity:.6; }
.tk-dev { position:fixed; right:-2vw; top:50%; z-index:0; transform-origin:center; translate:0 -50%; rotate:-90deg; pointer-events:none;
  font-size:clamp(90px, 15vw, 230px); line-height:1; font-weight:800; letter-spacing:-.06em; white-space:nowrap; color:var(--ink); opacity:.07; }
.tk-dev i { opacity:1; }
html[data-tema="koyu"] .tk-dev { color:#fff; opacity:.06; }

/* ================================================= 25 · buzlu cam kart */
.gr-perde[data-gt="25"] .tk-filigran::after { display:none; }
.gr-perde[data-gt="25"] .tk-filigran b { opacity:.08; }
.gr-perde[data-gt="25"] .gr-pen { max-width:440px; padding:28px 26px 24px; border-radius:22px;
  background:color-mix(in srgb, var(--kd-yuzey, #fff) 72%, transparent); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 30px 70px -30px rgba(15,42,86,.4), inset 0 0 0 1px rgba(255,255,255,.7); }
html[data-tema="koyu"] .gr-perde[data-gt="25"] .gr-pen { background:rgba(18,18,18,.72); box-shadow:0 30px 70px -20px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.06); }

/* ================================================= 26 · banner (sitede varsayilan) */
.gr-perde[data-gt="26"] .gr-pen { margin-left:max(22px, 9vw); margin-right:auto; }
.gr-perde[data-gt="26"] .gr-ust { text-align:left; margin-bottom:24px; }
.gr-perde[data-gt="26"] .gr-ust h2 { font-size:30px; }
.gr-perde[data-gt="26"] .tk-filigran::after { background:radial-gradient(42% 60% at 24% 45%, var(--zemin, #EEF3FB) 20%, transparent 78%); }
html[data-tema="koyu"] .gr-perde[data-gt="26"] .tk-filigran::after { background:radial-gradient(42% 60% at 24% 45%, var(--zemin, #0A0A0A) 20%, transparent 78%); }
/* banner: formun sagindan ekran kenarina; gorsel yoksa tamamen bos (cerceve de yok) */
.tk-banner { position:fixed; z-index:1; top:24px; bottom:24px; right:24px; left:calc(max(22px, 9vw) + 410px + 6vw); pointer-events:none; border-radius:22px; overflow:hidden; }
.tk-ban-sahne { position:absolute; inset:0; }
.tk-banner img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; }
.tk-banner img.on { opacity:1; }
/* kesik (saydam) gorsel: ARKA PLAN YOK (kullanici bilerek saydam yaptirdi) — sayfanin uzerinde suzulur, biraz kucuk */
.tk-banner.kes { background:none; box-shadow:none !important; overflow:visible; }
.tk-banner.kes .tk-ban-sahne { inset:8% 6% 22%; animation:tkSuz 6s ease-in-out infinite; }
.tk-banner.kes img { object-fit:contain; filter:drop-shadow(0 22px 26px rgba(15,42,86,.22)); }
html[data-tema="koyu"] .tk-banner.kes img { filter:drop-shadow(0 22px 28px rgba(0,0,0,.55)); }
@keyframes tkSuz { 50% { transform:translateY(-10px); } }
.tk-banner.kes .tk-ban-yazi { color:var(--ink); text-shadow:none; text-align:center; left:10%; right:10%; bottom:9%; }
.tk-banner.kes .tk-ban-yazi span { color:var(--ink-2); opacity:1; }
@media (prefers-reduced-motion: reduce) { .tk-banner.kes .tk-ban-sahne { animation:none; } }
/* sahne: alt kenara yazi icin koyu gecis */
.tk-banner.sahne::after { content:""; position:absolute; inset:auto 0 0; height:42%; background:linear-gradient(transparent, rgba(8,15,40,.78)); pointer-events:none; }
.tk-ban-yazi { position:absolute; z-index:1; left:30px; right:30px; bottom:26px; display:grid; gap:5px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.tk-ban-yazi b { font-size:clamp(20px, 2.1vw, 30px); font-weight:800; letter-spacing:-.035em; line-height:1.1; }
.tk-ban-yazi span { font-size:14px; font-weight:600; opacity:.86; }
.tk-banner.dolu { box-shadow:0 30px 70px -30px rgba(15,42,86,.45); }
html[data-tema="koyu"] .tk-banner.dolu { box-shadow:0 30px 70px -20px rgba(0,0,0,.85), inset 0 0 0 1px #1F1F1F; }
@media (min-width:901px) { .gr-perde[data-gt="26"] .gr-sekme { display:none; } }

/* ================================================= tablet */
@media (max-width:900px) {
  .gr-perde[data-gt="21"] .gr-pen { grid-template-columns:1fr; max-width:460px; gap:20px; padding:0 20px; }
  .gr-perde[data-gt="21"] .tk-marka { padding-top:0; text-align:center; }
  .gr-perde[data-gt="21"] .tk-marka p { margin:12px auto 0; font-size:15px; }
  .gr-perde[data-gt="21"] .tk-marka ul { display:none; }
  .tk-kelime { font-size:44px; }
  .gr-perde[data-gt="23"] .gr-pen { max-width:410px; }
  .gr-perde[data-gt="23"] .gr-form[data-gr-form="login"], .gr-perde[data-gt="23"] .gr-form[data-gr-form="register"] { display:flex; }
  .gr-perde[data-gt="23"] .gr-form > .gr-sosyal { padding:0; margin:0; border:0; align-self:stretch; }
  .gr-perde[data-gt="23"] .gr-sosyal::before { display:none; }
  .gr-perde[data-gt="23"] .gr-form > .gr-ayrac { display:flex; }
  .gr-perde[data-gt="24"] .gr-pen { margin-left:auto; }
  .gr-perde[data-gt="24"] .gr-ust { text-align:center; }
  .tk-dev { display:none; }
  .tk-banner { display:none; }
  .gr-perde[data-gt="26"] .gr-pen { margin-left:auto; }
  .gr-perde[data-gt="26"] .gr-ust { text-align:center; }
  .gr-perde[data-gt="26"] .tk-filigran::after { background:radial-gradient(60% 55% at 50% 45%, var(--zemin, #EEF3FB) 15%, transparent 75%); }
  html[data-tema="koyu"] .gr-perde[data-gt="26"] .tk-filigran::after { background:radial-gradient(60% 55% at 50% 45%, var(--zemin, #0A0A0A) 15%, transparent 75%); }
}
/* ================================================= telefon */
@media (max-width:560px) {
  .gr-perde[data-aile="tk"] { padding:0; }
  .gr-perde[data-aile="tk"] .gr-pen { margin:64px auto 32px; padding:0 18px max(8px, env(safe-area-inset-bottom)); }
  .gr-perde[data-aile="tk"] .gr-x { top:12px; right:12px; }
  .gr-perde[data-aile="tk"] .gr-logo { font-size:22px; margin-bottom:10px; }
  .gr-perde[data-aile="tk"] .gr-ust { margin-bottom:16px; }
  .gr-perde[data-aile="tk"] .gr-ust h2 { font-size:24px; }
  .gr-perde[data-gt="22"] .gr-ust h2, .gr-perde[data-gt="26"] .gr-ust h2 { font-size:26px; }
  .gr-perde[data-gt="22"] .gr-alan input { height:56px; }
  .gr-perde[data-gt="22"] .tk-ik { height:56px; }
  .gr-perde[data-gt="22"] .gr-durum { line-height:56px; }
  .gr-perde[data-gt="22"] .gr-goz { top:10px; }
  .gr-perde[data-gt="22"] .gr-sos, .gr-perde[data-gt="22"] .gr-ana { height:54px; }
  .gr-perde[data-gt="21"] .gr-pen { padding:0 14px; }
  .gr-perde[data-gt="21"] .tk-kart, .gr-perde[data-gt="25"] .gr-pen { padding:20px 16px 18px; border-radius:18px; }
  .gr-perde[data-gt="21"] .tk-marka p { display:none; }
  .tk-kelime { font-size:36px; }
  .gr-perde[data-gt="25"] .gr-pen { margin-left:12px; margin-right:12px; width:auto; }
  .tk-filigran b { font-size:46px; padding-right:40px; }
  .tk-filigran.tk-buyuk b { font-size:72px; }
  /* iOS: 16px alti alanlarda yakinlastirma yapar */
  .gr-perde[data-aile="tk"] .gr-alan input { font-size:16px; }
}
@media (max-height:640px) and (min-width:561px) { .gr-perde[data-aile="tk"] .gr-pen { margin-top:56px; } }
@media (prefers-reduced-motion: reduce) { .tk-satir { animation:none; } }