/* ═══════════════════════════════════════════════════════════════════
   OTORIXA — DESIGN TOKENS (tek kaynak)
   Tüm public yüzeyler (layouts/app, content/index, errors/*, forum)
   bu dosyadaki değişkenleri kullanır.
   Hardcoded renk/boyut yazılmaz; bu dosya değişirse tüm site güncellenir.
   ═══════════════════════════════════════════════════════════════════ */

:root{
    /* ─── PALET — WCAG AA/AAA uyumlu kontrast ─── */
    --otx-bg-1: #060d1a;        /* En derin arka plan */
    --otx-bg-2: #0a1322;        /* Orta katman */
    --otx-bg-3: #0e1c34;        /* Kart arka plan üst */
    --otx-bg-card: linear-gradient(165deg, #0e1c34 0%, #091222 100%);
    --otx-bg-glass: rgba(9, 18, 36, .82);

    --otx-line: rgba(148, 180, 230, .10);
    --otx-line-strong: rgba(148, 180, 230, .22);
    --otx-border-gold: rgba(240, 200, 110, .14);
    --otx-border-gold-hover: rgba(240, 200, 110, .38);

    /* Metin — okunabilirlik */
    --otx-text: #f0f5ff;          /* Ana metin (15:1 kontrast) */
    --otx-text-soft: #cbd5ec;     /* Paragraf gövde */
    --otx-muted: #a8b8d0;         /* İkincil */
    --otx-muted-soft: #7b8ba4;    /* Üçüncül */

    /* Marka — altın (varsayılan accent) */
    --otx-gold: #d4a03c;
    --otx-gold-2: #f0c86e;
    --otx-gold-bright: #ffd77a;
    --otx-gold-soft: rgba(212, 160, 60, .14);

    /* AI / Sinyal mavisi */
    --otx-ai: #4aa3ff;
    --otx-ai-bright: #6dc0ff;

    /* Status (semantic) */
    --otx-ok: #3ddf82;
    --otx-warn: #f5b545;
    --otx-bad: #ff6b7a;
    --otx-info: #60a5fa;

    /* Kategori bazlı accent — content/index.php çalışma alanı override eder */
    --otx-accent: var(--otx-gold);
    --otx-accent-soft: var(--otx-gold-soft);

    /* ─── TİPOGRAFİ ─── */
    --otx-font-body: 'Outfit', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --otx-font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --otx-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Mobile için 16px input baz (iOS otomatik zoom önler) */
    --otx-fs-base: 16px;
    --otx-line-height: 1.65;
    --otx-line-height-heading: 1.15;

    /* ─── SPACING ─── */
    --otx-r-sm: 10px;
    --otx-r: 16px;
    --otx-r-lg: 22px;
    --otx-r-xl: 28px;

    /* ─── GÖLGE ─── */
    --otx-shadow-sm: 0 6px 18px rgba(0, 0, 0, .25);
    --otx-shadow: 0 16px 38px rgba(0, 0, 0, .38);
    --otx-shadow-lg: 0 28px 60px rgba(0, 0, 0, .42);
    --otx-shadow-glow: 0 6px 24px rgba(212, 160, 60, .22);

    /* ─── LAYOUT — header dock (safe-area uyumlu) ─── */
    --otx-hdr: 68px;
    --otx-hdr-offset: calc(var(--otx-hdr) + env(safe-area-inset-top, 0px));
    --otx-dock: 72px;
    --otx-dock-offset: calc(var(--otx-dock) + env(safe-area-inset-bottom, 0px) + 12px);

    /* ─── BREAKPOINTS (tek kaynak) ─── */
    --otx-bp-mobile: 640px;
    --otx-bp-tablet: 900px;
    --otx-bp-laptop: 1120px;
    --otx-bp-desktop: 1400px;

    /* ─── ANİMASYON ─── */
    --otx-ease: cubic-bezier(.4, 0, .2, 1);
    --otx-ease-out: cubic-bezier(0, 0, .2, 1);
    --otx-tr-fast: .18s var(--otx-ease);
    --otx-tr: .25s var(--otx-ease);
    --otx-tr-slow: .4s var(--otx-ease);
}

/* ─── BASE — okunabilirlik ─── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--otx-hdr-offset) + 16px);
}

body {
    margin: 0;
    font-family: var(--otx-font-body);
    font-size: var(--otx-fs-base);
    line-height: var(--otx-line-height);
    color: var(--otx-text);
    background: var(--otx-bg-1);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Heading kalıtım — landing-pages.css ve premium styles.css burayı paylaşır */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--otx-font-display);
    line-height: var(--otx-line-height-heading);
    letter-spacing: -.02em;
    font-weight: 800;
    color: var(--otx-text);
    margin: 0 0 .6em;
}

p { margin: 0 0 1em; color: var(--otx-text-soft); }
strong, b { font-weight: 700; color: var(--otx-text); }

a {
    color: var(--otx-accent);
    text-decoration: none;
    transition: color var(--otx-tr-fast);
}
a:hover { color: var(--otx-gold-bright); }

/* ─── INPUT — iOS zoom engelle (16px baz) ─── */
input, textarea, select, button {
    font-family: inherit;
    font-size: var(--otx-fs-base);
}

/* ─── FOCUS — klavye navigasyonu için belirgin ─── */
:focus-visible {
    outline: 2px solid var(--otx-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ─── İMG — layout shift azaltma ─── */
img, picture, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ─── SR-ONLY ─── */
.sr-only {
    position: absolute;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ─── TAP TARGET — mobil min 44×44 ─── */
@media (pointer: coarse) {
    button, .btn, a.btn, .dock-item, .nav-link {
        min-height: 44px;
    }
}

/* ─── REDUCE MOTION — erişilebilirlik ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── PRINT (basit) ─── */
@media print {
    body { background: white; color: black; }
    .hdr, .ftr, .dock, .site-fab, .drawer, .drawer-overlay { display: none !important; }
}