/* ══════════════════════════════════════════════════════════════
   W01 HEADER — wimpdecaf.com birebir düzeni
   Kaynaktan ölçülen değerler: 80px bar (mobil 64px), 120x50 logo,
   16px menü yazısı / 8px dolgu / 24px boşluk, 40x40 ikon (6px köşe),
   1px dikey ayraç (42px), 19x3 hamburger çizgileri,
   #F9F4ED zemin, #2A292B yazı, #FF5C00 vurgu.
   Renk/ölçü değerleri Header Stüdyosu'ndan (header_custom) yazılır.
   ══════════════════════════════════════════════════════════════ */
.w-hdr{
  --w-bg:#F9F4ED; --w-fg:#2A292B; --w-accent:#FF5C00; --w-muted:#8C8880;
  --w-h:80px; --w-hm:64px; --w-logo-w:120px; --w-logo-h:50px;
  --w-gap:24px; --w-nav-fs:16px; --w-search-w:360px; --w-r:6px;
  position:relative; z-index:70; margin:3px 3px 0; border-radius:var(--w-r);
  background:var(--w-bg) !important; color:var(--w-fg) !important;
  border:0 !important; box-shadow:none;
}
.w-hdr.is-sticky{position:sticky;top:0;margin-top:0}
.w-hdr.has-shadow{box-shadow:0 4px 18px rgba(42,41,43,.06)}
.w-hdr a{color:inherit;text-decoration:none}
.w-hdr button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.w-hdr img{max-width:100%}

/* ── duyuru şeridi (varsayılan kapalı) ── */
.w-ann{border-radius:var(--w-r) var(--w-r) 0 0; background:var(--w-fg);color:var(--w-bg);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.w-ann .w-in{height:auto;min-height:34px;display:flex;justify-content:center;align-items:center;text-align:center;padding-top:8px;padding-bottom:8px}

/* ── bar ── */
.w-hdr .w-in{
  width:90.5%; max-width:1400px; margin:0 auto;
  height:var(--w-h); display:flex; align-items:center; justify-content:space-between;
  gap:16px; position:relative;
}

/* ── logo ── */
.w-brand{display:flex;align-items:center;flex:0 0 auto;max-width:var(--w-logo-w)}
.w-brand img{max-height:var(--w-logo-h);width:auto;height:auto;display:block}
.w-brand b{font-size:20px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}

/* ── orta menü: logo ile ikonlar arasında ortalanır ── */
.w-nav{
  position:absolute; left:50%; transform:translateX(-50%);
  transition:opacity .16s ease;
  display:flex; align-items:center; gap:var(--w-gap); white-space:nowrap;
}
.w-nav a, .w-nav .w-catbtn{
  position:relative; display:inline-flex; align-items:center; gap:6px;
  padding:8px; font-size:var(--w-nav-fs); line-height:1.2; color:var(--w-fg);
  border-radius:6px;
}
.w-nav .w-catbtn{font-weight:600}
.w-nav a::after, .w-nav .w-catbtn::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px; border-radius:6px;
  background:currentColor; opacity:0; transform:scaleX(.55); transform-origin:50% 100%;
  transition:opacity .18s ease, transform .24s cubic-bezier(.34,1.56,.5,1); pointer-events:none;
}
.w-nav a:hover::after, .w-nav .w-catbtn:hover::after{opacity:.22;transform:scaleX(1)}
.w-nav a.on{font-weight:500}
.w-nav a.on::after{opacity:.28;transform:scaleX(1)}
.w-chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.w-catbtn[aria-expanded=true] .w-chev{transform:rotate(180deg)}

/* ── sağ ikonlar ── */
.w-actions{display:flex;align-items:center;flex:0 0 auto;margin-left:auto}
.w-ibtn{
  width:40px;height:40px;display:grid;place-items:center;border-radius:6px;
  transition:background .18s ease, transform .18s ease; position:relative;
}
.w-ibtn:hover{background:rgba(42,41,43,.06)}
.w-ibtn:active{transform:scale(.95)}
.w-ibtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.w-sep{width:1px;height:42px;background:rgba(42,41,43,.14);flex:0 0 auto}
.w-ibtn .n{
  position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--w-accent);color:#fff;font-size:10px;font-weight:600;display:grid;place-items:center;line-height:1;
}

/* ── hamburger (masaüstünde de görünür — kaynaktaki gibi) ── */
.w-burger{width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:6px}
.w-burger:hover{background:rgba(42,41,43,.06)}
.w-burger span{width:19px;height:3px;background:currentColor;border-radius:1px;transition:transform .26s ease,opacity .2s ease}
.w-burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.w-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.w-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── arama paneli ── */
/* arama: header'ın İÇİNDE, ikonların soluna doğru açılır */
.w-actions{position:relative}
.w-hdr.is-search .w-nav{opacity:0;pointer-events:none}
.w-search{
  display:none; position:absolute; right:calc(100% + 8px); top:50%; z-index:9;
  transform:translateY(-50%); width:min(var(--w-search-w, 360px), 46vw);
  background:#fff; border:1px solid rgba(42,41,43,.12); border-radius:8px;
  box-shadow:0 8px 24px rgba(42,41,43,.10); padding:4px;
}
.w-search.on{display:block; animation:wSearchIn .2s ease-out}
@keyframes wSearchIn{from{opacity:0;transform:translate(10px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
.w-search form{display:flex;gap:6px;margin:0;padding:0;width:auto}
.w-search input{
  flex:1;height:38px;padding:0 10px;border:1px solid rgba(42,41,43,.14);border-radius:6px;
  background:#fff;font:inherit;font-size:15px;color:var(--w-fg);
}
.w-search input:focus{outline:2px solid var(--w-accent);outline-offset:-1px;border-color:transparent}
.w-search button[type=submit]{height:38px;padding:0 16px;border-radius:6px;background:var(--w-fg);color:var(--w-bg);font-size:14px}

@keyframes wSearchInM{from{opacity:0}to{opacity:1}}

/* ── kategori paneli ── */
.w-cats{
  display:none;position:absolute;left:0;right:0;top:100%;background:var(--w-bg);
  border-top:1px solid rgba(42,41,43,.08);border-bottom:1px solid rgba(42,41,43,.12);
  box-shadow:0 24px 48px rgba(42,41,43,.10);z-index:5;
}
.w-cats.on{display:block}
.w-cats .w-cats-in{
  width:90.5%;max-width:1400px;margin:0 auto;padding:24px 0 28px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 24px;
}
.w-cats a{display:block;padding:9px 8px;border-radius:8px;font-size:15px}
.w-cats a:hover{background:rgba(42,41,43,.06)}
.w-cats small{display:block;color:var(--w-muted);font-size:12px;margin-top:2px}

/* ── mobil ── */
@media (max-width:960px){
  .w-hdr .w-in{width:auto;height:var(--w-hm);padding:0 12px;gap:10px}
  .w-nav{display:none}
  .w-hdr{--w-logo-w:100px;--w-logo-h:50px}
  .w-brand{max-width:100px}
  .w-brand img{max-width:100px}
  .w-brand b{font-size:17px}
  .w-ibtn{width:40px;height:40px}
  .w-ibtn svg{width:21px;height:21px}
  .w-burger{width:40px;height:40px}
  .w-sep{height:36px}
  .w-ibtn.hide-m{display:none}
  .w-ann .w-in{padding:7px 12px;font-size:10px;width:auto}
  .w-search{position:fixed;top:9px;left:12px;right:12px;width:auto;transform:none;padding:3px;border-radius:8px}
  .w-search.on{animation:wSearchInM .18s ease-out}
  .w-search input{height:40px;font-size:14px}
  .w-search button[type=submit]{height:40px;padding:0 12px;font-size:13px}
  .w-cats .w-cats-in{width:auto;padding:16px 12px 20px}
}