@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root{
  --clr-primary:#c41e3a;
  --clr-primary-dark:#8b0000;
  --clr-accent:#ffd700;
  --clr-btn:#dc143c;
  --clr-btn-hover:#b30000;
  --clr-danger:#c40000;
  --clr-white:#ffffff;
  --clr-bg:#eef7ff;
  --page-bg: var(--clr-bg);
  --nav-accent:#ffd700;
  --text:#333333;
  --radius:10px;
  --container-width:1200px;
  --transition:0.3s;
  --box-shadow:0 5px 15px rgba(0,0,0,.1);
  --font-sans: 'Poppins', sans-serif;
  --max-hero-height:70vh;
}

html{font-size:16px}
@media (max-width:1200px){html{font-size:15px}}
@media (max-width:900px){html{font-size:14px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font-sans)}
/* page background follows --page-bg so we can override per-page easily */
body{background:var(--page-bg, var(--clr-bg));color:var(--text)}
a{text-decoration:none;color:var(--clr-primary)}

header{
background:var(--clr-primary);
color:var(--clr-white);
padding:20px 0;
}
.container{
width:90%;
max-width:1200px;
margin:auto;
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
}
nav ul{
list-style:none;
display:flex;
gap:20px;
}
nav ul li a{
color:#fff;
font-weight:600;
position:relative;
display:inline-block;
padding-bottom:4px;
transition:color .3s;
}

nav ul li a::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:2px;
background:var(--nav-accent);
transform:scaleX(0);
transform-origin:left center;
transition:transform .25s ease;
}

nav ul li a:hover{color:var(--nav-accent)}
nav ul li a:hover::after{transform:scaleX(1)}

nav ul li a.is-active{
color:var(--nav-accent);
}

nav ul li a.is-active::after{
transform:scaleX(1);
}

.nav-toggle{
display:none;
width:42px;
height:42px;
border:1px solid rgba(255,255,255,0.45);
border-radius:10px;
background:transparent;
cursor:pointer;
padding:9px 8px;
}

.nav-toggle span{
display:block;
height:2px;
width:100%;
background:#ffffff;
border-radius:999px;
transition:transform .2s ease, opacity .2s ease;
}

.nav-toggle span + span{
margin-top:6px;
}

nav.nav-open .nav-toggle span:nth-child(1){
transform:translateY(8px) rotate(45deg);
}

nav.nav-open .nav-toggle span:nth-child(2){
opacity:0;
}

nav.nav-open .nav-toggle span:nth-child(3){
transform:translateY(-8px) rotate(-45deg);
}

.hero{
height:var(--max-hero-height);
display:flex;
justify-content:center;
align-items:center;
text-align:center;
color:var(--clr-white);
padding:0 20px;
}
.hero h1{font-size:48px;margin-bottom:15px;line-height:1.2}
.hero p{font-size:20px;max-width:600px;margin:auto}

/* yeni hero layout */
.hero-content{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}
.hero-text{
  max-width:600px;
  text-align:left;
}
.hero-bullets{
  list-style:none;
  margin:20px 0;
  padding:0;
}
.hero-bullets li{
  margin-bottom:8px;
  font-size:15px;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}
.btn-secondary{
  background:rgba(255,255,255,0.15);
  color:#fff;
}
.btn-secondary:hover{
  background:rgba(255,255,255,0.3);
}
.hero-visual{
  position:relative;
  min-width:260px;
  max-width:320px;
}
.hero-badge{
  position:absolute;
  top:-20px;
  right:-10px;
  background:var(--clr-accent);
  color:#333;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
  box-shadow:var(--box-shadow);
  text-align:center;
}
.hero-badge span{
  display:block;
  font-size:16px;
}
.hero-badge small{
  font-size:11px;
  font-weight:600;
}
.hero-product-card{
  background:rgba(255,255,255,0.12);
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.25);
  margin-top:20px;
}
.hero-product-card strong{
  display:block;
  margin-bottom:8px;
}
.hero-product-card p{
  font-size:14px;
  max-width:none;
  margin:0;
}


section{padding:60px 0}
h2{text-align:center;color:var(--clr-primary);margin-bottom:40px;font-weight:600}

.products{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
}
.product{
background:var(--clr-white);
border-radius:var(--radius);
padding:20px;
box-shadow:var(--box-shadow);
text-align:center;
transition:transform var(--transition)
}
.product:hover{transform:translateY(-5px)}
.product img{
width:100%;
max-height:200px;
height:auto;
object-fit:contain;
border-radius:8px;
display:block;
margin:auto;
}
.product h3{margin:15px 0 10px;color:#c41e3a}
.gramaj{
margin:10px 0;
font-weight:bold;
color:#555;
}
.btn{
display:inline-block;
margin-top:15px;
padding:12px 20px;
background:var(--clr-btn);
color:var(--clr-white);
border-radius:30px;
font-weight:600;
transition:background var(--transition)
}
.btn:hover{background:var(--clr-btn-hover)}

.btn-whatsapp{
background:#25D366;
color:#ffffff;
}

.btn-whatsapp:hover{
background:#1ebe5d;
}

.contact a.btn-whatsapp,
.contact a.btn-whatsapp:hover{
color:#ffffff;
}

.about,.contact{
background:var(--clr-white);
padding:40px;
border-radius:var(--radius);
box-shadow:var(--box-shadow);
}

.contact-extra h3{
  margin-top:20px;
  color:#c41e3a;
}
.contact-extra p{
  margin-bottom:15px;
}
.contact-map{
  margin-top:15px;
  border-radius:10px;
  overflow:hidden;
}

/* about page extra sections */
.about-sections h3{
  margin-top:25px;
  color:#c41e3a;
}
.about-sections p{
  margin-bottom:15px;
  line-height:1.6;
}
.about-sections ul{
  list-style:disc inside;
  margin:10px 0 20px;
}

.contact p{
margin-bottom:15px;
font-size:16px;
}

.contact a{
color:#c41e3a;
font-weight:600;
}

footer{
background:var(--clr-primary-dark);
color:var(--clr-white);
text-align:center;
padding:20px 0;
margin-top:40px;
}

.whatsapp-fixed{
  position:fixed;
  right:20px;
  bottom:20px;
  background:#25D366;
  color:#ffffff;
  padding:12px 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  box-shadow:var(--box-shadow);
  z-index:999;
}

.whatsapp-fixed:hover{
  background:#1ebe5d;
}

.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:30px;
}
.feature-card{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.1);
text-align:center;
}
.feature-card i{
font-size:40px;
color:var(--clr-primary);
margin-bottom:15px;
}
.feature-card h3{
color:#333;
margin-bottom:10px;
}
.feature-card p{
color:#666;
font-size:14px;
}

.stats{
background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-primary-dark) 100%);
color:var(--clr-white);
padding:60px 0;
margin:40px 0;
}
.stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:40px;
text-align:center;
}
.stat-item h3{
font-size:36px;
font-weight:bold;
margin-bottom:10px;
}
.stat-item p{
font-size:16px;
}

.services{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin-top:30px;
}
.service-card{
background:var(--clr-white);
padding:30px;
border-radius:var(--radius);
box-shadow:var(--box-shadow);
border-left:5px solid var(--clr-primary);
}
.service-card h3{
color:#c41e3a;
margin-bottom:15px;
font-size:18px;
}
.service-card p{
color:#666;
line-height:1.6;
}

.testimonials{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
margin-top:30px;
}

.categories{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin-top:30px;
}
.category-card{
background:#fff;
padding:20px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.1);
text-align:center
}

/* FAQ accordion */
.faq{
max-width:800px;
margin:0 auto;
}
.faq-item{
border-bottom:1px solid #ddd;
}
.faq-question{
padding:15px;
cursor:pointer;
position:relative;
font-weight:600;
}
.faq-question::after{
content:"+";
position:absolute;
right:20px;
font-size:18px;
}
.faq-answer{
display:none;
padding:0 15px 15px;
color:#555;
}

/* newsletter */
.newsletter{
background:var(--clr-primary);
color:var(--clr-white);
padding:40px 0;
}
.newsletter form{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}
.newsletter input[type=email]{
padding:12px 15px;
border:0;
border-radius:5px;
width:250px;
}
.newsletter button{
padding:12px 25px;
border:0;
border-radius:5px;
background:#ffd700;
color:#c41e3a;
font-weight:600;
cursor:pointer;
transition:background .3s;
}
.newsletter button:hover{background:#e6c200}

.category-card h3{
color:var(--clr-danger);
margin-top:10px;
font-size:16px
}
.category-card i{
font-size:36px;
color:var(--clr-danger)
}
.testimonial-card{
background:#fff;
padding:30px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,.1)
}
.testimonial-card .stars{
color:#ffc107;
font-size:14px;
margin-bottom:15px
}
.testimonial-card p{
color:#666;
font-style:italic;
margin-bottom:15px;
line-height:1.6
}
.testimonial-card .author{
font-weight:bold;
color:#333
}
.testimonial-card .company{
font-size:12px;
color:#999
}

/* Ürünler sayfası ana bölüm kartı - (kullanılmıyor, sade arka plan tercih edildi) */

/* Sipariş süreci adımları */
.steps-section{
  background:#ffffff;
  padding:60px 0;
}
.steps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px;
  margin-top:25px;
}
.step-card{
  background:#f5f8ff;
  border-radius:12px;
  padding:24px 22px;
  box-shadow:var(--box-shadow);
}
.step-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#c41e3a;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  margin-bottom:10px;
}
.step-card h3{
  color:#c41e3a;
  font-size:16px;
  margin-bottom:8px;
}
.step-card p{
  font-size:14px;
  color:#555;
  line-height:1.6;
}

@media(max-width:768px){
.hero h1{font-size:32px}
}

/* Helper background classes you can add to <body> for per-page styles */
.bg-gradient{
  --page-bg: linear-gradient(135deg, rgba(196,30,58,0.08) 0%, rgba(139,0,0,0.06) 100%);
  --nav-accent:#ffe08c;
}
.bg-pattern{
  --page-bg: url('img/clean/1.png') center/cover no-repeat fixed;
  --nav-accent:#fff4b5;
}
.bg-soft{
  --page-bg: linear-gradient(180deg, #f3f8ff 0%, #eef7ff 100%);
  --nav-accent:#ffd87a;
}
.bg-home{
  --page-bg:
    radial-gradient(circle at top left, rgba(196,30,58,0.16) 0, transparent 55%),
    radial-gradient(circle at bottom right, rgba(196,0,0,0.14) 0, transparent 55%),
    linear-gradient(180deg, #f5f9ff 0%, #eef5ff 40%, #e7f4ff 100%);
  --nav-accent:#ffd54f;
}
/* navbar brand / logo */
.nav-brand{display:flex;align-items:center;gap:12px}
.logo{height:48px;width:auto;display:block;border-radius:6px}
@media(max-width:768px){.logo{height:40px}}
/* site title styling when not using h1 in navbar */
.site-title{font-weight:700;color:var(--clr-white);font-size:1rem}
.bg-hero{
  --page-bg: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02));
  --nav-accent:#ffe082;
}

/* Ensure content contrasts with backgrounds */
main, section, .container{background:transparent}

/* media assets should never overflow on small screens */
img,
iframe{
  max-width:100%;
}

.contact-map iframe{
  width:100%;
  height:300px;
  border:0;
}

@media (max-width:1024px){
  .hero{
    height:auto;
    min-height:55vh;
    padding:48px 18px;
  }

  .hero-content{
    gap:24px;
  }

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

  .hero p{
    font-size:1.05rem;
  }

  .about,
  .contact{
    padding:30px;
  }
}

@media (max-width:768px){
  header{
    padding:14px 0;
  }

  .container{
    width:92%;
  }

  nav{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
  }

  .nav-toggle{
    display:block;
  }

  .nav-menu{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:6px;
    margin-top:8px;
    padding-left:0;
    border-top:1px solid rgba(255,255,255,0.22);
    padding-top:12px;
    max-height:0;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    transform:translateY(-6px);
    transition:max-height .28s ease, opacity .24s ease, transform .24s ease;
  }

  nav.nav-open .nav-menu{
    max-height:320px;
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }

  .nav-menu li a{
    display:block;
    padding:8px 0;
  }

  .nav-menu li a::after{
    width:28px;
  }

  .nav-menu li{
    opacity:0;
    transform:translateY(-4px);
    transition:opacity .24s ease, transform .24s ease;
  }

  nav.nav-open .nav-menu li{
    opacity:1;
    transform:translateY(0);
  }

  nav.nav-open .nav-menu li:nth-child(1){transition-delay:.03s}
  nav.nav-open .nav-menu li:nth-child(2){transition-delay:.06s}
  nav.nav-open .nav-menu li:nth-child(3){transition-delay:.09s}
  nav.nav-open .nav-menu li:nth-child(4){transition-delay:.12s}

  .hero{
    min-height:auto;
    padding:40px 0;
  }

  .hero-content{
    flex-direction:column;
    align-items:stretch;
    gap:20px;
  }

  .hero-text{
    max-width:none;
    text-align:center;
  }

  .hero-bullets{
    text-align:left;
    margin:16px 0;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .hero-actions .btn{
    width:100%;
    text-align:center;
  }

  .hero-visual{
    min-width:0;
    max-width:none;
    width:100%;
  }

  .hero-badge{
    position:static;
    display:inline-block;
    margin-bottom:10px;
  }

  h2{
    margin-bottom:26px;
  }

  section,
  .stats,
  .how-order,
  section[style*="padding:60px 0"]{
    padding:40px 0 !important;
  }

  .products,
  .features,
  .services,
  .testimonials,
  .categories,
  .steps-grid,
  .stats-grid,
  .motto-grid,
  .about-grid,
  .gallery-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .about,
  .contact,
  .feature-card,
  .service-card,
  .step-card,
  .product{
    padding:20px;
  }

  .stat-item h3{
    font-size:1.9rem;
  }

  .contact-map iframe{
    height:240px;
  }

  .whatsapp-fixed{
    right:12px;
    bottom:12px;
    padding:10px 14px;
    font-size:12px;
    max-width:calc(100vw - 24px);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}

@media (max-width:480px){
  html{
    font-size:14px;
  }

  .site-title{
    font-size:0.95rem;
  }

  .nav-menu{
    gap:8px 12px;
  }

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

  .hero p,
  .contact p,
  .about p{
    font-size:0.98rem;
  }

  .btn{
    padding:11px 16px;
  }

  .contact-map iframe{
    height:210px;
  }
}