/* ═══════════════════════════════════════════
   KENTDEKS — CUBERTO LAYER
   Custom cursor · Magnetic · Marquee · Text reveal
   Referans: cuberto.com etkileşim dili
═══════════════════════════════════════════ */

/* ── CUSTOM CURSOR ── */
/* Dot+ring+"Gör" etiketli özel imleç kaldırıldı — normal sistem imleci kullanılıyor.
   Tıklanabilir alanlardaki küçük fener ışığı efekti için bkz. vars.css → .cursor-glow */

/* ── MAGNETIC ELEMENTS ── */
[data-magnetic] {
  display: inline-flex;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}
[data-magnetic] > * { pointer-events: none; }

/* ── TEXT REVEAL (word-by-word mask lift) ── */
.cb-split .cb-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.cb-split .cb-word > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.cb-split.cb-revealed .cb-word > span { transform: none; }
/* kelime bazlı kademeli gecikme (JS inline delay veriyor) */

/* ── MARQUEE STRIP (Cuberto usulü dev kayan yazı) ── */
.cb-marquee-sec {
  background: #09090B;
  padding: 56px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.cb-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: cbMarquee 30s linear infinite;
}
.cb-marquee-sec:hover .cb-marquee-track { animation-play-state: paused; }
@keyframes cbMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.cb-marquee-item {
  display: flex; align-items: center; gap: 40px;
  padding-right: 40px;
  font-family: var(--font-serif);
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: #F5F5F5;
  white-space: nowrap;
}
.cb-marquee-item em {
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245,245,245,.45);
}
.cb-marquee-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--teal-400); flex-shrink: 0;
}

/* ── IMAGE / CARD HOVER SKEW (Cuberto tilt hissi) ── */
.svc-card, .dc, .expert-card {
  transform-style: preserve-3d;
}

/* ── SECTION CLIP REVEAL ── */
.cb-clip {
  clip-path: inset(0 0 12% 0);
  transition: clip-path 1s cubic-bezier(.22,1,.36,1);
}
.cb-clip.cb-revealed { clip-path: inset(0 0 0 0); }

/* ── SMOOTH SCROLL body hazırlığı (Lenis) ── */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .cb-marquee-track { animation: none; }
  .cb-split .cb-word > span { transform: none; transition: none; }
  .cb-clip { clip-path: none; transition: none; }
  .cursor-glow { display: none; }
}

/* ── MEGA MENÜ (39 ilçe — Bölge Verileri dropdown) ── */
.nav-dd-menu.kd-mega { min-width: 680px; max-width: 90vw; padding: 16px 16px 10px; left: 0; transform: translateY(6px); }
.nav-dd:hover .nav-dd-menu.kd-mega, .nav-dd-menu.kd-mega:hover { transform: translateY(0); }
.kd-mega-cols { display: grid; grid-template-columns: 3fr 2fr; gap: 18px; }
.kd-mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; }
.kd-mega-cols > div:last-child .kd-mega-grid { grid-template-columns: repeat(2, 1fr); }
.kd-mega .nav-dd-item { padding: 4px 8px; font-size: 12.5px; white-space: nowrap; }
.kd-mega .kd-mega-all { font-weight: 600; margin-top: 2px; }
@media (max-width: 1100px) {
  .nav-dd-menu.kd-mega { min-width: 560px; }
  .kd-mega .nav-dd-item { font-size: 12px; padding: 3px 6px; }
}

/* ═══ 21st.dev ESİNLİ DETAYLAR ═══ */

/* 1) BORDER BEAM — hero form kartının kenarında dolaşan ışık huzmesi */
@property --kd-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.hero-form-card::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: var(--r20);
  padding: 1px;
  background: conic-gradient(from var(--kd-angle),
    transparent 0deg, transparent 300deg,
    rgba(56,189,248,.25) 330deg, rgba(56,189,248,.95) 350deg,
    rgba(168,204,236,.6) 356deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: kdBeam 7s linear infinite;
  pointer-events: none;
}
@keyframes kdBeam { to { --kd-angle: 360deg; } }

/* 2) DOT PATTERN — süreç bölümü arka planı (overlay; içerik maskelenmez) */
.hiw-sec { position: relative; }
.hiw-sec::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(59,122,191,.16) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 55%, transparent 100%);
  pointer-events: none;
}
.hiw-sec > .wrap { position: relative; }

/* 3) GRID LINES — CTA bölümüne perspektif ızgarası */
.cta-sec {
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-form-card::after { animation: none; }
}

/* ═══ SCROLL MOTION LAYER (at-scroll.js) ═══ */
/* velocity skew hedefleri — compositor'da kalsın */
.svc-grid, .hiw-grid, .expert-grid, .testi-grid, .blog-grid, .trust-grid {
  will-change: transform;
}
/* hero derinlik katmanları translate property ile sürülür */
.lt-title-wrap, .lt-topmeta, .lt-bottom { will-change: translate; }