/* DraBornGarage Web v1.6 — başvuru kapısı ve mobil pencere düzeltmeleri */
:root{
  --dkd-visual-viewport-height:100dvh;
  --dkd-visual-viewport-top:0px;
}

body.dkd-application-gated{
  overflow:hidden!important;
}

.dkd-application-gate{
  position:relative;
  min-height:100dvh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:max(24px,env(safe-area-inset-top)) 18px max(24px,env(safe-area-inset-bottom));
  isolation:isolate;
  background:
    radial-gradient(circle at 8% 8%,rgba(255,91,0,.25),transparent 32%),
    radial-gradient(circle at 94% 13%,rgba(0,204,255,.18),transparent 31%),
    radial-gradient(circle at 50% 110%,rgba(123,74,255,.21),transparent 38%),
    linear-gradient(155deg,#05070b 0%,#0b1018 48%,#070713 100%);
}

.dkd-application-gate::before,
.dkd-application-gate::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  filter:blur(54px);
  opacity:.55;
  animation:dkdGateFloat 6s ease-in-out infinite alternate;
}

.dkd-application-gate::before{
  width:260px;
  height:260px;
  left:-130px;
  top:17%;
  background:#ff4c00;
}

.dkd-application-gate::after{
  width:290px;
  height:290px;
  right:-155px;
  bottom:6%;
  background:#4938ff;
  animation-delay:-2.5s;
}

.dkd-application-gate-card{
  width:min(100%,560px);
  position:relative;
  overflow:hidden;
  padding:30px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:34px;
  background:
    radial-gradient(circle at 0 0,rgba(255,91,0,.15),transparent 34%),
    radial-gradient(circle at 100% 0,rgba(0,196,255,.12),transparent 34%),
    linear-gradient(155deg,rgba(20,27,37,.97),rgba(7,10,16,.985));
  box-shadow:0 34px 110px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(24px) saturate(1.15);
}

.dkd-application-gate-card::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,#ff3000,#ffb800,#00d4ff,#8b5cff,#ff3000);
  background-size:230% 100%;
  animation:dkdGateGradient 5s linear infinite;
  box-shadow:0 0 26px rgba(255,82,0,.46);
}

.dkd-application-gate-brand{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:26px;
}

.dkd-application-gate-logo{
  width:55px;
  height:55px;
  display:grid;
  place-items:center;
  flex:0 0 55px;
  border:1px solid rgba(255,198,139,.28);
  border-radius:19px;
  font-size:26px;
  background:linear-gradient(145deg,#ff7a00,#ff2d00);
  box-shadow:0 16px 38px rgba(255,72,0,.28),inset 0 1px 0 rgba(255,255,255,.32);
}

.dkd-application-gate-brand strong{
  display:block;
  color:#fff;
  font-size:19px;
  letter-spacing:-.45px;
}

.dkd-application-gate-brand span{
  display:block;
  margin-top:4px;
  color:#7f8a99;
  font-size:10px;
  font-weight:950;
  letter-spacing:1.7px;
}

.dkd-application-gate-status{
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  position:relative;
  margin:2px auto 24px;
  border-radius:30px;
  color:#fff;
  font-size:36px;
  background:linear-gradient(145deg,rgba(255,122,0,.23),rgba(139,92,255,.12));
  border:1px solid rgba(255,171,78,.33);
  box-shadow:0 20px 55px rgba(255,80,0,.16),inset 0 1px 0 rgba(255,255,255,.09);
}

.dkd-application-gate-status::before,
.dkd-application-gate-status::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:36px;
  border:2px solid transparent;
  border-top-color:#ff7900;
  border-right-color:#ff2f9d;
  animation:dkdGateSpin 1.8s linear infinite;
}

.dkd-application-gate-status::after{
  inset:7px;
  border-top-color:#00d4ff;
  border-right-color:transparent;
  border-bottom-color:#8b5cff;
  animation-direction:reverse;
  animation-duration:2.4s;
}

.dkd-application-gate-kicker{
  margin:0 0 10px;
  color:#ff9c55;
  text-align:center;
  font-size:10px;
  font-weight:950;
  letter-spacing:2.1px;
}

.dkd-application-gate h1{
  margin:0;
  color:#fff;
  text-align:center;
  font-size:clamp(31px,8vw,43px);
  line-height:1.04;
  letter-spacing:-1.8px;
}

.dkd-application-gate-copy{
  max-width:430px;
  margin:15px auto 24px;
  color:#a7b0bd;
  text-align:center;
  font-size:15px;
  line-height:1.62;
}

.dkd-application-gate-business{
  display:flex;
  align-items:center;
  gap:13px;
  padding:16px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:20px;
  background:rgba(255,255,255,.04);
}

.dkd-application-gate-business .ico{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  flex:0 0 46px;
  border-radius:15px;
  font-size:21px;
  background:rgba(255,91,0,.13);
  border:1px solid rgba(255,91,0,.22);
}

.dkd-application-gate-business strong{
  display:block;
  color:#fff;
  font-size:16px;
}

.dkd-application-gate-business span{
  display:block;
  margin-top:4px;
  color:#8591a0;
  font-size:12px;
  line-height:1.4;
}

.dkd-application-gate-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:18px 0 22px;
}

.dkd-application-gate-step{
  min-width:0;
  padding:12px 8px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  color:#738090;
  text-align:center;
  font-size:10px;
  font-weight:850;
  line-height:1.35;
  background:rgba(255,255,255,.025);
}

.dkd-application-gate-step b{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  margin:0 auto 7px;
  border-radius:10px;
  color:#fff;
  background:#252d38;
}

.dkd-application-gate-step.done{
  color:#b8f5d3;
  border-color:rgba(50,227,139,.19);
  background:rgba(50,227,139,.055);
}

.dkd-application-gate-step.done b{
  background:linear-gradient(145deg,#32e38b,#0bac64);
}

.dkd-application-gate-step.active{
  color:#ffd1b0;
  border-color:rgba(255,91,0,.27);
  background:rgba(255,91,0,.08);
}

.dkd-application-gate-step.active b{
  background:linear-gradient(145deg,#ff8a00,#ff3d00);
  box-shadow:0 0 22px rgba(255,91,0,.25);
  animation:dkdGatePulse 1.4s ease-in-out infinite;
}

.dkd-application-gate-actions{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
}

.dkd-application-gate-actions .dkd-btn{
  min-height:52px;
}

.dkd-application-gate-note{
  margin:17px 0 0;
  color:#687483;
  text-align:center;
  font-size:11px;
  line-height:1.45;
}

#dkd-modal-root{
  position:relative;
  z-index:1000;
}

.dkd-modal-backdrop{
  top:var(--dkd-visual-viewport-top)!important;
  bottom:auto!important;
  width:100vw!important;
  height:var(--dkd-visual-viewport-height)!important;
  min-height:0!important;
  overflow:hidden!important;
  overscroll-behavior:contain;
}

@media(max-width:800px){
  .dkd-modal-backdrop{
    display:grid!important;
    place-items:center!important;
    align-items:center!important;
    justify-items:center!important;
    padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))!important;
  }

  .dkd-modal,
  .dkd-modal.wide,
  .dkd-modal-wide{
    width:100%!important;
    max-width:760px!important;
    max-height:calc(var(--dkd-visual-viewport-height) - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)))!important;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    border-radius:28px!important;
    scroll-padding-top:92px;
    scroll-padding-bottom:110px;
    animation:dkdModalCenteredIn .3s cubic-bezier(.18,.8,.2,1) both!important;
  }

  .dkd-modal-head{
    top:0!important;
    z-index:8!important;
  }

  .dkd-modal-foot{
    bottom:0!important;
    z-index:8!important;
  }
}

@media(max-width:560px){
  .dkd-application-gate-card{
    padding:25px 20px;
    border-radius:28px;
  }

  .dkd-application-gate-steps{
    gap:6px;
  }

  .dkd-application-gate-step{
    padding:11px 5px;
    font-size:9px;
  }

  .dkd-application-gate-actions{
    grid-template-columns:1fr;
  }
}

@keyframes dkdGateFloat{
  to{transform:translate3d(30px,-22px,0) scale(1.08)}
}

@keyframes dkdGateGradient{
  to{background-position:230% 0}
}

@keyframes dkdGateSpin{
  to{transform:rotate(360deg)}
}

@keyframes dkdGatePulse{
  50%{transform:scale(.88);opacity:.7}
}

@keyframes dkdModalCenteredIn{
  from{opacity:0;transform:translateY(24px) scale(.975)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .dkd-application-gate *,
  .dkd-application-gate::before,
  .dkd-application-gate::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}
