/**
 * TamirSepetim Design System
 * UX patterns from UI UX Pro Max; brand colors unchanged (yeşil tema).
 */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

:root {
    /* TamirSepetim brand palette (yeşil tema) */
    --color-primary: #8BC34A;
    --color-secondary: #4CAF50;
    --color-cta: #FFD700;
    --color-accent: #FF9800;
    --color-background: #f8f9fa;
    --color-text: #333333;
    --color-surface: #FFFFFF;
    --color-muted: #666666;
    --color-border: #e9ecef;

    /* Legacy aliases (existing templates) */
    --primary-color: var(--color-primary);
    --secondary-color: var(--color-secondary);
    --accent-color: var(--color-accent);
    --text-dark: var(--color-text);
    --text-light: var(--color-muted);
    --bg-light: var(--color-background);

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-xl: 30px;

    /* Motion */
    --transition-fast: 150ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-slow: 300ms ease-out;

    /* Bootstrap bridge */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 139, 195, 74;
    --bs-success: var(--color-secondary);
    --bs-warning: var(--color-accent);
}

/* Typography — body font only; headings keep site default */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-dark);
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
}

/* Accessibility */
@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;
    }

    .swipe-arrow {
        animation: none !important;
    }
}

a, button, [role="button"], .btn, .nav-item a, .dropdown-item,
.category-card, .category-card-armut, .premium-mechanic-card,
.offer-card, .review-card, .request-card, .service-card-photo,
.carousel-btn, .nav-section-btn, .swipe-side-icon {
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Buttons */
.btn-primary,
.btn-success,
.nav-item .btn {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #fff !important;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.hero-search-box button {
    background: var(--color-cta) !important;
    border-color: var(--color-cta) !important;
    color: #333 !important;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: opacity var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.btn-primary:hover,
.btn-success:hover,
.nav-item .btn:hover,
.hero-search-box button:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.35);
}

.btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.btn-outline-primary:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.btn-warning {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
}

/* Header */
.header-top {
    background: var(--color-primary) !important;
}

.main-header {
    box-shadow: var(--shadow-sm);
}

.service-switch button.active:not([data-service="kpu"]) {
    color: var(--color-primary) !important;
}

.search-box:focus-within,
.standard-search-box:focus-within {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1) !important;
}

.user-dropdown-trigger:hover,
.dropdown-item:hover {
    color: var(--color-primary) !important;
}

/* Hero — marketplace search-first */
.hero-section {
    background: var(--color-background);
}

.hero-container {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
    border-radius: var(--radius-xl);
}

.hero-search-box button {
    background: var(--color-cta) !important;
    color: #333 !important;
}

.hero-search-box button:hover {
    background: #FFC107 !important;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.3) !important;
}

.popular-searches a:hover {
    background: var(--color-primary) !important;
}

/* Cards */
.category-card,
.category-card-armut,
.step-card-armut,
.offer-card,
.review-card,
.request-card,
.premium-mechanic-card,
.page-card,
.auth-card {
    border-radius: var(--radius-md);
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.category-card-armut:hover,
.offer-card:hover,
.review-card:hover,
.request-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.step-card-armut:hover,
.category-card-armut:hover {
    box-shadow: none !important;
    transform: none !important;
}

.premium-mechanic-card:hover {
    border-color: var(--color-accent) !important;
}

.category-icon,
.category-icon-armut,
.step-icon-armut,
.trust-icon,
.step-number {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
}

.stat-number,
.category-stat .number,
.offer-price,
.stat strong {
    color: var(--color-primary) !important;
}

.premium-badge {
    background: var(--color-accent) !important;
}

/* Sections — flat layout on homepage blocks */
.section-container,
.categories-container {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.stats-section,
.how-it-works,
.recent-requests,
.recent-offers-section,
.premium-mechanics-section,
.customer-reviews-section,
.trust-indicators-section {
    border-radius: 0;
}

.trust-indicators-section {
    background: var(--color-background);
}

/* Forms */
.form-control,
.form-select,
.search-box input,
.hero-search-box input,
.standard-search-box input,
.input {
    border-radius: var(--radius-sm);
    border-color: var(--color-border);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control:focus,
.form-select:focus,
.search-box input:focus,
.hero-search-box input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

/* Footer */
.main-footer {
    background: var(--text-dark) !important;
}

.footer-section h5 {
    color: var(--color-primary) !important;
}

.footer-section a:hover {
    color: var(--color-primary) !important;
}

/* Mobile nav */
.mobile-bottom-nav {
    backdrop-filter: blur(20px);
}

.nav-section-btn:hover,
.nav-section-btn.active {
    color: var(--color-primary) !important;
    background: rgba(139, 195, 74, 0.1) !important;
}

.module-switch-handle {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
}

.bottom-nav-item a:hover,
.bottom-nav-item a.active {
    color: var(--color-primary) !important;
    background: rgba(139, 195, 74, 0.1) !important;
}

/* Swiper */
.requests-swiper .swiper-button-next,
.requests-swiper .swiper-button-prev,
.carousel-btn {
    background: var(--color-primary) !important;
}

.requests-swiper .swiper-button-next:hover,
.requests-swiper .swiper-button-prev:hover,
.carousel-btn:hover {
    background: var(--color-secondary) !important;
}

.requests-swiper .swiper-pagination-bullet-active {
    background: var(--color-primary) !important;
}

/* Breadcrumb */
.breadcrumb-current {
    color: var(--color-primary) !important;
}

.breadcrumb-nav a:hover {
    color: var(--color-primary) !important;
}

/* Mega menu */
.mega-menu h6 {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
}

.mega-menu a.mega-teklif-inline {
    color: var(--color-secondary) !important;
}

.mega-menu a:hover,
.mega-menu-svc-name a:hover {
    color: var(--color-primary) !important;
}

/* Legacy Jobguru theme bridge (script.php pages) */
.jobguru-btn {
    border-color: var(--color-primary) !important;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.jobguru-btn:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

.jobguru-btn-2,
.jobguru-btn-danger {
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.jobguru-btn-2 {
    background: var(--color-secondary) !important;
}

.jobguru-btn-2:hover {
    background: #1e8d4e !important;
}

.jobguru-footer-area {
    background: var(--text-dark) !important;
}

.jobguru-footer-area .single-footer-widget h3 {
    color: var(--color-primary) !important;
}

.jobguru-footer-area a:hover {
    color: var(--color-primary) !important;
}

/* Auth pages */
.auth-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%) !important;
}

/* KPU module — turuncu vurgu (ayrı modül) */
[data-service="kpu"].active,
.service-switch button[data-service="kpu"].active {
    background: var(--color-accent) !important;
    color: #fff !important;
}

.service-switch button[data-service="kpu"].active:hover {
    color: #fff !important;
}

.module-switch-handle.kpu {
    background: linear-gradient(135deg, #FF6B35, #F7931E) !important;
}

.swipe-side-icon.right {
    color: #FF6B35 !important;
}

/* Text utilities */
.text-success {
    color: var(--color-primary) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.badge.bg-success,
.badge.bg-primary {
    background-color: var(--color-primary) !important;
}

.request-category {
    background: var(--color-primary) !important;
}

.mega-menu-services {
    border-left-color: rgba(139, 195, 74, 0.35) !important;
}