/*
Theme Name: Yeşiller Mobilya Tema
Author: Mete & Gemini
Description: Yeşiller Mobilya için Charcoal ve Gold detaylı, lüks kurumsal tema.
Version: 1.0
*/

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --gd:#1C1C1A; --gm:#2A2A28; --gl:#C9A96E; --gp:#E8D5B0; --gmist:#FAF8F4;
  --gmint:#F5F0E8; --cream:#F7F4EE; --ww:#FAFAF7; --ch:#1C1C1A;
  --mut:#7A8278; --brd:#E2DAD0; --gold:#C9A96E; --txt:#1C1C1A;
}
html{scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;background:var(--ww);color:var(--txt);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:70px;background:rgba(250,250,247,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--brd);transition:box-shadow .3s}
.nav-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 5%;height:100%}
.logo{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gd)}
.logo span{color:var(--gl)}
.nav-links{display:flex;gap:32px;list-style:none;align-items:center}
.nav-links a{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--txt);transition:color .2s}
.nav-links a:hover{color:var(--gl)}
.nav-cta{background:var(--gd)!important;color:white!important;padding:11px 24px;border-radius:2px}
.nav-cta:hover{background:var(--gm)!important}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{width:24px;height:1.5px;background:var(--gd);display:block}

/* HERO */
.hero{min-height:100vh;padding-top:70px;position:relative;display:flex;flex-direction:column;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 70% 40%,rgba(201,169,110,.12) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 15% 80%,rgba(166,139,103,.1) 0%,transparent 50%),linear-gradient(150deg,var(--gd) 0%,#252523 55%,#1C1C1A 100%);z-index:0}
.hero::after{content:'';position:absolute;top:-180px;right:-180px;width:650px;height:650px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,110,.15) 0%,transparent 70%);z-index:0}
.hero-content{position:relative;z-index:1;flex:1;display:flex;align-items:center;padding:80px 6%;min-height:calc(100vh - 70px)}
.hero-text{max-width:820px}
.hero-badge{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:4px;text-transform:uppercase;color:var(--gl);margin-bottom:36px}
.hero-badge::before{content:'';width:48px;height:1px;background:var(--gl)}
.hero-h1{font-family:'Playfair Display',serif;font-size:clamp(52px,8vw,116px);font-weight:400;line-height:.98;color:white;margin-bottom:32px;letter-spacing:-2px}
.hero-h1 em{font-style:italic;color:var(--gl);display:block}
.hero-h1 strong{font-weight:700;color:white}
.hero-p{font-size:17px;font-weight:300;line-height:1.8;color:rgba(232,213,176,.75);max-width:520px;margin-bottom:52px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:64px}
.btn-primary{display:inline-flex;align-items:center;gap:10px;background:var(--gl);color:white;padding:17px 40px;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;border-radius:2px;transition:all .25s}
.btn-primary:hover{background:var(--gp);color:var(--gd);transform:translateY(-2px)}
.btn-ghost{display:inline-flex;align-items:center;gap:10px;color:rgba(232,213,176,.8);font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;padding:17px 0;border-bottom:1px solid rgba(232,213,176,.3);transition:all .25s}
.btn-ghost:hover{color:var(--gl);border-color:var(--gl)}
.hero-stats{display:flex;gap:48px;flex-wrap:wrap;padding-top:48px;border-top:1px solid rgba(255,255,255,.08)}
.stat-n{font-family:'Playfair Display',serif;font-size:42px;font-weight:400;color:var(--gl);line-height:1}
.stat-l{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(232,213,176,.45);margin-top:6px}

.hero-band{position:relative;z-index:1;background:linear-gradient(to bottom,rgba(28,28,26,.7),rgba(28,28,26,1))}
.hero-band-inner{max-width:1400px;margin:0 auto;padding:0 6% 80px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.hb-card{aspect-ratio:4/3;position:relative;overflow:hidden;cursor:pointer}
.hb-card .bg{width:100%;height:100%;transition:transform .6s}
.hb-card:hover .bg{transform:scale(1.05)}
.hb-label{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(to top,rgba(0,0,0,.7),transparent)}
.hb-lcat{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gl);margin-bottom:4px}
.hb-lname{font-family:'Playfair Display',serif;font-size:17px;color:white}

/* MARQUEE */
.marquee-strip{background:var(--gl);padding:13px 0;overflow:hidden}
.marquee-inner{display:flex;animation:marquee 24s linear infinite;white-space:nowrap}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee-item{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:white;padding:0 36px;display:flex;align-items:center;gap:36px}
.marquee-item::after{content:'✦';font-size:7px;opacity:.6}

/* KATEGORİLER */
.cat-section{padding:100px 6%;background:var(--gmist)}
.cat-inner{max-width:1400px;margin:0 auto}
.cat-header{text-align:center;margin-bottom:56px}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{position:relative;overflow:hidden;border-radius:4px;cursor:pointer;aspect-ratio:3/4;transition:transform .3s,box-shadow .3s}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 20px 50px rgba(28,28,26,.15)}
.cat-card:first-child{grid-row:span 2;aspect-ratio:unset}
.cat-bg{position:absolute;inset:0;transition:transform .6s}
.cat-card:hover .cat-bg{transform:scale(1.05)}
.c1{background:linear-gradient(160deg,#8B6F52,#5C4330)}
.c2{background:linear-gradient(160deg,#6B5A47,#4A3D2E)}
.c3{background:linear-gradient(160deg,#7A6852,#52453A)}
.c4{background:linear-gradient(160deg,#9B8070,#6A5548)}
.cat-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.75),transparent 55%)}
.cat-content{position:absolute;bottom:0;left:0;right:0;padding:28px 24px}
.cat-tag{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gl);margin-bottom:6px}
.cat-name{font-family:'Playfair Display',serif;font-size:26px;font-weight:400;color:white;line-height:1.2;margin-bottom:14px}
.cat-link{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.75);border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:3px;transition:all .2s}
.cat-link:hover{color:var(--gl);border-color:var(--gl)}

/* NEDEN BİZ */
.why-section{display:grid;grid-template-columns:1fr 1fr}
.why-left{background:var(--gd);padding:90px 8%;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.why-left::before{content:'';position:absolute;bottom:-120px;left:-120px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(201,169,110,.2) 0%,transparent 70%)}
.why-right{background:var(--gm);padding:90px 8%;display:flex;flex-direction:column;justify-content:center}
.why-eyebrow{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gl);margin-bottom:20px}
.why-h2{font-family:'Playfair Display',serif;font-size:clamp(30px,3.5vw,46px);font-weight:400;color:white;line-height:1.2;margin-bottom:20px}
.why-p{font-size:14px;line-height:1.8;color:rgba(232,213,176,.65);margin-bottom:44px}
.feat-num{font-family:'Playfair Display',serif;font-size:13px;color:var(--gl);min-width:24px;margin-top:2px}
.feat-text{font-size:14px;color:rgba(232,213,176,.75);line-height:1.6}
.feat-text strong{color:white;font-weight:600;display:block;margin-bottom:3px}

/* PROJELER */
.projects-section{padding:100px 6%;background:var(--gmist)}
.projects-inner{max-width:1400px;margin:0 auto}
.proj-header{text-align:center;margin-bottom:56px}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,260px);gap:4px}
.proj-card{position:relative;overflow:hidden;cursor:pointer}
.proj-card:first-child{grid-column:span 2}
.proj-bg{width:100%;height:100%;transition:transform .6s}
.proj-card:hover .proj-bg{transform:scale(1.07)}
.proj-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(28,28,26,.9),transparent 55%);opacity:0;transition:opacity .3s}
.proj-card:hover .proj-overlay{opacity:1}
.proj-info{position:absolute;bottom:0;left:0;right:0;padding:26px;transform:translateY(8px);opacity:0;transition:all .3s}
.proj-card:hover .proj-info{opacity:1;transform:translateY(0)}
.proj-name{font-family:'Playfair Display',serif;font-size:20px;color:white}

/* TESTİMONİAL */
.testimonial-section{background:var(--gd);padding:100px 6%;text-align:center}
.testimonial-quote{font-family:'Playfair Display',serif;font-size:clamp(20px,2.8vw,34px);font-weight:400;color:white;line-height:1.6;max-width:820px;margin:0 auto 28px;font-style:italic}
.testimonial-quote::before{content:'\201C';color:var(--gl)}
.testimonial-quote::after{content:'\201D';color:var(--gl)}
.t-dot{width:28px;height:3px;background:rgba(255,255,255,.2);border:none;cursor:pointer;transition:all .2s}
.t-dot.active{background:var(--gl)}

/* İLETİŞİM */
.cta-section{background:var(--cream);padding:100px 6%}
.cta-inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.cta-h2{font-family:'Playfair Display',serif;font-size:clamp(34px,4vw,58px);font-weight:400;line-height:1.15;margin-bottom:20px;color:var(--gd)}
.cta-form{background:var(--gd);padding:48px}
.form-input{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(201,169,110,.15);color:white;padding:13px 16px;font-size:14px;font-family:'Outfit',sans-serif;outline:none;transition:border-color .2s;border-radius:2px;margin-bottom:18px}

/* FOOTER */
footer {background: #0F0F0F; color: #666; padding: 80px 6% 40px; margin-top: 0; border-top: 1px solid rgba(201, 169, 110, 0.1); position: relative; z-index: 10;}
.footer-inner {max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 60px;}
.footer-logo {font-family: 'Playfair Display', serif; font-size: 22px; letter-spacing: 4px; color: #fff; text-transform: uppercase; margin-bottom: 25px; display: block;}
.footer-logo span {color: #C9A96E;}
.footer-h {font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: #C9A96E; margin-bottom: 30px; font-weight: 600;}

/* WhatsApp */
.wa-btn{position:fixed;bottom:28px;right:28px;z-index:500;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:transform .2s}

/* MODAL (ÜRÜNLER SAYFASI İÇİN) */
.cp-body {padding: 120px 6% 60px; max-width: 1400px; margin: 0 auto;}
.cp-tab{font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase; padding:15px 25px; background:none; border:none; cursor:pointer; color:var(--mut); border-bottom:2px solid transparent; margin-bottom:-2px; white-space:nowrap; font-family:'Outfit',sans-serif}
.cp-tab.active{color:var(--gd); border-bottom-color:var(--gl)}
.cp-panel{display:none}
.cp-panel.active{display:block}
/* İletişim Bölümü Genel Arka Planı (Krem Renk) */
.cta-section {
    background-color: #F7F4EE; /* --cream */
    padding: 100px 6%;
}

.cta-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

/* Koyu Renkli Form Kutusu (Siyah/Antrasit) */
.cta-form {
    background-color: #1C1C1A; /* --gd */
    padding: 60px;
    border-radius: 4px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
}

.form-label {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(232, 213, 176, 0.6); /* Gold tonlu yazı */
    margin-bottom: 10px;
    display: block;
}

.form-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(201, 169, 110, 0.2);
    color: #fff;
    padding: 15px 20px;
    font-family: 'Outfit', sans-serif;
    outline: none;
    transition: 0.3s;
    margin-bottom: 20px;
}

.form-input:focus {
    border-color: #C9A96E; /* Fokus olunca altın rengi parlar */
}

/* Şık Altın Buton */
.form-submit {
    width: 100%;
    background-color: #C9A96E; /* --gold */
    color: #fff;
    border: none;
    padding: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
}

.form-submit:hover {
    background-color: #E8D5B0; /* Hover olunca açık altın rengi */
    color: #1C1C1A;
}
.hero-slider, .hero-slide {
    height: 100vh;
    width: 100%;
}

.hero-slide {
    background-size: cover;
    background-position: center;
    display: flex !important;
    align-items: center;
    padding: 0 8%;
    color: #fff;
}

.hero-content h1 {
    font-size: 80px;
    line-height: 1.1;
    font-family: 'Playfair Display', serif;
    margin: 20px 0;
}

.gold-text { color: #C9A96E; font-style: italic; }

.top-text { letter-spacing: 3px; font-size: 14px; font-weight: 600; }

/* Slider Okları ve Noktaları İçin */
.slick-dots { bottom: 30px; }
.slick-dots li button:before { color: #fff; font-size: 12px; }
/* --- MOBİL UYUMLULUK AYARLARI (768px ve altı) --- */
@media (max-width: 768px) {
    
    /* 1. Header & Nav Düzenlemesi */
    #navbar .nav-links {
        display: none !important; /* Masaüstü menüsünü gizle */
    }
    
    #hamburger {
        display: block !important; /* Hamburger butonunu göster */
    }

    #navbar {
        height: 70px; /* Mobilde biraz daha daraltalım */
    }

    body {
        padding-top: 70px;
    }

    /* 2. Hero (Giriş) Bölümü */
    .hero-h1 {
        font-size: 36px !important; /* Dev başlığı küçült */
        line-height: 1.2 !important;
    }

    .hero-p {
        font-size: 15px !important;
        padding: 0 10px;
    }

    .hero-btns {
        display: flex;
        flex-direction: column; /* Butonları alt alta al */
        gap: 15px;
        align-items: center;
    }

    .btn-primary, .btn-ghost {
        width: 100%;
        max-width: 280px;
        margin: 0 !important;
        text-align: center;
    }

    /* 3. İstatistikler (15+, 2000+ vb.) */
    .hero-stats, .hero-stats-row {
        flex-direction: column; /* Yan yana duran sayıları alt alta al */
        gap: 30px !important;
        text-align: center;
    }

    /* 4. Üçlü Kartlar (Ahşap Sandalye vb.) */
    .hero-band-inner, .home-category-cards, .cat-grid, .proj-grid {
        grid-template-columns: 1fr !important; /* 3 kolon yerine 1 kolona düşür */
        gap: 15px !important;
    }

    .hb-card, .cat-card, .proj-card {
        height: 250px !important; /* Kart boylarını mobilde optimize et */
    }

    /* 5. Neden Biz & Projeler */
    .why-section, .cta-inner {
        flex-direction: column !important;
        padding: 40px 5% !important;
    }

    .why-left, .why-right, .cta-form {
        width: 100% !important;
        margin-bottom: 30px;
    }

    .why-h2 {
        font-size: 28px !important;
    }

    /* 6. Form ve İletişim */
    .form-input {
        width: 100% !important;
    }
    
    /* 7. Marquee (Kayan Yazı) */
    .marquee-item {
        font-size: 11px;
        margin-right: 20px;
    }
  }
  /* --- SADECE MOBİL DÜZELTME EK KODLARI --- */
@media (max-width: 991px) {
    /* 1. Sağdaki beyaz boşluğu ve taşmayı bitirir */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative;
    }

    /* 2. Yan yana duran tüm bölümleri güvenli şekilde alt alta alır */
    .nav-inner, .hero-content, .hero-band-inner, .cat-inner, 
    .why-section, .projects-inner, .cta-inner, .footer-inner {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 30px !important;
    }

    /* 3. Grid (Izgara) yapılarını tek sütuna zorlar */
    .hero-band-inner, .cat-grid, .proj-grid, .footer-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    /* 4. Kartların mobilde dev gibi kalmasını veya kaybolmasını engeller */
    .hb-card, .cat-card, .proj-card {
        width: 100% !important;
        height: 300px !important;
        aspect-ratio: auto !important;
    }

    /* 5. Yazıların ekrandan taşmasını engeller */
    .hero-h1, .hero-content h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
    }

    /* 6. Form ve Neden Biz kutularını tam genişlik yapar */
    .why-left, .why-right, .cta-form {
        width: 100% !important;
        padding: 40px 20px !important;
    }

    /* 7. İstatistikleri ortalar */
    .hero-stats {
        justify-content: center !important;
        text-align: center !important;
        gap: 20px !important;
    }

    /* 8. Menü Linklerini Mobilde Gizle */
    .nav-links {
        display: none !important;
    }
    .hamburger {
        display: flex !important;
    }
}
.why-section {
    background-color: #2A2A28 !important; /* Arka planı yumuşak bir füme yapar */
}
.why-left {
    background-color: transparent !important; 
}
.why-right {
    background-color: #333330 !important; /* Sağ tarafı soldan bir tık daha açık yaparak o çizgiyi korur */
}

/* Sağ taraftaki kaybolan koyu gri yazıları da görünür yapmak için: */
.process-steps .step-title, 
.process-steps .step-desc,
.process-steps .step-num {
    color: #E8D5B0 !important; /* Yazıları temanın krem/gold rengine çeker */
}
/* --- KARTPOSTAL GÖRÜNÜMÜ --- */
.hero-band-new-section .hb-card {
    cursor: default !important; /* Tıklanabilir el ikonunu kaldırır */
    border: 8px solid #FFFFFF; /* Kalın, beyaz kartpostal çerçevesi */
    border-radius: 4px; /* Köşeleri çok hafif yumuşatır, istersen 0 yapıp keskinleştirebilirsin */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); /* Çerçevenin altından hafif gölge vererek öne çıkarır */
    transition: transform 0.4s ease;
}

/* Üzerine gelince artık linke gitmeyeceği için, kartpostal gibi sadece çok hafif öne çıkma efekti verdim */
.hero-band-new-section .hb-card:hover {
    transform: translateY(-5px);
}