/* WebAction site prototipi · bileşenler. Değerler tokens.css'ten gelir. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } /* 96: sabit üst menü (12 + 64) + boşluk; çapa ve odak menü altında kalmaz */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-text);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: var(--lh-head); letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--wa-mor-10); color: var(--wa-siyah); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.on-dark :focus-visible { outline-color: var(--wa-mor-10); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: var(--s-4); top: -60px; z-index: 100; background: var(--bg); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); }
.skip-link:focus { top: var(--s-4); }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 0 var(--s-5);
  border-radius: var(--r-full); border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: var(--wa-beyaz); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-press); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--text); }
.on-dark .btn-ghost, .btn-glass {
  color: var(--wa-beyaz); border-color: var(--glass-border); background: var(--glass-surface); box-shadow: var(--glass-highlight);
}
.on-dark .btn-ghost:hover, .btn-glass:hover { background: var(--glass-bg-strong); border-color: rgba(255, 255, 255, 0.32); }
.btn-sm { min-height: 40px; padding: 0 var(--s-4); }
.btn-block { width: 100%; }
.btn .arrow { transition: transform var(--d-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
/* Gönderiliyor: düğme kilitli, ok yerine dönen halka (formlar aria-busy verir) */
.btn[aria-busy="true"] { cursor: progress; opacity: 0.88; }
.btn[aria-busy="true"] .arrow { display: none; }
.btn[aria-busy="true"]::after {
  content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"]::after { animation-duration: 2s; } }

.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; font-size: var(--fs-sm); }
.link-arrow:hover { color: var(--accent-hover); }
.link-arrow svg { transition: transform var(--d-fast) var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }

/* ---------- Cam yüzey ----------
   Sayfa içindeki cam yüzeyler arkasını BULANIKLAŞTIRMAZ: backdrop-filter, arkasında maske/ışık katmanı olan
   kutularda Chrome'da kaydırırken yatay çizgi ve titreme yapıyordu (form, paket sekmeleri, kartlar).
   Cam hissi degrade yüzey + ince kenar + üst parlaklıkla verilir. Bulanıklık yalnız içeriğin üstünde
   sabit duran öğelerde: üst menü, mobil alt çubuk, asistan, WhatsApp etiketi (aşağıda). */
.glass {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-highlight);
}
.mobile-bar.glass, .assist.glass, .assist-teaser.glass {
  background: rgba(30, 3, 64, 0.72);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-bar.glass, .assist.glass, .assist-teaser.glass { background: var(--glass-fallback); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .btn-glass, .on-dark .btn-ghost { background: var(--glass-fallback); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Koyu zemin (Mor 90) ---------- */
.on-dark { background: var(--dark-bg); color: var(--dark-text); position: relative; isolation: isolate; }
.on-dark .muted { color: var(--dark-text-2); }
/* Mor 40 ışık lekeleri: camın arkasında derinlik verir */
.glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glow::before, .glow::after {
  content: ""; position: absolute; border-radius: 50%;
}
/* Işık lekeleri filtresiz degradeyle çizilir: filter: blur + üstteki cam (backdrop-filter) Chrome'da kaydırırken çizgi ve titreme yapıyordu */
.glow::before { width: 760px; height: 760px; right: -220px; top: -260px; background: radial-gradient(closest-side, rgba(135, 62, 255, 0.45), rgba(135, 62, 255, 0.2) 50%, transparent); }
.glow::after { width: 620px; height: 620px; left: -260px; bottom: -300px; background: radial-gradient(closest-side, rgba(114, 14, 236, 0.35), rgba(114, 14, 236, 0.15) 50%, transparent); }
.grid-lines {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse at 70% 30%, #000 20%, transparent 70%);
}

/* ---------- Üst menü ---------- */
/* Yüzen cam menü: sayfanın üstünde süzülen hap biçimli çubuk */
.header { position: fixed; inset: 12px 0 auto 0; z-index: 50; pointer-events: none; }
.header-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-6); height: 64px;
  padding: 0 8px 0 24px; border-radius: var(--r-full);
  background: rgba(44, 4, 93, 0.35); border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  transition: background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.logo { display: block; flex: none; width: 150px; }
.logo img { width: 100%; height: auto; }
.logo .logo-dark { display: none; }
.nav { display: flex; gap: var(--s-1); margin-right: auto; align-self: stretch; }
:is(.nav, .nav-root) > a {
  padding: var(--s-2) var(--s-3); border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 500; color: var(--dark-text-2);
  transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
:is(.nav, .nav-root) > a:hover { color: var(--wa-beyaz); background: rgba(255, 255, 255, 0.08); }
.header-cta { display: flex; gap: var(--s-2); }
.header .btn-ghost { color: var(--wa-beyaz); border-color: var(--glass-border); }
.menu-toggle { display: none; }

/* Koyu bölümde aşağı kayınca cam biraz koyulaşır */
.header.is-scrolled .header-inner { background: rgba(44, 4, 93, 0.62); }
/* Açık bölümlerin üstünde: beyaz yüzey, ince kenar ve gölge (beyaz zeminde cam kullanılmaz) */
.header.is-light .header-inner { background: rgba(255, 255, 255, 0.96); border-color: var(--line); box-shadow: var(--shadow-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
.header.is-light .logo-light { display: none; }
.header.is-light .logo-dark { display: block; }
.header.is-light :is(.nav, .nav-root) > a { color: var(--text-2); }
.header.is-light :is(.nav, .nav-root) > a:hover { color: var(--text); background: var(--bg-soft); }
.header.is-light .btn-ghost { color: var(--text); border-color: var(--line-strong); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- Hero ---------- */
/* ---------- Giriş slider'ı ----------
   Slaytlar aynı ızgara hücresinde üst üste durur: yükseklik en uzun slayda göre sabitlenir,
   geçişte sayfa kaymaz. Arka plandaki ışık lekeleri slayt sırasına göre yumuşakça yer değiştirir. */
.hero { padding: calc(88px + var(--s-8)) 0 var(--s-6); overflow: hidden; min-height: min(100svh, 900px); display: flex; flex-direction: column; }
.hero > .container { flex: 1; display: flex; flex-direction: column; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-bg .blob { position: absolute; border-radius: 50%; transition: transform 1.4s var(--ease), opacity 1.4s var(--ease); }
.hero-bg .blob-a { width: 820px; height: 820px; right: -240px; top: -280px; background: radial-gradient(closest-side, rgba(135, 62, 255, 0.5), rgba(135, 62, 255, 0.22) 50%, transparent); transform: translate(calc(var(--i, 0) * -180px), calc(var(--i, 0) * 60px)); }
.hero-bg .blob-b { width: 660px; height: 660px; left: -280px; bottom: -320px; background: radial-gradient(closest-side, rgba(114, 14, 236, 0.4), rgba(114, 14, 236, 0.18) 50%, transparent); transform: translate(calc(var(--i, 0) * 120px), calc(var(--i, 0) * -40px)); }
.hero-bg .blob-c { width: 500px; height: 500px; left: calc(45% - 100px); top: calc(30% - 100px); background: radial-gradient(closest-side, rgba(209, 193, 255, 0.16), rgba(209, 193, 255, 0.07) 50%, transparent); transform: translate(calc(var(--i, 0) * 90px), calc(var(--i, 0) * -30px)); }
@media (prefers-reduced-motion: reduce) { .hero-bg .blob { transition: none; } }

.slides { flex: 1; display: grid; align-items: center; touch-action: pan-y; }
.slide { grid-area: 1 / 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-8); align-items: center; visibility: hidden; pointer-events: none; }
.slide.is-active { visibility: visible; pointer-events: auto; }
/* Yazı katmanı: sırayla içeri akar */
.slide .s-in { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 240ms var(--ease-in), transform 240ms var(--ease-in); }
.slide.is-active .s-in { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(240ms + var(--n, 0) * 60ms); }
/* Görsel katmanı: hafif kayma ve ölçekle gelir */
.slide .s-visual { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.985); transition: opacity 240ms var(--ease-in), transform 240ms var(--ease-in); }
.slide.is-active .s-visual { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out) 180ms, transform 900ms var(--ease-out) 180ms; }
.slide.is-leaving .s-visual { transform: scale(0.985); }
.slide.is-leaving .s-in { transform: translate3d(0, -8px, 0); }
@media (prefers-reduced-motion: no-preference) { .slide.is-leaving { visibility: visible; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) {
  .slide .s-in, .slide .s-visual, .slide.is-active .s-in, .slide.is-active .s-visual { transform: none; transition: opacity 240ms var(--ease-out); transition-delay: 0ms; }
}
.slide-title { font-size: var(--fs-h1); margin-top: var(--s-5); max-width: 17ch; }
p.slide-title { margin-bottom: 0; font-weight: 600; line-height: var(--lh-head); letter-spacing: -0.01em; }
.slide-title .accent { color: var(--wa-mor-10); }

/* Slider kontrolleri: tek cam hap */
.slider-ui { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); }
.seg-list { display: flex; gap: var(--s-1); padding: 6px; border-radius: var(--r-full); }
.seg {
  position: relative; overflow: hidden; border: 0; cursor: pointer; background: transparent;
  padding: 10px 16px 14px; border-radius: var(--r-full); min-width: 128px; text-align: left;
  font-size: var(--fs-xs); font-weight: 500; color: var(--dark-text-2);
  transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
.seg:hover { color: var(--wa-beyaz); }
.seg[aria-selected="true"] { color: var(--wa-beyaz); background: rgba(255, 255, 255, 0.08); }
.seg .seg-no { display: inline-block; margin-right: 6px; color: var(--wa-mor-10); font-variant-numeric: tabular-nums; }
.seg .seg-bar { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.seg .seg-fill { position: absolute; inset: 0; background: var(--wa-mor-10); transform: scaleX(0); transform-origin: left; }
.seg[aria-selected="true"] .seg-fill { animation: seg-fill var(--dur, 7000ms) linear forwards; }
.seg.is-done .seg-fill { transform: scaleX(1); }
.slider.is-paused .seg-fill, .slider.no-autoplay .seg-fill { animation-play-state: paused; }
.slider.no-autoplay .seg[aria-selected="true"] .seg-fill { animation: none; transform: scaleX(1); }
@keyframes seg-fill { to { transform: scaleX(1); } }
.slider-btns { display: flex; gap: var(--s-2); }
.icon-btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--wa-beyaz); border: 1px solid var(--glass-border); background: var(--glass-surface); box-shadow: var(--glass-highlight);
  transition: background-color var(--d-fast) var(--ease), transform var(--d-fast) var(--ease);
}
.icon-btn:hover { background: var(--glass-bg-strong); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn .i-play { display: none; }
.slider.is-user-paused .icon-btn .i-pause, .slider.no-autoplay .icon-btn .i-pause { display: none; }
.slider.is-user-paused .icon-btn .i-play, .slider.no-autoplay .icon-btn .i-play { display: block; }

/* Video slaytı */
.video-frame { position: relative; border-radius: var(--r-lg); padding: 10px; }
.video-frame video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--r-lg) - 8px); background: linear-gradient(135deg, #3a0a78, #1c033d); display: block; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: var(--s-3); padding: 10px 20px 10px 10px; border-radius: var(--r-full);
  color: var(--wa-beyaz); font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
  transition: transform var(--d-base) var(--ease), background-color var(--d-base) var(--ease);
}
.video-play:hover { transform: translate(-50%, -50%) scale(1.04); background: var(--glass-bg-strong); }
.video-play .pp { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(135, 62, 255, 0.25); animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { 50% { box-shadow: 0 0 0 14px rgba(135, 62, 255, 0.08); } }
@media (prefers-reduced-motion: reduce) { .video-play .pp { animation: none; } }
.video-cap { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 10px 14px; border-radius: var(--r-md); font-size: var(--fs-xs); color: var(--dark-text-2); }
.video-cap strong { color: var(--wa-beyaz); font-weight: 500; font-size: var(--fs-sm); display: block; }
.quote { margin-top: var(--s-5); padding-left: var(--s-4); border-left: 2px solid var(--wa-mor-10); color: var(--dark-text-2); font-size: var(--fs-lg); max-width: 32rem; }

/* Tarayıcı çerçevesi (web tasarım slaytı) */
.browser { border-radius: var(--r-lg); overflow: hidden; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--glass-border); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.browser-url { margin-left: var(--s-3); flex: 1; padding: 4px 12px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.06); font-size: 12px; color: var(--dark-text-2); }
.browser-body { padding: var(--s-5); display: grid; gap: var(--s-3); }
.mock-hero { height: 110px; border-radius: var(--r-md); background: linear-gradient(120deg, rgba(135, 62, 255, 0.55), rgba(44, 4, 93, 0.2)); position: relative; }
.mock-hero::after { content: ""; position: absolute; left: 18px; top: 26px; width: 44%; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, 0.85); box-shadow: 0 22px 0 -2px rgba(255, 255, 255, 0.4); }
.mock-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.mock-row span { height: 70px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.08); }
.mock-price { position: absolute; right: -12px; bottom: -18px; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); }
.mock-price span { display: block; font-size: 12px; color: var(--dark-text-2); }
.mock-price strong { font-size: var(--fs-lg); font-weight: 600; }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px 14px 6px 8px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.02em;
}
.eyebrow .dot { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.eyebrow .dot img { width: 12px; }
/* Google partnerliği etiketi: beyaz daire içinde gerçek renkli G */
.eyebrow .dot-google { background: var(--wa-beyaz); box-shadow: 0 0 0 1px rgba(44, 4, 93, 0.08); }
.hero h1 { font-size: var(--fs-h1); margin-top: var(--s-5); max-width: 13ch; }
.hero h1 .accent { color: var(--wa-mor-10); }
.hero .lead { margin-top: var(--s-5); font-size: var(--fs-lg); color: var(--dark-text-2); max-width: 34rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.trust { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-7); color: var(--dark-text-2); font-size: var(--fs-sm); }
.trust-item { display: flex; align-items: center; gap: var(--s-2); }
.trust-item strong { color: var(--wa-beyaz); font-weight: 600; }
/* Dönen platform logoları: tek yuva, logolar aşağıdan yukarı kayar (site.js); beyaz tek renk */
.logo-cycle { position: relative; display: inline-block; width: 92px; height: 30px; margin-left: var(--s-1); padding-left: var(--s-3); border-left: 1px solid rgba(255,255,255,.16); overflow: hidden; vertical-align: middle;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); box-sizing: content-box; }
.logo-cycle-track { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.65,0,.35,1); will-change: transform; }
.logo-cycle-track.is-snap { transition: none; }
.logo-cycle img { display: block; flex: none; box-sizing: border-box; width: 92px; height: 30px; padding: 7px 0; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); opacity: .9; }
@media (prefers-reduced-motion: reduce) {
  .logo-cycle { width: auto; height: auto; -webkit-mask-image: none; mask-image: none; }
  .logo-cycle-track { flex-direction: row; flex-wrap: wrap; gap: var(--s-3); transform: none !important; }
  .logo-cycle img { width: 64px; height: 16px; padding: 0; }
  .logo-cycle img:last-child { display: none; }
}
.stars { color: var(--wa-mor-10); letter-spacing: 1px; }

/* Hero sağ: temsili büyüme paneli */
.panel { position: relative; min-height: 440px; }
.panel-card { position: absolute; border-radius: var(--r-lg); padding: var(--s-5); }
.panel-main { inset: 24px 40px 72px 0; display: flex; flex-direction: column; gap: var(--s-4); }
.panel-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--dark-text-2); }
.panel-tag { padding: 2px 10px; border-radius: var(--r-full); border: 1px solid var(--glass-border); font-size: 11px; }
.panel-title { font-size: var(--fs-sm); font-weight: 500; }
.panel-chart { flex: 1; min-height: 150px; }
.panel-chart path.area { fill: url(#chartFill); }
.panel-chart path.line { fill: none; stroke: var(--wa-mor-10); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; }
.slide.is-active .panel-chart path.line { animation: draw 1.6s var(--ease) 0.5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.panel-rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.panel-kpi { padding: var(--s-3); border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.panel-kpi span { display: block; font-size: 11px; color: var(--dark-text-2); }
.panel-kpi strong { font-size: var(--fs-sm); font-weight: 600; }
.panel-float { right: 0; bottom: 0; width: 250px; display: flex; gap: var(--s-3); align-items: center; }
.panel-float .ic { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--accent); display: grid; place-items: center; }
.panel-float p { font-size: var(--fs-xs); color: var(--dark-text-2); line-height: 1.4; }
.panel-float strong { display: block; color: var(--wa-beyaz); font-size: var(--fs-sm); font-weight: 500; }
.panel-float-top { right: -8px; top: 0; padding: var(--s-3) var(--s-4); font-size: var(--fs-xs); display: flex; gap: var(--s-2); align-items: center; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #7BE0A5; box-shadow: 0 0 0 4px rgba(123, 224, 165, 0.18); }
.panel-note { position: absolute; left: 0; bottom: 20px; font-size: 11px; color: rgba(255, 255, 255, 0.5); }
.float-a { animation: float 7s ease-in-out infinite; }
.float-b { animation: float 8s ease-in-out -3s infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .float-a, .float-b { animation: none; } .panel-chart path.line { stroke-dashoffset: 0; animation: none !important; } }

/* ---------- Referans şeridi ---------- */
.logos { padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
.logos-inner { display: flex; align-items: center; gap: var(--s-6); }
.logos-label { flex: none; font-size: var(--fs-xs); color: var(--text-2); max-width: 150px; line-height: 1.4; }
.marquee { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
/* Kayan şerit: liste iki kez yazılır ve tam yarısı kadar kayar. Aralık gap ile değil her öğenin sağ boşluğuyla verilir,
   böylece iki yarı birebir eşit olur ve döngü başa dönerken zıplamaz. Hız logo sayısından bağımsız sabit kalır (--marquee-dur, bileşen verir).
   GPU katmanında (translate3d) kayar; üzerine gelince yavaşça durmak yerine duraklar. */
.marquee-track { display: flex; align-items: center; width: max-content; animation: marquee var(--marquee-dur, 60s) linear infinite; will-change: transform; backface-visibility: hidden; }
.marquee-track > * { flex: none; margin-right: var(--marquee-gap, var(--s-7)); }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-size: 1.25rem; font-weight: 600; color: #B8B8BE; letter-spacing: 0.02em; white-space: nowrap; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; } }

/* ---------- Bölüm başlıkları ---------- */
.section { padding: var(--s-10) 0; }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 42rem; margin-bottom: var(--s-8); }
.section-head.center { margin-inline: auto; text-align: center; }
.kicker { display: inline-block; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3); }
.on-dark .kicker { color: var(--wa-mor-10); }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { margin-top: var(--s-4); color: var(--text-2); font-size: var(--fs-lg); }
.on-dark .section-head p { color: var(--dark-text-2); }

/* ---------- Hizmet kartları ---------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.service {
  position: relative; display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6); border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line);
  transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: transparent; }
.service-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.service-icon:has(> .brand-ic) { background: var(--wa-beyaz); box-shadow: inset 0 0 0 1px var(--line); }
.service h3 { font-size: var(--fs-h3); }
.service p { color: var(--text-2); font-size: var(--fs-sm); flex: 1; }
.service .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 4px 10px; border-radius: var(--r-full); background: var(--bg-soft); font-size: 12px; font-weight: 500; color: var(--text-2); }
.service .link-arrow::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Rakamlar ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.stat { padding: var(--s-6); border-radius: var(--r-lg); }
.stat strong { display: block; font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); font-weight: 600; line-height: 1; }
.stat span { display: block; margin-top: var(--s-3); color: var(--dark-text-2); font-size: var(--fs-sm); }

/* ---------- Paketler ---------- */
.pkg-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-bottom: var(--s-7); padding: 6px; border-radius: var(--r-full); width: fit-content; margin-inline: auto; }
.pkg-tab {
  border: 0; background: transparent; padding: 10px 18px; border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 500; color: var(--dark-text-2); cursor: pointer;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.pkg-tab:hover { color: var(--wa-beyaz); }
.pkg-tab[aria-selected="true"] { background: var(--wa-beyaz); color: var(--wa-mor-90); }
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: stretch; }
.pkg { display: flex; flex-direction: column; padding: var(--s-6); border-radius: var(--r-lg); background: var(--wa-beyaz); color: var(--text); }
/* Koyu bölümdeki beyaz kart: düğme açık zemin stiline döner */
.on-dark .pkg:not(.featured) .btn-ghost { color: var(--text); border-color: var(--line-strong); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.on-dark .pkg:not(.featured) .btn-ghost:hover { border-color: var(--text); }
.pkg.featured { background: var(--glass-bg-strong); color: var(--wa-beyaz); border: 1px solid rgba(209, 193, 255, 0.4); box-shadow: var(--glass-highlight), 0 24px 60px rgba(0, 0, 0, 0.25); }
.pkg-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); }
.pkg-name { font-size: var(--fs-h3); font-weight: 600; }
.pkg-badge { padding: 4px 10px; border-radius: var(--r-full); background: var(--wa-mor-10); color: var(--wa-mor-90); font-size: 12px; font-weight: 500; }
.pkg-for { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-2); min-height: 3.2em; }
.pkg.featured .pkg-for, .pkg.featured .pkg-price small, .pkg.featured .pkg-renew { color: var(--dark-text-2); }
.pkg-price { margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); min-height: 112px; }
.pkg.featured .pkg-price { border-top-color: var(--dark-line); }
.pkg-price strong { font-size: 2rem; font-weight: 600; letter-spacing: -0.01em; }
.pkg-price small { font-size: var(--fs-sm); color: var(--text-2); margin-left: 4px; }
.pkg-renew { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--text-2); }
.pkg-quote { font-size: var(--fs-lg); font-weight: 600; }
.pkg .btn { margin-top: var(--s-5); }
.pkg-list-title { margin-top: var(--s-6); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.pkg.featured .pkg-list-title { color: var(--wa-mor-10); }
.pkg-list { margin-top: var(--s-3); display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.pkg-list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; }
.pkg-list svg { margin-top: 3px; color: var(--accent); }
.pkg.featured .pkg-list svg { color: var(--wa-mor-10); }
/* Teslim: kalın metin + soluk fayda cümlesi; her madde aynı iki satırlık ritimde */
.pkg-item { display: grid; gap: 2px; min-width: 0; }
.pkg-item-text { font-weight: 500; line-height: 1.4; }
.pkg-item-note { font-size: var(--fs-xs); line-height: 1.45; color: var(--text-2); }
.pkg.featured .pkg-item-note { color: var(--dark-text-2); }
/* Kart tabanı: platform satırı + standart not, kartın dibine yaslı (üç kartta aynı hizada) */
.pkg-bottom { margin-top: auto; padding-top: var(--s-6); display: grid; gap: var(--s-4); }
.pkg-bottom .pkg-std { margin-top: 0; padding-top: 0; }
.pkg-platforms { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pkg.featured .pkg-platforms { border-top-color: var(--dark-line); }
.pkg-platforms-label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.pkg.featured .pkg-platforms-label { color: var(--wa-mor-10); }
.pkg-platforms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pkg-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--wa-beyaz); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(20, 0, 50, 0.05); transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.pkg.featured .pkg-ico { border-color: transparent; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); }
.pkg-ico:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(20, 0, 50, 0.12); }
.pkg-ico img { width: 17px; height: 17px; object-fit: contain; }
.pkg-ico-more { font-size: 12px; font-weight: 600; color: var(--text-2); }
.pkg-std { margin-top: auto; padding-top: var(--s-5); font-size: var(--fs-xs); color: var(--text-2); display: flex; align-items: center; gap: var(--s-2); }
.pkg.featured .pkg-std { color: var(--dark-text-2); }
.pkg-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); color: var(--dark-text-2); font-size: var(--fs-sm); }
.pkg-foot a { color: var(--wa-mor-10); font-weight: 500; }
.draft-note { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: var(--r-full); border: 1px dashed rgba(209, 193, 255, 0.5); font-size: 12px; color: var(--wa-mor-10); }
.pkgs.is-switching .pkg { opacity: 0; transform: translateY(8px); }
.pkgs .pkg { transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease); }

/* ---------- Süreç ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-7) var(--s-5); counter-reset: step; }
.step { position: relative; padding-top: var(--s-5); border-top: 2px solid var(--line); }
.step::before { counter-increment: step; content: "0" counter(step); position: absolute; top: -14px; left: 0; background: var(--bg); padding-right: var(--s-3); font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.step h3 { font-size: var(--fs-lg); }
.step p { margin-top: var(--s-2); color: var(--text-2); font-size: var(--fs-sm); }
.step.is-visible { border-top-color: var(--accent); transition: border-color var(--d-slow) var(--ease) 0.2s; }
.section-soft .step::before { background: var(--bg-soft); }
/* Gri bölümden sonra gelen form kabuğu da gridir; ardından yine gri bölüm gelirse (ör. /kampanyalar/ iş ortaklığı bandı)
   kabuğun alt boşluğu yeter, ritim 128/96 kalır. Zemin değişiyorsa (beyaz kabuk → gri bant) tam boşluk korunur. */
.section-soft + .cta-shell + .section-soft { padding-top: var(--s-6); }
/* 3 adım tablette de tek sırada (2+1 kırılmasın) */
@media (min-width: 721px) and (max-width: 1080px) { .steps[data-count="3"] { grid-template-columns: repeat(3, 1fr); } }
.on-dark .step::before { background: var(--dark-bg); }
/* 3 ya da 6 adım: 3 sütun (6 adım 4 sütunda ikinci satırı yarım bırakıyordu) */
@media (min-width: 1081px) { .steps[data-count="3"], .steps[data-count="6"] { grid-template-columns: repeat(3, 1fr); } }
/* 2 kartlık hizmet satırı: üçüncü sütun boş kalmasın */
@media (min-width: 1081px) { .services:has(> .service:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); } }
/* Tireli sözcük (e-ticaret) satır sonunda bölünmesin */
.nobr { white-space: nowrap; }

/* ---------- GEO ---------- */
.geo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; }
.geo-list { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.geo-list li { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-3); color: var(--dark-text-2); }
.geo-list strong { color: var(--wa-beyaz); font-weight: 500; }
.chat { border-radius: var(--r-lg); padding: var(--s-5); display: grid; gap: var(--s-4); }
.chat-q { justify-self: end; max-width: 80%; padding: var(--s-3) var(--s-4); border-radius: 18px 18px 4px 18px; background: var(--wa-beyaz); color: var(--wa-mor-90); font-size: var(--fs-sm); }
.chat-a { max-width: 92%; padding: var(--s-4); border-radius: 18px 18px 18px 4px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--dark-line); font-size: var(--fs-sm); color: var(--dark-text-2); }
.chat-a strong { color: var(--wa-beyaz); font-weight: 500; }
.cite { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s-3); padding: 4px 10px 4px 6px; border-radius: var(--r-full); background: rgba(135, 62, 255, 0.25); color: var(--wa-beyaz); font-size: 12px; }
.cite img { width: 16px; }
.typing { display: inline-flex; gap: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dark-text-2); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: 0.2s; } .typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- Vakalar ---------- */

/* ---------- SSS ---------- */
.faq { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; font-weight: 500; font-size: var(--fs-lg); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { position: relative; flex: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; border: 1px solid var(--line-strong); font-size: 0; color: var(--text); transition: background-color var(--d-base) var(--ease), border-color var(--d-base) var(--ease), color var(--d-base) var(--ease); }
/* Artı/eksi çizimle: yazı karakteri dairede ortalanmıyordu. Açıkken dikey çizgi kapanır, eksi kalır. */
.faq summary .plus::before, .faq summary .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--d-base) var(--ease); }
.faq summary .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary .plus { background: var(--accent); border-color: var(--accent); color: var(--wa-beyaz); }
.faq details[open] summary .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq summary:hover .plus { border-color: var(--accent); }
.faq .answer { padding: 0 var(--s-8) var(--s-5) 0; color: var(--text-2); }

/* ---------- Kapanış CTA + form ---------- */
.cta { padding: var(--s-10) 0; overflow: hidden; }
/* Kapanış formu açık kabuk içinde koyu kart: sayfanın sonunda koyu alt bilgiyle üst üste binmez, arada açık zemin kalır.
   Kabuk, önceki bölüm gri ise gri olur (kartın iki yanı üstteki bölümle aynı renkte akar). */
.cta-shell { padding: 0 var(--gutter) var(--s-9); }
.section-soft + .cta-shell { background: var(--bg-soft); }
/* Aynı tonda iki gri bölüm yan yana gelirse (ör. blog yazısında ilgili yazılar + e-kitap şeridi) ince ayırıcı çizgi */
.section-soft + .section-soft { border-top: 1px solid var(--line); }
.cta-shell > .cta { max-width: calc(var(--container) + 2 * var(--s-8)); margin-inline: auto; border-radius: 32px; box-shadow: 0 30px 80px -40px rgba(44, 4, 93, 0.55); }
.cta-shell > .cta .container { width: min(100% - 2 * var(--s-8), var(--container)); }
.on-dark + .cta-shell { padding-top: var(--s-9); }
.cta-grid { display: grid; grid-template-columns: 1fr 460px; gap: var(--s-8); align-items: center; }
.cta h2 { font-size: var(--fs-h2); max-width: 16ch; }
.cta .lead { margin-top: var(--s-4); color: var(--dark-text-2); font-size: var(--fs-lg); max-width: 30rem; }
.cta-points { margin-top: var(--s-6); display: grid; gap: var(--s-3); color: var(--dark-text-2); font-size: var(--fs-sm); }
.cta-points li { display: flex; gap: var(--s-3); align-items: center; }
/* Takvimden görüşme (cal.com): formun yanında ikinci yol; takvim tıklanınca yüklenir (site.js "Toplantı planlama") */
.cta-meet { margin-top: var(--s-7); max-width: 34rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); padding: var(--s-4); border-radius: var(--r-lg); }
.cta-meet-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-border); color: var(--wa-mor-10); }
.cta-meet-ic .meet-dot { animation: m-breathe 2400ms infinite; }
.cta-meet p { margin: 0; display: grid; gap: 2px; }
.cta-meet strong { font-weight: 600; color: var(--wa-beyaz); }
.cta-meet p span { font-size: var(--fs-sm); color: var(--dark-text-2); }
.cta-meet .btn { gap: 8px; white-space: nowrap; }
@media (max-width: 479px) {
  .cta-meet { grid-template-columns: auto minmax(0, 1fr); }
  .cta-meet .btn { grid-column: 1 / -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cta-meet-ic .meet-dot { animation: none; } }
/* Telefon/tablet: form ana yol. Takvim kartı formun üstüne düşmesin; formun altında "ya da" + tek satır bağlantı */
.cta-meet-mini { display: none; }
@media (max-width: 1080px) {
  .cta-grid .cta-meet { display: none; }
  .cta-meet-mini { display: grid; justify-items: center; gap: var(--s-2); margin-top: calc(var(--s-4) - var(--s-8)); }
  .cta-meet-or { display: flex; align-items: center; gap: var(--s-3); width: 100%; max-width: 22rem; font-size: var(--fs-xs); color: var(--dark-text-2); }
  .cta-meet-or::before, .cta-meet-or::after { content: ""; flex: 1; height: 1px; background: var(--glass-border); }
  .cta-meet-mini a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--s-3);
    color: var(--wa-beyaz); font-size: var(--fs-sm); font-weight: 500; text-decoration: none;
  }
  .cta-meet-t { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, 0.35); }
  .cta-meet-mini a:hover .cta-meet-t, .cta-meet-mini a:focus-visible .cta-meet-t { text-decoration-color: currentColor; }
  .cta-meet-mini a svg { color: var(--wa-mor-10); flex: none; }
}
.form { padding: var(--s-6); border-radius: var(--r-lg); display: grid; gap: var(--s-4); }
.form h3 { font-size: var(--fs-lg); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-xs); font-weight: 500; color: var(--dark-text-2); }
.hero-grid > *, .geo > *, .cta-grid > * { min-width: 0; }
.field input, .field select {
  width: 100%; height: 48px; padding: 0 var(--s-4); border-radius: var(--r-sm);
  border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.06); color: var(--wa-beyaz);
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
.field select option { color: var(--wa-siyah); }
.field input::placeholder { color: rgba(255, 255, 255, 0.4); }
.field input:focus, .field select:focus { outline: none; border-color: var(--wa-mor-10); background: rgba(255, 255, 255, 0.1); }
.field .error { display: none; font-size: 12px; color: #FFB4C0; }
.field.has-error input, .field.has-error select { border-color: #FFB4C0; }
.field.has-error .error { display: block; }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); font-size: 12px; color: var(--dark-text-2); align-items: start; }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.consent a { text-decoration: underline; }
.form-note { font-size: 12px; color: var(--dark-text-2); text-align: center; }
.form-success { display: none; text-align: center; padding: var(--s-6) 0; }
.form.is-sent .form-body { display: none; }
.form.is-sent .form-success { display: grid; gap: var(--s-3); justify-items: center; }
.success-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }

/* ---------- Alt bilgi ---------- */
.footer { padding: var(--s-9) 0 var(--s-6); border-top: 1px solid var(--dark-line); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--s-6); }
.footer .logo { width: 160px; }
.footer-about { margin-top: var(--s-4); color: var(--dark-text-2); font-size: var(--fs-sm); max-width: 20rem; }
.social { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--dark-line); color: var(--wa-beyaz); transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.social a:hover { background: var(--accent); border-color: var(--accent); }
.footer .footer-title { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-head, 1.3); margin-bottom: var(--s-4); }
.footer-links { display: grid; gap: var(--s-3); font-size: var(--fs-sm); color: var(--dark-text-2); }
.footer-links a:hover { color: var(--wa-beyaz); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--dark-line); font-size: var(--fs-xs); color: var(--dark-text-2); }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ---------- Mobil sabit CTA çubuğu ---------- */
.mobile-bar { display: none; }

/* ---------- Kayarak belirme ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 1080px) {
  .nav, .header-cta .btn-ghost { display: none; }
  .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.06); color: var(--wa-beyaz); cursor: pointer; margin-left: auto; }
  .header.is-light .menu-toggle { color: var(--text); border-color: var(--line-strong); }
  .header-cta { order: 2; }
  .hero-grid, .geo, .cta-grid { grid-template-columns: 1fr; }
  .panel { max-width: 560px; }
  .services { grid-template-columns: repeat(2, 1fr); }
  .stats, .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .header-inner { height: 64px; }
  .logo { width: 128px; }
  .header-cta { display: none; }
  .hero { padding: calc(64px + var(--s-7)) 0 var(--s-8); }
  .hero .lead { font-size: var(--fs-base); }
  .hero-actions .btn { flex: 1 1 100%; }
  .panel { min-height: 380px; }
  .panel-main { inset: 32px 0 80px 0; }
  .panel-float { width: 230px; }
  .panel-float-top { right: 8px; }
  .panel-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section, .cta { padding: var(--s-9) 0; }
  .cta-shell { padding: 0 12px var(--s-8); }
  .cta-shell > .cta { padding: var(--s-8) 0; border-radius: var(--r-lg); }
  .cta-shell > .cta .container { width: calc(100% - 2 * var(--s-4)); }
  .on-dark + .cta-shell { padding-top: var(--s-8); }
  .section-head { margin-bottom: var(--s-7); }
  .services, .stats, .steps { grid-template-columns: 1fr; }
  .logos-inner { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .logos-label { max-width: none; }
  .marquee { width: 100%; }
  .logos { --marquee-gap: var(--s-6); }
  .pkg-tabs { border-radius: var(--r-lg); justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; width: 100%; scrollbar-width: none; }
  .pkg-tab { flex: none; }
  .faq .answer { padding-right: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Mobil menü paneli */
.mobile-nav { position: fixed; inset: 0; z-index: 70; background: var(--wa-mor-90); color: var(--wa-beyaz); padding: var(--s-5) var(--gutter); display: flex; flex-direction: column; gap: var(--s-5); opacity: 0; visibility: hidden; transition: opacity var(--d-base) var(--ease), visibility var(--d-base); }
.mobile-nav.is-open { opacity: 1; visibility: visible; transition: opacity var(--d-base) var(--ease), visibility 0s; }
.mobile-nav-head { display: flex; justify-content: space-between; align-items: center; }
.mobile-nav nav { display: grid; gap: var(--s-1); }
.mobile-nav nav > a { padding: var(--s-3) 0; font-size: 1.5rem; font-weight: 500; border-bottom: 1px solid var(--dark-line); }
.mobile-nav .btn { margin-top: auto; }

/* ---------- Rakamlar (paket bölümünün üstünde cam şerit) ---------- */
.stats-glass { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: var(--r-lg); margin-bottom: var(--s-9); overflow: hidden; }
.stats-glass .stat { padding: var(--s-6); border-radius: 0; }
.stats-glass .stat + .stat { border-left: 1px solid var(--glass-border); }
/* Öğe sayısına göre sütun: 3 öğe satırı tam doldurur (4 sütunlu ızgarada sağda boşluk kalmasın) */
.stats-glass[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.stats-glass[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.stat-ic { display: none; }

/* ---------- Vektörel ikonlar ---------- */
.ico { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* ---------- Yüzen WhatsApp düğmesi (masaüstü) ---------- */
.wa-float {
  position: fixed; right: 28px; bottom: 24px; z-index: 55; width: 56px; height: 56px; border-radius: 50%;
  display: block; color: var(--wa-beyaz); font-size: var(--fs-sm); font-weight: 500;
  transition: transform var(--d-base) var(--ease);
}
/* Yeşil küre: asistan düğmesiyle aynı dil (ışık sol üstten, parlak kenar, yumuşak gölge) */
.wa-float .wa-dot {
  position: relative; width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; font-size: 28px; color: #fff; overflow: hidden;
  background: radial-gradient(circle at 30% 22%, #6FF5A0 0%, #25D366 48%, #0F8A63 100%);
  box-shadow: 0 10px 28px rgba(18, 140, 94, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), inset 0 -6px 12px rgba(0, 60, 40, 0.25);
}
.wa-float .wa-dot::before { content: ""; position: absolute; left: 14%; top: 6%; width: 72%; height: 42%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0)); pointer-events: none; }
.wa-float .wa-dot .ico { position: relative; filter: drop-shadow(0 1px 1px rgba(0, 70, 40, 0.35)); transition: transform var(--d-base) var(--ease); }
.wa-float::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.55); animation: assist-ring 2.6s var(--ease) 1.3s infinite; pointer-events: none; }
.wa-float:hover { transform: scale(1.06); }
.wa-float:hover .wa-dot .ico { transform: rotate(-8deg) scale(1.05); }
/* Etiket: üzerine gelince solda cam baloncuk */
.wa-float > span:last-child {
  position: absolute; right: calc(100% + 14px); top: 50%; transform: translate(8px, -50%); opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 10px 16px; border-radius: 16px 16px 4px 16px; background: rgba(20, 2, 45, 0.78); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); line-height: 1.3;
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.wa-float:hover > span:last-child, .wa-float:focus-visible > span:last-child { opacity: 1; transform: translate(0, -50%); }
.wa-float small { display: block; font-size: 11px; color: var(--dark-text-2); font-weight: 400; line-height: 1.2; }
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; opacity: 0.4; } }

/* ---------- Video penceresi ---------- */
.lightbox { border: 0; padding: 0; width: min(100% - 32px, 1100px); background: transparent; color: var(--wa-beyaz); overflow: visible; }
.lightbox::backdrop { background: rgba(14, 1, 31, 0.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.lightbox[open] { animation: lb-in var(--d-slow) var(--ease); }
@keyframes lb-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.lightbox-inner { border-radius: var(--r-lg); padding: 10px; }
.lightbox video { width: 100%; aspect-ratio: 16 / 9; border-radius: calc(var(--r-lg) - 8px); background: #000; display: block; }
.lightbox-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-2) var(--s-2) var(--s-3) var(--s-3); }
.lightbox-head p { font-size: var(--fs-sm); color: var(--dark-text-2); }
.lightbox-head strong { color: var(--wa-beyaz); font-weight: 500; }

/* ---------- Referans duvarı (vektörel logolar için hazır) ---------- */
.ref-tile { display: grid; place-items: center; height: 64px; min-width: 160px; padding: 0 var(--s-5); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg); color: #9A9AA0; transition: color var(--d-base) var(--ease), border-color var(--d-base) var(--ease); }
.ref-tile:hover { color: var(--text); border-color: var(--line-strong); }
.ref-tile svg { height: 28px; width: auto; }
/* Müşteri logoları kendi renkleriyle gelir: şeritte sakin (gri, yarı saydam), üzerine gelince asıl rengine döner.
   Oranlar çok farklı (kare amblem – uzun yazı), bu yüzden yükseklik ve genişlik birlikte sınırlanır. */
.ref-tile img { height: auto; width: auto; max-height: 34px; max-width: 128px; object-fit: contain; filter: grayscale(1); opacity: 0.6; transition: filter var(--d-base) var(--ease), opacity var(--d-base) var(--ease); }
.ref-tile:hover img { filter: none; opacity: 1; }
.ref-tile .ref-word { font-size: 1.125rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
/* Şeritte logolar kutusuz, yalın: yalnız logo ve eşit boşluk */
.logos .ref-tile { height: 56px; min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; }

/* ---------- Slider: duyarlı düzen ---------- */
@media (max-width: 1080px) {
  .slide { grid-template-columns: 1fr; gap: var(--s-7); align-items: start; }
  .slide .s-visual { max-width: 560px; }
  .seg { min-width: 0; }
  .seg .seg-label { display: none; }
  .stats-glass { grid-template-columns: repeat(2, 1fr); }
  .stats-glass .stat:nth-child(3) { border-left: 0; }
  .stats-glass .stat:nth-child(n + 3) { border-top: 1px solid var(--glass-border); }
  /* 3 öğe tablette de tek satırda kalır */
  .stats-glass[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
  .stats-glass[data-count="3"] .stat:nth-child(3) { border-left: 1px solid var(--glass-border); border-top: 0; }
}
@media (max-width: 720px) {
  .header { inset: 8px 0 auto 0; }
  .header-inner { height: 56px; padding: 0 6px 0 16px; }
  .hero { padding-top: calc(72px + var(--s-6)); min-height: 0; }
  .slide-title, .hero h1 { font-size: 2.125rem; }
  .slider-ui { margin-top: var(--s-6); }
  .seg { padding: 12px 14px 16px; }
  .seg .seg-bar { left: 10px; right: 10px; }
  .slider-btns .icon-btn { width: 44px; height: 44px; }
  .slider-btns .prev, .slider-btns .next { display: none; }
  .video-play { font-size: var(--fs-xs); padding: 8px 14px 8px 8px; }
  .video-play .pp { width: 36px; height: 36px; }
  .video-cap { display: none; }
  .mock-price { right: 8px; bottom: -14px; }
  .wa-float { display: none; }
  .stats-glass .stat { padding: var(--s-5); }
}

/* ---------- Dev W işareti (arka plan kimlik öğesi) ----------
   Kitteki W dosyası maske olarak kullanılır: şekil yeniden çizilmez, döndürülmez, kontur/gölge yok.
   Tek düz renk (koyu zeminde beyaz, açık zeminde Mor 40), düşük saydamlık, bölüm kenarından taşarak kırpılır. */
.w-mark {
  position: absolute; z-index: -1; pointer-events: none;
  aspect-ratio: 713 / 396;
  background: var(--wa-beyaz); opacity: 0.05;
  -webkit-mask: url("../marka/webaction-ikon-beyaz.svg") no-repeat center / contain;
  mask: url("../marka/webaction-ikon-beyaz.svg") no-repeat center / contain;
}
.w-mark.on-light { background: var(--wa-mor-40); opacity: 0.045; }
/* Giriş: sağ altta, slayt değiştikçe çok hafif süzülür */
.w-hero { width: min(1100px, 95vw); right: -14vw; bottom: -8%; transform: translateX(calc(var(--i, 0) * -24px)); transition: transform 1.4s var(--ease); opacity: 0.06; }
/* Paketler: sol üstten taşar */
.w-pkg { width: 900px; left: -320px; top: 120px; }
/* Kapanış CTA: formun arkasında */
/* Kapanış formu: sol altta, kartın kenarından taşarak kırpılır (formun arkasında değil, metin sütununun köşesinde) */
.w-cta { width: 640px; left: -90px; bottom: -255px; opacity: 0.06; }
/* Alt bilgi: dev işaret alttan kırpılır */
.footer { overflow: hidden; }
.w-foot { width: min(1400px, 110vw); left: 50%; bottom: -34%; transform: translateX(-50%); opacity: 0.045; }
/* Sonuçlar (açık zemin): sağdan taşar */
.section-soft { position: relative; overflow: hidden; isolation: isolate; }
.w-cases { width: 720px; right: -260px; top: -60px; }
@media (max-width: 720px) {
  .w-hero { width: 150vw; right: -60vw; bottom: 4%; }
  .w-pkg { width: 520px; left: -240px; }
  .w-cta { width: 420px; left: auto; right: -150px; top: -70px; bottom: auto; }
  .w-cases { width: 420px; right: -200px; }
}
@media (prefers-reduced-motion: reduce) { .w-hero { transition: none; } }

/* ---------- Şirket şeridi (ALPNET) ---------- */
.company { margin-top: var(--s-8); border-radius: var(--r-lg); padding: var(--s-5) var(--s-6); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-6); align-items: stretch; }
.company-brand { display: flex; flex-direction: column; justify-content: center; gap: var(--s-2); padding-right: var(--s-6); border-right: 1px solid var(--glass-border); }
.company-label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wa-mor-10); }
.alpnet-logo { display: flex; align-items: center; height: 32px; }
.alpnet-logo img { height: 28px; width: auto; }
.alpnet-word { font-size: 1.375rem; font-weight: 600; letter-spacing: 0.12em; color: var(--wa-beyaz); }
.company-legal { font-size: var(--fs-xs); line-height: 1.6; color: var(--dark-text-2); }
.company-legal span { display: block; white-space: nowrap; }
/* İletişim: adres kalan genişliği alır, telefon ve WhatsApp içerikleri kadar; hepsi üstten hizalı, eş iç boşluk */
.company-contact { font-style: normal; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-2); align-items: start; align-content: center; }
.c-item { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-3); border-radius: var(--r-md); font-size: var(--fs-sm); color: var(--wa-beyaz); line-height: 1.5; transition: background-color var(--d-fast) var(--ease); }
.c-item:hover { background: rgba(255, 255, 255, 0.06); }
.c-item > span:last-child { min-width: 0; padding-top: 1px; }
.c-item small { display: block; font-size: 11px; line-height: 1.4; color: var(--dark-text-2); margin-bottom: 2px; }
.c-item .c-line { display: block; }
.c-item em { display: block; margin-top: 6px; font-style: normal; font-size: var(--fs-xs); color: var(--wa-mor-10); }
.c-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-border); color: var(--wa-mor-10); }
.c-ic.c-wa { color: #25D366; }
@media (max-width: 1080px) {
  .company { grid-template-columns: 1fr; padding: var(--s-5); }
  .company-brand { border-right: 0; padding-right: 0; padding-bottom: var(--s-4); border-bottom: 1px solid var(--glass-border); }
  .company-legal span { white-space: normal; }
}
@media (max-width: 720px) {
  .company-contact { grid-template-columns: 1fr; }
}

/* ---------- İş ortaklıkları şeridi (alt bilgi, şirket kartının altı): logolar kendi renkleriyle beyaz kapsülde ---------- */
.partners-strip { margin-top: var(--s-5); display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.partners-title { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wa-mor-10); }
.partners-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--s-3); }
.partner-chip { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 18px; border-radius: 999px; background: var(--wa-beyaz); box-shadow: 0 6px 18px rgba(12, 0, 30, 0.25); color: #3c3c46; }
.partner-chip img { height: 20px; width: auto; max-width: 110px; display: block; }
.partner-label { padding-left: 10px; border-left: 1px solid #e3e0ea; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; line-height: 20px; color: #5b5866; }
a.partner-chip { transition: transform var(--d-fast) var(--ease); }
a.partner-chip:hover { transform: translateY(-1px); }
@media (max-width: 720px) {
  .partners-strip { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  /* Başlık "iş ortaklarımız" dediği için dar ekranda unvan yazısı düşer; üç logo tek satıra sığar */
  .partners-list { gap: var(--s-2); }
  .partner-chip { height: 40px; padding: 0 14px; }
  .partner-chip img { height: 17px; max-width: 84px; }
  .partner-label { display: none; }
}

/* ---------- Setup platform logoları (markaların kendi SVG dosyaları, renkleri değiştirilmez) ---------- */
.plat-row { display: flex; flex-wrap: wrap; gap: 6px; }
.plat-row li { height: 36px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; }
.plat-row img { height: 15px; width: auto; max-width: 72px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter var(--d-base) var(--ease), opacity var(--d-base) var(--ease); }
.service:hover .plat-row img { filter: none; opacity: 1; }
/* Koyu paket kartında: beyaz karolar, logo özgün renginde */
.plat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.plat-tile {
  height: 64px; border-radius: var(--r-md); border: 2px solid transparent; background: var(--wa-beyaz); cursor: pointer;
  display: grid; place-items: center; padding: 0 var(--s-3);
  transition: transform var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
}
.plat-tile img { height: 22px; width: auto; max-width: 100%; object-fit: contain; }
.plat-tile:hover { transform: translateY(-2px); }
.plat-tile[aria-checked="true"] { border-color: var(--wa-mor-10); box-shadow: 0 0 0 4px rgba(209, 193, 255, 0.25); }
@media (max-width: 1080px) { .plat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .plat-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Fotoğraf alanları ----------
   Görsel dosyası gelene kadar mor tonlu yer tutucu görünür; dosya adını da gösterir. */
.photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 80% 10%, rgba(135, 62, 255, 0.55), transparent 60%), var(--wa-mor-90); isolation: isolate; }
.photo::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(255, 255, 255, 0.95); opacity: 0.1; -webkit-mask: url("../marka/webaction-ikon-beyaz.svg") no-repeat 50% 50% / 46%; mask: url("../marka/webaction-ikon-beyaz.svg") no-repeat 50% 50% / 46%; }
.photo::after { content: "Görsel: " attr(data-file); position: absolute; left: 12px; bottom: 12px; z-index: 0; padding: 4px 10px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.8); font-size: 11px; }
.photo img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* Kimlikle uyum: fotoğrafın üstüne çok hafif mor ton */
.photo:has(img)::after { display: none; }
.on-dark .photo img { filter: saturate(0.92); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; margin-bottom: var(--s-8); }
.geo-visual { position: relative; }
.geo-visual .photo { width: 78%; margin-left: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.geo-visual .chat { position: absolute; left: 0; bottom: 8%; width: min(420px, 78%); z-index: 2; }
.photo-cta { margin-top: var(--s-6); max-width: 440px; }
@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; gap: var(--s-6); }
  .geo-visual .photo { width: 100%; }
  .geo-visual .chat { position: relative; left: auto; bottom: auto; width: 100%; margin-top: -80px; }
}
@media (max-width: 720px) { .photo-cta { display: none; } }

/* Rakam kutuları: her kutuda aynı sıra (simge → rakam → açıklama), hepsi aynı hizada */
.stats-glass .stat { display: flex; flex-direction: column; gap: 0; }
.stat-badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: var(--s-4); color: var(--wa-mor-10); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-border); }
.stat-badge.light { background: var(--wa-beyaz); border-color: transparent; }
.stat-badge img { width: 22px; height: 22px; }
.stat-stars { font-size: 0.875rem; letter-spacing: 2px; color: #FBBC05; vertical-align: middle; margin-left: 6px; }
.stats-glass .stat .stat-stars { display: inline; margin: 0 0 0 8px; color: #FBBC05; font-size: 0.875rem; letter-spacing: 2px; vertical-align: middle; }
@media (max-width: 1080px) { .geo-visual .photo { aspect-ratio: 16 / 10 !important; } }

/* Rakam kutuları simgeleri: dört kutucuk aynı (beyaz, simge ortada). Genel ".stat span" kuralını ezmek için özgül seçici. */
.stats-glass .stat .stat-badge {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 var(--s-5);
  border-radius: 12px; background: var(--wa-beyaz); border: 0; color: var(--wa-mor-40);
  box-shadow: 0 6px 16px rgba(20, 2, 45, 0.25);
}
.stats-glass .stat .stat-badge svg, .stats-glass .stat .stat-badge img { width: 22px; height: 22px; display: block; }
.stats-glass .stat strong { display: flex; align-items: center; gap: 10px; }
.stats-glass .stat .stat-stars { margin: 0; }

/* Rakam kutuları: simge solda, rakam ve açıklama sağda (kutu boyu kısalır) */
.stats-glass .stat { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-4); align-items: center; padding: var(--s-5) var(--s-6); }
.stats-glass .stat .stat-badge { grid-row: 1 / span 2; margin: 0; width: 48px; height: 48px; }
.stats-glass .stat strong { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem); }
.stats-glass .stat > span:last-child { margin-top: 4px; font-size: var(--fs-xs); line-height: 1.35; }
@media (max-width: 720px) { .stats-glass .stat { padding: var(--s-4); column-gap: var(--s-3); } .stats-glass .stat .stat-badge { width: 40px; height: 40px; } }

/* ---------- İhtiyaç analizi asistanı ---------- */
.assist-launch { position: fixed; right: 24px; bottom: 100px; z-index: 56; display: flex; align-items: flex-end; gap: var(--s-3); }
.assist-btn {
  position: relative; width: 64px; height: 64px; border-radius: 50%; padding: 0; border: 0; cursor: pointer; overflow: visible;
  background: radial-gradient(circle at 30% 20%, var(--wa-mor-40), var(--wa-mor-70) 60%, var(--wa-mor-90));
  box-shadow: 0 10px 30px rgba(44, 4, 93, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform var(--d-base) var(--ease);
  animation: assist-bob 4s ease-in-out infinite;
}
.assist-btn:hover { transform: scale(1.06); }
/* Şeffaf zeminli portre mor çemberin içinde; baş üst kenara taşmaz */
.assist-btn img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 8%; }
.assist-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(135, 62, 255, 0.6); animation: assist-ring 2.6s var(--ease) infinite; pointer-events: none; }
.assist-online { position: absolute; right: 2px; bottom: 4px; width: 14px; height: 14px; border-radius: 50%; background: #7BE0A5; border: 3px solid var(--wa-beyaz); }
@keyframes assist-bob { 50% { transform: translateY(-4px); } }
@keyframes assist-ring { 0% { transform: scale(0.92); opacity: 0.9; } 80%, 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .assist-btn, .assist-ring { animation: none; } .assist-ring { opacity: 0.5; } }

.assist-teaser { position: relative; max-width: 240px; padding: var(--s-3) var(--s-4) var(--s-3) var(--s-4); border-radius: 16px 16px 4px 16px; background: rgba(20, 2, 45, 0.72); color: var(--wa-beyaz); font-size: var(--fs-xs); line-height: 1.45; animation: lb-in var(--d-slow) var(--ease); }
.assist-teaser strong { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: 2px; }
.assist-teaser-x { position: absolute; top: -8px; left: -8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--glass-border); background: var(--wa-mor-90); color: var(--wa-beyaz); cursor: pointer; line-height: 1; }

.assist {
  position: fixed; right: 24px; bottom: 24px; z-index: 80; width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100svh - 48px));
  display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; color: var(--wa-beyaz);
  background: rgba(30, 3, 64, 0.82); box-shadow: var(--glass-highlight), 0 30px 80px rgba(10, 0, 25, 0.5);
  transform-origin: bottom right; animation: assist-in var(--d-slow) var(--ease);
}
.assist[hidden] { display: none; }
@keyframes assist-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
.assist-head { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; padding: var(--s-4) var(--s-4) var(--s-5); border-bottom: 1px solid var(--glass-border); background: linear-gradient(135deg, rgba(135, 62, 255, 0.35), transparent 70%); }
.assist-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--wa-mor-40), var(--wa-mor-90)); }
.assist-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; }
.assist-title h2 { font-size: var(--fs-base); font-weight: 600; }
.assist-title p { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dark-text-2); }
.assist-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--glass-border); background: transparent; color: var(--wa-beyaz); cursor: pointer; display: grid; place-items: center; }
.assist-close:hover { background: rgba(255, 255, 255, 0.08); }
.assist-steps { position: absolute; left: var(--s-4); right: var(--s-4); bottom: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.assist-steps i { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); transition: background-color var(--d-base) var(--ease); }
.assist-steps i.on { background: var(--wa-mor-10); }

.assist-body { flex: 1; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); scroll-behavior: smooth; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: var(--fs-sm); line-height: 1.5; animation: msg-in var(--d-base) var(--ease); }
.msg.bot { align-self: flex-start; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-border); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: var(--accent); border-bottom-right-radius: 4px; }
.msg.typing { display: inline-flex; gap: 4px; padding: 14px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dark-text-2); animation: blink 1.2s infinite; }
.msg.typing i:nth-child(2) { animation-delay: 0.2s; } .msg.typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .msg, .assist, .assist-teaser { animation: none; } }

.assist-input { padding: var(--s-3) var(--s-4) var(--s-4); display: grid; gap: var(--s-2); }
.assist-input:empty { display: none; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { padding: 9px 14px; border-radius: var(--r-full); border: 1px solid rgba(209, 193, 255, 0.4); background: rgba(255, 255, 255, 0.04); color: var(--wa-beyaz); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; transition: background-color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.opt:hover { background: rgba(135, 62, 255, 0.35); border-color: var(--wa-mor-10); }
.assist .field input { height: 44px; }
.assist .field label { color: var(--dark-text-2); }
.assist .consent { font-size: 11px; }
.assist .row2 { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.assist .skip { background: transparent; border: 0; color: var(--wa-mor-10); font-size: var(--fs-xs); cursor: pointer; padding: 0 8px; }
.assist-foot { padding: 10px var(--s-4); border-top: 1px solid var(--glass-border); }
.assist-foot a { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-xs); color: var(--dark-text-2); }
.assist-foot a:hover { color: var(--wa-beyaz); }
.assist-foot .ico { color: #25D366; font-size: 16px; }

@media (max-width: 720px) {
  .assist-launch { right: 16px; bottom: 92px; }
  .assist-btn { width: 56px; height: 56px; }
  .assist-teaser { max-width: 200px; }
  .assist { right: 0; bottom: 0; width: 100%; height: 100svh; border-radius: 0; }
}

/* Menüde bulunulan sayfa */
:is(.nav, .nav-root) > a[aria-current="page"] { color: var(--wa-beyaz); background: rgba(255, 255, 255, 0.1); }
.header.is-light :is(.nav, .nav-root) > a[aria-current="page"] { color: var(--wa-mor-90); background: var(--accent-soft); }
.mobile-nav nav > a[aria-current="page"] { color: var(--wa-mor-10); }
/* Telefonda rakam kutuları tek sütun */
@media (max-width: 560px) {
  .stats-glass, .stats-glass[data-count] { grid-template-columns: 1fr; }
  .stats-glass .stat + .stat, .stats-glass[data-count="3"] .stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--glass-border); }
}

/* Müşteri girişi (CRM portalı): menüde yer kaplamayan simgeli bağlantı */
.portal-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--r-full); color: var(--dark-text-2); font-size: var(--fs-xs); font-weight: 500; border: 1px solid transparent; transition: color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease); }
.portal-btn:hover { color: var(--wa-beyaz); border-color: var(--glass-border); }
.header.is-light .portal-btn { color: var(--text-2); }
.header.is-light .portal-btn:hover { color: var(--text); border-color: var(--line-strong); }
.mobile-nav .btn-glass { margin-top: auto; }
/* Menü açılınca logo ve kapat düğmesi yerinden oynamasın: üst satır, kapsül menünün ölçüleriyle birebir (tablet 64 px, telefon 56 px) */
@media (max-width: 1180px) {
  .mobile-nav { padding-top: 12px; }
  .mobile-nav-head { height: 64px; padding: 0 8px 0 24px; border: 1px solid transparent; }
  .mobile-nav nav > a, .mnav-group > summary, .mnav-panel { padding-left: 24px; padding-right: 24px; }
  .mobile-nav .menu-toggle { border-radius: 50%; }
}
@media (max-width: 720px) {
  .mobile-nav { padding-top: 8px; }
  .mobile-nav-head { height: 56px; padding: 0 6px 0 16px; }
  .mobile-nav nav > a, .mnav-group > summary, .mnav-panel { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Üst menü düzeni (tek yerde) ----------
   Bağlantılar hiçbir genişlikte iki satıra kırılmaz; sığmadığı noktada (1180 px) menü düğmesine geçilir.
   Müşteri girişi her genişlikte simge; açıklaması üzerine gelince görünür. */
.header-inner { min-width: 0; }
.nav { flex-wrap: nowrap; min-width: 0; }
:is(.nav, .nav-root) > a { white-space: nowrap; }
.portal-btn { width: 40px; padding: 0; justify-content: center; flex: none; }
.portal-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.header-cta { align-items: center; flex: none; }
.header-cta .btn { white-space: nowrap; }
@media (max-width: 1280px) and (min-width: 1181px) { :is(.nav, .nav-root) > a { padding: var(--s-2) 10px; } }
@media (max-width: 1180px) {
  .nav, .header-cta .btn-ghost { display: none; }
  .header-cta { order: 1; margin-left: auto; }
  /* Kapsül menünün içinde eş merkezli: kapsül yarıçapı − iç boşluk = 22 px → 44 px tam daire */
  .menu-toggle { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--glass-border); background: rgba(255, 255, 255, 0.06); color: var(--wa-beyaz); cursor: pointer; order: 2; margin-left: 0; }
  .header.is-light .menu-toggle { color: var(--text); border-color: var(--line-strong); }
}
@media (max-width: 720px) {
  .menu-toggle { margin-left: auto; }
}

/* ---------- Mobil ve tablet düzeltmeleri (27.09 denetimi) ---------- */
/* Yatay tablet: giriş slider'ı iki sütun kalır, görsel ilk ekrana sığar */
@media (min-width: 900px) and (max-width: 1080px) {
  .slide { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-6); align-items: center; }
  .slide .s-visual { max-width: none; }
  .panel { min-height: 360px; }
  .slide-title, .hero h1 { font-size: 2.5rem; }
}
/* Telefon ve dikey tablet: süs görselleri gizlenir, yalnız video kalır; slider ve kontrolleri ilk ekrana sığar */
@media (max-width: 899px) {
  /* Slaytlar üstten hizalı: geçişte başlık hep aynı yerden başlar (ortalanınca kısa slaytta aşağı kayıyordu) */
  .slides { align-items: start; }
  .slide div.s-visual { display: none; }
  .slide figure.s-visual { max-width: 520px; }
  .hero { min-height: 0; padding-bottom: var(--s-5); }
  .slider-ui { margin-top: var(--s-5); }
  .trust { margin-top: var(--s-5); gap: var(--s-3) var(--s-5); }
}
/* Dokunma alanları: parmakla rahat basılsın (en az 44 px) */
@media (max-width: 1080px), (pointer: coarse) {
  .logo { padding: 12px 0; }
  .link-arrow { min-height: 44px; }
  .filter, .pkg-tab { min-height: 44px; }
  .faq summary { min-height: 56px; align-items: center; }
}
/* Paket sekmeleri telefonda yana kayar: kenarda solma, sekmeler hizaya oturur */
@media (max-width: 720px) {
  .pkg-tabs { scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .pkg-tab { scroll-snap-align: start; }
}
/* Telefonda video çerçevesi de gizlenir; "Videoyu sesli izle" düğmesi videoyu tam ekran açar */
@media (max-width: 720px) {
  .slide figure.s-visual { display: none; }
}
@media (min-width: 900px) and (max-width: 1080px) { .hero { padding-top: calc(88px + var(--s-6)); padding-bottom: var(--s-5); min-height: 0; } }

/* ---------- Ekip fotoğrafı: kurumsal filtre ----------
   Hangi fotoğraf yüklenirse yüklensin (panelden değiştirilebilir) aynı görünür: mor zemin, tek renk,
   Mor 40 tonlama. Asıl dosya renkli saklanır; filtre yalnız burada, tek yerden değişir. */
.ekip-foto { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--wa-mor-40), var(--wa-mor-90) 75%); }
.ekip-foto > img, img.ekip-foto-img { filter: grayscale(1) contrast(1.12) brightness(1.04); }
.ekip-foto::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(160deg, #9D63FF 0%, #6B2BD9 100%); mix-blend-mode: color; }

/* ---------- Form gönderim hatası (CRM'ye iletilemediğinde) ---------- */
.form-error { font-size: var(--fs-xs); color: #FFB4C0; text-align: center; }
.form-error a { color: var(--wa-beyaz); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Çerez onayı (KVKK, Consent Mode v2) ----------
   Küçük, sol altta duran cam kart; sayfayı kilitlemez. İki seçenek aynı boyda: "Yalnız gerekli" ve "Kabul et".
   Telefonda mobil hızlı iletişim çubuğunun üstünde durur. Alt bilgideki "Çerez tercihleri" yeniden açar. */
.cookie {
  position: fixed; left: 24px; bottom: 24px; z-index: 65; width: min(400px, calc(100vw - 32px));
  display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5) var(--s-5); border-radius: var(--r-lg); color: var(--wa-beyaz);
  transform-origin: bottom left; animation: assist-in var(--d-slow) var(--ease);
}
.cookie.glass {
  background: rgba(30, 3, 64, 0.88); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), 0 20px 60px rgba(10, 0, 25, 0.45);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cookie.glass { background: var(--glass-fallback); } }
.cookie[hidden] { display: none; }
.cookie-title { font-size: var(--fs-sm); font-weight: 600; line-height: var(--lh-head); }
.cookie p { font-size: var(--fs-xs); line-height: 1.5; color: var(--dark-text-2); }
.cookie p a { color: var(--wa-mor-10); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); margin-top: var(--s-1); }
.cookie :focus-visible { outline-color: var(--wa-mor-10); }
/* Kategori tercihleri (Zorunlu / Analitik / Pazarlama) ve alttaki metin bağlantısı */
.cookie-link {
  justify-self: center; padding: 2px 4px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-xs); color: var(--wa-mor-10); text-decoration: underline; text-underline-offset: 3px;
}
.cookie-cats { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.cookie-cat {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.06);
}
.cookie-cat-text { display: grid; gap: 2px; cursor: pointer; }
.cookie-cat-text strong { font-size: var(--fs-xs); font-weight: 600; }
.cookie-cat-text span { font-size: var(--fs-xs); line-height: 1.45; color: var(--dark-text-2); }
.cookie-on { font-size: var(--fs-xs); color: var(--dark-text-2); white-space: nowrap; }
.cookie-switch {
  appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 38px; height: 22px; margin: 0;
  border-radius: var(--r-full); background: rgba(255, 255, 255, 0.24); cursor: pointer; transition: background var(--d-fast) var(--ease);
}
.cookie-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--wa-beyaz); transition: transform var(--d-fast) var(--ease);
}
.cookie-switch:checked { background: var(--wa-mor-40); }
.cookie-switch:checked::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .cookie-switch, .cookie-switch::after { transition: none; } }
@media (max-width: 720px) {
  .cookie { left: var(--s-3); right: var(--s-3); bottom: 88px; width: auto; }
}
@media (prefers-reduced-motion: reduce) { .cookie { animation: none; } }

/* Çerez penceresi açıkken asistan balonu gösterilmez (sol alt ve sağ alt aynı anda dolmasın) */
body:has(.cookie:not([hidden])) .assist-teaser { display: none; }


/* ---------- Mobil alt bar: tek yüzen cam hap, dört eş hizalı öğe (Ara · WhatsApp · Asistan · Analiz al) ----------
   Hepsi aynı satırda ve aynı yükseklikte; hiçbir öğe bardan taşmaz. Davranış (site.js): kaydırınca ya da birkaç saniye sonra
   belirir (.is-shown), aşağı okurken incelir ve etiketler gizlenir (.is-compact), analiz formu ekrandayken / klavye açıkken /
   asistan ya da çerez penceresi açıkken çekilir. Mobilde ayrı yüzen asistan ve WhatsApp düğmeleri gizlenir. */
@media (max-width: 720px) {
  .mobile-bar {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; gap: 2px;
    /* Üst menüyle aynı çerçeve: kenarlardan 16 px, tam yuvarlak kapsül. İçteki her şekil eş merkezli (32 − 6 = 26 px) */
    position: fixed; z-index: 60; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    /* Üç eşit simge (Ara, WhatsApp, Asistan); analiz düğmesi yok, çubuk ortada ve dar */
    width: min(300px, calc(100% - 32px)); height: 64px; padding: 6px; border-radius: 32px;
    background: linear-gradient(180deg, rgba(58, 16, 112, 0.66), rgba(24, 2, 52, 0.78));
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 32px -8px rgba(10, 0, 25, 0.45);
    transform: translate(-50%, calc(100% + 24px)); opacity: 0; pointer-events: none;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease, height .3s ease, border-radius .3s ease;
  }
  .mobile-bar.is-shown { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  .mobile-bar .mb-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 52px; min-width: 0; padding: 0; border: 0; border-radius: 26px; background: transparent;
    color: rgba(255, 255, 255, 0.92); font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease;
  }
  .mobile-bar .mb-item:active { background: rgba(255, 255, 255, 0.08); }
  .mobile-bar .mb-ico { position: relative; display: grid; place-items: center; width: 26px; height: 26px; }
  .mobile-bar .mb-ico svg { width: 21px; height: 21px; }
  .mobile-bar .mb-avatar img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; box-shadow: 0 0 0 1.5px rgba(209, 193, 255, 0.55); }
  .mobile-bar .mb-avatar .assist-online { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-width: 2px; }
  .mobile-bar .mb-label { font-size: 10.5px; line-height: 1; font-weight: 500; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: opacity .2s ease; }
  /* Ana eylem: sade, düz mor kapsül; ok küçük ve satır içi (degrade, parlama ve oklu daire yok) */
  .mobile-bar .mb-main {
    display: flex; align-items: center; justify-content: center; gap: 6px; height: 44px; margin-left: 6px; margin-right: 1px; padding: 0 16px 0 18px; border-radius: 22px;
    background: var(--wa-mor-40); color: var(--wa-beyaz); font-size: 13.5px; font-weight: 600; letter-spacing: .005em; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: height .3s ease, background-color .2s ease;
  }
  .mobile-bar .mb-main:active { background: var(--wa-mor-50); }
  .mobile-bar .mb-main svg { flex: none; width: 14px; height: 14px; opacity: .85; transition: transform .2s ease; }
  .mobile-bar .mb-main:active svg { transform: translateX(2px); }
  /* Okurken: bar incelir, etiketler kaybolur; simgeler ve düğme aynı hizada kalır */
  .mobile-bar.is-compact { height: 56px; border-radius: 28px; }
  .mobile-bar.is-compact .mb-item { height: 44px; gap: 0; border-radius: 22px; }
  .mobile-bar.is-compact .mb-label { opacity: 0; height: 0; }
  .mobile-bar.is-compact .mb-main { height: 40px; border-radius: 20px; }
  /* Çekilme: analiz formu ekranda, klavye açık, asistan ya da çerez penceresi açık */
  .mobile-bar.is-away, body.assist-open .mobile-bar, body.kb-open .mobile-bar, body:has(.cookie:not([hidden])) .mobile-bar { transform: translate(-50%, calc(100% + 20px)); opacity: 0; pointer-events: none; }
  .assist-launch, .wa-float { display: none !important; }
  /* Bar içeriğin son satırını kapatmasın */
  .footer { padding-bottom: calc(var(--s-6) + 92px); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (max-width: 720px) { .mobile-bar { background: rgba(30, 3, 64, 0.96); } }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) { .mobile-bar, .mobile-bar .mb-label { transition: none; } }

/* ---------- Slider: temsilî arama sonucu (marka 1. sıraya yükselir) ----------
   Hybrid glass pencere (diğer slayt panelleriyle aynı dil); yapı arama sayfasını andırır: logo, arama kutusu, sekmeler,
   sonuçlar. Başlık rengi arama sayfasının koyu temasındaki açık mavi. Hareket: yalnız konum ve saydamlık, 400 ms
   (site.js "Arama sonucu slaytı"). */
.serp-wrap { position: relative; padding: 20px 8px 44px 0; }
.serp { position: relative; border-radius: var(--r-lg); color: var(--wa-beyaz); overflow: hidden; }
.serp-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px 10px; }
.serp-logo { flex: none; width: 70px; height: auto; filter: brightness(0) invert(1); } /* tek renk beyaz logo: koyu cam üstünde */
.serp-search { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 38px; padding: 0 14px 0 18px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--glass-border); box-shadow: var(--glass-highlight); font-size: 14px; color: var(--wa-beyaz); }
.serp-search svg { color: var(--wa-mor-10); }
.serp-q { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.serp-tabs { display: flex; gap: 20px; padding: 0 18px 0 102px; border-bottom: 1px solid var(--glass-border); font-size: 12.5px; color: var(--dark-text-2); }
.serp-tabs span { padding: 8px 0 9px; }
.serp-tabs .is-on { color: var(--wa-beyaz); box-shadow: inset 0 -2px 0 var(--wa-mor-10); }
.serp-list { list-style: none; margin: 0; padding: 6px 18px 14px 102px; display: grid; }
.serp-item { position: relative; display: grid; gap: 3px; padding: 11px 12px; margin: 0 -12px; border-radius: 14px; border: 1px solid transparent; will-change: transform; }
.serp-site { display: flex; align-items: center; gap: 8px; }
.serp-fav { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--glass-border); color: var(--dark-text-2); font-size: 11px; font-weight: 600; }
.serp-src { display: grid; line-height: 1.25; min-width: 0; }
.serp-name { font-size: 12.5px; color: var(--wa-beyaz); }
.serp-url { font-size: 11px; color: var(--dark-text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.serp-title { font-size: 15.5px; font-weight: 500; line-height: 1.3; color: #8AB4F8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.serp-snip { font-size: 12px; line-height: 1.5; color: var(--dark-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Markanın sonucu: mor tonlu cam, ince açık mor çerçeve; 1. sıraya çıkınca değerlendirme satırı belirir */
.serp-item.is-brand { z-index: 1; background: linear-gradient(180deg, rgba(135, 62, 255, 0.3), rgba(135, 62, 255, 0.16)); border-color: rgba(209, 193, 255, 0.45); box-shadow: var(--glass-highlight), 0 12px 30px -12px rgba(0, 0, 0, 0.5); }
.serp-item.is-brand .serp-fav { background: var(--wa-mor-40); border-color: var(--wa-mor-40); color: var(--wa-beyaz); }
.serp-item.is-brand .serp-title { color: var(--wa-beyaz); }
.serp-rich { font-size: 12px; color: var(--dark-text-2); opacity: 0; transition: opacity 400ms var(--ease); }
.serp-rich::first-letter { color: var(--wa-beyaz); }
.serp-wrap.is-top .serp-rich { opacity: 1; }
/* Odak markada: diğer sonuçlar geri planda, açıklamaları tek satır */
.serp-item:not(.is-brand) { opacity: 0.55; }
.serp-item:not(.is-brand) .serp-snip { display: none; }
.serp-item:not(.is-brand) { padding-top: 9px; padding-bottom: 9px; }
.serp-item.is-brand .serp-title { white-space: normal; }
/* Üst küçük kart ve sıra kartı: pencerenin köşelerinden taşan cam kartlar (Büyüme paneli ile aynı dil) */
.serp-badge { position: absolute; z-index: 2; top: -8px; right: 0; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); font-size: var(--fs-xs); }
.serp-chip { position: absolute; z-index: 2; left: -44px; bottom: 6px; display: grid; gap: 6px; padding: 14px 18px 12px; border-radius: var(--r-md); min-width: 190px; }
.serp-chip-label { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dark-text-2); }
.serp-chip-row { display: flex; align-items: center; gap: 14px; }
.serp-chip-row strong { font-size: 2.25rem; font-weight: 600; line-height: 1; color: var(--wa-beyaz); min-width: 2ch; }
.serp-path { flex: none; overflow: visible; }
.serp-path line { stroke: var(--wa-mor-10); stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity 250ms var(--ease); }
.serp-path circle { fill: rgba(255, 255, 255, 0.28); transition: fill 250ms var(--ease); }
.serp-path .on { opacity: 1; }
.serp-path circle.on { fill: var(--wa-mor-10); }
.serp-path circle.is-goal.on { fill: #7BE0A5; }
.serp-chip-gain { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #7BE0A5; opacity: 0; transition: opacity 250ms var(--ease); }
.serp-wrap.is-moving .serp-chip-gain, .serp-wrap.is-top .serp-chip-gain { opacity: 1; }
.serp-wrap .panel-note { left: auto; right: 8px; bottom: 16px; }
@media (max-width: 1080px) {
  .serp-tabs, .serp-list { padding-left: 18px; }
}
@media (max-width: 720px) {
  .serp-wrap { padding: 0 0 64px; }
  .serp-head { padding: 12px 12px 8px; gap: 10px; }
  .serp-logo { width: 56px; }
  .serp-search { height: 34px; font-size: 13px; }
  .serp-tabs { gap: 14px; padding: 0 12px; }
  .serp-list { padding: 4px 12px 10px; }
  .serp-item { padding: 9px 10px; margin: 0 -10px; }
  .serp-title { font-size: 14.5px; }
  .serp-snip { -webkit-line-clamp: 1; }
  .serp-chip { left: 8px; bottom: 6px; padding: 10px 14px; min-width: 0; }
  .serp-chip-row strong { font-size: 1.5rem; }
  .serp-badge { display: none; }
  .serp-wrap .panel-note { bottom: 22px; right: 8px; max-width: 45%; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .serp-rich, .serp-chip-gain { transition: none; }
}

/* ---------- Slider: üst satır ---------- */
.s-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.s-top .eyebrow { min-width: 0; }
@keyframes m-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes m-breathe { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.9; } }

/* ---------- Paket kartları v2: başlık satırında ad + fiyat/etiket, "birlikte belirleyelim" alanı, çizgili liste ----------
   Tablet ve telefonda kartlar yan yana kaydırılır (scroll-snap, sağda sonraki kartın kenarı görünür); masaüstünde ızgara. */
.pkg { position: relative; }
.pkg-ribbon { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 5px 12px; border-radius: var(--r-full); background: var(--wa-mor-10); color: var(--wa-mor-90); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 6px 18px rgba(10, 0, 30, 0.3); }
.pkg-top { align-items: baseline; }
.pkg-amount { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.pkg-amount strong { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.01em; }
.pkg-amount small { font-size: var(--fs-xs); color: var(--text-2); }
.pkg-amount.is-quote strong { font-size: 1.25rem; }
.pkg.featured .pkg-amount small { color: var(--dark-text-2); }
.pkg-pill { flex: none; padding: 4px 11px; border-radius: var(--r-full); border: 1px solid var(--line-strong); font-size: 12px; font-weight: 500; color: var(--text-2); }
.pkg.featured .pkg-pill { border-color: var(--glass-border); color: var(--wa-mor-10); }
.pkg-for { margin-top: 6px; min-height: 2.9em; font-size: var(--fs-sm); line-height: 1.45; color: var(--accent); }
.pkg.featured .pkg-for { color: var(--wa-mor-10); }
/* Fiyat yerine: danışmanlıkta kapsam önce konuşulur. Fiyatlı kartla aynı yükseklik: hizalar bozulmaz */
.pkg-decide { margin-top: var(--s-5); min-height: 92px; display: grid; gap: 4px; align-content: center; padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--bg-soft); }
.pkg.featured .pkg-decide { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--glass-border); }
.pkg-decide .pkg-quote { font-size: var(--fs-base); font-weight: 600; line-height: 1.35; }
.pkg-decide .pkg-renew { margin-top: 0; line-height: 1.45; }
.pkg-decide.is-priced { background: none; border: 0; padding: 0; min-height: 0; margin-top: var(--s-2); }
.pkg .btn { margin-top: var(--s-5); }
.pkg-top + .pkg-for + .pkg-renew { display: block; margin-top: var(--s-2); }
/* Liste: maddeler ince çizgiyle ayrılır */
.pkg-list { gap: 0; }
.pkg-list li { padding: 11px 0; }
.pkg-list li + li { border-top: 1px solid var(--line); }
.pkg.featured .pkg-list li + li { border-top-color: var(--dark-line); }
.pkg-list li:first-child { padding-top: 4px; }
/* Kaydırma noktaları: yalnız kaydırmalı düzende */
.pkg-dots { display: none; }
.pkg-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.28); cursor: pointer; transition: background-color var(--d-base) var(--ease); }
.pkg-dot[aria-current="true"] { background: var(--wa-mor-10); }
/* Karar şeridi: kararsız ziyaretçi için asistan */
.pkg-help { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); margin-top: var(--s-7); padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); border-radius: var(--r-lg); }
.pkg-help-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; box-shadow: 0 0 0 2px rgba(209, 193, 255, 0.55); }
.pkg-help p { margin: 0; display: grid; gap: 2px; }
.pkg-help strong { font-weight: 600; color: var(--wa-beyaz); }
.pkg-help span { font-size: var(--fs-sm); color: var(--dark-text-2); }
.pkg-help .btn { gap: 8px; }

@media (max-width: 1080px) {
  .pkgs { display: flex; grid-template-columns: none; max-width: none; gap: var(--s-4); margin-inline: calc(var(--gutter) * -1); padding: 18px var(--gutter) 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .pkgs::-webkit-scrollbar { display: none; }
  .pkgs > .pkg { flex: 0 0 calc((100% - var(--s-4)) / 2.15); scroll-snap-align: start; }
  .pkgs > .pkg-setup { flex-basis: 100%; }
  .pkg-dots { display: flex; justify-content: center; gap: 10px; margin-top: var(--s-4); }
}
@media (max-width: 719px) {
  .pkgs > .pkg { flex-basis: 86%; padding: var(--s-5); }
  /* Dar kartta platform satırı tek satır kalsın (7 karo) */
  .pkgs .pkg-platforms-list { gap: 5px; flex-wrap: nowrap; }
  .pkgs .pkg-ico { width: 28px; height: 28px; border-radius: 9px; }
  .pkgs .pkg-ico img { width: 15px; height: 15px; }
  .pkg-help { grid-template-columns: auto minmax(0, 1fr); padding: var(--s-4); margin-top: var(--s-6); }
  .pkg-help .btn { grid-column: 1 / -1; width: 100%; }
}

/* ---------- Hizmetler: dönen kısa cümleler ----------
   Açıklamanın altında ince hap; cümleler aynı ızgara hücresinde üst üste durur (hap en uzun cümle kadar, geçişte zıplamaz).
   Yalnız saydamlık ve konum, 400 ms (site.js "Dönen cümleler"). */
.svc-rotator { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: calc(var(--s-8) * -1 + var(--s-5)) 0 var(--s-7); padding: 9px 18px 9px 14px; border-radius: var(--r-full); background: var(--bg-soft); border: 1px solid var(--line); }
.on-dark .svc-rotator { background: var(--glass-bg); border-color: var(--glass-border); box-shadow: var(--glass-highlight); }
.svc-rotator-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: m-breathe 2400ms infinite; }
.svc-rotator-track { display: grid; min-width: 0; }
.svc-rotator-line { grid-area: 1 / 1; font-size: var(--fs-sm); font-weight: 500; line-height: 1.45; color: var(--text); opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.on-dark .svc-rotator-line { color: var(--wa-beyaz); }
.svc-rotator-line.is-on { opacity: 1; transform: none; }
.svc-rotator-line.is-out { opacity: 0; transform: translateY(-6px); }
@media (max-width: 719px) {
  .svc-rotator { display: flex; border-radius: var(--r-md); align-items: flex-start; padding: 12px 14px; margin-top: calc(var(--s-7) * -1 + var(--s-4)); }
  .svc-rotator-dot { margin-top: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-rotator-dot { animation: none; }
  .svc-rotator-line { transition: none; }
}

/* ---------- Slider: mobil/dikey tablet arka plan çizimi (≤899 px) ----------
   Büyük görseller gizliyken slaytın konusunu anlatan ince çizgili çizim, sağ üstten kenara taşar, metnin arkasındadır.
   Slayt açılınca kendini çizer; sonra sakin döngü. Yalnız konum ve saydamlık (+ çizgi çizimi). */
.s-text { position: relative; isolation: isolate; }
.s-art { display: none; }
@media (max-width: 899px) {
  .s-art { display: block; position: absolute; z-index: -1; top: -34px; right: calc(var(--gutter) * -1 - 40px); width: 236px; height: 236px; color: var(--wa-mor-10); opacity: 0.5; pointer-events: none; }
  .s-art svg { width: 100%; height: 100%; overflow: visible; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .s-art { width: 320px; height: 320px; top: -56px; right: -24px; opacity: 0.45; }
}
@keyframes a-draw { to { stroke-dashoffset: 0; } }
@keyframes a-climb { 0%, 16% { transform: translateY(0); } 30%, 36% { transform: translateY(-32px); } 50%, 56% { transform: translateY(-64px); } 70%, 76% { transform: translateY(-96px); } 90%, 100% { transform: translateY(-128px); } }
@keyframes a-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes a-ripple { 0% { opacity: 0; } 30% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes a-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* SEO: satırlar belirir, marka çizgisi basamak basamak tepeye tırmanır, tepede parıltı */
.s-art .a-row, .s-art .a-spark { opacity: 0; }
.slide.is-active .s-art .a-row { animation: m-in 400ms calc(var(--i) * 80ms + 100ms) both; }
.slide.is-active .s-art .a-climb { animation: a-climb 3200ms var(--ease) 500ms both; }
.slide.is-active .s-art .a-spark { animation: m-breathe 2400ms 3600ms infinite; }
/* Büyüme: eğri çizilir, parlak nokta eğri boyunca ilerler, tepede halka nefes alır */
.s-art .a-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.s-art .a-head { offset-path: path("M20 190 C70 184 86 150 118 136 S168 92 204 30"); offset-rotate: 0deg; offset-distance: 0%; opacity: 0; }
.s-art .a-ring { opacity: 0; }
.slide.is-active .s-art[data-art="growth"] .a-draw { animation: a-draw 1800ms var(--ease) 200ms forwards; }
.slide.is-active .s-art .a-head { opacity: 1; animation: a-travel 1800ms var(--ease) 200ms both; }
.slide.is-active .s-art .a-ring { animation: m-breathe 2200ms 2000ms infinite; }
/* Tanışalım: merkezden dışa ses dalgası */
.s-art .a-wave { opacity: 0; }
.slide.is-active .s-art .a-wave { animation: a-ripple 3000ms calc(var(--i) * 550ms) infinite; }
/* GEO: bağlantılar çizilir, düğümler belirir, merkezde yıldız */
.s-art .a-link { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.7; }
.s-art .a-edge { opacity: 0.35; }
.s-art .a-node, .s-art .a-star { opacity: 0; }
.slide.is-active .s-art .a-node { animation: m-in 300ms calc(var(--i) * 120ms + 100ms) both; }
.slide.is-active .s-art .a-link { animation: a-draw 600ms var(--ease) calc(var(--i) * 120ms + 300ms) forwards; }
.slide.is-active .s-art .a-edge { animation: a-draw 600ms var(--ease) calc(var(--i) * 100ms + 1100ms) forwards; }
.slide.is-active .s-art .a-star { animation: m-in 400ms 1500ms both, m-breathe 2400ms 1900ms infinite; }
/* Web tasarım: çerçeve çizilir, bloklar sırayla yerine oturur */
.s-art .a-block { opacity: 0; }
.slide.is-active .s-art[data-art="browser"] .a-draw { animation: a-draw 1100ms var(--ease) 100ms forwards; }
.slide.is-active .s-art .a-block { animation: a-rise 400ms var(--ease) calc(var(--i) * 180ms + 900ms) both; }
@media (prefers-reduced-motion: reduce) {
  .slide .s-art * { animation: none !important; }
  .s-art .a-row, .s-art .a-spark, .s-art .a-ring, .s-art .a-node, .s-art .a-star, .s-art .a-block, .s-art .a-head { opacity: 1; }
  .s-art .a-draw, .s-art .a-link { stroke-dashoffset: 0; }
  .s-art .a-climb { transform: translateY(-128px); }
  .s-art .a-head { offset-distance: 100%; }
  .s-art .a-wave:nth-child(2) { opacity: 0.6; }
}

/* ---------- Açık giriş (ferah) ----------
   Slider'ın varsayılan zemini (panelde "Zemin: Açık"): beyaz ve çok hafif lila, koyu yazı; mor yalnız vurgu kelimesinde,
   düğmede ve ince çizgilerde. Koyu temanın cam ve metin değişkenleri bu kapsamda açık karşılıklarına döner, böylece
   paneller (arama sonucu, büyüme, video, sohbet, tarayıcı) aynı işaretlemeyle beyaz cam kart olur. Işık lekeleri çok soluk, ızgara yok. */
.hero-light {
  position: relative; isolation: isolate; color: var(--text);
  background: radial-gradient(120% 90% at 85% 0%, #F3EEFF 0%, rgba(243, 238, 255, 0) 55%), linear-gradient(180deg, #FCFBFF 0%, var(--wa-beyaz) 100%);
  --dark-text: var(--text);
  --dark-text-2: var(--text-2);
  --dark-line: var(--line);
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-strong: var(--wa-beyaz);
  --glass-border: rgba(44, 4, 93, 0.09);
  --glass-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 100%);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(44, 4, 93, 0.04), 0 24px 56px -32px rgba(44, 4, 93, 0.22);
  --glass-fallback: var(--wa-beyaz);
}
.hero-light .hero-bg .blob-a { background: radial-gradient(closest-side, rgba(135, 62, 255, 0.10), rgba(135, 62, 255, 0.04) 55%, transparent); }
.hero-light .hero-bg .blob-b { background: radial-gradient(closest-side, rgba(209, 193, 255, 0.28), rgba(209, 193, 255, 0.1) 55%, transparent); }
.hero-light .hero-bg .blob-c { display: none; }
.hero-light .w-hero { background: var(--wa-mor-40); opacity: 0.035; }
.hero-light :focus-visible { outline-color: var(--accent); }
/* Yazılar */
.hero-light .slide-title .accent, .hero-light h1 .accent { color: var(--accent); }
.hero-light .quote { border-left-color: var(--accent); }
.hero-light .eyebrow { color: var(--text); }
.hero-light .trust-item strong, .hero-light .geo-list strong { color: var(--text); }
.hero-light .stars { color: var(--accent); }
.hero-light .logo-cycle { border-left-color: var(--line-strong); }
.hero-light .logo-cycle img { filter: none; opacity: 1; }
/* Düğmeler ve slayt seçici */
.hero-light .btn-glass { color: var(--text); }
.hero-light .btn-glass:hover { border-color: rgba(135, 62, 255, 0.35); }
.hero-light .seg { color: var(--text-2); }
.hero-light .seg:hover, .hero-light .seg[aria-selected="true"] { color: var(--text); }
.hero-light .seg[aria-selected="true"] { background: var(--accent-soft); }
.hero-light .seg .seg-no { color: var(--accent); }
.hero-light .seg .seg-bar { background: rgba(44, 4, 93, 0.1); }
.hero-light .seg .seg-fill { background: var(--accent); }
.hero-light .icon-btn { color: var(--text); }
/* Büyüme paneli */
.hero-light .panel-kpi, .cards-light .panel-kpi { background: var(--bg-soft); border-color: var(--line); }
.hero-light .panel-chart path.line, .cards-light .panel-chart path.line { stroke: var(--accent); }
.hero-light .panel-chart path.area, .cards-light .panel-chart path.area { opacity: 0.4; }
.hero-light .panel-float strong, .cards-light .panel-float strong { color: var(--text); }
.hero-light .panel-note, .cards-light .panel-note { color: var(--text-2); }
/* Video */
.hero-light .video-play, .hero-light .video-cap strong { color: var(--text); }
/* Sohbet (GEO) */
.hero-light .chat-q, .cards-light .chat-q { background: #F1ECFF; color: var(--wa-mor-90); }
.hero-light .chat-a, .cards-light .chat-a { background: var(--bg-soft); }
.hero-light .chat-a strong, .cards-light .chat-a strong { color: var(--text); }
.hero-light .cite, .cards-light .cite { background: var(--accent-soft); color: var(--accent-press); }
/* Tarayıcı (web tasarım) */
.hero-light .browser-bar i, .cards-light .browser-bar i { background: rgba(44, 4, 93, 0.14); }
.hero-light .browser-url, .cards-light .browser-url { background: var(--bg-soft); }
.hero-light .mock-hero, .cards-light .mock-hero { background: linear-gradient(120deg, rgba(135, 62, 255, 0.22), rgba(209, 193, 255, 0.28)); }
.hero-light .mock-hero::after, .cards-light .mock-hero::after { background: rgba(44, 4, 93, 0.55); box-shadow: 0 22px 0 -2px rgba(44, 4, 93, 0.2); }
.hero-light .mock-row span, .cards-light .mock-row span { background: var(--bg-soft); border-color: var(--line); }
/* Arama sonucu: Google'ın açık görünümü */
.hero-light .serp, .cards-light .serp { color: var(--text); }
.hero-light .serp-logo, .cards-light .serp-logo { filter: none; }
.hero-light .serp-search, .cards-light .serp-search { background: var(--wa-beyaz); border-color: rgba(44, 4, 93, 0.12); box-shadow: 0 1px 6px rgba(32, 33, 36, 0.12); color: #202124; }
.hero-light .serp-search svg, .cards-light .serp-search svg { color: var(--accent); }
.hero-light .serp-tabs .is-on, .cards-light .serp-tabs .is-on { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.hero-light .serp-fav, .cards-light .serp-fav { background: var(--bg-soft); }
.hero-light .serp-name, .cards-light .serp-name { color: var(--text); }
.hero-light .serp-title, .cards-light .serp-title { color: #1A0DAB; }
.hero-light .serp-snip, .cards-light .serp-snip { color: #4D5156; }
.hero-light .serp-item.is-brand, .cards-light .serp-item.is-brand { background: linear-gradient(180deg, rgba(135, 62, 255, 0.09), rgba(135, 62, 255, 0.04)); border-color: rgba(135, 62, 255, 0.3); box-shadow: 0 14px 32px -18px rgba(44, 4, 93, 0.35); }
.hero-light .serp-item.is-brand .serp-title, .cards-light .serp-item.is-brand .serp-title { color: var(--accent-press); }
.hero-light .serp-rich::first-letter, .cards-light .serp-rich::first-letter { color: var(--text); }
.hero-light .serp-chip-row strong, .cards-light .serp-chip-row strong { color: var(--text); }
.hero-light .serp-path line, .cards-light .serp-path line { stroke: var(--accent); }
.hero-light .serp-path circle, .cards-light .serp-path circle { fill: rgba(44, 4, 93, 0.12); }
.hero-light .serp-path circle.on, .cards-light .serp-path circle.on { fill: var(--accent); }
.hero-light .serp-path circle.is-goal.on, .cards-light .serp-path circle.is-goal.on { fill: #1E9E5A; }
.hero-light .serp-chip-gain, .cards-light .serp-chip-gain { color: #1E9E5A; }
/* Telefon ve dikey tablet çizimleri: mor ince çizgi, çok soluk */
.hero-light .s-art { color: var(--accent); opacity: 0.2; }
.hero-light .s-art [fill="#fff"], .hero-light .s-art [fill="#D1C1FF"] { fill: currentColor; }
.hero-light .s-art [stroke="#fff"], .hero-light .s-art [stroke="#D1C1FF"] { stroke: currentColor; }
.hero-light .s-art stop { stop-color: currentColor; }
@media (min-width: 600px) and (max-width: 899px) { .hero-light .s-art { opacity: 0.18; } }

/* ---------- Koyu giriş (sade) ----------
   Slider "Zemin: Koyu": derin, sakin Mor 90 zemin; görselin arkasında tek yumuşak ışık. Izgara ve arka plandaki büyük W yok
   (kompozisyonların kendi W'si var). Arama sonucu, tarayıcı, sohbet ve büyüme paneli .cards-light ile net beyaz kart olur. */
.hero.hero-dark { background: radial-gradient(52% 62% at 76% 46%, rgba(135, 62, 255, 0.2) 0%, rgba(135, 62, 255, 0) 72%), linear-gradient(180deg, #210442 0%, var(--wa-mor-90) 100%); }
.hero-dark .hero-bg .blob-a { background: radial-gradient(closest-side, rgba(135, 62, 255, 0.16), rgba(135, 62, 255, 0.05) 55%, transparent); }
.hero-dark .hero-bg .blob-b { background: radial-gradient(closest-side, rgba(114, 14, 236, 0.12), transparent 70%); }
.hero-dark .hero-bg .blob-c, .hero-dark .w-hero { display: none; }
.hero-dark .s-art { opacity: 0.22; }
.hero-dark .seg-list.glass { background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.08); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-dark .icon-btn { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); box-shadow: none; }
.hero-dark .lead { color: rgba(255, 255, 255, 0.76); }
.cards-light {
  display: contents; color: var(--text);
  --dark-text: var(--text);
  --dark-text-2: var(--text-2);
  --dark-line: var(--line);
  --glass-bg: rgba(255, 255, 255, 0.97);
  --glass-bg-strong: var(--wa-beyaz);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-surface: var(--wa-beyaz);
  --glass-highlight: 0 30px 70px -30px rgba(10, 0, 30, 0.65), 0 2px 6px rgba(10, 0, 30, 0.18);
  --glass-fallback: var(--wa-beyaz);
}

/* ---------- Premium koyu slider: "sabit sahne" (29.09) ----------
   Slaytlar arasında yalnız içerik değişir; konum, ölçek ve ışık sabit kalır. Her görsel aynı sahne kutusunda (kompozisyonların
   oranı 1200:1062; 1440'ta 511x452), metin tek eksende ve üstten asılı (kaş, başlık ve düğmeler her slaytta aynı yükseklikte).
   Başlık = metin sütunu / 14 (32-48 px), satır 1,125. Ritim 8 pt: kaş 32 · 16 · başlık · 24 · açıklama · 32 · düğmeler · 48.
   Tek sabit ışık, ince çizgiler, 60 ms vuruşlu geçiş; sürekli dönen tek şey ilerleme çizgisi. */
@media (min-width: 1081px) { .hero.slider { padding-top: calc(12px + 64px + var(--s-7)); } }
@media (min-width: 1081px) and (max-height: 760px) { .hero.slider { padding-top: calc(12px + 64px + var(--s-5)); } .hero.slider .slider-ui { margin-top: var(--s-6); } }
.hero .s-text { container-type: inline-size; }
.hero .slide-title { margin-top: var(--s-4); max-width: 14em; font-size: clamp(2rem, 3.1vw, 2.75rem); font-size: clamp(2rem, calc(100cqi / 14), 3rem); font-weight: 600; line-height: 1.125; letter-spacing: -0.02em; }
.hero .slide .lead { text-wrap: pretty; }
.slide .hero-actions .btn { font-size: 1rem; }
.hero-dark .slide .eyebrow.glass { padding: 5px 14px 5px 6px; line-height: 20px; background: none; border-color: rgba(209, 193, 255, 0.28); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-dark .slide .hero-actions .btn-glass { background: transparent; border-color: rgba(255, 255, 255, 0.28); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero-dark .slide .hero-actions .btn-glass:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.5); }
@media (min-width: 900px) {
  .hero .slides { align-items: stretch; align-content: center; }
  .hero .slide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
  .hero .slide .lead { min-height: calc(var(--hero-lead-lines, 4) * 1.6em); }
  .s-stage, .s-stage.cards-light { position: relative; min-width: 0; width: 100%; aspect-ratio: 1200 / 1062; align-self: center; display: grid; place-items: center; }
  .s-stage > .s-visual { width: 100%; }
  /* Arama sonucu sahnede */
  .s-stage .serp-wrap { padding: 0; }
  .s-stage .serp-head { padding: 12px 18px 8px; }
  .s-stage .serp-tabs span { padding: 6px 0 7px; }
  .s-stage .serp-list { padding-top: 4px; padding-bottom: 10px; }
  .s-stage .serp-item:not(.is-brand) { padding-top: 7px; padding-bottom: 7px; }
  .s-stage .serp-item.is-brand .serp-snip { -webkit-line-clamp: 1; }
  .s-stage .serp-badge { top: -16px; }
  .s-stage .serp-chip { left: -24px; bottom: -16px; }
  /* Müşteri videosu sahneyi doldurur; oynat düğmesi yüzü kapatmaz (sol alt), okunur koyu zemin */
  .s-stage > figure.s-visual { height: 100%; }
  .s-stage .video-frame { height: 100%; padding: 0; background: none; border: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 24px 48px -24px rgba(0, 0, 0, 0.55); }
  .s-stage .video-frame video { aspect-ratio: auto; height: 100%; border-radius: var(--r-lg); }
  .s-stage .video-play { left: var(--s-5); top: auto; bottom: var(--s-5); transform: none; transform-origin: left bottom; background: rgba(44, 4, 93, 0.78); }
  .s-stage .video-play:hover { transform: scale(1.03); background: rgba(44, 4, 93, 0.9); }
  .s-stage .video-cap { display: none; }
  /* Tarayıcı çerçevesi sahneyi doldurur; rozet kapsayıcı kenarını taşmaz */
  .s-stage > .s-visual:has(> .browser) { align-self: stretch; height: 100%; }
  .s-stage .browser { height: 100%; display: grid; grid-template-rows: auto 1fr; }
  .s-stage .browser-body { grid-template-rows: 3fr 2fr 2fr; min-height: 0; }
  .s-stage .mock-hero, .s-stage .mock-row span { height: auto; }
  .s-stage .mock-badge { right: var(--s-5); bottom: calc(var(--s-4) * -1); }
}
@media (max-width: 899px) { .s-stage, .s-stage.cards-light { display: contents; } }
/* Tarayıcı taslağı (koyu tema): gri iskelet yerine tasarlanmış sayfa */
.hero-dark .cards-light .mock-hero { background: radial-gradient(60% 90% at 85% 20%, rgba(135, 62, 255, 0.45), rgba(135, 62, 255, 0) 70%), var(--wa-mor-90); }
.hero-dark .cards-light .mock-hero::after { left: 24px; top: 28px; width: 46%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 22px 0 -2px rgba(255, 255, 255, 0.4); }
.hero-dark .cards-light .mock-hero::before { content: ""; position: absolute; left: 24px; bottom: 24px; width: 88px; height: 28px; border-radius: var(--r-full); background: var(--wa-mor-40); }
.hero-dark .cards-light .mock-row span { border-color: rgba(44, 4, 93, 0.08); background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)) 12px calc(100% - 28px) / 62% 8px no-repeat, linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06)) 12px calc(100% - 14px) / 38% 8px no-repeat, linear-gradient(180deg, rgba(209, 193, 255, 0.55), rgba(209, 193, 255, 0.28)) 0 0 / 100% 56% no-repeat, var(--wa-beyaz); }
.slider .mock-badge-ic::after { animation: none; display: none; }
/* Arama sonucu: marka kartı opak, artış yeşili koyu (AA) */
.cards-light .serp-item.is-brand { background: linear-gradient(180deg, rgba(135, 62, 255, 0.09), rgba(135, 62, 255, 0.04)), var(--wa-beyaz); }
.cards-light .serp-chip-gain { color: #137A43; }
/* Video halkası yalnız etkin slaytta, iki kez */
.video-play .pp { animation: none; }
.slide.is-active .video-play .pp { animation: ring 2.4s var(--ease) 1.2s 2; }
@media (prefers-reduced-motion: reduce) { .video-play .pp, .slide.is-active .video-play .pp { animation: none; } }
/* Masaüstü sekme şeridi: editoryal, tek eksen, tek ilerleme çizgisi; önceki/sonraki yerine yalnız durdur */
@media (min-width: 720px) {
  .hero-dark .slider-ui { justify-content: flex-start; gap: var(--s-2); }
  .hero-dark .seg-list.glass { flex: 0 1 816px; padding: 0; gap: 0; background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-dark .seg { flex: 1 1 0; min-width: 0; padding: 12px 24px 16px 0; line-height: 20px; border-radius: 0; color: rgba(255, 255, 255, 0.64); text-align: left; }
  .hero-dark .seg:hover, .hero-dark .seg[aria-selected="true"] { background: none; color: var(--wa-beyaz); }
  .hero-dark .seg .seg-no { color: inherit; }
  .hero-dark .seg[aria-selected="true"] .seg-no { color: var(--wa-mor-10); }
  .hero-dark .seg .seg-bar { left: 0; right: 24px; bottom: 6px; background: rgba(255, 255, 255, 0.12); }
  .hero-dark .seg.is-done .seg-fill { transform: scaleX(0); }
  .hero-dark .slider-btns .prev, .hero-dark .slider-btns .next { display: none; }
  .hero-dark .slider-btns .icon-btn.toggle { width: 44px; height: 44px; background: none; border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
  .hero-dark .slider-btns .icon-btn.toggle:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.28); }
}
/* Telefon: ikinci düğme metin bağlantısı; hikâye çizgilerinin arkasındaki kutu yok; durdur 44 px; güven satırı yok */
@media (max-width: 719px) {
  .hero-dark .slide .hero-actions { gap: var(--s-1); }
  .hero-dark .slide .hero-actions .btn-glass, .hero-dark .slide .hero-actions .btn-glass:hover { min-height: 44px; background: none; border-color: transparent; box-shadow: none; color: var(--wa-mor-10); }
  .hero-dark .seg-list.glass { background: none; border: 0; box-shadow: none; }
  .slider-btns .icon-btn.toggle { width: 44px; height: 44px; }
  .slide .trust { display: none; }
}
/* Tek sabit ışık (sürüklenen ışık lekeleri yok) */
.hero-dark .hero-bg { display: none; }
.hero.hero-dark { background: radial-gradient(40% 50% at 74% 50%, rgba(135, 62, 255, 0.2) 0%, rgba(135, 62, 255, 0) 100%), linear-gradient(180deg, #210442 0%, var(--wa-mor-90) 60%); }
@media (max-width: 899px) { .hero.hero-dark { background: radial-gradient(90% 38% at 100% 0%, rgba(135, 62, 255, 0.18) 0%, rgba(135, 62, 255, 0) 100%), linear-gradient(180deg, #210442 0%, var(--wa-mor-90) 60%); } }
.cards-light { --glass-border: transparent; --glass-highlight: 0 1px 2px rgba(0, 0, 0, 0.2), 0 24px 48px -24px rgba(0, 0, 0, 0.55); }
/* Sürekli döngüler: slider içindeki süzülmeler durur; asistan ve WhatsApp halkası üç kez atıp dinlenir */
.slider .float-a, .slider .float-b { animation: none; }
.assist-btn { animation: none; }
.assist-ring { animation: assist-ring 2.6s var(--ease) 2s 3; opacity: 0.5; }
.wa-float::after { animation: assist-ring 2.6s var(--ease) 3.3s 3; opacity: 0.4; }

/* ---------- Slider seçici, telefon: hikâye çizgileri ----------
   Hap kutusu ve numaralar yok; her slayt tam genişlikte ince bir ilerleme çizgisi (dokunma alanı çizginin üstü ve altı).
   Numara ve ad ekran okuyucu için görünmeden kalır. Otomatik akışı durdurma düğmesi küçük, çerçevesiz. */
@media (max-width: 719px) {
  .slider-ui { gap: var(--s-3); margin-top: var(--s-6); }
  .seg-list, .seg-list.glass { flex: 1; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .seg, .seg[aria-selected="true"], .hero-light .seg[aria-selected="true"] { flex: 1; min-width: 0; padding: 14px 0; border-radius: 0; background: none; }
  .seg .seg-no, .seg .seg-label { display: inline; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .seg .seg-bar { position: relative; left: auto; right: auto; bottom: auto; display: block; height: 3px; }
  .slider-btns .icon-btn.toggle { width: 32px; height: 32px; border: 0; background: none; box-shadow: none; }
}

/* ---------- Üst menü düğmesi: koyu mor, sade ----------
   Açık zeminde logo W'siyle aynı koyu mor (Mor 90) dolgu; koyu zeminde beyaz dolgu, koyu mor yazı (kontrast korunur).
   9 sn'de bir çok hafif bir parıltı geçer; üzerine gelince ok 3 px ilerler. "Hareketi azalt" açıksa hareket yok. */
.header-cta .btn-primary { position: relative; overflow: hidden; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.header-cta .btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
  transform: translateX(0) skewX(-18deg); animation: cta-sheen 9s cubic-bezier(0.45, 0, 0.25, 1) 3s infinite;
}
@keyframes cta-sheen { 0% { transform: translateX(0) skewX(-18deg); } 14%, 100% { transform: translateX(420%) skewX(-18deg); } }
@media (prefers-reduced-motion: reduce) {
  .header-cta .btn-primary::after { animation: none; display: none; }
}

/* ---------- Başlık kırılımı ----------
   Başlıklar dengeli kırılır: tek kelime alt satırda yalnız kalmaz ("Google'da / rakiplerinizin önüne / geçin." yerine
   "Google'da rakiplerinizin / önüne geçin."). Geniş ekranda slayttaki vurgulu ifade bölünmez. */
h1, h2, h3, .slide-title { text-wrap: balance; }
/* Vurgu bölünebilir: uzun vurgular (ör. "yapay zekâ aramalarına") tek satıra zorlanınca başlık görsel sütununa taşıyordu */

/* ---------- Web tasarım slaytı: ödül rozeti (fiyat kartının yerinde) ----------
   Mor degrade daire içinde madalya, yanında iki satır; daire üzerinden yavaşça ışık geçer. */
.mock-badge { position: absolute; right: -14px; bottom: -22px; display: flex; align-items: center; gap: var(--s-3); padding: 12px 18px 12px 12px; border-radius: var(--r-full); }
.mock-badge-ic { position: relative; overflow: hidden; flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, var(--wa-mor-40), var(--wa-mor-70)); box-shadow: 0 6px 16px -6px rgba(135, 62, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.mock-badge-ic::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%); transform: translateX(-100%); animation: badge-sheen 6s ease-in-out 1.5s infinite; }
@keyframes badge-sheen { 0% { transform: translateX(-100%); } 20%, 100% { transform: translateX(100%); } }
.mock-badge-txt { display: grid; line-height: 1.2; }
.mock-badge-txt small { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wa-mor-10); }
.hero-light .mock-badge-txt small, .cards-light .mock-badge-txt small { color: var(--accent); }
.mock-badge-txt strong { font-size: var(--fs-base); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .mock-badge-ic::after { animation: none; display: none; } }

/* ---------- Tanıtım videosu: sinema sahnesi (ana sayfa, logoların altı) ----------
   Koyu sahne (Mor 90 + siyaha inen kenarlar), ortada büyük 16:9 video. Çerçevenin kenarında yavaşça dönen ince ışık,
   altında mor ortam ışığı, ortada nabız halkalı oynat düğmesi; sol altta anlatan kişi, sağ altta W işareti.
   Önizleme sessiz ve yalnız ekrana gelince oynar (site.js "Tanıtım videosu pencereleri"). */
.vs-cinema { background: radial-gradient(90% 70% at 50% 45%, rgba(135, 62, 255, 0.22), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.35)), var(--wa-mor-90); overflow: hidden; }
.vs-aura { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 65%); mask-image: radial-gradient(ellipse at 50% 55%, #000 10%, transparent 65%); }
.vs-head { max-width: 46rem; margin-inline: auto; text-align: center; }
.vs-head h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); }
.vs-stage { position: relative; max-width: 1040px; margin: var(--s-8) auto 0; }
.vs-stage::before { content: ""; position: absolute; left: 8%; right: 8%; top: 18%; bottom: -10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(135, 62, 255, 0.55), rgba(135, 62, 255, 0.18) 55%, transparent); }
@property --vs-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.vs-frame { position: relative; padding: 1.5px; border-radius: 30px; overflow: hidden; isolation: isolate;
  background: conic-gradient(from var(--vs-a), rgba(209, 193, 255, 0.12) 0deg, rgba(209, 193, 255, 0.85) 60deg, rgba(135, 62, 255, 0.25) 130deg, rgba(209, 193, 255, 0.12) 200deg, rgba(209, 193, 255, 0.12) 360deg);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.7); animation: vs-spin 9s linear infinite; }
@keyframes vs-spin { to { --vs-a: 360deg; } }
.vs-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 28.5px; background: radial-gradient(circle at 50% 40%, #3a0a78, #1c033d); }
.vs-shade { position: absolute; inset: 1.5px; border-radius: 28.5px; pointer-events: none; background: linear-gradient(180deg, rgba(10, 0, 25, 0.35) 0%, transparent 22%, transparent 55%, rgba(10, 0, 25, 0.75) 100%); }
.vs-play { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(44, 4, 93, 0.35); cursor: pointer; transition: transform var(--d-base) var(--ease), background-color var(--d-base) var(--ease); }
.vs-play::before, .vs-play::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(209, 193, 255, 0.55); animation: vs-pulse 2.8s var(--ease) infinite; pointer-events: none; }
.vs-play::after { animation-delay: 1.4s; }
@keyframes vs-pulse { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.75); opacity: 0; } }
.vs-play .pp { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); box-shadow: 0 12px 32px -8px rgba(135, 62, 255, 0.85); }
.vs-play .pp svg { margin-left: 3px; }
.vs-play:hover { transform: scale(1.06); background: rgba(44, 4, 93, 0.5); }
.vs-meta { position: absolute; left: 22px; top: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-full); background: rgba(10, 0, 25, 0.45); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 12px; font-weight: 500; color: var(--wa-beyaz); }
.vs-meta i { width: 7px; height: 7px; border-radius: 50%; background: var(--wa-mor-10); animation: m-breathe 2400ms infinite; }
.vs-person { position: absolute; left: 26px; bottom: 22px; display: grid; gap: 2px; text-align: left; }
.vs-person strong { font-size: var(--fs-lg); font-weight: 600; color: var(--wa-beyaz); }
.vs-person span { font-size: var(--fs-sm); color: var(--dark-text-2); }
.vs-mark { position: absolute; right: 26px; bottom: 26px; width: 36px; height: auto; opacity: 0.85; }
.vs-foot { margin-top: var(--s-7); display: grid; justify-items: center; gap: var(--s-5); text-align: center; }
.vs-quote { max-width: 40rem; font-size: var(--fs-lg); line-height: 1.55; color: var(--dark-text-2); }
.vs-foot .hero-actions { margin-top: 0; justify-content: center; }
@media (max-width: 720px) {
  .vs-stage { margin-top: var(--s-6); }
  .vs-frame { border-radius: 20px; }
  .vs-frame video, .vs-shade { border-radius: 18.5px; }
  .vs-play { width: 76px; height: 76px; margin: -38px 0 0 -38px; }
  .vs-play .pp { width: 52px; height: 52px; }
  .vs-meta { left: 12px; top: 12px; font-size: 11px; padding: 4px 10px; }
  .vs-person { left: 14px; bottom: 12px; }
  .vs-person strong { font-size: var(--fs-sm); }
  .vs-person span { font-size: 12px; }
  .vs-mark { right: 14px; bottom: 16px; width: 26px; }
  .vs-quote { font-size: var(--fs-base); }
  .vs-foot .hero-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .vs-frame { animation: none; }
  .vs-play::before, .vs-play::after, .vs-meta i { animation: none; }
}

/* ---------- Referanslar + tanıtım videosu (ana sayfa, giriş slider'ının hemen altı) ----------
   Koyu, sade şerit: solda başlık ve 3 sütun logo ızgarası (beyaz tek renk, ince çizgilerle ayrılmış), sağda video kartı.
   Kart, sinema sahnesinin çerçevesini (dönen ince ışık, oynat halkası) küçük ölçekte kullanır; gerçek kişi ve ses, sayfadaki
   temsili görselleri dengeler. */
.vs-brand { background: radial-gradient(70% 90% at 85% 50%, rgba(135, 62, 255, 0.22), transparent 70%), linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.3)), var(--wa-mor-90); overflow: hidden; padding: var(--s-9) 0; }
.vs-brand .vs-aura { -webkit-mask-image: radial-gradient(ellipse at 80% 50%, #000 10%, transparent 60%); mask-image: radial-gradient(ellipse at 80% 50%, #000 10%, transparent 60%); }
.vs-brand-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: center; }
.vs-brand .section-head { margin-bottom: var(--s-6); }
.vs-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--dark-line); border-left: 1px solid var(--dark-line); }
.vs-logos li { position: relative; overflow: hidden; height: 112px; border-right: 1px solid var(--dark-line); border-bottom: 1px solid var(--dark-line); transition: background-color var(--d-base) var(--ease); }
.vs-logos li:hover { background: rgba(255, 255, 255, 0.04); }
/* Yuvadaki logo: değişirken eski yukarı süzülüp bulanıklaşır, yeni aşağıdan netleşerek gelir (site.js "Logo yuvaları") */
.vs-logo { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 var(--s-5); transition: transform 850ms cubic-bezier(0.22, 1, 0.36, 1), opacity 700ms ease, filter 700ms ease; }
.vs-logo.is-enter { opacity: 0; transform: translateY(38%) scale(0.94); filter: blur(8px); }
.vs-logo.is-out { opacity: 0; transform: translateY(-38%) scale(0.94); filter: blur(8px); }
.vs-logos img { max-width: 100%; max-height: 32px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.72; transition: opacity var(--d-base) var(--ease); }
.vs-logos li:hover img { opacity: 1; }
/* Değişim anında yuvada kısa, yumuşak bir ışık */
.vs-logos li::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(60% 80% at 50% 60%, rgba(209, 193, 255, 0.16), transparent 70%); }
.vs-logos li.is-flash::after { animation: logo-flash 1100ms ease-out; }
@keyframes logo-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.vs-logos-link { display: inline-flex; gap: 6px; margin-top: var(--s-5); font-size: var(--fs-sm); font-weight: 500; color: var(--wa-mor-10); }
.vs-logos-link:hover { color: var(--wa-beyaz); }
.vs-card { position: relative; margin: 0; }
.vs-card::before { content: ""; position: absolute; left: 6%; right: 6%; top: 20%; bottom: -8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(135, 62, 255, 0.5), rgba(135, 62, 255, 0.15) 55%, transparent); }
.vs-card .vs-frame { border-radius: 24px; }
.vs-card .vs-frame video, .vs-card .vs-shade { border-radius: 22.5px; }
.vs-card .vs-play { width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.vs-card .vs-play .pp { width: 56px; height: 56px; }
.vs-card-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--dark-text-2); }
.vs-card-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: var(--r-full); border: 1px solid var(--glass-border); background: var(--glass-surface); box-shadow: var(--glass-highlight); color: var(--wa-beyaz); font: inherit; font-size: var(--fs-xs); font-weight: 500; cursor: pointer; transition: background-color var(--d-fast) var(--ease); }
.vs-card-btn:hover { background: var(--glass-bg-strong); }
.vs-card-btn .pp-sm { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); }
.vs-card-btn .pp-sm svg { margin-left: 2px; }
@media (max-width: 1080px) {
  .vs-brand-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
}
@media (max-width: 720px) {
  .vs-brand { padding: var(--s-8) 0; }
  .vs-logos li { height: 76px; }
  .vs-logo { padding: 0 var(--s-3); }
  .vs-logos img { max-height: 24px; }
  .vs-card .vs-frame { border-radius: 18px; }
  .vs-card .vs-frame video, .vs-card .vs-shade { border-radius: 16.5px; }
  .vs-card .vs-play { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
  .vs-card .vs-play .pp { width: 46px; height: 46px; }
  .vs-card-cap { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

/* ---------- Paket kartları: sade görünüm ----------
   Kartlar önce yalnız madde başlıklarıyla açılır (açıklamalar gizli, aralıklar sıkı); "Tüm detayları göster" düğmesi
   bölüme is-detailed ekler ve bütün kartlarda açıklamalar birlikte açılır. Platform satırı küçüldü. */
.pkg-list li { padding: 9px 0; }
.pkg-list li:first-child { padding-top: 2px; }
.pkg-item-text { font-weight: 500; line-height: 1.4; }
.pkg-item-note { display: none; }
.is-detailed .pkg-item-note { display: block; animation: m-in 300ms ease both; }
.is-detailed .pkg-list li { padding: 11px 0; }
.pkg-list-title { margin-top: var(--s-5); }
.pkg-bottom { padding-top: var(--s-5); gap: var(--s-3); }
.pkg-platforms { gap: var(--s-2); padding-top: var(--s-4); }
.pkg-ico { width: 28px; height: 28px; border-radius: 8px; }
.pkg-ico img { width: 15px; height: 15px; }
.pkg-details { display: flex; justify-content: center; margin-top: var(--s-6); }
.pkg-details .btn { gap: 8px; }
.pkg-details svg { transition: transform var(--d-base) var(--ease); }
.is-detailed .pkg-details svg { transform: rotate(180deg); }
/* Liste başlığı: büyük harf etiket yerine sade cümle ("Özellikler", "Smart paketindeki her şey, artı:") */
.pkg-list-title { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-2); }
.pkg-list-title strong { font-weight: 600; color: var(--text); }
.pkg.featured .pkg-list-title { color: var(--dark-text-2); }
.pkg.featured .pkg-list-title strong { color: var(--wa-beyaz); }

/* ---------- Paket sekmeleri: ikonlu, sade ----------
   Kalın cam hap yerine ince çerçeve; sekmede küçük çizgi ikon + ad. Seçili sekme beyaz hap, ikon mor. */
.pkg-tabs.glass { gap: 2px; padding: 5px; background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); box-shadow: none; }
.pkg-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: 14px; }
.pkg-tab-ic { flex: none; opacity: 0.7; transition: opacity var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.pkg-tab:hover .pkg-tab-ic { opacity: 1; }
.pkg-tab[aria-selected="true"] .pkg-tab-ic { opacity: 1; color: var(--accent); }

/* Referans bandı: logolar çizgisiz; sol sütun videoyla aynı yükseklikte, logolar video kartının alt kenarına hizalı */
.vs-brand-grid { align-items: stretch; }
.vs-brand-refs { display: flex; flex-direction: column; }
.vs-brand-refs .section-head { margin-bottom: var(--s-5); }
.vs-logos { flex: 1; grid-auto-rows: minmax(88px, 1fr); border: 0; margin-inline: calc(var(--s-4) * -1); }
.vs-logos li { height: auto; border: 0; border-radius: var(--r-md); }
.vs-card { align-self: center; }
@media (max-width: 1080px) {
  .vs-logos { flex: none; grid-auto-rows: 80px; }
}
@media (max-width: 720px) {
  .vs-logos { grid-auto-rows: 68px; margin-inline: calc(var(--s-3) * -1); }
}

/* ---------- Üst menü düğmesi: ok halkalı hap ----------
   Mor degrade (Mor 40 → Mor 50), sağda beyaz daire içinde ok; üzerine gelince ok ↗ yönüne döner, düğme hafif parlar. */
.header-cta .header-cta-btn { gap: 8px; min-height: 42px; padding: 0 16px 0 20px; background: var(--wa-mor-90); color: var(--wa-beyaz); box-shadow: none; font-weight: 600; letter-spacing: 0; }
.header-cta-arrow { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 16px; height: 16px; color: var(--wa-mor-10); transition: transform 300ms var(--ease), color var(--d-fast) var(--ease); }
.header-cta .header-cta-btn:hover { background: #3F0A80; box-shadow: 0 6px 18px -10px rgba(44, 4, 93, 0.9); }
.header-cta .header-cta-btn:hover .header-cta-arrow { transform: translateX(3px); color: var(--wa-beyaz); }
.header-cta .header-cta-btn:active { background: var(--wa-mor-90); }
/* Koyu zeminin üstünde (cam menü): beyaz dolgu, koyu mor yazı */
.header:not(.is-light):not(.is-mega) .header-cta .header-cta-btn { background: var(--wa-beyaz); color: var(--wa-mor-90); }
.header:not(.is-light):not(.is-mega) .header-cta .header-cta-btn .header-cta-arrow { color: var(--wa-mor-50); }
.header:not(.is-light):not(.is-mega) .header-cta .header-cta-btn:hover { background: var(--wa-mor-10); }
.header:not(.is-light) .header-cta .btn-primary::after { background: linear-gradient(100deg, transparent 0%, rgba(135, 62, 255, 0.14) 50%, transparent 100%); }
@media (max-width: 720px) { .header-cta .header-cta-btn { min-height: 40px; padding: 0 14px 0 16px; } }
@media (prefers-reduced-motion: reduce) { .header-cta-arrow { transition: none; } }

/* ---------- Slider: hazır görsel kompozisyonu (kişi + W + temsili kartlar) ----------
   Kutusuz ve arka plansız; açık zeminde beyaz arka planlı görsel de "multiply" ile zemine karışır. */
.slide .photo-cutout { background: none; overflow: visible; border-radius: 0; isolation: auto; aspect-ratio: auto !important; }
.slide .photo-cutout::before, .slide .photo-cutout::after { display: none; }
.slide .photo-cutout img { position: static; display: block; width: 100%; height: auto; object-fit: contain; }
.hero-light .slide .photo-cutout img { mix-blend-mode: multiply; }
.photo-note { margin-top: 6px; text-align: right; font-size: 11px; color: var(--text-2); }
.on-dark .photo-note { color: var(--dark-text-2); }

/* ---------- Arama sonucu slaytı: yazma, belirme, zirve ışıltısı ----------
   Sorgu yazılırken imleç yanıp söner ve sonuçlar gizlidir; yazma bitince sonuçlar sırayla belirir.
   Marka 1. sıraya varınca kartında bir kez yumuşak mor halka yayılır (site.js "Arama sonucu slaytı"). */
.serp-item { transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.serp-list .serp-item:nth-child(2) { transition-delay: 70ms; }
.serp-list .serp-item:nth-child(3) { transition-delay: 140ms; }
.serp-list .serp-item:nth-child(4) { transition-delay: 210ms; }
.serp-list .serp-item:nth-child(5) { transition-delay: 280ms; }
.serp-wrap.is-typing .serp-item { opacity: 0; transform: translateY(8px); transition-delay: 0ms; }
.serp-wrap.is-typing .serp-q::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: serp-caret 900ms steps(1) infinite; }
@keyframes serp-caret { 50% { opacity: 0; } }
.serp-wrap.is-glow .serp-item.is-brand { animation: serp-glow 1600ms ease-out 1; }
@keyframes serp-glow { 0% { box-shadow: 0 0 0 0 rgba(135, 62, 255, 0.45); } 100% { box-shadow: 0 0 0 16px rgba(135, 62, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .serp-item { transition: none; } .serp-wrap.is-glow .serp-item.is-brand { animation: none; } }

/* ---------- Hizmetler başlığı: solda başlık, sağda dönen cümle ----------
   Hap kutusu yerine ince mor çizgili sade alıntı satırı; başlığın alt çizgisiyle hizalı. Telefonda başlığın altında. */
.svc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--s-8); align-items: end; margin-bottom: var(--s-8); }
.svc-head .section-head { margin-bottom: 0; }
.svc-head .svc-rotator { display: block; max-width: none; margin: 0; padding: 4px 0 6px var(--s-5); border: 0; border-left: 2px solid var(--accent); border-radius: 0; background: none; box-shadow: none; }
.svc-head .svc-rotator-line { font-size: var(--fs-lg); font-weight: 400; line-height: 1.45; color: var(--text-2); }
.on-dark .svc-head .svc-rotator { background: none; box-shadow: none; }
.on-dark .svc-head .svc-rotator-line { color: var(--dark-text-2); }
@media (max-width: 900px) {
  .svc-head { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-bottom: var(--s-7); }
  .svc-head .svc-rotator-line { font-size: var(--fs-base); }
}

/* ---------- Alt bilgi: kısa iletişim (şirket kartının yerine) ---------- */
.footer-contact { display: grid; gap: 6px; margin-top: var(--s-5); font-size: var(--fs-sm); color: var(--dark-text-2); }
.footer-contact a { color: var(--dark-text-2); transition: color var(--d-fast) var(--ease); }
.footer-contact a:hover { color: var(--wa-beyaz); }

/* ---------- Telefonda dokunma alanları ve okunabilirlik ----------
   Bağlantı/düğmelerin dokunma alanı en az ~36 px; görünüm değişmeden (iç boşluk ya da içerik kutusuna kırpılmış zemin). */
.cookie-link { padding: 9px 10px; }
.pkg-dot { box-sizing: content-box; padding: 8px; background-clip: content-box; }
@media (max-width: 719px) { .seg, .seg[aria-selected="true"], .hero-light .seg[aria-selected="true"] { padding: 16px 0; } }
.panel-tag, .pkg-platforms-label, .wa-float small, .c-item small { font-size: 12px; }
@media (max-width: 1080px) { .pkg-dots { gap: 2px; margin-top: var(--s-2); } }

/* ---------- Metin + görsel bölümü: açık zemin ve hazır kompozisyon ----------
   Açık zeminde madde renkleri koyuya döner, onay işareti mor. Hazır kompozisyon (saydam kişi + W + kartlar) kutusuz. */
.geo-list li svg { color: var(--wa-mor-10); }
.feature-light .geo-list li { color: var(--text-2); }
.feature-light .geo-list strong { color: var(--text); }
.feature-light .geo-list li svg { color: var(--accent); }
.feature-light .muted { color: var(--text-2); }
/* ---------- Kişili kompozisyon düzeni: tek ölçü ----------
   Metin : görsel = 11 : 9 (%55 / %45) her yerde: slider (.slide), sayfa girişleri (.page-hero-grid, sayfalar.css) ve sayfa içi
   bölüm (.geo + .feature-cutout). Aynı kapsayıcı ve aralıkla kompozisyonlar aynı genişlikte (1440'ta ~511 px) görünür, kişiler
   sitenin her yerinde aynı ölçekte durur. Giriş görseli sağda, sayfa içi görsel solda; tek sütunda önce metin, sonra görsel
   (tablette 440 px, telefonda sütun genişliği). */
.feature-cutout { margin: 0; }
.feature-cutout img { display: block; width: 100%; height: auto; margin-inline: auto; }
@media (min-width: 1081px) {
  .geo:has(> .feature-cutout) { grid-template-columns: 1.1fr 0.9fr; }
  .geo:has(> .feature-cutout:first-child) { grid-template-columns: 0.9fr 1.1fr; }
}
@media (max-width: 1080px) {
  .geo > .feature-cutout { order: 2; }
  .feature-cutout img { max-width: 440px; }
}
@media (max-width: 720px) { .feature-cutout img { max-width: 340px; } }

/* ---------- Mobil alt çubuk: dengeli simgeler ----------
   Asistan fotoğrafı (Bennu) belirgin: 34 px, mor halka ve çevrimiçi noktası; telefon ve WhatsApp 24 px.
   Kaydırınca çubuk kısalır (etiketler gizlenir), simgeler oranını korur. */
@media (max-width: 720px) {
  .mobile-bar .mb-ico { width: 34px; height: 34px; }
  .mobile-bar .mb-ico svg { width: 24px; height: 24px; }
  .mobile-bar .mb-avatar img { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--wa-mor-10), 0 4px 10px -2px rgba(10, 0, 25, 0.5); }
  .mobile-bar .mb-avatar .assist-online { right: 0; bottom: 0; width: 10px; height: 10px; }
  .mobile-bar .mb-label { font-size: 11px; }
  .mobile-bar.is-compact .mb-ico { width: 32px; height: 32px; }
  .mobile-bar.is-compact .mb-avatar img { width: 32px; height: 32px; }
}

/* ---------- Mega menü (Menüler > Üst menü > Açılır panel) ----------
   Paneli olan öğe düğmedir (aria-expanded); panel üst menü kapsülünün hemen altında, kapsül genişliğinde beyaz yüzey.
   Derinlik: yumuşak geniş gölge + arkada sayfayı hafifçe karartan örtü; açıkken kapsül de beyaza döner (tek parça görünür).
   Sütunlar: ikonlu bağlantı + tek satır açıklama; kompakt sütun logolu küçük kutular (ör. kurulum platformları).
   Sağda öne çıkan kart (kampanyalar, son yazılar, iletişim), altta ince şerit. Telefonda aynı içerik açılır-kapanır başlık. */
.header-inner { position: relative; }
.nav-root { display: flex; align-items: center; gap: var(--s-1); }
.nav-trigger {
  display: inline-flex; align-items: center; gap: 6px; padding: var(--s-2) var(--s-3); border: 0; border-radius: var(--r-full);
  background: none; font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--dark-text-2); cursor: pointer; white-space: nowrap;
  transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
.nav-trigger[aria-expanded="true"] { color: var(--wa-beyaz); background: rgba(255, 255, 255, 0.08); }
@media (hover: hover) { .nav-trigger:hover { color: var(--wa-beyaz); background: rgba(255, 255, 255, 0.08); } }
.nav-trigger.is-current { color: var(--wa-beyaz); background: rgba(255, 255, 255, 0.1); }
.nav-chev { flex: none; opacity: 0.7; transition: transform var(--d-base) var(--ease); }
.nav-trigger[aria-expanded="true"] .nav-chev { transform: rotate(180deg); opacity: 1; }
@media (max-width: 1280px) and (min-width: 1181px) { .nav-trigger { padding: var(--s-2) 10px; } }

/* Açık zeminde ve panel açıkken: beyaz kapsül, koyu yazı (açık bölüm kurallarıyla aynı) */
.header.is-mega .header-inner { background: var(--wa-beyaz); border-color: var(--line); box-shadow: var(--shadow-card); -webkit-backdrop-filter: none; backdrop-filter: none; }
.header.is-mega .logo-light { display: none; }
.header.is-mega .logo-dark { display: block; }
.header.is-light .nav-trigger, .header.is-mega .nav-trigger, .header.is-mega .nav-root > a { color: var(--text-2); }
@media (hover: hover) { .header.is-light .nav-trigger:hover, .header.is-mega .nav-trigger:hover, .header.is-mega .nav-root > a:hover { color: var(--text); background: var(--bg-soft); } }
.header.is-light .nav-trigger[aria-expanded="true"], .header.is-mega .nav-trigger[aria-expanded="true"] { color: var(--wa-mor-90); background: var(--accent-soft); }
.header.is-light .nav-trigger.is-current, .header.is-mega .nav-trigger.is-current, .header.is-mega .nav-root > a[aria-current="page"] { color: var(--wa-mor-90); background: var(--accent-soft); }
.header.is-mega .portal-btn { color: var(--text-2); }
.header.is-mega .btn-ghost { color: var(--text); border-color: var(--line-strong); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Arkadaki sayfa hafifçe kararır (tıklamalar sayfaya geçer; dışarı tıklama paneli kapatır) */
.header::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(18, 4, 38, 0.24); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease); }
.header.is-mega::before { opacity: 1; }
.header { transition: z-index 0s linear 220ms; }
.header.is-mega { z-index: 57; transition: none; } /* .wa-float (55) ve .assist-launch (56) üstü; mobil bar (60), çerez (65), mobil menü (70) altı */

.mega {
  position: absolute; left: 0; right: 0; top: calc(100% + 10px); z-index: 2;
  border-radius: 24px; background: var(--wa-beyaz); border: 1px solid var(--line); color: var(--text);
  box-shadow: 0 1px 2px rgba(44, 4, 93, 0.06), 0 12px 24px -12px rgba(44, 4, 93, 0.12), 0 40px 90px -30px rgba(44, 4, 93, 0.38);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(0.995); transform-origin: top center; pointer-events: none;
  transition: opacity 160ms var(--ease-in), transform 200ms var(--ease-in), visibility 0s linear 200ms;
}
.mega[data-open] { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 220ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s; }
/* Kapsül ile panel arasındaki boşlukta fare panelden kopmasın */
.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mega-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); padding: var(--s-6) var(--s-6) var(--s-5); }
.mega-body.has-feature { grid-template-columns: minmax(0, 1fr) 292px; }
@media (max-width: 1280px) { .mega:not([data-size]) .mega-body.has-feature { grid-template-columns: minmax(0, 1fr) 248px; } }
.mega-cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--s-5) var(--s-6); }
.mega-col + .mega-col { border-left: 1px solid var(--line); padding-left: var(--s-6); }
.mega-col-title { margin: 0 0 var(--s-3); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mega-link { display: flex; align-items: flex-start; gap: var(--s-3); margin-inline: -10px; padding: 9px 10px; border-radius: 14px; color: var(--text); transition: background-color var(--d-fast) var(--ease); }
.mega-link:hover, .mega-link:focus-visible { background: #F7F3FF; }
.mega-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.mega-link:hover .mega-ic, .mega-link:focus-visible .mega-ic { background: var(--accent); color: var(--wa-beyaz); }
.mega-ic .brand-ic { width: 20px; height: auto; }
.mega-link:hover .mega-ic:has(.brand-ic) { background: var(--wa-beyaz); box-shadow: inset 0 0 0 1px var(--line); }
.mega-ic.is-logo { background: var(--wa-beyaz); box-shadow: inset 0 0 0 1px var(--line); }
.mega-ic.is-logo img { max-width: 28px; max-height: 14px; width: auto; height: auto; }
.mega-link-text { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }
.mega-link-label { font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.mega-link-desc { font-size: 12.5px; line-height: 1.4; color: var(--text-2); }
.mega-link[aria-current="page"] .mega-link-label { color: var(--accent); }
/* Kompakt sütun: logolu küçük kutular iki sütunda */
.mega-col.is-compact ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mega-col.is-compact .mega-chip:not(.has-logo) { height: 36px; padding: 0 14px; border-radius: var(--r-full); white-space: nowrap; }
.mega-chip { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 var(--s-3); border-radius: 12px; border: 1px solid var(--line); background: var(--wa-beyaz); font-size: 13px; font-weight: 500; color: var(--text); transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.mega-chip img { max-height: 17px; max-width: 100%; width: auto; height: auto; }
.mega-chip:hover, .mega-chip:focus-visible { border-color: rgba(135, 62, 255, 0.45); box-shadow: 0 10px 24px -16px rgba(44, 4, 93, 0.45); transform: translateY(-1px); }
.mega-chip[aria-current="page"] { border-color: var(--accent); }
/* Liste sütununun altında kompakt sütun varsa (aynı sütunda değil) ayrı durur; kompakt sütun başlığı biraz boşlukla */
.mega-col.is-compact .mega-col-title { margin-bottom: var(--s-3); }

/* Sağdaki kart */
.mega-side { min-width: 0; }
.mega-feature { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: 18px; background: linear-gradient(165deg, #F4EEFF 0%, #FBF9FF 55%, var(--wa-beyaz) 100%); border: 1px solid rgba(135, 62, 255, 0.14); }
.mega-feature-kicker { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.mega-feature-title { margin: 0; font-size: var(--fs-lg); font-weight: 600; line-height: 1.3; }
.mega-feature-text { margin: 0; font-size: 13px; color: var(--text-2); }
.mega-feature-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--accent); }
.mega-feature-link svg { transition: transform var(--d-fast) var(--ease); }
.mega-feature-link:hover svg { transform: translateX(3px); }
.mega-camps, .mega-posts, .mega-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.mega-camps a { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px 12px; border-radius: 12px; background: var(--wa-beyaz); border: 1px solid var(--line); transition: border-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.mega-camps a:hover { border-color: rgba(135, 62, 255, 0.4); box-shadow: 0 10px 22px -16px rgba(44, 4, 93, 0.45); }
.mega-camps img { height: calc(17px * var(--logo-scale, 1)); width: auto; max-width: 118px; object-fit: contain; object-position: left center; }
.mega-camp-deal { font-size: 13.5px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.mega-posts a { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--text); }
.mega-posts li:last-child a { border-bottom: 0; }
.mega-post-cat { font-size: 11px; font-weight: 600; color: var(--accent); }
.mega-post-title { font-size: 13.5px; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mega-posts a:hover .mega-post-title { color: var(--accent); }
.mega-contact li { display: grid; gap: 1px; }
.mega-contact span { font-size: 12px; color: var(--text-2); }
.mega-contact a { font-size: var(--fs-sm); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.mega-contact a:hover { color: var(--accent); }

/* Alt şerit */
.mega-foot { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); padding: 14px var(--s-6); border-top: 1px solid var(--line); background: #FAF9FC; border-radius: 0 0 23px 23px; }
.mega-foot a { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); }
.mega-foot a:hover { color: var(--accent); }

/* Açılışta sütunlar sırayla gelir (60 ms aralık) */
@keyframes mega-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mega[data-open] .mega-col, .mega[data-open] .mega-side { animation: mega-in 320ms var(--ease-out) both; }
.mega[data-open] .mega-col:nth-child(2) { animation-delay: 50ms; }
.mega[data-open] .mega-col:nth-child(3) { animation-delay: 100ms; }
.mega[data-open] .mega-col:nth-child(4), .mega[data-open] .mega-side { animation-delay: 150ms; }
@media (prefers-reduced-motion: reduce) {
  .mega, .mega[data-open] { transform: none; transition: opacity 120ms linear, visibility 0s; }
  .mega[data-open] .mega-col, .mega[data-open] .mega-side { animation: none; }
}
/* Menü düğmesine geçilen genişlikte (≤1180) masaüstü paneli hiç görünmez */
@media (max-width: 1180px) { .mega, .header::before { display: none; } }

/* ---------- Mobil menü: mega menü öğeleri açılır-kapanır başlık ---------- */
.mobile-nav { overflow-y: auto; overscroll-behavior: contain; scroll-padding-top: 88px; }
.mobile-nav-head { position: sticky; top: 0; z-index: 1; flex: none; background: var(--wa-mor-90); }
.mobile-nav-head::before { content: ""; position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); bottom: 100%; height: 20px; background: var(--wa-mor-90); }
.mobile-nav-head img { width: 150px; height: auto; }
@media (max-width: 720px) { .mobile-nav-head img { width: 128px; } }
.mnav-group > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-3); font-size: 1.5rem; font-weight: 500; border-bottom: 1px solid var(--dark-line); cursor: pointer; }
.mnav-group > summary::-webkit-details-marker { display: none; }
.mnav-group > summary .nav-chev { width: 18px; height: 18px; }
.mnav-group[open] > summary { border-bottom-color: transparent; }
.mnav-group[open] > summary .nav-chev { transform: rotate(180deg); opacity: 1; }
.mnav-group > summary.is-current { color: var(--wa-mor-10); }
.mnav-panel { display: grid; gap: var(--s-5); padding-block: var(--s-2) var(--s-5); border-bottom: 1px solid var(--dark-line); }
.mnav-col-title { margin: 0 0 var(--s-2); font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wa-mor-10); }
.mnav-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mobile-nav .mnav-col a { display: flex; align-items: center; gap: var(--s-3); padding: 10px 0; font-size: 1.0625rem; font-weight: 500; color: rgba(255, 255, 255, 0.88); border: 0; }
.mobile-nav .mnav-col a svg { flex: none; color: var(--wa-mor-10); }
.mobile-nav .mnav-col a[aria-current="page"] { color: var(--wa-mor-10); font-weight: 600; }
.mnav-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) !important; }
.mnav-chips > li { display: flex; }
.mobile-nav .mnav-chips a { flex: 1; justify-content: center; text-align: center; min-height: 44px; padding: 10px 8px; line-height: 1.3; border-radius: 12px; background: rgba(255, 255, 255, 0.06); font-size: 0.9375rem; }
.mobile-nav .mnav-chips a[aria-current="page"] { background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px var(--wa-mor-10); }
.mobile-nav .mnav-all { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; margin-block: -10px; font-size: 0.9375rem; font-weight: 600; color: var(--wa-mor-10); border: 0; }
/* Liste sütununun altındaki logo kutuları (kurulum platformları) */
.mega-chips { list-style: none; margin: var(--s-4) 0 0; padding: var(--s-4) 0 0; border-top: 1px dashed var(--line); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.mega-chips .mega-chip { height: 40px; padding: 0 var(--s-2); }
.mega-chips .mega-chip img { max-height: 15px; }
/* Az sütunlu panel: dar, düğmesinin altına hizalı (--mega-x menü bileşeninde hesaplanır) */
.mega[data-size] { right: auto; left: var(--mega-x, 0px); }
.mega[data-size="sm"] { width: 620px; }
.mega[data-size="md"] { width: 880px; }
.mega[data-size="sm"] .mega-body.has-feature { grid-template-columns: minmax(0, 1fr) 260px; }
/* Rozet (ör. Kampanyalar "İndirim") */
.nav-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 7px; border-radius: var(--r-full); background: var(--accent); color: var(--wa-beyaz); font-size: 10.5px; font-weight: 600; line-height: 1.4; vertical-align: 1px; }
:is(.nav, .nav-root) > a:has(.nav-badge) { display: inline-flex; align-items: center; }
.mobile-nav nav > a .nav-badge { font-size: 12px; padding: 2px 9px; vertical-align: 4px; }
/* Bağlantıda üzerine gelince küçük ok */
.mega-link-label { display: inline-flex; align-items: center; gap: 6px; }
.mega-link-go { flex: none; opacity: 0; transform: translateX(-4px); color: var(--accent); transition: opacity var(--d-fast) var(--ease), transform var(--d-fast) var(--ease); }
.mega-link:hover .mega-link-go, .mega-link:focus-visible .mega-link-go { opacity: 1; transform: none; }
/* Kısa ekranda panel ekrana sığar, içi kayar */
.mega-body { max-height: calc(100vh - 170px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(44, 4, 93, 0.25) transparent; }
/* Yüksek karşıtlık (Windows): logolar kendi renginde beyaz zeminde; beyaz logo açık zeminde ters çevrilir; bulunulan sayfa altı çizili */
@media (forced-colors: active) {
  .mega-chip.has-logo img, .mega-camps img { forced-color-adjust: none; background: #fff; padding: 2px 4px; border-radius: 4px; box-sizing: content-box; }
  .nav-trigger.is-current, :is(.nav, .nav-root) > a[aria-current="page"], .mega-link[aria-current="page"] .mega-link-label, .mnav-group > summary.is-current, .mobile-nav nav > a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
}
@media (forced-colors: active) and (prefers-color-scheme: light) { .logo-light, .footer .logo img, .mobile-nav-head img { filter: invert(1); } }