/* SAHNE · GÜVENLİ GİRİŞ (includes/scenes/secure-login.php) — modül sayfası kahraman sahnesi. Adımlar:
   s1 kullanıcı adı + şifre yazılır · s2 «Giriş yap» → «İki adımlı doğrulama» · s3 6 haneli kod + «Bu cihazı 30 gün hatırla» ·
   s4 «Doğrula» → «Bu hesap başka bir cihazda açık» · s5 «Diğer oturumu kapat ve devam et» basılır, sonra Ayarlar › Güvenlik
   günlüğü açılınca giriş zinciri (satırlar tamamlandıktan sonra ~1,7 s okunur kalır: data-times s5 = 3400) ·
   s6 eski cihaz (Chrome - Windows) bir sonraki işlemde «Bu oturum kapatıldı» uyarısıyla giriş ekranına düşer.
   Katmanlar (giriş · doğrulama · yönetim) aynı ızgara hücresinde üst üste durur, opacity + küçük kayma ile çapraz geçer;
   pencere yüksekliği adımlar boyunca sabit. */

.sec { container-type: inline-size; --sec-h: 448px; --sec-sw: .72s;
  --sec-spring: cubic-bezier(.34, 1.56, .64, 1); --sec-bg: #f7f8fa; --sec-ink: #18181b; --sec-mut: #6b6b75; }
.sec-win { position: relative; height: var(--sec-h); border-radius: 14px; }
.sec-stage { position: relative; display: grid; height: 100%; }
.sec-ly { grid-area: 1 / 1; position: relative; min-width: 0; min-height: 0; }
.sec-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sec-mono { font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; letter-spacing: -.01em; }
.sec-logo { flex: none; width: 32px; height: 32px; border-radius: 50%; }

/* ── imleç: .sec-hit tıklama noktasıdır; ok ucu tam orada, halka dalgası çevresinde ── */
.sec-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.sec-hit .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.sec-rip { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(29, 79, 134, .55); opacity: 0; }
@keyframes sec-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 34% { opacity: 1; transform: none; scale: 1; } 50% { scale: .8; } 64%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes sec-cur-out { 0% { opacity: 0; transform: translate(14px, 12px); } 30% { opacity: 1; transform: none; scale: 1; } 44% { scale: .8; } 56% { scale: 1; } 76% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes sec-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes sec-push { 45% { translate: 0 2px; } }
@keyframes sec-foc { from, to { opacity: 1; } }

/* ══ 1 · GİRİŞ EKRANI ══ */
.sec-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 41%); background: #fafafa; }
.sec-hero { order: 2; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: 22px 22px 26px; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, var(--navy-soft) 0%, var(--navy) 52%, var(--navy-night) 100%); }
.sec-hero::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(180deg, rgba(5, 16, 32, 0), rgba(5, 16, 32, .32)); pointer-events: none; }
.sec-hero__dots { position: absolute; inset: 0; opacity: .09; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0); background-size: 20px 20px; }
.sec-hero > :not(.sec-hero__dots) { position: relative; z-index: 1; }
.sec-logo--hero { width: 40px; height: 40px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 14px -6px rgba(0, 0, 0, .55); }
.sec-hero__t { display: block; margin-top: 12px; font-size: 12px; line-height: 18px; font-weight: 700; color: rgba(255, 255, 255, .92); text-wrap: pretty; }
.sec-hero__t--m { display: none; }
.sec-hero__chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 22px; margin-top: 16px; padding: 0 9px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.sec-hero__chip i { width: 6px; height: 6px; border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 0 2px rgba(110, 231, 183, .22); }

.sec-form { display: flex; flex-direction: column; min-width: 0; padding: 20px 30px 18px; }
.sec-form__top { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 14px; }
.sec-moon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: #52525b; }
.sec-moon .sec-i { width: 15px; height: 15px; }
.sec-eyebrow { font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-soft); }
.sec-h1 { display: block; margin-top: 3px; font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -.025em; color: var(--sec-ink); }
.sec-sub { display: block; margin-top: 1px; font-size: 11.5px; line-height: 16px; font-weight: 500; color: #71717a; }
.sec-lbl { display: flex; align-items: baseline; justify-content: space-between; margin: 14px 0 5px; font-size: 11px; line-height: 14px; font-weight: 700; color: #3f3f46; }
.sec-lbl small { font-size: 10.5px; font-weight: 600; color: #52525b; }

/* giriş kutuları (app: rounded-xl border-2 zinc-300; odakta halka) */
.sec-in { position: relative; display: flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 10px; background: #fff;
  box-shadow: inset 0 0 0 1.5px #d4d4d8, 0 1px 1px rgba(16, 37, 64, .03); }
.sec-in::after { content: ""; position: absolute; inset: -1px; border-radius: 11px; box-shadow: 0 0 0 2px var(--navy-soft), 0 0 0 5px rgba(29, 79, 134, .13); opacity: 0; transition: opacity .15s var(--ui-ease); pointer-events: none; }
.sec-ph { position: absolute; left: 11px; right: 11px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 11.5px; font-weight: 500; color: #9a9aa3; white-space: nowrap; overflow: hidden; }
.sec-ph--dot { letter-spacing: 1px; font-size: 13px; }
.sec-typ { position: relative; display: flex; align-items: center; height: 100%; font-size: 12.5px; font-weight: 600; color: var(--sec-ink); white-space: nowrap; }
.sec-typ i { display: block; max-width: 0; overflow: hidden; font-style: normal; transition: max-width 0s linear calc(var(--t0, 0s) + var(--i) * var(--tk, 55ms)); }
.sec-typ--dot { font-size: 13px; letter-spacing: 1px; }
.sec-car { display: block; flex: none; width: 2px; height: 15px; margin-left: 1px; border-radius: 1px; background: var(--navy); opacity: 0; transition: opacity .1s linear; }
.sec-eye { display: grid; place-items: center; margin-left: auto; color: #52525b; }
.sec-eye .sec-i { width: 15px; height: 15px; }
.sec-in--id { --t0: .5s; --tk: 55ms; }
.sec-in--pw { --t0: 1.3s; --tk: 45ms; }

.sec-chk { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; }
.sec-box { position: relative; flex: none; display: grid; place-items: center; width: 15px; height: 15px; margin-top: 1px; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1.5px #a1a1aa;
  transition: background-color .2s var(--ui-ease), box-shadow .2s var(--ui-ease); }
.sec-chk b { display: block; font-size: 11.5px; line-height: 16px; font-weight: 700; color: #3f3f46; }
.sec-chk small { display: block; font-size: 10.5px; line-height: 14px; font-weight: 500; color: #52525b; }

/* birincil düğme (app: rounded-2xl brand + 4 px alt gölge «basılabilir») */
.sec-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; margin-top: 16px; border-radius: 12px; color: #fff; font-size: 12.5px; font-weight: 800; white-space: nowrap;
  background: linear-gradient(180deg, #1f5591, var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 3px 0 0 var(--navy-night), 0 10px 18px -12px rgba(11, 36, 64, .8); }
.sec-btn .sec-i { width: 14px; height: 14px; stroke-width: 2.4; }
.sec-legal { display: block; margin-top: 18px; text-align: center; font-size: 10.5px; line-height: 14px; font-weight: 600; color: #71717a; white-space: nowrap; }
.sec-legal span { text-decoration: underline 1px; text-underline-offset: 2px; }

/* ══ 2 · DOĞRULAMA KATMANI ══ */
.sec-auth { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 16px; background: radial-gradient(120% 70% at 50% 0%, #ffffff 0%, var(--sec-bg) 60%); }
.sec-mark { display: block; flex: none; width: 85px; height: 22px; margin-bottom: 14px; }
.sec-cells { display: grid; width: 100%; }
.sec-g { grid-area: 1 / 1; align-self: start; justify-self: center; width: 100%; min-width: 0; }
.sec-g--otp { max-width: 300px; }
.sec-g--tk { max-width: 372px; }
.sec-card { position: relative; padding: 16px 18px 15px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1.5px #e4e4e7, 0 1px 2px rgba(16, 37, 64, .05), 0 14px 30px -20px rgba(16, 37, 64, .4), inset 0 1px 0 rgba(255, 255, 255, .6); }
.sec-ch { display: flex; align-items: center; gap: 7px; color: var(--navy-soft); }
.sec-ch .sec-i { width: 17px; height: 17px; }
.sec-ch b { font-size: 14.5px; line-height: 20px; font-weight: 800; letter-spacing: -.015em; color: var(--sec-ink); }
.sec-ch--warn { color: #d97706; }
.sec-ct { display: block; margin-top: 7px; font-size: 11.5px; line-height: 17px; font-weight: 500; color: #52525b; text-wrap: pretty; }
.sec-ct b { font-weight: 800; color: #27272a; }
.sec-ct .sec-mono { font-size: 11px; font-weight: 600; color: #3f3f46; }
.sec-card .sec-lbl { margin-top: 12px; }
.sec-in--otp { justify-content: center; height: 44px; --t0: .25s; --tk: 85ms; }
.sec-in--otp .sec-ph, .sec-in--otp .sec-typ { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 19px; letter-spacing: .5em; padding-left: .5em; }
.sec-in--otp .sec-ph { justify-content: center; letter-spacing: .5em; color: #a1a1aa; }
.sec-in--otp .sec-typ { font-weight: 700; color: var(--sec-ink); font-variant-numeric: tabular-nums; }
.sec-in--otp .sec-car { height: 20px; margin: 0 calc(.45em - 2px) 0 -.45em; }
.sec-chk--trust { gap: 8px; margin-top: 11px; }
.sec-chk--trust small { font-size: 10.5px; line-height: 14px; font-weight: 600; color: #3f3f46; }
.sec-box .sec-i { width: 11px; height: 11px; stroke-width: 3.2; color: #fff; opacity: 0; scale: .4; transition: opacity .15s var(--ui-ease), scale .35s var(--sec-spring); }
.sec-btn--ok { margin-top: 13px; height: 34px; }
.sec-links { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; font-size: 10.5px; line-height: 14px; }
.sec-links b { font-weight: 800; color: var(--navy-soft); }
.sec-links span { font-weight: 600; color: #71717a; }
.sec-foot { display: block; margin-top: 10px; text-align: center; font-size: 10px; line-height: 14px; font-weight: 500; color: #71717a; }

.sec-card--tk .sec-ct { margin-top: 6px; }
.sec-dev { display: block; margin-top: 10px; padding: 8px 11px 9px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7; }
.sec-dev b { display: block; font-size: 12px; line-height: 16px; font-weight: 800; color: var(--sec-ink); }
.sec-dev small { display: block; margin-top: 1px; font-size: 10.5px; line-height: 15px; font-weight: 700; color: #71717a; font-variant-numeric: tabular-nums; }
.sec-dev .sec-mono { font-size: 10px; font-weight: 600; }
.sec-btn--tk { height: 34px; margin-top: 12px; font-size: 12px; background: var(--navy); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(16, 37, 64, .2), 0 8px 16px -10px rgba(11, 36, 64, .7); }
.sec-btn2 { display: flex; align-items: center; justify-content: center; height: 32px; margin-top: 6px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px #d4d4d8; font-size: 12px; font-weight: 700; color: #3f3f46; }

/* ══ 3 · YÖNETİM › GÜVENLİK GÜNLÜĞÜ ══ */
.sec-adm { display: flex; flex-direction: column; background: var(--sec-bg); }
.sec-top { flex: none; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; background: #fff; box-shadow: inset 0 -1px 0 var(--ui-line); }
.sec-logo--sm { width: 26px; height: 26px; }
.sec-crumb { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; line-height: 14px; font-weight: 600; color: #52525b; white-space: nowrap; }
.sec-crumb span { display: inline-flex; align-items: center; gap: 5px; }
.sec-crumb .sec-i { width: 11px; height: 11px; color: #a1a1aa; }
.sec-crumb b { font-weight: 800; color: var(--sec-ink); }
.sec-me { flex: none; display: flex; align-items: center; gap: 7px; margin-left: auto; }
.sec-me i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--navy-soft), var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.sec-me b { font-size: 11.5px; font-weight: 800; color: var(--sec-ink); }
.sec-pg { flex: 1; min-height: 0; padding: 13px 16px 0; }
.sec-pgh { display: flex; align-items: center; gap: 7px; }
.sec-pgh b { font-size: 17px; line-height: 22px; font-weight: 800; letter-spacing: -.025em; color: var(--sec-ink); }
.sec-help { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ui-primary-soft); color: var(--navy-soft); box-shadow: inset 0 0 0 1px rgba(29, 79, 134, .14); }
.sec-help .sec-i { width: 13px; height: 13px; }
.sec-desc { display: block; margin-top: 2px; font-size: 11px; line-height: 15px; font-weight: 600; color: #52525b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sec-seg { display: flex; gap: 4px; margin-top: 10px; padding: 3px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line), 0 1px 1px rgba(16, 37, 64, .03); }
.sec-seg > * { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; font-size: 11.5px; font-weight: 700; color: #3f3f46; white-space: nowrap; }
.sec-seg .sec-i { width: 13px; height: 13px; }
.sec-seg > b { font-weight: 800; color: #fff; background: linear-gradient(180deg, #1f5591, var(--navy)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -6px rgba(11, 36, 64, .7); }
.sec-seg em { display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800; background: rgba(255, 255, 255, .2); font-variant-numeric: tabular-nums; }
.sec-flt { display: grid; grid-template-columns: minmax(0, 1fr) 118px 92px auto; gap: 6px; margin-top: 8px; }
.sec-flt > * { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7; font-size: 11px; font-weight: 700; color: #3f3f46; white-space: nowrap; min-width: 0; }
.sec-flt .sec-i { width: 13px; height: 13px; }
.sec-q { color: #9a9aa3 !important; font-weight: 600 !important; overflow: hidden; }
.sec-sel { justify-content: space-between; }
.sec-sel .sec-i { color: #71717a; }
.sec-suz { justify-content: center; padding: 0 14px !important; color: #fff !important; font-weight: 800 !important; background: var(--navy) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) !important; }
.sec-list { margin-top: 8px; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), 0 12px 26px -20px rgba(16, 37, 64, .3); }
.sec-row { display: flex; align-items: flex-start; column-gap: 12px; padding: 6px 12px 7px; border-top: 1px solid #eef0f3;
  opacity: 0; translate: 0 6px; transition: opacity .3s var(--ui-ease) calc(1s + var(--i) * 70ms), translate .4s var(--ui-ease) calc(1s + var(--i) * 70ms); }
.sec-row:first-child { border-top: 0; }
.sec-row__t { flex: none; width: 94px; font-size: 10.5px; line-height: 18px; font-weight: 700; color: #71717a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sec-badge { flex: none; display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.sec-badge--em { background: #d1fae5; color: #065f46; }
.sec-badge--am { background: #fef3c7; color: #92400e; }
.sec-badge--sk { background: #e0f2fe; color: #075985; }
.sec-badge--vi { background: #ede9fe; color: #5b21b6; }
.sec-row__n { flex: 1; min-width: 0; }
.sec-row__n b { display: block; font-size: 11.5px; line-height: 18px; font-weight: 800; color: var(--sec-ink); white-space: nowrap; }
.sec-row__n .sec-unk { font-weight: 700; color: #71717a; }
.sec-row__n small { display: block; font-size: 10px; line-height: 13px; font-weight: 700; color: #71717a; white-space: nowrap; }
.sec-row__m { flex: none; font-size: 10px; line-height: 18px; font-weight: 700; color: #71717a; white-space: nowrap; }
.sec-row__ip { font-size: 10px; font-weight: 600; }

/* ══ 4 · ESKİ CİHAZ (masaüstü ekranı çizimi) ══ */
.sec-scrim { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; height: 177px; pointer-events: none; opacity: 0; transition: opacity .45s var(--ui-ease);
  background: linear-gradient(180deg, rgba(247, 248, 250, 0), rgba(247, 248, 250, .92) 30px, rgba(247, 248, 250, .985) 64px); }
.sec-old { position: absolute; z-index: 10; left: 50%; bottom: 8px; width: 280px; margin-left: -140px; display: flex; flex-direction: column; align-items: center; pointer-events: none;
  opacity: 0; translate: 0 28px; transition: opacity .35s var(--ui-ease), translate .7s cubic-bezier(.3, 1.3, .5, 1); }
.sec-old__mon { position: relative; width: 100%; padding: 5px 5px 8px; border-radius: 12px; background: linear-gradient(180deg, #2a3445, #111827);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .55), 0 2px 4px rgba(15, 23, 42, .2), 0 26px 42px -18px rgba(15, 23, 42, .7), inset 0 1px 0 rgba(255, 255, 255, .14); }
.sec-old__mon::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #475569; }
.sec-old__scr { display: block; padding: 8px 11px 8px; border-radius: 6px; background: #fafafa; }
.sec-old__h { display: flex; align-items: center; gap: 7px; }
.sec-logo--xs { width: 22px; height: 22px; }
.sec-old__h > span { min-width: 0; line-height: 1; }
.sec-old__h small { display: block; font-size: 10px; line-height: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--navy-soft); }
.sec-old__h b { display: block; font-size: 12.5px; line-height: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--sec-ink); }
.sec-old__err { display: block; margin-top: 7px; padding: 6px 8px 7px; border-radius: 9px; background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; font-size: 10px; line-height: 14px; font-weight: 600; color: #b91c1c; text-wrap: pretty; }
.sec-old__btn { display: flex; align-items: center; justify-content: center; gap: 4px; height: 20px; margin-top: 6px; border-radius: 7px; background: var(--navy); color: #fff; font-size: 10px; font-weight: 800; }
.sec-old__btn .sec-i { width: 11px; height: 11px; stroke-width: 2.4; }
.sec-old__neck { width: 30px; height: 11px; background: linear-gradient(90deg, #8b97a8, #c8d0db 50%, #8b97a8); }
.sec-old__base { width: 92px; height: 5px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #aab4c2, #7f8b9c); box-shadow: 0 6px 10px -5px rgba(15, 23, 42, .45); }
.sec-old__tag { position: absolute; z-index: 2; left: -4px; bottom: -2px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap;
  background: var(--sun); color: var(--sun-ink, #2a1c00); box-shadow: 0 0 0 1.5px #fff, 0 4px 10px -4px rgba(16, 37, 64, .45);
  opacity: 0; scale: .7; transition: opacity .3s var(--ui-ease), scale .45s var(--sec-spring); }
.sec-old__tag .sec-i { width: 12px; height: 12px; stroke-width: 2.2; }

/* ══ ADIMLAR ══ */
/* katman geçişleri (tıklamadan sonra --sec-sw kadar beklenir) */
.sec-login { transition: opacity .35s var(--ui-ease) var(--sec-sw), scale .5s var(--ui-ease) var(--sec-sw); }
.sec.s2 .sec-login { opacity: 0; scale: .985; }
.sec-auth { opacity: 0; translate: 0 10px; transition: opacity .4s var(--ui-ease) calc(var(--sec-sw) + .05s), translate .55s var(--ui-ease) calc(var(--sec-sw) + .05s); }
.sec.s2 .sec-auth { opacity: 1; translate: 0 0; }
.sec.s5 .sec-auth { opacity: 0; translate: 0 -8px; transition-delay: var(--sec-sw); }
.sec-g--otp { transition: opacity .3s var(--ui-ease) var(--sec-sw), translate .45s var(--ui-ease) var(--sec-sw); }
.sec.s4 .sec-g--otp { opacity: 0; translate: -16px 0; }
.sec-g--tk { opacity: 0; translate: 16px 0; transition: opacity .35s var(--ui-ease) calc(var(--sec-sw) + .08s), translate .5s var(--ui-ease) calc(var(--sec-sw) + .08s); }
.sec.s4 .sec-g--tk { opacity: 1; translate: 0 0; }
.sec-adm { opacity: 0; transition: opacity .4s var(--ui-ease) calc(var(--sec-sw) + .05s); }
.sec.s5 .sec-adm { opacity: 1; }
.sec.s5 .sec-row { opacity: 1; translate: 0 0; }

/* s1: kullanıcı adı kutusuna tıklanır, yazılır; şifreye geçilir */
.sec-hit--id { left: 58%; top: 21px; }
.sec.s1:not(.s2) .sec-hit--id .ui-cur { animation: sec-cur-out .95s var(--ui-ease) .05s both; }
.sec.s1:not(.s2) .sec-hit--id .sec-rip { animation: sec-rip .55s ease-out .42s both; }
.sec.s1 .sec-in--id::after, .sec.s1 .sec-in--id .sec-car { animation: sec-foc .82s linear .42s; }
.sec.s1 .sec-in--id .sec-ph { opacity: 0; transition: opacity 0s linear .5s; }
.sec.s1 .sec-in--pw .sec-ph { opacity: 0; transition: opacity 0s linear 1.3s; }
.sec.s1 .sec-in--id .sec-typ i, .sec.s1 .sec-in--pw .sec-typ i, .sec.s3 .sec-in--otp .sec-typ i { max-width: 1em; }
.sec.s1 .sec-in--pw::after, .sec.s1 .sec-in--pw .sec-car { opacity: 1; transition-delay: 1.24s; }
.sec.s2 .sec-in--pw::after, .sec.s2 .sec-in--pw .sec-car { opacity: 0; transition-delay: .42s; }
/* s2: «Giriş yap» */
.sec-btn--in .sec-hit { left: 64%; top: 22px; }
.sec.s2:not(.s3) .sec-btn--in { animation: sec-push .3s var(--ui-ease) .4s; }
.sec.s2:not(.s3) .sec-hit--in .ui-cur { animation: sec-cur-out 1s var(--ui-ease) both; }
.sec.s2:not(.s3) .sec-hit--in .sec-rip { animation: sec-rip .55s ease-out .42s both; }
/* doğrulama kodu kutusu sayfa açılınca odakta (autofocus) */
.sec.s2 .sec-in--otp::after { opacity: 1; transition-delay: 1.05s; }
.sec.s3 .sec-in--otp .sec-car { animation: sec-foc .85s linear .2s; }
.sec.s3 .sec-in--otp .sec-ph { opacity: 0; transition: opacity 0s linear .25s; }
/* s3: kod yazılır, «Bu cihazı 30 gün hatırla» işaretlenir (odak kutudan çıkar) */
.sec.s3 .sec-in--otp::after { opacity: 0; transition-delay: 1.12s; }
.sec-hit--trust { left: 9px; top: 10px; }
.sec.s3:not(.s4) .sec-hit--trust .ui-cur { animation: sec-cur .9s var(--ui-ease) .72s both; }
.sec.s3:not(.s4) .sec-hit--trust .sec-rip { animation: sec-rip .55s ease-out 1.1s both; }
.sec.s3 .sec-chk--trust .sec-box { background: var(--navy-soft); box-shadow: inset 0 0 0 1.5px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: 1.14s; }
.sec.s3 .sec-chk--trust .sec-box .sec-i { opacity: 1; scale: 1; transition-delay: 1.14s; }
/* s4: «Doğrula» */
.sec-btn--ok .sec-hit { left: 62%; top: 21px; }
.sec.s4:not(.s5) .sec-btn--ok { animation: sec-push .3s var(--ui-ease) .4s; }
.sec.s4:not(.s5) .sec-hit--ok .ui-cur { animation: sec-cur-out 1s var(--ui-ease) both; }
.sec.s4:not(.s5) .sec-hit--ok .sec-rip { animation: sec-rip .55s ease-out .42s both; }
/* s5: «Diğer oturumu kapat ve devam et» */
.sec-btn--tk .sec-hit { left: 72%; top: 20px; }
.sec.s5:not(.s6) .sec-btn--tk { animation: sec-push .3s var(--ui-ease) .4s; }
.sec.s5:not(.s6) .sec-hit--tk .ui-cur { animation: sec-cur-out 1s var(--ui-ease) both; }
.sec.s5:not(.s6) .sec-hit--tk .sec-rip { animation: sec-rip .55s ease-out .42s both; }
/* s6: eski cihaz giriş ekranına düşer */
.sec.s6 .sec-scrim { opacity: 1; transition-delay: .1s; }
.sec.s6 .sec-old { opacity: 1; translate: 0 0; transition-delay: .2s; }
.sec.s6 .sec-old__tag { opacity: 1; scale: 1; transition-delay: .75s; }

/* ══ DAR KAPLAR ══ */
@container (max-width: 660px) {
  .sec-form { padding: 18px 24px 16px; }
  .sec-hero { padding: 20px 18px 22px; }
  .sec-hero__t { font-size: 11.5px; line-height: 17px; }
}
/* tek satırlı günlük 601–636 px'te sığmaz (ad/ayrıntı cihaz sütununa biner): tarih gizlenir, yalnız saat */
@container (width > 600px) and (width <= 636px) {
  .sec-row__d { display: none; }
  .sec-row__t { width: 34px; }
}
/* telefon düzeni (uygulamada lg altı): giriş ekranında üstte kurum bandı, form kartı bandın üstüne biner */
@container (max-width: 600px) {
  .sec-login { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); background: var(--navy-night); }
  .sec-hero { order: 0; justify-content: flex-start; padding: 16px 20px 30px; background: linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft)); }
  .sec-hero::after { inset: 0; background: linear-gradient(180deg, rgba(5, 16, 32, 0) 30%, rgba(5, 16, 32, .3)); }
  .sec-logo--hero { width: 34px; height: 34px; }
  .sec-hero__t--d, .sec-hero__chip, .sec-form__top { display: none; }
  .sec-hero__t--m { display: block; margin-top: 8px; font-size: 12px; line-height: 16px; }
  .sec-form { position: relative; z-index: 1; margin-top: -16px; padding: 18px 22px 14px; border-radius: 20px 20px 0 0; background: #fafafa; }

  .sec-flt { display: none; }
  .sec-scrim { height: 198px; }
  /* günlük satırı iki satır: rozet + zaman · ad + ayrıntı · cihaz */
  .sec-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "b t" "n m"; column-gap: 8px; row-gap: 3px; padding: 7px 12px 7px; }
  .sec-badge { grid-area: b; justify-self: start; }
  .sec-row__t { grid-area: t; width: auto; text-align: right; }
  .sec-row__n { grid-area: n; display: flex; align-items: baseline; gap: 5px; min-width: 0; }
  .sec-row__n b { line-height: 15px; }
  .sec-row__n small { display: inline; line-height: 15px; }
  .sec-row__n small::before { content: "· "; }
  .sec-row__m { grid-area: m; line-height: 15px; text-align: right; }
}
@container (max-width: 470px) {
  .sec-form { padding: 16px 18px 12px; }
  .sec-h1 { font-size: 19px; line-height: 24px; }
  .sec-ph { font-size: 10.5px; left: 10px; right: 10px; }
  .sec-in { padding: 0 10px; }
  .sec-lbl { margin-top: 12px; }
  .sec-btn { margin-top: 14px; }

  .sec-auth { padding: 16px 12px 12px; }
  .sec-mark { margin-bottom: 12px; }
  .sec-card { padding: 14px 14px 13px; }
  .sec-ch b { font-size: 13.5px; }
  .sec-ct { font-size: 11px; line-height: 16px; }
  .sec-dev { padding: 7px 10px 8px; }
  .sec-dev small { font-size: 10px; line-height: 14px; }

  .sec-top { gap: 8px; padding: 0 12px; }
  .sec-crumb__h, .sec-me b { display: none !important; }
  .sec-pg { padding: 12px 12px 0; }
  .sec-desc, .sec-flt, .sec-row__d, .sec-row__ip, .sec-row__ipd { display: none; }
  .sec-pgh b { font-size: 16px; }
  .sec-seg > * { padding: 0 9px; font-size: 11px; }
  .sec-row { padding: 7px 10px; }

  .sec-scrim { height: 218px; }
  .sec-old { width: 250px; margin-left: -125px; }
}
@container (max-width: 380px) {
  .sec-old { width: 244px; margin-left: -122px; }
  .sec-old__scr { padding: 8px 9px 9px; }
}