/* ═══════════════════════════════════════════════════════════════
   BASE — reset, tipografi, kapsayıcı, bölüm ritmi, hareket temeli
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    overflow-x: clip;
    scroll-padding-top: calc(var(--nav-h) + 20px);
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--bg);
    overflow-x: clip;
    max-width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    animation: pageIn .45s var(--ease) both;
}
/* body.page-leaving KALDIRILDI (Faz 3): sayfa geçişi artık cross-document
   View Transitions ile yapılıyor, bu sınıfı ekleyen JS silindi. Kural
   kalsaydı ileride yanlışlıkla eklenmesi sayfayı tamamen karartırdı. */
@keyframes pageIn { from { opacity: 0; } }

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
iframe { max-width: 100%; border: 0; }
ul { list-style: none; }
a  { text-decoration: none; color: inherit; transition: color var(--t); }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--primary); color: var(--on-primary); }

/* Erişilebilirlik: her odaklanabilir öğede görünür halka */
:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* İçeriğe atla (klavye kullanıcıları) */
.skip-link {
    position: absolute; left: 50%; top: -100px; transform: translateX(-50%);
    z-index: calc(var(--z-adminbar) + 1);
    background: var(--primary); color: var(--on-primary);
    padding: 12px 24px; border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-weight: 700; font-size: var(--fs-body-sm);
    transition: top var(--t);
}
.skip-link:focus { top: 0; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb {
    background: rgba(16,20,30,.20); border-radius: var(--r-pill);
    border: 3px solid var(--surface);
}
::-webkit-scrollbar-thumb:hover { background: rgba(16,20,30,.34); }

/* ── Tipografi ──────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
    /* Faz 2: başlıklar Fraunces. Serif, sanstan daha ince bir ağırlıkta
       daha güçlü durur — 800 yerine 600. Gövde Manrope kalır. */
    font-family: var(--font-display);
    font-weight: 600;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    color: var(--text);
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: 700; }
p  { color: var(--text-2); }
strong, b { color: var(--text); font-weight: 700; }
.accent { color: var(--primary-ink); }
.on-dark .accent { color: var(--primary); }

/* ── Kapsayıcı & bölüm ritmi ────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--container-pad);
}

.section { position: relative; padding: var(--section-y) 0; }

/* Dönüşümlü bölüm bandı — açık gri geçiş */
.section.bg-blue {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* Bölüm başlığı bloğu */
.section-title {
    max-width: 720px;
    margin: 0 auto clamp(32px, 3.6vw, 52px);
    text-align: center;
}
.section-title h2 { margin-bottom: var(--space-3); }
.section-title p {
    font-size: var(--fs-body-sm);
    color: var(--text-2);
    max-width: 60ch; margin: 0 auto;
}
.section-title.is-left { margin-left: 0; text-align: left; }

/* Eyebrow / overline etiketi */
.overline {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--fs-eyebrow); font-weight: 700;
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--primary-ink);
    margin-bottom: var(--space-3);
}
.overline::before { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.section-title .overline::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: .5; }
.section-title.is-left .overline::after { display: none; }
.on-dark .overline { color: var(--primary); }

/* ── Giriş animasyonları ────────────────────────────────── */
/* [data-reveal] gizleme kuralları motion.css'e taşındı.
   Burada KOŞULSUZ opacity:0 vardı — JS çalışmazsa veya CSS yarım
   yüklenirse sayfa tamamen boş kalıyordu. Artık gizleme yalnız
   tarayıcı animasyonu gerçekten çalıştırabildiğinde uygulanır. */

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.97); } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ── Yardımcılar ────────────────────────────────────────── */

/* Bölüm sonu CTA ortalaması (index) */
.section-cta { text-align: center; margin-top: clamp(28px, 3vw, 44px); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Uzun kelime/URL taşmasını engelle (320px'te bile) */
p, li, h1, h2, h3, h4, a, span, td, th, summary { overflow-wrap: break-word; }

/* ═══════════ ARKA PLAN KATMANI (tüm sayfalar) ═══════════
   html zemini taşır, body şeffaftır; böylece sabit dekor katmanları
   içeriğin ARKASINDA ama zeminin ÜSTÜNDE kalır. */
html { background: var(--bg); }
body { background: transparent; }

/* 1) İnce mimari ızgara — kenarlara doğru siliniyor */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(16,20,30,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16,20,30,.045) 1px, transparent 1px);
    background-size: 76px 76px;
    -webkit-mask-image: radial-gradient(115% 85% at 50% 0%, #000 20%, transparent 78%);
            mask-image: radial-gradient(115% 85% at 50% 0%, #000 20%, transparent 78%);
}

/* 2) Yumuşak altın aura — iki köşede, çok düşük yoğunlukta */
body::after {
    content: '';
    position: fixed; inset: 0; z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(46% 38% at 88% 12%, rgba(var(--primary-rgb), .13), transparent 70%),
        radial-gradient(40% 34% at 6% 62%, rgba(var(--primary-rgb), .09), transparent 72%);
}

/* Bölüm bandı — üst/alt geçişi yumuşat */
.section.bg-blue { position: relative; }
.section.bg-blue::before,
.section.bg-blue::after {
    content: ''; position: absolute; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), .34), transparent);
}
.section.bg-blue::before { top: -1px; }
.section.bg-blue::after  { bottom: -1px; }

/* Bölüm başlığının arkasında hafif altın hale */
.section-title { position: relative; }
.section-title::before {
    content: ''; position: absolute; left: 50%; top: -28%;
    width: min(460px, 82%); height: 150%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(var(--primary-rgb), .11), transparent 66%);
    z-index: -1; pointer-events: none;
}

/* Metin içi bağlantılar renk DIŞINDA da ayırt edilebilmeli (WCAG 1.4.1).
   Gövde metni içindeki bağlantılara alt çizgi; navigasyon, buton ve kart
   bağlantıları bunun dışında (onlar zaten bağlam olarak bağlantı). */
p a:not([class]),
li a:not([class]),
.faq-answer a,
.footer-bottom a {
    text-decoration: underline;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}
p a:not([class]):hover,
.footer-bottom a:hover { text-decoration-thickness: 2px; }