:root{--bg:#080908;--panel:#141514;--panel2:#1b1c1b;--text:#f7f7f4;--muted:#aaa;--line:#292b29;--green:#b9f33b;--green2:#7ea91f;--red:#ff4f4f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif}.hero{height:620px;position:relative;overflow:hidden;background:#101210}.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.48) 45%,rgba(0,0,0,.1)),url('uploads/hero.jpg') center/cover}.hero-content{position:relative;z-index:1;height:100%;padding:42px max(24px,calc((100% - 1180px)/2));display:flex;flex-direction:column;align-items:flex-start}.brand{font-weight:900;letter-spacing:1px;font-size:23px;line-height:.9}.brand-logo{max-width:240px;max-height:80px;width:auto;height:auto;object-fit:contain;object-position:left center}.footer-logo{max-width:180px;max-height:60px;width:auto;height:auto;object-fit:contain}.detail-logo{max-width:150px;max-height:42px;width:auto;height:auto;object-fit:contain}.brand span{color:var(--green)}.brand-sub{font-size:8px;letter-spacing:3px;color:#b8b8b5;margin-top:8px}.hero-title{font-size:clamp(45px,8vw,82px);line-height:.88;letter-spacing:3px;font-weight:300;margin-top:110px}.hero-title i{color:var(--green);font-style:normal}.hero-content p{max-width:330px;color:#ccc;line-height:1.5}.scroll{margin-top:auto;margin-bottom:30px;font-size:10px;letter-spacing:2px;color:#bbb}.categories{position:sticky;top:0;z-index:20;display:flex;gap:9px;overflow:auto;padding:12px max(14px,calc((100% - 1180px)/2));background:rgba(8,9,8,.96);border-bottom:1px solid var(--line);scrollbar-width:none}.categories::-webkit-scrollbar{display:none}.categories a{white-space:nowrap;color:#eee;text-decoration:none;padding:10px 15px;border:1px solid #333;border-radius:25px;font-size:12px}.categories a.active,.categories a:hover{background:var(--green);color:#111;border-color:var(--green)}main{max-width:1180px;margin:auto;padding:20px 16px 70px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:28px 0 14px}.section-head h2{font-size:21px;letter-spacing:1px;margin:0}.section-head span{font-size:27px;color:var(--green)}.featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.feature-card{position:relative;min-height:330px;border-radius:17px;overflow:hidden;background:var(--panel);color:#fff;text-decoration:none}.feature-card img,.feature-card .placeholder{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}.placeholder{display:block;background:linear-gradient(145deg,#252725,#111)}.feature-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.88) 100%)}.feature-overlay{position:absolute;z-index:2;bottom:0;left:0;right:0;padding:17px;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.feature-overlay h3{font-size:16px;margin:0 0 6px}.feature-overlay p{font-size:11px;color:#bbb;margin:0;line-height:1.4}.feature-overlay b{font-size:14px;white-space:nowrap}.sold-ribbon{position:absolute;z-index:3;top:13px;right:13px;background:var(--red);color:white;border-radius:7px;padding:7px 9px;font-size:10px;font-weight:900}.product-list{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.product-row{display:flex;gap:13px;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;color:#fff;text-decoration:none;min-height:128px}.thumb{width:115px;min-width:115px;height:108px;border-radius:10px;overflow:hidden;background:#202220}.thumb img{width:100%;height:100%;object-fit:cover}.row-info{flex:1;min-width:0}.row-top{display:flex;justify-content:space-between;gap:10px}.row-top h3{font-size:16px;margin:3px 0}.row-top strong{font-size:14px;white-space:nowrap}.row-info p{font-size:11px;color:#999;line-height:1.45;margin:8px 0}.stock{font-size:10px;color:var(--green);font-weight:800}.stock i{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;margin-right:4px}.stock.sold{color:#ff7272}.stock.sold i{background:#ff4f4f}.category-section{scroll-margin-top:62px}footer{text-align:center;border-top:1px solid var(--line);padding:35px;color:#666}.small{font-size:17px}.detail-head{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;background:rgba(8,9,8,.98);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}.detail-head a,.detail-head>span{color:white;text-decoration:none;font-size:27px}.detail-head .brand{font-size:18px}.detail{max-width:720px;padding:0 0 60px}.detail-photo{position:relative;height:520px;background:#191b19}.detail-photo img,.detail-photo .placeholder{width:100%;height:100%;object-fit:cover}.detail-body{padding:24px 20px}.detail-title{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.detail-title small{color:var(--green);font-size:10px;text-transform:uppercase;letter-spacing:2px}.detail-title h1{font-size:30px;margin:7px 0 0}.detail-title>strong{font-size:20px;white-space:nowrap}.lead{color:#bbb;line-height:1.6;font-size:14px}.badges{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:25px 0;background:var(--panel);border-radius:14px;padding:14px}.badges div{display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--green);gap:6px}.badges b{font-size:10px;color:#ddd;line-height:1.25}.subhead{font-size:12px;letter-spacing:2px;margin-top:25px}.subhead small{color:#777;font-size:9px}.ingredients{color:#aaa;line-height:1.7;font-size:13px}.nutrition{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.nutrition div{background:var(--panel);border-radius:11px;padding:14px 8px;text-align:center}.nutrition b{display:block;font-size:18px}.nutrition span{display:block;color:#888;font-size:9px;margin-top:5px}@media(max-width:800px){.hero{height:560px}.featured-grid{grid-template-columns:repeat(2,1fr)}.feature-card{min-height:250px}.product-list{grid-template-columns:1fr}.detail-photo{height:420px}}@media(max-width:480px){.hero{height:510px}.hero-content{padding:27px 20px}.hero-title{margin-top:85px;font-size:48px}.featured-grid{grid-template-columns:1fr 1fr;gap:8px}.feature-card{min-height:225px}.feature-overlay{padding:11px}.feature-overlay p{display:none}.feature-overlay h3{font-size:13px}.feature-overlay b{font-size:12px}.product-row{min-height:118px}.thumb{width:96px;min-width:96px;height:96px}.row-top h3{font-size:14px}.row-top strong{font-size:12px}.detail-photo{height:350px}.detail-title h1{font-size:25px}.detail-body{padding:20px 16px}}

.menu-filter-section[hidden]{display:none!important}.categories a.active{font-weight:800}

/* Arama + kayan kategori navigasyonu */
.menu-navigation{position:sticky;top:0;z-index:20;background:rgba(8,9,8,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.menu-navigation .categories{position:relative;top:auto;z-index:1;border-bottom:0;background:transparent;padding-bottom:9px}
.search-bar-wrap{padding:0 max(14px,calc((100% - 1180px)/2)) 11px}
.search-bar{height:44px;display:flex;align-items:center;gap:9px;max-width:560px;margin:0 auto;background:#151715;border:1px solid #333733;border-radius:24px;padding:0 12px;transition:.2s}
.search-bar:focus-within{border-color:var(--green);box-shadow:0 0 0 2px rgba(185,243,59,.08)}
.search-icon{font-size:23px;line-height:1;color:#aaa;transform:rotate(-20deg);display:inline-block}
.search-bar input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:14px;font-family:inherit}
.search-bar input::placeholder{color:#888}
.search-bar button{width:27px;height:27px;border:0;border-radius:50%;background:#2a2c2a;color:#ddd;font-size:19px;line-height:1;cursor:pointer}
.search-bar button:hover{background:var(--green);color:#111}
.product-row[hidden]{display:none!important}
.category-section[hidden]{display:none!important}
@media(max-width:480px){.search-bar{height:42px}.search-bar input{font-size:13px}.search-bar-wrap{padding-bottom:8px}.categories{padding-top:9px}.categories a{padding:9px 13px;font-size:11px}}

/* V2: arama ikonu + arama paneli + gerçek arama sonuçları */
.menu-navigation{position:sticky;top:0;z-index:20;background:rgba(8,9,8,.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.menu-nav-top{height:44px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 16px;color:#777;font-size:10px;letter-spacing:2px}
.search-toggle{width:34px;height:34px;border:1px solid #333733;border-radius:50%;background:#151715;color:#ddd;font-size:22px;line-height:1;cursor:pointer;transform:rotate(-20deg);display:flex;align-items:center;justify-content:center}
.search-toggle:hover,.search-toggle.active{background:var(--green);border-color:var(--green);color:#111}
.menu-navigation .categories{position:relative;top:auto;z-index:1;border-bottom:0;background:transparent;padding-top:7px;padding-bottom:9px}
.search-panel{padding:0 max(14px,calc((100% - 1180px)/2)) 11px}
.search-panel[hidden],.search-results[hidden]{display:none!important}
.search-bar{height:44px;display:flex;align-items:center;gap:9px;max-width:700px;margin:0 auto;background:#151715;border:1px solid #333733;border-radius:24px;padding:0 12px;transition:.2s}
.search-bar:focus-within{border-color:var(--green);box-shadow:0 0 0 2px rgba(185,243,59,.08)}
.search-icon{font-size:23px;line-height:1;color:#aaa;transform:rotate(-20deg);display:inline-block}
.search-bar input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:14px;font-family:inherit}
.search-bar input::placeholder{color:#888}
.search-bar button{border:0;cursor:pointer}
#clearSearch,#closeSearch{width:28px;height:28px;border-radius:50%;background:#2a2c2a;color:#ddd;font-size:18px;line-height:1}
#clearSearch:hover,#closeSearch:hover{background:var(--green);color:#111}
.search-results{max-width:1180px;margin:0 auto;padding:20px 16px 60px}
.search-result-head{display:flex;align-items:center;justify-content:space-between;margin:5px 0 14px}
.search-result-head h2{font-size:20px;letter-spacing:1px;margin:0}
.search-result-head span{font-size:11px;color:#888}
.search-empty{min-height:160px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:15px;color:#aaa;text-align:center}
.search-empty strong{font-size:17px;color:#eee}
.search-empty span{font-size:12px}
.search-result-list{grid-template-columns:repeat(2,1fr)}
@media(max-width:800px){.search-result-list{grid-template-columns:1fr}}
@media(max-width:480px){.menu-nav-top{height:40px}.search-toggle{width:32px;height:32px}.search-panel{padding-bottom:8px}.search-bar{height:42px}.search-bar input{font-size:13px}.search-result-head h2{font-size:17px}}

/* V7: Arama ikonu Tümü ile aynı hizada, tıklayınca yanında arama alanı açılır */
.menu-nav-top{height:42px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 16px;color:#777;font-size:10px;letter-spacing:2px}
.menu-nav-hint{color:#8c8f89;font-size:9px;letter-spacing:1.8px}
.menu-navigation .categories{display:flex;align-items:center;gap:9px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:8px max(14px,calc((100% - 1180px)/2)) 10px;background:transparent;scrollbar-width:none}
.menu-navigation .categories::-webkit-scrollbar{display:none}
.search-control{height:38px;display:flex;align-items:center;flex:0 0 38px;gap:7px;overflow:hidden;border:1px solid transparent;border-radius:22px;transition:flex-basis .22s ease,width .22s ease,padding .22s ease,background .22s ease,border-color .22s ease;order:0}
.search-control.open{flex-basis:205px;background:#151715;border-color:#333733;padding:0 5px 0 2px}
.search-toggle{flex:0 0 36px;width:36px;height:36px;border:1px solid #333733;border-radius:50%;background:#151715;color:#ddd;font-size:24px;line-height:1;cursor:pointer;transform:none;display:flex;align-items:center;justify-content:center;padding:0}
.search-toggle:hover,.search-toggle.active{background:var(--green);border-color:var(--green);color:#111}
.search-control input{min-width:0;width:0;flex:0;opacity:0;border:0;outline:0;background:transparent;color:#fff;font-size:13px;font-family:inherit;transition:opacity .15s ease,width .22s ease,flex .22s ease}
.search-control.open input{width:auto;flex:1;opacity:1}
.search-control input::placeholder{color:#888}
#clearSearch{flex:0 0 27px;width:27px;height:27px;border:0;border-radius:50%;background:#2a2c2a;color:#ddd;font-size:18px;line-height:1;cursor:pointer;padding:0}
#clearSearch:hover{background:var(--green);color:#111}
@media(max-width:600px){
  .menu-nav-top{height:38px;padding:0 14px}
  .menu-nav-hint{font-size:8px}
  .menu-navigation .categories{gap:7px;padding:7px 12px 9px}
  .search-control{height:36px;flex-basis:36px}
  .search-control.open{flex-basis:calc(100vw - 24px);max-width:calc(100vw - 24px)}
  .search-toggle{width:34px;height:34px;flex-basis:34px;font-size:23px}
  .search-control input{font-size:14px}
  .menu-navigation .categories a{padding:9px 13px;font-size:11px}
}

/* FINAL SEARCH LAYOUT: arama kutusu Tümü sekmesinin tam üstünde */
.menu-nav-top{height:42px;display:flex;align-items:center;max-width:1180px;margin:auto;padding:0 16px;color:#777;font-size:10px;letter-spacing:2px}
.search-area{max-width:1180px;margin:0 auto;padding:0 16px 9px}
.search-control{height:38px;width:38px;display:flex;align-items:center;gap:7px;overflow:hidden;border:1px solid transparent;border-radius:22px;background:transparent;transition:width .22s ease,background .22s ease,border-color .22s ease,padding .22s ease}
.search-control.open{width:280px;background:#151715;border-color:#333733;padding:0 5px 0 2px}
.search-toggle{flex:0 0 38px;width:38px;height:38px;border:1px solid #444744;border-radius:50%;background:#151715;color:#eee;font-size:28px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.search-toggle:hover,.search-toggle.active{background:var(--green);border-color:var(--green);color:#111}
.search-control input{min-width:0;width:0;flex:0;opacity:0;border:0;outline:0;background:transparent;color:#fff;font-size:14px;font-family:inherit;transition:opacity .15s ease,width .22s ease,flex .22s ease}
.search-control.open input{width:auto;flex:1;opacity:1}
.search-control input::placeholder{color:#8b8d89}
#clearSearch{flex:0 0 27px;width:27px;height:27px;border:0;border-radius:50%;background:#2a2c2a;color:#ddd;font-size:18px;line-height:1;cursor:pointer;padding:0}
#clearSearch:hover{background:var(--green);color:#111}
.menu-navigation .categories{padding-top:0}
@media(max-width:600px){
  .menu-nav-top{height:40px;padding:0 14px}
  .search-area{padding:0 12px 8px}
  .search-control{height:38px;width:38px}
  .search-toggle{width:38px;height:38px;flex-basis:38px;font-size:28px}
  .search-control.open{width:min(340px,calc(100vw - 24px))}
  .search-control input{font-size:14px}
  .menu-navigation .categories{padding:0 12px 9px;gap:7px}
}


/* FINAL: Arama alanı Tümü sekmesinin sol kenarıyla tam hizalı */
.search-area{box-sizing:border-box;padding-right:16px;}
@media(max-width:600px){.search-area{padding-right:12px;}}

/* MOBILE SCROLL FIX: kategori sekmesi yatay hareket eder, sayfa dikey scroll'u bozulmaz */
.menu-navigation{
  position:sticky;
  top:0;
  z-index:20;
}
.menu-navigation .categories{
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:none;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:600px){
  body{
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .menu-navigation{
    max-width:100%;
  }
  .menu-navigation .categories{
    width:100%;
    max-width:100%;
  }
}


/* FINAL V4 - Mobil menu davranisi */
.menu-navigation{
  position:relative;
  top:auto;
  z-index:20;
  background:rgba(8,9,8,.97);
  border-bottom:1px solid var(--line);
}
.menu-navigation .search-area{
  position:relative;
  z-index:1;
}
.menu-navigation .categories{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:30;
  width:100%;
  max-width:100%;
  margin:0;
  background:rgba(8,9,8,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:none;
  -webkit-overflow-scrolling:touch;
}
@media(max-width:600px){
  body{overflow-x:hidden;overflow-y:auto;}
  .menu-navigation{max-width:100%;}
  .menu-navigation .categories{padding-left:12px;padding-right:12px;}
}

/* FINAL STICKY CATEGORY FIX
   Arama alanı normal akışta kalır; kategori şeridi body'ye bağlı sticky olur.
   Böylece mobil Safari/Chrome'da sayfa aşağı kayarken kategori sekmeleri ekranda kalır. */
.menu-navigation-search{
  position:relative;
  z-index:10;
  background:rgba(8,9,8,.97);
  border-bottom:0;
}
.menu-navigation-search .search-area{
  max-width:1180px;
  margin:0 auto;
}
.categories#categoryNav{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:100;
  width:100%;
  max-width:none;
  margin:0;
  display:flex;
  align-items:center;
  gap:9px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:9px max(14px,calc((100% - 1180px)/2)) 10px;
  background:rgba(8,9,8,.97);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
  overscroll-behavior-y:none;
}
.categories#categoryNav::-webkit-scrollbar{display:none}
.categories#categoryNav a{flex:0 0 auto}
.category-section{scroll-margin-top:64px}
@media(max-width:600px){
  .menu-navigation-search .search-area{padding-left:12px;padding-right:12px;padding-bottom:8px}
  .categories#categoryNav{padding:8px 12px 9px;gap:7px}
  .category-section{scroll-margin-top:57px}
}