/* ══════════════════════════════════════════════════════════════
   PIANO HEADER — 3 satır: duyuru · ana satır · güven şeridi
   Referans (piyanogencodasi.com, 1440px):
     duyuru şeridi 40px · adaçayı #9CB0A1
     ana satır 120px · beyaz · logo 223×66 · menü 15.5px/600 · mürekkep #2E3D39
     güven şeridi 36px · #EBECE6 · kayan marquee
   ══════════════════════════════════════════════════════════════ */
:root{--pno-sage:#9CB0A1;--pno-ink:#2E3D39;--pno-accent:#DA7056;--pno-mist:#EBECE6}

.pno-in{max-width:1440px;margin:0 auto;padding:0 40px}

/* ── 1. duyuru şeridi ── */
.pno-util{background:var(--pno-sage);color:#fff;font-size:12.5px}
.pno-util .pno-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:40px}
.pno-util a{color:#fff;text-decoration:none;opacity:.92}
.pno-util a:hover{opacity:1;text-decoration:underline}
.pno-util-l,.pno-util-r{display:flex;align-items:center;gap:10px;white-space:nowrap}
.pno-util-c{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pno-badge{background:#c8472f;color:#fff;font-size:10.5px;letter-spacing:.08em;padding:4px 8px;border-radius:5px;font-weight:800}
.pno-dot{width:1px;height:14px;background:currentColor;opacity:.35;display:inline-block}

/* ── 2. ana satır ── */
.pno-hdr{position:relative;z-index:70;background:var(--w-bg,#fff);color:var(--w-fg,var(--pno-ink))}
.pno-hdr.is-sticky{position:sticky;top:0}
.pno-hdr.has-shadow{box-shadow:0 6px 24px -22px rgba(20,20,20,.5)}
.pno-main{display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);height:var(--w-h,120px)}

.pno-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:0 0 auto;max-width:260px;overflow:hidden}
.pno-brand img{height:calc(var(--w-logo-h,66px))!important;width:auto!important;max-width:calc(var(--w-logo-w,223px))!important;object-fit:contain;display:block}
.pno-brand>small{display:none}
.pno-brand b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.pno-mark{display:inline-flex;gap:3px;align-items:flex-end;height:26px}
.pno-mark i{display:block;width:4px;border-radius:2px;background:var(--pno-ink)}
.pno-mark i:nth-child(1){height:26px}
.pno-mark i:nth-child(2){height:20px;background:var(--pno-sage)}
.pno-mark i:nth-child(3){height:23px}

.pno-nav{display:flex;align-items:center;gap:clamp(8px,1.5vw,26px);flex:1 1 auto;min-width:0;justify-content:center}
.pno-nav a,.pno-nav .w-catbtn{position:relative;display:inline-flex;align-items:center;gap:5px;padding:10px 2px;border:0;background:transparent;
  color:inherit;font:inherit;font-size:var(--w-nav-fs,15.5px);font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;letter-spacing:-.005em}
.pno-nav a:after,.pno-nav .w-catbtn:after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.pno-nav a:hover:after,.pno-nav .w-catbtn:hover:after,.pno-nav a.on:after{transform:scaleX(1)}
.pno-nav .w-catbtn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transition:transform .2s}
.pno-nav .w-catbtn[aria-expanded="true"] svg{transform:rotate(180deg)}

.pno-actions{display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);flex:0 0 auto}
.pno-act{position:relative;display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
  color:inherit;text-decoration:none;font:inherit;font-size:13.5px;font-weight:500}
.pno-act svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pno-act svg.ic{fill:currentColor;stroke:none;width:20px;height:20px}
.pno-act:hover{color:var(--pno-accent)}
.pno-act .n{position:absolute;top:-7px;left:12px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--pno-accent);
  color:#fff;font-size:10.5px;font-style:normal;font-weight:800;display:grid;place-items:center}
.pno-burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:6px}
.pno-burger span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor}

/* arama paneli */
.pno-search{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid rgba(46,61,57,.08);
  box-shadow:0 24px 40px -30px rgba(20,20,20,.4);z-index:5}
.pno-search.on{display:block}
.pno-search form{display:flex;align-items:center;gap:10px;padding:16px 0}
.pno-search input{flex:1 1 auto;min-width:0;border:1px solid rgba(46,61,57,.16);background:#fff;border-radius:12px;
  padding:13px 16px;font:inherit;font-size:14.5px;color:var(--pno-ink);outline:none}
.pno-search input:focus{border-color:var(--pno-ink)}
.pno-search button{border:0;border-radius:12px;padding:13px 26px;background:var(--pno-ink);color:#fff;font:inherit;font-weight:600;font-size:14px;cursor:pointer}

/* kategori paneli */
.pno-cats{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid rgba(46,61,57,.08);z-index:5;
  box-shadow:0 24px 40px -30px rgba(20,20,20,.35)}
.pno-cats.on{display:block}
.pno-cats-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:20px 0}
.pno-cats a{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--pno-ink)}
.pno-cats a:hover{background:var(--pno-mist)}
.pno-cats b{font-size:14px;font-weight:600}
.pno-cats small{font-size:11.5px;color:#8c8880}

/* ── 3. güven şeridi (kayan) ── */
.pno-trust{background:var(--pno-mist);color:#46524d;overflow:hidden;height:36px;display:flex;align-items:center}
.pno-trust-track{display:flex;align-items:center;gap:38px;white-space:nowrap;animation:pnoMarquee 34s linear infinite;will-change:transform}
.pno-trust:hover .pno-trust-track{animation-play-state:paused}
.pno-trust-i{display:inline-flex;align-items:center;gap:8px;font-size:12.5px}
.pno-trust-i i{font-style:normal;color:var(--pno-accent);font-size:14px}
@keyframes pnoMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.pno-trust-track{animation:none}}

/* overlay davranışı */
.pno-hdr.is-overlay{position:absolute;top:40px;left:0;right:0;background:transparent!important}
.pno-hdr.is-overlay.is-solid{position:fixed;top:0;z-index:90;background:var(--w-bg,#fff)!important}

/* ── duyarlı ── */
@media (max-width:1180px){
  .pno-in{padding:0 24px}
  .pno-nav{gap:12px}
  .pno-act span{display:none}
}
@media (max-width:980px){
  .pno-util-c{display:none}
  .pno-util .pno-in{height:34px}
  .pno-main{height:var(--w-hm,64px);gap:12px}
  .pno-nav{display:none}
  .pno-burger{display:flex}
  .pno-brand img{height:40px;max-width:160px}
  .pno-brand b{font-size:19px}
  .pno-trust{height:32px}
  .pno-trust-i{font-size:11.5px}
  .pno-cats-in{grid-template-columns:1fr 1fr;padding:14px 0}
}
@media (max-width:560px){
  .pno-util-l{font-size:11.5px}
  .pno-util-r{display:none}
}

/* ── mobil ince ayar ── */
@media (max-width:980px){
  .pno-main{height:60px}
  .pno-brand img{max-height:38px!important;max-width:150px!important}
  .pno-actions{gap:4px}
  .pno-act{min-width:40px;min-height:40px;justify-content:center;border-radius:10px}
  .pno-act svg{width:20px;height:20px}
  .pno-util .pno-in{height:32px;font-size:11px;gap:8px}
  .pno-util-c{max-width:52%;text-overflow:ellipsis}
  .pno-trust{height:30px}
}