/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
}

.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loader {
    text-align: center;
    color: white;
}

.diamond-loader {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loader h2 {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 2px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 30px rgba(0, 0, 0, 0.15);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.nav-logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #667eea;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: #667eea;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: #667eea;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* HERO VIDEO BACKGROUND */
.hero-background {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

/* HERO CONTENT */
.hero-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
   /* display: flex;*/
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 8vw;
    gap: 3rem;
}
.hero-text {
    color: #fff;
    max-width: 600px;
    margin-top: 4vh;
    margin-bottom: 0;
}
.hero-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1.2rem;
    text-shadow: 0 4px 24px rgba(0,0,0,0.45);
}
.title-line {
    display: block;
}
.hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    color: #e0e0e0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.hero-buttons {
    display: flex;
    gap: 1rem;
}
.btn {
    padding: 0.8rem 2.2rem;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.btn-primary {
    background: #0077b6;
    color: #fff;
}
.btn-primary:hover {
    background: #023e8a;
}
.btn-secondary {
    background: #fff;
    color: #0077b6;
    border: 1px solid #0077b6;
}
.btn-secondary:hover {
    background: #caf0f8;
    color: #023e8a;
}

/* HERO IMAGE CARDS */
.hero-image {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-end;
    margin-top: 4vh;
}
.floating-card {
    background: rgba(255,255,255,0.92);
    color: #0077b6;
    border-radius: 1.2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.13);
    padding: 1.2rem 2.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    min-width: 140px;
    width: 140px;
    height: 110px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
}
.floating-card i {
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
}
.floating-card:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 2.5vh;
    transform: translateX(-50%);
    z-index: 3;
}
.scroll-arrow {
    width: 32px;
    height: 32px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
    margin: 0 auto;
    animation: scrollArrowAnim 1.2s infinite;
    opacity: 0.7;
}
@keyframes scrollArrowAnim {
    0% { transform: translateY(0) rotate(-45deg);}
    50% { transform: translateY(12px) rotate(-45deg);}
    100% { transform: translateY(0) rotate(-45deg);}
}

/* Animations */
@keyframes slideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Section Styles */
section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* About Section */
.about {
    background: #f8f9fa;
}

.about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.about-item:hover {
    transform: translateY(-5px);
}

.about-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.about-icon i {
    color: white;
    font-size: 1.5rem;
}

.about-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.about-info p {
    color: #666;
    line-height: 1.6;
}

.about-stats {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.stat-item {
    text-align: center;
    padding: 2rem;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #666;
    font-weight: 500;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.service-card {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: left 0.3s ease;
    z-index: -1;
}

.service-card:hover::before {
    left: 0;
}

.service-card:hover {
    transform: translateY(-10px);
    color: white;
}

.service-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    background: white;
}

.service-icon i {
    color: white;
    font-size: 2rem;
    transition: color 0.3s ease;
}

.service-card:hover .service-icon i {
    color: #667eea;
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.service-card p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.service-card ul {
    list-style: none;
    text-align: left;
}

.service-card li {
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.service-card li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #667eea;
    font-weight: bold;
}

.service-card:hover li::before {
    color: white;
}

/* Gallery Section */
.gallery {
    background: #f8f9fa;
}

.gallery-filter {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 25px;
    border: 2px solid #667eea;
    background: transparent;
    color: #667eea;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.filter-btn.active, .filter-btn:hover {
    background: #667eea;
    color: white;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.gallery-item {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.gallery-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.16);
    transform: translateY(-6px) scale(1.03);
}

.gallery-intro-image {
    width: 100%;
    max-width: 900px;
    margin: 2rem auto 2.5rem auto;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0,0,0,0.13);
    display: flex;
    justify-content: center;
}

.gallery-intro-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 1.2rem;
}

.gallery-image {
    position: relative;
    height: 550px;
    overflow: hidden;
}

.placeholder-image {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    font-weight: 600;
}

.bathroom-img {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.door-img {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.cabinet-img {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.placeholder-image i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 2rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay h4 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

/* Contact Section */
.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1.5rem;
    flex-shrink: 0;
}

.contact-icon i {
    color: white;
    font-size: 1.5rem;
}

.contact-details h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #333;
}

.contact-details p {
    color: #666;
    line-height: 1.6;
}

.contact-form {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #667eea;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer */
.footer {
    background: #2c3e50;
    color: white;
    padding: 3rem 0 1rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer-logo i {
    margin-right: 10px;
    font-size: 1.8rem;
    color: #667eea;
}

.footer-section p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    color: #bdc3c7;
}

.footer-section h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}

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

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: #667eea;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background: #34495e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: #667eea;
    transform: translateY(-2px);
}

.footer-contact p {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.footer-contact i {
    margin-right: 10px;
    width: 20px;
    color: #667eea;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #34495e;
    color: #bdc3c7;
}

/* Responsive Design */
@media (max-width: 900px) {
    .hero-content {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 4vw;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 2rem 0;
    }

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

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .hero-image {
        height: 300px;
    }

    .floating-card {
        padding: 1.5rem;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .about-stats {
        flex-direction: row;
        justify-content: space-around;
    }

    .stat-item {
        padding: 1.5rem;
    }

    .stat-number {
        font-size: 2rem;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 1rem;
    }

    .btn {
        width: 100%;
        max-width: 250px;
    }

    .section-title {
        font-size: 2rem;
    }

    .gallery-filter {
        gap: 0.5rem;
    }

    .filter-btn {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
    
   /* */
     
    
    .sink-thumb {
        max-height: 340px;
    }
    
    .nav-menu {
        gap: 0;
    }
    
    .nav-link {
         padding: 1rem 2rem;
         width: 100%;
         text-align: center;
    }
    
    .nav-item.dropdown {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .nav-item.dropdown .nav-link {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border-radius: 0;
        background-color: #f8f9fa;
        width: 100%;
        display: none; 
        opacity: 1;
        transform: none;
        padding: 0;
        border: none;
        border-top: 1px solid #e9ecef;
    }
    
    .nav-item.dropdown.active .dropdown-menu {
        display: block;
    }

    .nav-item.dropdown.active .nav-arrow {
        transform: rotate(180deg);
    }
    
    .dropdown-item {
        text-align: center;
        border-bottom: 1px solid #e9ecef;
    }

    .dropdown-item:last-child {
        border-bottom: none;
    }
    
    .color-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }
    .color-swatch {
        max-width: 250px;
        padding: 15px;
        min-height: 240px;
    }
    .color-box {
        height: 140px;
    }
    .color-name {
        font-size: 1.15rem;
    }
}

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

    .nav-container {
        padding: 1rem 15px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .floating-card {
        padding: 1rem;
    }

    .floating-card i {
        font-size: 2rem;
    }

    .floating-card span {
        font-size: 1rem;
    }

    .about-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .service-card {
        padding: 2rem;
    }

    .contact-form {
        padding: 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }
    
    
    
    .sink-thumb {
        max-height: 180px;
    }

    .color-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .color-swatch {
        max-width: 80%;
        margin: 0 auto;
        min-height: 220px;
    }
    .color-box {
        height: 120px;
    }
}
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
    .prev, .next {
        font-size: 16px;
        padding: 10px;
    }
}

/* Scroll animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

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

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.6s ease;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.language-selector select {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-family: 'Poppins', sans-serif;
}

/* Responsive Düzenlemeler */
@media (max-width: 992px) {
    .color-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    .color-swatch {
        max-width: 280px;
        padding: 18px;
        min-height: 260px;
    }
    .color-box {
        height: 160px;
    }
    .color-name {
        font-size: 1.25rem;
    }
}

/* lake-series.html için stiller */
.lake-hero {
    padding-top: 120px;
    padding-bottom: 50px;
    background-color: #f8f9fa;
}

.lake-intro-image {
    max-width: 900px;
    height: 450px;
    margin: 0 auto 3rem auto;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.lake-intro-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease-in-out, filter 0.4s ease;
}

.lake-intro-image:hover img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

.lake-hero .section-header {
    margin-bottom: 2rem;
}

.lake-products .container {
    max-width: 2000px;
    margin: 0 auto;
}
.lake-products 


.lake-item {
    background: #fff;
    /*border-radius: 1.2rem;*/
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.2rem 1rem 1.5rem 1rem;
    transition: box-shadow 0.2s;/*, transform 0.2s;*/
}



.lake-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0077b6;
    letter-spacing: 0.5px;
    text-align: center;
}

.lake-item:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.16);
    /*transform: translateY(-6px) scale(1.03);*/
}
.lake-intro-image {
    width: 100%;
    max-width: 900px;
    margin: 2rem auto 2.5rem auto;
    border-radius: 1.2rem;
    overflow: hidden;
    box-shadow: 0 4px 32px rgba(0,0,0,0.13);
    display: flex;
    justify-content: center;
}
.lake-intro-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 1.2rem;
}

/* Lightbox Modal */
.lake-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0; width: 100vw; height: 100vh;
    background: rgba(20, 20, 20, 0.85);
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    animation: fadeInModalBg 0.2s;
}
.lake-modal.active {
    background: rgba(20, 20, 20, 0.92);
}
.lake-modal-content {
    max-width: 90vw;
    max-height: 80vh;
   /* border-radius: 1.2rem;*/
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
    animation: zoomInModal 0.22s;
    background: #fff;
    display: block;
    margin: 0 auto;
}
.lake-modal-caption {
    color: #fff;
    text-align: center;
    margin-top: 1.2rem;
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
    position: absolute;
    bottom: 5vh;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
}
.lake-modal-close {
    position: absolute;
    top: 32px;
    right: 48px;
    color: #fff;
    font-size: 2.6rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: color 0.2s;
}
.lake-modal-close:hover {
    color: #ff5252;
}
@keyframes zoomInModal {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes fadeInModalBg {
    from { background: rgba(20,20,20,0.0);}
    to { background: rgba(20,20,20,0.85);}
}

.lake-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 0.8rem;
}
.lake-info span.lake-name::after {
    content: "\A";
    white-space: pre;
}
.lake-name {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    text-align: center;
    line-height: 1.4;
}
/* === Sink Hero Section === */
.sink-hero {
    padding-top: 120px;
    padding-bottom: 50px;
    background-color: #f8f9fa;
}

.sink-intro-image {
    max-width: 1200px;
    height: auto;
    margin: 0 auto 3rem auto;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.sink-intro-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    transition: transform 0.4s ease-in-out, filter 0.4s ease;
}

.sink-intro-image:hover img {
    transform: scale(1.05);
    filter: brightness(1.05);
}

/* === Sink Product Grid === */
.sink-products .container {
    max-width: 1200px;
    margin: 0 auto;
}

.sink-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin: 2rem 0 3rem 0;
}

.sink-item {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    transition: box-shadow 0.2s, transform 0.2s;
}

.sink-item:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.16);
    transform: translateY(-6px) scale(1.015);
}

.sink-thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: contain;
    /*border-radius: 1rem;*/
    background: #f5f5f5;
    margin-bottom: 1rem;
    transition: transform 0.4s ease;
}

.sink-item-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #0077b6;
    text-align: center;
    letter-spacing: 0.5px;
}

/* General Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9);
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.modal.active {
    opacity: 1;
}

/* Modal Content (Image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    max-height: 80vh;
    object-fit: contain;
}

/* Caption of Modal Image */
#sinkModalCaption {
    position: absolute;
    top: 63%;
    right: center;
    color: #fff;
    font-size: 2.6rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
    transition: color 0.2s;
}

/* Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 1001;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Navigation Arrows */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    z-index: 1001;
}

.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

.next {
    right: 0;
    border-radius: 0 3px 3px 0;
}

.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

.carousel-caption {
    position: absolute;
    right: 0%;
    bottom: 1.25rem;
    left: 0%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
}
.color-palette-section {
    padding-top: 120px; /* Navbar ile çakışmaması için */
    background-color: var(--bg-light);
}

.color-grid {
    display: grid;
    /* Lake serisindeki minmax değerine yakın olacak şekilde ayarlandı */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px; /* Kutucuklar arası boşluk artırıldı */
    margin-top: 60px;
    justify-items: center; /* Kutucukları ortala */
}

.color-swatch {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Daha akıcı geçiş */
    width: 100%;
    max-width: 320px; /* Her bir kutucuğun maksimum genişliği, lake-item ile uyumlu */
    min-height: 280px; /* Genel kutucuk yüksekliği */
}

.color-swatch:hover {
    transform: scale(1.03); /* Büyüme efekti */
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.color-box {
    width: 100%; /* Kapsayıcıya göre tam genişlik */
    height: 180px; /* Renk kutucuğunun yüksekliği artırıldı */
    border-radius: 8px; /* Dairesel yerine köşeli hale getirildi */
    border: 3px solid var(--border-color); /* Hafif bir çerçeve */
    margin-bottom: 15px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.1); /* İç gölge */
    object-fit: cover; /* Resim gibi davranması için */
}

.color-name {
    font-size: 1.35rem; /* Yazı boyutu artırıldı */
    font-weight: 600;
    color: var(--dark-text-color);
    margin-bottom: 0; /* Kod kaldırıldığı için boşluk azaltıldı */
}





.futuristic-navbar {
    background: linear-gradient(90deg, #222a35 0%, #1a1f27 100%);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: 'Poppins', sans-serif;
    z-index: 1001;
}
.futuristic-navbar .nav-link,
.futuristic-navbar .navbar-brand {
    color: #fff !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: color 0.2s;
    font-size: 1.08rem;
}
.futuristic-navbar .nav-link:hover,
.futuristic-navbar .navbar-brand:hover {
    color: #00fff7 !important;
}
.futuristic-navbar .nav-logo img {
    border-radius: 50%;
    border: 2px solid #00fff7;
    box-shadow: 0 0 12px #00fff755;
}
.futuristic-dropdown {
    position: relative;
}
.futuristic-dropdown-toggle {
    cursor: pointer;
    user-select: none;
}
.futuristic-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 190px;
    background: rgba(30,40,60,0.85); /* Şeffaf, blur efektli */
    border: none;
    box-shadow: 0 8px 32px 0 rgba(0,255,247,0.13);
    backdrop-filter: blur(8px);
    border-radius: 0 0 16px 16px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scaleY(0.95);
    transition: all 0.33s cubic-bezier(0.4, 0.5, 0.3, 1.2);
    z-index: 1200;
    padding: 0.5rem 0;
    margin-top: 7px;
    pointer-events: none;
    display: block;
}
.futuristic-dropdown.show > .futuristic-dropdown-menu,
.futuristic-dropdown:hover > .futuristic-dropdown-menu,
.futuristic-dropdown:focus-within > .futuristic-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scaleY(1);
    pointer-events: auto;
}
.futuristic-dropdown-menu .dropdown-item {
    color: #fff;
    padding: 12px 30px 12px 24px;
    transition: background 0.22s, color 0.2s, padding-left 0.22s;
    border-radius: 6px;
    font-size: 1.02rem;
    position: relative;
    z-index: 1;
}
.futuristic-dropdown-menu .dropdown-item:hover {
    background: rgba(0,255,247,0.18);
    color: #00fff7;
    padding-left: 36px;
}
.futuristic-navbar .form-select {
    background: rgba(0,255,247,0.10);
    color: #fff;
    border: none;
    border-radius: 6px;
    outline: none;
    margin-left: 1rem;
    min-width: 70px;
    font-weight: 500;
}
.futuristic-navbar .form-select option {
    color: #222;
}
@media (max-width: 991px) {
    .futuristic-dropdown-menu {
        position: static;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: rgba(30,40,60,0.97);
        box-shadow: none;
        border-radius: 0;
        backdrop-filter: none;
        margin-top: 0;
        pointer-events: auto;
        display: none;
    }
    .futuristic-dropdown.show > .futuristic-dropdown-menu {
        display: block !important;
    }
    .futuristic-navbar .navbar-nav {
        background: rgba(34,42,53,0.98);
        border-radius: 0 0 16px 16px;
        padding-bottom: 0.6rem;
    }
}
.futuristic-dropdown-toggle i {
    transition: transform 0.2s;
    margin-left: 4px;
}
.futuristic-dropdown.show > .futuristic-dropdown-toggle i {
    transform: rotate(180deg);
}
.navbar-toggler {
    border-color: rgba(255,255,255,0.6);
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


.reference-marquee {
    overflow: hidden;
    background: #fff;
    border-top: 1px solid #bfa76d33;
}
.reference-track {
    display: flex;
    gap: 48px;
    animation: marquee 30s linear infinite;
    align-items: center;
}
.reference-track img {
    height: 54px;
    max-width: 140px;
    object-fit: contain;
    filter: grayscale(1) brightness(1.1) contrast(1.2);
    opacity: 0.88;
    transition: filter .2s, opacity .2s;
}
.reference-track img:hover {
    filter: grayscale(0) brightness(1.07);
    opacity: 1;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (max-width: 600px) {
    .reference-track { gap: 24px; }
    .reference-track img { height: 36px; }
}

/* ====  DARK THEME & DESIGN SYSTEM v2  =================================== */
:root {
  --font-sans-1: 'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
  --font-sans-2: 'Poppins', system-ui, sans-serif;

  --bg-01: #0e141b;
  --bg-02: #161e27;
  --bg-03: #1f2933;
  --bg-glass: rgba(24,32,42,0.55);
  --gradient-hero: radial-gradient(circle at 25% 30%, #123447 0%, #0e141b 55%);
  --gradient-accent: linear-gradient(135deg,#00fff7,#009dff 60%,#6d4bff);
  --gradient-accent-soft: linear-gradient(135deg,#00fff733,#009dff22);
  --accent: #00fff7;
  --accent-strong: #02d7d1;
  --accent-alt: #764ba2;
  --danger: #ff5252;

  --text-01: #f5f9fc;
  --text-02: #c3d0dc;
  --text-03: #8fa0b0;

  --border-soft: #2b3945;
  --shadow-1: 0 4px 24px -4px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 0 1px rgba(0,255,247,0.25), 0 0 14px -2px rgba(0,255,247,0.35);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  --transition-fast: 0.22s cubic-bezier(.4,.4,.2,1);
  --transition-med: 0.45s cubic-bezier(.4,.4,.2,1);

  /* Tipografi akışkan ölçek (clamp) */
  --fs-hero: clamp(2.6rem, 6.2vw, 4.2rem);
  --fs-h2: clamp(1.9rem, 3.8vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 2.2vw, 1.55rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.82rem;
}

html.dark-theme body {
  background: var(--bg-01);
  color: var(--text-01);
  font-family: var(--font-sans-1);
}

.dark-theme .topbar-glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.topbar-link {
  color: var(--text-02);
  font-size: 0.85rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 500;
  transition: color var(--transition-fast);
}
.topbar-link:hover { color: var(--accent); }

/* Tema Toggle button */
#themeToggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2000;
  background: var(--bg-02);
  color: var(--accent);
  border: 1px solid var(--border-soft);
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(10px);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform .3s;
}
#themeToggle:hover {
  background: var(--bg-03);
  transform: translateY(-4px);
}

/* HERO (Yeni) */
.hero-viewport {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Eskisi: filter: brightness(.55) saturate(1.15); */
  /* YENİ: Daha canlı ve net */
  filter: brightness(1.75) saturate(1.0) contrast(1.0);
  z-index: 0;
}
.hero-gradient-layer {
  position: absolute;
  inset: 0;
  /* Eskisi: background: var(--gradient-hero); opacity: .9; */
  /* YENİ: Opacity düşürüldü! */
  background: var(--gradient-hero);
  opacity: .72;
  z-index: 1;
}
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px;
  mask: linear-gradient(to bottom, rgba(0,0,0,.8), rgba(0,0,0,.2));
  z-index: 2;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 4rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 120px;
  padding-bottom: 80px;
}
.hero-left {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}
.hero-heading {
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.05;
}
.hero-heading .hh-line {
  display: block;
  background: linear-gradient(120deg,#ffffff 0%, #c9d8e5 80%);
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,0.55));
}
.hero-heading .hh-line.accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
}
.hero-heading .hh-line.accent:after {
  content:'';
  position:absolute;
  left:0; bottom:-10px;
  width:140px; height:4px;
  background: var(--gradient-accent);
  border-radius: 10px;
  box-shadow: 0 0 14px -2px rgba(0,255,247,0.7);
}
.hero-lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--text-02);
  max-width: 520px;
  line-height: 1.55;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.btn {
  --btn-pad-y: 0.95rem;
  --btn-pad-x: 1.9rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: 14px;
  font-weight: 500;
  letter-spacing: .5px;
  font-size: 0.95rem;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  gap:.6rem;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  cursor: pointer;
}
.btn-accent {
  background: var(--gradient-accent);
  color: #041114;
  font-weight: 600;
  box-shadow: 0 6px 28px -8px rgba(0,255,247,0.55);
}
.btn-accent:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px -10px rgba(0,255,247,0.75);
}
.btn-outline {
  background: var(--gradient-accent-soft);
  color: var(--accent);
  border: 1px solid rgba(0,255,247,0.35);
}
.btn-outline:hover {
  background: var(--gradient-accent);
  color:#041114;
  box-shadow: 0 6px 26px -6px rgba(0,255,247,0.45);
}
.hero-metrics {
  display: flex;
  gap: 2rem;
  margin-top: .8rem;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 90px;
}
.metric-number {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 600;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0,255,247,0.25));
}
.metric-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-03);
  font-weight: 600;
}

.hero-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.floating-stack {
  display: grid;
  gap: 1.2rem;
}
.f-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  padding: 1.4rem 1.8rem;
  width: 200px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  gap:.6rem;
  align-items: flex-start;
  justify-content: flex-end;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.f-card:before {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 80% 20%, rgba(0,255,247,0.25), transparent 60%);
  opacity:0;
  transition: opacity var(--transition-fast);
}
.f-card:hover {
  transform: translateY(-6px) rotate3d(1,1,0,8deg);
  border-color: rgba(0,255,247,0.35);
  box-shadow: var(--shadow-glow);
}
.f-card:hover:before { opacity:1; }
.f-card i {
  font-size: 1.8rem;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(0,255,247,0.5);
}
.f-card span {
  font-weight: 500;
  color: var(--text-01);
  font-size: 1rem;
  letter-spacing: .5px;
}

.scroll-cue {
  position: absolute;
  left:50%; bottom: 26px;
  transform: translateX(-50%);
  width: 30px; height: 54px;
  border:2px solid rgba(255,255,255,0.35);
  border-radius: 28px;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:6px;
  opacity:.8;
  animation: floatCue 3.6s ease-in-out infinite;
}
.scroll-cue .wheel {
  width:6px; height:10px;
  background: var(--accent);
  border-radius: 3px;
  animation: wheelSlide 2.2s cubic-bezier(.65,.05,.36,1) infinite;
  box-shadow: 0 0 8px 2px rgba(0,255,247,0.6);
}
@keyframes wheelSlide {
  0% { transform: translateY(0); opacity:1;}
  70% { transform: translateY(20px); opacity:0;}
  100% { opacity:0;}
}
@keyframes floatCue {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* PANEL / SECTIONS */
.dark-panel {
  background: var(--bg-02);
  position: relative;
}
.dark-panel:before {
  content:'';
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 10% 10%,rgba(0,255,247,0.08),transparent 65%);
  pointer-events:none;
}

.section-header .section-title {
  color: var(--text-01);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: -0.5px;
}
.section-header .section-subtitle {
  color: var(--text-02);
  font-size: var(--fs-lead);
  font-weight: 300;
}

/* About items (neo / glass) */
.about-item.neo {
  background: linear-gradient(145deg,#18232c,#131b23);
  border:1px solid #22323f;
  box-shadow: 0 8px 28px -10px rgba(0,0,0,0.7);
}
.about-item.neo:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0,255,247,0.25), 0 14px 36px -12px rgba(0,255,247,0.30);
}
.about-icon {
  background: linear-gradient(135deg,#00fff7,#009dff);
  box-shadow: 0 0 14px -2px rgba(0,255,247,0.55);
}
.about-info h3 { color: var(--text-01); }
.about-info p { color: var(--text-03); }

.stat-item.glass {
  background: linear-gradient(145deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(14px);
}

/* Gallery (hover effect can be refined) */
.gallery {
  background: linear-gradient(180deg, var(--bg-01), var(--bg-02));
}
.gallery-item {
  background: #18232c;
  border:1px solid #22323f;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.gallery-item:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 36px -12px rgba(0,255,247,0.35);
  transform: translateY(-8px) scale(1.025);
}
.gallery-overlay {
  background: linear-gradient(180deg,transparent,rgba(0,0,0,0.85));
}
.gallery-overlay h4 {
  color: var(--accent);
  text-shadow: 0 4px 20px rgba(0,255,247,0.45);
}
.placeholder-image {
  font-weight:500;
  letter-spacing: .6px;
}

/* Contact */
.contact {
  background: var(--bg-01);
}
.contact-form {
  background: linear-gradient(145deg,#18232c,#141d25);
  border:1px solid #22323f;
  backdrop-filter: blur(10px);
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: #10181f;
  border:1px solid #2a3945;
  color: var(--text-01);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(0,255,247,0.45);
}
.contact-item .contact-icon {
  background: var(--gradient-accent);
  box-shadow: 0 0 18px -4px rgba(0,255,247,0.5);
}
.contact-details h4 { color: var(--text-01); }
.contact-details p { color: var(--text-03); }

/* Footer koyu uyum (footbar.html içindeki elementleri kapsar) */
footer.bg-dark {
  background: #0d141a !important;
  border-top:1px solid #1e2c37;
}
footer h4, footer h5 { color: var(--text-01); }
footer p, footer a { color: var(--text-03); }
footer a:hover { color: var(--accent); }

/* Scroll Reveal + yeni animasyon varyantları 
[data-anim] {
  opacity:0;
  transform: translateY(30px);
  transition: opacity .9s cubic-bezier(.4,.25,.2,1), transform .9s cubic-bezier(.4,.25,.2,1);
  will-change: transform, opacity;
}
[data-anim].visible { opacity:1; transform:none; }
[data-anim="stagger-up"] { transform: translateY(50px); }
[data-anim="fade-blur"] { filter: blur(14px); }
[data-anim="fade-blur"].visible { filter: blur(0); }
[data-anim="scale-in"] { transform: scale(.85) translateY(20px); }
[data-anim="scale-in"].visible { transform: scale(1) translateY(0); }*/

/* Responsive hero adjustments */
@media (max-width: 1100px) {
.lake-thumb { height: 360px; }
  .sink-thumb { height: 300px; }
  .hero-inner { flex-direction: column; align-items: flex-start; }
  .hero-right { width:100%; justify-content:flex-start; }
  .floating-stack { grid-auto-flow: column; }
  .hero-metrics { order: 4; }
}
@media (max-width: 620px) {
      .lake-thumb { height: 240px; }
  .sink-thumb { height: 220px; }
  .hero-inner { padding-top: 140px; }
  .hero-heading { line-height: 1.08; }
  .hero-metrics { gap:1.2rem; }
  .f-card { width: 160px; min-height: 120px; }
}

/* (Diğer mevcut style bloklarınız en altta kalabilir; gerekiyorsa çakışanları elden geçiriniz) */

.image-slider-section {
  margin: 60px 0;
}

.image-slider {
  position: relative;
  width: 90%;
  max-width: 1200px;
  height: 800px;
  margin: auto;
  overflow: hidden;
  border: 2px solid #444;
  border-radius: 8px;
}

.image-slider .slider-bg {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1.2s ease, transform 6s ease;
  filter:brightness(.68) saturate(1.1);
  will-change:opacity,transform;
}

.image-slider .slider-bg.active {
  opacity:1;
  transform:scale(1);
  z-index:2;
}

.image-slider .slider-bg.fade-out {
  opacity:0;
  transform:scale(1.02);
  z-index:1;
  transition:opacity .8s ease, transform 1.6s ease;
}

.image-slider .overlay {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  display: flex;
  z-index: 2;
}

.image-slider .zone {
  flex: 1;
  border-right: 1px solid rgba(255,255,255,0.6);
  cursor: pointer;
}
.image-slider .zone:last-child {
  border-right: none;
}
/* === Image Slider (Goldişik tarzı) === */
.image-slider-section {
  position: relative;
  padding: 0;
  min-height: 60vh;
  background: #0d141a;
}
.image-slider {
  position: relative;
  width: 100%;
  min-height: 60vh;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.image-slider .background {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s ease, transform 6s ease;
  filter: brightness(.68) saturate(1.1);
}
.image-slider .background.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}
.image-slider .overlay-zones {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(6,1fr);
  z-index: 10;
}
.image-slider .zone {
  cursor: pointer;
  position: relative;
  transition: background .45s;
}
.image-slider .zone:hover {
  background: linear-gradient(180deg,rgba(0,255,247,0.08),rgba(0,255,247,0));
}
.image-slider .zone::after {
  content:'';
  position:absolute;
  inset:0;
  backdrop-filter: none;
  background: rgba(0,0,0,0);
  transition: backdrop-filter .45s ease, background .45s ease;
  pointer-events:none;
}

.slider-caption {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  text-align: center;
  padding: 1.2rem 2rem;
  max-width: 560px;
}
.slider-caption h3 {
  margin:0 0 .4rem;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  background: linear-gradient(120deg,#ffffff,#bbd4e1);
  -webkit-background-clip: text;
  color:transparent;
}
.slider-caption p {
  margin:0;
  color: var(--text-02);
  font-weight:300;
  letter-spacing:.5px;
}
.glass-lite {
  background: linear-gradient(145deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  border-radius: 24px;
  box-shadow: 0 6px 28px -10px rgba(0,0,0,0.55);
}

/* Contact ekstra uyumlu stil */
.contact-inline-email {
  font-size:0.9rem;
  color: var(--accent);
  display:flex;
  gap:.5rem;
  align-items:center;
}
.contact-inline-email i {
  color: var(--accent);
  filter: drop-shadow(0 0 6px rgba(0,255,247,0.4));
}

/* Küçük responsive iyileştirmeler */
@media (max-width: 820px) {
    .lake-thumb { height: 320px; }
  .sink-thumb { height: 260px; }
  .image-slider-section { min-height: 50vh; }
  .image-slider { min-height: 50vh; }
  .image-slider .overlay-zones { grid-template-columns: repeat(3,1fr); grid-auto-rows: 1fr 1fr; }
}

.overlay-zones {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.zone {
  flex: 1;
  position: relative;
  border-right: 1px solid rgba(255,255,255,0.4);
  text-decoration: none;
  color: white;
  display: flex;
  align-items: flex-end;   /* alta hizala */
  justify-content: center; /* ortala */
  padding-bottom: 25px;    /* alttan boşluk */
}

.zone:last-child {
  border-right: none;
}

.zone-label {
  font-size: 1.0rem;          /* daha büyük yazı */
   font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4); /* varsayılan soluk */
  text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  transition: all 0.3s ease;
  pointer-events: none;
}

.zone:hover .zone-label {
  color: #fff;               /* tam beyaz */
  transform: scale(1.15);    /* hover’da büyüt */
}
.zone.active .zone-label {
  color: #fff;            /* aktif olunca tam beyaz */
  transform: scale(1.1);  /* biraz büyüsün */
}




/* Label temel halleri */
.zone .zone-label {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255,255,255,0.55);
  opacity: 0.85;
  transition: color .35s ease, transform .35s ease, opacity .35s ease, filter .4s ease;
  filter: none;
  pointer-events: none;
}

/* Zone arka katmanı artık blur uygulamayacak */
.overlay-zones .zone::after {
  content:'';
  position:absolute;
  inset:0;
  /* Tümü net kalsın diye backdrop-filter VE background yok */
  background:transparent;
  pointer-events:none;
}

/* Varsayılan label: biraz soluk + hafif blur */
.zone-label {
  font-size:.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:rgba(255,255,255,.55);
  opacity:.75;
  filter:blur(1.4px);
  transition:opacity .35s, color .35s, filter .35s, transform .35s;
  pointer-events:none;
}

/* Hover edilen (focus) label: net, parlak, büyüt */
.overlay-zones:hover .zone:hover .zone-label,
.zone.active .zone-label {
  opacity:1;
  color:#ffffff;
  filter:none;
  transform:scale(1.16);
  text-shadow:0 0 10px rgba(0,255,247,0.55);
}

/* Hover sırasında diğer (pasif) label'ları biraz daha solalım */
.overlay-zones:hover .zone:not(:hover) .zone-label {
  opacity:.38;
  filter:blur(2px);
  color:rgba(255,255,255,.40);
  transform:none;
}

/* Mobilde blur'u biraz azalt (performans için) */
@media (max-width:620px){
  .zone-label { filter:blur(1px); }
  .overlay-zones:hover .zone:not(:hover) .zone-label { filter:blur(1.4px); }
}


/* === İç Sayfa Dark Tema Tipografi / Layout Patch (v3.0.1) === */
:root {
  --page-h1: clamp(2.1rem, 5.2vw, 3.15rem);
  --page-h2: clamp(1.85rem, 3.4vw, 2.45rem);
  --page-h3: clamp(1.15rem, 2.2vw, 1.45rem);
  --page-text: 1rem;
  --page-text-small: 0.82rem;
}
.dark-theme .sub-hero,
.dark-theme .lake-hero,
.dark-theme .sink-hero,
.dark-theme .color-palette-section {
  background: var(--bg-02) !important;
  position: relative;
  padding-top: 130px;
  padding-bottom: 50px;
}
.dark-theme .lake-intro-image,
.dark-theme .sub-hero-image {
  border-radius: 1.4rem;
  overflow: hidden;
  box-shadow: 0 10px 40px -12px rgba(0,0,0,0.6);
  background: #0f171d;
}
.dark-theme .lake-intro-image img,
.dark-theme .sub-hero-image img {
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.92) saturate(1.05);
  transition: transform 0.9s ease, filter 0.9s ease;
}
.dark-theme .lake-intro-image:hover img { transform: scale(1.04); filter: brightness(1.0) saturate(1.1); }

.section-header h1,
.section-header h2.section-title {
  font-size: var(--page-h2);
  letter-spacing:-0.5px;
  font-weight:600;
  color: var(--text-01);
  margin-bottom:1rem;
  text-wrap:balance;
  max-width: 900px;
  margin-left:auto;
  margin-right:auto;
}
.section-header h1.page-h1 { font-size: var(--page-h1); }
.section-header p.section-subtitle {
  font-size: var(--fs-lead);
  max-width:860px;
  line-height:1.6;
  text-wrap:balance;
  color: var(--text-02);
}

/* Kart Grid (lake-item, sink-item vs.) koyu uyum */
.dark-theme .lake-grid,
.dark-theme .sink-grid,
.dark-theme .color-grid {
  gap: 1.6rem;
}
.dark-theme .lake-item,
.dark-theme .sink-item,
.dark-theme .color-swatch {
  background: linear-gradient(145deg,#18232c,#131b23);
  border:1px solid #22323f;
  border-radius: 18px;
  box-shadow: 0 8px 28px -12px rgba(0,0,0,0.65);
  transition: border-color .25s, transform .35s cubic-bezier(.4,.25,.2,1), box-shadow .35s;
  position:relative;
  overflow:hidden;
}
.dark-theme .lake-item:hover,
.dark-theme .sink-item:hover,
.dark-theme .color-swatch:hover {
  border-color: var(--accent);
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 0 0 1px rgba(0,255,247,.25), 0 18px 44px -14px rgba(0,255,247,.35);
}
.dark-theme .lake-thumb,
.dark-theme .sink-thumb {
  /*border-radius: 12px;*/
  background:#0f171d;
  box-shadow: 0 4px 22px -8px rgba(0,0,0,0.55);
  transition: transform .7s ease, filter .7s ease;
}
.dark-theme .lake-item:hover .lake-thumb,
.dark-theme .sink-item:hover .sink-thumb {
  transform: scale(1.035);
  filter: brightness(1.03) saturate(1.08);
}

/* Başlık / isim */
.dark-theme .lake-name,
.dark-theme .sink-item-info h3 {
  display:block;
  font-size: clamp(.82rem,1.7vw,.93rem);
  font-weight:500;
  letter-spacing:.4px;
  color: var(--text-02);
  text-align:center;
  line-height:1.35;
  padding: .15rem .6rem .55rem;
  word-break:break-word;
}
.dark-theme .lake-item:hover .lake-name,
.dark-theme .sink-item:hover .sink-item-info h3 {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(0,255,247,0.45);
}

/* Çok satırlı seri açıklamaları */
.dark-theme p[data-i18n*="Desc"],
.dark-theme p[data-i18n*="Subtitle"] {
  font-size: var(--page-text);
  line-height:1.65;
}

/* İletişim sayfası form koyu uyumu (iç sayfadaki tekil sayfa) */
.dark-theme .contact-page-wrapper {
  background: var(--bg-01);
  padding-top:130px;
}
.dark-theme .contact .section-header h2 { font-size: var(--page-h2); }

/* Renk kartları isimleri karanlıkta */
.dark-theme .color-name {
  color: var(--text-01);
  font-size: clamp(.85rem,1.6vw,.95rem);
  font-weight:500;
}

/* Lightbox (lake-modal) koyu overlay biraz daha doygun) */
.dark-theme .lake-modal { background: rgba(10,15,20,0.85); }
.dark-theme .lake-modal.active { background: rgba(10,15,20,0.93); }

/* İç sayfa spacing ayarları */
.sub-page-section { padding: 90px 0; }
@media (max-width:820px){
  .sub-page-section,
  .lake-hero,
  .sink-hero { padding: 110px 0 60px; }
  .section-header h1.page-h1,
  .section-header h2.section-title { letter-spacing:-.3px; }
  .dark-theme .lake-name,
  .dark-theme .sink-item-info h3 { font-size:.83rem; }
}

/* Uzun seri açıklamaları kırpmasın, tipografik denge */
.text-balance { text-wrap:balance; }


/* ======================= DMD DIAMOND STYLES v3.0.2 FULL ======================= */
/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans','Poppins',system-ui,sans-serif;line-height:1.55;background:#0e141b;color:#f5f9fc;overflow-x:hidden}
img,video{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* DESIGN TOKENS */
:root{
  --bg-01:#0e141b;--bg-02:#161e27;--bg-03:#1f2933;
  --panel:#18232c;--glass:rgba(24,32,42,0.55);
  --gradient-hero:radial-gradient(circle at 25% 30%,#123447 0%,#0e141b 60%);
  --gradient-accent:linear-gradient(135deg,#00fff7,#009dff 55%,#6d4bff);
  --gradient-accent-soft:linear-gradient(135deg,#00fff733,#009dff22);
  --accent:#00fff7;--accent-alt:#764ba2;--text-01:#f5f9fc;--text-02:#c3d0dc;--text-03:#8fa0b0;--border-soft:#2b3945;
  --fs-hero:clamp(2.6rem,6vw,4.2rem);--fs-h2:clamp(1.9rem,3.5vw,2.6rem);--fs-h3:clamp(1.25rem,2.3vw,1.55rem);--fs-lead:clamp(1.05rem,1.5vw,1.25rem);
  --radius-sm:8px;--radius-md:16px;--radius-lg:28px;--shadow-1:0 4px 24px -4px rgba(0,0,0,0.5);--shadow-glow:0 0 0 1px rgba(0,255,247,0.25),0 0 14px -2px rgba(0,255,247,0.35);
  --trans-fast:.25s cubic-bezier(.4,.4,.2,1);--trans-med:.55s cubic-bezier(.4,.4,.2,1)
  /* İç sayfa tipografi */
  --page-h1:clamp(2.1rem,5.2vw,3.15rem);--page-h2:clamp(1.85rem,3.4vw,2.45rem);--page-h3:clamp(1.15rem,2.2vw,1.45rem);--page-text:1rem;
}

/* TOPBAR & THEME TOGGLE */
.topbar-glass{background:rgba(255,255,255,.04);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.07);font-size:.85rem}
.topbar-link{color:var(--text-02);letter-spacing:.5px;text-transform:uppercase;font-weight:500;transition:color var(--trans-fast)}
.topbar-link:hover{color:var(--accent)}
#themeToggle{position:fixed;right:18px;bottom:18px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--bg-02);border:1px solid var(--border-soft);border-radius:14px;color:var(--accent);cursor:pointer;box-shadow:var(--shadow-1);backdrop-filter:blur(10px);transition:background var(--trans-fast),transform var(--trans-fast);z-index:1200}
#themeToggle:hover{background:var(--bg-03);transform:translateY(-4px)}

/* NAVBAR (futuristic) */
.futuristic-navbar{background:linear-gradient(90deg,#222a35 0%,#1a1f27 100%);border-bottom:1px solid rgba(255,255,255,0.05)}
.futuristic-navbar .nav-link,.futuristic-navbar .navbar-brand{color:#fff!important;font-weight:500;letter-spacing:.5px;transition:color .2s}
.futuristic-navbar .nav-link:hover,.futuristic-navbar .navbar-brand:hover{color:var(--accent)!important}
.navbar-toggler{border-color:rgba(255,255,255,0.6)}
.navbar-toggler-icon{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")}

/* HERO (INDEX) */
.hero-viewport{position:relative;min-height:100vh;display:flex;align-items:stretch;overflow:hidden}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.15)}
.hero-gradient-layer{position:absolute;inset:0;background:var(--gradient-hero);mix-blend-mode:overlay;opacity:.9}
.hero-grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:80px 80px;mask:linear-gradient(to bottom,rgba(0,0,0,.85),rgba(0,0,0,.2));pointer-events:none}
.hero-inner{position:relative;z-index:2;padding:120px 0 80px;display:flex;justify-content:space-between;gap:4rem}
.hero-left{max-width:640px;display:flex;flex-direction:column;gap:1.8rem}
.hero-heading{font-size:var(--fs-hero);font-weight:600;letter-spacing:-1px;line-height:1.05}
.hh-line{display:block;background:linear-gradient(120deg,#ffffff,#c9d8e5 80%);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 6px 22px rgba(0,0,0,.55))}
.hh-line.accent{background:var(--gradient-accent);-webkit-background-clip:text;color:transparent;position:relative}
.hh-line.accent:after{content:'';position:absolute;left:0;bottom:-10px;width:140px;height:4px;background:var(--gradient-accent);border-radius:10px;box-shadow:0 0 14px -2px rgba(0,255,247,.7)}
.hero-lead{font-size:var(--fs-lead);font-weight:300;color:var(--text-02);max-width:520px}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.btn{padding:.95rem 1.9rem;border:none;cursor:pointer;border-radius:14px;font-size:.95rem;font-weight:500;letter-spacing:.5px;display:inline-flex;align-items:center;gap:.6rem;transition:transform var(--trans-fast),box-shadow var(--trans-fast),background var(--trans-fast),color var(--trans-fast);position:relative;overflow:hidden}
.btn-accent{background:var(--gradient-accent);color:#041114;box-shadow:0 6px 28px -8px rgba(0,255,247,.55)}
.btn-accent:hover{transform:translateY(-3px);box-shadow:0 10px 36px -10px rgba(0,255,247,.75)}
.btn-outline{background:var(--gradient-accent-soft);color:var(--accent);border:1px solid rgba(0,255,247,.35)}
.btn-outline:hover{background:var(--gradient-accent);color:#041114;box-shadow:0 6px 26px -6px rgba(0,255,247,.45)}
.hero-metrics{display:flex;gap:2rem}
.metric-number{font-size:clamp(1.8rem,3.2vw,2.4rem);font-weight:600;background:var(--gradient-accent);-webkit-background-clip:text;color:transparent}
.metric-label{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-03);font-weight:600}
.floating-stack{display:grid;gap:1.2rem}
.f-card{background:linear-gradient(145deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);padding:1.4rem 1.8rem;width:200px;min-height:140px;border-radius:24px;display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem;transition:transform var(--trans-fast),box-shadow var(--trans-fast),border-color var(--trans-fast);position:relative;overflow:hidden}
.f-card:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(0,255,247,.25),transparent 60%);opacity:0;transition:opacity var(--trans-fast)}
.f-card:hover{transform:translateY(-6px) rotate3d(1,1,0,8deg);border-color:rgba(0,255,247,.35);box-shadow:var(--shadow-glow)}
.f-card:hover:before{opacity:1}
.f-card i{font-size:1.8rem;color:var(--accent);text-shadow:0 0 12px rgba(0,255,247,.5)}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:30px;height:54px;border:2px solid rgba(255,255,255,.35);border-radius:28px;display:flex;justify-content:center;padding-top:6px;opacity:.8}
.scroll-cue .wheel{width:6px;height:10px;background:var(--accent);border-radius:3px;animation:wheelSlide 2.2s cubic-bezier(.65,.05,.36,1) infinite;box-shadow:0 0 8px 2px rgba(0,255,247,0.6)}
@keyframes wheelSlide{0%{transform:translateY(0);opacity:1}70%{transform:translateY(20px);opacity:0}100%{opacity:0}}

/* INDEX IMAGE SLIDER */
.image-slider-section{position:relative;padding:0;min-height:60vh;background:var(--bg-01)}
.image-slider{position:relative;width:100%;min-height:60vh;overflow:hidden;border-top:1px solid rgba(255,255,255,0.05);border-bottom:1px solid rgba(255,255,255,0.05)}
.slider-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.05);transition:opacity 1.2s ease,transform 6s ease;filter:brightness(.68) saturate(1.12);will-change:opacity,transform}
.slider-bg.active{opacity:1;transform:scale(1)}
.overlay-zones{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);z-index:5}
.zone{position:relative;display:flex;align-items:flex-end;justify-content:center;text-decoration:none;cursor:pointer;border-right:1px solid rgba(255,255,255,0.28);padding:0 4px 22px;overflow:hidden;transition:background .35s}
.zone:last-child{border-right:none}
.zone-label{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.55);opacity:.9;transition:color .35s,transform .35s,opacity .35s,filter .35s;pointer-events:none}
.zone::after{content:'';position:absolute;inset:0;background:transparent;backdrop-filter:none;pointer-events:none;transition:backdrop-filter .45s ease,background .45s ease}
/* Yalnızca label blur yaklaşımı (diğerleri soluk) */
.overlay-zones:hover .zone:not(:hover) .zone-label{opacity:.35;filter:blur(1.5px);color:rgba(255,255,255,.4)}
.overlay-zones:hover .zone:hover .zone-label{color:#fff;transform:scale(1.16);opacity:1;filter:none;text-shadow:0 0 10px rgba(0,255,247,.55)}
.zone.active .zone-label{color:#fff;opacity:1;text-shadow:0 0 12px rgba(0,255,247,.55)}
@media (max-width:880px){.overlay-zones{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr 1fr}}
@media (max-width:620px){.zone-label{font-size:.7rem}}

/* SECTIONS SHARED */
section{padding:100px 0}
.section-header{text-align:center;margin-bottom:3.5rem}
.section-title{font-size:var(--fs-h2);font-weight:600;letter-spacing:-.5px;color:var(--text-01);position:relative;text-wrap:balance;max-width:900px;margin:0 auto 1rem}
.section-subtitle{font-size:var(--fs-lead);font-weight:300;color:var(--text-02);max-width:860px;margin:0 auto;line-height:1.6;text-wrap:balance}
.page-h1{font-size:var(--page-h1)}

/* ABOUT (Index) */
.about.dark-panel{background:var(--bg-02);position:relative}
.about-content{display:grid;grid-template-columns:2fr 1fr;gap:4rem}
.about-item.neo{display:flex;align-items:center;gap:1.2rem;padding:1.3rem 1.4rem;background:linear-gradient(145deg,#18232c,#131b23);border:1px solid #22323f;border-radius:18px;transition:border-color var(--trans-fast),box-shadow var(--trans-fast),transform var(--trans-fast)}
.about-item.neo:hover{border-color:var(--accent);box-shadow:0 0 0 1px rgba(0,255,247,.25),0 14px 36px -12px rgba(0,255,247,.30);transform:translateY(-4px)}
.about-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(135deg,#00fff7,#009dff);box-shadow:0 0 14px -2px rgba(0,255,247,.55)}
.about-icon i{color:#fff;font-size:1.5rem}
.about-info h3{font-size:1.1rem;color:var(--text-01);margin:.1rem 0 .4rem}
.about-info p{font-size:.85rem;color:var(--text-03)}
.about-stats{display:flex;flex-direction:column;gap:1.6rem}
.stat-item.glass{text-align:center;padding:1.8rem 1.2rem;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(255,255,255,0.015));border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(14px)}
.stat-number{font-size:2.4rem;font-weight:600;color:var(--accent);margin-bottom:.4rem}
.stat-label{font-size:.8rem;letter-spacing:.5px;color:var(--text-02)}

/* GALLERY (Index) */
.gallery{background:linear-gradient(180deg,var(--bg-01),var(--bg-02))}
.gallery-filter{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-bottom:2.3rem}
.filter-btn{padding:.65rem 1.4rem;border:1px solid var(--accent);background:transparent;color:var(--accent);font-size:.85rem;letter-spacing:.5px;font-weight:500;border-radius:2rem;cursor:pointer;transition:background var(--trans-fast),color var(--trans-fast),box-shadow var(--trans-fast)}
.filter-btn:hover,.filter-btn.active{background:var(--gradient-accent);color:#041114;box-shadow:0 6px 20px -8px rgba(0,255,247,.4)}
.gallery-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.gallery-item{position:relative;border-radius:16px;overflow:hidden;background:#18232c;border:1px solid #22323f;transition:transform var(--trans-fast),box-shadow var(--trans-fast),border-color var(--trans-fast),opacity .35s}
.gallery-item.hide{opacity:0;pointer-events:none;transform:scale(.94)}
.gallery-item:hover{transform:translateY(-8px) scale(1.02);border-color:var(--accent);box-shadow:0 10px 36px -12px rgba(0,255,247,.35)}
.gallery-image{position:relative;height:380px}
.placeholder-image{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:1.05rem;letter-spacing:.5px}
.bathroom-img{background:linear-gradient(135deg,#667eea,#764ba2)}
.door-img{background:linear-gradient(135deg,#f093fb,#f5576c)}
.cabinet-img{background:linear-gradient(135deg,#4facfe,#00f2fe)}
.placeholder-image i{font-size:3rem;margin-bottom:.8rem}
.gallery-overlay{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.3rem;background:linear-gradient(180deg,transparent,rgba(0,0,0,0.9));transform:translateY(100%);transition:transform var(--trans-fast)}
.gallery-item:hover .gallery-overlay{transform:translateY(0)}
.gallery-overlay h4{margin:0 0 .35rem;font-size:1.1rem;color:var(--accent)}
.gallery-overlay p{margin:0;font-size:.8rem;color:var(--text-02)}

/* CONTACT (Index / Contact Page) */
.contact{background:var(--bg-01)}
.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;margin-bottom:2rem}
.contact-item{display:flex;align-items:center;margin-bottom:1.6rem}
.contact-icon{width:56px;height:56px;display:flex;justify-content:center;align-items:center;background:var(--gradient-accent);border-radius:50%;box-shadow:0 0 18px -4px rgba(0,255,247,.5);margin-right:1.3rem}
.contact-icon i{color:#fff;font-size:1.4rem}
.contact-details h4{margin:0 0 .35rem;font-size:1rem;font-weight:600;color:var(--text-01)}
.contact-details p{margin:0;font-size:.85rem;color:var(--text-03);line-height:1.4}
.contact-form{background:linear-gradient(145deg,#18232c,#141d25);border:1px solid #22323f;backdrop-filter:blur(10px);padding:2.2rem;border-radius:24px}
.form-group{margin-bottom:1.25rem}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;background:#10181f;border:1px solid #2a3945;color:var(--text-01);padding:.9rem 1rem;border-radius:12px;font-size:.9rem;font-family:inherit;resize:vertical;transition:border-color var(--trans-fast),box-shadow var(--trans-fast)}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px rgba(0,255,247,.4)}
.contact-inline-email{font-size:.8rem;color:var(--accent);display:flex;align-items:center;gap:.5rem}
.contact-inline-email i{color:var(--accent)}
.contact-map{margin-top:1.8rem}

/* FOOTER (placeholder footbar loaded) */
footer.bg-dark{background:#0d141a!important;border-top:1px solid #1e2c37}
footer a{color:var(--text-03)}
footer a:hover{color:var(--accent)}

/* LIGHTBOX (Lake / Gallery) */
.lake-modal{display:none;position:fixed;z-index:9999;inset:0;background:rgba(10,15,20,0.85);align-items:center;justify-content:center;transition:background .25s}
.lake-modal.active{background:rgba(10,15,20,0.93)}
.lake-modal-content{max-width:90vw;max-height:80vh;box-shadow:0 8px 40px rgba(0,0,0,0.35);background:#fff;object-fit:contain}
.lake-modal-caption{color:#fff;text-align:center;margin-top:1rem;font-size:1rem;font-weight:500;letter-spacing:.4px;text-shadow:0 2px 8px rgba(0,0,0,0.3)}
.lake-modal-close{position:absolute;top:32px;right:48px;color:#fff;font-size:2.4rem;font-weight:600;cursor:pointer;text-shadow:0 2px 8px rgba(0,0,0,0.3);transition:color .2s}
.lake-modal-close:hover{color:#ff5252}

/* SERIES / INNER PAGE HERO (lake / sink / color etc) */
.lake-hero,.sink-hero,.color-palette-section,.contact-page-wrapper{background:var(--bg-02);position:relative;padding-top:130px;padding-bottom:60px}
.lake-intro-image{max-width:1000px;height:auto;margin:0 auto 2.4rem;border-radius:1.4rem;overflow:hidden;background:#0f171d;box-shadow:0 10px 40px -12px rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center}
.lake-intro-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.92) saturate(1.05);transition:transform .9s ease,filter .9s ease}
.lake-intro-image:hover img{transform:scale(1.04);filter:brightness(1) saturate(1.1)}

/* SERIES GRIDS */
.lake-grid,.sink-grid,.color-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.6rem;margin-top:.5rem}
.lake-item,.sink-item,.color-swatch{background:linear-gradient(145deg,#18232c,#131b23); padding: 1.1rem 1rem 1.3rem;border:1px solid #22323f;border-radius:18px;box-shadow:0 8px 28px -12px rgba(0,0,0,0.65);display:flex;flex-direction:column;align-items:center;padding:1rem 1rem 1.2rem;transition:border-color .25s,transform .35s cubic-bezier(.4,.25,.2,1),box-shadow .35s;position:relative;overflow:hidden}
.lake-item:hover,.sink-item:hover,.color-swatch:hover{border-color:var(--accent);transform:translateY(-6px) scale(1.015);box-shadow:0 0 0 1px rgba(0,255,247,.25),0 18px 44px -14px rgba(0,255,247,.35)}
.lake-thumb,.sink-thumb{width:100%;height:800px;object-fit:cover;background:#0f171d;box-shadow:0 4px 22px -8px rgba(0,0,0,0.55);transition:transform .7s ease,filter .7s ease}
.sink-thumb{object-fit:contain;background:#142027;height:260px}
.lake-item:hover .lake-thumb,.sink-item:hover .sink-thumb{transform:scale(1.035);filter:brightness(1.03) saturate(1.08)}
.lake-name,.sink-item-info h3,.color-name{display:block;font-size:clamp(.78rem,1.6vw,.92rem);font-weight:500;letter-spacing:.4px;color:var(--text-02);text-align:center;line-height:1.35;padding:.4rem .4rem 0;word-break:break-word}
.lake-item:hover .lake-name,.sink-item:hover .sink-item-info h3{color:var(--accent);text-shadow:0 0 10px rgba(0,255,247,0.45)}
.color-swatch{min-height:260px}
.color-box{width:100%;height:160px;border-radius:10px;margin-bottom:12px;box-shadow:inset 0 0 8px rgba(0,0,0,0.2)}
.color-swatch:hover .color-name{color:var(--accent)}

/* SINK MODAL (handles/lavabo) */
.modal{display:none;position:fixed;inset:0;z-index:9999;padding:40px 5vw;background:rgba(10,15,20,0.88);justify-content:center;align-items:center;opacity:0;transition:opacity .25s}
.modal.active{opacity:1}
.modal-content{max-width:80vw;max-height:76vh;object-fit:contain;border-radius:1.2rem;background:#fff;box-shadow:0 10px 40px rgba(0,0,0,0.5)}
.close{position:absolute;top:28px;right:46px;font-size:2.4rem;color:#fff;cursor:pointer;font-weight:600;text-shadow:0 2px 8px rgba(0,0,0,.3);transition:color .2s}
.close:hover{color:#ff5252}
.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);padding:16px;color:#fff;font-weight:600;font-size:1.3rem;background:rgba(255,255,255,0.08);border-radius:50%;transition:background .25s}
.prev:hover,.next:hover{background:rgba(0,255,247,0.18)}
.prev{left:30px}
.next{right:30px}
#sinkModalCaption{margin-top:1rem;color:#fff;text-align:center;font-size:.9rem}

/* ANIMATIONS (Reveal) 
[data-anim]{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.4,.25,.2,1),transform .9s cubic-bezier(.4,.25,.2,1),filter .9s}
[data-anim="stagger-up"]{transform:translateY(55px)}
[data-anim="fade-blur"]{filter:blur(14px)}
[data-anim].visible{opacity:1;transform:none;filter:none}
[data-anim="scale-in"]{transform:scale(.85) translateY(20px)}
[data-anim="scale-in"].visible{transform:scale(1) translateY(0)}*/

/* RESPONSIVE */
@media (max-width:1100px){.hero-inner{flex-direction:column}}
@media (max-width:880px){
  .about-content{grid-template-columns:1fr}
  .contact-content{grid-template-columns:1fr}
  .lake-hero,.sink-hero,.color-palette-section{padding:120px 0 60px}
  .zone-label{filter:none}
}
@media (max-width:620px){
  section{padding:80px 0}
  .f-card{width:160px;min-height:120px}
  .lake-thumb{height:240px}
  .sink-thumb{height:220px}
  .lake-grid,.sink-grid{gap:1.1rem}
  .lake-name,.sink-item-info h3{font-size:.8rem}
  .contact-content{gap:2.2rem}
}

/* UTILS */
.hide{display:none!important}
.text-balance{text-wrap:balance}


.lake-modal .lake-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  transition: background .25s, transform .25s;
  text-decoration: none;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 18px -6px rgba(0,0,0,0.55);
}

.lake-modal .lake-prev { left: 34px; }
.lake-modal .lake-next { right: 34px; }

.lake-modal .lake-nav:hover {
  background: rgba(0,255,247,0.22);
  transform: translateY(-50%) scale(1.08);
}

@media (max-width: 680px) {
  .lake-modal .lake-nav {
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    left: 18px;
    right: 18px;
  }
  .lake-modal .lake-prev { left: 18px; }
  .lake-modal .lake-next { right: 18px; }
}

/* Caption üst/alt boşluk biraz */
.lake-modal-caption {
  margin-top: 1.2rem;
  font-size: .95rem;
  max-width: 80vw;
  line-height: 1.4;
}

/* Metinlerin yerleşimi için yeni kurallar */
.product-info {
    width: 100%; /* Kapsayıcının lake-item içinde tam genişlikte olmasını sağlar */
    display: flex;
    flex-direction: column; /* İçindeki satırları alt alta dizer */
    gap: 0.5rem; /* Satırlar arasında boşluk bırakır */
    padding: 0 1rem; /* Yanlardan biraz boşluk bırakır */
    text-align: left; /* Metni sola hizalar */
}

.info-row {
    display: flex;
/*justify-content: space-between; /* Etiket ve değeri iki yana yayar */
    justify-content: space-evenly;
    width: 100%;
    
}

.product-info .label {
    font-weight: 600; /* Başlık metnini kalın yapar */
    color: #eee9e9;
}

.product-info .value {
    color: #12f0f8; /* Değer metninin rengini değiştirir */
}

/* Bu eski kuralı kaldırın veya düzenleyin */
.lake-name {
    /* Bu kuralı yeni sınıflarınızla çakışmaması için düzenleyin veya kaldırın */
    font-size: 1rem;
    font-weight: 500;
    color: #8d8a8a;
    text-align: center; /* Bu kural artık gerekli olmayabilir */
}




/* === HERO VIDEO ENHANCEMENT OVERRIDES (v1.mp4) ===================== */
.hero-bg-video {
  /* Daha görünür: parlaklığı artır, doygunluk + kontrast yükselt */
  filter: brightness(.95) saturate(1.28) contrast(1.12) !important;
  /* İstersen biraz daha canlı istersen saturate(1.35) deneyebilirsin */
}

.hero-gradient-layer {
  /* Aşırı karartmayı azalt */
  opacity: .42 !important;
  mix-blend-mode: normal !important;
  /* Üst kısım daha şeffaf, alt kısım okunabilirlik için hafif koyu */
  background: linear-gradient(
    180deg,
    rgba(14,20,27,0.15) 0%,
    rgba(14,20,27,0.35) 55%,
    rgba(14,20,27,0.60) 100%
  ) !important;
}

.hero-grid-overlay {
  /* Izgara çizgilerini daha da hafiflet (istersen tamamen kaldırabilirsin) */
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
}

/* Metin okunabilirliği düşerse (video çok hareketli ise) yumuşak bir sol degrade arka plan ekleyebilirsin: */
.hero-left {
  position: relative;
  z-index: 4;
}
.hero-left::before {
  content: "";
  position: absolute;
  inset: -30px -40px -30px -30px;
  background: linear-gradient(90deg, rgba(14,20,27,0.55), rgba(14,20,27,0));
  border-radius: 32px;
  pointer-events: none;
  z-index: -1;
  /* İstersen kaldır (sadece ihtiyaç olursa kullan) */
  display: none;
}

/* Eğer tamamen canlı ama çok parlak olduysa alternatif ayarlar:
   (Hızlı deneme için aşağıdaki satırları aç/kapat)
   .hero-bg-video { filter: brightness(1.05) saturate(1.18) contrast(1.05) !important; }
*/

/* === Galeri Görselleri Düzenleme (Optimize Edildi) === */

/* Tüm cihazlarda varsayılan */
.lake-item img {
    width: 100%;
    height: auto;           /* sabit yükseklik kaldırıldı */
    max-height: 500px;      /* çok büyük ekranlarda aşırı büyümesin */
    object-fit: contain;    /* orantıyı koruyarak sığdır */
    background: #f5f5f5;
    display: block;
    margin: 0 auto 1rem auto;
}

/* Tablet ve küçük ekranlar */
@media (max-width: 768px) {
    .lake-item img {
        max-height: 60vh;   /* ekran yüksekliğinin %60’ını geçmesin */
    }
}

/* Telefon için */
@media (max-width: 480px) {
    .lake-item img {
        max-height: 40vh;   /* daha kısa görünüm */
    }
}

/* === Galeri Grid Düzeni (Optimize Edildi) === */

/* Varsayılan: masaüstü */
.lake-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Tablet */
@media (max-width: 992px) {
    .lake-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Telefon */
@media (max-width: 576px) {
    .lake-grid {
        grid-template-columns: 1fr;
    }
}