/* Instagram'da Biz - Kapak Görünen Reels Sayfası */

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

.ig-bg-word{
  position:absolute;
  right:-6vw;
  bottom:2vh;
  font-family:var(--font-display);
  font-size:17vw;
  font-weight:900;
  line-height:.72;
  color:rgba(5,43,57,.055);
  white-space:nowrap;
  animation:igDrift 8s ease-in-out infinite;
}

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

.ig-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);
}

.ig-copy h1{
  margin:30px 0 20px;
  font-family:var(--font-display);
  font-size:clamp(4rem,7.5vw,8rem);
  line-height:.8;
  letter-spacing:-4px;
  color:var(--blue-dark);
}

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

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

.featured-reel{
  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);
  transform:rotate(1deg);
  overflow:hidden;
}

.featured-reel::before{
  content:"MİÇO";
  position:absolute;
  left:-5%;
  top:8%;
  font-family:var(--font-display);
  font-size:9vw;
  line-height:.75;
  font-weight:900;
  color:rgba(255,255,255,.05);
}

.featured-reel .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;
}

.featured-badge{
  position:absolute;
  left:30px;
  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);
  border-radius:999px;
  padding:13px 22px;
  font-family:var(--font-display);
  font-weight:900;
  transform:rotate(-6deg);
}

.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:700px;height:700px;animation-duration:28s;animation-direction:reverse}

.reel-marquee{
  height:58px;
  display:flex;
  align-items:center;
  background:var(--yellow);
  border-top:4px solid var(--blue-dark);
  border-bottom:4px solid var(--blue-dark);
  overflow:hidden;
}

.reel-marquee-track{
  display:inline-flex;
  gap:28px;
  white-space:nowrap;
  animation:reelMarquee 22s linear infinite;
}

.reel-marquee span,
.reel-marquee b{
  font-family:var(--font-display);
  font-weight:900;
  color:var(--blue-dark);
}

/* Reels Wall - Instagram gerçek kapakları */

.reel-wall-section{
  padding:96px 0;
  background:var(--paper);
  overflow:hidden;
}

.reel-wall-live{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  align-items:start;
}

.reel-embed-card{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--blue-dark);
  border:4px solid var(--blue-dark);
  border-radius:34px;
  padding:16px;
  box-shadow:10px 10px 0 rgba(5,43,57,.16);
  overflow:hidden;
  transform:rotate(var(--r,0deg));
  transition:.25s ease;
}

.reel-embed-card:nth-child(1){--r:-1.2deg}
.reel-embed-card:nth-child(2){--r:1deg;margin-top:48px}
.reel-embed-card:nth-child(3){--r:-.8deg}
.reel-embed-card:nth-child(4){--r:1.3deg;margin-top:74px}

.reel-embed-card:hover{
  transform:translateY(-10px) rotate(0deg);
  box-shadow:14px 16px 0 rgba(5,43,57,.22);
}

.reel-embed-card::before{
  content:"";
  position:absolute;
  inset:14px;
  border:3px solid rgba(255,255,255,.88);
  border-radius:26px;
  pointer-events:none;
  z-index:1;
}

.reel-card-label{
  position:absolute;
  right:22px;
  top:22px;
  z-index:5;
  background:var(--yellow);
  color:var(--blue-dark);
  border:3px solid #fff;
  border-radius:999px;
  padding:8px 14px;
  font-family:var(--font-display);
  font-weight:900;
}

.reel-embed-card .instagram-media{
  width:100%!important;
  min-width:0!important;
  max-width:390px!important;
  margin:auto!important;
  border-radius:24px!important;
  overflow:hidden!important;
  z-index:2;
}

/* Final */

.ig-final{
  padding:100px 0;
  text-align:center;
  background:
    radial-gradient(circle at 50% 30%,rgba(255,196,0,.24),transparent 24%),
    linear-gradient(180deg,#fffaf0,#fff2d3);
}

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

.ig-final h2{
  max-width:950px;
  margin:24px auto 12px;
  font-family:var(--font-display);
  font-size:clamp(3.5rem,7vw,7rem);
  line-height:.82;
  color:var(--blue-dark);
  letter-spacing:-3px;
}

.ig-final p{
  max-width:650px;
  margin:0 auto 28px;
  color:#39555f;
  line-height:1.65;
}

/* Animations */

@keyframes orbitSpin{to{transform:rotate(360deg)}}
@keyframes igDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(-28px)}}
@keyframes reelMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Responsive */

@media(max-width:1200px){
  .reel-wall-live{
    grid-template-columns:repeat(2,1fr);
  }

  .reel-embed-card:nth-child(n){
    margin-top:0;
  }
}

@media(max-width:1100px){
  .ig-hero-wrap{
    grid-template-columns:1fr;
  }

  .ig-hero{
    min-height:auto;
  }
}

@media(max-width:720px){
  .ig-hero,
  .reel-wall-section,
  .ig-final{
    padding:56px 0;
  }

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

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

  .orbit,
  .featured-badge{
    display:none;
  }

  .reel-wall-live{
    grid-template-columns:1fr;
  }

  .reel-embed-card{
    min-height:auto;
    transform:none;
    padding:14px;
  }

  .reel-embed-card::before{
    display:none;
  }

  .ig-final h2{
    font-size:3.6rem;
  }
}