/* ============================================================
   EmirhanY — DEMO v3 MOBİL deneyim (≤820px'te yüklenir)
   Uygulama hissi: telefon çerçevesi, alt sekme çubuğu,
   kaydırmalı kart galerileri, dokunma dalgaları.
   Masaüstü bu dosyayı hiç görmez.
   ============================================================ */

body { font-size: 16px; }

/* ── Üst bar: app gibi — kaydırınca gizlenir ──────────────── */
.nav {
  transition: transform .38s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease;
  background: rgba(10, 6, 20, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav.hide { transform: translateY(-110%); }
.nav-links, .nav-toggle { display: none !important; }
.m-cta { display: inline-flex; }

/* ── Hero: tam ekran hikâye ───────────────────────────────── */
.hero {
  padding: calc(var(--nav-h) + 30px) 0 110px;
  min-height: 100svh;
}
.hero-inner { grid-template-columns: 1fr; gap: 0; }
.hero h1 { font-size: clamp(1.9rem, 9vw, 2.5rem); line-height: 1.22; }
.hero-sub { font-size: 1.02rem; }
.hero-actions { gap: .7rem; }
.hero-actions .btn { flex: 1 1 100%; justify-content: center; }
.hero-points { gap: .8rem; flex-direction: column; align-items: flex-start; }
.hero-points span { font-size: .88rem; }

/* hero-copy paralaksı JS'ten gelir */
.hero-copy { will-change: transform, opacity; }

/* ── Tarayıcı → TELEFON çerçevesine dönüşür ───────────────── */
.hero-visual { margin-top: 2.6rem; }
.tiltbox {
  max-width: 290px;
  margin: 0 auto;
  animation: phoneFloat 6.5s ease-in-out infinite;
}
@keyframes phoneFloat { 50% { transform: translateY(-10px) rotate(-1.4deg); } }
.tiltbox::before {
  content: '';
  position: absolute; inset: -14% -20%;
  background: radial-gradient(circle, rgba(139, 92, 246, .3), rgba(232, 121, 249, .12) 45%, transparent 70%);
  filter: blur(22px);
  z-index: -1;
  animation: phoneGlow 4s ease-in-out infinite;
}
@keyframes phoneGlow { 50% { opacity: .55; transform: scale(1.06); } }

.browser {
  border-radius: 42px;
  border: 7px solid #221740;
  box-shadow:
    0 32px 70px -22px rgba(0, 0, 0, .85),
    0 0 60px -12px rgba(139, 92, 246, .55),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* pencere noktaları gider, çentik + adres hapı gelir */
.b-bar { flex-direction: column; gap: .55rem; padding: .6rem .9rem .7rem; }
.b-bar > i { display: none; }
.b-bar::before {
  content: '';
  width: 86px; height: 22px;
  border-radius: 999px;
  background: #07040F;
  border: 1px solid rgba(255, 255, 255, .09);
}
.b-url { width: 100%; margin: 0; justify-content: center; }
.b-body { padding: 1rem; gap: .7rem; }
.bw-hero { height: 116px; padding: .9rem 1rem; }
.bw-btn { width: 88px; height: 26px; margin-top: .8rem; }
.bw-cursor { left: 70px; top: 88px; width: 20px; height: 20px; }
.bw-cards { gap: .6rem; }
.bw-card { height: 52px; }
.bw-card::before { width: 15px; height: 15px; top: 9px; }
.bw-card::after { bottom: 9px; height: 6px; }
.bw-toast { font-size: .74rem; padding: .42rem .85rem; right: 10px; bottom: 10px; }
.chip { font-size: .77rem; padding: .5rem .9rem; }
.chip1 { top: -12px; right: -8px; }
.chip2 { bottom: -12px; left: -8px; }

.scroll-cue { display: none; }

/* ── Kayan bant ───────────────────────────────────────────── */
.marquee { padding: .85rem 0; transform: rotate(-1.4deg) scale(1.03); }
.marquee-track span { font-size: .82rem; }

/* ── Canlı hız kanıtı şeridi ──────────────────────────────── */
.stats { padding: 58px 0 0; }

/* ── Bölümler ─────────────────────────────────────────────── */
.section { padding: 72px 0; }
.sec-head { margin-bottom: 2.4rem; }
.sec-title { font-size: clamp(1.55rem, 7.6vw, 2.1rem); }
.kicker { font-size: .74rem; }

/* ── Kart galerileri: yana kaydırmalı (snap) ──────────────── */
.grid-3, .pricing {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: .95rem;
  margin-inline: -4vw;          /* .wrap oluğunu taşır, tam genişlik */
  padding: .6rem 4vw 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.grid-3::-webkit-scrollbar, .pricing::-webkit-scrollbar { display: none; }
.grid-3 > *, .pricing > * {
  flex: 0 0 80%;
  scroll-snap-align: center;
  will-change: transform;
}
.pricing > * { flex: 0 0 85%; }
/* galeri kartlarında reveal beklemesi olmaz — kaydırınca hep görünür */
.grid-3 .reveal, .pricing .reveal { opacity: 1; transform: none; transition: none; }
.p-wrap:hover { transform: none; }

.s-card { padding: 1.7rem 1.5rem; }
.s-card h3 { font-size: 1.08rem; }
.p-card { padding: 2rem 1.5rem; }
.p-price b { font-size: 1.75rem; }

/* galeri noktaları */
.car-dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin: .9rem 0 .2rem;
}
.car-dots i {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: rgba(124, 58, 237, .25);
  transition: width .3s cubic-bezier(.16,1,.3,1), background .3s ease;
}
.car-dots i.on { width: 24px; background: var(--grad); }

/* kaydırma ipucu */
.grid-3 + .car-dots::after, .pricing + .car-dots::after {
  content: 'kaydır';
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(124, 58, 237, .5);
  margin-left: .6rem;
  align-self: center;
}

/* ── Güvence slabı ────────────────────────────────────────── */
.slab { padding: 86px 0; }
.slab-title { font-size: clamp(1.5rem, 7.8vw, 2.1rem); }
.slab-inner > p { font-size: 1rem; }
.slab-chips { flex-direction: column; align-items: stretch; max-width: 21rem; margin-inline: auto; }
.slab-chips span { justify-content: center; }

/* ── Süreç ────────────────────────────────────────────────── */
.timeline { gap: 1.5rem; }
.tl-card { padding: 1.25rem 1.3rem; }
.tl-card h3 { font-size: 1rem; padding-right: 4.4rem; }
.tl-card p { font-size: .9rem; }
.tl-free { top: 1.15rem; right: 1.1rem; }

/* ── SSS ──────────────────────────────────────────────────── */
.faq-q { font-size: .95rem; padding: 1.05rem 1.2rem; }

/* ── Final CTA ────────────────────────────────────────────── */
.finale { padding: 100px 0 130px; }
.finale .sec-title { font-size: clamp(1.9rem, 9.5vw, 2.7rem); }
.finale-actions .btn { flex: 1 1 100%; justify-content: center; }

/* ── Footer: tabbar payı ──────────────────────────────────── */
.footer { padding-bottom: calc(1.6rem + 96px + env(safe-area-inset-bottom)); }
.footer-inner { flex-direction: column; text-align: center; gap: .6rem; }

/* ── Alt sekme çubuğu (app tab bar) ───────────────────────── */
.tabbar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 150;
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  align-items: center;
  background: rgba(13, 8, 27, .85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--stroke-hi);
  border-radius: 26px;
  padding: .55rem .5rem;
  box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .75), 0 0 40px -18px rgba(139, 92, 246, .5);
  animation: tabbarIn .8s cubic-bezier(.16,1,.3,1) .6s backwards;
}
@keyframes tabbarIn { from { transform: translateY(120%); opacity: 0; } }
.tab {
  display: grid;
  justify-items: center;
  gap: .18rem;
  color: var(--mut-d);
  font-size: .62rem; font-weight: 700;
  letter-spacing: .02em;
  padding: .15rem 0;
  position: relative;
  transition: color .25s ease;
}
.tab svg { width: 21px; height: 21px; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.tab.active { color: #fff; }
.tab.active svg { transform: translateY(-2px) scale(1.12); stroke: var(--fuch); }
.tab.active::after {
  content: '';
  position: absolute; top: -9px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 3px;
  border-radius: 3px;
  background: var(--grad);
  box-shadow: 0 0 10px rgba(232, 121, 249, .8);
}
.tab-fab {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--grad);
  background-size: 160% 100%;
  display: grid; place-items: center;
  color: #0A0614;
  margin: -28px .35rem 0;
  border: 4px solid var(--void);
  box-shadow: 0 14px 34px -8px rgba(232, 121, 249, .7);
  animation: gradShift 5s ease-in-out infinite, fabPulse 2.6s ease-in-out infinite;
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 14px 34px -8px rgba(232, 121, 249, .7), 0 0 0 0 rgba(232, 121, 249, .45); }
  55%      { box-shadow: 0 14px 34px -8px rgba(232, 121, 249, .7), 0 0 0 14px rgba(232, 121, 249, 0); }
}

/* ── Dokunma dalgası ──────────────────────────────────────── */
.rippleable { position: relative; overflow: hidden; }
.tap-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 121, 249, .38), transparent 65%);
  transform: scale(0);
  animation: tapRip .6s ease-out forwards;
  pointer-events: none;
}
@keyframes tapRip { to { transform: scale(1); opacity: 0; } }

/* ── Canlı hız kanıtı ─────────────────────────────────────── */
.liveproof { font-size: .85rem; padding: .8rem 1.1rem; border-radius: 20px; line-height: 1.5; }

/* ── Canlı Stüdyo ─────────────────────────────────────────── */
.studio-grid { gap: 2.2rem; }
.studio-input { font-size: 1.05rem; padding: .9rem 1.1rem; }
.sector-pills { gap: .5rem; }
.sector-pills button { font-size: .86rem; padding: .55rem 1rem; }
.studio-cta .btn { width: 100%; justify-content: center; }
.studio-note { text-align: center; }
.ph { width: 250px; }
.studio-chip { right: -4px; bottom: -26px; font-size: .77rem; }
.studio-chip2 { left: -4px; top: -26px; font-size: .77rem; }
.studio-duo { gap: 1.4rem; }
.color-pills .cp { width: 31px; height: 31px; }
.ph-pages { height: 330px; }
.ph-gallery i { height: 64px; }
.ph-map { height: 104px; }

/* ── Fiyat Sihirbazı ──────────────────────────────────────── */
.wiz-stage { padding: 1.8rem 1.3rem 2rem; min-height: 380px; }
.wiz-step { inset: 1.8rem 1.3rem 2rem; }
.wiz-step h3 { font-size: 1.08rem; }
.wiz-opts { grid-template-columns: 1fr; }
.wiz-result .btn { width: 100%; justify-content: center; }

/* ── WhatsApp sohbeti ─────────────────────────────────────── */
.chat-body { min-height: 330px; }
.msg { max-width: 88%; font-size: .88rem; }

/* ── Lead formları ────────────────────────────────────────── */
.lead-form input:not(.hp) { flex: 1 1 100%; min-width: 0; }
.lead-form .btn { flex: 1 1 100%; justify-content: center; }

/* ── Son İşler: yana kaydırmalı galeri ────────────────────── */
.pf-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: .95rem;
  margin-inline: -4vw;
  padding: .6rem 4vw 1rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pf-grid::-webkit-scrollbar { display: none; }
.pf-grid > * { flex: 0 0 80%; scroll-snap-align: center; will-change: transform; }
.pf-grid .reveal { opacity: 1; transform: none; transition: none; }

/* ── Alt sayfalar ─────────────────────────────────────────── */
.pg-hero { padding: calc(var(--nav-h) + 48px) 0 44px; }
.pg-hero p { font-size: .98rem; }
.bk-grid, .eh-grid { grid-template-columns: 1fr; }
.ab-grid, .cf-grid, .cf-iki { grid-template-columns: 1fr; }
.ab-kart { position: static; }
.pg-cta { padding-bottom: 70px; }
.pg-cta .btn { width: 100%; justify-content: center; }

/* ── Erişilebilirlik ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tiltbox, .tiltbox::before, .tabbar, .tab-fab, .ph { animation: none !important; }
}