/* EKSFORK — anasayfa ürün arama çubuğu (arama.js ve arama-dizin.json ile birlikte).
   Hero'nun en üstünde, header'ın hemen altında durur. Sekmeler aramayı daraltır; yazdıkça öneri listesi açılır. */
.ara{position:relative;z-index:6;margin:0 0 auto;padding-top:1.1rem;pointer-events:none;color:var(--text,#16181d)}
.ara-form{position:relative;pointer-events:auto}
.ara-sekmeler{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none}
.ara-sekmeler::-webkit-scrollbar{display:none}
.ara-sekme{flex:none;display:inline-flex;align-items:center;padding:.62rem 1.15rem .55rem;border:1px solid #ffffff2e;border-bottom:0;border-radius:12px 12px 0 0;background:#1a1d24b3;color:#ffffffe0;font:700 .86rem/1 var(--font-body,system-ui,sans-serif);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .2s,color .2s}
.ara-sekme:hover{background:#2a2e38d9;color:#fff}
.ara-sekme[aria-selected=true]{background:#fff;border-color:#fff;color:var(--ink-900,#101216);box-shadow:inset 0 -3px 0 var(--brand,#ffb800)}
.ara-sekme:focus-visible{outline:2px solid var(--brand,#ffb800);outline-offset:-2px}

.ara-kutu{display:flex;align-items:center;gap:.5rem;height:3.6rem;padding:.4rem .45rem .4rem 1rem;border-radius:0 14px 14px 14px;background:#fff;box-shadow:0 18px 44px #00000059}
.ara-kutu:focus-within{box-shadow:0 18px 44px #00000059,0 0 0 3px #ffb80073}
.ara-ikon{flex:none;width:20px;height:20px;color:var(--gray-500,#7c848f)}
.ara-girdi{flex:1;min-width:0;height:100%;padding:0 .2rem;border:0;background:none;color:var(--text,#16181d);font:500 1rem/1.2 var(--font-body,system-ui,sans-serif);outline:none;-webkit-appearance:none;appearance:none}
.ara-girdi::placeholder{color:var(--gray-500,#7c848f);opacity:1}
.ara-girdi::-webkit-search-cancel-button{display:none}
.ara-temizle{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--gray-100,#eef0f2);color:var(--gray-600,#59606b);cursor:pointer}
.ara-temizle:hover{background:var(--gray-200,#e2e5e9);color:var(--text,#16181d)}
.ara-temizle[hidden]{display:none}
.ara-temizle svg{width:14px;height:14px}
.ara-btn{flex:none;display:inline-flex;align-items:center;gap:.5rem;height:100%;padding:0 1.35rem;border:0;border-radius:10px;background:var(--brand,#ffb800);color:#1a1400;font:700 .95rem/1 var(--font-body,system-ui,sans-serif);cursor:pointer;transition:background .2s}
.ara-btn:hover{background:var(--brand-strong,#f5a300)}
.ara-btn:focus-visible{outline:2px solid var(--ink-900,#101216);outline-offset:2px}
.ara-btn svg{width:20px;height:20px}

/* öneri paneli */
.ara-panel{position:absolute;left:0;right:0;top:calc(100% + .5rem);max-height:min(29rem,calc(100vh - 14rem));overflow:auto;overscroll-behavior:contain;border-radius:14px;background:#fff;box-shadow:0 24px 60px #00000073,0 0 0 1px #10121614}
.ara-panel[hidden]{display:none}
.ara-grup{padding:.35rem 0}
.ara-grup+.ara-grup{border-top:1px solid var(--gray-100,#eef0f2)}
.ara-grup-bas{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 1.1rem .3rem;color:var(--gray-500,#7c848f);font:700 .72rem/1.2 var(--font-body,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase}
.ara-grup-bas b{color:var(--gray-400,#a6adb7);font-weight:700}
.ara-grup-hepsi{padding:0;border:0;background:none;color:var(--accent-ink,#b84e08);font:700 .76rem/1.2 var(--font-body,system-ui,sans-serif);letter-spacing:0;text-transform:none;cursor:pointer}
.ara-grup-hepsi:hover{text-decoration:underline}
.ara-oge{display:flex;align-items:center;gap:.85rem;padding:.5rem 1.1rem;color:var(--text,#16181d);text-decoration:none;border-left:3px solid transparent;scroll-margin:.5rem}
.ara-oge:hover,.ara-oge.is-aktif{background:var(--gray-50,#f7f8f9);border-left-color:var(--brand,#ffb800)}
.ara-gorsel{flex:none;display:grid;place-items:center;width:46px;height:46px;overflow:hidden;border-radius:10px;background:var(--gray-100,#eef0f2);color:var(--gray-500,#7c848f)}
.ara-gorsel img{width:100%;height:100%;object-fit:contain}
.ara-gorsel svg{width:22px;height:22px}
/* görseli olmayan sayfalar (servis, bayi, iletişim): marka renginde çizgi ikon */
.ara-gorsel--ikon{background:#fff4d6;color:var(--accent-ink,#b84e08)}
.ara-yazi{flex:1;min-width:0}
.ara-ad{display:block;overflow:hidden;font:600 .95rem/1.3 var(--font-body,system-ui,sans-serif);text-overflow:ellipsis;white-space:nowrap}
.ara-ad mark{padding:0 1px;border-radius:3px;background:#ffb80059;color:inherit}
.ara-alt{display:block;overflow:hidden;margin-top:.15rem;color:var(--gray-500,#7c848f);font-size:.8rem;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.ara-fiyat{flex:none;color:var(--text,#16181d);font:700 .88rem/1.2 var(--font-body,system-ui,sans-serif);white-space:nowrap}
.ara-fiyat small{color:var(--gray-500,#7c848f);font-size:.72rem;font-weight:600}
.ara-fiyat--sor{color:var(--accent-ink,#b84e08);font-size:.8rem}
.ara-ok{flex:none;width:16px;height:16px;color:var(--gray-400,#a6adb7)}
.ara-oge.is-aktif .ara-ok,.ara-oge:hover .ara-ok{color:var(--text,#16181d)}

.ara-bos{padding:1rem 1.1rem 1.1rem}
.ara-bos-bas{margin:0 0 .65rem;color:var(--gray-500,#7c848f);font:700 .72rem/1.2 var(--font-body,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase}
.ara-cipler{display:flex;flex-wrap:wrap;gap:.45rem}
.ara-cip{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border:1px solid var(--gray-200,#e2e5e9);border-radius:999px;background:#fff;color:var(--text,#16181d);font:600 .85rem/1 var(--font-body,system-ui,sans-serif);cursor:pointer;transition:border-color .2s,background .2s}
.ara-cip:hover,.ara-cip:focus-visible{border-color:var(--brand,#ffb800);background:#fff8e6;outline:none}
.ara-cip svg{width:14px;height:14px;color:var(--gray-400,#a6adb7)}
.ara-yok{margin:0 0 .35rem;font:600 .98rem/1.4 var(--font-body,system-ui,sans-serif)}
.ara-yok-alt{margin:0 0 .9rem;color:var(--gray-600,#59606b);font-size:.88rem;line-height:1.5}
.ara-yok-a{display:flex;flex-wrap:wrap;gap:.5rem}
.ara-yok-a a{display:inline-flex;align-items:center;gap:.45rem;padding:.65rem 1rem;border-radius:10px;font:700 .88rem/1 var(--font-body,system-ui,sans-serif);text-decoration:none}
.ara-yok-a .wa{background:#25d366;color:#fff}
.ara-yok-a .wa:hover{background:#1ebe5b}
.ara-yok-a .wa svg{width:18px;height:18px}
.ara-yok-a .tum{background:var(--gray-100,#eef0f2);color:var(--text,#16181d)}
.ara-yok-a .tum:hover{background:var(--gray-200,#e2e5e9)}
.ara-yukleniyor{padding:1.1rem;color:var(--gray-500,#7c848f);font-size:.9rem}
.ara-ipucu{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 1.1rem;border-top:1px solid var(--gray-100,#eef0f2);background:var(--gray-50,#f7f8f9);color:var(--gray-500,#7c848f);font-size:.75rem}
.ara-ipucu kbd{display:inline-block;min-width:1.4em;padding:.1rem .35rem;border:1px solid var(--gray-300,#cdd2d8);border-bottom-width:2px;border-radius:4px;background:#fff;color:var(--gray-600,#59606b);font:600 .7rem/1.2 var(--font-body,system-ui,sans-serif);text-align:center}
.ara-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* öneri paneli açıkken hero'nun taşma kırpması kalkar ki liste alttaki bölümün üstüne uzanabilsin */
.mega-hero.ara-acik{overflow:visible;overflow-x:clip}

/* masaüstü: çubuk ile başlık metni arasında boşluk */
@media (min-width:901px){.ara{padding-bottom:1.6rem}}
/* tablet / mobil: arama çubuğu header'ın hemen altında, hero metninin üstünde */
@media (max-width:900px){
  .ara{order:-2;padding-top:.85rem;margin:0}
  .ara-kutu{height:3.25rem;padding:.35rem .35rem .35rem .85rem}
  .ara-btn{padding:0 1rem}
  .ara-panel{max-height:min(26rem,calc(100dvh - 12rem))}
}
@media (max-width:640px){
  /* sekmeler satırı doldurur; en dar telefonda sığmazsa yana kayar */
  .ara-sekmeler{gap:.25rem}
  .ara-sekme{flex:1 0 auto;justify-content:center;padding:.58rem .6rem .52rem;font-size:.8rem}
  .ara-kutu{gap:.35rem;height:3.1rem;padding-left:.75rem;border-radius:0 12px 12px 12px}
  .ara-ikon{display:none}
  .ara-girdi{font-size:1rem}
  .ara-btn{width:2.6rem;padding:0;justify-content:center}
  .ara-btn span{display:none}
  .ara-panel{border-radius:12px}
  .ara-oge{gap:.7rem;padding:.5rem .8rem}
  .ara-gorsel{width:42px;height:42px}
  .ara-ad{font-size:.9rem}
  .ara-grup-bas{padding:.55rem .8rem .3rem}
  .ara-bos{padding:.9rem .8rem 1rem}
  .ara-ipucu{display:none}
  /* dar ekranda fiyat, adın altındaki satıra iner */
  .ara-oge .ara-fiyat{display:none}
  .ara-alt .ara-fiyat-m{color:var(--text,#16181d);font-weight:700}
}
@media (min-width:641px){.ara-fiyat-m{display:none}}

/* iç sayfalar: header'ın hemen altında açık renkli arama şeridi (anasayfadaki hero çubuğunun sade hâli) */
.ara--serit{z-index:40;margin:0;padding:.85rem 0 .95rem;pointer-events:auto;background:var(--gray-50,#f7f8f9);border-bottom:1px solid var(--gray-200,#e2e5e9)}
.ara--serit .ara-sekme{padding:.5rem 1rem .45rem;border-color:var(--gray-200,#e2e5e9);background:var(--gray-100,#eef0f2);color:var(--gray-600,#59606b);font-size:.8rem;-webkit-backdrop-filter:none;backdrop-filter:none}
.ara--serit .ara-sekme:hover{background:var(--gray-200,#e2e5e9);color:var(--text,#16181d)}
.ara--serit .ara-sekme[aria-selected=true]{background:#fff;border-color:var(--gray-200,#e2e5e9);color:var(--ink-900,#101216)}
.ara--serit .ara-kutu{height:3.1rem;box-shadow:0 0 0 1px var(--gray-200,#e2e5e9),0 6px 18px #1012160f}
.ara--serit .ara-kutu:focus-within{box-shadow:0 0 0 1px var(--brand,#ffb800),0 0 0 4px #ffb80040}
.ara--serit .ara-panel{box-shadow:0 20px 48px #10121633,0 0 0 1px #1012161f}
@media (min-width:901px){.ara--serit{padding-bottom:.95rem}}
@media (max-width:900px){.ara--serit{order:0;padding:.7rem 0 .8rem}.ara--serit .ara-kutu{height:2.9rem}}
/* telefonda şerit kısa kalsın: sekmeler gizlenir, kutu tam yuvarlak köşeli olur */
@media (max-width:640px){.ara--serit .ara-sekmeler{display:none}.ara--serit .ara-kutu{height:2.8rem;border-radius:12px}}
@media (prefers-reduced-motion:reduce){.ara-sekme,.ara-btn,.ara-cip{transition:none}}