/* =============================================================
   PİNO HEADER — Fide header'ın ikinci versiyonu
   Fayda şeridi + tam genişlik bar + gömülü arama düğmesi + çip satırı
   Palet: derin çam (#0C2E26) · nane (#7FE3B2) · krem zemin (#FBFAF6)
   ============================================================= */
.pnh{
  --p-bg:#FBFAF6; --p-fg:#0C2E26; --p-mut:#6B7C72; --p-line:#E4E7DD;
  --p-ac:#7FE3B2; --p-deep:#0C2E26; --p-h:74px; --p-logo-h:44px;
  --p-r:14px; --p-search-w:520px;
  position:relative; z-index:88; background:var(--p-bg); color:var(--p-fg);
  border-bottom:1px solid var(--p-line);
  font-family:"Outfit","Instrument Sans",system-ui,sans-serif;
}
.pnh.is-sticky{position:sticky; top:0}
.pnh::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:transparent; transition:background .25s}
.pnh.is-scrolled::after{background:linear-gradient(90deg,transparent,rgba(12,46,38,.14),transparent)}

/* fayda şeridi */
.pnh-util{background:var(--p-deep); color:#DCEFE4}
.pnh-util-in{max-width:1400px; margin:0 auto; padding:0 24px; min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.pnh-util-l{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; letter-spacing:.01em}
.pnh-util-l svg{width:15px; height:15px; color:var(--p-ac); flex:0 0 auto}
.pnh-util-l b{font-weight:500}
.pnh-util-r{display:inline-flex; align-items:center; gap:18px; font-size:11.5px}
.pnh-util-r a{color:#BFD9CB; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:color .18s}
.pnh-util-r a:hover{color:#fff}
.pnh-util-r svg{width:14px; height:14px}

/* ana bar */
.pnh-bar{height:var(--p-h); display:flex; align-items:center}
.pnh-in{max-width:1400px; margin:0 auto; padding:0 24px; width:100%; display:flex; align-items:center; gap:22px; min-width:0}

.pnh-brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex:0 0 auto; min-width:0; max-width:38%; overflow:hidden}
.pnh-logo{display:block; line-height:0}
.pnh .pnh-logo img{height:var(--p-logo-h,44px) !important; max-height:var(--p-logo-h,44px) !important; width:auto !important; max-width:220px; object-fit:contain; display:block}
.pnh-logo b{font:800 21px/1.1 "Outfit",sans-serif; letter-spacing:-.02em}
.pnh-tag{font-size:10.5px; line-height:1.25; color:var(--p-mut); padding-left:12px; border-left:1px solid var(--p-line); white-space:nowrap}

/* arama: solda ikon, sağda gömülü nane düğme */
.pnh-search{position:relative; flex:1 1 auto; max-width:var(--p-search-w); display:flex; align-items:center;
  height:44px; background:#fff; border:1px solid var(--p-line); border-radius:var(--p-r);
  transition:border-color .2s, box-shadow .2s}
.pnh-search:focus-within{border-color:#57BE8F; box-shadow:0 0 0 3px rgba(127,227,178,.30)}
.pnh-search-i{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:#9AA9A0}
.pnh-search-i svg{width:16px; height:16px; display:block}
.pnh-search input{flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; padding:0 12px 0 38px;
  font:400 13.5px/1 "Outfit",sans-serif; color:var(--p-fg)}
.pnh-search input::placeholder{color:#9AA9A0}
.pnh-search-b{display:inline-flex; align-items:center; gap:6px; height:34px; margin-right:5px; padding:0 15px;
  border:0; border-radius:10px; background:var(--p-deep); color:#EAF7EF; cursor:pointer;
  font:600 12.5px/1 "Outfit",sans-serif; transition:background .2s, color .2s}
.pnh-search-b svg{width:14px; height:14px; display:none}
.pnh-search-b:hover{background:#123B31}

/* aksiyonlar */
.pnh-acts{display:flex; align-items:center; gap:8px; margin-left:auto; flex:0 0 auto}
.pnh-cats{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:10px;
  border:1px solid var(--p-line); background:#fff; color:var(--p-fg); cursor:pointer;
  font:600 12.5px/1 "Outfit",sans-serif; transition:border-color .2s, background .2s}
.pnh-cats svg{width:15px; height:15px; color:#3E8C6D}
.pnh-cats:hover{border-color:#BFE6D2; background:#F4FBF6}
.pnh-sep{width:1px; height:22px; background:var(--p-line); margin:0 4px}
.pnh-ic{position:relative; width:38px; height:38px; display:grid; place-items:center; border-radius:10px;
  color:#2F4A40; text-decoration:none; transition:background .18s, color .18s}
.pnh-ic svg{width:19px; height:19px}
.pnh-ic:hover{background:#EFF6F0; color:#175A45}
.pnh-ic i{position:absolute; top:2px; right:1px; min-width:16px; height:16px; padding:0 4px; border-radius:99px;
  background:#175A45; color:#DFF6E8; font:600 10px/16px "Outfit",sans-serif; font-style:normal; text-align:center}
.pnh-ic--cart{background:var(--p-deep); color:#EAF7EF}
.pnh-ic--cart:hover{background:#123B31; color:#fff}
.pnh-ic--cart i{background:var(--p-ac); color:#0C2E26}
.pnh-burger{display:none; width:38px; height:38px; border:1px solid var(--p-line); border-radius:10px; background:#fff;
  padding:10px; flex-direction:column; justify-content:space-between; cursor:pointer}
.pnh-burger span{display:block; height:2px; background:var(--p-fg); border-radius:2px}

/* kategori çipleri */
.pnh-chips{border-top:1px solid var(--p-line); background:#fff}
.pnh-chips-in{max-width:1400px; margin:0 auto; padding:9px 24px; display:flex; align-items:center; gap:8px;
  overflow-x:auto; scrollbar-width:none}
.pnh-chips-in::-webkit-scrollbar{display:none}
.pnh-chip{flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 13px;
  border-radius:99px; border:1px solid var(--p-line); background:#FBFAF6; color:#3A4A42;
  font:500 12.5px/1 "Outfit",sans-serif; text-decoration:none; white-space:nowrap;
  transition:background .18s, border-color .18s, color .18s}
.pnh-chip:hover{border-color:#BFE6D2; color:#175A45; background:#F4FBF6}
.pnh-chip.on{border-color:#175A45; background:#175A45; color:#EAF7EF}
.pnh-chip--all{background:var(--p-deep); border-color:var(--p-deep); color:#EAF7EF; font-weight:600}
.pnh-chip--all svg{width:13px; height:13px}
.pnh-chip--ghost{border-style:dashed; color:var(--p-mut)}

/* kategori paneli */
.pnh-panel{position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid var(--p-line);
  box-shadow:0 26px 50px -34px rgba(12,46,38,.5); z-index:95}
.pnh-panel[hidden]{display:none}
.pnh-panel-in{max-width:1400px; margin:0 auto; padding:20px 24px 24px; display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
.pnh-panel-in a{display:flex; flex-direction:column; gap:2px; padding:11px 13px; border-radius:10px;
  text-decoration:none; color:var(--p-fg); transition:background .16s}
.pnh-panel-in a:hover{background:#F4FBF6}
.pnh-panel-in b{font:600 13.5px/1.3 "Outfit",sans-serif}
.pnh-panel-in small{font-size:11.5px; color:var(--p-mut)}
.pnh-empty{margin:0; padding:12px; color:var(--p-mut); font-size:12.5px}

/* duyarlı */
@media (max-width:1200px){ .pnh-tag{display:none} .pnh-in{gap:16px} }
@media (max-width:1024px){ .pnh-cats span{display:none} .pnh-cats{width:38px; padding:0; justify-content:center} }
@media (max-width:900px){
  .pnh-util{display:none}
  .pnh{--p-h:auto}
  .pnh-bar{height:auto; padding:10px 0}
  .pnh-in{flex-wrap:wrap; gap:10px; padding:0 14px}
  .pnh-logo img{height:36px}
  .pnh-search{order:3; flex:1 0 100%; max-width:none; height:42px}
  .pnh-search-b span{display:none}
  .pnh-search-b{width:40px; padding:0; justify-content:center}
  .pnh-search-b svg{display:block}
  .pnh-cats,.pnh-sep{display:none}
  .pnh-ic{width:36px; height:36px}
  .pnh-burger{display:flex}
  .pnh-chips-in{padding:8px 14px}
  .pnh-panel-in{grid-template-columns:1fr 1fr; padding:14px}
}
@media (max-width:520px){
  .pnh-ic--fav{display:none}
  .pnh-brand{gap:8px}
}
@media (prefers-reduced-motion:reduce){ .pnh *{transition:none !important} }