/* Bölümler: bantlar, kartlar, uyum göstergesi, işletme, slogan, adımlar,
   telefon çarkı, güvenlik kartları, final. */
.section { position: relative; padding: clamp(80px, 10vw, 140px) var(--gutter); }
.section-head { max-width: 1180px; margin: 0 auto 48px; display: grid; gap: 14px; justify-items: start; }
.title {
  font-family: var(--display); font-size: clamp(34px, 5.6vw, 76px); line-height: 1.02;
  /* Katmanlı gölgeyle kalın 3D harf etkisi. */
  text-shadow: 1px 1px 0 var(--fuchsia), 2px 2px 0 var(--fuchsia), 3px 3px 0 var(--fuchsia),
    4px 4px 0 var(--fuchsia), 5px 5px 0 var(--ink), 6px 6px 0 var(--ink);
}
.mega { text-shadow: 2px 2px 0 var(--fuchsia), 4px 4px 0 var(--fuchsia), 6px 6px 0 var(--orange), 8px 8px 0 var(--orange), 10px 10px 0 var(--ink); }

/* ---------- kayan bantlar ---------- */
/* Bantlar eğik durduğu için geniş ekranda uçları kutunun altına/üstüne
   taşıyor. Eskiden kutu overflow:hidden'dı ve bandın alt kenarı kesiliyordu;
   artık dikeyde taşabiliyor, yatay taşmayı html'deki overflow-x: clip tutuyor. */
.bands { position: relative; z-index: 4; padding: clamp(40px, 5vw, 80px) 0; display: grid; }
.band {
  position: relative; margin-left: -5%; width: 110%; border-block: var(--line);
  font-family: var(--display); font-size: clamp(22px, 3.2vw, 36px); white-space: nowrap; padding: 10px 0 6px;
}
.band-a { background: var(--fuchsia); color: var(--cream); transform: rotate(-3deg); }
.band-b { background: var(--amber); color: var(--ink); transform: rotate(2.5deg); margin-top: -8px; }
.bands-low .band-b { transform: rotate(-2deg); margin-top: 0; }
.bands-low .band-a { transform: rotate(3deg); margin-top: -8px; }
.band-track { display: flex; width: max-content; }

/* ---------- 3D kartlar ---------- */
.cards {
  max-width: 1180px; margin: 0 auto; display: grid; gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); perspective: 1100px;
}
.cards-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.card {
  --rx: 0deg; --ry: 0deg;
  position: relative; background: var(--white); border: var(--line); border-radius: 26px;
  padding: 26px; box-shadow: var(--shadow); transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--tilt, 0deg));
  display: grid; gap: 12px; align-content: start;
}
.card:nth-child(odd) { --tilt: -1.2deg; }
.card:nth-child(even) { --tilt: 1.4deg; }
.card:nth-child(3n + 2) { box-shadow: 7px 7px 0 var(--fuchsia); }
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.55), transparent 45%);
  mix-blend-mode: soft-light; opacity: 0; transition: opacity 0.3s;
}
.card:hover::after { opacity: 1; }
.card img { height: 120px; width: auto; justify-self: start; transform: translateZ(70px) rotate(-6deg); }
.card h3 { font-family: var(--display); font-size: 24px; line-height: 1.1; transform: translateZ(45px); }
.card p { font-size: 14.5px; color: var(--brown); transform: translateZ(25px); }

/* ---------- uyum göstergesi ---------- */
.match { background: #FBE3EE; border-block: var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(30px, 6vw, 90px); }
.gauge {
  --p: 0; position: relative; width: clamp(240px, 32vw, 380px); aspect-ratio: 1;
  display: grid; place-items: center; transform-style: preserve-3d;
}
.gauge-ring {
  position: absolute; inset: 0; border-radius: 50%; border: var(--line); box-shadow: var(--shadow);
  background: conic-gradient(var(--fuchsia) calc(var(--p) * 1%), var(--sand) 0);
}
.gauge-ring::after {
  content: ''; position: absolute; inset: 16%; border-radius: 50%; background: var(--cream); border: var(--line);
}
.gauge-num { position: relative; font-family: var(--display); font-size: clamp(60px, 7.5vw, 100px); line-height: 1; color: var(--fuchsia); text-shadow: 4px 4px 0 var(--ink); }
.gauge-num .pct { font-size: 0.5em; vertical-align: 0.7em; margin-right: 4px; }
.gauge-label { position: absolute; bottom: 24%; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.match-copy { max-width: 460px; display: grid; gap: 16px; }
.match-copy p { color: var(--brown); }
.note { font-size: 24px; }

/* ---------- işletmeler (koyu) ---------- */
.business { background: var(--ink); color: var(--cream); border-block: var(--line); }
.title-biz {
  font-family: var(--biz); font-weight: 800; letter-spacing: -0.03em; font-size: clamp(38px, 6vw, 82px);
  text-shadow: 3px 3px 0 var(--fuchsia), 6px 6px 0 var(--orange);
}
.card-dark { background: var(--cream); color: var(--ink); box-shadow: 7px 7px 0 var(--fuchsia); }
.card-dark h3 { font-family: var(--biz); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; }
.num { font-family: var(--biz); font-weight: 800; font-size: 54px; line-height: 1; color: var(--fuchsia); transform: translateZ(80px); }

/* ---------- slogan: arayıp durma, işimiz var! ---------- */
.slogan {
  background: var(--fuchsia); color: var(--cream); text-align: center; overflow: hidden;
  border-block: var(--line); display: grid; justify-items: center; gap: 4px;
  background-image: radial-gradient(circle at 20% 30%, rgba(255, 176, 32, 0.35), transparent 30%),
    radial-gradient(circle at 85% 70%, rgba(255, 106, 26, 0.35), transparent 32%);
}
.slogan-line {
  font-family: var(--display); font-size: clamp(34px, 6vw, 84px); line-height: 1;
  text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--ink);
}
.slogan-big {
  font-family: var(--display); font-size: clamp(56px, 13vw, 190px); line-height: 1; color: var(--amber);
  text-shadow: 3px 3px 0 var(--ink), 6px 6px 0 var(--ink), 9px 9px 0 var(--orange), 12px 12px 0 var(--ink);
}
.slogan-sticker {
  position: absolute; top: 12%; right: 8%; font-size: clamp(60px, 9vw, 120px); rotate: 14deg;
  filter: drop-shadow(5px 5px 0 var(--ink));
}
.slogan-sign {
  margin-top: 18px; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink);
  background: var(--cream); border: var(--line); border-radius: 8px; padding: 8px 16px; box-shadow: 4px 4px 0 var(--ink);
  rotate: -3deg;
}

/* ---------- adımlar ---------- */
.step-list {
  list-style: none; padding: 0; margin: 0 auto; max-width: 1180px; display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); perspective: 1000px;
}
.step { background: var(--white); border: var(--line); border-radius: 26px; padding: 26px; box-shadow: var(--shadow); display: grid; gap: 10px; }
.step:nth-child(2) { background: var(--amber); }
.step:nth-child(3) { background: var(--fuchsia); color: var(--cream); }
.step:nth-child(3) p { color: var(--cream); }
.step:nth-child(3) .step-n { background: var(--amber); color: var(--ink); }
.step:nth-child(4) { background: var(--sand); }
.step-n {
  width: 64px; height: 64px; border-radius: 50%; border: var(--line); display: grid; place-items: center;
  font-family: var(--display); font-size: 30px; background: var(--fuchsia); color: var(--cream); box-shadow: 3px 3px 0 var(--ink);
}
.step h3 { font-family: var(--display); font-size: 24px; line-height: 1.1; }
.step p { font-size: 14.5px; color: var(--brown); }

/* ---------- telefon çarkı ---------- */
.phones-sec { background: linear-gradient(180deg, var(--cream), var(--sand)); overflow: hidden; }
.phones-stage { position: relative; max-width: 1180px; margin: 0 auto; }
#phones3d { width: 100%; height: clamp(440px, 70vh, 720px); display: block; cursor: grab; touch-action: pan-y; }
#phones3d:active { cursor: grabbing; }
.phones-caption {
  position: absolute; left: 50%; bottom: 10px; translate: -50% 0; font-family: var(--display); font-size: 25px;
  background: var(--white); border: var(--line); border-radius: 100px; padding: 6px 22px 2px; box-shadow: 4px 4px 0 var(--ink);
}
.hint-dark { font-size: 26px; transform: rotate(-2deg); }

/* ---------- güvenlik: dönen kartlar ---------- */
.flips {
  max-width: 1180px; margin: 0 auto; display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); perspective: 1000px;
}
.flip { all: unset; cursor: pointer; height: 210px; display: block; }
.flip:focus-visible .flip-inner { outline: 4px solid var(--fuchsia); outline-offset: 4px; }
.flip-inner {
  position: relative; display: block; height: 100%; transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.flip.flipped .flip-inner, .flip:hover .flip-inner { transform: rotateY(180deg) rotateZ(-2deg); }
.flip-front, .flip-back {
  position: absolute; inset: 0; backface-visibility: hidden; border: var(--line); border-radius: 26px;
  box-shadow: var(--shadow); display: grid; place-content: center; gap: 10px; text-align: center; padding: 22px;
}
.flip-front { background: var(--white); font-size: 54px; }
.flip-front b { font-family: var(--display); font-weight: 900; font-size: 22px; line-height: 1.1; }
.flip-back { background: var(--fuchsia); color: var(--cream); transform: rotateY(180deg); font-size: 15px; }

/* ---------- final ---------- */
.final { text-align: center; display: grid; justify-items: center; gap: 22px; overflow: hidden; }
.mega-2 { font-size: clamp(38px, 8.4vw, 112px); margin: 6px 0; }
.stores { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.store {
  display: grid; text-align: left; font-family: var(--display); font-size: 22px; line-height: 1.1;
  background: var(--ink); color: var(--cream); padding: 12px 24px 10px; border-radius: 16px; border: var(--line);
  box-shadow: 5px 5px 0 var(--fuchsia); text-decoration: none;
  /* fx.css floats these with translate/rotate; feedback uses scale so the two don't fight. */
  transition: scale 0.15s, box-shadow 0.15s;
}
.store:hover, .store:focus-visible { scale: 1.06; box-shadow: 7px 7px 0 var(--fuchsia); }
.store:active { scale: 0.96; box-shadow: 2px 2px 0 var(--fuchsia); }
.store small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }