/* ===== HALERIA HALI YIKAMA - MINIMAL & ELEGANT DESIGN ===== *//* Modern CSS Reset */*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0;}/* CSS Variables - Halerie Blue Theme */:root { /* Primary Colors - Elegant Blue Palette */ --primary-dark: #0d3b66; --primary-medium: #1a5490; --primary-light: #2b6cb0; --text-muted: #4a5568; /* Improved contrast ratio */ /* Accent Colors - Blue Theme */ --accent-gold: #2563eb; --accent-gold-light: #3b82f6; --accent-blue: #1e56a0; --accent-blue-light: #4a90d9; /* Neutral Colors - Warm Beige Background */ --white: #ffffff; --gray-50: #f8f6f2; --gray-100: #f3f0ea; --gray-200: #e8e4db; --gray-300: #d4cfc4; --gray-400: #9ca3af; --gray-800: #3d4852; --gray-900: #1f2937; /* Spacing System */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Typography */ --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Inter', system-ui, sans-serif; /* Font Sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --text-6xl: 3.75rem; /* 60px */ /* Line Heights */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Border Radius */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 300ms ease; --transition-slow: 500ms ease; /* Container */ --container-max: 1200px; --container-padding: var(--space-6);}/* Base Styles */html { scroll-behavior: smooth; font-size: 16px;}body { font-family: var(--font-primary); line-height: var(--leading-normal); color: var(--primary-dark); background-color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}/* Typography */h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-tight); color: var(--primary-dark); margin-bottom: var(--space-4);}h1 { font-size: var(--text-5xl); font-weight: 700; }h2 { font-size: var(--text-4xl); font-weight: 600; }h3 { font-size: var(--text-3xl); font-weight: 600; }h4 { font-size: var(--text-2xl); font-weight: 600; }h5 { font-size: var(--text-xl); font-weight: 500; }h6 { font-size: var(--text-lg); font-weight: 500; }p { margin-bottom: var(--space-4); color: var(--primary-light); line-height: var(--leading-relaxed);}a { color: var(--accent-gold); text-decoration: none; transition: color var(--transition-fast);}a:hover { color: var(--accent-gold-light);}/* Layout */.container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding);}.section { padding: var(--space-20) 0;}.section-sm { padding: var(--space-16) 0;}.section-lg { padding: var(--space-24) 0;}/* Grid System */.grid { display: grid; gap: var(--space-6);}.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }/* Flex Utilities */.flex { display: flex; }.flex-col { flex-direction: column; }.items-center { align-items: center; }.justify-center { justify-content: center; }.justify-between { justify-content: space-between; }.gap-4 { gap: var(--space-4); }.gap-6 { gap: var(--space-6); }.gap-8 { gap: var(--space-8); }/* Text Utilities */.text-center { text-align: center; }.text-left { text-align: left; }.text-right { text-align: right; }.text-sm { font-size: var(--text-sm); }.text-lg { font-size: var(--text-lg); }.text-xl { font-size: var(--text-xl); }.text-muted { color: var(--text-muted); }/* Buttons */.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border: 1px solid transparent; border-radius: var(--radius-lg); font-size: var(--text-base); font-weight: 500; line-height: 1; cursor: pointer; transition: all var(--transition-fast); text-decoration: none; white-space: nowrap;}.btn-primary { background: linear-gradient(135deg, #0d3b66, #1a5490) !important; color: #ffffff !important; border: none; box-shadow: 0 4px 6px rgba(13, 59, 102, 0.3);}.btn-primary:hover { background: linear-gradient(135deg, #1a5490, #0d3b66) !important; color: #ffffff !important; box-shadow: 0 6px 12px rgba(13, 59, 102, 0.4); transform: translateY(-2px);}.btn-outline { background-color: transparent; color: white; border-color: rgba(255, 255, 255, 0.3);}.btn-outline:hover { background-color: rgba(255, 255, 255, 0.1); border-color: white; color: white;}.btn-gold { background-color: var(--accent-gold); color: var(--white); border-color: var(--accent-gold);}.btn-gold:hover { background-color: var(--accent-gold-light); border-color: var(--accent-gold-light);}.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg);}.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-sm);}/* Header */.header { position: fixed; top: 0; left: 0; right: 0; background-color: #0d3b66; backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); z-index: 1000; transition: all var(--transition-normal);}.header.scrolled { background-color: #0a2d4d; box-shadow: var(--shadow-sm);}.nav { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0;}.logo { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-2xl); font-weight: 700; color: white; text-decoration: none; margin-left: -15px;}.logo img { width: 140px; height: auto; max-height: 55px; object-fit: contain; filter: brightness(1.3) drop-shadow(0 0 8px rgba(255,255,255,0.4));}.nav-menu { display: flex; list-style: none; gap: var(--space-8); align-items: center;}.nav-link { color: white; font-weight: 500; font-size: var(--text-base); transition: color var(--transition-fast); position: relative;}.nav-link:hover { color: var(--accent-gold);}.nav-link.active { color: var(--accent-gold);}.nav-link.active::after { width: 100%;}.nav-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--accent-gold); transition: width var(--transition-fast);}.nav-link:hover::after { width: 100%;}/* Language Switcher */.language-switcher { display: flex; align-items: center; background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-md); padding: 4px; margin-right: var(--space-4); border: 1px solid rgba(255, 255, 255, 0.15);}.lang-link { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; font-weight: 500; text-decoration: none; padding: 6px 12px; border-radius: 6px; transition: all var(--transition-fast); min-width: 45px;}.lang-link:hover { background: rgba(255, 255, 255, 0.15); color: white;}.lang-link.active { background: rgba(255, 255, 255, 0.25); color: white; font-weight: 600;}.lang-separator { display: none;}.nav-actions { display: flex; gap: var(--space-3); align-items: center; flex-shrink: 0;}.mobile-menu-btn { display: none; flex-direction: column; gap: 5px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: var(--radius-md); cursor: pointer; padding: 10px; position: relative; z-index: 1001; width: 44px; height: 44px; align-items: center; justify-content: center; transition: background var(--transition-fast); -webkit-tap-highlight-color: transparent;}.mobile-menu-btn:hover,.mobile-menu-btn:active { background: rgba(255, 255, 255, 0.2);}.mobile-menu-btn span { width: 22px; height: 2px; background-color: white; border-radius: var(--radius-full); transition: all var(--transition-normal); display: block;}.mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px);}.mobile-menu-btn.active span:nth-child(2) { opacity: 0; transform: scale(0);}.mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px);}/* Hero Section */.hero { padding: calc(var(--space-20) + 60px) 0 var(--space-20); background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%); position: relative; overflow: hidden;}.hero::before { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: linear-gradient(135deg, transparent 0%, rgba(212, 175, 55, 0.03) 100%); pointer-events: none;}.hero-content { position: relative; z-index: 1;}.hero-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); background-color: rgba(212, 175, 55, 0.1); color: var(--accent-gold); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-6);}.hero h1 { font-size: var(--text-6xl); font-weight: 700; line-height: 1.1; margin-bottom: var(--space-6); background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}.hero-subtitle { font-size: var(--text-xl); color: var(--primary-light); line-height: var(--leading-relaxed); margin-bottom: var(--space-8); max-width: 600px;}.hero-cta { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center;}.hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-8); margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--gray-200);}.hero-stat { text-align: center;}.hero-stat-number { font-size: var(--text-3xl); font-weight: 700; color: var(--accent-gold); display: block; margin-bottom: var(--space-1);}.hero-stat-label { font-size: var(--text-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;}/* Section Headers */.section-header { text-align: center; margin-bottom: var(--space-16); max-width: 600px; margin-left: auto; margin-right: auto;}.section-badge { display: inline-block; padding: var(--space-1) var(--space-3); background-color: rgba(212, 175, 55, 0.1); color: var(--accent-gold); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-4);}.section-title { font-size: var(--text-4xl); font-weight: 700; margin-bottom: var(--space-4);}.section-description { font-size: var(--text-lg); color: var(--primary-light); line-height: var(--leading-relaxed);}/* Carpet Gallery */.carpet-gallery { background-color: var(--gray-50);}.carpet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-8);}.carpet-card { background-color: var(--white); border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--transition-normal); border: 1px solid var(--gray-200);}.carpet-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg);}.carpet-image { position: relative; width: 100%; height: 240px; overflow: hidden;}.carpet-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow);}.carpet-card:hover .carpet-image img { transform: scale(1.05);}.carpet-badge { position: absolute; top: var(--space-4); right: var(--space-4); background-color: var(--accent-gold); color: var(--white); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;}.carpet-content { padding: var(--space-6);}.carpet-title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-2); color: var(--primary-dark);}.carpet-description { color: var(--primary-light); margin-bottom: var(--space-4); line-height: var(--leading-relaxed);}.carpet-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent-gold); font-weight: 500; font-size: var(--text-sm); transition: all var(--transition-fast);}.carpet-link:hover { color: var(--accent-gold-light); gap: var(--space-2);}.carpet-link::after { content: '→'; transition: transform var(--transition-fast);}.carpet-link:hover::after { transform: translateX(2px);}/* Services Section */.services { background-color: var(--white);}.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-8); max-width: 1200px; margin: 0 auto;}.service-card { text-align: center; padding: var(--space-8); border-radius: var(--radius-2xl); background-color: var(--gray-50); transition: all var(--transition-normal);}.service-card:hover { background-color: var(--white); box-shadow: var(--shadow-md); transform: translateY(-2px);}.service-icon { width: 64px; height: 64px; background-color: var(--accent-gold); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4); font-size: var(--text-2xl); color: var(--white);}.service-title { font-size: var(--text-xl); font-weight: 600; margin-bottom: var(--space-3); color: var(--primary-dark);}.service-description { color: var(--primary-light); line-height: var(--leading-relaxed); margin-bottom: var(--space-6);}.service-card-link { display: inline-block; padding: var(--space-3) var(--space-6); background: linear-gradient(135deg, #0d3b66, #1a5490) !important; color: #ffffff !important; text-decoration: none; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; transition: all var(--transition-normal); box-shadow: 0 4px 6px rgba(13, 59, 102, 0.3); border: none;}.service-card-link:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(13, 59, 102, 0.4); background: linear-gradient(135deg, #1a5490, #0d3b66) !important; color: #ffffff !important;}.service-card-link:active { transform: translateY(0);}/* About Section */.about { background: linear-gradient(135deg, var(--gray-50) 0%, var(--white) 100%);}.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center;}.about-text h2 { margin-bottom: var(--space-6);}.about-features { display: grid; gap: var(--space-4); margin-top: var(--space-6);}.about-feature { display: flex; align-items: flex-start; gap: var(--space-3);}.about-feature-icon { width: 24px; height: 24px; background-color: var(--accent-gold); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: var(--text-sm); flex-shrink: 0; margin-top: 2px;}.about-feature-content h4 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-1); color: var(--primary-dark);}.about-feature-content p { color: var(--primary-light); margin: 0;}.about-image { background-color: var(--accent-blue); border-radius: var(--radius-2xl); aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: var(--text-4xl); position: relative; overflow: hidden;}.about-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);}/* Contact Section */.contact { background-color: var(--primary-dark); color: var(--white);}.contact .section-title { color: var(--white);}.contact .section-description { color: rgba(255, 255, 255, 0.8);}.contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); margin-top: var(--space-12);}.contact-info { display: grid; gap: var(--space-6);}.contact-item { display: flex; align-items: center; gap: var(--space-4);}.contact-icon { width: 48px; height: 48px; background-color: var(--accent-gold); border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: var(--text-lg);}.contact-details h4 { color: var(--white); margin-bottom: var(--space-1);}.contact-details p { color: rgba(255, 255, 255, 0.8); margin: 0;}.contact-form { background-color: rgba(255, 255, 255, 0.05); border-radius: var(--radius-2xl); padding: var(--space-8); border: 1px solid rgba(255, 255, 255, 0.1);}.form-group { margin-bottom: var(--space-6);}.form-label { display: block; margin-bottom: var(--space-2); color: var(--white); font-weight: 500;}.form-input { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-lg); background-color: rgba(255, 255, 255, 0.05); color: var(--white); font-family: var(--font-primary); transition: all var(--transition-fast);}.form-input::placeholder { color: rgba(255, 255, 255, 0.5);}.form-input:focus { outline: none; border-color: var(--accent-gold); background-color: rgba(255, 255, 255, 0.1);}.form-textarea { resize: vertical; min-height: 120px;}/* Footer */.footer { background-color: var(--gray-900); color: var(--white); padding: var(--space-16) 0 var(--space-8);}.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-8); margin-bottom: var(--space-12);}.footer-section h3 { color: var(--white); margin-bottom: var(--space-4);}.footer-section p,.footer-section li { color: rgba(255, 255, 255, 0.7); line-height: var(--leading-relaxed);}.footer-section ul { list-style: none;}.footer-section ul li { margin-bottom: var(--space-2);}.footer-section a { color: rgba(255, 255, 255, 0.7); transition: color var(--transition-fast);}.footer-section a:hover { color: var(--accent-gold);}.footer-bottom { text-align: center; padding-top: var(--space-8); border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.5);}/* Mobile Menu Styles *//* ========== TABLET & MOBILE RESPONSIVE ========== */@media (max-width: 1024px) { .nav-menu { display: none; position: fixed; top: 0; right: -100%; width: 300px; max-width: 85vw; height: 100vh; height: 100dvh; background: linear-gradient(180deg, var(--primary-dark) 0%, #0a2d4d 100%); box-shadow: -5px 0 25px rgba(0,0,0,0.3); transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1); padding: 90px 24px 30px; z-index: 999; flex-direction: column; gap: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-menu.active { display: flex; right: 0; } .nav-menu li { opacity: 0; transform: translateX(20px); transition: all 0.3s ease; border-bottom: 1px solid rgba(255,255,255,0.1); } .nav-menu.active li { opacity: 1; transform: translateX(0); } .nav-menu.active li:nth-child(1) { transition-delay: 0.05s; } .nav-menu.active li:nth-child(2) { transition-delay: 0.1s; } .nav-menu.active li:nth-child(3) { transition-delay: 0.15s; } .nav-menu.active li:nth-child(4) { transition-delay: 0.2s; } .nav-menu.active li:nth-child(5) { transition-delay: 0.25s; } .nav-menu.active li:nth-child(6) { transition-delay: 0.3s; } .nav-menu .nav-link { color: white !important; font-size: 1.1rem; font-weight: 500; padding: 16px 0; display: block; width: 100%; } .nav-menu .nav-link:hover, .nav-menu .nav-link:active { color: var(--accent-gold-light) !important; } .mobile-menu-btn { display: flex !important; } .nav-actions { gap: var(--space-2); } .nav-actions .btn { padding: 8px 12px; font-size: 0.85rem; } .logo img { width: 110px; height: auto; max-height: 45px; } /* Mobile Menu Overlay */ .mobile-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); z-index: 998; opacity: 0; visibility: hidden; transition: all 0.3s ease; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .mobile-menu-overlay.active { opacity: 1; visibility: visible; }}/* ========== DESKTOP STYLES ========== */@media (min-width: 1025px) { .language-switcher { margin-right: var(--space-6); }}/* ========== TABLET STYLES ========== */@media (max-width: 900px) { .nav-actions .btn-gold { display: none; /* Hide WhatsApp button on smaller tablets */ } .nav-actions .btn-outline { padding: 8px 14px; font-size: 0.8rem; } .language-switcher { margin-right: var(--space-3); } .lang-link { padding: 5px 10px; font-size: 0.8rem; min-width: 40px; }}/* Mobile Menu Contact Buttons - Hidden by default on desktop */.mobile-menu-contact { display: none !important;}/* Mobile Menu Language Switcher - Hidden by default on desktop */.mobile-menu-language { display: none !important;}@media (max-width: 1024px) { .mobile-menu-language { display: flex !important; /* Override desktop hidden */ gap: 10px; margin-top: 20px; padding: 20px 20px 0 20px; border-top: 1px solid rgba(255,255,255,0.2) !important; border-bottom: none !important; justify-content: center; } .mobile-menu-language .lang-link { flex: 1; justify-content: center; padding: 14px 20px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; font-size: 0.95rem; font-weight: 500; } .mobile-menu-language .lang-link.active { background: var(--accent-gold); border-color: var(--accent-gold); color: white; font-weight: 600; } .mobile-menu-contact { display: flex !important; /* Override desktop hidden */ flex-direction: column; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2) !important; border-bottom: none !important; } .btn-mobile-call, .btn-mobile-whatsapp { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 20px; border-radius: var(--radius-lg); font-weight: 600; font-size: 1rem; text-decoration: none; transition: all var(--transition-fast); } .btn-mobile-call { background: rgba(255,255,255,0.15); color: white; border: 1px solid rgba(255,255,255,0.3); } .btn-mobile-call:hover { background: rgba(255,255,255,0.25); } .btn-mobile-whatsapp { background: #25D366; color: white; border: none; } .btn-mobile-whatsapp:hover { background: #20bd5a; }}/* ========== MOBILE STYLES ========== */@media (max-width: 768px) { :root { --container-padding: var(--space-4); } .header { padding: 0; } .nav { padding: 12px 0; min-height: 60px; } .logo img { width: 90px; height: auto; max-height: 38px; } /* Hide language switcher on mobile nav, show in menu */ .language-switcher { display: none; } .nav-actions { gap: 8px; margin-right: var(--space-2); } .hero h1 { font-size: var(--text-4xl); } .hero-subtitle { font-size: var(--text-lg); } .hero-cta { flex-direction: column; align-items: stretch; } .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } .carpet-grid { grid-template-columns: 1fr; } .services-grid { grid-template-columns: 1fr; } .about-content { grid-template-columns: 1fr; text-align: center; } .contact-content { grid-template-columns: 1fr; } .section-title { font-size: var(--text-3xl); }}/* ========== SMALL MOBILE STYLES ========== */@media (max-width: 480px) { :root { --container-padding: 10px; } .nav { padding: 10px 0; } .logo img { width: 70px !important; height: auto; max-height: 28px !important; } .nav-actions { gap: 6px; } /* Show both buttons on very small screens - very compact */ .nav-actions { display: flex; flex-direction: row; gap: 4px; margin-right: 6px; } /* Hemen Ara button - full text */ .nav-actions .btn-outline { padding: 7px 10px; font-size: 0.7rem; min-width: auto; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3); color: white; display: flex; align-items: center; gap: 4px; white-space: nowrap; } /* WhatsApp button - full text */ .nav-actions .btn-gold { padding: 7px 10px; font-size: 0.7rem; min-width: auto; background: #25D366; border: none; display: flex; align-items: center; gap: 4px; white-space: nowrap; } /* Hamburger also visible */ .mobile-menu-btn { width: 36px !important; height: 36px !important; padding: 6px !important; } .mobile-menu-btn { width: 40px; height: 40px; padding: 8px; font-size: var(--text-xs); } .hero { padding: calc(var(--space-16) + 60px) 0 var(--space-16); } .section { padding: var(--space-16) 0; } .carpet-card { margin: 0 auto; max-width: 350px; } .hero-stats { grid-template-columns: 1fr; } /* Hero için ekstra küçük ekran ayarları */ .hero-content-centered { padding-top: 150px; } .hero-content-centered .hero-badge { font-size: 0.7rem; padding: 7px 12px; max-width: 92%; line-height: 1.4; white-space: normal; } .hero-content-centered h1 { font-size: 1.35rem; } .hero-content-centered .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .hero-content-centered .hero-stat-number { font-size: 1.25rem; } .hero-content-centered .hero-stat-label { font-size: 0.65rem; }}/* iPhone 12, 13, 14 ve benzeri orta boy telefonlar (390px civarı) */@media (max-width: 430px) and (min-width: 375px) { .hero-content-centered { padding-top: 155px !important; } .hero-content-centered .hero-badge { font-size: 0.68rem !important; padding: 6px 12px !important; max-width: 90%; margin: 0 auto 1rem; }}/* Utilities */.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;}.focus\:outline-none:focus { outline: 0;}.focus\:ring:focus { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);} /* Blog Styles */.blog-hero { background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium)); color: white; padding: 80px 0; text-align: center;}.blog-hero h1 { font-size: 3rem; margin-bottom: 1rem; color: white !important; -webkit-text-fill-color: white !important; background: none !important; -webkit-background-clip: unset !important;}.blog-hero .hero-description { font-size: 1.2rem; max-width: 600px; margin: 0 auto; color: white !important; opacity: 1 !important;}.blog-intro { text-align: center; margin-bottom: 4rem;}.blog-intro h2 { color: var(--primary-dark); margin-bottom: 1.5rem;}.intro-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem;}.intro-item { text-align: center; padding: 2rem; background: white; border-radius: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: transform 0.3s ease;}.intro-item:hover { transform: translateY(-5px);}.intro-item h3 { color: var(--primary-dark); margin-bottom: 1rem; font-size: 1.1rem;}.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; margin-top: 3rem;}.blog-post { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%;}.blog-post:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0,0,0,0.15);}.post-image { width: 100%; height: 200px; overflow: hidden;}.post-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;}.blog-post:hover .post-image img { transform: scale(1.05);}.post-content { padding: 1.5rem; display: flex; flex-direction: column;}.post-content .btn { margin-top: 1rem; margin-bottom: 0; align-self: flex-start;}/* Blog page button override */.post-content .btn-outline { background-color: transparent; color: var(--primary-dark); border: 2px solid var(--primary-dark); padding: 0.5rem 1.25rem; font-weight: 600; transition: all 0.3s ease;}.post-content .btn-outline:hover { background-color: var(--primary-dark); color: white; border-color: var(--primary-dark);}.post-content h3 { margin-bottom: 1rem;}.post-content h3 a { color: var(--primary-dark); text-decoration: none; transition: color 0.3s ease;}.post-content h3 a:hover { color: var(--accent-gold);}.post-content p { color: #666; margin-bottom: 1rem; line-height: 1.6;}.post-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: #888; margin-bottom: 1rem;}.category { background: var(--accent-gold); color: white; padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem;}.read-time { font-style: italic;}/* Blog Post Detail Styles */.blog-detail-hero { background: linear-gradient(135deg, var(--primary-dark), var(--accent-gold)); color: white; padding: 60px 0; text-align: center; padding-top: 120px !important;}.blog-detail-hero h1 { font-size: 2.5rem; margin-bottom: 1rem; color: white !important; -webkit-text-fill-color: white !important; background: none !important; -webkit-background-clip: unset !important; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}.blog-detail-meta { display: flex; justify-content: center; gap: 2rem; margin-top: 1rem; color: white !important; opacity: 1 !important;}.blog-detail-meta span { color: white !important; opacity: 1 !important;}.blog-detail-meta span { color: white !important;}.blog-detail-meta span { display: flex; align-items: center; gap: 0.5rem;}.blog-content { max-width: 800px; margin: 0 auto; padding: 3rem 0;}.blog-content h2 { color: var(--primary-dark); margin: 2rem 0 1rem 0; font-size: 1.8rem;}.blog-content h3 { color: var(--primary-dark); margin: 1.5rem 0 1rem 0; font-size: 1.4rem;}.blog-content p { line-height: 1.8; margin-bottom: 1.5rem; color: #333;}.blog-content ul, .blog-content ol { margin: 1.5rem 0; padding-left: 2rem;}.blog-content li { margin-bottom: 0.5rem; line-height: 1.6;}.highlight-box { background: #f8f9fa; border-left: 4px solid var(--primary-dark); padding: 1.5rem; margin: 2rem 0; border-radius: 5px;}.highlight-box h4 { color: var(--primary-dark); margin-bottom: 1rem;}.care-steps { background: white; border-radius: 10px; padding: 2rem; margin: 2rem 0; box-shadow: 0 3px 10px rgba(0,0,0,0.1);}.care-steps h4 { color: var(--primary-dark); margin-bottom: 1rem;}.care-steps ol { margin: 0; padding-left: 1.5rem;}.care-steps li { margin-bottom: 1rem; color: #555;}.warning-box { background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 5px; padding: 1rem; margin: 1.5rem 0;}.warning-box strong { color: #856404;}.related-posts { background: #f8f9fa; padding: 3rem 0; margin-top: 3rem;}.related-posts h3 { text-align: center; margin-bottom: 2rem; color: var(--primary-dark);}.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; max-width: 800px; margin: 0 auto;}.related-post { background: white; border-radius: 10px; overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,0.1); transition: transform 0.3s ease;}.related-post:hover { transform: translateY(-3px);}.related-post img { width: 100%; height: 120px; object-fit: cover;}.related-post-content { padding: 1rem;}.related-post h4 { margin-bottom: 0.5rem; font-size: 1rem;}.related-post h4 a { color: var(--primary-dark); text-decoration: none;}.related-post h4 a:hover { color: var(--accent-gold);}.related-post p { font-size: 0.9rem; color: #666; margin: 0;}/* Responsive Blog Styles */@media (max-width: 768px) { .blog-hero h1 { font-size: 2rem; } .blog-hero .hero-description { font-size: 1rem; } .blog-grid { grid-template-columns: 1fr; gap: 1.5rem; } .intro-grid { grid-template-columns: 1fr; gap: 1.5rem; } .blog-detail-hero h1 { font-size: 2rem; } .blog-detail-meta { flex-direction: column; gap: 1rem; } .blog-content { padding: 2rem 1rem; } .related-grid { grid-template-columns: 1fr; }}/* ===== FULL-SCREEN HERO SECTION ===== */.hero-fullscreen { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden;}.hero-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;}.hero-bg-image { width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; user-select: none; -webkit-user-drag: none;}/* Image Protection Layer */.image-protection { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: transparent;}.hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: linear-gradient( to bottom, rgba(13, 59, 102, 0.75) 0%, rgba(13, 59, 102, 0.85) 50%, rgba(13, 59, 102, 0.9) 100% );}.hero-fullscreen .container { position: relative; z-index: 1;}.hero-content-centered { text-align: center; max-width: 900px; margin: 0 auto; padding: 2rem; padding-top: 100px;}.hero-content-centered h1 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; margin-bottom: 1rem; line-height: 1.2;}.hero-content-centered .hero-subtitle { font-size: clamp(0.875rem, 1.5vw, 1rem); max-width: 600px; margin: 0 auto 1.5rem; line-height: 1.6;}.hero-content-centered .hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;}.hero-content-centered .hero-stats { display: flex; justify-content: center; gap: 3rem; flex-wrap: wrap;}.hero-content-centered .hero-stat { text-align: center;}/* Scroll Indicator */.scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; animation: bounce 2s infinite;}.scroll-indicator span { display: block; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 2px; font-size: 0.75rem;}.scroll-arrow { width: 24px; height: 24px; margin: 0 auto; border-right: 2px solid rgba(255, 255, 255, 0.8); border-bottom: 2px solid rgba(255, 255, 255, 0.8); transform: rotate(45deg);}@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); }}/* Full-Screen Hero Responsive */@media (max-width: 768px) { .hero-fullscreen { min-height: 100svh; } .hero-content-centered { padding: 1.5rem; padding-top: 160px; } .hero-content-centered .hero-badge { margin-bottom: 1rem; font-size: 0.75rem; padding: 8px 16px; max-width: 95%; line-height: 1.4; white-space: normal; } .hero-content-centered h1 { font-size: 1.5rem; } .hero-content-centered .hero-subtitle { font-size: 0.85rem; } .hero-content-centered .hero-stats { gap: 1.5rem; } .hero-content-centered .hero-stat-number { font-size: 1.5rem; } .scroll-indicator { display: none; }}/* ===== BLOG & RUG-TYPES DETAIL PAGE HERO FIX ===== *//* Fix for hero section text visibility on detail pages *//* Hero section text colors for blog and rug-types pages */section[style*="linear-gradient"] h1 { color: #ffffff !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}section[style*="linear-gradient"] p { color: rgba(255, 255, 255, 0.95) !important; opacity: 1 !important;}section[style*="linear-gradient"] span[style*="background: var(--accent-gold)"] { color: var(--primary-dark) !important; font-weight: 600;}/* Carpet type hero specific */.carpet-type-hero h1,.carpet-type-hero p { color: #ffffff !important;}.carpet-type-hero p { opacity: 1 !important; color: rgba(255, 255, 255, 0.95) !important;}/* ===== HALI TÜRLERİ SAYFA HERO FIX ===== *//* Fix for carpet type pages hero section text */.hero.section-lg h1,.about-text h1 { color: var(--primary-dark) !important; -webkit-text-fill-color: var(--primary-dark) !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important;}.hero.section-lg .hero-subtitle,.about-text .hero-subtitle { color: var(--primary-light) !important; opacity: 1 !important;}/* ===== MOBILE FLOATING LANGUAGE SWITCHER ===== */.mobile-lang-float { display: none; position: fixed; top: 85px; right: 15px; z-index: 9999; background: rgba(13, 59, 102, 0.95); padding: 4px; gap: 0; border-radius: var(--radius-md); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px);}.mobile-lang-float a { display: flex; align-items: center; justify-content: center; padding: 8px 14px; border-radius: 6px; text-decoration: none; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px; transition: all var(--transition-fast); color: rgba(255, 255, 255, 0.7);}.mobile-lang-float a:hover { background: rgba(255, 255, 255, 0.15); color: white;}.mobile-lang-float a.active { background: rgba(255, 255, 255, 0.25); color: white;}.mobile-lang-float a:not(.active) { opacity: 0.7;}.mobile-lang-float a:not(.active):hover { opacity: 1;}@media (max-width: 1024px) { .mobile-lang-float { display: flex; }}@media (max-width: 480px) { .mobile-lang-float { top: 100px; right: 30px; } .mobile-lang-float a { padding: 7px 12px; font-size: 1rem; }}/* Hamburger menü açıkken floating language butonunu gizle */.mobile-menu-overlay.active ~ .mobile-lang-float,body:has(.nav-menu.active) .mobile-lang-float { display: none !important;}/* ===== CONTACT MODAL ===== */.modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(13, 59, 102, 0.8); backdrop-filter: blur(5px); animation: fadeIn 0.3s ease-in-out;}.modal.show { display: flex; align-items: center; justify-content: center;}.modal-content { background-color: white; margin: auto; padding: 0; border-radius: 16px; width: 90%; max-width: 600px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: slideDown 0.3s ease-out;}.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 32px; background: linear-gradient(135deg, var(--primary-dark), var(--primary-medium)); border-radius: 16px 16px 0 0; color: white;}.modal-header h2 { margin: 0; font-size: 1.5rem; font-weight: 600; color: white;}.modal-close { color: white; font-size: 32px; font-weight: 300; line-height: 1; cursor: pointer; transition: transform 0.2s ease;}.modal-close:hover { transform: rotate(90deg) scale(1.1);}.modal-body { padding: 32px; background: white;}.modal-body .form-label { color: var(--gray-900); font-weight: 600; margin-bottom: 8px; display: block;}.modal-body .form-input,.modal-body .form-textarea { color: var(--gray-900); background: white; border: 2px solid var(--gray-300);}.modal-body .form-input::placeholder,.modal-body .form-textarea::placeholder { color: var(--gray-400);}/* Modal Animations */@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}@keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; }}/* Mobile Responsive */@media (max-width: 768px) { .modal-content { width: 95%; margin: 20px auto; } .modal-header { padding: 20px 24px; } .modal-header h2 { font-size: 1.25rem; } .modal-body { padding: 24px; }}/* ===== FORM BUTTONS (WhatsApp & Email) ===== */.form-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px;}.form-buttons button { padding: 12px 20px !important; font-size: 0.95rem !important; font-weight: 600;}.btn-whatsapp { background: #25D366 !important; color: white !important; border: none; transition: all 0.3s ease;}.btn-whatsapp:hover { background: #128C7E !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);}.btn-email { background: #EA4335 !important; color: white !important; border: none; transition: all 0.3s ease;}.btn-email:hover { background: #C5221F !important; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(234, 67, 53, 0.3);}/* Mobile: Stack buttons vertically */@media (max-width: 768px) { .form-buttons { grid-template-columns: 1fr; gap: 10px; } .form-buttons button { padding: 10px 16px !important; font-size: 0.9rem !important; }} .about-image.about-certificate{background-color:var(--white);border:1px solid var(--gray-200);flex-direction:column;padding:var(--space-4);font-size:inherit}.about-image.about-certificate img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}.about-image.about-certificate::before{display:none}.about-certificate-caption{font-size:var(--text-sm);color:var(--primary-dark);font-weight:600;margin-top:var(--space-3);text-align:center;position:relative;z-index:1}