/* =========================================================
   SunucuBayim - Motion / Premium Cloud Katmani
   Bu dosya style.css'in ÜZERİNE eklenir (additive). Mevcut
   stiller değiştirilmez; sadece yeni bileşenler ve scroll/hover
   davranışları tanımlanır. style.css'ten SONRA yüklenmelidir.
   ========================================================= */

:root {
  --sb-ease: cubic-bezier(.16,.84,.44,1);
  --sb-ease-soft: cubic-bezier(.22,.61,.36,1);
  --sb-dur-fast: .35s;
  --sb-dur-md: .6s;
  --sb-dur-slow: .9s;
}

/* ---------- Reveal-on-scroll temel sistemi ---------- */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity, filter;
  transition: opacity var(--sb-dur-md) var(--sb-ease), transform var(--sb-dur-md) var(--sb-ease), filter var(--sb-dur-md) var(--sb-ease);
  transition-delay: calc(var(--sb-delay, 0) * 1ms);
}
[data-reveal="fade"] { transform: translateY(0); }
[data-reveal="up"] { transform: translateY(22px); }
[data-reveal="up-blur"] { transform: translateY(18px); filter: blur(6px); }
[data-reveal="scale"] { transform: scale(.95); }
[data-reveal].is-visible {
  opacity: 1; transform: none; filter: blur(0);
}

/* Stagger konteynerleri: çocuklara otomatik gecikme */
[data-reveal-group] > [data-reveal]:nth-child(1) { --sb-delay: 0; }
[data-reveal-group] > [data-reveal]:nth-child(2) { --sb-delay: 80; }
[data-reveal-group] > [data-reveal]:nth-child(3) { --sb-delay: 160; }
[data-reveal-group] > [data-reveal]:nth-child(4) { --sb-delay: 240; }
[data-reveal-group] > [data-reveal]:nth-child(5) { --sb-delay: 320; }
[data-reveal-group] > [data-reveal]:nth-child(6) { --sb-delay: 400; }
[data-reveal-group] > [data-reveal]:nth-child(7) { --sb-delay: 480; }
[data-reveal-group] > [data-reveal]:nth-child(8) { --sb-delay: 560; }

/* Hero'nun ilk ekran içeriği: JS gelmeden önce görünür kalsın (no-FOUC) */
.hero [data-reveal] { transition-delay: calc(var(--sb-delay, 0) * 1ms + 120ms); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}
.no-js [data-reveal] { opacity: 1; transform: none; filter: none; }

/* ---------- Header: transparan -> scroll'da premium sticky ---------- */
.site-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background var(--sb-dur-fast) var(--sb-ease-soft),
              backdrop-filter var(--sb-dur-fast) var(--sb-ease-soft),
              border-color var(--sb-dur-fast) var(--sb-ease-soft),
              box-shadow var(--sb-dur-fast) var(--sb-ease-soft);
}
.site-header.is-scrolled {
  background: rgba(7, 13, 31, 0.82);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--sb-border);
  box-shadow: 0 8px 30px rgba(4,10,30,.35);
}
/* Ana sayfa dışındaki sayfalarda hero yok; header'ın baştan itibaren
   okunabilir olması için body'ye page-has-hero sınıfı yoksa hemen scrolled görünümü ver */
body:not(.has-hero) .site-header { background: rgba(7,13,31,.82); backdrop-filter: blur(16px); border-bottom-color: var(--sb-border); }

/* Dropdown mega menü: opacity + translate + scale ile açılış */
.main-nav .mega-panel {
  display: grid;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.98);
  transition: opacity .22s var(--sb-ease-soft), transform .22s var(--sb-ease-soft), visibility .22s;
  pointer-events: none;
}
.main-nav li.open .mega-panel {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
}
/* Link ile panel arasında (top: calc(100% + 10px) nedeniyle oluşan) boş bir
   "dead zone" var: fare bu boşluktan geçerken li'den mouseleave tetiklenip
   panel kapanıyor, içerideki linkler hiç tıklanamıyordu. Panelin kendi
   içinde (li'nin DOM alt öğesi olarak) görünmez bir köprü ekleyip bu boşluğu
   kapatıyoruz; böylece fare hep li'nin alt ağacı içinde kalıyor. */
.main-nav .mega-panel::before {
  content: "";
  position: absolute;
  top: -20px; left: 0; right: 0; height: 20px;
}
@media (max-width: 980px) {
  .main-nav .mega-panel { transform: none; }
  .main-nav .mega-panel::before { content: none; }
}

/* ---------- Butonlar: hafif glow / gradient hareketi ---------- */
.btn-primary {
  position: relative; overflow: hidden;
  background-size: 160% 160%; background-position: 0% 50%;
  transition: transform .18s var(--sb-ease-soft), box-shadow .25s var(--sb-ease-soft), background-position .5s ease;
}
.btn-primary:hover { background-position: 100% 50%; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(46,107,255,.4), 0 0 0 1px rgba(124,58,237,.25); }
.btn-primary:active { transform: translateY(0); }
.btn-outline, .btn-ghost { transition: transform .18s var(--sb-ease-soft), border-color .2s ease, color .2s ease, background .2s ease; }
.btn-outline:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn svg { transition: transform .2s var(--sb-ease-soft); }
.btn:hover svg { transform: translateX(2px); }

/* ---------- Kart 3D tilt + radial glow ---------- */
[data-tilt] {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg;
  position: relative;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--sb-ease-soft), border-color .2s ease, box-shadow .3s ease;
  transform-style: preserve-3d;
}
[data-tilt]:hover { transition: transform .08s linear, border-color .2s ease, box-shadow .3s ease; box-shadow: var(--sb-shadow-lg); }
[data-tilt]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(280px circle at var(--mx) var(--my), rgba(46,107,255,.16), transparent 60%);
  opacity: 0; transition: opacity .25s ease; z-index: 0;
}
[data-tilt]:hover::before { opacity: 1; }
[data-tilt] > * { position: relative; z-index: 1; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  [data-tilt] { transform: none !important; }
}

/* ---------- Hero 3D katmanı ---------- */
.hero { position: relative; }
.hero-3d-layer {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  pointer-events: none;
}
.hero-3d-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.1s var(--sb-ease-soft); }
.hero-3d-layer canvas.is-ready { opacity: 1; }
.hero-3d-fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 78% 38%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 34% 68%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1200px 500px at 20% -10%, rgba(46,107,255,.28), transparent),
    radial-gradient(900px 400px at 90% 10%, rgba(34,211,238,.2), transparent);
  animation: sb-fallback-drift 14s ease-in-out infinite alternate;
}
@keyframes sb-fallback-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(0,-8px,0) scale(1.02); } }
.hero-inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .hero-3d-fallback { animation: none; } }

/* Hero başlık: blur-to-sharp giriş için span sarmalayıcı destek */
.hero h1 .word { display: inline-block; }

/* ---------- Domain fiyat rozetleri: stagger zaten data-reveal-group ile ---------- */
.tld-chip { transition: transform .2s var(--sb-ease-soft), border-color .2s ease, color .2s ease; }
.tld-chip:hover { transform: translateY(-2px); border-color: var(--sb-accent); color: #fff; }

/* ---------- İstatistik sayaç bölümü ---------- */
.stats-band { padding: 56px 0; border-top: 1px solid var(--sb-border); border-bottom: 1px solid var(--sb-border); background: linear-gradient(180deg, rgba(46,107,255,.05), transparent); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; text-align: center; }
.stat-item .stat-value { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; color: #fff; letter-spacing: -.02em; background: var(--sb-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-item .stat-label { font-size: .85rem; color: var(--sb-text-secondary); margin-top: 4px; text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Altyapı akış diyagramı ---------- */
.infra-diagram { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 720px; margin: 0 auto; }
.infra-node {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px;
  padding: 14px 18px; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md);
  transition: border-color .4s ease, box-shadow .4s ease, transform .4s var(--sb-ease-soft);
}
.infra-node .infra-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; color: var(--sb-text-secondary); flex-shrink: 0; transition: color .4s ease, background .4s ease; }
.infra-node strong { display: block; font-size: .95rem; color: #fff; }
.infra-node span.infra-desc { font-size: .78rem; color: var(--sb-muted); }
.infra-node.is-active { border-color: var(--sb-primary); box-shadow: 0 0 0 1px rgba(46,107,255,.35), 0 14px 30px rgba(46,107,255,.15); transform: translateY(-2px); }
.infra-node.is-active .infra-icon { background: var(--sb-gradient); color: #fff; }

.infra-link { position: relative; width: 2px; height: 46px; background: var(--sb-border); margin: 0; overflow: hidden; }
.infra-link::before {
  content: ""; position: absolute; left: 0; top: -100%; width: 100%; height: 100%;
  background: linear-gradient(180deg, transparent, var(--sb-accent), var(--sb-primary), transparent);
  transition: top .1s linear;
}
.infra-link.is-active { background: rgba(46,107,255,.35); }
.infra-link.is-active::before { animation: sb-data-flow 1.4s linear infinite; }
@keyframes sb-data-flow { from { top: -100%; } to { top: 100%; } }
@media (prefers-reduced-motion: reduce) { .infra-link.is-active::before { animation-duration: 2.6s; } }

/* ---------- Datacenter bölümü ---------- */
.datacenter-section { position: relative; overflow: hidden; padding: 80px 0; background: #050912; }
.datacenter-grid-bg {
  position: absolute; inset: 0; opacity: .35;
  background-image:
    linear-gradient(rgba(46,107,255,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,107,255,.15) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 40%, rgba(0,0,0,.9), transparent 75%);
  will-change: transform;
}
.datacenter-glow { position: absolute; width: 640px; height: 640px; border-radius: 50%; top: 10%; left: 50%; transform: translateX(-50%); background: radial-gradient(circle, rgba(46,107,255,.22), transparent 65%); pointer-events: none; }
.rack-row { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; margin-top: 40px; }
.rack-unit { background: linear-gradient(180deg, var(--sb-surface-2), var(--sb-surface)); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); padding: 16px; }
.rack-unit .rack-led-row { display: flex; gap: 5px; margin-bottom: 10px; }
.rack-unit .rack-led { width: 6px; height: 6px; border-radius: 50%; background: var(--sb-success); opacity: .35; animation: sb-led-blink 2.6s ease-in-out infinite; }
.rack-unit .rack-led:nth-child(2) { animation-delay: .3s; }
.rack-unit .rack-led:nth-child(3) { animation-delay: .9s; background: var(--sb-accent); }
.rack-unit .rack-led:nth-child(4) { animation-delay: 1.4s; }
.rack-unit .rack-bars { display: flex; flex-direction: column; gap: 5px; }
.rack-unit .rack-bar { height: 4px; border-radius: 3px; background: var(--sb-border); }
.rack-unit .rack-bar span { display: block; height: 100%; border-radius: 3px; background: var(--sb-gradient); }
@keyframes sb-led-blink { 0%, 100% { opacity: .25; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .rack-unit .rack-led { animation: none; opacity: .7; } }

/* ---------- Toast: küçük iyileştirme (mevcut .toast'a ek) ---------- */
.toast { transform: translateX(0); }

/* ---------- Accordion (FAQ) ---------- */
.sb-accordion { border: 1px solid var(--sb-border); border-radius: var(--sb-radius-md); margin-bottom: 12px; background: var(--sb-surface); overflow: hidden; }
.sb-accordion summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 1rem; font-weight: 600; color: #fff; }
.sb-accordion summary::-webkit-details-marker { display: none; }
.sb-accordion summary .chev { transition: transform .25s var(--sb-ease-soft); color: var(--sb-muted); flex-shrink: 0; }
.sb-accordion[open] summary .chev { transform: rotate(180deg); }
.sb-accordion .sb-accordion-body { padding: 0 18px 16px; font-size: .9rem; color: var(--sb-text-secondary); }

/* ---------- Sayfa geçişi: kısa fade ---------- */
body.page-enter main { opacity: 0; transform: translateY(6px); }
main { transition: opacity .35s var(--sb-ease-soft), transform .35s var(--sb-ease-soft); }

/* ---------- Domain search loading ---------- */
.domain-search.is-loading { opacity: .7; }
.domain-search button[type="submit"] svg.spin { animation: sb-spin .8s linear infinite; }
@keyframes sb-spin { to { transform: rotate(360deg); } }