*,*::before,*::after{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}

html,body{
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  background:#0f0a04;
}

.app{
  width:100%;
  max-width:430px;
  min-height:100vh;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.app.is-transitioning .screen{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  min-height:100vh;
}

.screen{
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background-color:#120b04;
  background-image:
    radial-gradient(ellipse 120% 70% at 50% 72%, rgba(255,205,50,0.88) 0%, rgba(200,145,30,0.5) 30%, rgba(60,38,8,0.12) 55%, transparent 70%),
    radial-gradient(ellipse 90% 40% at 10% 50%, rgba(255,175,40,0.28) 0%, transparent 55%),
    radial-gradient(ellipse 70% 35% at 95% 22%, rgba(255,160,30,0.18) 0%, transparent 50%),
    linear-gradient(165deg, transparent 30%, rgba(255,190,45,0.12) 50%, transparent 70%),
    linear-gradient(180deg, #080503 0%, #151008 20%, #2a1c0a 50%, #120a04 80%, #060302 100%);
}

#splash{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#000;
}
#splash img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ── BRAND LOGO ── */
.brand-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.brand-icon{
  width:22px;
  height:20px;
  object-fit:cover;
  object-position:left center;
  flex-shrink:0;
}
.brand-text{
  color:#fff;
  font-size:15px;
  font-weight:700;
  font-style:italic;
  letter-spacing:-0.3px;
  line-height:1;
}

/* ══ WELCOME SCREEN ══ */
.welcome-header{
  flex-shrink:0;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.lang-select{
  display:flex;
  align-items:center;
  gap:3px;
  color:#fff;
  font-size:13px;
  font-weight:400;
  min-width:32px;
}
.lang-select svg{
  width:7px;
  height:4px;
  fill:#fff;
  margin-top:1px;
}
.header-mascot{
  width:26px;
  height:26px;
  background:#fcba00;
  border-radius:3px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.header-mascot svg{
  width:20px;
  height:20px;
}

.renewal-row{
  flex-shrink:0;
  padding:7px 14px 6px;
  border-bottom:1px solid rgba(255,255,255,0.14);
}
.renewal-badge{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.renewal-icon{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1.5px solid rgba(218,180,100,0.85);
  background:rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.renewal-icon svg{
  width:16px;
  height:16px;
  fill:#fff;
}
.renewal-badge span{
  color:#fff;
  font-size:9.5px;
  font-weight:400;
  line-height:1;
}

.welcome-body{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:0 22px 16px;
  text-align:center;
}
.welcome-logo-circle{
  width:100px;
  height:100px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.5);
  background:rgba(255,255,255,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}
.welcome-logo-circle .brand-logo{
  flex-direction:column;
  gap:3px;
}
.welcome-logo-circle .brand-icon{
  width:30px;
  height:28px;
}
.welcome-logo-circle .brand-text{
  font-size:11px;
}
.welcome-title{
  color:#fff;
  font-size:26px;
  font-weight:700;
  letter-spacing:-0.4px;
  line-height:1.15;
  margin-bottom:5px;
}
.welcome-subtitle{
  color:rgba(255,255,255,0.88);
  font-size:13px;
  font-weight:400;
  line-height:1.3;
  margin-bottom:22px;
}
.welcome-actions{
  width:100%;
}
.welcome-btn-row{
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.welcome-btn-primary{
  flex:1;
  height:44px;
  border:none;
  border-radius:11px;
  background:#fff;
  color:#8a6d2e;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
.welcome-btn-outline{
  width:100%;
  height:44px;
  border:1px solid rgba(255,255,255,0.88);
  border-radius:11px;
  background:transparent;
  color:#fff;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

.bottom-sheet{
  flex-shrink:0;
  background:#fff;
  border-radius:28px 28px 0 0;
  padding:5px 0 20px;
}
.sheet-handle{
  display:flex;
  justify-content:center;
  padding:0 0 6px;
}
.sheet-handle svg{
  width:12px;
  height:7px;
  fill:#b0b0b0;
}
.sheet-items{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:0 6px;
}
.sheet-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  text-align:center;
  min-width:0;
  padding:0 1px;
}
.sheet-item-icon{
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sheet-item-icon svg{
  width:100%;
  height:100%;
  fill:#b8860b;
}
.sheet-item-icon.fast-logo{
  font-size:12px;
  font-weight:800;
  font-style:italic;
  color:#d45a20;
  letter-spacing:-0.3px;
  line-height:1;
  font-family:Georgia,"Times New Roman",serif;
}
.sheet-item span{
  font-size:9px;
  line-height:1.2;
  color:#333;
  font-weight:400;
}

/* ══ LOGIN / FORM SCREENS ══ */
.login-header{
  flex-shrink:0;
  height:48px;
  display:flex;
  align-items:center;
  padding:0 14px;
  position:relative;
}
.back-btn{
  width:36px;
  height:36px;
  border:none;
  background:transparent;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  z-index:2;
}
.back-btn svg{
  width:9px;
  height:16px;
  stroke:#fff;
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.login-header .brand-logo{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.login-header--center{
  justify-content:center;
}
.login-header--center .brand-logo{
  position:static;
  transform:none;
}

.login-tabs,
.page-tabs{
  flex-shrink:0;
  display:flex;
  margin:48px 22px 0;
}
.login-tab,
.page-tab{
  flex:1;
  text-align:center;
  padding:0 0 9px;
  color:rgba(255,255,255,0.38);
  font-size:15px;
  font-weight:400;
  cursor:default;
  position:relative;
  border:none;
  background:transparent;
}
.login-tab{
  cursor:pointer;
}
.login-tab.active,
.page-tab.active{
  color:#fff;
  font-weight:600;
}
.login-tab.active::after,
.page-tab.active::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:54px;
  height:3px;
  background:#ffc600;
  border-radius:1px;
}
.page-tab.active::after{
  width:72%;
  max-width:160px;
}

.login-form-wrap{
  padding:32px 22px 40px;
}
.form-title{
  color:#fff;
  font-size:17px;
  font-weight:600;
  line-height:1.35;
  margin-bottom:14px;
}
.form-notice{
  margin-bottom:20px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(255,255,255,0.1);
}
.form-notice .small{
  color:rgba(255,255,255,0.82);
  font-size:13px;
  line-height:1.4;
}
.form-notice strong{
  color:#fff;
  font-weight:600;
}

#hataMesaj,
.form-error,
.err{
  color:#ffb3b3;
  margin:0 0 12px;
  font-size:12px;
  font-weight:600;
  text-align:center;
}

.input-field{
  width:100%;
  height:48px;
  margin-bottom:8px;
  padding:0 14px;
  border:none;
  border-radius:10px;
  background:rgba(255,255,255,0.14);
  color:#fff;
  font-size:13px;
  outline:none;
  -webkit-appearance:none;
}
.input-field::placeholder{
  color:rgba(255,255,255,0.48);
}
.input-with-link{
  position:relative;
  margin-bottom:8px;
}
.input-with-link .input-field{
  margin-bottom:0;
  padding-right:68px;
}
.sifre-al{
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
  font-size:12px;
  font-weight:600;
  pointer-events:none;
  white-space:nowrap;
}

.input-group{
  margin-bottom:8px;
}
.input-group .input-field{
  margin-bottom:0;
}
.soft-error{
  display:none;
  margin-top:6px;
  padding:10px 12px;
  background:rgba(255,80,80,0.12);
  border-left:3px solid #ff7070;
  color:#ffb3b3;
  font-size:12px;
  border-radius:6px;
}

.btn-devam,
.btn1{
  width:100%;
  height:48px;
  margin-top:16px;
  border:none;
  border-radius:10px;
  background:linear-gradient(180deg,#e2e8f0 0%,#c8d2de 100%);
  color:#4a4a4a;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}

/* ══ SUCCESS SCREEN ══ */
.success-screen{
  align-items:center;
  justify-content:center;
  padding:48px 22px 32px;
}
.success-box{
  width:100%;
  max-width:360px;
  padding:28px 22px;
  border-radius:14px;
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  text-align:center;
  font-size:17px;
  line-height:1.5;
  backdrop-filter:blur(4px);
}

/* ══ ERROR PAGE ══ */
.error-screen{
  align-items:center;
  justify-content:center;
  padding:40px 22px;
}
.error-box{
  width:100%;
  max-width:360px;
  padding:24px 20px;
  border-radius:14px;
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.12);
  color:#fff;
  text-align:center;
}
.error-box h2{
  font-size:20px;
  margin-bottom:10px;
}
.error-box p{
  font-size:14px;
  line-height:1.5;
  color:rgba(255,255,255,0.85);
}
.error-box a{
  color:#ffc600;
  text-decoration:none;
  font-weight:600;
}

/* ══ PAGE TRANSITIONS ══ */
.app.is-transitioning .screen{
  will-change:opacity,transform;
}

@keyframes txEnterForward{
  from{
    opacity:0;
    transform:translateY(12px) scale(0.988);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
@keyframes txExitForward{
  from{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  to{
    opacity:0;
    transform:translateY(-8px) scale(0.992);
  }
}
@keyframes txEnterBack{
  from{
    opacity:0;
    transform:translateY(-10px) scale(0.988);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
@keyframes txExitBack{
  from{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  to{
    opacity:0;
    transform:translateY(10px) scale(0.992);
  }
}

.tx-enter-forward{
  animation:txEnterForward 0.42s cubic-bezier(0.22,1,0.36,1) forwards;
}
.tx-exit-forward{
  animation:txExitForward 0.36s cubic-bezier(0.4,0,0.2,1) forwards;
}
.tx-enter-back{
  animation:txEnterBack 0.42s cubic-bezier(0.22,1,0.36,1) forwards;
}
.tx-exit-back{
  animation:txExitBack 0.36s cubic-bezier(0.4,0,0.2,1) forwards;
}

@media (prefers-reduced-motion:reduce){
  .tx-enter-forward,
  .tx-exit-forward,
  .tx-enter-back,
  .tx-exit-back{
    animation:none;
  }
}