/*
|--------------------------------------------------------------------------
| DEMİRAY TECH
| GLOBAL STYLE CSS
|--------------------------------------------------------------------------
*/


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


html{
scroll-behavior:smooth;
}


body{

font-family:
"Inter",
"Segoe UI",
Arial,
sans-serif;

font-size:16px;

line-height:1.8;

color:#E8EDF7;

background:
radial-gradient(circle at top left,rgba(212,175,55,.08),transparent 30%),
linear-gradient(180deg,#08111F,#0B1220 50%,#101A2E);

min-height:100vh;

overflow-x:hidden;

}



body::before{

content:"";

position:fixed;

inset:0;

background-image:

linear-gradient(
rgba(255,255,255,.03) 1px,
transparent 1px
),

linear-gradient(
90deg,
rgba(255,255,255,.03) 1px,
transparent 1px
);

background-size:40px 40px;

opacity:.15;

pointer-events:none;

}



header,
main,
footer,
section{

position:relative;

z-index:1;

}



a{

text-decoration:none;

color:inherit;

}


img{

max-width:100%;

display:block;

}




:root{

--gold:#D4AF37;

--gold-light:#E8C65B;

--dark:#0B1220;

--card:rgba(255,255,255,.06);

--border:rgba(255,255,255,.10);

--container:1380px;

}





.container{

width:min(90%,var(--container));

margin:auto;

}





/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/


.site-header{

height:90px;

background:

rgba(5,10,18,.75);

backdrop-filter:blur(15px);

border-bottom:

1px solid rgba(255,255,255,.08);

position:sticky;

top:0;

z-index:999;

}



.site-header.scrolled{

background:

rgba(5,10,18,.95);

box-shadow:

0 10px 30px rgba(0,0,0,.25);

}



.header-container{

height:100%;

display:flex;

align-items:center;

justify-content:space-between;

}



.logo img{

width:190px;

}



.main-menu{

display:flex;

gap:30px;

}



.main-menu a{

font-size:15px;

font-weight:600;

color:#fff;

transition:.3s;

position:relative;

}



.main-menu a:hover,
.main-menu a.active{

color:var(--gold);

}



.main-menu a.active::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

height:2px;

width:100%;

background:var(--gold);

}



.header-contact{

display:flex;

align-items:center;

gap:25px;

}



.header-contact span{

font-size:12px;

color:#aaa;

display:block;

}



.header-contact strong{

color:#fff;

}



.btn-primary{

background:

linear-gradient(
135deg,
#D4AF37,
#B98C14
);

color:#fff;

padding:14px 30px;

border-radius:8px;

font-weight:700;

display:inline-flex;

align-items:center;

justify-content:center;

transition:.3s;

}



.btn-primary:hover{

transform:translateY(-3px);

}



.btn-outline{

padding:14px 30px;

border-radius:8px;

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

color:var(--gold);

font-weight:700;

transition:.3s;

}



.btn-outline:hover{

background:var(--gold);

color:#fff;

}



.mobile-menu{

display:none;

background:none;

border:0;

font-size:28px;

color:#fff;

}





/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/


.hero{

min-height:720px;

display:flex;

align-items:center;

background:

linear-gradient(
90deg,
rgba(5,10,20,.95),
rgba(10,20,35,.7)
),

url("/assets/images/hero-bg.jpg");

background-size:cover;

background-position:center;

}



.hero h1{

font-size:60px;

line-height:1.15;

max-width:850px;

margin-bottom:30px;

}



.hero p{

font-size:19px;

max-width:750px;

color:#CBD5E1;

margin-bottom:40px;

}





/*
|--------------------------------------------------------------------------
| TITLES
|--------------------------------------------------------------------------
*/


.section-title{

text-align:center;

margin-bottom:55px;

}



.section-title h2{

font-size:42px;

color:#fff;

margin-bottom:15px;

}



.section-title p{

color:#B7C2D2;

font-size:18px;

}





/*
|--------------------------------------------------------------------------
| CARDS
|--------------------------------------------------------------------------
*/


.solutions,
.why-us,
.service-area,
.solution-detail{

padding:90px 0;

}



.solution-grid,
.why-grid{

display:grid;

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

gap:25px;

}



.solution-card,
.why-card{

background:

var(--card);

border:

1px solid var(--border);

border-radius:16px;

padding:35px;

backdrop-filter:blur(10px);

transition:.3s;

opacity:0;

transform:translateY(30px);

}



.solution-card.show,
.why-card.show{

opacity:1;

transform:translateY(0);

}



.solution-card:hover,
.why-card:hover{

transform:translateY(-8px);

border-color:var(--gold);

}



.solution-card h3,
.why-card h3{

color:#fff;

margin-bottom:15px;

}



.solution-card p,
.why-card p{

color:#B7C2D2;

}





/*
|--------------------------------------------------------------------------
| SOLUTION DETAIL
|--------------------------------------------------------------------------
*/


.solution-layout{

display:grid;

grid-template-columns:1fr 330px;

gap:50px;

}



.solution-main{

background:

rgba(255,255,255,.04);

border:

1px solid var(--border);

border-radius:18px;

padding:40px;

}



.solution-main h2{

font-size:38px;

color:#fff;

margin-bottom:30px;

}



.solution-main h3{

font-size:26px;

color:#fff;

margin:40px 0 20px;

}



.solution-main p{

color:#C4CEDD;

font-size:17px;

line-height:2;

}



.feature-list{

display:grid;

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

gap:15px;

}



.feature-list li{

background:

rgba(255,255,255,.06);

border:

1px solid var(--border);

padding:18px;

border-radius:10px;

}





.solution-sidebar{

background:

rgba(255,255,255,.05);

border:

1px solid var(--border);

padding:30px;

border-radius:16px;

}



.solution-sidebar h3{

color:#fff;

margin-bottom:20px;

}



.solution-sidebar a{

display:block;

padding:12px 0;

border-bottom:

1px solid rgba(255,255,255,.1);

color:#C4CEDD;

}





.solution-image{

margin-top:30px;

border-radius:15px;

overflow:hidden;

}





/*
|--------------------------------------------------------------------------
| CONTACT
|--------------------------------------------------------------------------
*/


.contact-form{

display:flex;

flex-direction:column;

gap:20px;

margin-top:30px;

}



.form-group{

display:flex;

flex-direction:column;

gap:8px;

}



.form-group label{

color:#fff;

font-weight:600;

}



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

padding:16px;

background:

rgba(255,255,255,.06);

border:

1px solid var(--border);

border-radius:10px;

color:#fff;

}



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

outline:none;

border-color:var(--gold);

}





.map-box{

height:450px;

border-radius:18px;

overflow:hidden;

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

}



.map-box iframe{

width:100%;

height:100%;

border:0;

}





/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/


.cta{

padding:80px 0;

background:#070D18;

text-align:center;

}



.cta h2{

font-size:38px;

color:#fff;

margin-bottom:30px;

}





/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/


.footer{

background:#050A12;

padding-top:70px;

}



.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:40px;

}



.footer-logo{

width:190px;

margin-bottom:20px;

}



.footer h3{

color:#fff;

margin-bottom:20px;

}



.footer p,
.footer a{

color:#AEB8C7;

}



.footer-bottom{

margin-top:50px;

padding:20px;

text-align:center;

border-top:

1px solid rgba(255,255,255,.1);

color:#888;

}





/*
|--------------------------------------------------------------------------
| 404 PAGE
|--------------------------------------------------------------------------
*/


.error-page{

min-height:75vh;

display:flex;

align-items:center;

justify-content:center;

padding:80px 0;

}



.error-box{

max-width:700px;

margin:auto;

text-align:center;

padding:60px 40px;

background:

rgba(255,255,255,.05);

border:

1px solid var(--border);

border-radius:20px;

}



.error-box h1{

font-size:120px;

line-height:1;

color:var(--gold);

margin-bottom:20px;

}



.error-box h2{

font-size:35px;

color:#fff;

margin-bottom:20px;

}



.error-box p{

color:#B7C2D2;

font-size:18px;

margin-bottom:35px;

}



.error-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}





/*
|--------------------------------------------------------------------------
| MOBILE MENU
|--------------------------------------------------------------------------
*/


@media(max-width:992px){


.mobile-menu{

display:block;

}


.main-menu{

position:absolute;

top:90px;

left:0;

right:0;

background:

rgba(5,10,18,.98);

display:flex;

flex-direction:column;

padding:20px;

opacity:0;

visibility:hidden;

transform:translateY(-15px);

transition:.3s;

}



.main-menu.open{

opacity:1;

visibility:visible;

transform:translateY(0);

}



.solution-grid,
.why-grid{

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

}



.solution-layout{

grid-template-columns:1fr;

}



.footer-grid{

grid-template-columns:1fr 1fr;

}


}




@media(max-width:600px){


.hero h1{

font-size:36px;

}



.solution-grid,
.why-grid,
.footer-grid,
.feature-list{

grid-template-columns:1fr;

}



.error-box h1{

font-size:80px;

}



.map-box{

height:300px;

}


}