/*
Theme Name: Ypsilon Core V11 NeoCommerce
Version: 11.0
Author: Yuksel Erol / ChatGPT
Description: Faster premium WooCommerce gaming theme.
*/

:root{
--bg:#f3f7fc;
--surface:#ffffff;
--surface2:#f8fafc;
--text:#0f172a;
--muted:#64748b;
--blue:#2563eb;
--green:#16a34a;
--purple:#7c3aed;
--red:#dc2626;
--shadow:0 14px 34px rgba(15,23,42,0.08);
--radius:22px;
}

*{box-sizing:border-box}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Inter,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}

.container{
width:min(1450px,92%);
margin:auto;
}

header{
position:sticky;
top:0;
z-index:999;
background:rgba(255,255,255,0.88);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(0,0,0,0.05);
}

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 0;
gap:20px;
}

.logo{
font-size:2rem;
font-weight:900;
letter-spacing:-1px;
}

.logo span{
background:linear-gradient(90deg,var(--green),var(--blue),var(--purple));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

nav ul{
display:flex;
gap:22px;
list-style:none;
margin:0;
padding:0;
}

nav a{
text-decoration:none;
font-weight:700;
color:var(--text);
transition:0.2s;
}

nav a:hover{
color:var(--blue);
}

.hero{
padding:110px 0 80px;
background:
radial-gradient(circle at top left,#dbeafe,transparent 30%),
radial-gradient(circle at bottom right,#dcfce7,transparent 25%),
linear-gradient(135deg,#f3f7fc,#ffffff);
overflow:hidden;
}

.hero-grid{
display:grid;
grid-template-columns:1.1fr 0.9fr;
gap:70px;
align-items:center;
}

.hero h1{
font-size:4.7rem;
line-height:0.92;
margin-bottom:24px;
letter-spacing:-3px;
}

.gradient{
background:linear-gradient(90deg,var(--blue),var(--green),var(--purple),var(--red));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
font-size:1.18rem;
color:var(--muted);
max-width:680px;
}

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

.btn{
display:inline-block;
padding:15px 28px;
border-radius:16px;
font-weight:800;
text-decoration:none;
transition:0.25s;
border:none;
cursor:pointer;
}

.primary{
background:linear-gradient(90deg,var(--blue),var(--green));
color:white;
box-shadow:var(--shadow);
}

.secondary{
background:white;
color:var(--text);
border:1px solid #dbe2ea;
}

.btn:hover{
transform:translateY(-4px);
}

.hero-image{
position:relative;
}

.hero-image img{
width:100%;
border-radius:30px;
display:block;
box-shadow:0 35px 70px rgba(0,0,0,0.15);
}

.floating-card{
position:absolute;
bottom:-20px;
left:-20px;
background:white;
padding:18px;
border-radius:18px;
box-shadow:var(--shadow);
font-weight:700;
}

.section{
padding:85px 0;
}

.section-title{
font-size:2.4rem;
margin-bottom:35px;
letter-spacing:-1px;
}

.category-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
}

.category{
background:white;
padding:24px;
border-radius:20px;
text-align:center;
font-weight:800;
box-shadow:var(--shadow);
transition:0.2s;
}

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

.shop-layout{
display:grid;
grid-template-columns:260px 1fr;
gap:30px;
}

.sidebar{
background:white;
padding:24px;
border-radius:22px;
box-shadow:var(--shadow);
height:fit-content;
position:sticky;
top:110px;
}

.filter-title{
font-size:1.2rem;
font-weight:900;
margin-bottom:20px;
}

.filter-item{
margin-bottom:12px;
font-weight:600;
}

.products-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:28px;
}

.product-card{
background:white;
border-radius:22px;
overflow:hidden;
box-shadow:var(--shadow);
transition:0.25s;
position:relative;
}

.product-card:hover{
transform:translateY(-6px);
}

.product-image{
aspect-ratio:1/1;
background:var(--surface2);
overflow:hidden;
}

.product-image img{
width:100%;
height:100%;
object-fit:contain;
padding:18px;
display:block;
transition:0.3s;
}

.product-card:hover .product-image img{
transform:scale(1.03);
}

.badge{
position:absolute;
top:16px;
left:16px;
background:linear-gradient(90deg,var(--blue),var(--purple));
color:white;
padding:7px 14px;
border-radius:999px;
font-size:0.78rem;
font-weight:800;
z-index:3;
}

.product-content{
padding:24px;
}

.product-title{
font-size:1.15rem;
font-weight:800;
margin-bottom:8px;
}

.product-specs{
font-size:0.93rem;
color:var(--muted);
min-height:48px;
}

.price{
font-size:1.7rem;
font-weight:900;
margin-top:14px;
}

.stock{
margin-top:10px;
font-weight:700;
}

.quick-actions{
display:flex;
gap:10px;
margin-top:18px;
flex-wrap:wrap;
}

.small-btn{
padding:10px 14px;
border-radius:12px;
background:#f1f5f9;
font-size:0.9rem;
font-weight:700;
text-decoration:none;
color:var(--text);
}

.banner{
margin-top:60px;
background:linear-gradient(90deg,var(--blue),var(--green));
padding:45px;
border-radius:28px;
color:white;
display:flex;
justify-content:space-between;
align-items:center;
gap:25px;
flex-wrap:wrap;
}

.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:22px;
margin-top:40px;
}

.feature{
background:white;
padding:24px;
border-radius:20px;
box-shadow:var(--shadow);
}

footer{
background:#0f172a;
color:#cbd5e1;
padding:70px 0;
margin-top:80px;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:30px;
}

footer a{
display:block;
color:#93c5fd;
text-decoration:none;
margin-bottom:10px;
}

@media(max-width:1050px){

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

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

.shop-layout{
grid-template-columns:1fr;
}

.sidebar{
position:relative;
top:auto;
}

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

nav ul{
gap:12px;
font-size:0.9rem;
flex-wrap:wrap;
}

.floating-card{
position:relative;
left:auto;
bottom:auto;
margin-top:20px;
}

}