:root {
     /* Sıcak, doğal ve güven veren renkler */
     --primary: #2C3E50;
     --primary-dark: #1a252f;
     --primary-light: #34495e;
     --accent: #16A085;
     --accent-light: #1abc9c;
     --accent-warm: #e67e22;
     --cream: #FAF8F5;
     --cream-dark: #F5F0E8;
     --warm-white: #FFFDF9;
     --text-dark: #2C3E50;
     --text-medium: #5D6D7E;
     --text-light: #85929E;
     --border: #E8E2D9;
     --border-light: #F0EBE3;
     --shadow-soft: 0 4px 20px rgba(44, 62, 80, 0.08);
     --shadow-medium: 0 8px 40px rgba(44, 62, 80, 0.12);
     --shadow-warm: 0 10px 50px rgba(230, 126, 34, 0.1);
     --radius-sm: 8px;
     --radius-md: 16px;
     --radius-lg: 24px;
     --radius-xl: 40px;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: 'Source Sans 3', sans-serif;
     color: var(--text-dark);
     background: white;
     line-height: 1.7;
     font-weight: 400;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: 'Playfair Display', serif;
     font-weight: 600;
     line-height: 1.3;
     color: var(--primary);
 }

 .container {
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 32px;
 }

 /* HEADER - Minimal ve Zarif */
 .header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     background: white;
     backdrop-filter: blur(20px);
     z-index: 999;
     transition: all 0.4s ease;
     border-bottom: 1px solid transparent;
 }

 .header.scrolled {
     border-bottom-color: var(--border);
     box-shadow: var(--shadow-soft);
 }

 .header-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 80px;
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
 }

 .logo-text {
     font-family: 'Playfair Display', serif;
     font-size: 1.6rem;
     font-weight: 600;
     color: var(--primary);
     letter-spacing: -0.5px;
 }

 .logo-text span {
     color: var(--accent);
 }

 .nav {
     display: flex;
     align-items: center;
     gap: 40px;
 }

 .nav-links {
     display: flex;
     list-style: none;
     gap: 32px;
 }

 .nav-links a {
     text-decoration: none;
     color: var(--text-medium);
     font-size: 0.95rem;
     font-weight: 500;
     transition: color 0.3s;
     letter-spacing: 0.3px;
 }

 .nav-links a:hover {
     color: var(--primary);
 }

 .nav-menu {
     display: none;
     /* Hidden by default on desktop */
     list-style: none;
     gap: 36px;
 }

 .nav-menu a {
     text-decoration: none;
     color: var(--text-medium);
     font-size: 0.95rem;
     font-weight: 500;
     transition: color 0.3s;
     letter-spacing: 0.3px;
 }

 .nav-menu a:hover {
     color: var(--primary);
 }

 .btn {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 14px 28px;
     border-radius: var(--radius-xl);
     font-family: 'Source Sans 3', sans-serif;
     font-weight: 600;
     font-size: 0.95rem;
     text-decoration: none;
     transition: all 0.3s ease;
     cursor: pointer;
     border: none;
     letter-spacing: 0.3px;
 }

 .btn-primary {
     background: var(--primary);
     color: white;
 }

 .btn-primary:hover {
     background: var(--primary-dark);
     transform: translateY(-2px);
     box-shadow: var(--shadow-medium);
 }

 .btn-accent {
     background: var(--accent);
     color: white;
 }

 .btn-accent:hover {
     background: #138d75;
     transform: translateY(-2px);
 }

 .btn-outline {
     background: transparent;
     color: var(--primary);
     border: 2px solid var(--primary);
 }

 .btn-outline:hover {
     background: var(--primary);
     color: white;
 }

 .lang-switch {
     display: flex;
     gap: 4px;
     background: var(--cream);
     padding: 4px;
     border-radius: var(--radius-xl);
 }

 .lang-switch a {
     padding: 8px 14px;
     border-radius: var(--radius-xl);
     font-size: 0.85rem;
     font-weight: 600;
     text-decoration: none;
     transition: all 0.3s;
 }

 .lang-switch a.active {
     background: var(--primary);
     color: white;
 }

 .lang-switch a:not(.active) {
     color: var(--text-medium);
 }

 .lang-switch a:not(.active):hover {
     background: var(--border);
 }

 .mobile-menu-btn {
     display: none;
     background: none;
     border: none;
     cursor: pointer;
     padding: 8px;
     position: relative;
     z-index: 1002;
 }

 .mobile-menu-btn svg {
     width: 24px;
     height: 24px;
     color: var(--primary);
 }

 /* Mobil Dil Seçici Dropdown */
 .mobile-lang-dropdown {
     display: none;
     position: relative;
 }

 .mobile-lang-btn {
     display: flex;
     align-items: center;
     gap: 6px;
     background: var(--cream);
     border: none;
     padding: 8px 12px;
     border-radius: var(--radius-xl);
     cursor: pointer;
     transition: all 0.3s ease;
     font-weight: 600;
     font-size: 0.85rem;
     color: var(--primary);
 }

 .mobile-lang-btn:hover {
     background: var(--border);
 }

 .mobile-lang-btn .dropdown-arrow {
     transition: transform 0.3s ease;
 }

 .mobile-lang-btn.active .dropdown-arrow {
     transform: rotate(180deg);
 }

 .mobile-lang-menu {
     position: absolute;
     top: calc(100% + 8px);
     right: 0;
     background: white;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-medium);
     min-width: 150px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(-10px);
     transition: all 0.3s ease;
     z-index: 1000;
     overflow: hidden;
 }

 .mobile-lang-menu.active {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .mobile-lang-menu a {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 16px;
     text-decoration: none;
     color: var(--text-dark);
     font-size: 0.9rem;
     font-weight: 500;
     transition: all 0.3s ease;
     border-bottom: 1px solid var(--border-light);
 }

 .mobile-lang-menu a:last-child {
     border-bottom: none;
 }

 .mobile-lang-menu a:hover {
     background: var(--cream);
 }

 .mobile-lang-menu a.active {
     background: rgba(22, 160, 133, 0.1);
     color: var(--accent);
     font-weight: 600;
 }

 .mobile-lang-menu a span {
     font-size: 1.2rem;
 }

 /* HERO - Büyük Görsel Odaklı */
 .hero {
     padding: 120px 0 60px;
     background: white;
     position: relative;
     min-height: auto;
 }

 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 0;
 }

 /* Mac ve yüksek gamma ekranlar için daha koyu desen */
 @media (prefers-color-scheme: no-preference),
 (prefers-color-scheme: light) {
     @supports (-webkit-appearance: none) {
         .hero::before {}
     }
 }

 .hero-inner {
     display: grid;
     grid-template-columns: 1fr 1.2fr;
     gap: 80px;
     align-items: center;
     position: relative;
     z-index: 1;
 }

 .hero-content {
     max-width: 520px;
 }

 .hero-tag {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: white;
     color: var(--accent);
     padding: 10px 20px;
     border-radius: var(--radius-xl);
     font-size: 0.9rem;
     font-weight: 600;
     margin-bottom: 28px;
     box-shadow: var(--shadow-soft);
 }

 .hero-tag svg {
     width: 18px;
     height: 18px;
 }

 .hero h1 {
     font-size: 3.0rem;
     color: var(--primary);
     margin-bottom: 24px;
     letter-spacing: -1px;
 }

 .hero h1 span {
     color: var(--accent);
     display: block;
     font-size: 2.5rem;
     font-family: 'Source Sans 3', sans-serif;
     font-weight: 500;
     letter-spacing: 0px;
     margin-top: 8px;
 }

 .hero-subtitle {
     font-size: 1.2rem;
     color: var(--text-medium);
     margin-bottom: 36px;
     line-height: 1.8;
     font-weight: 400;
 }

 .hero-buttons {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
 }

 /* Hero Görsel Alanı */
 .hero-visual {
     position: relative;
 }

 .hero-image-main {
     width: 100%;
     aspect-ratio: 4/3;
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-medium);
     position: relative;
 }

 /* Slider Styles */
 .hero-slider {
     width: 100%;
     height: 100%;
     position: relative;
 }

 .hero-slide {
     display: none;
     width: 100%;
     height: 100%;
     animation: fadeSlide 0.8s ease-in-out;
 }

 .hero-slide.active {
     display: block;
 }

 .hero-slide img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }

 /* Slider Navigation */
 .slider-nav {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 8px;
     z-index: 10;
 }

 .slider-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.5);
     cursor: pointer;
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }

 .slider-dot.active {
     background: white;
     width: 30px;
     border-radius: 5px;
 }

 .slider-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(255, 255, 255, 0.9);
     border: none;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     z-index: 10;
     opacity: 0;
 }

 .hero-image-main:hover .slider-arrow {
     opacity: 1;
 }

 .slider-arrow:hover {
     background: white;
     transform: translateY(-50%) scale(1.1);
 }

 .slider-arrow.prev {
     left: 15px;
 }

 .slider-arrow.next {
     right: 15px;
 }

 .slider-arrow svg {
     width: 20px;
     height: 20px;
     color: var(--primary);
 }

 @keyframes fadeSlide {
     from {
         opacity: 0;
         transform: scale(0.95);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 .hero-image-main .image-placeholder {
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, var(--cream-dark) 0%, var(--border) 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 16px;
     color: var(--text-light);
 }

 .hero-image-main .image-placeholder svg {
     width: 64px;
     height: 64px;
     opacity: 0.5;
 }

 .hero-image-main .image-placeholder span {
     font-size: 0.9rem;
     font-weight: 500;
 }

 /* Floating Mini Görseller */
 .hero-floating {
     position: absolute;
     border-radius: var(--radius-md);
     overflow: hidden;
     box-shadow: var(--shadow-medium);
     background: white;
     padding: 8px;
 }

 .hero-floating img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: var(--radius-sm);
 }

 .hero-floating .image-placeholder {
     width: 100%;
     height: 100%;
     background: var(--cream);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-sm);
 }

 .hero-floating-1 {
     width: 140px;
     height: 140px;
     top: 60px;
     left: -40px;
     animation: float 4s ease-in-out infinite;
 }

 .hero-floating-2 {
     width: 120px;
     height: 120px;
     bottom: 80px;
     right: -30px;
     animation: float 4s ease-in-out infinite 1s;
 }

 /* Trust Badge */
 .hero-trust {
     position: absolute;
     bottom: -20px;
     left: 40px;
     background: white;
     padding: 20px 28px;
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-medium);
     display: flex;
     align-items: center;
     gap: 16px;
 }

 .hero-trust-icon {
     width: 48px;
     height: 48px;
     background: rgba(22, 160, 133, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .hero-trust-icon svg {
     width: 24px;
     height: 24px;
     color: var(--accent);
 }

 .hero-trust-text strong {
     display: block;
     color: var(--primary);
     font-size: 1rem;
     font-weight: 700;
 }

 .hero-trust-text span {
     color: var(--text-light);
     font-size: 0.85rem;
 }

 /* Hero Stats Section */
 .hero-stats {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 40px;
     margin-top: 60px;
     padding: 50px 0 40px;
     border-top: 1px solid var(--border);
 }

 .hero-stat-item {
     text-align: center;
     position: relative;
 }

 .hero-stat-item::after {
     content: '';
     position: absolute;
     right: -20px;
     top: 50%;
     transform: translateY(-50%);
     width: 1px;
     height: 60px;
     background: var(--border);
 }

 .hero-stat-item:last-child::after {
     display: none;
 }

 .hero-stat-number {
     font-size: 3rem;
     font-weight: 700;
     color: var(--accent);
     font-family: 'Playfair Display', serif;
     margin-bottom: 8px;
     line-height: 1;
 }

 .hero-stat-label {
     font-size: 0.95rem;
     color: var(--text-medium);
     font-weight: 500;
 }

 .hero-stat-icon {
     width: 48px;
     height: 48px;
     background: rgba(22, 160, 133, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 16px;
 }

 .hero-stat-icon svg {
     width: 24px;
     height: 24px;
     color: var(--accent);
 }

 /* ÖZELLİKLER BANDI */
 .features-band {
     padding: 50px 0;
     background: var(--primary);
     color: white;
 }

 .features-band-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 40px;
 }

 .feature-band-item {
     text-align: center;
 }

 .feature-band-icon {
     width: 56px;
     height: 56px;
     background: rgba(255, 255, 255, 0.15);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 16px;
 }

 .feature-band-icon svg {
     width: 28px;
     height: 28px;
 }

 .feature-band-item h4 {
     color: white;
     font-size: 1.1rem;
     margin-bottom: 8px;
     font-family: 'Source Sans 3', sans-serif;
     font-weight: 600;
 }

 .feature-band-item p {
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.9rem;
     line-height: 1.5;
 }

 /* SECTION GENEL */
 .section {
     padding: 80px 0;
     background: #FFFFFF;
     width: 100%;
 }

 .section-cream {
     background: #F7F5F0;
     width: 100%;
     padding: 80px 0;
 }

 /* Mac ve yüksek gamma ekranlar için daha açık ton */
 @media (prefers-color-scheme: no-preference),
 (prefers-color-scheme: light) {
     @supports (-webkit-appearance: none) {
         .section-cream {
             background: #ede8dd;
         }
     }
 }

 .section-header {
     text-align: center;
     max-width: 640px;
     margin: 0 auto 60px;
 }

 .section-tag {
     display: inline-block;
     color: var(--accent);
     font-size: 0.85rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 16px;
 }

 .section-header h2 {
     font-size: 2.8rem;
     margin-bottom: 20px;
     letter-spacing: -0.5px;
 }

 .section-header p {
     color: var(--text-medium);
     font-size: 1.15rem;
     line-height: 1.7;
 }

 /* KULLANIM ALANLARI - Fotoğraf Galerisi */
 .usage-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
 }

 .usage-card {
     position: relative;
     border-radius: var(--radius-lg);
     overflow: hidden;
     aspect-ratio: 1;
     cursor: pointer;
     group: usage;
 }

 .usage-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center 90%;
     transition: transform 0.6s ease;
 }

 .usage-card .image-placeholder {
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, var(--cream-dark) 0%, var(--border) 100%);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 12px;
     color: var(--text-light);
     transition: transform 0.6s ease;
 }

 .usage-card .image-placeholder svg {
     width: 48px;
     height: 48px;
     opacity: 0.4;
 }

 .usage-card:hover img,
 .usage-card:hover .image-placeholder {
     transform: scale(1.05);
 }

 .usage-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(44, 62, 80, 0.9) 0%, rgba(44, 62, 80, 0.3) 50%, transparent 100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 28px;
     transition: all 0.4s ease;
 }

 .usage-card:hover .usage-overlay {
     background: linear-gradient(to top, rgba(44, 62, 80, 0.95) 0%, rgba(44, 62, 80, 0.5) 60%, rgba(44, 62, 80, 0.2) 100%);
 }

 .usage-icon {
     width: 48px;
     height: 48px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
     backdrop-filter: blur(10px);
 }

 .usage-icon svg {
     width: 24px;
     height: 24px;
     color: white;
 }

 .usage-overlay h4 {
     color: white;
     font-size: 1.3rem;
     margin-bottom: 8px;
     font-family: 'Playfair Display', serif;
 }

 .usage-overlay p {
     color: rgba(255, 255, 255, 0.8);
     font-size: 0.9rem;
     line-height: 1.5;
     opacity: 0;
     transform: translateY(10px);
     transition: all 0.4s ease;
 }

 .usage-card:hover .usage-overlay p {
     opacity: 1;
     transform: translateY(0);
 }

 /* Büyük featured kart */
 .usage-card.featured {
     grid-column: span 2;
     aspect-ratio: 2/1;
 }

 /* ÜRÜN SHOWCASE */
 .showcase {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
 }

 .showcase-reverse {
     direction: rtl;
 }

 .showcase-reverse>* {
     direction: ltr;
 }

 .showcase-images {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }

 .showcase-img {
     border-radius: var(--radius-md);
     overflow: hidden;
     box-shadow: var(--shadow-soft);
 }

 .showcase-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .showcase-img .image-placeholder {
     width: 100%;
     aspect-ratio: 1;
     background: var(--cream);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 8px;
     color: var(--text-light);
 }

 .showcase-img .image-placeholder svg {
     width: 32px;
     height: 32px;
     opacity: 0.4;
 }

 .showcase-img:first-child {
     grid-row: span 2;
     height: 100%;
 }

 .showcase-img:first-child .image-placeholder {
     height: 100%;
 }

 .showcase-content h3 {
     font-size: 2.2rem;
     margin-bottom: 20px;
 }

 .showcase-content p {
     color: var(--text-medium);
     font-size: 1.1rem;
     margin-bottom: 28px;
     line-height: 1.8;
 }

 .showcase-features {
     list-style: none;
     margin-bottom: 32px;
 }

 .showcase-features li {
     display: flex;
     align-items: flex-start;
     gap: 14px;
     padding: 12px 0;
     color: var(--text-medium);
     font-size: 1rem;
 }

 .showcase-features li svg {
     width: 22px;
     height: 22px;
     color: var(--accent);
     flex-shrink: 0;
     margin-top: 2px;
 }

 /* TEKNİK ÖZELLİKLER */
 .specs-wrapper {
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 60px;
     align-items: start;
 }

 .specs-main {
     background: white;
     border-radius: var(--radius-lg);
     overflow: hidden;
     box-shadow: var(--shadow-soft);
     border: 1px solid var(--border-light);
 }

 .specs-header {
     background: var(--primary);
     padding: 28px 36px;
     color: white;
 }

 .specs-header h3 {
     color: white;
     font-size: 1.4rem;
     margin-bottom: 4px;
 }

 .specs-header p {
     opacity: 0.8;
     font-size: 0.95rem;
 }

 .specs-body {
     padding: 36px;
 }

 .specs-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 18px 0;
     border-bottom: 1px solid var(--border-light);
 }

 .specs-row:last-child {
     border-bottom: none;
 }

 .specs-label {
     color: var(--text-light);
     font-size: 0.95rem;
 }

 .specs-value {
     color: var(--primary);
     font-weight: 600;
     font-size: 0.95rem;
 }

 .sizes-section {
     margin-top: 32px;
 }

 .sizes-section h4 {
     font-size: 1.1rem;
     margin-bottom: 20px;
     font-family: 'Source Sans 3', sans-serif;
     font-weight: 600;
 }

 .sizes-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
 }

 .size-card {
     background: var(--cream);
     padding: 20px;
     border-radius: var(--radius-md);
     text-align: center;
     border: 2px solid transparent;
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .size-card:hover {
     border-color: var(--accent);
     background: rgba(22, 160, 133, 0.05);
 }

 .size-card strong {
     display: block;
     color: var(--primary);
     font-size: 1.05rem;
     margin-bottom: 4px;
 }

 .size-card span {
     color: var(--text-light);
     font-size: 0.8rem;
 }

 /* Sertifikalar ve Performans */
 .specs-sidebar {
     display: flex;
     flex-direction: column;
     gap: 24px;
 }

 .cert-card {
     background: white;
     border-radius: var(--radius-lg);
     padding: 32px;
     box-shadow: var(--shadow-soft);
     border: 1px solid var(--border-light);
 }

 .cert-card h4 {
     font-size: 1.1rem;
     margin-bottom: 20px;
     display: flex;
     align-items: center;
     gap: 12px;
     font-family: 'Source Sans 3', sans-serif;
     font-weight: 600;
 }

 .cert-card h4 svg {
     width: 24px;
     height: 24px;
     color: var(--accent);
 }

 .perf-list {
     list-style: none;
 }

 .perf-list li {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 0;
     color: var(--text-medium);
     font-size: 0.95rem;
     border-bottom: 1px solid var(--border-light);
 }

 .perf-list li:last-child {
     border-bottom: none;
 }

 .perf-list li svg {
     width: 20px;
     height: 20px;
     color: var(--accent);
     flex-shrink: 0;
 }

 .download-card {
     background: linear-gradient(135deg, var(--accent) 0%, #138d75 100%);
     color: white;
 }

 .download-card h4 {
     color: white;
 }

 .download-card h4 svg {
     color: white;
 }

 .download-card p {
     color: rgba(255, 255, 255, 0.8);
     font-size: 0.95rem;
     margin-bottom: 20px;
     line-height: 1.6;
 }

 .download-card .btn {
     width: 100%;
     justify-content: center;
     background: white;
     color: var(--accent);
 }

 .download-card .btn:hover {
     background: var(--cream);
     transform: translateY(-2px);
 }

 /* SSS */
 .faq-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     align-items: start;
 }

 .faq-item {
     background: white;
     border-radius: var(--radius-md);
     border: 1px solid var(--border-light);
     overflow: hidden;
     transition: all 0.3s ease;
     height: fit-content;
 }

 .faq-item:hover {
     box-shadow: var(--shadow-soft);
 }

 .faq-question {
     width: 100%;
     padding: 24px 28px;
     background: none;
     border: none;
     text-align: left;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     font-family: 'Source Sans 3', sans-serif;
     font-weight: 600;
     font-size: 1rem;
     color: var(--primary);
     transition: all 0.3s ease;
 }

 .faq-question:hover {
     background: var(--cream);
 }

 .faq-question svg {
     width: 20px;
     height: 20px;
     color: var(--accent);
     transition: transform 0.4s ease;
     flex-shrink: 0;
 }

 .faq-item.active .faq-question svg {
     transform: rotate(180deg);
 }

 .faq-answer {
     max-height: 0;
     opacity: 0;
     overflow: hidden;
     padding: 0 28px;
     transition: all 0.4s ease;
 }

 .faq-item.active .faq-answer {
     max-height: 400px;
     opacity: 1;
     padding: 8px 28px 32px;
 }

 .faq-answer p {
     color: var(--text-medium);
     font-size: 0.95rem;
     line-height: 1.8;
     margin-top: 4px;
 }

 /* İLETİŞİM */
 .contact-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 24px;
 }

 .contact-card {
     background: #FAFAFA;
     padding: 36px 28px;
     border-radius: var(--radius-lg);
     text-align: center;
     box-shadow: 0 4px 20px rgba(44, 62, 80, 0.12);
     border: 2px solid #dadada;
     transition: all 0.3s ease;
 }

 .contact-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-medium);
 }

 .contact-icon {
     width: 64px;
     height: 64px;
     background: var(--cream);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     transition: all 0.3s ease;
 }

 .contact-card:hover .contact-icon {
     background: var(--accent);
 }

 .contact-icon svg {
     width: 28px;
     height: 28px;
     color: var(--accent);
     transition: all 0.3s ease;
 }

 .contact-card:hover .contact-icon svg {
     color: white;
 }

 .contact-card h4 {
     font-size: 1.05rem;
     margin-bottom: 8px;
     font-family: 'Source Sans 3', sans-serif;
     font-weight: 600;
 }

 .contact-card p {
     color: var(--text-medium);
     font-size: 0.95rem;
 }

 .contact-card a {
     color: var(--text-medium);
     text-decoration: none;
     transition: color 0.3s;
 }

 .contact-card a:hover {
     color: var(--accent);
 }

 /* FOOTER */
 .footer {
     background: var(--primary-dark);
     color: white;
     padding: 60px 0 30px;
 }

 .footer-inner {
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     gap: 60px;
     margin-bottom: 60px;
 }

 .footer-brand .logo {
     margin-bottom: 24px;
 }

 .footer-brand .logo-text {
     color: white;
 }

 .footer-brand p {
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.95rem;
     line-height: 1.7;
     margin-bottom: 20px;
 }

 .footer-slogan {
     color: var(--accent-light);
     font-family: 'Playfair Display', serif;
     font-size: 1.1rem;
     font-style: italic;
 }

 .footer-links h5 {
     color: white;
     font-size: 1rem;
     margin-bottom: 24px;
     font-family: 'Source Sans 3', sans-serif;
     font-weight: 600;
 }

 .footer-links ul {
     list-style: none;
 }

 .footer-links li {
     margin-bottom: 14px;
 }

 .footer-links a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     font-size: 0.95rem;
     transition: color 0.3s;
 }

 .footer-links a:hover {
     color: white;
 }

 .footer-contact p {
     display: flex;
     align-items: center;
     gap: 12px;
     color: rgba(255, 255, 255, 0.7);
     font-size: 0.95rem;
     margin-bottom: 16px;
 }

 .footer-contact svg {
     width: 20px;
     height: 20px;
     color: var(--accent-light);
     flex-shrink: 0;
 }

 .footer-contact a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: color 0.3s;
 }

 .footer-contact a:hover {
     color: white;
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     padding-top: 40px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .footer-bottom p {
     color: rgba(255, 255, 255, 0.5);
     font-size: 0.9rem;
 }

 .social-links {
     display: flex;
     gap: 12px;
 }

 .social-links a {
     width: 44px;
     height: 44px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
 }

 .social-links a:hover {
     background: var(--accent);
 }

 .social-links svg {
     width: 20px;
     height: 20px;
     color: white;
 }

 /* IMAGE MODAL */
 .image-modal {
     display: none;
     position: fixed;
     z-index: 9999;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.9);
     animation: fadeIn 0.3s ease;
 }

 .image-modal.active {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .image-modal-content {
     max-width: 90%;
     max-height: 90%;
     object-fit: contain;
     border-radius: var(--radius-md);
     animation: zoomIn 0.3s ease;
 }

 .image-modal-close {
     position: absolute;
     top: 20px;
     right: 40px;
     color: white;
     font-size: 40px;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s;
     background: rgba(255, 255, 255, 0.1);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     backdrop-filter: blur(10px);
 }

 .image-modal-close:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: rotate(90deg);
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes zoomIn {
     from {
         transform: scale(0.8);
         opacity: 0;
     }

     to {
         transform: scale(1);
         opacity: 1;
     }
 }

 .clickable-image {
     cursor: pointer;
 }

 /* ANIMATIONS */
 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }
 }

 .fade-in {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.6s ease;
     will-change: opacity, transform;
 }

 .fade-in.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Hızlı scroll için yedek - eğer JS çalışmazsa veya geç tetiklenirse */
 @media (prefers-reduced-motion: reduce) {
     .fade-in {
         opacity: 1;
         transform: none;
         transition: none;
     }
 }

 /* RESPONSIVE */

 /* Large Desktop - Çok büyük ekranlar için */
 @media (min-width: 1920px) {
     .hero {
         padding: 140px 0 80px;
     }

     .section {
         padding: 100px 0;
     }

     .section-cream {
         padding: 100px 0;
     }

     .hero-stats {
         margin-top: 80px;
         padding: 60px 0 50px;
     }

     .features-band {
         padding: 70px 0;
     }

     .footer {
         padding: 80px 0 40px;
     }
 }

 /* Desktop - Normal büyük ekranlar için optimize */
 @media (min-width: 1440px) and (max-width: 1919px) {
     .hero {
         padding: 130px 0 70px;
     }

     .section {
         padding: 90px 0;
     }

     .section-cream {
         padding: 90px 0;
     }

     .hero-stats {
         margin-top: 70px;
         padding: 55px 0 45px;
     }
 }

 /* Tablet ve küçük laptop için */
 @media (min-width: 1025px) and (max-width: 1439px) {
     .hero {
         padding: 110px 0 60px;
     }

     .section {
         padding: 70px 0;
     }

     .section-cream {
         padding: 70px 0;
     }

     .hero-stats {
         margin-top: 60px;
         padding: 50px 0 40px;
     }

     .container {
         max-width: 1100px;
     }
 }

 /* Mobil dil seçici - sadece mobilde göster */
 .mobile-lang-switch {
     display: none;
 }

 @media (max-width: 768px) {
     .mobile-lang-switch {
         display: block;
         border-bottom: none !important;
     }

     .desktop-lang-switch {
         display: none;
     }

     .mobile-lang-dropdown {
         display: block;
     }
 }

 @media (max-width: 1024px) {
     .hero-inner {
         grid-template-columns: 1fr;
         text-align: center;
         gap: 60px;
     }

     .hero-content {
         max-width: 100%;
     }

     .hero h1 {
         font-size: 2.8rem;
     }

     .hero h1 span {
         font-size: 2.2rem;
     }

     .hero-buttons {
         justify-content: center;
     }

     .hero-visual {
         max-width: 500px;
         margin: 0 auto;
     }

     .hero-floating-1 {
         left: 0;
     }

     .hero-floating-2 {
         right: 0;
     }

     .hero-trust {
         left: 50%;
         transform: translateX(-50%);
     }

     .features-band-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .usage-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .usage-card.featured {
         grid-column: span 2;
     }

     .showcase {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .showcase-reverse {
         direction: ltr;
     }

     .specs-wrapper {
         grid-template-columns: 1fr;
     }

     .contact-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .footer-inner {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 768px) {
     .container {
         padding: 0 20px;
     }

     .header-inner {
         height: 70px;
     }

     .nav-links {
         display: none;
     }

     .nav-menu {
         display: flex;
         position: fixed;
         top: 0;
         right: -100%;
         width: 280px;
         height: 100vh;
         background: white;
         flex-direction: column;
         padding: 70px 20px 20px;
         box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
         gap: 0;
         transition: right 0.3s ease;
         z-index: 1001;
         overflow-y: auto;
     }

     .nav-menu.active {
         right: 0;
     }

     .mobile-menu-close {
         display: none;
         position: absolute;
         top: 15px;
         left: 15px;
         background: none;
         border: none;
         cursor: pointer;
         padding: 8px;
         z-index: 1002;
     }

     .nav-menu.active~.nav .mobile-menu-close {
         display: flex;
     }

     .mobile-menu-close svg {
         width: 24px;
         height: 24px;
         color: var(--primary);
     }

     /* Mobil menü overlay */
     .nav-overlay {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(0, 0, 0, 0.5);
         z-index: 1000;
         opacity: 0;
         transition: opacity 0.3s ease;
     }

     .nav-overlay.active {
         display: block;
         opacity: 1;
     }

     .nav-menu li {
         width: 100%;
         border-bottom: 1px solid var(--border-light);
     }

     .nav-menu li:last-child {
         border: none;
     }

     .nav-menu a {
         display: block;
         padding: 16px 0;
     }

     .mobile-menu-btn {
         display: flex;
     }

     .btn-primary.header-btn {
         display: none;
     }

     /* Mobil menüde dil seçici dropdown */
     .mobile-lang-dropdown-menu {
         border-top: 1px solid var(--border-light);
         padding-top: 8px;
         margin-top: 8px;
     }

     .mobile-lang-btn-menu {
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
         padding: 16px 0;
         background: none;
         border: none;
         cursor: pointer;
         color: var(--text-medium);
         font-size: 0.95rem;
         font-weight: 500;
         transition: color 0.3s;
     }

     .mobile-lang-btn-menu:hover {
         color: var(--primary);
     }

     .mobile-lang-btn-menu .dropdown-arrow {
         transition: transform 0.3s ease;
     }

     .mobile-lang-btn-menu.active .dropdown-arrow {
         transform: rotate(180deg);
     }

     .mobile-lang-submenu {
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease;
         padding-left: 16px;
     }

     .mobile-lang-submenu.active {
         max-height: 200px;
     }

     .mobile-lang-submenu a {
         display: flex !important;
         align-items: center;
         gap: 10px;
         padding: 12px 0 !important;
         text-decoration: none;
         color: var(--text-medium);
         font-size: 0.9rem;
         font-weight: 500;
         transition: all 0.3s ease;
         border-bottom: none !important;
     }

     .mobile-lang-submenu a:hover {
         color: var(--primary);
     }

     .mobile-lang-submenu a.active {
         color: var(--accent);
         font-weight: 600;
     }

     .mobile-lang-submenu a span {
         font-size: 1.2rem;
     }

     .hero {
         padding: 100px 0 60px;
     }

     .hero h1 {
         font-size: 2.2rem;
     }

     .hero h1 span {
         font-size: 1.8rem;
     }

     .hero-floating {
         display: none;
     }

     .hero-trust {
         position: relative;
         bottom: 0;
         left: 0;
         transform: none;
         margin-top: 24px;
         justify-content: center;
     }

     .hero-stats {
         grid-template-columns: repeat(2, 1fr);
         gap: 24px;
         margin-top: 40px;
         padding: 40px 0;
     }

     .hero-stat-item::after {
         display: none;
     }

     .hero-stat-number {
         font-size: 2.5rem;
     }

     .section {
         padding: 60px 0;
     }

     .section-header h2 {
         font-size: 2rem;
     }

     .features-band-grid {
         grid-template-columns: 1fr;
         gap: 32px;
     }

     .usage-grid {
         grid-template-columns: 1fr;
     }

     .usage-card.featured {
         grid-column: span 1;
         aspect-ratio: 4/3;
     }

     .showcase-images {
         grid-template-columns: 1fr;
     }

     .showcase-img:first-child {
         grid-row: span 1;
     }

     .sizes-grid {
         grid-template-columns: 1fr;
     }

     .faq-grid {
         grid-template-columns: 1fr;
     }

     .contact-grid {
         grid-template-columns: 1fr;
     }

     .footer-inner {
         grid-template-columns: 1fr;
         text-align: center;
         gap: 40px;
     }

     .footer-brand {
         display: flex;
         flex-direction: column;
         align-items: center;
     }

     .footer-contact p {
         justify-content: center;
     }

     .footer-bottom {
         flex-direction: column;
         gap: 20px;
     }
 }

 @media (max-width: 480px) {
     .hero h1 {
         font-size: 1.9rem;
     }

     .hero h1 span {
         font-size: 1.5rem;
     }

     .hero-buttons {
         flex-direction: column;
     }

     .hero-buttons .btn {
         width: 100%;
         justify-content: center;
     }
 }