/* Hakkımızda - Video Odaklı Miço Tasarımı */

.about-video-hero{
  position:relative;
  min-height:calc(100vh - var(--header));
  display:flex;
  align-items:center;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 16%,rgba(255,196,0,.26),transparent 22%),
    radial-gradient(circle at 18% 82%,rgba(5,63,84,.12),transparent 24%),
    linear-gradient(135deg,#fffaf0 0%,#fff2d3 100%);
  padding:64px 0;
}

.about-bg-word{
  position:absolute;
  right:-6vw;
  bottom:0;
  font-family:var(--font-display);
  font-size:18vw;
  line-height:.7;
  font-weight:900;
  color:rgba(5,43,57,.055);
  white-space:nowrap;
  animation:bgDrift 9s ease-in-out infinite;
}

.about-video-wrap{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:56px;
  align-items:center;
}

.about-label{
  display:inline-flex;
  background:var(--yellow);
  color:var(--blue-dark);
  border:4px solid var(--blue-dark);
  border-radius:999px;
  padding:11px 24px;
  box-shadow:6px 6px 0 var(--blue-dark);
  font-family:var(--font-display);
  font-weight:900;
  transform:rotate(-2deg);
}

.about-video-copy h1{
  margin:30px 0 22px;
  max-width:790px;
  font-family:var(--font-display);
  font-size:clamp(4rem,7.6vw,8rem);
  line-height:.8;
  letter-spacing:-4px;
  color:var(--blue-dark);
}

.about-video-copy h1 span{
  display:block;
  color:var(--yellow-dark);
  text-shadow:0 5px 0 rgba(5,43,57,.12);
}

.about-video-copy p{
  max-width:640px;
  color:#39555f;
  font-size:1.12rem;
  line-height:1.65;
}

.about-hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:30px;
}

.about-video-stage{
  position:relative;
  min-height:690px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--blue-dark);
  border:4px solid var(--blue-dark);
  border-radius:46px;
  padding:28px;
  box-shadow:18px 18px 0 var(--yellow);
  overflow:hidden;
  transform:rotate(1deg);
}

.about-video-stage::before{
  content:"REELS";
  position:absolute;
  left:-4%;
  top:8%;
  font-family:var(--font-display);
  font-size:8vw;
  line-height:.75;
  font-weight:900;
  color:rgba(255,255,255,.05);
}

.about-video-stage::after{
  content:"🔥";
  position:absolute;
  right:42px;
  top:34px;
  font-size:4rem;
  filter:drop-shadow(0 12px 14px rgba(0,0,0,.25));
  animation:emojiFloat 3.5s ease-in-out infinite;
}

.about-video-stage .instagram-media{
  position:relative;
  z-index:4;
  width:100%!important;
  min-width:0!important;
  max-width:430px!important;
  margin:auto!important;
  border-radius:30px!important;
  overflow:hidden!important;
  box-shadow:0 20px 60px rgba(0,0,0,.25)!important;
}

.orbit{
  position:absolute;
  border:3px dashed rgba(255,196,0,.55);
  border-radius:50%;
  animation:orbitSpin 18s linear infinite;
}

.orbit-one{
  width:520px;
  height:520px;
}

.orbit-two{
  width:690px;
  height:690px;
  animation-duration:28s;
  animation-direction:reverse;
}

.video-sticker{
  position:absolute;
  left:28px;
  bottom:30px;
  z-index:5;
  background:var(--yellow);
  color:var(--blue-dark);
  border:4px solid #fff;
  box-shadow:7px 7px 0 rgba(0,0,0,.22);
  padding:20px 26px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:1.65rem;
  line-height:.86;
  transform:rotate(-7deg);
}

/* SCROLL SHOW */

.about-scroll-show{
  padding:100px 0;
  background:var(--blue-dark);
  color:#fff;
}

.scroll-show-wrap{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:54px;
  align-items:start;
}

.scroll-video-pin{
  position:sticky;
  top:calc(var(--header) + 28px);
}

.mini-phone-frame{
  min-height:590px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#031c26;
  border:4px solid #fff;
  border-radius:42px;
  padding:22px;
  box-shadow:14px 14px 0 var(--yellow);
  overflow:hidden;
}

.mini-phone-frame .instagram-media{
  width:100%!important;
  min-width:0!important;
  max-width:390px!important;
  margin:auto!important;
  border-radius:28px!important;
  overflow:hidden!important;
}

.scroll-cards{
  display:grid;
  gap:26px;
}

.scroll-cards article{
  min-height:270px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:#fff;
  color:var(--blue-dark);
  border:4px solid #fff;
  border-radius:34px;
  padding:34px;
  box-shadow:10px 10px 0 rgba(255,196,0,.55);
  transform:translateX(0) rotate(var(--r,0deg));
  transition:.25s ease;
}

.scroll-cards article:nth-child(1){--r:-1deg}
.scroll-cards article:nth-child(2){--r:1deg}
.scroll-cards article:nth-child(3){--r:-.7deg}
.scroll-cards article:nth-child(4){--r:1.2deg}

.scroll-cards article:hover{
  transform:translateY(-10px) rotate(0deg);
  background:var(--yellow);
}

.scroll-cards span{
  font-size:3rem;
  margin-bottom:16px;
}

.scroll-cards h2{
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:clamp(2.5rem,4.4vw,4.5rem);
  line-height:.86;
  letter-spacing:-2px;
}

.scroll-cards p{
  margin:0;
  color:#39555f;
  line-height:1.6;
  font-size:1.05rem;
}

/* MANIFEST */

.about-manifest{
  min-height:100vh;
  display:flex;
  align-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,196,0,.25),transparent 26%),
    linear-gradient(180deg,#fffaf0,#fff2d3);
}

.manifest-wrap{
  position:relative;
  z-index:2;
}

.manifest-word{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-display);
  font-size:19vw;
  line-height:.75;
  color:rgba(5,43,57,.055);
  font-weight:900;
  z-index:-1;
  white-space:nowrap;
  animation:manifestPulse 5s ease-in-out infinite;
}

.about-manifest h2{
  margin:0 auto;
  max-width:980px;
  font-family:var(--font-display);
  font-size:clamp(4rem,8vw,8.5rem);
  line-height:.8;
  letter-spacing:-4px;
  color:var(--blue-dark);
}

.about-manifest h2 span{
  display:block;
  color:var(--yellow-dark);
}

.about-manifest p{
  max-width:720px;
  margin:28px auto 0;
  color:#39555f;
  line-height:1.65;
  font-size:1.12rem;
}

/* ACTION */

.about-action-zone{
  padding:96px 0;
  background:var(--paper);
}

.action-head{
  text-align:center;
  margin-bottom:42px;
}

.action-head span{
  display:inline-flex;
  background:var(--yellow);
  color:var(--blue-dark);
  border:4px solid var(--blue-dark);
  box-shadow:5px 5px 0 var(--blue-dark);
  border-radius:999px;
  padding:10px 22px;
  font-family:var(--font-display);
  font-weight:900;
}

.action-head h2{
  max-width:900px;
  margin:24px auto 0;
  font-family:var(--font-display);
  font-size:clamp(3rem,6vw,6.2rem);
  line-height:.84;
  color:var(--blue-dark);
  letter-spacing:-3px;
}

.action-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.action-grid a{
  min-height:230px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#fff;
  border:4px solid var(--blue-dark);
  border-radius:34px;
  box-shadow:10px 10px 0 rgba(5,43,57,.16);
  transition:.25s ease;
}

.action-grid a:hover{
  transform:translateY(-10px) rotate(-1deg);
  background:var(--yellow);
}

.action-grid span{
  font-size:3.3rem;
  margin-bottom:14px;
}

.action-grid strong{
  font-family:var(--font-display);
  font-size:2rem;
  line-height:.9;
  color:var(--blue-dark);
}

.action-grid small{
  margin-top:9px;
  color:#39555f;
  font-weight:900;
}

/* ANIMATIONS */

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

@keyframes emojiFloat{
  0%,100%{transform:translateY(0) rotate(-8deg)}
  50%{transform:translateY(-16px) rotate(8deg)}
}

@keyframes bgDrift{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-28px)}
}

@keyframes manifestPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.04)}
}

/* RESPONSIVE */

@media(max-width:1100px){
  .about-video-wrap,
  .scroll-show-wrap{
    grid-template-columns:1fr;
  }

  .about-video-hero,
  .about-manifest{
    min-height:auto;
  }

  .scroll-video-pin{
    position:relative;
    top:auto;
  }

  .action-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:720px){
  .about-video-hero,
  .about-scroll-show,
  .about-manifest,
  .about-action-zone{
    padding:56px 0;
  }

  .about-video-copy h1{
    font-size:3.6rem;
    letter-spacing:-2px;
  }

  .about-video-stage{
    min-height:auto;
    padding:16px;
    border-radius:30px;
    transform:none;
    box-shadow:10px 10px 0 var(--yellow);
  }

  .orbit,
  .video-sticker,
  .about-video-stage::after{
    display:none;
  }

  .mini-phone-frame{
    min-height:auto;
    padding:14px;
    border-radius:30px;
  }

  .scroll-cards article{
    min-height:220px;
    padding:26px;
  }

  .about-manifest h2{
    font-size:3.7rem;
    letter-spacing:-2px;
  }

  .manifest-word{
    font-size:24vw;
  }
}