:root{
  --bg:#fffdf7;
  --text:#1b1b1b;
  --muted:#5b5b5b;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.10);
  --shadow2: 0 6px 18px rgba(0,0,0,.12);
  --brand1:#23c55e;
  --brand2:#f97316;
  --brand3:#eab308;
  --brand4:#ef4444;
  --radius: 18px;
  --radius2: 26px;
  --max: 1180px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,"Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--text); overflow-x:hidden;}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 16px;}
.topbar{background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff; font-weight:700; font-size:14px;}
.topbar .row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.18); padding:6px 10px; border-radius:999px; backdrop-filter: blur(6px);}
.badge svg{width:16px;height:16px}
header{position:sticky; top:0; z-index:50; background:rgba(255,253,247,.92); backdrop-filter: blur(10px); border-bottom:1px solid rgba(0,0,0,.06)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:10px}
.brand{display:flex; align-items:center; gap:10px; min-width:220px}
.brand img{width:42px;height:42px;border-radius:12px; box-shadow: var(--shadow2); object-fit:cover}
.brand strong{font-size:18px; letter-spacing:.2px}
.brand span{display:block; font-size:12px; color:var(--muted); margin-top:2px}
.navlinks{display:flex; align-items:center; gap:18px; font-weight:900}
.navlinks a{padding:10px 10px; border-radius:12px}
.navlinks a:hover{background:rgba(0,0,0,.05)}
.navright{display:flex; align-items:center; gap:10px}
.search{display:flex; align-items:center; gap:8px; background:#fff; border:1px solid rgba(0,0,0,.10); border-radius:999px; padding:10px 12px; box-shadow: 0 6px 16px rgba(0,0,0,.06); min-width:280px;}
.search input{border:0; outline:none; width:100%; font-size:14px; background:transparent}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; cursor:pointer; font-weight:900; padding:12px 14px; border-radius:999px; box-shadow: var(--shadow2);}
.btn-primary{background:linear-gradient(90deg,var(--brand2),var(--brand3)); color:#1f1f1f;}
.btn-primary:hover{filter:saturate(1.05) brightness(1.02)}
.btn-ghost{background:#fff; border:1px solid rgba(0,0,0,.12); color:#111}
.btn-ghost:hover{background:rgba(0,0,0,.04)}
.hamburger{display:none; background:#fff; border:1px solid rgba(0,0,0,.12); border-radius:14px; padding:10px; box-shadow: 0 6px 16px rgba(0,0,0,.06)}
.hamburger svg{width:22px;height:22px}
.mobilemenu{display:none; padding:10px 0 14px 0}
.mobilemenu a{display:block; padding:12px 10px; border-radius:14px; font-weight:900}
.mobilemenu a:hover{background:rgba(0,0,0,.05)}
.hero{padding:18px 0 0 0}
.heroGrid{display:grid; grid-template-columns: 1.15fr .85fr; gap:16px; align-items:stretch}
.heroCard{background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(249,115,22,.12)); border:1px solid rgba(0,0,0,.06); border-radius: var(--radius2); overflow:hidden; box-shadow: var(--shadow);}
.heroInner{padding:22px}
.kicker{display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px dashed rgba(0,0,0,.20); padding:8px 12px; border-radius:999px; font-weight:950}
.h1{font-size:40px; line-height:1.05; margin:14px 0 10px 0}
.h1 b{background:linear-gradient(90deg,var(--brand1),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{font-size:16px; color:var(--muted); line-height:1.5; max-width:56ch; font-weight:650}
.heroActions{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px}
.heroBanner{position:relative; border-radius: var(--radius2); overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(0,0,0,.06)}
.heroBanner img{width:100%; height:100%; object-fit:cover; transform: scale(1.02)}

/* Banner alanı: mobilde mevcut yerleşimi korur, masaüstünde tek banner gibi soldan-sağa akar */
.grid2{height:100%; overflow:hidden}
.bannerTrack{display:grid; grid-template-columns:1fr 1fr; gap:12px; height:100%}
.mini{position:relative; border-radius: var(--radius2); overflow:hidden; box-shadow: var(--shadow); border:1px solid rgba(0,0,0,.06)}
.mini img{width:100%; height:100%; object-fit:cover}
.section{padding:28px 0}
.sectionTitle{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:12px}
.sectionTitle h2{font-size:26px; margin:0}
.sectionTitle p{margin:0; color:var(--muted); font-weight:700}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{padding:10px 12px; border-radius:999px; border:1px solid rgba(0,0,0,.10); background:#fff; font-weight:950; cursor:pointer}
.tab.active{background:linear-gradient(90deg,var(--brand1),var(--brand2)); border-color:transparent; color:#fff}
.products{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:14px}
.card{background:var(--card); border:1px solid rgba(0,0,0,.08); border-radius: var(--radius); overflow:hidden; box-shadow: 0 8px 20px rgba(0,0,0,.06);}
.cardTop{padding:12px; background:linear-gradient(135deg, rgba(234,179,8,.14), rgba(34,197,94,.10)); border-bottom:1px solid rgba(0,0,0,.06)}
.pimg{aspect-ratio: 4/3; border-radius: 14px; overflow:hidden; background:#f4f4f4; border:1px solid rgba(0,0,0,.08)}
.pimg img{width:100%; height:100%; object-fit:cover}
.cardBody{padding:12px}
.pname{font-weight:950; margin:0; font-size:15px}
.pcat{margin:6px 0 0 0; color:var(--muted); font-weight:800; font-size:12px}
.priceRow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px}
.price{font-size:18px; font-weight:1000}
.add{flex:1; padding:10px 12px; border-radius:14px}
.highlights{display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px}
.hitem{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: var(--radius); padding:14px; box-shadow: 0 8px 20px rgba(0,0,0,.06);}
.hitem b{display:block; margin-bottom:6px}
.hitem p{margin:0; color:var(--muted); font-weight:700; line-height:1.45}
.testimonials{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px}
.tcard{
  background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(249,115,22,.10));
  border: 1px solid rgba(34,197,94,.22);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.tcard:nth-child(2){
  background: linear-gradient(135deg, rgba(249,115,22,.12), rgba(234,179,8,.12));
  border-color: rgba(249,115,22,.22);
}
.tcard:nth-child(3){
  background: linear-gradient(135deg, rgba(234,179,8,.14), rgba(34,197,94,.10));
  border-color: rgba(234,179,8,.24);
}
.stars{letter-spacing:2px}
.tcard p{margin:8px 0 0 0; color:var(--muted); font-weight:750; line-height:1.5}
.twho{margin-top:10px; font-weight:950}
.faq{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
details{
  background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(255,255,255,.55));
  border: 1px solid rgba(34,197,94,.20);
  border-radius: var(--radius);
  padding:12px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
details:nth-child(even){
  background: linear-gradient(135deg, rgba(249,115,22,.10), rgba(255,255,255,.55));
  border-color: rgba(249,115,22,.20);
}
summary{cursor:pointer; font-weight:950}
details p{color:var(--muted); font-weight:750; line-height:1.5; margin:10px 0 0 0}
footer{background:#101010; color:#f3f3f3; padding:26px 0; margin-top:18px}
.fgrid{display:grid; grid-template-columns: 1.2fr .8fr 1fr; gap:12px}
footer a{color:#fff; text-decoration:underline; text-underline-offset:3px}
footer p{margin:8px 0 0 0; color:rgba(255,255,255,.75); line-height:1.5}
.fbadges{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.fbadges span{background:rgba(255,255,255,.12); padding:8px 10px; border-radius:999px; font-weight:850; font-size:12px}
.fabWrap{position:fixed; right:14px; bottom:14px; display:flex; flex-direction:column; gap:10px; z-index:80}
.fab{display:flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:18px; box-shadow: var(--shadow2); border:1px solid rgba(0,0,0,.10); background:#fff; cursor:pointer; position:relative}
.fab svg{width:26px; height:26px}
.fabWhats{background:linear-gradient(135deg,#25D366,#1aa34a); border:0}
.fabWhats svg{fill:#fff}
.count{position:absolute; top:0; right:0; transform: translate(35%,-35%); background:linear-gradient(90deg,var(--brand4),var(--brand2)); color:#fff; border-radius:999px; padding:4px 8px; font-weight:950; font-size:12px; min-width:22px; text-align:center; border:2px solid #fff; box-shadow: 0 6px 16px rgba(0,0,0,.15)}
.drawerBackdrop{position:fixed; inset:0; background:rgba(0,0,0,.4); display:none; z-index:90}
.drawer{position:fixed; top:0; right:0; width:min(420px, 92vw); height:100%; background:#fff; box-shadow: -14px 0 40px rgba(0,0,0,.22); transform: translateX(110%); transition: transform .25s ease; z-index:100; display:flex; flex-direction:column}
.drawer.open{transform: translateX(0)}
.drawerBackdrop.show{display:block}
.drawerHeader{display:flex; align-items:center; justify-content:space-between; padding:14px; border-bottom:1px solid rgba(0,0,0,.08)}
.drawerHeader b{font-size:16px}
.drawerBody{padding:12px 14px; overflow:auto}
.cartItem{display:grid; grid-template-columns: 70px 1fr; gap:10px; padding:10px 0; border-bottom:1px dashed rgba(0,0,0,.14)}
.cartItem:last-child{border-bottom:0}
.cimg{width:70px; height:56px; border-radius:14px; overflow:hidden; border:1px solid rgba(0,0,0,.10); background:#f4f4f4}
.cimg img{width:100%; height:100%; object-fit:cover}
.ctitle{font-weight:950; margin:0; font-size:14px}
.cmeta{margin:4px 0 0 0; color:var(--muted); font-weight:800; font-size:12px}
.crow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px}
.crow .price{font-size:14px}
.qtymini{display:flex; align-items:center; gap:6px}
.qtymini button{width:32px;height:32px;border-radius:12px}
.step{width:36px; height:36px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:#fff; cursor:pointer; font-weight:1000}
.step:hover{background:rgba(0,0,0,.04)}
.remove{background:transparent; border:0; color:#ef4444; font-weight:950; cursor:pointer; padding:8px 0}
.drawerFooter{padding:14px; border-top:1px solid rgba(0,0,0,.10); background:linear-gradient(135deg, rgba(34,197,94,.08), rgba(249,115,22,.08))}
.totalRow{display:flex; align-items:center; justify-content:space-between; font-weight:1000; font-size:16px}
.note{margin:8px 0 0 0; color:var(--muted); font-weight:700; font-size:13px; line-height:1.4}
.drawerFooter .btn{width:100%}
.checkoutGrid{display:grid; grid-template-columns: 1.1fr .9fr; gap:14px}
.panel{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: var(--radius2); box-shadow: var(--shadow); padding:16px}
.label{font-weight:900; font-size:13px; color:var(--muted); display:block; margin-bottom:6px}
.input, textarea{width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(0,0,0,.12); outline:none; font-weight:800}
textarea{min-height:100px; resize:vertical}
.radioRow{display:flex; gap:10px; flex-wrap:wrap}
.rbox{flex:1; min-width:220px; border:1px solid rgba(0,0,0,.12); border-radius: var(--radius); padding:12px; cursor:pointer}
.rbox.active{border-color:transparent; background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(249,115,22,.12))}
.rbox b{display:block}
.rbox p{margin:6px 0 0 0; color:var(--muted); font-weight:750; line-height:1.45}
.orderLines{margin:0; padding-left:18px; color:var(--muted); font-weight:750; line-height:1.5}
.small{font-size:12px; color:var(--muted); font-weight:750}

/* Masaüstünde bannerlar tek geniş banner gibi soldan-sağa geçiş yapsın */
@media (min-width: 981px){
  /* Masaüstünde bannerlar tam görünsün (yazılar kesilmesin) */
  .grid2{height:360px}
  .bannerTrack{height:100%}
  .bannerTrack > *{height:100%}
  .heroBanner, .mini{background:#fff}
  .heroBanner img, .mini img{object-fit:contain; transform:none}

  .bannerTrack{display:flex; gap:0; width:200%; animation: bannerSlide 8s infinite;}
  .bannerTrack > *{flex:0 0 50%;}
  @keyframes bannerSlide{
    0%, 45%{transform: translateX(0)}
    55%, 100%{transform: translateX(-50%)}
  }
  @media (prefers-reduced-motion: reduce){
    .bannerTrack{animation:none; width:100%;}
    .bannerTrack > *{flex:1 0 100%;}
  }
}
@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr}
  .grid2{height:auto}
  .bannerTrack{grid-template-columns:1fr 1fr}
  .products{grid-template-columns: repeat(2, minmax(0,1fr))}
  /* Mobilde adres & iş tanımı kartları alt alta, düzenli */
  .checkoutGrid{grid-template-columns:1fr}
  .panel{border-radius:18px}
  .highlights{grid-template-columns: repeat(2, minmax(0,1fr))}
  .testimonials{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .search{min-width:0; width:100%}
}
@media (max-width: 760px){
  .navlinks{display:none}
  .hamburger{display:inline-flex}
  .mobilemenu.open{display:block}
  .h1{font-size:32px}
  /* Mobilde ürünler 2'li grid (taşma yok) */
  .products{grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px}
  .container{padding:0 12px}
  .pname{word-break:break-word}
  .heroInner{padding:18px}
  .topbar .row{justify-content:center}
}



/* v5 updates: banner horizontal slider + mobile clean hero + hide about title on mobile */
.bannerSlider{width:100%; border-radius:18px; overflow:hidden; background:linear-gradient(180deg,#ffffff,#f7fff3); box-shadow:0 10px 30px rgba(0,0,0,.10);}
.bannerSlider .bannerViewport{width:100%; height:clamp(220px, 32vw, 520px); overflow:hidden;}
.bannerSlider .bannerTrack{display:flex; width:300%; height:100%; transition:transform .6s ease;}
.bannerSlider .bannerSlide{flex:0 0 100%; height:100%; display:flex; align-items:center; justify-content:center; background:#ffffff;}
.bannerSlider .bannerSlide img{width:100%; height:100%; object-fit:contain; display:block;}
@media (max-width: 600px){
  .brandTitle{display:none !important;}
}
/* Remove hero intro + highlights only on mobile */
@media (max-width: 600px){
  .heroCard{display:none !important;}
  .highlights{display:none !important;}
}
/* Category dropdown filter */
.catFilter{position:relative; display:flex; justify-content:flex-end;}
.catBtn{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid rgba(0,0,0,.08); background:#fff; box-shadow:0 8px 22px rgba(0,0,0,.07); font-weight:800;}
.catBtn small{opacity:.75; font-weight:700}
.catMenu{position:absolute; top:calc(100% + 10px); right:0; min-width:220px; padding:10px; border-radius:14px; border:1px solid rgba(0,0,0,.10); background:#fff; box-shadow:0 16px 40px rgba(0,0,0,.14); display:none; z-index:50;}
.catMenu.open{display:block;}
.catMenu .tab{width:100%; text-align:left; border-radius:12px; padding:10px 12px; margin:4px 0;}
.catMenu .tab.active{background:linear-gradient(135deg,#22c55e,#84cc16); color:#08330f;}


/* --- FIX: Ensure hero banner slider track works on all breakpoints (override legacy .bannerTrack rules) --- */
#bannerSlider .bannerTrack{
  display:flex !important;
  width:300% !important;
  height:100% !important;
  gap:0 !important;
  grid-template-columns:none !important;
  animation:none !important;
}
#bannerSlider .bannerSlide{
  flex:0 0 100% !important;
  height:100% !important;
}



/* Hide brand text block on mobile (requested) */
@media (max-width: 768px){
  .brandText, .brandMeta, .brand-info, .site-title-block{display:none !important;}
  header .brand h2, header .brand p{display:none !important;}
}

/* MOBİLDE TOPBAR TAMAMEN KALDIR */
@media (max-width: 768px) {
  .topbar { display: none !important; }
}


/* --- KATEGORİ SEKME BUTONLARI: TEK SIRA --- */
.sectionTitle .tabs{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.sectionTitle .tabs::-webkit-scrollbar{ height:0; }
.sectionTitle .tab{ white-space:nowrap; }

/* --- MOBİLDE MENÜ ALTINA GÖRSEL --- */
.mobileHero{ display:none; }
.mobileHero img{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
}
@media (max-width: 768px){
  .mobileHero{
    display:block;
    padding: 10px 16px 0;
  }
}


/* MOBILE BANNER SLIDER */
.mobileHero.slider{display:none; position:relative;}
.mobileHero.slider img{width:100%; display:none; border-radius:14px;}
.mobileHero.slider img.active{display:block;}
@media(max-width:768px){
  .mobileHero.slider{display:block; padding:10px 16px;}
}


/* --- PRODUCT MODAL (Cloudinary link viewer) --- */
.noscroll{ overflow:hidden; }
.pmodal{
  position:fixed; inset:0;
  display:none;
  z-index:10050;
}
.pmodal.show{ display:block; }
.pmodalBackdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
}
.pmodalCard{
  position:relative;
  width:min(920px, calc(100% - 24px));
  margin: 60px auto;
  background:#fff;
  border-radius:18px;
  box-shadow: 0 14px 50px rgba(0,0,0,.35);
  overflow:hidden;
}
.pmodalClose{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px;
  border:0; border-radius:14px;
  background: rgba(0,0,0,.06);
  font-size:22px; font-weight:900;
  cursor:pointer;
}
.pmodalImg{
  background: #f5f6f8;
  display:flex; align-items:center; justify-content:center;
  padding: 16px;
}
.pmodalImg img{
  width:100%;
  max-height: 420px;
  object-fit: contain;
  border-radius:14px;
  background:#fff;
}
.pmodalInfo{
  padding: 16px;
}
.pmodalTitle{ display:block; font-size:18px; }
.pmodalLinkRow{
  display:flex;
  gap:10px;
  margin-top:8px;
}
.pmodalLinkRow input{
  flex:1;
  padding:12px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  font-weight:700;
  color:#111;
}
@media(max-width:768px){
  .pmodalCard{ margin: 18px auto; }
  .pmodalImg img{ max-height: 340px; }
}