/* ============================================================
     KAYIT — Tek Kart / Sakin Odak (mobil-öncelikli redesign).
     Token-only var(--bb-*); tek ham renk: #fff.
     ============================================================ */

 /* — ZEMİN: yumuşak ivory radial, kart dikey-ortalı — */
 .kyt-wrap {
     display: grid;
     place-items: center;
     min-height: calc(100svh - 64px);
     padding: var(--bb-6) var(--bb-pad-x) var(--bb-7);
     background:
         radial-gradient(78% 56% at 88% 4%, rgba(63, 180, 180, .06), transparent 60%),
         radial-gradient(70% 56% at 4% 100%, rgba(201, 162, 75, .05), transparent 62%),
         var(--bb-grad-ivory)
 }

 /* — TEK KART (hover-lift YOK) — */
 .kyt-card {
     position: relative;
     width: 100%;
     max-width: 440px;
     margin-inline: auto;
     background: var(--bb-surface-raised);
     border: 1px solid var(--bb-border);
     border-radius: var(--bb-r-2xl);
     box-shadow: var(--bb-e2);
     padding: var(--bb-6) var(--bb-5);
     overflow: hidden
 }

 .kyt-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 1px;
     background: var(--bb-grad-sheen);
     opacity: .5;
     pointer-events: none
 }

 /* — İLERLEME: iki etiketli segment (her adım kendi rayını taşır; JS .aktif/.bitti'ye salt-CSS bağ) — */
 .kyt-steps {
     display: flex;
     gap: var(--bb-3);
     margin: 0 0 var(--bb-6)
 }

 .kyt-step {
     flex: 1 1 0;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 8px
 }

 .kyt-step .lbl {
     font-size: var(--bb-text-xs);
     font-weight: 800;
     letter-spacing: .04em;
     color: var(--bb-ink-300);
     font-variant-numeric: tabular-nums;
     transition: color var(--bb-dur-base) var(--bb-ease-standard)
 }

 .kyt-step.aktif .lbl {
     color: var(--bb-cacao-700)
 }

 .kyt-step.bitti .lbl {
     color: var(--bb-teal-700)
 }

 .kyt-step .seg {
     height: 4px;
     border-radius: var(--bb-r-pill);
     background: var(--bb-border);
     overflow: hidden;
     position: relative
 }

 .kyt-step .seg::after {
     content: "";
     position: absolute;
     inset: 0;
     background: var(--bb-teal-500);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform var(--bb-dur-slow) var(--bb-ease-standard)
 }

 .kyt-step.aktif .seg::after,
 .kyt-step.bitti .seg::after {
     transform: scaleX(1)
 }

 /* — BAŞLIK + İMZA ALTIN HAIRLINE — */
 .gir-card__head {
     margin: 0 0 var(--bb-5)
 }

 .gir-card__head h1,
 .gir-card__head h2 {
     font-family: var(--bb-font-display);
     font-weight: 800;
     font-size: var(--bb-display-s);
     line-height: var(--bb-lh-tight);
     letter-spacing: var(--bb-ls-display);
     color: var(--bb-cacao-700);
     margin: 0 0 6px;
     overflow-wrap: anywhere
 }

 .gir-card__head p {
     font-size: var(--bb-text-m);
     line-height: var(--bb-lh-body);
     color: var(--bb-on-light-dim);
     max-width: 42ch;
     overflow-wrap: anywhere
 }

 .gir-card__head p b {
     color: var(--bb-cacao-700);
     font-weight: 800
 }

 .kyt-rule {
     height: 1px;
     border: 0;
     margin: var(--bb-5) 0;
     background: var(--bb-grad-gold);
     opacity: .5
 }

 /* — ŞİFRE göster/gizle — */
 .gir-pw {
     position: relative
 }

 .gir-pw .toggle {
     position: absolute;
     top: 50%;
     right: 8px;
     transform: translateY(-50%);
     width: 36px;
     height: 36px;
     border-radius: var(--bb-r-sm);
     display: grid;
     place-items: center;
     font-size: 17px;
     color: var(--bb-ink-300);
     background: none;
     transition: color var(--bb-dur-fast) var(--bb-ease-standard)
 }

 .gir-pw .toggle:hover,
 .gir-pw .toggle:focus-visible {
     color: var(--bb-cacao-700);
     outline: none
 }

 /* — ŞİFRE güç çubuğu — */
 .gir-pwbar {
     display: flex;
     gap: 6px;
     margin: var(--bb-2) 0 2px
 }

 .gir-pwbar span {
     flex: 1;
     height: 4px;
     border-radius: var(--bb-r-pill);
     background: var(--bb-border);
     transition: background var(--bb-dur-fast) var(--bb-ease-standard)
 }

 .gir-pwbar.s1 span:nth-child(1) {
     background: var(--bb-error)
 }

 .gir-pwbar.s2 span:nth-child(-n+2) {
     background: var(--bb-gold-500)
 }

 .gir-pwbar.s3 span:nth-child(-n+3) {
     background: var(--bb-teal-500)
 }

 .gir-pwbar.s4 span {
     background: var(--bb-success)
 }

 .gir-pwhint {
     font-size: var(--bb-text-xs);
     font-weight: 700;
     color: var(--bb-on-light-dim);
     min-height: 16px;
     overflow-wrap: anywhere
 }

 /* — 18+ ONAY — */
 .gir-remember {
     display: inline-flex;
     align-items: flex-start;
     gap: 10px;
     cursor: pointer;
     font-size: var(--bb-text-s);
     font-weight: 600;
     color: var(--bb-ink-700);
     line-height: 1.45;
     margin: var(--bb-2) 0 var(--bb-5);
     overflow-wrap: anywhere
 }

 .gir-remember input {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0
 }

 .gir-remember .box {
     width: 24px;
     height: 24px;
     border-radius: var(--bb-r-sm);
     border: 1.5px solid var(--bb-border);
     background: var(--bb-surface-raised);
     display: grid;
     place-items: center;
     flex-shrink: 0;
     margin-top: 1px;
     transition: background var(--bb-dur-fast) var(--bb-ease-standard),
         border-color var(--bb-dur-fast) var(--bb-ease-standard)
 }

 .gir-remember .box::after {
     content: "✓";
     font-size: 14px;
     font-weight: 900;
     color: #fff;
     opacity: 0;
     transform: scale(.5);
     transition: opacity var(--bb-dur-fast) var(--bb-ease-standard),
         transform var(--bb-dur-fast) var(--bb-ease-emphasized)
 }

 .gir-remember input:checked+.box {
     background: var(--bb-teal-500);
     border-color: var(--bb-teal-500)
 }

 .gir-remember input:checked+.box::after {
     opacity: 1;
     transform: scale(1)
 }

 .gir-remember input:focus-visible+.box {
     box-shadow: 0 0 0 4px rgba(63, 180, 180, .18)
 }

 .gir-remember a {
     font-weight: 800;
     color: var(--bb-teal-700)
 }

 .gir-remember a:hover {
     color: var(--bb-cacao-700)
 }

 /* — ALT BAĞLANTILAR — */
 .gir-foot {
     text-align: center;
     font-size: var(--bb-text-m);
     color: var(--bb-on-light-dim);
     margin-top: var(--bb-5)
 }

 .gir-foot a {
     font-weight: 800;
     color: var(--bb-cacao-700);
     transition: color var(--bb-dur-fast) var(--bb-ease-standard)
 }

 .gir-foot a:hover {
     color: var(--bb-teal-700)
 }

 .gir-back {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     margin-top: var(--bb-4);
     font-size: var(--bb-text-xs);
     font-weight: 700;
     letter-spacing: .03em;
     color: var(--bb-ink-300);
     transition: color var(--bb-dur-fast) var(--bb-ease-standard),
         transform var(--bb-dur-fast) var(--bb-ease-standard)
 }

 .gir-back:hover {
     color: var(--bb-cacao-700);
     transform: translateX(-3px)
 }

 /* — ADIM GEÇİŞİ — */
 .kyt-adim {
     animation: kyt-in var(--bb-dur-slow) var(--bb-ease-standard) both
 }

 .kyt-adim[hidden] {
     display: none
 }

 @keyframes kyt-in {
     from {
         opacity: 0;
         transform: translateY(10px)
     }

     to {
         opacity: 1;
         transform: none
     }
 }

 /* — ADIM 2: kod ekranı ortalı — */
 .kyt-adim--dogrula {
     text-align: center
 }

 .kyt-adim--dogrula .gir-card__head p {
     margin-inline: auto
 }

 .kyt-mail-ic {
     width: 54px;
     height: 54px;
     border-radius: var(--bb-r-lg);
     display: grid;
     place-items: center;
     font-size: 24px;
     margin: 0 auto var(--bb-4);
     background: rgba(63, 180, 180, .10);
     border: 1px solid var(--bb-border);
     color: var(--bb-teal-700)
 }

 /* — OTP: kutular, 360px taşma kilidi (flex:1 + min-width:0) — */
 .kyt-otp {
     display: flex;
     gap: var(--bb-2);
     justify-content: space-between;
     margin: var(--bb-4) 0 var(--bb-6)
 }

 .kyt-otp input {
     flex: 1 1 0;
     min-width: 0;
     height: 52px;
     text-align: center;
     font-family: var(--bb-font-display);
     font-weight: 800;
     font-size: 26px;
     color: var(--bb-cacao-700);
     font-variant-numeric: tabular-nums;
     caret-color: var(--bb-teal-500);
     background: var(--bb-surface-raised);
     border: 1.5px solid var(--bb-border);
     border-radius: var(--bb-r-md);
     transition: border-color var(--bb-dur-fast) var(--bb-ease-standard),
         box-shadow var(--bb-dur-fast) var(--bb-ease-standard),
         background var(--bb-dur-fast) var(--bb-ease-standard),
         transform var(--bb-dur-fast) var(--bb-ease-standard)
 }

 .kyt-otp input:focus {
     outline: none;
     border-color: var(--bb-teal-500);
     box-shadow: 0 0 0 4px rgba(63, 180, 180, .16);
     transform: translateY(-1px)
 }

 .kyt-otp input.dolu {
     border-color: var(--bb-teal-500);
     background: rgba(63, 180, 180, .06)
 }

 /* — TEKRAR GÖNDER — */
 .kyt-resend {
     font-size: var(--bb-text-s);
     color: var(--bb-on-light-dim);
     margin-top: var(--bb-5);
     overflow-wrap: anywhere
 }

 .kyt-resend button {
     font-weight: 800;
     color: var(--bb-teal-700);
     background: none;
     font-variant-numeric: tabular-nums;
     transition: color var(--bb-dur-fast) var(--bb-ease-standard)
 }

 .kyt-resend button:hover {
     color: var(--bb-cacao-700)
 }

 .kyt-resend button[disabled] {
     color: var(--bb-ink-300);
     cursor: default
 }

 /* ── "Kayıttan Sonra" adımları — sade numaralı liste (KORUNDU) ── */
 .kyt-sonra {
     max-width: 680px;
     margin-inline: auto;
     display: flex;
     flex-direction: column;
     gap: 0;
     counter-reset: ks;
     background: var(--bb-surface-raised);
     border: 1px solid var(--bb-border);
     border-radius: var(--bb-r-xl);
     padding: var(--bb-2) clamp(var(--bb-5), 3vw, var(--bb-7));
     box-shadow: var(--bb-e1)
 }

 .kyt-sonra__kart {
     display: flex;
     align-items: flex-start;
     gap: var(--bb-5);
     padding: var(--bb-6) 0;
     border-bottom: 1px solid var(--bb-border)
 }

 .kyt-sonra__kart:last-child {
     border-bottom: 0
 }

 .kyt-sonra__kart .num {
     counter-increment: ks;
     width: 40px;
     height: 40px;
     border-radius: var(--bb-r-pill);
     flex-shrink: 0;
     display: grid;
     place-items: center;
     font-family: var(--bb-font-display);
     font-size: 18px;
     font-weight: 800;
     color: var(--bb-teal-700);
     background: rgba(63, 180, 180, .1);
     border: 1px solid var(--bb-border)
 }

 .kyt-sonra__kart .num::after {
     content: counter(ks)
 }

 .kyt-sonra__kart h3 {
     font-family: var(--bb-font-display);
     font-size: var(--bb-text-l);
     letter-spacing: .01em;
     color: var(--bb-cacao-700);
     margin-bottom: 4px
 }

 .kyt-sonra__kart p {
     font-size: var(--bb-text-s);
     color: var(--bb-on-light-dim);
     line-height: 1.6;
     overflow-wrap: anywhere
 }

 /* ── SSS ── */
 .kyt-sss {
     max-width: 760px;
     margin-inline: auto
 }

 /* ── DESKTOP: aynı tek kart, daha derin gölge ── */
 @media (min-width:981px) {
     .kyt-wrap {
         min-height: calc(100vh - 76px);
         padding-block: var(--bb-8)
     }

     .kyt-card {
         max-width: 460px;
         padding: var(--bb-7) var(--bb-6);
         box-shadow: var(--bb-e3)
     }

     .kyt-otp {
         gap: var(--bb-3)
     }

     .kyt-otp input {
         height: 60px;
         font-size: 34px
     }
 }

 /* ── ARA TABLET ── */
 @media (min-width:561px) and (max-width:980px) {
     .kyt-card {
         max-width: 480px;
         padding: var(--bb-6)
     }

     .kyt-otp input {
         height: 56px;
         font-size: 30px
     }
 }

 /* ── MOBİL ── */
 @media (max-width:480px) {
     .kyt-sonra {
         padding-inline: var(--bb-5)
     }

     .kyt-sonra__kart {
         gap: var(--bb-4);
         padding: var(--bb-5) 0
     }
 }

 /* ── DAR MOBİL: OTP kesin sığar ── */
 @media (max-width:360px) {
     .kyt-otp {
         gap: 6px
     }

     .kyt-otp input {
         height: 48px;
         font-size: 24px
     }
 }

 /* ── HAREKET AZALT ── */
 @media (prefers-reduced-motion:reduce) {
     .kyt-adim {
         animation: none
     }

     .kyt-otp input:focus {
         transform: none
     }

     .kyt-step .seg::after {
         transition: none
     }

     .gir-back:hover {
         transform: none
     }
 }