:root{
  --bg:#ffffff;
  --card:#f7f9fb;
  --text:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --accent:#2e7d32;
  --accent-2:#95c79f;
  --shadow:0 10px 25px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background:var(--bg); color:var(--text); line-height:1.6}
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 20px}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font:inherit}

/* Topbar (kayan yazı) */
.topbar{position:sticky; top:0; z-index:2200; background:#0f2a17; color:#e7f4ea; border-bottom:1px solid #0b1a10}
.topbar .container{display:flex; align-items:center; gap:12px; min-height:40px}
.topbar .marquee{overflow:hidden; flex:1}
.topbar .track{display:inline-flex; gap:60px; white-space:nowrap; will-change:transform; animation:topbar-scroll 25s linear infinite}
.topbar:hover .track{animation-play-state:paused}
.topbar .close{background:transparent; border:none; color:#e7f4ea; font-size:20px; line-height:1; cursor:pointer; padding:4px 8px; border-radius:8px}
.topbar .close:hover{background:rgba(255,255,255,.1)}
@keyframes topbar-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Header */
header.site-header{position:sticky; top:0; z-index:2100; background:#fff; border-bottom:1px solid var(--line); backdrop-filter:saturate(180%) blur(6px)}
body.has-topbar header.site-header{ top:40px }
.navbar{display:flex; align-items:center; justify-content:space-between; height:70px}
.navbar .logo{display:flex; align-items:center; gap:10px}
.navbar .logo img{height:32px; width:auto}
.navbar .logo .brand{display:none} /* single logo on desktop */
.nav-links{display:flex; align-items:center; gap:24px}
.nav-links a{padding:8px 10px; border-radius:10px; transition:.2s}
.nav-links a:hover{background:var(--card)}

.hamburger{display:none; width:42px; height:42px; border:1px solid var(--line); background:#fff; border-radius:12px; align-items:center; justify-content:center; cursor:pointer}
.hamburger span{display:block; width:22px; height:2px; background:#1f2937; margin:3px 0; border-radius:2px; transition:.3s}

.mobile-menu{display:none}
.hero{position:relative; min-height:70vh; display:grid; place-items:center; color:#fff;
  background-image: linear-gradient(rgba(30, 62, 40, .35), rgba(30,62,40,.35)), url('../img/hero.jpg');
  background-size:cover; background-position:center; background-repeat:no-repeat}
.hero .inner{text-align:center; padding:80px 20px}
.hero h1{font-size:clamp(28px, 5vw, 54px); margin:0 0 14px; text-shadow:0 10px 25px rgba(0,0,0,.2)}
.hero p{font-size:clamp(16px, 2.2vw, 20px); opacity:.95; max-width:720px; margin:0 auto 24px}
.cta{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; background:var(--accent); color:#fff; border:none; border-radius:14px; box-shadow:var(--shadow)}
.cta:hover{filter:brightness(1.08)}

.section{padding:64px 0}
.section h2{font-size:clamp(22px, 3.6vw, 34px); margin:0 0 12px}
.section .lead{color:var(--muted); margin-bottom:28px}

.grid{display:grid; gap:22px}
.grid.products{grid-template-columns: repeat(3, 1fr)}
.grid.blog{grid-template-columns: repeat(3, 1fr)}
.grid.testimonials{grid-template-columns: repeat(3, 1fr)}
.grid.usage{grid-template-columns: repeat(3, 1fr)}

.card{background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow)}
.card .content{padding:16px 16px 18px}
.card picture{display:block}
.card picture img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block}
.badge{display:inline-block; background:#fff; border:1px solid var(--line); padding:6px 10px; border-radius:999px; font-size:12px; color:var(--muted)}

.product-actions{display:flex; gap:10px; align-items:center; margin-top:10px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--line); background:#fff; border-radius:12px; cursor:pointer}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent}
.btn.ghost{background:#fff}
.btn:hover{transform:translateY(-1px)}

/* Quick category chips */
.quick-cats{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 4px}
.chip{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line); background:#fff; border-radius:999px; font-weight:600}
.chip small{color:var(--muted); font-weight:400}

/* FAQ */
.faq .item{border:1px solid var(--line); border-radius:16px; margin-bottom:12px; background:#fff}
.faq .q{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; cursor:pointer}
.faq .a{padding:0 16px; height:0; overflow:hidden; transition:height .3s ease}
.faq .item.open .a{padding:12px 16px 18px}

/* Testimonials */
.testimonial{padding:18px}
.testimonial p{margin:0 0 10px}
.testimonial .who{color:var(--muted); font-size:14px}

/* Process */
.process{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.step{background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px}
.step .num{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:#fff; font-weight:700; margin-bottom:8px}

/* USPs */
.usps{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
.usp{display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px}
.usp .icon{width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:#e6f0e8}

/* Logistics */
.logistics{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.logi{background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px}

/* Newsletter bar */
.newsletter{background:#eef6ef; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0}
.newsletter .wrap{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.newsletter h3{margin:0}
.newsletter form{display:flex; gap:10px; align-items:center}
.newsletter input[type="email"]{padding:10px 12px; border:1px solid var(--line); border-radius:12px; min-width:240px}
.newsletter button{padding:10px 16px; border-radius:12px; border:1px solid var(--line)}

/* Footer */
footer.site-footer{background:#0b1a10; color:#cde0d2; padding:40px 0; margin-top:0}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:26px}
footer a{color:#e7f4ea}
.copy{border-top:1px solid rgba(255,255,255,.12); margin-top:22px; padding-top:18px; font-size:14px; color:#a7c1b0}

/* Floating WhatsApp */
.whatsapp-float{position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:16px; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:var(--shadow); z-index:2200}

/* Brands auto-carousel */
.brands{overflow:hidden}
.brands .marquee2{overflow:hidden}
.brands .track{display:inline-flex; gap:34px; align-items:center; white-space:nowrap; will-change:transform; animation:brands-scroll 28s linear infinite}
.brands:hover .track{animation-play-state:paused}
@keyframes brands-scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* Filters (products) */
.filters{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:18px 0 22px}
.filters .search{flex:1; min-width:240px; max-width:420px}
.filters .search input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:12px}
.filters .filter-btns{display:flex; gap:8px; flex-wrap:wrap}
.fbtn{padding:8px 12px; border:1px solid var(--line); background:#fff; border-radius:999px; cursor:pointer; font-weight:600}
.fbtn.active{background:var(--accent); color:#fff; border-color:transparent}
.hidden{display:none !important}

/* Stats strip */
.stats{background:#fbfdfa; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 0}
.stats .grid{grid-template-columns: repeat(3, 1fr)}
.stat{background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px; text-align:center}
.stat .num{font-size:28px; font-weight:800}
.stat .label{color:var(--muted)}

/* Back to top */
#toTop{position:fixed; right:18px; bottom:90px; width:42px; height:42px; border-radius:12px; display:none; align-items:center; justify-content:center; background:#0f2a17; color:#e7f4ea; border:1px solid #0b1a10; z-index:2300}
#toTop.show{display:grid}

/* Mobile Bottom Bar */
.mobile-bottombar{position:fixed; left:0; right:0; bottom:0; background:#0f2a17; color:#e7f4ea; border-top:1px solid #0b1a10; display:none; z-index:2400; padding: max(8px, env(safe-area-inset-bottom));}
.mobile-bottombar .wrap{display:flex; gap:10px; align-items:center; justify-content:space-between; padding:4px 16px}
.mobile-bottombar .btnb{flex:1; display:flex; justify-content:center; align-items:center; gap:8px; padding:12px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#183a22; color:#e7f4ea; font-weight:600}
.mobile-bottombar .btnb.primary{background:#25D366; color:#0b1a10; border-color:#25D366}
.mobile-bottombar .btnb:active{transform:scale(.98)}

/* Responsive */
@media (max-width: 991px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .mobile-menu{position:fixed; inset:70px 0 0 0; background:#fff; border-top:1px solid var(--line); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.2s; padding:12px 18px; z-index:2300; height:calc(100vh - 70px); overflow:auto; display:block !important}
  body.has-topbar .mobile-menu{ inset:110px 0 0 0 } /* 40(topbar)+70(header) */
  .mobile-menu.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .mobile-menu a{display:block; padding:12px 6px; border-bottom:1px dashed var(--line)}
  .grid.products, .grid.blog, .grid.testimonials, .grid.usage {grid-template-columns: 1fr 1fr}
  .process{grid-template-columns:1fr}
  .usps{grid-template-columns: 1fr 1fr}
  .logistics{grid-template-columns:1fr}
  body.has-bottombar .mobile-bottombar{display:block}
  body.has-bottombar .whatsapp-float{display:none}
  body.has-bottombar{padding-bottom:80px}
  #toTop{ bottom:120px }
}
@media (max-width: 599px){
  .grid.products, .grid.blog, .grid.testimonials, .grid.usage {grid-template-columns: 1fr}
  .usps{grid-template-columns:1fr}
  .newsletter .wrap{flex-direction:column; align-items:stretch}
  .newsletter form{width:100%}
  .newsletter input[type="email"]{flex:1}
}


/* === Product Detail responsive tweaks === */
.detail-grid{grid-template-columns:1.2fr 1fr; gap:28px}
.detail-gallery picture img{aspect-ratio:4/3; object-fit:cover; width:100%; height:auto; display:block; border-radius:14px}
@media (max-width: 991px){
  .detail-grid{grid-template-columns:1fr !important; gap:16px}
  .detail-gallery picture img{aspect-ratio:16/9}
}


/* === Dropdown (Kurumsal) === */
.nav-links .dropdown{position:relative}
.nav-links .dropdown > a{display:inline-flex; align-items:center; gap:6px}
.nav-links .dropdown .menu{position:absolute; top:100%; left:0; min-width:240px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:8px; display:none}
.nav-links .dropdown:hover .menu{display:block}
.nav-links .dropdown .menu a{display:block; padding:10px 12px; border-radius:10px}
.nav-links .dropdown .menu a:hover{background:var(--card)}

@media (max-width: 991px){
  .mobile-menu .dropdown-title{margin-top:8px; font-weight:700; opacity:.8}
  .mobile-menu .submenu a{padding-left:12px}
}


/* === Mobile menu: Kurumsal accordion === */
.mobile-menu .corp-group{border-top:1px dashed var(--line); margin-top:8px; padding-top:8px}
.mobile-menu .accordion-toggle{display:flex; width:100%; align-items:center; justify-content:space-between; padding:12px 6px; background:transparent; border:none; font-weight:400; cursor:pointer}
.mobile-menu .accordion-toggle .sign{font-weight:900; font-size:18px; line-height:1}
.mobile-menu .submenu{margin:0 0 8px 0}
.mobile-menu .submenu a{padding-left:14px}
.mobile-menu .corp-group .submenu{max-height:0; overflow:hidden; transition:max-height .25s ease}
.mobile-menu .corp-group.open .submenu{max-height:400px}


/* === Full-bleed utility for hero/slider === */
.full-bleed{width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw)}
.hero .slider{width:100%}
.hero .slides{width:100%}
.hero .slide{width:100%; min-height:70vh; background-size:cover; background-position:center}

/* Minor: make slider text readable on small screens */
@media (max-width: 768px){
  .hero .slide .inner h1{font-size:28px}
  .hero .slide .inner p{font-size:16px}
}


/* === Mobile topbar size tweak === */
@media (max-width: 768px){
  .topbar{font-size:14px}
  .topbar .track span{padding-right:24px}
}
@media (max-width: 420px){
  .topbar{font-size:14px}
}


/* === Mobile menu behavior (open class) === */
@media (max-width: 991px){
  .mobile-menu{display:none}
  .mobile-menu.open{display:block}
  body.menu-open{overflow:hidden}
}


/* === Mobile menu overlay & z-index fix === */
@media (max-width: 991px){
  .mobile-menu{
    position: fixed;
    inset: 0;
    background: #fff;
    padding: 88px 16px 24px; /* space for header */
    display: none;
    overflow: auto;
    z-index: 9999;
  }
  .mobile-menu.open{ display:block }
  .hamburger{ position: relative; z-index: 10000; }
  body.menu-open{ overflow: hidden; }
}


/* === Mobile Kurumsal accordion (<details>) === */
.mobile-menu details.corp-group{border-top:1px dashed var(--line); margin-top:8px; padding-top:8px}
.mobile-menu details.corp-group > summary{list-style:none; display:flex; width:100%; align-items:center; justify-content:space-between; padding:12px 6px; cursor:pointer}
.mobile-menu details.corp-group > summary::-webkit-details-marker{display:none}
.mobile-menu .corp-toggle .sign{font-weight:900; font-size:18px; line-height:1}
.mobile-menu details.corp-group .submenu{max-height:0; overflow:hidden; transition:max-height .25s ease}
.mobile-menu details.corp-group[open] .submenu{max-height:440px}
.mobile-menu details.corp-group .submenu a{padding-left:14px; display:block}

@media (max-width: 768px){ .topbar{font-size:12px} }