@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

:root{
  --ana-font: 'Inter';
  --kategori-font: 'Poppins';
}

html{
  font-family: var(--ana-font), sans-serif;
}

body{
  font-family: inherit;
}

/* istersen reset: */
*, *::before, *::after{
  font-family: inherit;
}

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  touch-action: pan-y; /* sadece yukarı-aşağı kaydırmaya izin ver */
}

.fixed-top {
  z-index: 1000 !important;
}

input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none;
  box-shadow: none;
}

.currency-option, .lang-option {
  color: #052440 !important;
}

#govde {
  flex: 1; /* Sayfa içeriği büyüdükçe genişler */
}

[v-cloak] {
  display: none; /*Vue önermesi*/
}

/*
.ilk-harf-buyuk { 
  text-transform: uppercase; 
}
*/

.hepsi-buyuk {
  text-transform: uppercase;
}

.basharf-buyuk {
  text-transform: capitalize;
}

a {
  text-decoration: none;
  color: black;
  cursor: pointer;
  text-decoration:none !important;
}

/* Menü için yumuşak geçişler */
.custom-offcanvas {
  position: fixed;
  top: 0;
  width: 350px;
  height: 100%;
  background: black;
  color: #f0f8ff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.5s ease-in-out;
  z-index: 2050;
  overflow-y: auto; /* İçerik doldukça kaydırma çubuğunu etkinleştir */
  scrollbar-color: #888 transparent; /* Kaydırma çubuğu rengi ve arka plan */
  scrollbar-width: thin; /* Kaydırma çubuğunu ince yap */
  -webkit-overflow-scrolling: touch; /*Mobil cihazlarda kaydırma deneyimini artıtırıyor*/
  padding: 8px;
  will-change: transform;
}


/* Başlangıçta menüyü gizle */
.offcanvas-start {
  left: -350px;
}

.offcanvas-end {
  right: -350px;
}

/* Açılma hareketleri */
.show.offcanvas-start {
  transform: translateX(350px);
}

.show.offcanvas-end {
  transform: translateX(-350px);
}

.custom-offcanvas::-webkit-scrollbar {
  width: 8px; /* Kaydırma çubuğunun genişliği */
}

.custom-offcanvas::-webkit-scrollbar-track {
  background: transparent; /* Arka planı şeffaf yap */
}

.custom-offcanvas::-webkit-scrollbar-thumb {
  background: #888; /* Kaydırma çubuğu rengi */
  border-radius: 4px; /* Yuvarlak köşeler */
}

  .custom-offcanvas::-webkit-scrollbar-thumb:hover {
      background: #555; /* Fare üzerine gelindiğinde rengi değiştir */
  }

/* Akordeon menüsündeki liste elemanlarının mesafesini artırıyoruz */
.accordion li {
  padding-left: 8px;
  /*border-bottom: 1px solid #ddd;*/
}

.accordion li > a {
  text-transform: uppercase;
  font-size: 13px;
  line-height: 28px; /*Açılıp kapanırken oluşan titreme*/
  color: #fff !important;
}

.accordion li:last-child {
  border-bottom: none;
}

.kat-satir{
  position: relative;
}

/* Girinti: level arttıkça link biraz içeri girsin */
.kat-satir .kat-link{
  display: block;
  padding-right: 44px;
  padding-left: calc(0px + (var(--kat-level, 0) * 7px));
  color: #fff !important;
  font-size: smaller;
  font-weight: 100 !important;
  font-family: 'Poppins', sans-serif;
}

/* Sağ ok: en sağa yapışık, kendi alanı var */
.kat-ok{
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: #fff !important;
}

/* Ok ikonu yumuşak döner */
.kat-ok i{
  display:inline-block;
  transition: transform .18s ease;
}

/* Açık olanların oku aşağı baksın */
.kat-ok[aria-expanded="true"] i{
  transform: rotate(90deg);
}


/* ✅ RTL override */
html[dir="rtl"] .kat-ok{
  left: 6px;
  right: auto;
}

html[dir="rtl"] .kat-satir .kat-link{
  /* ok solda olduğu için boşluk sol tarafta */
  padding-left: 44px;

  /* girinti sağdan artsın */
  padding-right: calc(12px + (var(--kat-level, 0) * 14px));
}

/* ✅ İkon yönünü RTL’de aynala (kapalıyken sağ ok yerine sol ok algısı) */
html[dir="rtl"] .kat-ok i{
  transform: scaleX(-1);
}

/* Açıkken aşağı baksın: LTR'de rotate(90deg) yapıyorduk.
   RTL’de hem aynala hem döndür. */
html[dir="rtl"] .kat-ok[aria-expanded="true"] i{
  transform: scaleX(-1) rotate(90deg);
}



/* Arka plan gölgesi (backdrop) */
.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  z-index: 1049;
}

  /* Gölge aktif olunca görünür */
  .backdrop.show {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s ease-in-out;
  }


.filter-group label {
  display: flex;
  align-items: center;
  /*margin-bottom: 8px;*/
  cursor: pointer;
  color: #333;
  line-height: 1.2;
}

.filter-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #999;
  border-radius: 3px;
  margin-right: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0; /* kutucuğun boyutu sabit kalsın */
  margin-top: 0; /* eski hizalama problemini düzeltir */
}

.form-check * {
  cursor: pointer;
}

.form-check-input:checked {
  background-color: #000;
  border-color: #000;
}


.filter-group input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.filter-group > *, .form-select {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
}

.filter-titles {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #222;
}

.filter-search-input {
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
}

.filtreSelecti option {
  background-color: #fff; /* Beyaz zemin */
  color: #000; /* Siyah yazı */
}

.filtreSelecti option:hover,
.filtreSelecti option:focus,
.filtreSelecti option:checked,
.filtreSelecti option:active {
  background-color: #eee !important; /* Hover'da açık gri zemin */
  color: #000 !important; /* Yazı rengi siyah */
}

.ui-widget-header {
  background: #000000 !important;
  border: 0px !important;
}

/* Kulakçıkları yuvarlak ve siyah yapar */
.sliderRange .ui-slider-handle {
  border: 1px solid #aaa;
  background: black !important;
  border-radius: 50% !important;
  width: 18px !important;
  height: 18px !important;
  box-shadow: none !important; /* aktifken mavi glow'u engeller */
}

/* Kulakçık hover veya aktif olunca da aynı kalır */
.sliderRange .ui-slider-handle:focus,
.sliderRange .ui-slider-handle:hover,
.sliderRange .ui-slider-handle:active {
  background: black !important;
  box-shadow: none !important;
}

.isaretlenmis_kriter_listesi_ul {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.isaretlenmis_kriter_listesi_ul li {
  background-color: #000;
  color: #fff;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 0.800rem;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  flex-grow: 1;
  flex-basis: auto;
}

.isaretlenmis_kriter_listesi_ul li a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
}

.isaretlenmis_kriter_listesi_ul li a:hover {
  text-decoration: none;
}

/* =====================================================
   KATEGORİ LİSTESİ – TEMEL
===================================================== */
.kategori-liste{
  list-style:none;
  padding:0;
  margin:0;
}

.kategori-liste li{
  margin:0;
  padding:2px 0 2px 0;
}

/* =====================================================
   SATIR / LİNK
===================================================== */
.kategori-liste li a{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;

  padding:6px 12px;
  border-radius:6px;

  text-decoration:none;
  color:#333;

  font-family:'Poppins', sans-serif;
  font-size:13px;
  font-weight:400;
  line-height:1.4;

  transition:background-color .2s ease, color .2s ease;
}

.kategori-liste li a:hover{
  background-color:#f2f2f2;
}

/* =====================================================
   AKTİF KATEGORİ
===================================================== */
.kategori-liste li.aktif-kategori a{
  background-color:#000;
  color:#fff;
  padding:8px 12px; /* tek yerden kontrol */
}

.kategori-liste li.aktif-kategori .kat-ikon{
  color:#fff;
}

/* =====================================================
   DERİNLİK (MERDİVEN)
===================================================== */
.me-10 { margin-left:14px !important; }
.me-20 { margin-left:28px !important; }
.me-30 { margin-left:42px !important; }
.me-40 { margin-left:56px !important; }
.me-50 { margin-left:70px !important; }
.me-60 { margin-left:84px !important; }

/* =====================================================
   İKONLAR
===================================================== */
.kat-ikon{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:14px;
  min-width:14px;
  font-size:14px;
  color:#666;

  transition:color .2s ease;
}

/* sağ ok: her zaman en sağa */
.kat-ikon.son{
  margin-left:auto;
  flex:0 0 auto;
}

/* kare içinde + */
.kat-ikon.kutu-plus{
  width:14px;
  height:14px;
  border:1px solid #bbb;
  border-radius:3px;
  font-size:11px;
  font-weight:600;
  color:#777;
}

.kategori-liste li a:hover .kat-ikon.kutu-plus{
  color:#666;
}

.kat-ikon.bos{
  visibility: hidden;   /* görünmez */
}



/* =====================================================
   DİĞER
===================================================== */
.gg_0_0 {
  display: none;
}

#kategori_tumunu_goster_button {
  cursor: pointer;
}


#konum{
  opacity: 0.8;
}
#konum nav{ width:100%; }

/* tek satır + yatay scroll */
#konum .breadcrumb{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling:touch;

  margin:0;
  padding: 0 12px 0; /* okların üstüne binmesin: sağ/sol boşluk */
  gap:0px;

  /* scrollbar gizle */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#konum .breadcrumb::-webkit-scrollbar{ display:none; }

#konum .breadcrumb-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10px;
  flex:0 0 auto;
  white-space:nowrap;
}

#konum .breadcrumb-sep{
  opacity:.55;
  font-size:14px;
}

/* Son item */
#konum .breadcrumb-item.active .breadcrumb-current{
  opacity:.85;
  cursor:default;
}

/* Bootstrap "/" kapalı kalsın */
#konum .breadcrumb-item + .breadcrumb-item::before{
  content:none !important;
}

/* RTL ok yönü */
html[dir="rtl"] #konum .breadcrumb-sep{
  transform: scaleX(-1);
}

/* --- OKLAR --- */
#konum .bc-wrap{
  position:relative;
  width:100%;
}

#konum .bc-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border:0;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  opacity:.85;
  cursor:pointer;
  z-index:5;
}

#konum .bc-arrow:hover{ opacity:1; }

/* mantıksal konum: LTR’de sol/sağ, RTL’de otomatik tersler */
#konum .bc-arrow.bc-start{ inset-inline-start: 4px; }
#konum .bc-arrow.bc-end  { inset-inline-end: 4px; }

/* gizlenme */
#konum .bc-arrow.is-hidden{
  opacity:0;
  pointer-events:none;
}

/* ikon boyutu */
#konum .bc-arrow i{ font-size:16px; opacity:.8; }

#konum .bc-arrow{
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;
}


/* RTL’de ikonları çevir (LineAwesome angle left/right) */
html[dir="rtl"] #konum .bc-arrow i{
  transform: scaleX(-1);
}

/* opsiyonel: mobilde son kırıntı uzunsa kısalt */
@media (max-width:576px){
  #konum .breadcrumb-current{
    max-width:65vw;
    overflow:hidden;
    text-overflow:ellipsis;
    display:inline-block;
    vertical-align:bottom;
  }
}








.pagination {
  --bs-pagination-color: #000;
  --bs-pagination-hover-color: #000;
  --bs-pagination-active-bg: #000;
  --bs-pagination-active-border-color: #ffffff00;
  --bs-pagination-active-color: #fff;
  --bs-pagination-border-color: #ffffff00;
  --bs-pagination-disabled-bg: #ffffff;
  --bs-pagination-disabled-border-color: #ffffff00;
  --bs-pagination-border-width: 1;
  --bs-pagination-border-color: #ffffff00;
  --bs-pagination-hover-bg: #ffffff00;
  --bs-pagination-focus-box-shadow: #ffffff;
  --bs-pagination-focus-bg: #ffffff;
  --bs-pagination-font-size: 0.8rem;
}

.text-truncate-custom {
  font-size: clamp(1rem, 2.5vw, 1.7rem); /* ekran küçüldükçe küçülür */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#katalog-toplan-turun-adeti {
  font-size: clamp(0.7rem, 1.5vw, 0.8rem); /* ekran küçüldükçe küçülür */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-item .active {
  border-radius: 50%;
}

#toggleBtn {
  position: fixed;
  left: 50px;
  bottom: 50px;
  z-index: 999;
  padding: 15px 15px 15px 15px;
  background-color: #000;
  color: white !important;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}


#sidePanel {
  position: fixed;
  top: 0;
  left: -350px; /* Başlangıçta ekran dışında */
  width: 80%;
  max-width: 330px;
  height: 100vh;
  background-color: #fefefe;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
  transition: left 0.3s ease;
  z-index: 1028;
  padding: 20px;
  margin-bottom: 100px;
  overflow-y: auto;
  /*filter: invert(1);*/
}

  #sidePanel.open {
      left: 0; /* içeri gir */
  }

  #sidePanel > * {
      padding: 0 !important;
      margin-right: 0 !important;
      margin-top: 0 !important;
  }

#dragHandle {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  z-index: 10;
  background: transparent;
  /*background: linear-gradient(to bottom, white 0%, white 25%, black 50%, white 75%, white 100%);*/
}

/* Arka plan gölgesi (backdrop) */
.backdropFilteler {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
  z-index: 1028;
}

  /* Gölge aktif olunca görünür */
  .backdropFilteler.show {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.3s ease-in-out;
  }


footer {
  flex-shrink: 0; /* Footer'ın küçülmesini engeller */
}

.img-frame {
box-sizing: border-box;               /* border dolmaz dışarıya */
width: 100px;                          /* kare genişliği */
aspect-ratio: 1;                       /* kare yüksekliği */
border: 2px solid rgb(235 235 235 / 40%); 
border-radius: 25px;                    /* hafif yuvarlak köşe */
overflow: hidden;                      /* taşanı kırp */
}
.img-frame img {
width: 100%;
height: 100%;
object-fit: cover;                     /* kapsayıcıyı doldur, kırp */
}



/*ARAMA SONUÇLARI*/
.aramaKutusuLayer {
display: none;
position: fixed;
width: 100%;
/*max-width: 500px;*/
z-index: 1001;
}

/* Açık hâli */
.aramaKutusuLayer.active {
display: block;
}

/* Şık kutu stili */
.search-box {
position: relative;
background: #fff;
border: 1px solid rgb(0 0 0 / 50%);      /* soluk gri sınır */
border-radius: 30px;                     /* oval köşeler */
padding: 0.5rem 1rem;
display: flex;
align-items: center;
}

/* Input stili */
.search-box input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 1rem;
padding: 0.5rem;
}

/* Kapatma ikonu (X) */
#closeSearch {
font-size: 1.2rem;
color: rgba(0,0,0,0.5);
cursor: pointer;
margin-left: 0.5rem;
}

/* Input’a odaklanınca kutu etrafını biraz vurgulayalım */
.search-box input:focus + #closeSearch,
.search-box input:focus {
border-radius: 30px;
}



/* ============================================================
   QUICK SEARCH LAYER + RESULTS (DERLENMİŞ / TOPLANMIŞ)
   - Desktop: panel içi 2 kolon (kategori + ürünler) eş yükseklik
   - Scroll: qr-side ve qr-main kendi içinde scroll
   - Mobile: tam ekran sonuç
   ============================================================ */

/* ---------- Arka plan blur (sayfayı kilitle) ---------- */
.blurred{
  filter: blur(7px);
  transition: filter .3s ease;
  pointer-events: none;
}

/* ---------- Arama layer (tam ekran) ---------- */
#aramaLayer{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2000;
  background: rgba(0,0,0,0.18);
}
#aramaLayer.active{ display:block; }

/* Search box üstte */
#aramaLayer .search-box{
  position: relative;
  z-index: 2001;
  width: min(80%, 92vw);
  margin: 80px auto 0;
}

/* Quick results (panel) */
.quick-results{
  display:none;
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 100%;
  max-height: calc(100vh - 140px);
  overflow: hidden;

  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.14);
  z-index: 2002;

  transform: translateY(-6px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.quick-results.is-open{
  opacity:1;
  transform: translateY(0);
}
#quickResults{ z-index:2002; }

/* İç yapı: header sticky + body kalan alan */
.qr-inner{
  display:flex;
  flex-direction:column;
  /* Kritik: panel max-height ile aynı yüksekliği aldır */
  height: calc(100vh - 140px);
  max-height: calc(100vh - 140px);
}

/* Üst başlık */
.qr-head{
  position: sticky;
  top: 0;
  z-index: 2;

  padding: 10px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);

  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.qr-head .qr-title{
  font-size:.9rem;
  font-weight:600;
  color:#111;
  margin:0;
}
.qr-head .qr-actions{
  display:flex;
  gap:8px;
  align-items:center;
}

/* Sağdaki pill/link */
.qr-pill{
  font-size: .78rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.7);
  color:#111;
  text-decoration:none;
  white-space:nowrap;
  /* Sende gizliydi; istersen aç: display:inline-flex; */
  display:inline-flex;
}

/* Body: scroll’u burada kapatıyoruz, yükseklik full */
.qr-body{
  flex: 1;
  overflow: hidden;            /* kritik */
  padding: 12px 12px 12px 12px;
}

/* ============================================================
   2 KOLON LAYOUT (Kategori + Ürünler)
   ============================================================ */
.qr-layout{
  display:flex;
  gap:12px;
  align-items:stretch;
  height:100%;                 /* kritik: qr-body yüksekliğini doldur */
  min-height: 0;               /* flex overflow fix */
}

/* Sol sidebar (kategori) */
.qr-side{
  width: 260px;
  min-width: 240px;

  border-right:1px solid rgba(0,0,0,0.08);
  padding-right:10px;

  height:100%;
  overflow:auto;               /* kritik: kendi içinde scroll */

  -webkit-overflow-scrolling: touch;
}

/* Sağ ana alan (ürünler) */
.qr-main{
  flex:1;
  min-width:0;

  height:100%;
  overflow:auto;               /* kritik: ürünler kendi içinde scroll */

  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}

/* Sidebar başlık (opsiyonel) */
.qr-cats-title{
  font-size:.82rem;
  font-weight:600;
  margin: 2px 0 10px 0;
  color:#111;
}

/* Kategori item */
.qr-cat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
  white-space:nowrap;
  text-decoration:none;
  color: inherit;

  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.qr-cat:hover{ background: rgba(0,0,0,0.05); }
.qr-cat.is-active{
  background:#000;
  color:#fff;
  border-color:#000;
}
.qr-cat .qr-cat-count{
  font-size:12px;
  opacity:.75;
}

/* Geri butonu */
.qr-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background: transparent;
  cursor:pointer;
  user-select:none;
  font-size:12px;
}
.qr-back:hover{
  background:#000;
  color:#fff;
  border-color:#000;
}

/* ============================================================
   GRID KARTLAR (ÜRÜNLER)
   ============================================================ */
.items-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  padding-bottom: 14px;
}

.qr-card{
  display:flex;
  flex-direction:column;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;

  background: rgba(255,255,255,0.9);
  border:1px solid rgba(0,0,0,0.07);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.qr-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.12);
  border-color: rgba(0,0,0,0.14);
}

.qr-thumb{
  height: 140px;
  position: relative;
  aspect-ratio: 1 / 1;
}
.qr-thumb img{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}

.qr-info{
  padding:10px 10px 12px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.qr-name{
  font-size:.8rem;
  font-weight:600;
  line-height:1.40;
  color:#111;

  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.qr-meta{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  overflow:hidden;
  font-size:.7rem;
  color: rgba(0,0,0,.70);
}

/* ---------- Skeleton ---------- */
.qr-skel .qr-thumb::after,
.qr-skel .qr-name::after,
.qr-skel .qr-meta::after{
  content:"";
  display:block;
  border-radius:10px;
  background: linear-gradient(90deg,
    rgba(0,0,0,0.05),
    rgba(0,0,0,0.10),
    rgba(0,0,0,0.05)
  );
  background-size:200% 100%;
  animation: qrShimmer 1.1s infinite;
}
.qr-skel .qr-thumb::after{ position:absolute; inset:0; border-radius:0; }
.qr-skel .qr-name{ position:relative; }
.qr-skel .qr-name::after{ height:16px; margin-top:2px; }
.qr-skel .qr-meta{ position:relative; }
.qr-skel .qr-meta::after{ height:12px; margin-top:6px; width:70%; }

@keyframes qrShimmer{
  0%{ background-position: 0% 0; }
  100%{ background-position: 200% 0; }
}

/* ---------- Dark mode (opsiyonel) ---------- */
@media (prefers-color-scheme: dark){
  .quick-results{
    background: rgba(18,18,18,0.78);
    border-color: rgba(255,255,255,0.10);
  }
  .qr-head{
    background: rgba(18,18,18,0.62);
    border-bottom-color: rgba(255,255,255,0.10);
  }
  .qr-head .qr-title{ color: rgba(255,255,255,0.92); }
  .qr-pill{
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.9);
  }
  .qr-card{
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
  }
  .qr-name{ color: rgba(255,255,255,0.92); }
  .qr-meta{ color: rgba(255,255,255,0.60); }
  .qr-cat{
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
  }
  .qr-cat:hover{ background: rgba(255,255,255,0.10); }
}


.sabit_reklamlar {
/* Taşmaları gizlemek için */
overflow: hidden;
/* Ölçek animasyonu için */
transition: transform 0.3s ease;
/* Ölçeklenirken merkezden büyüsün */
transform-origin: center center;
}

.sabit_reklamlar:hover {
/* %5 büyütüyoruz */
transform: scale(1.05);
/* Üstte gözüksün, komşu container’ın üstüne çıkmasın diye gerekirse */
z-index: 1;
}

.mobil_reklamlari { padding:1.5rem 0 1.5rem 0; }

@media (min-width: 0px) and (max-width: 1399.98px) {
  .masaustu_reklamlari {
      display:none;
  }

  .mobil_reklamlari {
      display:block;
  }
}

@media (min-width: 1399.98px) {
  .masaustu_reklamlari {
      display:block;
  }

  .mobil_reklamlari {
      display:none;
  }
}

.aciklama-kutusu {
  max-height: 150px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: max-height 0.6s ease;
}

.aciklama-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to top, white, transparent);
  pointer-events: none;
}

.aciklama-devami {
  position: absolute;
  bottom: 10px;
  right: 15px;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.9rem;
  font-weight: bold;
  color: #000;
  pointer-events: none; /* Bu metne tıklanmayacak, tüm kutuya tıklama olacak */
}

.aciklama-kutusu.aciklama-acik {
  max-height: 2000px; /* Yeterince büyük bir değer */
  transition: max-height 1s ease;
}

.aciklama-kutusu.aciklama-acik .aciklama-gradient {
  display: none;
}




/* GRID: otomatik sütun, min genişlik 240px, arada 1rem boşluk */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
align-items: stretch; /* tüm kartlar aynı hizada, eşit yükseklik */
}

/* TEMEL CARD */
.boutique-card {
background: #fff;
border-radius: .75rem;
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
transition: transform .25s, box-shadow .25s;
}
.boutique-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 36px rgba(0,0,0,0.12);
}


/* zarif ikonlar için */
.share-bar a {
  font-size: 1.25rem;
  color: #6c757d;
  transition: color .2s;
}

.share-bar a:hover {
  color: #0d6efd;
}


.share-bar-yorumlar a {
  font-size: 1rem;
  color: #6c757d;
  transition: color .2s;
}

.share-bar-yorumlar a:hover {
  color:#000000;
}


/* Turuncu arka plan */
.bg-orange-gradual {
  background: linear-gradient(45deg, #ff5507, #ff8a00);
}

.bg-navy-gradual {
  background: linear-gradient(135deg, #0a3c5e 0%, #52a9ff 100%);
}

@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  25%    { transform: scale(1.2); }
  40%    { transform: scale(1); }
  60%    { transform: scale(1.1); }
}

.badge-heartbeat {
  transform-origin: center center;
  animation: heartbeat 1.2s ease-in-out infinite;
}

.sepetOzeti0 {
  display:none !important;
}

/*SEPET*/
.table-no-vertical th,
.table-no-vertical td {
  border-left: 0 !important;
  border-right: 0 !important;
}

/* Ortak custom buton stili */
.btn-custom {
  border: none;
  border-radius: 0.5rem 2.5rem 2.5rem 0.5rem;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.btn-custom:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* Renkler için gradient’ler */
.btn-kasayaGec {
  background: linear-gradient(135deg, #083451 0%, #0066cc 100%);
  color: #fff;
}

.kasaGecPasif {
  background: linear-gradient(135deg, #141414 0%, #a9a9a9 100%) !important;
}

.odenecek-tutar-guven-kilidi {
  color:#035098;
}


#currencyDropdownSepet::after,#currencyDropdown::after {
  display: none;
}


.paraBirimiSecimleriOku {
  font-size: 0.75rem;
  vertical-align: middle;
}



.btn-update {
  background: linear-gradient(45deg, #ff5507, #ff8a00);
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
  width: 50%;
}

.btn-update i {
  margin-right: 0.5rem;
  font-size: 1.1rem;
}

.btn-update:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.btn-update:active {
  transform: translateY(1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}

@media (min-width: 992px) {
  .btn-update {
      width: auto;
  }
}


.btn-print {
  background: linear-gradient(310deg, #fbfbfb, #ebebeb);
  color: #2079e7;
  border: none;
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
  margin-bottom: 0.5rem; /* mobilde biraz boşluk */
}
.btn-print i {
  margin-right: 0.5rem;
  font-size: 1.1rem;
}
.btn-print:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.btn-print:active {
  transform: translateY(1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
@media (min-width: 992px) {
  .btn-print {
      margin-bottom: 0; /* lg↑ boşluk kaldır */
  }
}



/*ÖDEME SAYFALARI*/
.contract-box {
  border: 1px solid #ccc;
  border-radius: .5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  height: 300px;           /* Sabit yükseklik */
  background-color: #fff;
}
.contract-box-header {
  flex: none;
  padding: .75rem 1rem;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  font-size: 1.1rem;
  font-weight: 600;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}
.contract-box-body {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.custom-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: .5rem;
  background: #fafafa;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  max-width: 100%;
}
.custom-checkbox input[type="checkbox"] {
  margin-top: 0.2rem;
  flex: none;
  width: 1.2em;
  height: 1.2em;
  cursor: pointer !important;
}
.custom-checkbox label {
  margin: 0;
  line-height: 1.4;
  color: #001444;
  font-size: .95rem;
  cursor: pointer !important;
}
.approval-container {
  /* Eğer sayfa kaydırılsa bile görünmesini istersen: */
  position: sticky;
  top: 130px;           /* header’ın altından başlasın */
}
/*ÖDEME SAYFALARI SON*/


/* ============================================================
   CART TOAST (CLEAN)
   - Toast zeminine uyumlu progress
   - Kamyon daha belirgin (ring + daha opak)
   - Grid: progress tam genişlikte, ezilmez
   ============================================================ */

/* ------------------------------
   Toast container
------------------------------ */
.cart-toast{
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 99999;
  width: min(420px, calc(100vw - 36px));

  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 12px;

  /* progress satırı ezilmesin */
  align-items: start;

  padding: 14px;
  border-radius: 16px;

  /* toast zemin */
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);

  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.cart-toast.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ilk satır elemanları ortalı */
.cart-toast__icon,
.cart-toast__text,
.cart-toast__btn{
  align-self: center;
}

/* ------------------------------
   Icon
------------------------------ */
.cart-toast__icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 900;

  background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.30);
}

.cart-toast.is-show .cart-toast__icon{
  animation: cartPop .35s ease;
}

@keyframes cartPop{
  0%{ transform: scale(.85); }
  60%{ transform: scale(1.08); }
  100%{ transform: scale(1); }
}

/* ------------------------------
   Text
------------------------------ */
.cart-toast__title{
  font-weight: 900;
  font-size: 13px;
  line-height: 1.1;
}
.cart-toast__sub{
  font-size: 13px;
  opacity: .75;
  margin-top: 2px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ------------------------------
   Button
------------------------------ */
.cart-toast__btn{
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  padding: 10px 12px;
  border-radius: 12px;

  background: rgba(255,106,0,.12);
  border: 1px solid rgba(255,106,0,.30);
  color: #111;
}

/* bump */
.cart-toast.is-bump{
  animation: cartToastBump .25s ease;
}
@keyframes cartToastBump{
  0%{ transform: translateY(-2px) scale(.99); }
  60%{ transform: translateY(0) scale(1.01); }
  100%{ transform: translateY(0) scale(1); }
}

/* states */
.cart-toast.is-success .cart-toast__icon{
  background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.30);
}
.cart-toast.is-error .cart-toast__icon{
  background: rgba(198,40,40,.12);
  border: 1px solid rgba(198,40,40,.30);
}
.cart-toast.is-error .cart-toast__btn{
  display: none;
}

/* ------------------------------
   Mobile position
------------------------------ */
@media (max-width:576px){
  .cart-toast{
    top: auto;
    bottom: 18px;
    right: 18px;
  }
}

/* ============================================================
   Toast progress (zemin toast ile uyumlu, gri yok)
   - Arka: çok hafif “cam” çizgi
   - Dolum: daha belirgin, ama hâlâ şık
   - Kamyon: ring + daha opak + daha büyük
   ============================================================ */

#cartToastProgress{
  grid-column: 1 / -1;   /* tam genişlik */
  margin-top: 10px;
}

#cartToast .ct-progress-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;

  font-size:12px;
  line-height:1.2;
  opacity:.92;
}

#cartToast .ct-progress-text{ opacity:.85; }
#cartToast .ct-progress-pct{ opacity:.75; white-space:nowrap; }

/* bar: toast zeminiyle uyumlu cam çizgi */
#cartToast .ct-progress-bar{
  --pct:0;
  position:relative;
  height:20px;
  border-radius:999px;

  /* ✅ gri yerine toast ile uyumlu çok hafif çizgi */
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.08);

  overflow:hidden;
}

/* dolum */
#cartToast .ct-progress-fill{
  height:100%;
  width:calc(var(--pct) * 1%);

  background: rgba(0,0,0,.18);
  transition: width .45s ease;
}

/* kamyon: daha belirgin */
#cartToast .ct-progress-truck{
  position:absolute;
  left:calc(var(--pct) * 1%);
  top:50%;
  transform:translate(-50%,-50%);
  transition:left .45s ease;

  width:26px;
  height:26px;
  border-radius:999px;

  /* ✅ toast ile uyumlu, belirgin "pill" */
  /*background: rgba(255,255,255,.92);*/
  /*border: 1px solid rgba(0,0,0,.14);*/
  /*box-shadow: 0 8px 18px rgba(0,0,0,.16);*/

  display:flex;
  align-items:center;
  justify-content:center;

  /*backdrop-filter: blur(8px);*/
  color:#ffffff;
}

#cartToast .ct-progress-truck i{
  font-size:15px;
  opacity:.92;
}

/* bedava olunca dolum biraz “yeşil vurgu” alsın (abartmadan) */
#cartToast.is-success .ct-progress-bar{
  border-color: rgba(22,163,74,.18);
  background: rgba(0, 0, 0);
}
#cartToast.is-success .ct-progress-fill{
  background: rgb(0 0 0);
}
#cartToast.is-success .ct-progress-truck{
  /*border-color: rgba(22,163,74,.22);*/
}

#cartToast .ct-progress-text strong{
  color:#050505;
  font-weight:800;
}

#cartToast .ct-progress-truck.is-loading i{
  animation: ctTruckWiggle .9s ease-in-out infinite;
}
@keyframes ctTruckWiggle{
  0%,100%{ transform: translateX(0); opacity:.85; }
  50%{ transform: translateX(2px); opacity:1; }
}