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

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; color: #333; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

.container { max-width: 1152px; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

/* HEADER */
.site-header { position: sticky; top: 0; z-index: 50; width: 100%; background: #fff; border-bottom: 1px solid #f3f3f3; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.header-inner { max-width: 1280px; margin: 0 auto; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 768px) { .header-inner { padding: 1rem 1.5rem; } }
.header-logo img { height: 3.5rem; width: auto; }
@media (min-width: 768px) { .header-logo img { height: 4.5rem; } }
.desktop-nav { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 1024px) { .desktop-nav { display: flex; } }
.nav-link { font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: #4b5563; padding: 0.5rem 0.75rem; border-radius: 0.375rem; transition: color 0.2s, background 0.2s; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.nav-link:hover { background: #f9fafb; }
.nav-link.active { color: #0099cc; }
.nav-dropdown { position: relative; }
.nav-dropdown-content { display: none; position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); min-width: 12rem; z-index: 60; padding: 0.25rem 0; }
.nav-dropdown:hover .nav-dropdown-content { display: block; }
.nav-dropdown-item { display: block; padding: 0.5rem 1rem; font-size: 13px; color: #4b5563; transition: background 0.2s; }
.nav-dropdown-item:hover { background: #f3f4f6; }
.lang-selector { margin-left: 0.5rem; padding-left: 0.5rem; border-left: 1px solid #e5e7eb; display: flex; align-items: center; gap: 0.375rem; }
.lang-selector svg { width: 1.25rem; height: 1.25rem; color: #4b5563; }
.lang-selector span { font-size: 13px; font-weight: 600; color: #4b5563; }
.mobile-menu-btn { display: block; padding: 0.5rem; }
@media (min-width: 1024px) { .mobile-menu-btn { display: none; } }

/* MOBILE MENU */
.mobile-menu { display: none; position: fixed; inset: 0; z-index: 100; background: linear-gradient(180deg, #0099cc 0%, #0088bb 100%); flex-direction: column; }
.mobile-menu.open { display: flex; }
.mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; }
.mobile-menu-logo img { height: 4rem; width: auto; }
.mobile-close-btn { padding: 0.5rem; color: #fff; }
.mobile-close-btn svg { width: 2rem; height: 2rem; }
.mobile-nav { flex: 1; padding: 2rem 1.5rem; overflow-y: auto; }
.mobile-nav-item { display: block; padding: 0.75rem 0; font-size: 1.125rem; font-weight: 500; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.2); opacity: 0.9; }
.mobile-nav-item.active { opacity: 1; }
.mobile-lang { margin-top: 2rem; display: flex; align-items: center; gap: 0.5rem; color: #fff; }
.mobile-lang svg { width: 1.5rem; height: 1.5rem; }
.mobile-co2 { position: absolute; bottom: 0; right: 0; width: 12rem; height: 16rem; opacity: 0.3; pointer-events: none; }
.mobile-co2 img { width: 100%; height: 100%; object-fit: contain; }

/* HERO SLIDER */
.hero-slider { position: relative; width: 100%; overflow: hidden; }
.hero-slides-wrapper { position: relative; }
.hero-slide { display: none; }
.hero-slide.active { display: block; }
.hero-slide img { width: 100%; height: auto; display: block; }
.hero-dots { position: absolute; bottom: 1.5rem; left: 3rem; display: flex; align-items: center; gap: 1rem; z-index: 10; }
.hero-dot { border-radius: 50%; transition: all 0.3s; cursor: pointer; border: none; background: rgba(255,255,255,0.6); width: 0.625rem; height: 0.625rem; }
.hero-dot.active { width: 1rem; height: 1rem; background: #fff; box-shadow: 0 0 0 2px transparent, 0 0 0 4px rgba(255,255,255,0.5); }

/* WHY SECTION */
.why-section { padding: 2.5rem 0; background: #fff; }
@media (min-width: 768px) { .why-section { padding: 5rem 0; } }
.why-label { color: #2A94F4; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem; text-align: center; }
@media (min-width: 768px) { .why-label { font-size: 0.875rem; margin-bottom: 0.75rem; } }
.why-title { font-size: 1.125rem; font-weight: 600; color: #111827; font-style: italic; text-align: center; margin-bottom: 2rem; }
@media (min-width: 768px) { .why-title { font-size: 1.875rem; margin-bottom: 3.5rem; } }
.why-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 768px) { .why-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.why-card { position: relative; padding-top: 2.5rem; }
@media (min-width: 768px) { .why-card { padding-top: 3rem; } }
.why-card-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3.5rem 1.5rem 2rem; border-radius: 0.5rem; height: 100%; border: 0.25px solid #2A94F4; box-shadow: 0 4px 24px rgba(42,148,244,0.10), 0 1px 8px rgba(42,148,244,0.06); }
@media (min-width: 768px) { .why-card-inner { padding: 4rem 1.5rem 2.5rem; } }
.why-card-text { font-size: 0.875rem; font-weight: 600; color: #1f2937; line-height: 1.6; }
@media (min-width: 768px) { .why-card-text { font-size: 1rem; } }
.why-card-text span { font-weight: 400; color: #4b5563; }
.why-icon { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 72px; height: 72px; background: #2A94F4; border-radius: 20px; display: flex; align-items: center; justify-content: center; z-index: 10; }
@media (min-width: 768px) { .why-icon { width: 82px; height: 82px; } }
.why-icon img { width: 2.25rem; height: 2.25rem; object-fit: contain; }
@media (min-width: 768px) { .why-icon img { width: 2.5rem; height: 2.5rem; } }

/* PRODUCTS SECTION (Home) */
.products-section { padding: 2.5rem 0; background: #f8fafb; }
@media (min-width: 768px) { .products-section { padding: 5rem 0; } }
.section-title { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #0099cc; text-align: center; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .section-title { font-size: 1.5rem; margin-bottom: 2.5rem; } }
.products-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
.product-card { background: #fff; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: transform 0.3s; }
@media (min-width: 768px) { .product-card { border-radius: 1rem; } }
.product-card:hover { transform: translateY(-4px); }
.product-card-img { height: 10rem; overflow: hidden; background: #f3f4f6; }
@media (min-width: 768px) { .product-card-img { height: 14rem; } }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.product-card:hover .product-card-img img { transform: scale(1.05); }
.product-card-body { padding: 1rem; }
@media (min-width: 768px) { .product-card-body { padding: 1.5rem; } }
.product-card-title { font-size: 1rem; font-weight: 600; color: #111827; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .product-card-title { font-size: 1.125rem; margin-bottom: 0.75rem; } }
.product-card-desc { font-size: 0.75rem; color: #4b5563; margin-bottom: 0.75rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .product-card-desc { font-size: 0.875rem; margin-bottom: 1.25rem; } }

/* BLOG SECTION (Home) */
.blog-section { padding: 2.5rem 0; background: #f5f7fa; }
@media (min-width: 768px) { .blog-section { padding: 5rem 0; } }
.blog-scroll { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 1rem; margin: 0 -1rem; padding-left: 1rem; padding-right: 1rem; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
@media (min-width: 768px) { .blog-scroll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; overflow: visible; margin: 0; padding: 0; } }
.blog-scroll::-webkit-scrollbar { display: none; }
.blog-card { flex-shrink: 0; width: 75%; background: #fff; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: transform 0.3s; scroll-snap-align: start; }
@media (min-width: 768px) { .blog-card { width: auto; border-radius: 1rem; } }
.blog-card:hover { transform: translateY(-4px); }
.blog-card-img { height: 8rem; overflow: hidden; background: #f3f4f6; }
@media (min-width: 768px) { .blog-card-img { height: 11rem; } }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { padding: 0.75rem; }
@media (min-width: 768px) { .blog-card-body { padding: 1.25rem; } }
.blog-card-title { font-size: 0.875rem; font-weight: 600; color: #111827; margin-bottom: 0.25rem; }
@media (min-width: 768px) { .blog-card-title { font-size: 1rem; margin-bottom: 0.5rem; } }
.blog-card-excerpt { font-size: 0.75rem; color: #4b5563; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .blog-card-excerpt { font-size: 0.875rem; } }
.read-more { display: inline-flex; align-items: center; color: #2A94F4; font-size: 0.75rem; font-weight: 500; margin-top: 0.5rem; gap: 0.125rem; }
@media (min-width: 768px) { .read-more { font-size: 0.875rem; margin-top: 0.75rem; } }
.read-more svg { width: 0.875rem; height: 0.875rem; }
@media (min-width: 768px) { .read-more svg { width: 1rem; height: 1rem; } }

/* CONTACT SECTION */
.contact-section { padding: 2.5rem 0; position: relative; overflow: hidden; background: #fff; }
@media (min-width: 768px) { .contact-section { padding: 5rem 0; } }
.contact-bg-map { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.1; pointer-events: none; }
@media (min-width: 768px) { .contact-bg-map { opacity: 0.15; } }
.contact-bg-map img { width: 100%; max-width: 64rem; height: auto; }
.contact-inner { max-width: 48rem; margin: 0 auto; padding: 0 1rem; position: relative; z-index: 10; }
@media (min-width: 768px) { .contact-inner { padding: 0 1.5rem; } }
.contact-title { font-size: 1.25rem; font-weight: 700; color: #1f2937; text-align: center; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .contact-title { font-size: 1.5rem; margin-bottom: 2rem; } }
.contact-form-container { background: #333B45; border-radius: 1rem; padding: 1.5rem; }
@media (min-width: 768px) { .contact-form-container { padding: 2rem; } }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .form-row { grid-template-columns: repeat(3, 1fr); } }
.form-input { width: 100%; background: #484F58; border: 1px solid #484F58; color: #fff; border-radius: 9999px; padding: 0.75rem 1.25rem; font-size: 0.875rem; outline: none; transition: border-color 0.2s; height: 2.75rem; }
.form-input::placeholder { color: rgba(255,255,255,0.6); }
.form-input:focus { border-color: #2A94F4; }
.form-textarea { width: 100%; background: #484F58; border: 1px solid #484F58; color: #fff; border-radius: 1rem; padding: 0.75rem 1.25rem; font-size: 0.875rem; outline: none; resize: none; min-height: 120px; margin-bottom: 1rem; transition: border-color 0.2s; }
.form-textarea::placeholder { color: rgba(255,255,255,0.6); }
.form-textarea:focus { border-color: #2A94F4; }
.form-bottom { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .form-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
.consent-label { display: flex; align-items: flex-start; gap: 0.75rem; color: rgba(255,255,255,0.8); font-size: 0.875rem; }
.consent-checkbox { width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; flex-shrink: 0; accent-color: #0099cc; cursor: pointer; }
.consent-link { color: #0099cc; text-decoration: underline; }

/* BUTTONS */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; background: #2A94F4; color: #fff; border-radius: 9999px; padding: 0.75rem 2rem; font-size: 0.75rem; font-weight: 500; border: none; cursor: pointer; transition: background 0.2s; }
@media (min-width: 768px) { .btn-primary { font-size: 0.875rem; } }
.btn-primary:hover { background: #1e7fd4; }
.btn-center { text-align: center; margin-top: 1.5rem; }
@media (min-width: 768px) { .btn-center { margin-top: 2.5rem; } }

/* FOOTER */
.site-footer { background: #2A94F4; color: #fff; }
.footer-inner { max-width: 1152px; margin: 0 auto; padding: 2.5rem 1rem; }
@media (min-width: 768px) { .footer-inner { padding: 3.5rem 1.5rem; } }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-desc { font-size: 0.875rem; color: rgba(255,255,255,0.8); line-height: 1.6; margin-bottom: 1.25rem; }
.social-icons { display: flex; gap: 0.75rem; }
.social-icon { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.social-icon:hover { background: rgba(255,255,255,0.25); }
.social-icon svg { width: 1rem; height: 1rem; fill: #fff; }
.footer-heading { font-weight: 600; font-size: 1rem; margin-bottom: 1rem; }
.footer-links li { margin-bottom: 0.625rem; }
.footer-links a { font-size: 0.875rem; color: rgba(255,255,255,0.8); transition: color 0.2s; }
.footer-links a:hover { color: #fff; }
.footer-contact-text { font-size: 0.875rem; color: rgba(255,255,255,0.8); line-height: 1.6; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.2); background: #2A94F4; }
.footer-bottom-inner { max-width: 1152px; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
@media (min-width: 768px) { .footer-bottom-inner { flex-direction: row; justify-content: space-between; padding: 1rem 1.5rem; } }
.footer-bottom-logo img { height: 2rem; width: auto; }
@media (min-width: 768px) { .footer-bottom-logo img { height: 2.5rem; } }
.footer-copyright { font-size: 0.875rem; color: rgba(255,255,255,0.7); }
.footer-legal { display: flex; align-items: center; gap: 1rem; font-size: 0.875rem; color: rgba(255,255,255,0.7); }
.footer-legal a:hover { color: #fff; }

/* COOKIE CONSENT */
.cookie-consent { position: fixed; bottom: 0; right: 0; z-index: 9999; width: 100%; }
@media (min-width: 768px) { .cookie-consent { bottom: 1.5rem; right: 1.5rem; width: auto; max-width: 24rem; } }
.cookie-inner { background: #333B45; padding: 1rem; position: relative; border-radius: 1rem 1rem 0 0; }
@media (min-width: 768px) { .cookie-inner { border-radius: 1rem; padding: 1.25rem; } }
.cookie-close { position: absolute; top: 0.75rem; right: 0.75rem; color: rgba(255,255,255,0.7); background: none; border: none; cursor: pointer; padding: 0; }
.cookie-close svg { width: 1rem; height: 1rem; }
.cookie-text { color: #fff; font-size: 0.75rem; line-height: 1.5; margin-bottom: 0.75rem; padding-right: 1.25rem; }
.cookie-link { color: #2A94F4; font-size: 0.75rem; text-decoration: underline; display: block; margin-bottom: 0.75rem; }
.cookie-link strong { font-weight: 700; }
.cookie-buttons { display: flex; align-items: center; gap: 0.75rem; }
.cookie-hide { color: #fff; font-weight: 600; font-size: 0.75rem; padding: 0.375rem 0.75rem; background: none; border: none; cursor: pointer; }
.cookie-accept { flex: 1; background: #2A94F4; color: #fff; font-weight: 600; font-size: 0.75rem; border-radius: 0.5rem; padding: 0.625rem 1rem; transition: background 0.2s; border: none; cursor: pointer; }
.cookie-accept:hover { background: #1e7fd4; }

/* HERO BANNER (inner pages) */
.hero-banner { position: relative; height: 12rem; overflow: hidden; }
@media (min-width: 768px) { .hero-banner { height: 16rem; } }
.hero-banner img.hero-bg { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.hero-banner picture img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.breadcrumb { position: absolute; top: 1rem; left: 0; right: 0; z-index: 20; }
@media (min-width: 768px) { .breadcrumb { top: 1.5rem; } }
.breadcrumb-inner { max-width: 1152px; margin: 0 auto; padding: 0 1rem; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; font-size: 0.75rem; color: rgba(255,255,255,0.8); }
@media (min-width: 768px) { .breadcrumb-inner { padding: 0 1.5rem; } }
.breadcrumb-sep { display: inline-block; width: 0.75rem; height: 0.75rem; color: rgba(255,255,255,0.6); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .current { color: #fff; font-weight: 500; }
.hero-banner-title { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.hero-banner-title h1 { font-size: 1.5rem; font-weight: 600; color: #fff; }
@media (min-width: 768px) { .hero-banner-title h1 { font-size: 2.25rem; } }
.hero-co2 { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); z-index: 10; display: none; }
@media (min-width: 768px) { .hero-co2 { display: block; } }
.hero-co2 img { width: 5rem; height: auto; }
@media (min-width: 768px) { .hero-co2 img { width: 8rem; } }

/* ABOUT PAGE */
.about-info { padding: 2.5rem 0; background: #fff; }
@media (min-width: 768px) { .about-info { padding: 4rem 0; } }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .about-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }
.about-year { color: #0099cc; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.5rem; }
.about-heading { font-size: 1.25rem; font-weight: 600; color: #111827; margin-bottom: 1rem; }
@media (min-width: 768px) { .about-heading { font-size: 1.875rem; margin-bottom: 1.5rem; } }
.about-text { font-size: 0.875rem; color: #374151; line-height: 1.7; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .about-text { font-size: 1rem; margin-bottom: 1rem; } }
.text-accent { color: #0099cc; font-weight: 500; }
.about-lab-img { border-radius: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); overflow: hidden; }
@media (min-width: 768px) { .about-lab-img { border-radius: 1.5rem; } }
.about-lab-img img { width: 100%; height: auto; }

.logos-section { padding: 2rem 0; background: #fff; }
@media (min-width: 768px) { .logos-section { padding: 3rem 0; } }
.logos-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.5rem; max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .logos-row { gap: 3rem; } }
.logo-item { width: 7rem; }
@media (min-width: 768px) { .logo-item { width: 9rem; } }
@media (min-width: 1024px) { .logo-item { width: 10rem; } }
.logo-item.large { width: 9rem; }
@media (min-width: 768px) { .logo-item.large { width: 11rem; } }
@media (min-width: 1024px) { .logo-item.large { width: 13rem; } }
.logo-item img { width: 100%; height: auto; object-fit: contain; }

.vizyon-section { position: relative; overflow: hidden; }
.vizyon-section .vizyon-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vizyon-content { position: relative; z-index: 10; max-width: 1152px; margin: 0 auto; padding: 4rem 1rem; display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .vizyon-content { padding: 6rem 1.5rem; grid-template-columns: repeat(2, 1fr); gap: 4rem; } }
.vizyon-block { text-align: center; }
.vizyon-block h3 { font-size: 1.5rem; font-weight: 700; color: #2A94F4; margin-bottom: 0.75rem; }
@media (min-width: 768px) { .vizyon-block h3 { font-size: 2rem; margin-bottom: 1rem; } }
@media (min-width: 1024px) { .vizyon-block h3 { font-size: 2.25rem; } }
.vizyon-block p { font-size: 0.875rem; color: #4b5563; line-height: 1.6; }
@media (min-width: 768px) { .vizyon-block p { font-size: 1rem; } }

.values-section { padding: 2.5rem 0; background: #fff; }
@media (min-width: 768px) { .values-section { padding: 4rem 0; } }
.values-title { font-size: 1.25rem; font-weight: 700; text-align: center; color: #111827; margin-bottom: 3rem; }
@media (min-width: 768px) { .values-title { font-size: 1.5rem; margin-bottom: 4rem; } }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } }
.value-card { position: relative; padding-top: 2.5rem; }
@media (min-width: 768px) { .value-card { padding-top: 3rem; } }
.value-card-inner { background: #f5f7fa; border-radius: 1rem; padding: 1rem; padding-top: 3rem; text-align: center; height: 100%; }
@media (min-width: 768px) { .value-card-inner { border-radius: 1.5rem; padding: 1.5rem; padding-top: 3.5rem; } }
.value-card-title { font-size: 0.75rem; font-weight: 600; color: #111827; font-style: italic; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .value-card-title { font-size: 0.875rem; margin-bottom: 0.75rem; } }
.value-card-desc { font-size: 0.625rem; color: #6b7280; line-height: 1.5; }
@media (min-width: 768px) { .value-card-desc { font-size: 0.75rem; } }
.value-icon { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 4rem; height: 4rem; border-radius: 50%; background: #2A94F4; display: flex; align-items: center; justify-content: center; z-index: 10; }
@media (min-width: 768px) { .value-icon { width: 5rem; height: 5rem; } }
.value-icon img { width: 2rem; height: 2rem; object-fit: contain; filter: brightness(0) invert(1); }
@media (min-width: 768px) { .value-icon img { width: 2.5rem; height: 2.5rem; } }

/* PRODUCTS PAGE */
.product-subtitle-bar { padding: 1rem 0; background: #fff; border-bottom: 1px solid #f3f4f6; }
.product-subtitle-bar p { color: #6b7280; font-size: 0.75rem; }
@media (min-width: 768px) { .product-subtitle-bar p { font-size: 0.875rem; } }
.products-listing { padding: 1.5rem 0; background: #fff; }
@media (min-width: 768px) { .products-listing { padding: 2.5rem 0; } }
.products-intro { text-align: center; color: #4b5563; font-size: 0.875rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .products-intro { font-size: 1rem; } }
.product-row { padding: 2.5rem 0; }
@media (min-width: 768px) { .product-row { padding: 4rem 0; } }
.product-row.alt { background: #f9fafb; }
.product-row-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .product-row-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }
.product-row-img img { max-width: 28rem; margin: 0 auto; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.product-row-label { color: #0099cc; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.product-row-title { font-size: 1.5rem; font-weight: 600; color: #111827; margin-bottom: 1rem; }
@media (min-width: 768px) { .product-row-title { font-size: 1.875rem; } }
.product-row-desc { color: #4b5563; font-size: 0.875rem; line-height: 1.6; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .product-row-desc { font-size: 1rem; } }

/* PRODUCT DETAIL */
.product-detail { padding: 2.5rem 0; background: #fff; }
@media (min-width: 768px) { .product-detail { padding: 4rem 0; } }
.product-detail-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 1024px) { .product-detail-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }
.product-detail-img img { max-width: 28rem; margin: 0 auto; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.product-detail-label { color: #0099cc; font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.product-detail-name { font-size: 1.5rem; font-weight: 600; color: #111827; margin-bottom: 1rem; }
@media (min-width: 768px) { .product-detail-name { font-size: 1.875rem; } }
.product-detail-desc { color: #4b5563; font-size: 0.875rem; line-height: 1.7; }
@media (min-width: 768px) { .product-detail-desc { font-size: 1rem; } }

.features-section { padding: 2.5rem 0; background: #f9fafb; }
@media (min-width: 768px) { .features-section { padding: 4rem 0; } }
.features-title { font-size: 1.25rem; font-weight: 600; color: #0099cc; text-align: center; margin-bottom: 2.5rem; }
@media (min-width: 768px) { .features-title { font-size: 1.5rem; } }
.features-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .features-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.feature-card { background: #fff; border-radius: 0.75rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #f3f4f6; text-align: center; }
.feature-card-icon { width: 4rem; height: 4rem; margin: 0 auto 1rem; }
.feature-card-icon img { width: 100%; height: 100%; object-fit: contain; }
.feature-card h4 { font-weight: 600; color: #111827; margin-bottom: 0.5rem; }
.feature-card p { color: #4b5563; font-size: 0.875rem; line-height: 1.6; }

.product-bottom { padding: 2.5rem 0; background: #fff; }
@media (min-width: 768px) { .product-bottom { padding: 4rem 0; } }
.product-bottom-inner { max-width: 56rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 768px) { .product-bottom-inner { padding: 0 1.5rem; } }
.product-bottom-img { margin-bottom: 2rem; border-radius: 1rem; overflow: hidden; }
@media (min-width: 768px) { .product-bottom-img { border-radius: 1.5rem; margin-bottom: 2.5rem; } }
.product-bottom-img img { width: 100%; height: 12rem; object-fit: cover; }
@media (min-width: 768px) { .product-bottom-img img { height: 18rem; } }
.bottom-item { padding: 1.5rem 0; border-top: 1px solid #e5e7eb; }
@media (min-width: 768px) { .bottom-item { padding: 2rem 0; } }
.bottom-item h4 { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .bottom-item h4 { font-size: 1.125rem; } }
.bottom-item p { color: #4b5563; font-size: 0.875rem; line-height: 1.6; }
@media (min-width: 768px) { .bottom-item p { font-size: 1rem; } }
.product-closing { padding: 1.5rem 0; border-top: 1px solid #e5e7eb; }
@media (min-width: 768px) { .product-closing { padding: 2rem 0; } }
.product-closing p { color: #4b5563; font-size: 0.875rem; line-height: 1.6; }
@media (min-width: 768px) { .product-closing p { font-size: 1rem; } }

/* BLOG PAGE */
.blog-listing { padding: 2.5rem 0; background: #fff; }
@media (min-width: 768px) { .blog-listing { padding: 4rem 0; } }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.blog-list-card { background: #fff; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.blog-list-card-img { aspect-ratio: 4/3; overflow: hidden; }
.blog-list-card-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-list-card-body { padding: 1.25rem; }
.blog-list-card-title { font-size: 1rem; font-weight: 600; color: #111827; margin-bottom: 0.25rem; }
@media (min-width: 768px) { .blog-list-card-title { font-size: 1.125rem; } }
.blog-list-card-excerpt { color: #6b7280; font-size: 0.875rem; margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blog-read-link { color: #0099cc; font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.125rem; }
.blog-read-link svg { width: 1rem; height: 1rem; }

/* BLOG DETAIL */
.blog-detail-meta { padding: 1rem 0; background: #fff; border-bottom: 1px solid #f3f4f6; }
.blog-detail-meta p { color: #6b7280; font-size: 0.75rem; }
@media (min-width: 768px) { .blog-detail-meta p { font-size: 0.875rem; } }
.blog-detail-content { padding: 1.5rem 0; background: #fff; }
@media (min-width: 768px) { .blog-detail-content { padding: 2.5rem 0; } }
.blog-detail-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .blog-detail-grid { grid-template-columns: repeat(2, 1fr); gap: 3rem; } }
.blog-sidebar { background: #0099cc; border-radius: 1rem; padding: 1.5rem; color: #fff; }
@media (min-width: 768px) { .blog-sidebar { padding: 2rem; } }
.blog-sidebar-header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.blog-sidebar-icon { width: 3rem; height: 3rem; background: rgba(255,255,255,0.2); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blog-sidebar-icon img { width: 1.5rem; height: 1.5rem; }
.blog-sidebar h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.25rem; }
.blog-sidebar .subtitle { color: rgba(255,255,255,0.8); font-size: 0.875rem; }
.blog-sidebar ol li { color: rgba(255,255,255,0.9); font-size: 0.875rem; margin-bottom: 0.75rem; }
.blog-main-content h3 { font-size: 1.125rem; font-weight: 600; color: #111827; margin-bottom: 0.75rem; }
.blog-main-content p { color: #4b5563; font-size: 0.875rem; line-height: 1.7; margin-bottom: 0.75rem; }

.related-posts { padding: 2.5rem 0; background: #f9fafb; }
@media (min-width: 768px) { .related-posts { padding: 4rem 0; } }
.related-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .related-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.related-card { display: flex; gap: 1rem; }
@media (min-width: 768px) { .related-card { display: block; } }
.related-card-img { width: 6rem; height: 6rem; border-radius: 0.75rem; overflow: hidden; flex-shrink: 0; }
@media (min-width: 768px) { .related-card-img { width: 100%; height: auto; aspect-ratio: 4/3; } }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; }
.related-card-body { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) { .related-card-body { padding-top: 1rem; } }
.related-card-title { font-size: 1rem; font-weight: 600; color: #111827; margin-bottom: 0.25rem; }
@media (min-width: 768px) { .related-card-title { font-size: 1.125rem; } }
.related-card-excerpt { color: #6b7280; font-size: 0.875rem; margin-bottom: 0.5rem; }
.related-read-link { color: #0099cc; font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; gap: 0.125rem; }
.related-read-link svg { width: 1rem; height: 1rem; }

.faq-section { padding: 2.5rem 0; background: #fff; }
@media (min-width: 768px) { .faq-section { padding: 4rem 0; } }
.faq-item { border-bottom: 1px solid #e5e7eb; }
.faq-question { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 0; cursor: pointer; width: 100%; text-align: left; background: none; border: none; font-family: inherit; }
.faq-icon { width: 2rem; height: 2rem; background: #e8f7fc; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.faq-icon svg { width: 1rem; height: 1rem; color: #0099cc; }
.faq-question span { color: #111827; font-weight: 500; font-size: 0.875rem; }
@media (min-width: 768px) { .faq-question span { font-size: 1rem; } }
.faq-answer { padding: 0 0 1rem 2.75rem; color: #4b5563; font-size: 0.875rem; line-height: 1.6; display: none; }
.faq-item.open .faq-answer { display: block; }

/* NEWS PAGE */
.news-content { padding: 3rem 0; }
@media (min-width: 768px) { .news-content { padding: 4rem 0; } }
.news-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
.news-main-card { border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.08); background: #fff; position: relative; }
.news-main-card-img { position: relative; }
.news-main-card img { width: 100%; height: 16rem; object-fit: cover; }
@media (min-width: 768px) { .news-main-card img { height: 20rem; } }
.date-badge { position: absolute; bottom: 1rem; left: 1rem; display: flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.9); border-radius: 9999px; padding: 0.375rem 0.75rem; font-size: 0.875rem; }
.date-badge img { width: 1.25rem; height: 1.25rem; }
.news-main-body { padding: 1.5rem; }
.news-main-body h3 { font-size: 1.25rem; font-weight: 700; color: #1f2937; margin-bottom: 0.5rem; }
.news-main-body p { color: #4b5563; font-size: 0.875rem; line-height: 1.6; }
.news-side { display: flex; flex-direction: column; gap: 1rem; }
.news-side-card { display: flex; gap: 1rem; padding: 1rem; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.06); background: #fff; transition: transform 0.2s; }
.news-side-card:hover { transform: translateY(-2px); }
.news-side-card img { width: 5rem; height: 5rem; object-fit: cover; border-radius: 0.75rem; flex-shrink: 0; }
@media (min-width: 768px) { .news-side-card img { width: 6rem; height: 6rem; } }
.news-side-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.news-side-info .tag { color: #0099cc; font-size: 0.75rem; font-weight: 500; margin-bottom: 0.25rem; }
.news-side-info h4 { color: #1f2937; font-weight: 500; font-size: 0.875rem; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 768px) { .news-side-info h4 { font-size: 1rem; } }
.news-side-date { display: flex; align-items: center; gap: 0.5rem; color: #6b7280; font-size: 0.75rem; }
.news-side-date svg { width: 1rem; height: 1rem; }
.news-read-more { display: inline-flex; align-items: center; color: #0099cc; font-size: 0.875rem; gap: 0.25rem; margin-top: 0.5rem; }

.popular-news { padding: 3rem 0; }
@media (min-width: 768px) { .popular-news { padding: 4rem 0; } }
.popular-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .popular-grid { grid-template-columns: repeat(3, 1fr); } }
.popular-card { border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.08); background: #fff; }
.popular-card img { width: 100%; height: 12rem; object-fit: cover; }
.popular-card-body { padding: 1rem; display: flex; align-items: center; gap: 0.75rem; }
.popular-card-body .megafon { width: 2rem; height: 2rem; flex-shrink: 0; }
.popular-card-body p { color: #374151; font-size: 0.875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* CONTACT PAGE */
.contact-cards { padding: 3rem 0; }
.contact-cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 56rem; margin: 0 auto; }
@media (min-width: 768px) { .contact-cards-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-info-card { padding: 1.5rem; text-align: center; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.08); background: #fff; }
.contact-info-card .icon-wrap { display: flex; justify-content: center; margin-bottom: 1rem; }
.contact-info-card .icon-wrap img { width: 4rem; height: 4rem; object-fit: contain; }
.contact-info-card p, .contact-info-card a { color: #374151; font-size: 0.875rem; line-height: 1.6; }
.contact-form-page { padding: 2rem 0; }
.contact-form-title { font-size: 1.25rem; font-weight: 700; text-align: center; color: #1f2937; margin-bottom: 2rem; }
@media (min-width: 768px) { .contact-form-title { font-size: 1.5rem; } }
.contact-form-dark { max-width: 56rem; margin: 0 auto; background: #333B45; border-radius: 1rem; padding: 1.5rem; }
@media (min-width: 768px) { .contact-form-dark { padding: 2rem; } }
.map-section { width: 100%; }
.map-section iframe { width: 100%; height: 24rem; border: 0; }
@media (min-width: 768px) { .map-section iframe { height: 31.25rem; } }

/* KVKK */
.kvkk-content { padding: 3rem 1rem; max-width: 56rem; margin: 0 auto; }
.kvkk-content h2 { font-size: 1.5rem; font-weight: 700; color: #111827; margin-bottom: 1.5rem; }
.kvkk-content h3 { font-size: 1.125rem; font-weight: 600; color: #111827; margin-bottom: 1rem; margin-top: 1.5rem; }
.kvkk-content p { color: #4b5563; font-size: 0.875rem; line-height: 1.7; margin-bottom: 1rem; }

/* CITY ECO IMAGE */
.city-eco { position: relative; }
.city-eco img { width: 100%; height: auto; }

/* SUCCESS / ERROR MESSAGES */
.alert { padding: 1rem 1.25rem; border-radius: 0.5rem; margin-bottom: 1rem; font-size: 0.875rem; }
.alert-success { background: #dcfce7; color: #166534; }
.alert-error { background: #fee2e2; color: #991b1b; }

/* ADMIN */
.admin-login { max-width: 400px; margin: 5rem auto; background: #fff; border-radius: 1rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); padding: 2rem; }
.admin-login h1 { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 1.5rem; color: #111827; }
.admin-login .form-group { margin-bottom: 1rem; }
.admin-login label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.25rem; }
.admin-login input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; font-size: 0.875rem; outline: none; }
.admin-login input:focus { border-color: #2A94F4; }
.admin-login .btn-login { width: 100%; background: #2A94F4; color: #fff; padding: 0.75rem; border: none; border-radius: 0.5rem; font-weight: 600; cursor: pointer; margin-top: 0.5rem; }
.admin-login .error { background: #fef2f2; color: #dc2626; padding: 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; margin-bottom: 1rem; }
.admin-sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 240px; background: #1f2937; color: #fff; padding: 1.5rem 0; z-index: 40; }
.admin-sidebar .logo { padding: 0 1.5rem; margin-bottom: 2rem; }
.admin-sidebar .logo img { height: 2.5rem; }
.admin-sidebar nav a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.5rem; color: rgba(255,255,255,0.7); font-size: 0.875rem; transition: background 0.2s, color 0.2s; }
.admin-sidebar nav a:hover, .admin-sidebar nav a.active { background: rgba(255,255,255,0.1); color: #fff; }
.admin-main { margin-left: 240px; min-height: 100vh; background: #f9fafb; }
.admin-header { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.admin-header h2 { font-size: 1.25rem; font-weight: 600; color: #111827; }
.admin-header a { color: #dc2626; font-size: 0.875rem; }
.admin-content { padding: 2rem; }
.admin-card { background: #fff; border-radius: 0.75rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); padding: 1.5rem; margin-bottom: 1.5rem; }
.admin-card h3 { font-size: 1.125rem; font-weight: 600; color: #111827; margin-bottom: 1rem; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { background: #fff; border-radius: 0.75rem; padding: 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,0.05); text-align: center; }
.stat-card .number { font-size: 2rem; font-weight: 700; color: #2A94F4; }
.stat-card .label { font-size: 0.875rem; color: #6b7280; margin-top: 0.25rem; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; padding: 0.75rem 1rem; font-size: 0.75rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid #e5e7eb; }
.admin-table td { padding: 0.75rem 1rem; font-size: 0.875rem; color: #374151; border-bottom: 1px solid #f3f4f6; }
.admin-table tr:hover td { background: #f9fafb; }
.badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.badge-green { background: #dcfce7; color: #16a34a; }
.badge-blue { background: #dbeafe; color: #2563eb; }
.text-center { text-align: center; }

/* Chevron SVG */
.chevron-right { display: inline-block; width: 0.875rem; height: 0.875rem; vertical-align: middle; }

/* Dropdown arrow */
.dropdown-arrow { display: inline-block; width: 0.75rem; height: 0.75rem; transition: transform 0.2s; }