/**
 * Alt sayfaları ana sayfadaki premium tema ile hizalar.
 * style.css ve sayfa içi <style> sonrasında yüklendiğinde geçerli olur.
 */

:root {
    --bg: #060612;
    --bg-2: #0c0c20;
    --bg-3: #10102a;
    --surface: rgba(255, 255, 255, 0.04);
    --surface-2: rgba(255, 255, 255, 0.07);
    --border: rgba(255, 255, 255, 0.08);
    --border-2: rgba(255, 255, 255, 0.14);
    --primary: #e8005a;
    --primary-2: #ff2272;
    --accent: #00d4ff;
    --accent-2: #7b61ff;
    --gold: #f5c842;
    --text: #f0f0f8;
    --text-2: #9898b8;
    --text-3: #5a5a80;
    --glow-p: rgba(232, 0, 90, 0.35);
    --glow-a: rgba(0, 212, 255, 0.3);
    --glow-v: rgba(123, 97, 255, 0.3);
    --secondary: var(--accent);
    --glass: var(--surface);
    --glass-border: var(--border);
    --text-gray: var(--text-2);
}

* {
    font-family: "Inter", "Space Grotesk", system-ui, sans-serif;
}

.fa-solid,
.fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    font-style: normal;
}

.far,
.fa-regular {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400;
    font-style: normal;
}

.fab,
.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
    font-style: normal;
}

html {
    scroll-padding-top: 100px;
}

body {
    background: var(--bg);
    color: var(--text);
    background-image:
        radial-gradient(ellipse 120% 60% at 50% -10%, rgba(123, 97, 255, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 80% 50% at 0% 30%, rgba(232, 0, 90, 0.07) 0%, transparent 55%),
        radial-gradient(ellipse 80% 50% at 100% 70%, rgba(0, 212, 255, 0.06) 0%, transparent 55%);
    background-size: auto;
    background-attachment: scroll;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 60px 60px;
}

header {
    top: 12px;
    max-width: 1280px;
    padding: 10px 18px;
    background: rgba(6, 6, 18, 0.82);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-radius: 60px;
    border: 1px solid var(--border-2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.logo {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.5px;
    color: var(--text);
}

.logo span {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.nav-btn {
    background: linear-gradient(135deg, var(--primary), #c4004d);
    box-shadow: 0 4px 16px var(--glow-p);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.page-hero h1 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.page-hero p,
.page-hero .lead {
    color: var(--text-2);
}

.loc-box h2,
.loc-box h3,
.content h2 {
    color: var(--accent);
}

.loc-box p,
.content p,
.service-card p,
.faq-section p {
    color: var(--text-2);
}

.loc-box,
.service-card,
.contact-box {
    border-color: var(--border-2);
}

.service-card h3 {
    color: var(--text);
}

.service-card:hover {
    border-color: rgba(0, 212, 255, 0.35);
    box-shadow: 0 15px 40px rgba(0, 212, 255, 0.12);
}

.mahalle-list span {
    background: rgba(0, 212, 255, 0.12);
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.cta-box a:first-of-type {
    background: linear-gradient(135deg, var(--primary), #c4004d);
}

footer {
    background: rgba(0, 0, 0, 0.45);
    border-top-color: var(--border-2);
}

.footer-col h4 {
    color: var(--accent);
}

.footer-col a:hover,
.footer-bottom nav a:hover {
    color: var(--text);
}

.whatsapp-float {
    z-index: 1001;
}

.category-title {
    font-family: "Space Grotesk", sans-serif;
    color: var(--accent);
}