/* =========================
   NAVBAR
   ========================= */
.navbar {
  background-color: #fff;
  padding: 0;
  font-family: "Poppins", Sans-serif;
  border-bottom: 3px solid #d2d2d2;
}
.navbar ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; justify-content: center; align-items: center;
}
.navbar ul li { position: relative; margin: 0 10px; }
.navbar ul li a {
  text-decoration: none; color: #525252; background-color: #fff;
  display: block; font-size: 14px; padding: 5px;
  transition: color .3s ease, background-color .3s ease;
}
.navbar ul li .alt-kategoriler {
  display: none; position: absolute; top: 100%; left: 0; width: 400px;
  background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,.1); z-index: 1100; padding: 0;
}
.navbar ul li .alt-kategoriler li a {
  color: #000; background: #fff; padding: 10px 15px; font-size: 13px;
  transition: background-color .3s ease, color .3s ease;
}
.navbar ul li .alt-kategoriler li a:hover { color: #c1272d; }
.navbar ul li:hover .alt-kategoriler,
.navbar ul li .alt-kategoriler:hover { display: block; }
.navbar ul li:hover > a {
  color: #fff; background-color: #c1272d;
  transition: color .3s ease, background-color .3s ease;
}
@media (max-width: 768px){ .navbar { display: none; } }

/* =========================
   KAYAN BANNER
   ========================= */
.scrolling-banner {
  position: relative; width: 100%; height: 50px; background: #c1272d;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  transition: all .5s ease;
}
.scrolling-banner.hidden { height: 0; padding: 0; margin: 0; overflow: hidden; opacity: 0; }
.scrolling-text { white-space: nowrap; animation: scroll 15s linear infinite; font-size: 18px; color: #fff; }
.close-button {
  position: absolute; top: 50%; right: 20px; transform: translateY(-50%);
  background: none; border: none; color: #fff; font-size: 20px; font-weight: 700; cursor: pointer;
}
@keyframes scroll { 0%{transform: translateX(100%);} 100%{transform: translateX(-100%);} }

/* =========================
   CAROUSEL (genel)
   ========================= */
.carousel-container {
  width: 100vw; height: 385px; overflow: hidden; position: relative; border-top: 5px solid #cccccca1;
}
.carousel-slide { display: flex; width: 400%; height: 100%; transition: transform 1s ease-in-out; }
.carousel-slide img { width: 100vw; height: 385px; object-fit: cover; }
.prev-btn:hover, .next-btn:hover { background-color: rgba(0,0,0,.8); }
@media (max-width: 768px){
  .prev-btn, .next-btn { font-size: 18px; padding: 15px; width: 100%; height: auto; }
}

/* =========================
   GENEL ELEMENTLER
   ========================= */
ul { list-style: none; padding: 0; margin: 0; }
.header-button{
  display:inline-block; padding:8px 18px; border:1px solid #282828; border-radius:10px;
  background:#fff; color:#282828; font-size:16px; text-align:center; cursor:pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.cart{ position: relative; }
.cart-count{
  position:absolute; top:-10px; right:-10px; background:#c1272d; color:#fff; border-radius:50%;
  padding:4px 8px; font-size:14px; font-weight:700; min-width:20px; height:20px; display:flex; align-items:center; justify-content:center;
}
.hosgeldiniz{
  position:absolute; top:-10px; right:5px; background:#c1272d; color:#fff; border-radius:3%;
  padding:4px 8px; font-size:9px; font-weight:700; min-width:20px; height:20px; display:flex; align-items:center; justify-content:center;
}

/* Küçük sepet bump animasyonu */
#cartCount.bump{ animation:bump .28s ease; }
@keyframes bump{ 0%{transform:scale(1)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }

/* =========================
   SİPARİŞLER (siparisler.php)
   ========================= */
.container { max-width: 980px; margin:30px auto; padding:16px; }
.siparis-kutu{
  background:#fff; border-radius:10px; box-shadow:0 2px 8px rgba(230,74,25,.05);
  padding:24px 30px 20px; margin-bottom:30px; position:relative; border:1px solid #fae1d5;
}
.siparis-kutu h3{
  color:#e64a19; margin:0 0 16px; font-size:1.2rem; font-weight:600; letter-spacing:.5px;
  display:flex; justify-content:space-between; align-items:center;
}
.siparis-bilgi-list li{ padding:7px 0; font-size:1rem; border-bottom:1px solid #f3ebe6; }
.siparis-bilgi-list li:last-child{ border:none; }
.edit-link{ color:#e64a19; cursor:pointer; text-decoration:underline; margin-left:8px; font-size:.95rem; font-weight:500; transition: color .2s; }
.edit-link:hover{ color:#b43c10; }
.siparis-table{ width:100%; border-collapse:collapse; background:#fff; }
.siparis-table th, .siparis-table td{ border:1px solid #fae1d5; padding:8px 10px; text-align:left; font-size:.98rem; }
.siparis-table th{ background:#fff3e0; color:#e64a19; font-weight:600; letter-spacing:.5px; }
.siparis-table tr:nth-child(even){ background:#faf6f2; }
.modal{
  display:none; position:fixed; z-index:5000; inset:0;
  background:rgba(0,0,0,.5); align-items:center; justify-content:center; padding:18px;
}
.modal-content{
  background:#fff; border-radius:8px; padding:30px 24px; width:100%; max-width:420px;
  box-shadow:0 6px 28px rgba(44,38,39,.07); position:relative; border:2px dashed #e64a19;
}
.modal-content .close{ position:absolute; top:11px; right:18px; font-size:24px; color:#e64a19; cursor:pointer; z-index:2; }
.modal-content h3{ margin:0 0 18px; color:#e64a19; }
.modal-content input, .modal-content textarea{
  width:100%; margin-bottom:14px; padding:9px 11px; border-radius:5px; border:1px solid #e6e3e1;
  font-size:1rem; background:#faf9f7; transition:border .2s;
}
.modal-content input:focus, .modal-content textarea:focus{ border-color:#e64a19; outline:none; }
.modal-content button.btn-primary{
  background:linear-gradient(45deg,#e64a19,#d84315); color:#fff; border:none; border-radius:5px;
  padding:11px 26px; font-size:1rem; cursor:pointer; font-weight:500;
  transition: background .2s, transform .18s; box-shadow:0 2px 9px rgba(230,74,25,.11);
}
.modal-content button.btn-primary:hover{ background:linear-gradient(45deg,#d84315,#e64a19); transform: translateY(-2px); }
@media (max-width: 600px){
  .container{ padding:6px; }
  .siparis-kutu{ padding:15px 7px 12px; }
  .modal-content{ padding:20px 8px; }
  .siparis-table th, .siparis-table td{ font-size:.9rem; padding:7px 3px; }
}

/* =========================
   LIVE SEARCH — Ortak
   ========================= */
.variant-badge{ display:inline-block; background:#fff0f0; color:#c1272d; border-radius:999px; padding:3px 8px; font-size:11px; font-weight:700; margin-left:8px; }

.search-results.loading::after,
.m-search-results.loading::after{
  content:"Yükleniyor…"; display:block; padding:12px; text-align:center; color:#6b7280; font-size:13px;
}

/* aktif satır (opsiyonel) */
.res-item.active{ background:#fff2f2 !important; }

/* Desktop dropdown görünürlük helper */
.search-results{ display:none; }
.search-results.show{ display:block; }

/* Mobilde header’daki ana arama gizli; menüde var */
@media (max-width: 900px){
  #live-search-form, .search { display: none !important; }
  #searchResults, .search-results { display: none !important; } /* desktop kutusunu kapat */
}

/* =========================
   DESKTOP: Arama inputu + dropdown
   ========================= */
#live-search-form{ position: relative; flex: 1 1 560px; max-width: 720px; }
#live-search-form .inputBox{
  position: relative; background:#fff; border:2px solid #dcdcdc; border-radius:12px; transition: border-color .2s, box-shadow .2s;
}
#live-search-form .inputBox:focus-within{ border-color:#c1272d; box-shadow:0 0 0 3px rgba(193,39,45,.12); }
#live-search-form .inputBox input{
  height:56px; line-height:56px; font-size:16px; padding:0 48px 0 16px; width:100%;
  border:0; outline:0; background:transparent; color:#222;
}
#live-search-form .inputBox i.fa-magnifying-glass{
  position:absolute; right:12px; top:50%; transform: translateY(-50%); font-size:20px; color:#c1272d; pointer-events:none;
}
/* Desktop sonuç kutusu: inputun ALTINDA */
.search-results{
  position:absolute; left:0; right:0; top:calc(100% + 6px); margin:0;
  background:#fff; border:2px solid #e6e6e6; border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.08);
  max-height:520px; overflow-y:auto; z-index:2000; display:none;
}
.search-results.show{ display:block; }

/* =========================
   MOBİL OFFCANVAS: Arama + dropdown
   ========================= */
.offcanvas{ position: fixed; inset: 0; z-index: 4000; }
.offcanvas-search form{ position: relative; }
.offcanvas-search input{
  height:52px; width:100%; border:2px solid #dcdcdc; border-radius:12px;
  padding:0 52px 0 14px; font-size:15px; background:#fff; outline:none;
  transition: border-color .2s, box-shadow .2s;
}
.offcanvas-search input:focus{ border-color:#c1272d; box-shadow:0 0 0 3px rgba(193,39,45,.12); }
.offcanvas-search button{
  position:absolute; right:6px; top:50%; transform: translateY(-50%);
  height:40px; width:40px; border-radius:10px; border:none; background:#c1272d; color:#fff; cursor:pointer;
}

/* Mobil sonuç kutusu: akışta ve tam genişlik */
.m-search-results{
  position: static !important; width:100% !important; max-width:none !important;
  margin-top:8px; background:#fff; border:2px solid #e6e6e6; border-radius:12px; box-shadow:0 8px 22px rgba(0,0,0,.06);
  max-height:60vh; overflow-y:auto; display:none; box-sizing: border-box; z-index:4100;
}
.m-search-results.show{ display:block !important; }

/* =========================
   SONUÇ SATIRI: sadece görsel + ad
   ========================= */
.search-results .result,
.m-search-results .result{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:12px 14px; text-decoration:none; color:#333; border-bottom:1px solid #f2f2f2;
}
.search-results .result:last-child,
.m-search-results .result:last-child{ border-bottom:0; }
.search-results .result:hover,
.m-search-results .result:hover{ background:#fff6f7; }

/* Görsel */
.search-results .result .thumb,
.m-search-results .result .thumb{
  width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid #eee; flex-shrink:0;
}

/* Başlık */
.search-results .result .title,
.m-search-results .result .title{
  font-size:15px; font-weight:600; color:#222; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-width:0;
}

/* Güvence: fiyat alanı varsa görünmesin */
.search-results .price,
.m-search-results .price{ display:none !important; }

/* Desktop küçük ekran spacing */
@media (max-width: 640px){
  #live-search-form{ padding-left:12px; padding-right:12px; }
}
/* ---- OFFCANVAS ARAMA: kutu tam genişlikte ve inputun altına ---- */
.offcanvas-search,
.offcanvas-search form { display:block !important; width:100% !important; }

#mSearchInput { display:block; width:100%; box-sizing:border-box; }

/* Masaüstü dropdown absolute; mobil statik ve %100 */
.search-results { position:absolute; left:0; right:0; top:calc(100% + 6px); }
.m-search-results {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  margin-top: 8px;
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  max-height: 60vh;
  overflow-y: auto;
  display: none;
  box-sizing: border-box;
  z-index: 4100;
}
.m-search-results.show { display:block !important; }

/* Sadece görsel + başlık */
.m-search-results .result,
.search-results .result {
  /*display: grid;*/
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #f2f2f2;
}
.m-search-results .result:last-child,
.search-results .result:last-child { border-bottom:0; }
.m-search-results .result:hover,
.search-results .result:hover { background:#fff6f7; }

.m-search-results .thumb,
.search-results .thumb {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 8px; border: 1px solid #eee;
}
.m-search-results .title,
.search-results .title {
  font-size: 15px; font-weight: 600; color:#222; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-width:0;
}

/* Eğer universal fallback '.ls-floating' devreye girdiyse, offcanvas'ta iptal et */
.offcanvas .ls-floating { display:none !important; }
/* ---- YÜZEN SOL BUTONLAR ---- */
.fab-stack{
  position: fixed;
  top: 110px;               /* ihtiyaca göre oynat */
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 4500;
}
.fab{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid #222;
  background: #fff;
  color: #111; text-decoration: none; font-weight: 800;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.fab:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }

.fab-cart .badge{
  display: inline-flex; align-items:center; justify-content:center;
  min-width: 20px; height: 20px; padding: 2px 6px;
  border-radius: 999px; background: #c1272d; color: #fff; font-size: 12px;
  border: 2px solid #fff; box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.fab-whatsapp{
  border-color: #24d366;
  background: #25d366;
  color: #fff;
}
.fab-whatsapp span{ color:#fff; }

@media (min-width: 769px){
  /* İstersen desktop’ta gizle */
  .fab-stack{ display:none; }


}


/* === FAB: eski dikey görünüm (mobil) + menü altında kalsın === */

/* Menü her zaman üstte */
.offcanvas { z-index: 4000; }

/* Dikey stack */
.fab-stack{
  position: fixed;
  top: 110px;
  left: 8px;
  display: flex;
  flex-direction: column;      /* DİKEY */
  gap: 10px;
  z-index: 3000;               /* offcanvas(4000)’dan düşük => menünün ALTINDA */
}

/* Desktop'ta gizle (istersen) */
@media (min-width: 769px){
  .fab-stack{ display: none; }
}

/* Mobilde yan yana grup EKLEDİYSEK onu EZ: tekrar dikey yap */
@media (max-width: 768px){
  .fab-stack{
    bottom: auto;              /* önceki patch'teki alt sabitlemeyi iptal */
    right: auto;
    flex-direction: column !important;
    justify-content: flex-start;
  }
  .fab{
    flex: 0 0 auto;            /* eşit genişlik zorlamasını iptal et */
    justify-content: flex-start;
    padding: 10px 14px;
    font-size: 14px;
  }
  .fab-cart .badge{
    position: static;          /* metnin yanında kalsın */
    margin-left: 6px;
  }
}


/* FAB hide anim */
.fab.is-hiding {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}


/* OFFCANVAS arama: butonu inputun sağ-üstüne sabitle */
.offcanvas-search form { position: relative; }

.offcanvas-search button {
  position: absolute;
  right: 6px;
  top: 6px;             /* ortalamayı bırak, tepeye sabitle */
  transform: none;      /* translateY(-50%) iptal */
  height: 40px;
  width: 40px;
  border-radius: 10px;
  border: none;
  background: #c1272d;
  color: #fff;
  cursor: pointer;
  z-index: 2;           /* sonuç kutusu içinde “kaymasın” */
}

/* Input yüksekliği 52px; paddingi buna göre ayarlı */
.offcanvas-search input {
  height: 52px;
  padding: 0 52px 0 14px;  /* sağda buton için yer */
}


.trend-wrap{ margin:24px 0; }
.trend-box{ margin-bottom:20px; }
.trend-box h2{ font-size:18px; font-weight:800; margin:0 0 10px; }
.chip-list{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid #e6e6e6;
  background:#fff; color:#333; text-decoration:none; font-weight:700; font-size:13px;
}
.chip:hover{ background:#fff6f7; border-color:#ffd4d8; }

.trend-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px; }
.trend-card{
  display:flex; flex-direction:column; gap:8px; text-decoration:none; border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff;
}
.trend-card img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; }
.trend-card .title{ padding:8px 10px; color:#111; font-weight:700; font-size:14px; line-height:1.25; }
@media (max-width: 900px){ .trend-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }



/* === OFFCANVAS (mobil menü) — sabit başlık/arama, gövde kayar === */
.offcanvas{
  position: fixed;
  right: 0; left: auto; top: 0; bottom: 0;
  width: min(420px, 86vw);
  background:#fff;
  border-left: 3px solid #d2d2d2;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
  z-index: 4000;                 /* menünün üstte kalması için */
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  overscroll-behavior: contain;
}
.offcanvas.open{ transform: translateX(0); }

.offcanvas-head{
  flex: 0 0 56px;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 14px;
  border-bottom: 3px solid #d2d2d2;
  background:#fff;
  position: sticky; top: 0; z-index: 2;
}

.offcanvas-search{
  position: sticky; top: 56px; z-index: 2;  /* başlığın hemen altında sabit */
  background:#fff; border-bottom:1px solid #eee;
  padding: 10px 14px;
}
.offcanvas-search form{ position: relative; }
.offcanvas-search input{
  height: 52px; width: 100%;
  border: 2px solid #dcdcdc; border-radius: 12px;
  padding: 0 52px 0 14px; font-size: 15px;
  background: #fff; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.offcanvas-search input:focus{ border-color:#c1272d; box-shadow:0 0 0 3px rgba(193,39,45,.12); }
.offcanvas-search button{
  position: absolute; right: 6px; top: 6px;
  height: 40px; width: 40px; border-radius: 10px; border: none;
  background: #c1272d; color:#fff; cursor: pointer; z-index: 3;
}

/* Mobil sonuç kutusu: inputun ALTINDA, akışta */
.m-search-results{
  position: static !important;
  display: none;
  margin-top: 8px;
  background:#fff; border:2px solid #e6e6e6; border-radius:12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  max-height: 60vh; overflow-y: auto; z-index: 3;
}
.m-search-results.show{ display:block !important; }
.m-search-results .result{
  display:grid; grid-template-columns:64px 1fr; align-items:center; gap:12px;
  padding:12px 14px; text-decoration:none; color:#333; border-bottom:1px solid #f2f2f2;
}
.m-search-results .result:last-child{ border-bottom:0; }
.m-search-results .thumb{ width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid #eee; }
.m-search-results .title{ font-size:15px; font-weight:600; color:#222; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Gövde: sadece burası scroll olur */
.offcanvas-body{
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px 12px;
  -webkit-overflow-scrolling: touch;
}

/* Akordeon (kategori) — tek satır buton + caret */
.accordion{ list-style:none; margin:0; padding:0; }
.acc-btn{
  width: 100%; background:#fafafa; border:1px solid #ddd; border-radius:10px;
  padding: 12px 14px; margin: 8px 0;
  display:flex; align-items:center; justify-content:space-between;
  font-size: 15px; color:#222;
}
.acc-btn::after{
  content: "▾"; font-size: 14px; transition: transform .2s ease;
}
.acc-btn[aria-expanded="true"]::after{ transform: rotate(180deg); }

/* Panel: yumuşak aç/kapa — JS max-height ayarlıyor */
.acc-panel{
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
}
.acc-panel.open{ /* max-height JS ile atanacak */ }

.acc-panel ul{ list-style:none; margin: 6px 0 4px 0; padding: 0; }
.acc-panel a{
  display:block; padding:9px 10px; color:#525252; text-decoration:none; border-radius:8px;
}
.acc-panel a:hover{ color:#c1272d; background:#fff5f6; }

/* Desktop’ta ana arama, mobilde gizli (menüde var) */
@media (max-width: 900px){
  #live-search-form, #searchResults { display:none !important; }
}


/* ========== N11-style HEADER ARAMA — ESNEK GENİŞLİK ========== */

/* Header satırını gerçekten esnetelim (bazı temalarda yoksa fallback) */
header.logo{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

/* Arama formu: genişliği viewport’a göre esnesin */
#live-search-form{
  /*  min 320px, ideal 42vw, max 720px  */
  flex: 1 1 clamp(320px, 42vw, 720px);
  min-width: 0;              /* taşmayı engelle */
  position: relative;        /* sonuç kutusunu çapa */
}

/* Kutu boyutlarını değişkenle yönetelim */
:root{
  --search-h: 56px;
  --search-fs: 16px;
  --search-icon: 20px;
}
#live-search-form .inputBox{
  position: relative;
  background: #fff;
  border: 2px solid #dcdcdc;
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
#live-search-form .inputBox:focus-within{
  border-color: #c1272d;
  box-shadow: 0 0 0 3px rgba(193,39,45,.12);
}
#live-search-form .inputBox input{
  height: var(--search-h);
  line-height: var(--search-h);
  font-size: var(--search-fs);
  padding: 0 48px 0 14px; /* sağa ikon boşluğu */
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #222;
}
#live-search-form .inputBox i.fa-magnifying-glass{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--search-icon);
  color: #c1272d;
  pointer-events: none;
}

/* Sonuç kutusu inputun TAM ALTINDA ve %100 genişlik */
#live-search-form .search-results{
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  margin: 0;
  background: #fff;
  border: 2px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.08);
  overflow: hidden;
  max-height: 520px;
  overflow-y: auto;
  z-index: 2000;
  display: none;
}
#live-search-form .search-results.show{ display:block; }

/* === KÜÇÜLEN EKRAN KIRILIMLARI (tablet & küçük laptop) === */

/* 1280 ve altı: biraz küçült */
@media (max-width: 1280px){
  #live-search-form{ flex-basis: clamp(300px, 46vw, 640px); }
  :root{ --search-h: 52px; --search-fs: 15px; --search-icon: 19px; }
}

/* 1100 ve altı: daha kompakt */
@media (max-width: 1100px){
  #live-search-form{ flex-basis: clamp(280px, 48vw, 560px); }
  :root{ --search-h: 48px; --search-fs: 14.5px; --search-icon: 18px; }
}

/* 980 ve altı: minimuma yaklaş */
@media (max-width: 980px){
  #live-search-form{ flex-basis: clamp(260px, 52vw, 520px); }
  :root{ --search-h: 44px; --search-fs: 14px; --search-icon: 17px; }
}

/* 900 ve altı: SENİN KURALLARIN — header’daki ana arama gizli, mobil offcanvas aktif */
@media (max-width: 900px){
  #live-search-form{ display: none !important; }
}

/* ——— Satır içeriği sıkışmasın diye header sağ blok esnesin ——— */
#header_sepet{
  flex: 0 0 auto;
}



/* Yatay kaymayı kes */
html, body { overflow-x: hidden; }
img, video, canvas { max-width: 100%; height: auto; }



/* Header arama esnek */
header.logo{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap; }
#live-search-form{ flex:1 1 clamp(320px, 42vw, 720px); min-width:0; position:relative; }
:root{ --search-h:56px; --search-fs:16px; --search-icon:20px; }
#live-search-form .inputBox{ position:relative; background:#fff; border:2px solid #dcdcdc; border-radius:12px; }
#live-search-form .inputBox:focus-within{ border-color:#c1272d; box-shadow:0 0 0 3px rgba(193,39,45,.12); }
#live-search-form .inputBox input{ height:var(--search-h); line-height:var(--search-h); font-size:var(--search-fs);
  padding:0 48px 0 14px; width:100%; border:0; outline:0; background:transparent; color:#222; }
#live-search-form .inputBox i.fa-magnifying-glass{ position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:var(--search-icon); color:#c1272d; pointer-events:none; }
#live-search-form .search-results{ position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:2px solid #e6e6e6;
  border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.08); max-height:520px; overflow:auto; display:none; z-index:2000; }
#live-search-form .search-results.show{ display:block; }

@media (max-width:1280px){ #live-search-form{ flex-basis:clamp(300px, 46vw, 640px); }
  :root{ --search-h:52px; --search-fs:15px; --search-icon:19px; } }
@media (max-width:1100px){ #live-search-form{ flex-basis:clamp(280px, 48vw, 560px); }
  :root{ --search-h:48px; --search-fs:14.5px; --search-icon:18px; } }
@media (max-width:980px){ #live-search-form{ flex-basis:clamp(260px, 52vw, 520px); }
  :root{ --search-h:44px; --search-fs:14px; --search-icon:17px; } }
@media (max-width:900px){ #live-search-form{ display:none !important; } } /* mobilde kapat, offcanvas kullan */





/* Duyuru bandı temel stiller */
.top-banner{position:relative;width:100%;border-bottom:1px solid rgba(0,0,0,.06);z-index:5000;display:none}
.top-banner .tb-inner{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:10px;padding:10px 14px;white-space:nowrap;overflow:hidden;min-height:44px}
.top-banner .tb-cta{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.14);color:inherit;border:1px solid rgba(255,255,255,.25);text-decoration:none}
.top-banner .tb-cta:hover{background:rgba(255,255,255,.22)}
.top-banner .tb-close{background:transparent;border:0;font-size:20px;cursor:pointer;color:inherit;opacity:.85}
.top-banner .tb-close:hover{opacity:1}

/* BU SINIF > her şeyi ezer */
.top-banner.tb-active{display:block !important;visibility:visible !important;opacity:1 !important}

@media (max-width:768px){
  .top-banner .tb-inner{grid-template-columns:auto 1fr auto}
  .top-banner .tb-cta{display:none}
}

@media (max-width:1440px){
  .navbar ul li a {
  text-decoration: none; color: #525252; background-color: #fff;
  display: block; font-size: 12px; padding: 3px;
}
}