/** Shopify CDN: Minification failed

Line 165:0 Unexpected "}"
Line 167:2 Unexpected "0%"
Line 168:2 Unexpected "20%"
Line 169:2 Unexpected "40%"
Line 170:2 Unexpected "60%"
Line 171:2 Unexpected "80%"

**/
.apShape{ background: var(--bg); color: var(--ink); }

/* Glass tuning */
.apShape{
  --glass-blur: 4px;
  --glass-bg: rgba(255,255,255,0.22);
  --glass-border: rgba(255,255,255,0.28);
  --glass-shadow: 0 20px 60px rgba(0,0,0,0.10);
}

.apShape__pad{ padding: 12px; }
@media (min-width: 640px){ .apShape__pad{ padding: 24px; } }
@media (min-width: 1280px){ .apShape__pad{ padding: 40px; } }

.apShape__wrap{
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

/* IMPORTANT: videoCard MUST stay in flow to preserve height (aspect-ratio) */
.apShape__videoCard{
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #e9e9e9;
  aspect-ratio: 9 / 16;
}
@media (min-width: 768px){ .apShape__videoCard{ aspect-ratio: 1 / 1; } }
@media (min-width: 1024px){ .apShape__videoCard{ aspect-ratio: 16 / 9; border-radius: 32px; } }

.apShape__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Optional: make text pop a bit on bright videos (no layout impact) */
.apShape__videoCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(0,0,0,.12), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.10));
}

/* Left overlay (KEEP ABSOLUTE!) */
.apShape__left{
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
@media (min-width: 1024px){
  .apShape__left{ left: 80px; top: 24px; gap: 16px; }
}

/* =========================
   GLASS MIXIN (cards)
   ========================= */

.apShape__hello,
.apShape__headlineCard,
.apShape__ctaRow,
.apShape__hear{
  position: relative;
  overflow: hidden;
  isolation: isolate; /* pseudo layers clean */

  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);

  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
}

/* fallback if no backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .apShape__hello,
  .apShape__headlineCard,
  .apShape__ctaRow,
  .apShape__hear{
    background: rgba(255,255,255,0.78);
  }
}

/* specular highlight */
.apShape__hello::before,
.apShape__headlineCard::before,
.apShape__ctaRow::before,
.apShape__hear::before{
  content:"";
  position:absolute;
  inset:-60% -60%;
  pointer-events:none;
  opacity:.55;
  transform: rotate(12deg);
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255,255,255,.26) 50%,
    transparent 58%
  );
  mix-blend-mode: screen;
  z-index: 0;
}

/* light grain */
.apShape__hello::after,
.apShape__headlineCard::after,
.apShape__ctaRow::after,
.apShape__hear::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: overlay;
  z-index: 0;
}

/* keep actual content above overlays */
.apShape__hello > *,
.apShape__headlineCard > *,
.apShape__ctaRow > *,
.apShape__hear > *{
  position: relative;
  z-index: 1;
}

/* =========================
   Hello badge (shape + wave)
   ========================= */
.apShape__hello{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
}

.apShape__dot{ width: 8px; height: 8px; border-radius: 999px; background: #F6EEE3; }
.apShape__helloText{ font-weight: 600; opacity: .9; color: #F6EEE3; }


}
@keyframes apWave{
  0%,100%{ transform: rotate(0deg); }
  20%{ transform: rotate(14deg); }
  40%{ transform: rotate(-8deg); }
  60%{ transform: rotate(12deg); }
  80%{ transform: rotate(-4deg); }
}

/* =========================
   Headline card
   ========================= */
.apShape__headlineCard{
  border-radius: 26px;
  padding: 18px 18px;
}

.apShape__h1{
  margin: 0;
  line-height: .92;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #F6EEE3;
  font-size: clamp(28px, 3.6vw, 72px);
}

/* =========================
   CTA row
   ========================= */
.apShape__ctaRow{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 22px;
  padding: 10px 12px;
}

/* Buttons */
.apShape__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  padding: 10px 14px;
  border: 1px solid transparent;
  transition: transform .15s ease;
}
.apShape__btn:hover{ transform: translateY(-1px); }

.apShape__btn--primary{
  background: rgb(40, 40, 40);
  color: #fff;
}
.apShape__btn--ghost{
  background: rgba(255,255,255,0.12);
  color: rgb(14, 14, 14);
  border-color: rgba(0,0,0,0.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
.apShape__btnIcon{
  display:inline-flex;
  width: 22px; height: 22px;
  align-items:center;
  justify-content:center;
}

/* =========================
   Hear sticky button
   ========================= */
.apShape__hear{
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.apShape__hearAvatar{
  width: 56px; height: 56px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  background: rgb(16, 16, 16);
  flex: 0 0 auto;
}
.apShape__hearAvatar img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
}
.apShape__play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.25));
}

.apShape__hearText{
  display:flex;
  flex-direction: column;
  text-align:left;
  line-height:1.05;
}
.apShape__hearTitle{ font-weight: 800; color: rgb(16, 16, 16); }
.apShape__hearSub{ font-weight: 400; color: rgba(14, 14, 14, 0.55); }
.apShape__hearArrow{ font-weight: 800; color: rgb(16, 16, 16); }

@media (max-width: 768px){
  .apShape__left{ left: 14px; top: 14px; right: 14px; }
  .apShape__hear{ left: 14px; right: 14px; justify-content: flex-start; }
}

/* =========================
   Modal
   ========================= */
.apShape__modal[hidden]{ display:none; }
.apShape__modal{ position: fixed; inset:0; z-index: 9999; }
.apShape__modalBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,0.55); }
.apShape__modalPanel{
  position: relative;
  width: min(980px, 92vw);
  margin: 10vh auto 0 auto;
  background: #111;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 120px rgba(255, 255, 255, 0.55);
}
.apShape__modalClose{
  position:absolute; top: 10px; right: 10px;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color:#fff;
  cursor:pointer;
}
.apShape__modalVideo{ width:100%; height:auto; display:block; background:#000; }
.apShape__modalEmpty{ padding: 26px; color: rgba(255,255,255,0.85); }
/* =========================================
   AP SHAPE — GLASS CTA BUTTONS (both)
   ========================================= */

/* Base glass button */
.apShape__btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px;

  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);

  box-shadow:
    0 18px 55px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.10) inset;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease,
    background-color .16s ease,
    border-color .16s ease;
}

/* Specular highlight */
.apShape__btn::before{
  content:"";
  position:absolute;
  inset:-60% -60%;
  pointer-events:none;
  opacity:.0;
  transform: rotate(12deg) translateX(-10%);
  background: linear-gradient(
    115deg,
    transparent 42%,
    rgba(255,255,255,.28) 50%,
    transparent 58%
  );
  mix-blend-mode: screen;
  transition: opacity .18s ease, transform .55s ease;
  z-index: 0;
}

/* Subtle inner edge */
.apShape__btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  opacity:.9;
  background: radial-gradient(900px 240px at 25% 0%, rgba(255,255,255,.18), transparent 55%);
  mix-blend-mode: overlay;
  z-index: 0;
}

/* keep content above */
.apShape__btn > *{ position: relative; z-index: 1; }

/* Hover */
.apShape__btn:hover{
  transform: translateY(-1px) scale(1.02);
  filter: saturate(1.06) brightness(1.05);
  box-shadow:
    0 26px 70px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 34px rgba(255,255,255,.10);
}
.apShape__btn:hover::before{
  opacity:.65;
  transform: rotate(12deg) translateX(18%);
}

/* Focus (accessibility) */
.apShape__btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.35),
    0 0 0 6px rgba(255,255,255,.14),
    0 26px 70px rgba(0,0,0,.28);
}

/* ----- Dark glass (left button) ----- */
.apShape__btn--primary{
  background: rgba(20,20,20,.28) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.18) !important;
}
.apShape__btn--primary:hover{
  background: rgba(20,20,20,.34) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 48px rgba(255,255,255,.08);
}

/* ----- Light glass (right button) ----- */
.apShape__btn--ghost{
  background: #F6EEE3 !important;
  color: #3C3030 !important;
  border-color: #F6EEE3 !important;
}
.apShape__btn--ghost:hover{
  background:#F6EEE3 !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .apShape__btn, .apShape__btn::before{ transition: none !important; }
}
/* =========================================
   TEXT FX — Headline Gradient + Glow
   ========================================= */

.apShape__headlineCard .apShape__h1{
  /* gradient text */
  background: linear-gradient(135deg,
    #F6EEE3,
    #F6EEE3,
    #F6EEE3
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* readability + premium glow */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 50px rgba(0,0,0,.18);
}
/* =========================================
   TEXT FX — Shimmer on hover
   ========================================= */

.apShape__headlineCard{
  position: relative;
}

.apShape__headlineCard .apShape__h1{
  position: relative;
  display: inline-block;
}

/* shimmer layer */
.apShape__headlineCard .apShape__h1::after{
  content:"";
  position:absolute;
  inset:-30% -60%;
  pointer-events:none;
  opacity: 0;
  transform: translateX(-55%) skewX(-18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.35),
    transparent
  );
  mix-blend-mode: screen;
  transition: opacity .18s ease, transform .75s ease;
}

/* trigger */
.apShape__headlineCard:hover .apShape__h1::after{
  opacity: .65;
  transform: translateX(55%) skewX(-18deg);
}

/* =========================================
   FULL SCREEN HERO — NO PADDING / NO RADIUS
   ========================================= */

.apShape__pad {
  padding: 0 !important;
}

.apShape__wrap {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

.apShape__videoCard {
  border-radius: 0 !important;
  width: 100% !important;
  min-height: calc(100vh - 0px);
  aspect-ratio: auto !important;
  overflow: hidden;
}

.apShape__video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Desktop */
@media (min-width: 1024px) {
  .apShape__videoCard {
    height: calc(100vh - 0px);
    min-height: 720px;
  }

  .apShape__left {
    left: 72px !important;
    top: 72px !important;
  }
}

/* Tablet */
@media (max-width: 1023px) {
  .apShape__videoCard {
    height: 100vh;
    min-height: 680px;
  }

  .apShape__left {
    left: 32px !important;
    top: 32px !important;
    right: 32px !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .apShape__videoCard {
    height: 100svh;
    min-height: 620px;
  }

  .apShape__left {
    left: 18px !important;
    top: 18px !important;
    right: 18px !important;
  }

  .apShape__headlineCard {
    border-radius: 22px;
    padding: 16px;
  }

  .apShape__h1 {
    font-size: clamp(34px, 12vw, 52px);
    line-height: .92;
  }
}

/* Hero üst kartları header'dan biraz aşağı indir */
@media (min-width: 1024px) {
  .apShape__left {
    top: 120px !important;
  }
}

@media (max-width: 1023px) {
  .apShape__left {
    top: 96px !important;
  }
}

@media (max-width: 768px) {
  .apShape__left {
    top: 64px !important;
  }
}



@media (max-width: 768px) {
  .apShape__left {
    top: auto !important;
    bottom: 50px !important;
    left: 18px !important;
    right: 18px !important;
    gap: 9px !important;
  }

  .apShape__hello {
    padding: 7px 11px !important;
    gap: 7px !important;
  }

  .apShape__helloText {
    font-size: 13px !important;
    line-height: 1.1 !important;
  }

  .apShape__dot {
    width: 6px !important;
    height: 6px !important;
  }

  .apShape__headlineCard {
    display: block !important;
    width: fit-content !important;
    max-width: 82vw !important;
    padding: 11px 12px !important;
    border-radius: 18px !important;
  }

  .apShape__h1 {
    font-size: clamp(24px, 8.2vw, 36px) !important;
    line-height: .92 !important;
    letter-spacing: -0.04em !important;
  }

  .apShape__ctaRow {
    padding: 7px 8px !important;
    gap: 7px !important;
    border-radius: 17px !important;
    width: fit-content !important;
  }

  .apShape__btn {
    padding: 7px 10px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    gap: 6px !important;
  }

  .apShape__btnIcon {
    width: 17px !important;
    height: 17px !important;
  }
}