/* =========================================================
   NOVA YAPI İNŞAAT
   PREMIUM LIGHT ARCHITECTURE THEME
   STYLES.CSS BÖLÜM 1/3
========================================================= */


/* =========================
   ROOT
========================= */

:root{

--bg-main:#f7f4ee;
--bg-white:#ffffff;

--text-dark:#1c1c1c;
--text-gray:#666666;

--gold:#b89145;
--gold-light:#d8b875;

--border:#e8dfd2;

--shadow:
0 20px 50px rgba(0,0,0,.08);

--radius:20px;

--transition:.35s ease;


--font-title:'Cinzel',serif;

--font-body:'Plus Jakarta Sans',sans-serif;

}



/* =========================
RESET
========================= */


*{

margin:0;
padding:0;
box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

background:var(--bg-main);

color:var(--text-dark);

font-family:var(--font-body);

overflow-x:hidden;

}



img{

max-width:100%;

display:block;

}



a{

text-decoration:none;

color:inherit;

}



.container{

width:min(1200px,90%);

margin:auto;

}




/* =========================
HEADER
========================= */


.header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

background:rgba(247,244,238,.85);

backdrop-filter:blur(15px);

border-bottom:1px solid var(--border);

}



.nav-container{

height:90px;

display:flex;

align-items:center;

justify-content:space-between;

width:min(1200px,90%);

margin:auto;

}



.logo img{

width:150px;

height:auto;

}




.nav-menu{

display:flex;

align-items:center;

gap:35px;

}



.nav-link{

font-weight:600;

font-size:15px;

color:#444;

transition:var(--transition);

}



.nav-link:hover,
.nav-link.active{

color:var(--gold);

}



.nav-btn{

background:var(--gold);

color:white!important;

padding:13px 28px;

border-radius:50px;

}




.hamburger{

display:none;

cursor:pointer;

}



.hamburger span{

display:block;

width:28px;

height:3px;

background:#333;

margin:5px;

}




/* =========================
HERO
========================= */


.hero-section{

min-height:100vh;

position:relative;

display:flex;

align-items:center;

overflow:hidden;

padding-top:100px;

}



#hero-canvas{

position:absolute;

inset:0;

width:100%;

height:100%;

z-index:1;

}



.hero-overlay{

position:absolute;

inset:0;

background:
linear-gradient(
90deg,
rgba(247,244,238,.95),
rgba(247,244,238,.55)
);

z-index:2;

}




.hero-content{

position:relative;

z-index:3;

max-width:650px;

}



.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 22px;

border-radius:50px;

background:white;

border:1px solid var(--border);

color:var(--gold);

font-weight:600;

margin-bottom:30px;

}



.hero-title{

font-family:var(--font-title);

font-size:80px;

line-height:1.05;

letter-spacing:2px;

margin-bottom:25px;

}



.hero-subtitle{

font-size:32px;

font-weight:500;

color:var(--gold);

margin-bottom:20px;

}



.hero-description{

font-size:18px;

line-height:1.8;

color:var(--text-gray);

margin-bottom:40px;

}




.hero-actions{

display:flex;

gap:20px;

}



.btn{

padding:16px 35px;

border-radius:50px;

font-weight:700;

transition:var(--transition);

display:inline-flex;

align-items:center;

gap:10px;

}



.btn-primary{

background:var(--gold);

color:white;

}



.btn-secondary{

border:1px solid var(--gold);

color:var(--gold);

background:white;

}



.btn:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}




/* =========================
SECTION BAŞLIKLARI
========================= */


.section-tag{

display:block;

color:var(--gold);

font-size:14px;

letter-spacing:3px;

font-weight:700;

margin-bottom:15px;

}



.section-title{

font-family:var(--font-title);

font-size:42px;

line-height:1.2;

margin-bottom:25px;

}



.section-description{

color:var(--text-gray);

line-height:1.8;

font-size:17px;

}
/* =========================================================
   NOVA YAPI İNŞAAT
   STYLES.CSS BÖLÜM 2/3
========================================================= */


/* =========================
ABOUT
========================= */


.about-section{

padding:120px 0;

}



.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

}



.about-features{

margin-top:40px;

display:flex;

flex-direction:column;

gap:25px;

}



.about-feature-item{

display:flex;

gap:20px;

align-items:flex-start;

}



.about-feature-item i{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

background:white;

color:var(--gold);

border-radius:50%;

box-shadow:var(--shadow);

font-size:22px;

}



.about-feature-item h4{

font-size:18px;

margin-bottom:5px;

}



.about-feature-item p{

color:var(--text-gray);

}





/* =========================
3D CARD
========================= */


.about-3d-card{

height:500px;

background:white;

border-radius:30px;

box-shadow:var(--shadow);

border:1px solid var(--border);

display:flex;

align-items:center;

justify-content:center;

position:relative;

overflow:hidden;

}



.about-3d-card::before{

content:"";

position:absolute;

width:300px;

height:300px;

background:rgba(184,145,69,.15);

border-radius:50%;

filter:blur(60px);

}



.card-badge{

position:absolute;

top:25px;

left:25px;

background:var(--gold);

color:white;

padding:10px 20px;

border-radius:50px;

font-size:14px;

z-index:2;

}



.card-3d-hint{

font-size:18px;

color:var(--gold);

z-index:2;

}





/* =========================
STATS
========================= */


.stats-section{

padding:40px 0 120px;

}



.stats-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

background:white;

border-radius:25px;

padding:40px;

box-shadow:var(--shadow);

border:1px solid var(--border);

}



.stat-item{

text-align:center;

}



.stat-number{

font-family:var(--font-title);

font-size:50px;

color:var(--gold);

font-weight:700;

}



.stat-item p{

color:var(--text-gray);

font-weight:600;

}





/* =========================
PROJECTS
========================= */


.projects-section{

padding:120px 0;

}



.section-header{

text-align:center;

margin-bottom:60px;

}



.projects-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}



.project-card{

background:white;

border-radius:25px;

overflow:hidden;

border:1px solid var(--border);

box-shadow:var(--shadow);

transition:var(--transition);

}



.project-card:hover{

transform:translateY(-12px);

}





.project-image-wrapper{

height:320px;

position:relative;

overflow:hidden;

}



.project-image-wrapper img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}



.project-card:hover img{

transform:scale(1.08);

}



.project-tag{

position:absolute;

bottom:20px;

left:20px;

background:white;

color:var(--gold);

padding:8px 18px;

border-radius:30px;

font-weight:700;

}





.project-content{

padding:30px;

}



.project-content h3{

font-family:var(--font-title);

font-size:25px;

margin-bottom:15px;

}



.project-content p{

color:var(--text-gray);

line-height:1.7;

margin-bottom:20px;

}



.project-content a{

color:var(--gold);

font-weight:700;

}





/* =========================
SERVICES
========================= */


.services-section{

padding:120px 0;

}



.services-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:30px;

}



.service-card{

background:white;

border-radius:25px;

padding:35px;

text-align:center;

border:1px solid var(--border);

box-shadow:var(--shadow);

transition:var(--transition);

}



.service-card:hover{

transform:translateY(-10px);

}



.service-card i{

font-size:40px;

color:var(--gold);

margin-bottom:20px;

}



.service-card h3{

margin-bottom:15px;

font-family:var(--font-title);

}



.service-card p{

color:var(--text-gray);

line-height:1.7;

}
/* =========================================================
   NOVA YAPI İNŞAAT
   STYLES.CSS BÖLÜM 3/3
========================================================= */


/* =========================
3D ARCHITECTURE
========================= */


.architecture-section{

padding:120px 0;

}



.architecture-box{

background:white;

border:1px solid var(--border);

border-radius:35px;

padding:60px;

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

box-shadow:var(--shadow);

}



.architecture-text p{

color:var(--text-gray);

line-height:1.8;

font-size:17px;

margin-bottom:35px;

}



.architecture-visual{

height:420px;

position:relative;

display:flex;

align-items:center;

justify-content:center;

background:
linear-gradient(
135deg,
#f5eee2,
#ffffff
);

border-radius:30px;

overflow:hidden;

}



.floating-building{

width:180px;

height:220px;

background:linear-gradient(
180deg,
#d8b875,
#b89145
);

border-radius:10px;

display:flex;

align-items:center;

justify-content:center;

font-size:80px;

color:white;

box-shadow:0 30px 50px rgba(0,0,0,.15);

animation:float 4s infinite ease-in-out;

}



.floating-person,
.floating-crane{

position:absolute;

font-size:45px;

color:var(--gold);

}



.floating-person{

bottom:70px;

left:80px;

}



.floating-crane{

top:70px;

right:80px;

}



@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-20px);

}

}




/* =========================
WHY SECTION
========================= */


.why-section{

padding:100px 0;

background:#fff;

}





/* =========================
REVIEWS
========================= */


.reviews-section{

padding:120px 0;

}



.reviews-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:30px;

}



.review-card{

background:white;

padding:35px;

border-radius:25px;

border:1px solid var(--border);

box-shadow:var(--shadow);

}



.review-card i{

font-size:35px;

color:var(--gold);

margin-bottom:20px;

}



.review-card p{

color:var(--text-gray);

line-height:1.8;

font-style:italic;

}



.review-card h4{

margin-top:25px;

color:var(--text-dark);

}





/* =========================
CONTACT
========================= */


.contact{

padding:120px 0;

}



.contact-container{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}



.contact-info-box h3{

font-family:var(--font-title);

font-size:40px;

margin-bottom:25px;

}



.contact-info-box p{

color:var(--text-gray);

line-height:1.8;

}



.contact-details{

margin-top:35px;

display:flex;

flex-direction:column;

gap:20px;

}



.contact-item{

display:flex;

align-items:center;

gap:15px;

font-weight:600;

}



.contact-item i{

width:45px;

height:45px;

background:white;

color:var(--gold);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

box-shadow:var(--shadow);

}





.contact-form{

background:white;

padding:40px;

border-radius:30px;

box-shadow:var(--shadow);

border:1px solid var(--border);

}



.form-group{

margin-bottom:20px;

}



.form-group input,
.form-group textarea{

width:100%;

padding:16px;

border-radius:15px;

border:1px solid var(--border);

font-family:inherit;

font-size:15px;

background:#faf8f3;

}



.form-group textarea{

height:140px;

resize:none;

}



.form-group input:focus,
.form-group textarea:focus{

outline:none;

border-color:var(--gold);

}



.submit-btn{

width:100%;

padding:17px;

border:none;

border-radius:50px;

background:var(--gold);

color:white;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.3s;

}



.submit-btn:hover{

transform:translateY(-5px);

}





/* =========================
FOOTER
========================= */


.footer{

background:#1c1c1c;

color:white;

padding:70px 0 30px;

}



.footer-container{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

}



.footer-col h4{

font-family:var(--font-title);

margin-bottom:20px;

}



.footer-col p,
.footer-col a{

color:#cfcfcf;

line-height:2;

}



.footer-bottom{

margin-top:50px;

padding-top:25px;

border-top:1px solid rgba(255,255,255,.15);

text-align:center;

color:#aaa;

}




/* =========================
WHATSAPP
========================= */


.whatsapp-btn{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

border-radius:50%;

background:#25d366;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

z-index:999;

box-shadow:0 10px 30px rgba(0,0,0,.2);

}





/* =========================
RESPONSIVE
========================= */


@media(max-width:1000px){


.hero-title{

font-size:55px;

}


.about-grid,
.architecture-box,
.contact-container{

grid-template-columns:1fr;

}



.projects-grid{

grid-template-columns:repeat(2,1fr);

}



.services-grid{

grid-template-columns:repeat(2,1fr);

}



.stats-grid{

grid-template-columns:repeat(2,1fr);

}



.reviews-grid{

grid-template-columns:1fr;

}


}



@media(max-width:700px){


.nav-menu{

display:none;

}



.hamburger{

display:block;

}



.hero-title{

font-size:40px;

}



.hero-actions{

flex-direction:column;

}



.projects-grid,
.services-grid,
.stats-grid,
.footer-container{

grid-template-columns:1fr;

}



.about-section,
.projects-section,
.services-section,
.contact,
.reviews-section{

padding:70px 0;

}



.architecture-box{

padding:30px;

}



}