/* ============================================
   EmlakCRM Frontend — Tasarım Sistemi v4
   Güncel, şık, mobil + masaüstü uyumlu
   Marka: indigo / violet — CRM panel (crm-ui-v2-layer) ile uyumlu
   ============================================ */

:root {
    /* Renk paleti */
    --color-brand: #0f766e;
    --color-brand-light: #14b8a6;
    --color-brand-dark: #0d9488;
    --color-primary: #2563eb;
    --color-primary-light: #3b82f6;
    --color-accent: #7c3aed;
    --color-surface: #ffffff;
    --color-surface-alt: #f8fafc;
    --color-surface-elevated: #ffffff;
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-text-subtle: #64748b;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    
    /* Tipografi */
    --font-display: 'Plus Jakarta Sans', 'Outfit', system-ui, sans-serif;
    --font-body: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    
    /* Spacing & radius */
    --space-section: 5rem;
    --space-section-lg: 6.5rem;
    --space-card: 1.5rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* Gölgeler */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    
    /* Geçişler */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
    :root {
        --space-section: 3rem;
        --space-section-lg: 4rem;
    }
}

/* Body & tipografi */
body {
    font-family: var(--font-body) !important;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display) !important;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.25;
    color: var(--color-text);
}

h1 { font-size: clamp(1.875rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

/* Bileşen: Sayfa konteyner */
.frontend-container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .frontend-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .frontend-container { padding-left: 2rem; padding-right: 2rem; }
}

/* Bölüm boşlukları */
.frontend-section {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
}

.frontend-section-lg {
    padding-top: var(--space-section-lg);
    padding-bottom: var(--space-section-lg);
}

/* Kartlar */
.frontend-card {
    background: var(--color-surface-elevated);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
    padding: var(--space-card);
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.frontend-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-border);
}

/* Butonlar */
.btn-frontend-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    font-family: var(--font-display);
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
    transition: transform var(--transition-fast), box-shadow var(--transition-base);
}

.btn-frontend-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
    color: #fff;
}

.btn-frontend-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.btn-frontend-secondary:hover {
    background: var(--color-border-light);
    border-color: var(--color-text-subtle);
    color: var(--color-text);
}

/* Etiket / badge */
.frontend-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
    background: rgba(20, 184, 166, 0.12);
    color: var(--color-brand);
    border: 1px solid rgba(20, 184, 166, 0.25);
}

/* Navbar iyileştirme */
.navbar {
    transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.navbar.scrolled {
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-md);
}

/* Hero alanı */
.frontend-hero {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    padding-top: 6rem;
    padding-bottom: 4rem;
}

@media (max-width: 768px) {
    .frontend-hero {
        min-height: auto;
        padding-top: 5rem;
        padding-bottom: 3rem;
    }
}

/* Gradient metin */
.text-gradient-brand {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Arka plan mesh */
.bg-mesh {
    background-color: #fff;
    background-image: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 99, 235, 0.12), transparent),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(124, 58, 237, 0.08), transparent),
        radial-gradient(ellipse 50% 30% at 0% 50%, rgba(20, 184, 166, 0.06), transparent);
}

/* Link hover */
.frontend-link {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.frontend-link:hover {
    color: var(--color-primary);
}

/* Form elemanları */
.frontend-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.frontend-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Footer */
.frontend-footer {
    background: #0f172a;
    color: #94a3b8;
}

.frontend-footer a {
    color: #94a3b8;
    transition: color var(--transition-fast);
}

.frontend-footer a:hover {
    color: #fff;
}

/* Mobil iyileştirmeler */
@media (max-width: 768px) {
    .frontend-card {
        padding: 1.25rem;
    }
    
    .btn-frontend-primary,
    .btn-frontend-secondary {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }
}

/* AOS / animasyon uyumu */
[data-aos] {
    pointer-events: auto;
}

/* ============================================
   SİTE GENELİ — Minimal & tutarlı görünüm
   Tüm sayfalarda aynı dil
   ============================================ */

/* Section: tüm .section sınıfları aynı boşluk */
.section {
    padding-top: var(--space-section) !important;
    padding-bottom: var(--space-section) !important;
}
@media (max-width: 768px) {
    .section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* Kartlar: rounded-2xl + shadow kullanan bloklar */
.rounded-2xl.shadow-lg,
.rounded-2xl.shadow-md,
.rounded-2xl.shadow-xl,
.bg-white.rounded-2xl {
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--color-border-light) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow var(--transition-base), border-color var(--transition-base) !important;
}
.rounded-2xl.shadow-lg:hover,
.rounded-2xl.shadow-md:hover,
.bg-white.rounded-2xl:hover {
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--color-border) !important;
}

/* Genel konteyner: max-w-* + mx-auto + px-* */
.max-w-4xl.mx-auto.px-4,
.max-w-5xl.mx-auto.px-4,
.max-w-6xl.mx-auto.px-4,
.max-w-7xl.mx-auto.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
@media (min-width: 640px) {
    .max-w-4xl.mx-auto.px-4, .max-w-5xl.mx-auto.px-4,
    .max-w-6xl.mx-auto.px-4, .max-w-7xl.mx-auto.px-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}
@media (min-width: 1024px) {
    .max-w-4xl.mx-auto.px-4, .max-w-5xl.mx-auto.px-4,
    .max-w-6xl.mx-auto.px-4, .max-w-7xl.mx-auto.px-4 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Başlıklar: daha minimal ağırlık (isteğe bağlı – font-bold tutulabilir) */
h1.font-black, h2.font-black, h3.font-black { font-weight: 800 !important; }

/* Metin renkleri: tek palet */
.text-gray-600, .text-slate-600 { color: var(--color-text-muted) !important; }
.text-gray-700, .text-slate-700 { color: var(--color-text) !important; }
.text-gray-500, .text-slate-500 { color: var(--color-text-subtle) !important; }

/* Butonlar: premium/primary tutarlılık */
.btn-premium {
    border-radius: var(--radius-full) !important;
    font-weight: 600 !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-base) !important;
}
.btn-premium:hover {
    transform: translateY(-2px);
}

/* Form: input ve select */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea {
    border-radius: var(--radius-md) !important;
    border-color: var(--color-border) !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* Arka planlar: daha yumuşak tonlar */
.bg-slate-50 { background-color: #f8fafc !important; }
.bg-gray-50 { background-color: #f9fafb !important; }

/* Footer: tek stil */
.frontend-footer .text-slate-400,
.frontend-footer .text-slate-500 { color: #94a3b8 !important; }
.frontend-footer a:hover { color: #fff !important; }

/* Navbar: glass efekti sade */
.navbar.glass {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* İkon kutuları: ortak radius */
.w-12.h-12.rounded-xl,
.w-14.h-14.rounded-2xl {
    border-radius: var(--radius-lg) !important;
}

/* Listeler: madde işaretleri minimal */
ul.space-y-2 li, ul.space-y-3 li, ul.space-y-4 li {
    color: var(--color-text-muted);
}

/* Gradient text: tüm sayfalarda aynı */
.gradient-text {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================
   Faz 3 — Erişilebilirlik, hareket tercihi, yazdırma
   (SEO / frontend.css revizyonu)
   ============================================ */

/* Klavye odak: yalnızca :focus-visible (fare tıklamasında halka yok) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn-premium:focus-visible,
.btn-frontend-primary:focus-visible,
.btn-frontend-secondary:focus-visible,
.mobile-menu-close-btn:focus-visible,
.mobile-menu-item:focus-visible,
.mobile-menu-cta:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.frontend-input:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

/* Azaltılmış hareket tercihi */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .animate-float,
    .animate-pulse-slow,
    .icon-float,
    .particle {
        animation: none !important;
    }
}

/* Yazdırma: gereksiz sabit öğeleri gizle */
@media print {
    .fixed.bottom-6,
    .navbar,
    footer,
    script,
    .mobile-menu-overlay,
    .mobile-menu {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    a[href]::after {
        content: '' !important;
    }
}