/* ==========================================================================
   Kozlu Hukuk — Animasyon katmanı (yalnızca index-animasyonlu.html)
   Tüm gizleme kuralları .anim-ready sınıfına bağlıdır: JS çalışmazsa
   veya kullanıcı "hareketi azalt" tercih ettiyse içerik normal görünür.
   ========================================================================== */

/* ---------- Açılış perdesi ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 300; background: var(--navy-950);
  display: grid; place-items: center; pointer-events: none;
  transition: clip-path 900ms cubic-bezier(0.77, 0, 0.175, 1);
  clip-path: inset(0 0 0 0);
}
.preloader.is-done { clip-path: inset(0 0 100% 0); }
.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.preloader svg { width: 72px; height: 72px; }
.preloader__arch { stroke-dasharray: 120; stroke-dashoffset: 120; animation: kz-draw 900ms var(--ease) forwards; }
.preloader__k { opacity: 0; animation: kz-fade 600ms 350ms var(--ease) forwards; }
.preloader__word { font-family: var(--font-serif); color: #fff; letter-spacing: 0.5em; font-size: 1.1rem; padding-left: 0.5em; opacity: 0; animation: kz-up 700ms 450ms var(--ease) forwards; }
.preloader__bar { width: 120px; height: 1px; background: rgba(205,174,120,0.2); overflow: hidden; }
.preloader__bar::after { content: ""; display: block; height: 100%; background: var(--gold-400); transform: scaleX(0); transform-origin: left; animation: kz-bar 1000ms var(--ease) forwards; }

/* ---------- Kaydırma ilerleme çubuğu ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 160; background: linear-gradient(90deg, var(--gold-600), var(--gold-300)); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------- Sayfa geçişi ---------- */
.anim-ready .page.is-active { animation: kz-page 520ms var(--ease) both; }

/* ---------- Kaydırınca görünme ---------- */
.anim-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.anim-ready .reveal.is-in { opacity: 1; transform: none; }
.anim-ready .stagger > * { opacity: 0; transform: translateY(24px) scale(0.985); transition: opacity 700ms var(--ease), transform 700ms var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.anim-ready .stagger.is-in > * { opacity: 1; transform: none; }
.anim-ready .stagger.is-in > .area-card:hover { transform: translateY(-3px); transition-delay: 0ms; }
.anim-ready .stagger > [hidden] { display: none; }

/* ---------- Hero başlığı: kelime kelime ---------- */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-word > span { display: inline-block; transform: translateY(105%); transition: transform 900ms var(--ease); transition-delay: calc(var(--w) * 70ms + 200ms); }
.hero.is-in .split-word > span { transform: none; }
.anim-ready .hero__lead, .anim-ready .hero__actions, .anim-ready .hero__pillars, .anim-ready .hero .eyebrow { opacity: 0; transform: translateY(16px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
.hero.is-in .eyebrow { opacity: 1; transform: none; transition-delay: 100ms; }
.hero.is-in .hero__lead { opacity: 1; transform: none; transition-delay: 700ms; }
.hero.is-in .hero__actions { opacity: 1; transform: none; transition-delay: 850ms; }
.hero.is-in .hero__pillars { opacity: 1; transform: none; transition-delay: 1000ms; }

/* Hero illüstrasyonu: çizgi çizimi */
.anim-ready .hero__art .art-line { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); }
.hero.is-in .hero__art .art-line { transition: stroke-dashoffset 2200ms cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--d, 0) * 1ms + 300ms); stroke-dashoffset: 0; }
.hero__art .art-halo { transform-origin: 240px 210px; animation: kz-breathe 7s ease-in-out infinite; }
.hero__art .art-scale { transform-origin: 240px 256px; animation: kz-sway 6s ease-in-out 2.6s infinite; }
.anim-ready .hero__card, .anim-ready .hero__badge { opacity: 0; transform: translateY(20px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.hero.is-in .hero__card { opacity: 1; transform: none; transition-delay: 1400ms; }
.hero.is-in .hero__badge { opacity: 1; transform: none; transition-delay: 1600ms; }
.hero.is-in .hero__card { animation: kz-float 6s ease-in-out 2.4s infinite; }
.hero.is-in .hero__badge { animation: kz-float 7s ease-in-out 3s infinite reverse; }

/* Hero arka plan ızgarası hafif kayar */
.hero__grid-lines { animation: kz-grid 40s linear infinite; }

/* ---------- Çalışma alanı kayan bandı ---------- */
.marquee { background: var(--gold-500); color: var(--navy-950); overflow: hidden; padding: 18px 0; position: relative; }
.marquee__track { display: flex; width: max-content; animation: kz-marquee 50s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--font-serif); font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); white-space: nowrap; }
.marquee__item::after { content: "§"; font-size: 0.9em; color: rgba(8,18,33,0.5); }

/* ---------- Kartlarda imleç ışığı ---------- */
.area-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--dur) var(--ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(176,141,87,0.14), transparent 60%);
}
.area-card:hover::after { opacity: 1; }
.area-card__icon .icon { transition: transform 500ms var(--ease); }
.area-card:hover .area-card__icon .icon { transform: rotate(-8deg) scale(1.08); }

/* Hizmet kolu ikonları */
.pillar__icon { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform 600ms var(--ease); }
.pillar:hover .pillar__icon { background: var(--gold-500); color: var(--navy-950); transform: rotate(360deg); }

/* Süreç adımları: bağlantı çizgisi dolar */
@media (min-width: 1024px) {
  .anim-ready .step:not(:last-child)::after { transform: scaleX(0); transform-origin: left; transition: transform 600ms var(--ease); transition-delay: calc(var(--i, 0) * 150ms + 500ms); }
  .anim-ready .process.is-in .step::after { transform: scaleX(1); }
}

/* Zaman çizelgesi noktaları */
.anim-ready .timeline.is-in .tl-item::before { animation: kz-pulse 2.4s ease-out 1s 2; }

/* Portre çerçevesi */
.anim-ready .portrait-wrap::after { transform: translate(-24px, -24px); opacity: 0; transition: transform 1000ms var(--ease) 300ms, opacity 1000ms var(--ease) 300ms; }
.anim-ready .portrait-wrap.is-in::after { transform: none; opacity: 1; }
.portrait__monogram { background: linear-gradient(110deg, #b08d57 30%, #f1e2c2 50%, #b08d57 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: kz-shine 5s ease-in-out infinite; }

/* Hakkımızda görseli: hafif parallax */
.about-visual__frame svg { transition: transform 200ms linear; will-change: transform; }

/* WhatsApp butonu nabız */
.wa-fab__ping { animation: kz-ping 2.6s cubic-bezier(0, 0, 0.2, 1) 3s infinite; }
.anim-ready .wa-fab { animation: kz-pop 700ms var(--ease) 1.8s both; }

/* Buton parlaması */
.btn--gold { position: relative; overflow: hidden; }
.btn--gold::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform 800ms var(--ease); }
.btn--gold:hover::after { transform: translateX(120%); }

/* ---------- Keyframes ---------- */
@keyframes kz-draw { to { stroke-dashoffset: 0; } }
@keyframes kz-fade { to { opacity: 1; } }
@keyframes kz-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kz-bar { to { transform: scaleX(1); } }
@keyframes kz-page { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kz-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.06); opacity: 0.75; } }
@keyframes kz-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(2.5deg); } 75% { transform: rotate(-2.5deg); } }
@keyframes kz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes kz-grid { to { background-position: 64px 64px; } }
@keyframes kz-marquee { to { transform: translateX(-50%); } }
@keyframes kz-pulse { 0% { box-shadow: 0 0 0 0 rgba(176,141,87,0.6); } 100% { box-shadow: 0 0 0 16px rgba(176,141,87,0); } }
@keyframes kz-shine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes kz-ping { 0% { transform: scale(1); opacity: 0.8; } 80%, 100% { transform: scale(1.7); opacity: 0; } }
@keyframes kz-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- Hareketi azalt ---------- */
@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
  .marquee__track, .hero__grid-lines, .portrait__monogram, .wa-fab__ping, .art-halo, .art-scale { animation: none !important; }
  .split-word > span { transform: none !important; }
}