/* Alesta mobil tanıtımının açılış kompozisyonu */
.hero--mobile{
  min-height:790px;
  height:100svh;
  max-height:1050px;
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  align-items:center;
  gap:2vw;
  padding:calc(var(--header) + 22px) 3.5vw 76px 5vw;
  background:linear-gradient(110deg,#090807 0%,#0b0908 57%,#17110d 100%);
}
.hero--mobile:after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:130px;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(transparent,#090807);
}
.hero--mobile .hero-shade{
  background:
    linear-gradient(90deg,#090807bb 0%,#09080766 39%,transparent 70%),
    linear-gradient(0deg,#09080766,transparent 24%,#09080733);
}
.hero--mobile .hero-grid{
  display:none;
}
.hero--mobile .hero-copy{
  grid-column:1;
  grid-row:1;
  width:100%;
  max-width:690px;
  align-self:center;
  padding:8px 0 22px;
  position:relative;
  z-index:3;
}
.hero-announcement{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:9px 13px 9px 10px;
  border:1px solid #ae86504d;
  background:#17110cbb;
  color:#dcc093;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
  white-space:nowrap;
  box-shadow:0 10px 34px #0005;
}
.hero-announcement-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d4a15d;
  box-shadow:0 0 0 5px #d4a15d1b,0 0 13px #d4a15d;
}
.hero-announcement-divider{
  width:1px;
  height:12px;
  margin:0 2px;
  background:#7d6140;
}
.hero--mobile .hero-logo{
  width:clamp(205px,17vw,305px);
  margin:27px 0 10px;
}
.hero--mobile .hero-kicker{
  font-family:var(--body);
  font-size:10px;
  font-weight:800;
  letter-spacing:.23em;
}
.hero--mobile h1{
  margin:25px 0 22px;
  font-size:clamp(51px,4.9vw,87px);
  line-height:1.01;
  letter-spacing:-.064em;
  text-transform:uppercase;
  white-space:nowrap;
}
.hero--mobile h1 span{color:#f4eee4}
.hero--mobile h1 em{
  display:inline-block;
  color:#e9bf7d;
  text-shadow:0 0 36px #d9954930;
}
.hero--mobile .hero-copy>p{
  max-width:515px;
  margin:0;
  color:#d0bdab;
  font-size:14px;
  line-height:1.82;
}
.hero--mobile .hero-actions{margin-top:30px}
.hero--mobile .button{min-height:55px}
.hero--mobile .hero-meta{
  gap:22px;
  margin-top:45px;
  padding-top:21px;
  border-top:1px solid #b88b4d33;
  color:#a9967f;
}
.hero--mobile .hero-meta strong{
  font-family:var(--body);
  font-size:12px;
  font-weight:800;
  color:#efd19f;
}
.hero--mobile .hero-meta i{height:30px}
.hero--mobile .hero-art{
  position:relative;
  inset:auto;
  grid-column:2;
  grid-row:1;
  width:100%;
  height:min(730px,calc(100svh - 140px));
  min-height:610px;
  opacity:1;
  overflow:visible;
  isolation:isolate;
}
.hero-warrior-stage{
  position:absolute;
  z-index:2;
  width:min(160%,1000px);
  aspect-ratio:1672/941;
  left:-32%;
  top:50%;
  transform:translateY(-50%);
  filter:drop-shadow(0 24px 28px #0009);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 0%,#000 72%,transparent 96%);
  user-select:none;
  pointer-events:none;
}
.hero-warrior-phone{position:relative;z-index:2;display:block;width:100%;height:auto;max-width:none}
.hero-phone-display{position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.hero--mobile .scroll-cue{z-index:5;bottom:36px}
.hero--mobile .hero-announcement,
.hero--mobile .hero-logo,
.hero--mobile .hero-kicker,
.hero--mobile h1,
.hero--mobile .hero-copy>p,
.hero--mobile .hero-actions,
.hero--mobile .hero-meta{
  animation:hero-rise .8s both;
}
.hero--mobile .hero-logo{animation-delay:.08s}
.hero--mobile .hero-kicker{animation-delay:.16s}
.hero--mobile h1{animation-delay:.23s}
.hero--mobile .hero-copy>p{animation-delay:.34s}
.hero--mobile .hero-actions{animation-delay:.43s}
.hero--mobile .hero-meta{animation-delay:.5s}
@keyframes hero-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1430px){
  .hero--mobile{padding-left:4vw;gap:0}
  .hero--mobile .hero-copy{max-width:430px;z-index:6}
  .hero--mobile h1{font-size:clamp(46px,4.3vw,64px)}
  .hero--mobile .hero-copy>p{max-width:380px}
  .hero--mobile .hero-actions{max-width:380px;gap:12px}
  .hero--mobile .hero-actions .button{padding-inline:14px;font-size:9px;gap:12px}
  .hero--mobile .hero-art{z-index:1}
  .hero--mobile .hero-art{height:min(690px,calc(100svh - 155px));min-height:570px}
  .hero-warrior-stage{width:min(170%,1080px);left:-34%;transform:translateY(-14%)}
}
@media(max-width:1050px){
  .hero--mobile{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);padding-left:5vw}
  .hero--mobile .hero-art{right:auto;width:100%;opacity:1}
  .hero-warrior-stage{width:178%;left:-59%;transform:translateY(-50%)}
  .hero--mobile .hero-shade{background:linear-gradient(90deg,#090807c4,transparent 76%)}
  .hero--mobile h1{font-size:clamp(43px,5.2vw,61px)}
}
@media(max-width:800px){
  .hero--mobile{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    height:auto;
    max-height:none;
    min-height:0;
    padding:calc(var(--header) + 36px) 26px 35px;
  }
  .hero--mobile .hero-copy{order:1;max-width:600px;align-self:center;padding:0}
  .hero--mobile h1{font-size:clamp(44px,8.5vw,68px)}
  .hero--mobile .hero-art{
    order:2;
    align-self:center;
    width:min(132vw,690px);
    height:auto;
    aspect-ratio:1672/941;
    min-height:0;
    margin:10px auto 0;
    overflow:visible;
  }
  .hero-warrior-stage{width:117%;left:-8%;transform:translateY(-50%)}
  .hero--mobile .hero-actions{margin-top:26px}
  .hero--mobile .hero-meta{margin-top:35px}
  .hero--mobile .scroll-cue{display:none}
}
@media(max-width:520px){
  .hero--mobile{padding:calc(var(--header) + 30px) 23px 23px}
  .hero-announcement{font-size:8px;letter-spacing:.1em;gap:7px}
  .hero--mobile .hero-logo{width:200px;margin:22px 0 8px}
  .hero--mobile .hero-kicker{font-size:9px;letter-spacing:.14em}
  .hero--mobile h1{font-size:clamp(39px,10.7vw,56px);margin:22px 0 18px}
  .hero--mobile .hero-copy>p{font-size:12px;line-height:1.72}
  .hero--mobile .hero-actions{gap:9px}
  .hero--mobile .button{min-height:48px}
  .hero--mobile .hero-meta{gap:13px;margin-top:29px}
  .hero--mobile .hero-meta strong{font-size:10px}
  .hero--mobile .hero-meta span{font-size:8px}
  .hero--mobile .hero-art{width:min(136vw,620px);margin-top:0}
  .hero-warrior-stage{width:82%;left:-4%}
}
@media(max-width:420px){
  .hero--mobile .hero-actions .button{width:100%}
  .hero--mobile .hero-art{width:min(140vw,590px)}
  .hero-warrior-stage{width:82%;left:-4%}
  .hero--mobile .hero-meta{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .hero--mobile *,
  .hero--mobile *:before,
  .hero--mobile *:after{animation:none!important;transition:none!important}
}