/* ========== BASE ========== */
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;margin:0}

a {color:#000;}
a:hover {color:rgb(212, 0, 85);}

.topbar a{text-decoration:none}

/* Navbar (categories centered) */
.navbar-nav.mx-auto{margin-left:auto;margin-right:auto}
.navbar .nav-link.cat-hover{border-radius:10px}
.navbar .nav-link.cat-hover:hover,
.navbar .nav-link.cat-hover.hovering{background:#f6f7f8}

/* (Var ise) alt-kategori şeridi paneli sayfanın üzerinde kalsın */
#subnav{position:relative;z-index:1055}

/* ========== CATEGORY GRID & PRODUCT CARD ========== */
/* Görsel oranı: 300x433 (~144.33%) */
.ratio-300x433{--bs-aspect-ratio:144.333333%}

/* Kart kapak görseli: tüm alanı doldursun */
.product-card .product-thumb{position:relative;overflow:hidden}
.product-card .product-thumb .product-img{
  position:absolute;top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;object-fit:cover;display:block
}

/* Başlık: 2 satır, orta kalın */
.product-title{
  color:#111;line-height:1.3; font-size: 13px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(1.3em*2)
}

/* Varyant rozetleri */
.variants .badge{
  border-radius:999px;font-weight:500;padding:.35rem .5rem;font-size:.75rem
}

/* Kart gövdesi ve fiyat */
.product-card .card-body{padding:12px 0px 0px 0px;}
.product-price{font-size:15px}

/* 2. görsel hover geçişi (sadece .has-2'de) */
.product-card .product-thumb .img-1{opacity:1}
.product-card .product-thumb .img-2{opacity:0}
.product-card.has-2 .product-thumb .img-1,
.product-card.has-2 .product-thumb .img-2{transition:opacity .25s ease}
.product-card.has-2:hover .product-thumb .img-1{opacity:0!important}
.product-card.has-2:hover .product-thumb .img-2{opacity:1!important}
.product-card:not(.has-2):hover .product-thumb .img-1{opacity:1!important}

/* ========== PRODUCT DETAIL ========== */
.pd-main img{display:block}
.pd-thumb{width:72px;height:72px;display:block}
.pd-thumb.active{outline:2px solid #222;outline-offset:2px}



/* ========== CATEGORY TOP MENU (round chips) ========== */
.cat-menu{padding:8px 0; background-color: #F8F8F8;}
.cat-menu-scroller{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.cat-menu-item{width:110px;text-align:center;text-decoration:none;color:#111}
.cat-menu-item .thumb{
  width:72px;height:72px;margin:0 auto 8px;border-radius:50%;
  overflow:hidden;background:#f7f7f7;display:block
}
.cat-menu-item .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cat-menu-item .label{display:block;font-size:.875rem;line-height:1.2}
@media (max-width:991.98px){
  .cat-menu-scroller{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:8px}
  .cat-menu-item{flex:0 0 auto;width:90px}
}

/* === KATEGORİ DROPDOWN (desktop hover) === */
@media (min-width: 992px){
  .navbar .dropdown-cat{ position:relative; }
  .navbar .dropdown-cat .cat-dd{
    position:absolute; top:100%; left:50%;
    transform:translateX(-50%) translateY(8px);
    min-width:260px;
    background:#fff; border:1px solid #e6e6e6; border-radius:10px;
    padding:8px; box-shadow:0 8px 24px rgba(0,0,0,.08);
    display:none; opacity:0; pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
    z-index: 1060;
  }
  .navbar .dropdown-cat:hover .cat-dd{
    display:block; opacity:1; pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  .navbar .cat-dd .dropdown-item{
    border-radius:8px; padding:8px 10px; color:#111; text-decoration:none;
    display:block;
  }
  .navbar .cat-dd .dropdown-item:hover{ background:#f6f7f8; }
}


/* === MOBILE BOTTOM TABBAR === */
.mobile-tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:1060; }
.mobile-tabbar .tabbar-inner{
  position:relative;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:10px 14px 8px;
  background:#f3f3f3; border-top:1px solid #ddd; border-radius:12px 12px 0 0;
  box-shadow:0 -4px 16px rgba(0,0,0,.06);
}
.mobile-tabbar .tab-link{
  flex:0 0 20%;
  text-align:center; text-decoration:none;
  color:#3b2d24; opacity:.9;
  font-size:12px;
}
.mobile-tabbar .tab-link i{ display:block; font-size:20px; margin-bottom:6px; }
.mobile-tabbar .tab-link.active{ opacity:1; color:#000; }

.mobile-tabbar .mobile-fab{
  position:absolute; left:50%; transform:translate(-50%,-28px);
  width:60px; height:60px; border-radius:50%;
  background:#ffc107; color:#111;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  border:4px solid #fff; text-decoration:none;
}
.mobile-tabbar .mobile-fab i{ font-size:26px; }

/* İçerik tabbar altında kalmasın */
@media (max-width: 991.98px){
  main{ padding-bottom:90px; }
}
/* Desktop'ta gizle (zaten d-lg-none var ama garanti) */
@media (min-width: 992px){
  .mobile-tabbar{ display:none!important; }
}
/* Collections grid */
.card .ratio-1x1 img{ width:100%; height:100%; object-fit:cover; display:block; }


/* kapsayıcı */
.filter-bar{ margin-bottom:14px; background-color: #f8f8f8; }
.filter-bar .filter-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background: linear-gradient(180deg, #fff 0%, var(--fx-bg) 100%);
  border:1px solid var(--fx-border);
  border-radius:14px;
  padding:10px;
  box-shadow: var(--fx-shadow);
}

/* arama */
.filter-bar .f-search{ flex:1 1 260px; min-width:200px; }
.filter-bar .f-search .form-control{
  background:var(--fx-input-bg);
  border:1px solid var(--fx-input-bd);
  border-radius:999px;
  padding:.5rem .9rem;
  height:36px;
}
.filter-bar .f-search .form-control:focus{
  border-color:#111; box-shadow:0 0 0 .2rem rgba(17,17,17,.06);
}

/* chips (bedenler) */
.filter-bar .f-chips{ flex:1 1 auto; min-width:220px; }
.filter-bar .chips-scroll{
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:2px; scrollbar-width:thin;
}
.filter-bar .chips-scroll::-webkit-scrollbar{ height:6px }
.filter-bar .chips-scroll::-webkit-scrollbar-track{ background:transparent }
.filter-bar .chips-scroll::-webkit-scrollbar-thumb{ background:#ddd; border-radius:999px }

.filter-bar .chip{
  display:inline-flex; align-items:center; gap:.4rem;
  user-select:none; cursor:pointer; white-space:nowrap;
}
.filter-bar .chip input{ display:none; }
.filter-bar .chip span{
  display:inline-block;
  background:var(--fx-chip-bg);
  border:1px solid var(--fx-chip-bd);
  color:var(--fx-chip-tx);
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.82rem;
  transition:all .15s ease;
}
.filter-bar .chip:hover span{
  border-color:#bbb; box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.filter-bar .chip input:checked + span{
  background:var(--fx-chip-bg-active);
  color:var(--fx-chip-tx-active);
  border-color:var(--fx-chip-bg-active);
}
.filter-bar .chip input:checked + span {
  background-color: #ffc107; /* Bootstrap warning rengi */
  color: #000; /* isteğe bağlı, kontrast için */
}

/* özellik selectleri */
.filter-bar .f-item select.form-select{
  min-width:180px; max-width:260px;
  border-radius:10px; border:1px solid var(--fx-input-bd);
  background:var(--fx-input-bg);
  height:36px;
}
.filter-bar .f-item select.form-select:focus{
  border-color:#111; box-shadow:0 0 0 .2rem rgba(17,17,17,.06);
}

/* aksiyonlar */
.filter-bar .f-actions{ margin-left:auto; display:flex; gap:8px }
.filter-bar .f-actions .btn{ height:36px; border-radius:10px; }
.filter-bar .f-actions .btn-outline-secondary{ border-color:#ccc }

/* mobile davranış */
@media (max-width: 991.98px){
  /* satırı yatay kaydırılabilir tek sıra yap */
  .filter-bar .filter-row{ flex-wrap:nowrap; overflow-x:auto; }
  .filter-bar .f-item{ flex:0 0 auto; }
  .filter-bar .f-search{ flex:0 0 240px; }
  .filter-bar .f-actions{ flex:0 0 auto; }
}

/* İsteğe bağlı: sticky filtre (aktif etmek için .filter-bar.sticky sınıfını ekle) */
@media (min-width: 992px){
  .filter-bar.sticky{
    position:sticky; top:68px; z-index:1030; /* header yüksekliğine göre ayarla */
  }
}

/* === GLOBAL BREADCRUMB / PAGEBAR === */
.pagebar{ padding-top:4px; }
.pagebar h1{ font-weight:600; color:#111; }
.pagebar nav{ margin-left:auto; }
.breadcrumb{ --bs-breadcrumb-divider: '›'; background:transparent; font-size: 13px; }
.breadcrumb .breadcrumb-item a{ text-decoration:none; color:#555; }
.breadcrumb .breadcrumb-item a:hover{ text-decoration:underline; color:#111; }
.breadcrumb .breadcrumb-item.active{ color:#111; font-weight:600; }



.visually-hidden{
  position:absolute !important;
  height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);
  white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* Footer */
.site-footer{background:var(--bg); color:var(--fg); position:relative}
.footer-grid{display:grid;grid-template-columns:1.2fr 2fr; gap:32px; padding:36px 0}
.f-logo svg{fill:#fff;display:block}
.f-desc{color:var(--muted);margin:12px 0 16px;line-height:1.5}
.f-contact .f-line{display:flex;gap:8px;align-items:center;margin:6px 0;color:#d8dbe2}
.f-contact .icon svg{fill:#d8dbe2}

.f-links{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.f-title{font-size:1rem;margin:0 0 10px}
.f-links ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.f-links a{color:#d8dbe2;text-decoration:none;border-radius:8px;padding:2px 0}
.f-links a:hover{color:#fff;text-decoration:underline}

.footer-bar{border-top:1px solid var(--line); background:#0a0b0d}
.bar-inner{display:flex;align-items:center;justify-content:center;min-height:48px}
.bar-inner p{margin:0;color:#a9adb6;font-size:.95rem}

.to-top{
  position:fixed; right:16px; bottom:72px; /* bar üstünde kalsın */
  width:44px; height:44px; border-radius:999px; border:1px solid var(--line);
  background:#0f1115; color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.to-top:hover{transform:translateY(-2px)}
.to-top svg{fill:#fff}

/* Mobil davranış: 768px altı sadece bar görünsün */
@media (max-width: 767px){
  .nl-wrap{display:none}                 /* Newsletter gizle */
  .footer-grid{display:none}             /* Ana footer içerik gizle */
  .to-top{bottom:72px}                   /* Bar ile çakışma olmasın */
}


/* ---- Horizontal carousel (related products) ---- */
.h-scroll{
  display:flex; gap:12px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.h-scroll::-webkit-scrollbar{ height:8px }
.h-scroll::-webkit-scrollbar-thumb{ background:#ddd; border-radius:4px }

.snap-x{ scroll-snap-type:x mandatory }
.snap-item{ scroll-snap-align:start }

/* product_card partial 'col' sarıyorsa carousel içinde genişliği bozmasın */
.snap-item .col{ width:100% !important; flex:0 0 auto !important; padding:0 !important }

/* --- Variant buttons (small, card içi) --- */
.variant-pill{ display:inline-block;}
.variant-pill input{ display:none; }
.variant-pill span{
  display:inline-block;
  border:1px solid #ced4da;
  background:#fff;
  border-radius:6px;
  padding:.35rem .6rem;
  font-size:.85rem;
  line-height:1;
  min-width:40px;
  text-align:center;
  cursor:pointer;
  transition:all .15s ease;
}
.variant-pill:hover span{ border-color:#212529; }
.variant-pill input:checked + span{
  background:#212529;
  color:#fff;
  border-color:#212529;
  font-weight:600;
}


.variant-pill--sm span{ padding:.3rem .5rem; font-size:.8rem; min-width:36px; }

/* === Product detail: hover zoom + overlay === */
.pd-zoom{ position:relative; overflow:hidden; }
.pd-zoom .zoomable{
  transition: transform .15s ease, transform-origin .05s linear;
  will-change: transform, transform-origin;
}
.pd-zoom.zooming .zoomable{
  transform: scale(1.8);
  cursor: zoom-in;
}

/* küçük zoom butonu (sağ üst) */
.pd-zoom .zoom-btn{
  position:absolute; top:8px; left:8px;
  background:rgba(255,255,255,.9); border:1px solid #e5e7eb;
  border-radius:999px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.pd-zoom .zoom-btn i{ font-size:1.05rem; }

/* fullscreen overlay */
.zoom-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center;
  z-index:2000; padding:16px;
}
.zoom-overlay img{
  max-width:96vw; max-height:92vh; object-fit:contain; display:block;
}
.zoom-overlay .close-zoom{
  position:absolute; top:12px; right:12px;
  background:#fff; border:0; border-radius:999px;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}

.fg-strip { scrollbar-width: thin; }
.fg-thumb { width:52px; height:62px; flex:0 0 auto; border: 2px solid #ddd;}
.fg-thumb.fg-active {
  border: 2px solid #dc3545;     
  pointer-events: none;         
  opacity: 0.8;                
  cursor: default !important;} 
.fg-thumb img { width:52px; height:62px; }


.spec-table th, .spec-table td { vertical-align: middle; }
.spec-table .table-light th { font-weight: 600; }






/* topbar rotating text (optional) */
#ann-rotator{position:relative;max-width:70vw;min-height:1em}
.ann-msg{position:absolute;inset:0 auto auto 0;opacity:0;transition:opacity .35s}
.ann-msg.active{position:relative;opacity:1}

/* search dropdown (critical) */
.search-wrap{position:relative}
.search-drop{
  position:absolute;left:0;right:0;top:100%;
  z-index:1061; /* over offcanvas(1050)/menus(1060) */
  background:#fff;border:1px solid #e5e5e5;border-top:none;border-radius:0 0 .5rem .5rem;
  box-shadow:0 6px 24px rgba(0,0,0,.08);max-height:70vh;overflow:auto;display:none; 
}
.search-drop.list-group .list-group-item{
  border:0;border-bottom:1px solid #f2f2f2;
  display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem; overflow: hidden;
}
.search-drop .list-group-item:last-child{border-bottom:none}
.search-drop .list-group-item img{width:46px;height:46px;object-fit:cover;border-radius:.35rem}


.search-drop .list-group-item .sug-name{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  white-space:normal;
  font-size:.80rem;
  font-weight:600;
  line-height:1.2;
}



.filter-sticky{position:sticky;top:12px;z-index:1}
.filter-title{font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;margin:.25rem 0 .5rem;font-weight:600;color:#555}
.filter-box{border:1px solid #eee;border-radius:.5rem;padding:.6rem;margin-bottom:.8rem;background-color: #F8F8F8;}
.filter-scroll{max-height:280px;overflow:auto}
.chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid #ddd;border-radius:999px;padding:.25rem .6rem;cursor:pointer;font-size:.85rem}
.chip input{display:none}
.chip:has(input:checked) {
  background-color: #ffc107; /* Bootstrap warning */
  color: #000;
  border-color: #ffc107;
}