/* ============================================================
   Yörünge — Site Geneli İnteraktif Katman (içerik değiştirmez)
   Scroll ilerleme çubuğu, kart spot ışığı, 3D tilt, manyetik
   butonlar, tıklama dalgası, imleç parıltısı, yukarı dön butonu.
   ============================================================ */

/* --- Kaydırma: Lenis devralıyor, native smooth kapalı (çift animasyon olmasın) --- */
html {
    scroll-behavior: auto;
}

/* ============================================================
   GLOBAL PREMIUM RÖTUŞ (içerik değişmez, sadece görünüm)
   ============================================================ */

/* Premium font — sistem fontu yerine Plus Jakarta Sans */
html,
body,
button,
input,
textarea,
select {
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Başlık tipografisi: daha sıkı, daha güçlü */
h1, h2, h3 { letter-spacing: -0.02em; }
section h2 { font-weight: 800; }

/* ============================================================
   AÇIK İMMERSİF TEMA (tüm site, tüm sayfalar)
   Yumuşak açık zemin (bembeyaz değil). Bölümler şeffaf ->
   arkadaki orbit derinlik alanı belli belirsiz görünür.
   İçerik buzlu-beyaz cam kartlarda okunur. Yazı/içerik değişmez;
   orijinal koyu metin renkleri korunur.
   ============================================================ */
html {
    background-color: #e9eef5 !important;
    background-image:
        radial-gradient(60% 50% at 12% 0%, rgba(56, 189, 248, 0.10), transparent 60%),
        radial-gradient(55% 45% at 92% 8%, rgba(139, 92, 246, 0.08), transparent 60%) !important;
    background-attachment: fixed !important;
}
body { background-color: transparent !important; }

/* Bölüm zeminleri şeffaf (orbit derinlik alanı sızsın). #process hariç. */
section:not(#process), footer, main, .hero-pattern,
.bg-slate-50, .bg-slate-100 {
    background-color: transparent !important;
    background-image: none !important;
}

/* Orijinal koyu "süreç" bölümü açık temada da koyu kalsın (ritim/kontrast) */
#process { background-color: #0f172a !important; }

/* Beyaz kart/panel -> buzlu beyaz cam (derinlik hafifçe sızar, okunur kalır) */
.bg-white {
    background-color: rgba(255, 255, 255, 0.74) !important;
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
}
/* Yarı saydam beyaz nav sınıfları + nav -> buzlu beyaz */
nav, .bg-white\/80, .bg-white\/90, .bg-white\/95 {
    background-color: rgba(255, 255, 255, 0.72) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
nav { border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important; }

/* Kart gölgeleri biraz daha yumuşak/markalı */
.shadow-xl, .shadow-2xl {
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12) !important;
}

/* --- Modal/popup (overlay z-[200]) NET ve OPAK olmalı ---
   Buzlu cam koyu scrim üstünde çamur gibi duruyordu; opak beyaz yap. */
.z-\[200\] .bg-white {
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
.z-\[200\] .bg-slate-50, .z-\[200\] .bg-slate-100 {
    background-color: #f1f5f9 !important;
    background-image: none !important;
}

/* Nav logosu artık saydam (logo-clean.png) — karışım/hile gerekmiyor. */

/* Teknoloji pill'lerindeki dil logoları (span'da zaten gap-2 var) */
.yrg-tech-ico {
    height: 1.05em;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* ============================================================
   SCROLL-REVEAL — bölümler/kartlar göründükçe yumuşak belirir.
   JS .yrg-reveal ekler, görününce .yrg-in ekler. Güvenlik
   zamanlayıcısı her şeyi açar; framer-motion'lı inline stiller
   bizim sınıfı ezdiği için onlara dokunmaz.
   ============================================================ */
.yrg-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.yrg-reveal.yrg-in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .yrg-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- Scroll ilerleme çubuğu --- */
.yrg-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    z-index: 9998;
    pointer-events: none;
    background: linear-gradient(90deg, #0284c7, #3b82f6, #8b5cf6, #f97316);
    transform-origin: 0 50%;
    scale: 0 1;
    transition: scale 0.08s linear;
}

/* --- Kart spot ışığı: imleci takip eden ışık --- */
.tilt-card {
    transition: rotate 0.25s ease, transform 0.3s, box-shadow 0.3s;
}
.tilt-card .yrg-spot {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(
        420px circle at var(--yrg-mx, 50%) var(--yrg-my, 50%),
        rgba(14, 165, 233, 0.10),
        transparent 65%
    );
    z-index: 3;
}
.tilt-card:hover .yrg-spot {
    opacity: 1;
}

/* --- Tıklama dalgası (ripple) --- */
.yrg-ripple-host {
    position: relative;
    overflow: hidden;
}
.yrg-ripple {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: yrg-ripple-anim 0.6s ease-out forwards;
    z-index: 5;
}
@keyframes yrg-ripple-anim {
    to { transform: scale(2.6); opacity: 0; }
}

/* --- İmleç parıltısı: sayfada imleci izleyen yumuşak ışık --- */
.yrg-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 480px;
    height: 480px;
    margin: -240px 0 0 -240px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.07), transparent 65%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* --- Yukarı dön butonu --- */
.yrg-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0284c7, #3b82f6);
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.35);
    opacity: 0;
    pointer-events: none;
    translate: 0 16px;
    transition: opacity 0.35s ease, translate 0.35s ease, box-shadow 0.25s ease;
}
.yrg-top-btn.yrg-visible {
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;
}
.yrg-top-btn:hover {
    box-shadow: 0 12px 32px rgba(2, 132, 199, 0.5);
}
.yrg-top-btn svg {
    transition: translate 0.25s ease;
}
.yrg-top-btn:hover svg {
    translate: 0 -2px;
}
/* İlerleme halkası */
.yrg-top-btn .yrg-ring {
    position: absolute;
    inset: -5px;
    border-radius: 18px;
    pointer-events: none;
}

/* --- Manyetik buton: yumuşak geri dönüş --- */
.yrg-magnetic {
    transition: translate 0.25s ease-out;
}

/* --- Hareket azaltma / dokunmatik cihaz --- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .yrg-progress,
    .yrg-cursor-glow { display: none; }
    .yrg-ripple { animation: none; opacity: 0; }
}
@media (pointer: coarse) {
    .yrg-cursor-glow { display: none; }
}