/* =================================================================
   Hepsilazim Theme — OpenCart 3.0.5
   Modern, Minimalist & Admin-customizable via CSS variables.
   ================================================================= */

:root {
  --hl-primary: #FF6000;
  --hl-secondary: #1A237E;
  --hl-accent: #E53935;
  --hl-header-bg: #FFFFFF;
  --hl-footer-bg: #0F1419;
  --hl-footer-text: #E5E7EB;
  --hl-border: #E6E6E6;
  --hl-text: #1F2328;
  --hl-menu-text: #FFFFFF;
  --hl-dropdown-text: #1F2328;
  --hl-muted: #6B7280;
  --hl-bg-soft: #F5F7FA;
  --hl-radius: 10px;
  --hl-shadow: 0 2px 12px rgba(15,20,25,.06);
  --hl-shadow-lg: 0 12px 40px rgba(15,20,25,.12);
  --hl-font: 'Manrope', system-ui, sans-serif;
}

/* ---------- 1. Base & Reset ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--hl-font); font-size: 14px; color: var(--hl-text); background: var(--hl-bg-soft); line-height: 1.55; }
a { color: var(--hl-primary); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--hl-primary); filter: brightness(.85); }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, h5 { font-weight: 700; color: var(--hl-text); margin: 0 0 .5em; }
.container { max-width: 1280px; }
::selection { background: var(--hl-primary); color: #fff; }

/* ---------- 2. Top Bar ---------- */
#top { background: var(--hl-secondary); color: var(--hl-menu-text); font-size: 12px; padding: 8px 0; }
#top a { color: var(--hl-menu-text); opacity: .9; }
#top a:hover { opacity: 1; color: var(--hl-menu-text); }
#top .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
#top .dropdown-menu { background: #fff !important; border: 1px solid var(--hl-border); padding: 6px 0; min-width: 180px; }
#top .dropdown-menu > li > a, #top .dropdown-menu > li > button { color: var(--hl-dropdown-text) !important; opacity: 1 !important; padding: 8px 16px !important; background: transparent !important; font-size: 13px; font-weight: 500; }
#top .dropdown-menu > li > a:hover, #top .dropdown-menu > li > button:hover { background: var(--hl-bg-soft) !important; color: var(--hl-primary) !important; }
#top .dropdown-menu > li > .btn-link { border: 0; width: 100%; text-align: left; }
.hl-announcement { font-weight: 600; }
.hl-announcement i { margin-right: 6px; color: var(--hl-primary); }
.hl-top-links { margin: 0; display: inline-flex; gap: 18px; }
.hl-top-links li { list-style: none; }
.hl-top-links .dropdown-menu a { color: var(--hl-dropdown-text); }
#top #form-currency .btn-link, #top #form-language .btn-link { color: var(--hl-menu-text); padding: 0 8px; border: 0; background: transparent; }

/* ---------- 3. Header & Navigation ---------- */
.hl-header { background: var(--hl-header-bg); border-bottom: 1px solid var(--hl-border); position: sticky; top: 0; z-index: 950; box-shadow: var(--hl-shadow); }
.hl-header > .container > .row { display: flex; align-items: center; padding: 8px 0; flex-wrap: nowrap; gap: 16px; margin: 0; }
.hl-header .hl-logo-wrap { flex: 0 0 220px; padding: 0; text-align: center; }
.hl-header .hl-search-wrap { flex: 1 1 auto; min-width: 0; padding: 0; }
.hl-header .hl-cart-wrap { flex: 0 0 220px; padding: 0; }
.hl-logo { max-height: 58px; margin: 0 auto; }
.hl-logo-text { font-weight: 800; font-size: 26px; letter-spacing: -.5px; color: var(--hl-primary); }

#search { display: flex !important; border: 2px solid var(--hl-primary); border-radius: var(--hl-radius); overflow: hidden; background: #fff; width: 100%; }
#search input.form-control { border: 0; box-shadow: none; height: 46px; font-size: 14px; flex: 1 1 auto; min-width: 0; background: transparent; outline: none; }
#search .input-group-btn { display: flex; flex: 0 0 auto; width: auto !important; }
#search .input-group-btn .btn { background: var(--hl-primary) !important; color: #fff !important; border: 0 !important; padding: 0 24px !important; height: 46px !important; font-weight: 700; border-radius: 0 !important; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; min-width: 60px; }
#search .input-group-btn .btn:hover { filter: brightness(.92); }

#cart > .btn { background: var(--hl-secondary); color: #fff; border: 0; height: 46px; padding: 0 18px; font-weight: 700; border-radius: var(--hl-radius); display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
#cart > .btn:hover { background: var(--hl-secondary); filter: brightness(1.15); }
#cart > .btn .fa-shopping-cart { color: var(--hl-primary); }
#cart .dropdown-menu { min-width: 360px; padding: 16px; border-radius: var(--hl-radius); border: 1px solid var(--hl-border); box-shadow: var(--hl-shadow-lg); }

/* ---------- 4. KADEMELİ MEGA MENÜ (Masaüstü) ---------- */
.hl-menu-bar { background: var(--hl-secondary); color: var(--hl-menu-text); }
.hl-menu-bar .container { padding: 0; }
.hl-menu-container { display: flex; align-items: center; width: 100%; position: relative; }
.hl-hb-menu-wrapper { position: relative; display: inline-block; z-index: 1000; }

.hl-menu-toggle { background: var(--hl-primary); color: var(--hl-menu-text); border: 0; padding: 12px 24px; font-weight: 800; font-size: 15px; border-radius: 8px 8px 0 0; cursor: pointer; float: left; margin: 0; outline: none; }
.hl-vertical-menu { position: absolute; top: 100%; left: 0; width: 250px; background: #fff; border: 1px solid var(--hl-border); border-top: none; border-radius: 0 0 var(--hl-radius) var(--hl-radius); box-shadow: 0 10px 30px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.2s; padding: 10px 0; z-index: 990; }
.hl-sub-panel { position: absolute; top: -1px; left: 100%; width: 250px; background: #fff; border: 1px solid var(--hl-border); border-radius: 0 var(--hl-radius) var(--hl-radius) var(--hl-radius); box-shadow: 10px 10px 30px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; transform: translateX(10px); transition: all 0.2s; padding: 10px 0; min-height: 100%; z-index: 991; }

.hl-menu-item-wrap { display: flex; justify-content: space-between; align-items: center; }
.hl-vertical-menu a, .hl-sub-panel a { flex: 1; padding: 10px 20px; color: var(--hl-dropdown-text); font-weight: 600; font-size: 13.5px; transition: background 0.15s, color 0.15s; }
.hl-arrow { padding-right: 15px; color: var(--hl-muted); font-size: 12px; cursor: pointer; }

/* Masaüstü Hover Efektleri */
@media (min-width: 992px) {
  .hl-hb-menu-wrapper:hover .hl-vertical-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .hl-vertical-menu li:hover > .hl-sub-panel { opacity: 1; visibility: visible; transform: translateX(0); }
  .hl-vertical-menu li:hover > .hl-menu-item-wrap, .hl-vertical-menu li:hover > .hl-menu-item-wrap a { background: var(--hl-bg-soft); color: var(--hl-primary); }
  .hl-vertical-menu li:hover > .hl-menu-item-wrap .hl-arrow { color: var(--hl-primary); }
}

.hl-horizontal-menu { flex: 1; margin-left: 20px; }
.hl-horizontal-menu ul { display: flex; gap: 24px; margin: 0; padding: 0; }
.hl-horizontal-menu a { color: var(--hl-menu-text); font-weight: 600; font-size: 14.5px; padding: 10px 0; display: block; }
.hl-horizontal-menu a:hover { opacity: 0.8; }

/* ---------- 5. Hero Banners ---------- */
.hl-home { padding: 24px 0 56px; background: var(--hl-bg-soft); }
.hl-hero-banners { display: grid; gap: 14px; margin-bottom: 28px; }
.hl-hero-card { position: relative; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--hl-shadow); transition: transform .25s ease, box-shadow .25s ease; display: block; min-height: 140px; }
.hl-hero-card:hover { transform: translateY(-3px); box-shadow: var(--hl-shadow-lg); }
.hl-hero-card img { width: 100%; height: 100%; object-fit: cover; }
.hl-hero-title { position: absolute; left: 18px; bottom: 18px; background: rgba(255,255,255,.92); color: var(--hl-text); padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; }

.banners-count-1 { grid-template-columns: 1fr; }
.banners-count-2 { grid-template-columns: 1fr 1fr; }
.banners-count-2 .hl-hero-card { min-height: 250px; }
.banners-count-3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.banners-count-4, .banners-count-5 { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.banners-count-3 .hl-hero-card-1, .banners-count-4 .hl-hero-card-1, .banners-count-5 .hl-hero-card-1 { grid-row: 1 / span 2; min-height: 320px; }

/* ---------- 6. Product Cards & Actions (Klasik Görünüm) ---------- */
.product-thumb { background: #fff; border-radius: var(--hl-radius); border: 1px solid var(--hl-border); overflow: hidden; transition: box-shadow .2s, transform .2s, border-color .2s; margin-bottom: 18px; position: relative; }
.product-thumb:hover { box-shadow: var(--hl-shadow-lg); transform: translateY(-2px); border-color: var(--hl-primary); }
.product-thumb .image { overflow: hidden; position: relative; }
.product-thumb .image img { width: 100%; aspect-ratio: 1/1; object-fit: contain; padding: 12px; transition: transform .35s ease; }
.product-thumb:hover .image img { transform: scale(1.05); }
.product-thumb .image .saving { position: absolute; top: 10px; left: 10px; background: var(--hl-accent); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 6px; }

.hl-card-actions { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s; }
.product-thumb:hover .hl-card-actions { opacity: 1; transform: translateY(0); }
.hl-card-actions.pos-tr { top: 10px; right: 10px; }
.hl-card-actions.pos-tl { top: 10px; left: 10px; }
.hl-card-actions.pos-br { bottom: 10px; right: 10px; flex-direction: column-reverse; }
.hl-card-actions.pos-bl { bottom: 10px; left: 10px; flex-direction: column-reverse; }
.hl-card-actions button { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--hl-border); color: var(--hl-text); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.08); cursor: pointer; transition: all .15s; font-size: 14px; padding: 0; }
.hl-card-actions button:hover { background: var(--hl-primary); color: #fff; border-color: var(--hl-primary); transform: scale(1.08); }

.product-thumb .caption { padding: 12px 14px 0; min-height: auto; }
.product-thumb h4 { font-size: 14px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; min-height: 38px; }
.product-thumb h4 a { color: var(--hl-text); }
.product-thumb h4 a:hover { color: var(--hl-primary); }
.product-thumb .price { font-size: 18px; font-weight: 800; color: var(--hl-text); padding: 4px 14px 12px; }
.product-thumb .price-new { color: var(--hl-accent); }
.product-thumb .price-old { color: var(--hl-muted); text-decoration: line-through; font-size: 13px; font-weight: 500; margin-left: 6px; }
.product-thumb .rating { padding: 0 14px 6px; }
.product-thumb .rating .fa-star { color: #FFC107; }

.product-thumb .button-group { display: flex; border-top: 1px solid var(--hl-border); }
.product-thumb .button-group button { flex: 1; border: 0; background: #fff; padding: 12px 8px; font-weight: 600; color: var(--hl-text); transition: background .15s, color .15s; }
.product-thumb .button-group button:first-child { background: var(--hl-primary); color: #fff; }
.product-thumb .button-group button:first-child:hover { filter: brightness(.92); }
.product-thumb .button-group button:not(:first-child):hover { background: var(--hl-bg-soft); color: var(--hl-primary); }

.hl-atc { display: flex; align-items: center; justify-content: center; gap: 8px; }
.hl-atc-icon { padding: 12px 8px; }
.hl-atc-icon i { font-size: 16px; }

/* ---------- 7. UI Components & Pages ---------- */
.btn-primary { background: var(--hl-primary) !important; border-color: var(--hl-primary) !important; color: #fff !important; font-weight: 700; }
.btn-primary:hover, .btn-primary:focus { filter: brightness(.92); }
.form-control { border-radius: 8px; height: 40px; border-color: var(--hl-border); }
.form-control:focus { border-color: var(--hl-primary); box-shadow: 0 0 0 3px rgba(255, 96, 0, .12); }
.breadcrumb { background: transparent; padding: 14px 0; margin: 0 0 14px; font-size: 13px; }
.breadcrumb > li + li:before { content: "›"; color: var(--hl-muted); }
.breadcrumb a { color: var(--hl-muted); }
.breadcrumb a:hover { color: var(--hl-primary); }
.alert { border-radius: var(--hl-radius); border: 0; }
.alert-success { background: #E8F5E9; color: #1B5E20; }
.alert-danger { background: #FFEBEE; color: #B71C1C; }

/* Slider Okları */
.hl-product-slider { position: relative; padding: 10px 0; margin-left: -5px; margin-right: -5px; }
.hl-product-slider .swiper-slide { padding: 0 5px; }
.hl-swiper-next, .hl-swiper-prev { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: #fff; border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.15); z-index: 10; display: flex; align-items: center; justify-content: center; color: var(--hl-text); cursor: pointer; transition: all 0.2s; background-image: none !important; }
.hl-swiper-next:hover, .hl-swiper-prev:hover { background: var(--hl-primary); color: #fff; }
.hl-swiper-next { right: -15px; }
.hl-swiper-prev { left: -15px; }
.swiper-button-disabled { opacity: 0; pointer-events: none; }

/* ---------- 8. Footer ---------- */
.hl-footer { background: var(--hl-footer-bg); color: var(--hl-footer-text); padding: 50px 0 20px; margin-top: 40px; }
.hl-footer h5 { color: #fff; font-size: 15px; margin-bottom: 18px; text-transform: uppercase; letter-spacing: .5px; }
.hl-footer a { color: var(--hl-footer-text); opacity: .85; font-size: 13.5px; line-height: 2; }
.hl-footer a:hover { color: var(--hl-primary); opacity: 1; }

.hl-whatsapp { position: fixed; right: 20px; bottom: 90px; z-index: 998; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 8px 24px rgba(37,211,102,.45); transition: transform .2s; }
.hl-back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 998; width: 44px; height: 44px; border-radius: 50%; background: var(--hl-secondary); color: #fff; border: 0; font-size: 16px; opacity: 0; pointer-events: none; transition: all .2s; }
.hl-back-to-top.show { opacity: 1; pointer-events: auto; }


/* =================================================================
   9. BUTİK MODU V2.0 (SIFIR BOŞLUK, İÇ BÖLME ÇİZGİLERİ VE FIRLAMA)
   ================================================================= */

/* SARMALAYICI GRİD */
.hl-boutique-grid {
  display: flex;
  flex-wrap: wrap; 
  margin: 0;
  padding: 0;
  position: relative;
  overflow: visible; 
  z-index: 1;
}

/* GRİD ÖĞESİ (Adminden Gelen Sütun Sayısına Göre Dinamik Genişlik) */
.hl-boutique-item {
  flex: 0 0 calc(100% / var(--bq-col, 4)); 
  width: calc(100% / var(--bq-col, 4));
  max-width: calc(100% / var(--bq-col, 4));
  min-width: 0; 
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  position: relative;
  z-index: 2;
  transition: z-index 0.3s ease;
}

/* Zarif İç Bölme Çizgileri */
.hl-boutique-item::after {
  content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%;
  background-color: rgba(0, 0, 0, 0.06); z-index: 4; transition: opacity 0.3s ease;
}
.hl-boutique-item::before {
  content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px;
  background-color: rgba(0, 0, 0, 0.06); z-index: 4; transition: opacity 0.3s ease;
}

/* HOVER / FOCUS DURUMU (FIRLAMA VE ÇİZGİLERİ GİZLEME) */
.hl-boutique-item:hover {
  z-index: 9999 !important; 
}
.hl-boutique-item:hover::after,
.hl-boutique-item:hover::before {
  opacity: 0;
}

.hl-boutique-item:hover .hl-boutique-card {
  transform: scale(1.12) !important; 
  box-shadow: 0 25px 60px rgba(0,0,0,0.35); 
  border-radius: 0 !important; 
}

/* KART VE RESİM */
.hl-boutique-card {
  position: relative; background: #fff; border: none !important; border-radius: 0 !important;
  overflow: visible !important; aspect-ratio: 3 / 4; transition: all 0.3s ease-out;
}
.hl-boutique-link { position: absolute; inset: 0; z-index: 5; }
.hl-boutique-card img { width: 100%; height: 100%; object-fit: cover; margin: 0; padding: 0; border: none !important; }

/* ÜRÜN ADI BARI (Tek Satır & Gradient) */
.hl-boutique-title {
  position: absolute; bottom: 0; left: 0; width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
  padding: 30px 12px 12px 12px; color: #fff; font-size: 13px; font-weight: 600; text-align: center;
  z-index: 6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s ease;
  
  /* HAYATİ KOD: Tıklamaları engellemez, altındaki linke iletir */
  pointer-events: none; 
}
.hl-boutique-item:hover .hl-boutique-title { opacity: 0; }

/* OVERLAY (Flu Perde) */
.hl-boutique-overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); 
  opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; 
  /* Overlay de tıklamayı engellemez */
  pointer-events: none; 
}
.hl-boutique-item:hover .hl-boutique-overlay { 
  opacity: 1; visibility: visible; border-radius: 0 !important; 
}

/* İKONLAR VE KONUMLANDIRMA (Admin Kontrollü) */
.hl-boutique-actions { 
  position: absolute;
  display: flex; 
  flex-direction: column; /* İkonları alt alta dizer */
  gap: 10px; 
  pointer-events: auto; /* Sadece butonlara tıklanabilir */
}

/* Admin Panelinden Gelen "pos" (Pozisyon) Sınıfları */
.hl-boutique-actions.pos-tr { top: 15px; right: 15px; }
.hl-boutique-actions.pos-tl { top: 15px; left: 15px; }
.hl-boutique-actions.pos-br { bottom: 15px; right: 15px; flex-direction: column-reverse; }
.hl-boutique-actions.pos-bl { bottom: 15px; left: 15px; flex-direction: column-reverse; }

.hl-boutique-actions button {
  width: 44px; height: 44px; border-radius: 50%; border: none; background: #fff; color: var(--hl-text);
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
  
  /* Animasyon merkezden büyüyerek gelsin (Köşelerde daha şık durur) */
  transform: scale(0.5); 
  opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.hl-boutique-actions button:hover { background: var(--hl-primary); color: #fff; transform: scale(1.15) !important; }

/* Butonların Sırayla Belirmesi */
.hl-boutique-item:hover .hl-boutique-actions button { transform: scale(1); opacity: 1; }
.hl-boutique-item:hover .hl-boutique-actions button:nth-child(1) { transition-delay: 0.05s; }
.hl-boutique-item:hover .hl-boutique-actions button:nth-child(2) { transition-delay: 0.1s; }
.hl-boutique-item:hover .hl-boutique-actions button:nth-child(3) { transition-delay: 0.15s; }
.hl-boutique-item:hover .hl-boutique-actions button:nth-child(4) { transition-delay: 0.20s; }


/* =================================================================
   10. GENEL MOBİL UYUMLULUK (MEDIA QUERIES)
   ================================================================= */

@media (max-width: 991px) {
  /* Genel Mobil Boşluklar */
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; }
  .hl-header > .container > .row { display: grid !important; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 10px; padding: 8px 0; }
  .hl-logo-wrap { grid-column: 1 / 3; display: flex; justify-content: center; padding-bottom: 2px; }
  .hl-logo { max-height: 52px; margin: 0; }
  .hl-search-wrap { grid-column: 1 / 2; }
  .hl-cart-wrap { grid-column: 2 / 3; width: 60px; }
  #cart > .btn { padding: 0 !important; width: 100%; }
  #cart > .btn span { display: none; }
  #top .nav-pull-left, .hl-horizontal-menu { display: none !important; }

  /* Akordeon Menü (Absolute iptal) */
  .hl-menu-container { display: block; width: 100%; position: static; }
  .hl-hb-menu-wrapper { width: 100%; display: block; position: static; }
  .hl-menu-toggle { width: 100%; border-radius: 8px; text-align: left; margin-bottom: 0; }
  .hl-vertical-menu { position: static; width: 100%; box-shadow: none; border: 1px solid var(--hl-border); border-top: none; border-radius: 0 0 8px 8px; padding: 0; display: none; opacity: 1; visibility: visible; transform: none; }
  .hl-sub-panel { position: static; width: 100%; box-shadow: none; border: none; border-top: 1px solid var(--hl-border); background: var(--hl-bg-soft); padding: 0 0 0 15px; display: none; opacity: 1; visibility: visible; transform: none; min-height: auto; }
  .hl-menu-item-wrap { display: flex; justify-content: space-between; align-items: stretch; border-bottom: 1px solid var(--hl-border); }
  .hl-vertical-menu a, .hl-sub-panel a { padding: 14px 15px; font-size: 14px; flex: 1; }
  .hl-arrow { width: 54px; display: flex; align-items: center; justify-content: center; border-left: 1px solid var(--hl-border); background: #fff; font-size: 16px; color: var(--hl-muted); }
  .hl-sub-panel .hl-arrow { background: transparent; }

  /* Klasik Grid Fix */
  .product-layout.product-grid { width: 50% !important; float: left !important; }
  .product-layout.product-grid:nth-child(2n+1) { clear: left !important; }
  .row > .product-layout { padding-left: 5px !important; padding-right: 5px !important; }
  
  /* Butik Modu Tablet - Otomatik bölmeye devam (Adminden geleni ezer) */
  .hl-boutique-item { flex: 1 1 0%; max-width: none; width: auto; }
}

@media (max-width: 767px) {
  /* Klasik Slider Oklarını mobilde gizle */
  .hl-swiper-next { display: none !important; } 
  .hl-swiper-prev { display: none !important; }
  
  /* Butik Modu Mobil - Yan yana her zaman 2 tane çıkar */
  .hl-boutique-item { flex: 0 0 50%; max-width: 50%; width: 50%; }
  .hl-boutique-card { aspect-ratio: 1 / 1; }
  .hl-boutique-item:hover .hl-boutique-card { transform: scale(1.05) !important; }
}

@media (min-width: 1200px) {
  /* Klasik Grid Masaüstü (5 Kolon) */
  #content .product-layout.product-grid { width: 20% !important; }
  #content .product-layout.product-grid:nth-child(odd), #content .product-layout.product-grid:nth-child(even) { clear: none !important; }
  #content .product-layout.product-grid:nth-child(5n+1) { clear: left !important; }
}

/* =================================================================
   KATEGORİ VİTRİNİ V3 (SIFIR BOŞLUK, DİNAMİK BLUR & YÖN)
   ================================================================= */
.hl-banner-grid-v3 { display: flex; flex-wrap: wrap; margin: 0; padding: 0; position: relative; overflow: visible; z-index: 1; }
.hl-banner-item { flex: 0 0 calc(100% / var(--bn-col, 2)); max-width: calc(100% / var(--bn-col, 2)); min-width: 0; padding: 0 !important; margin: 0 !important; border: none !important; position: relative; z-index: 2; transition: z-index 0.3s ease; }

.hl-banner-card { position: relative; background: #fff; border: none !important; border-radius: 0 !important; overflow: visible !important; aspect-ratio: 16 / 10; transition: all 0.3s ease-out; }
.hl-banner-card img { width: 100%; height: 100%; object-fit: cover; margin: 0; padding: 0; border: none !important; transition: transform 0.7s ease; }
.hl-banner-card:hover img { transform: scale(1.08); }

.hl-banner-link { position: absolute; inset: 0; z-index: 10; }

/* Düzlemsel Çizgi Bölücüler */
.hl-banner-item::after { content: ''; position: absolute; top: 0; right: 0; width: 1px; height: 100%; background-color: rgba(0,0,0,0.06); z-index: 4; }
.hl-banner-item::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: rgba(0,0,0,0.06); z-index: 4; }

/* --- Gelişmiş V3 Blur Katmanları --- */

/* 1. Üst Örtü (Daha Asil Bir Kararma İçin Sabit) */
.hl-banner-overlay-v3 { position: absolute; inset: 0; background: rgba(0,0,0,0.25); z-index: 2; pointer-events: none; }
.hl-banner-card:hover .hl-banner-overlay-v3 { background: rgba(0,0,0,0.15); }

/* 2. Dinamik Gradient Blur Katmanı (Yazının Arkasında) */
.hl-banner-blur-v3 {
  position: absolute; z-index: 3; pointer-events: none;
  /* Admin Panelinden Gelen Ayarlar (Dinamik CSS Değişkenleri) */
  background: linear-gradient(135deg, var(--blur-c1) 0%, var(--blur-c2) 100%);
  opacity: var(--blur-op);
  -webkit-backdrop-filter: blur(var(--blur-px));
  backdrop-filter: blur(var(--blur-px));
}
.hl-banner-card:hover .hl-banner-blur-v3 { opacity: calc(var(--blur-op) + 0.1); }

/* --- KATEGORİ BAŞLIĞI V3 --- */
/* Dış Katman: Konumlandırma */
.hl-banner-title-v3 { position: absolute; z-index: 5; pointer-events: none; padding: 30px; display: flex; align-items: center; justify-content: center; }

/* İç Katman: Yazı Stili ve Yön Rotasyonu */
.title-inner {
  /* Admin Panelinden Gelen Renk */
  color: var(--title-color);
  font-size: 24px; font-weight: 800; letter-spacing: 2px;
  text-transform: uppercase; text-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

/* BLUR KATMANI VE YAZI YÖNÜ ROTASYONLARI */
/* Yatay (Yazı ve Blur Kutusu Uyumlu) */
.hl-banner-card.orient-hor .hl-banner-blur-v3 { width: 100%; height: 100%; top: 0; left: 0; }
.hl-banner-card.orient-hor .hl-banner-title-v3 { top: 0; left: 0; width: 100%; height: 100%; }

/* Dikey (Sadece Yazının Altını Kaplayan Şık Bir Şerit Blur) */
.hl-banner-card.orient-ver-tb .title-inner { writing-mode: vertical-rl; }
.hl-banner-card.orient-ver-bt .title-inner { writing-mode: vertical-rl; transform: rotate(180deg); }

/* Asimetrik Butik Vitrin: Dikey Blur Şeritleri (Yazı ve Blur'un Birleşimi) */
/* Yazı Sol Orta ve Dikeyse: Blur şeridini sola yasla */
.hl-banner-card.pos-cl.orient-ver-tb .hl-banner-blur-v3,
.hl-banner-card.pos-cl.orient-ver-bt .hl-banner-blur-v3 { width: 100px; height: 100%; top: 0; left: 0; }
.hl-banner-card.pos-cl .hl-banner-title-v3 { left: 0; top: 50%; transform: translateY(-50%); width: 100px; text-align: center; }

/* Yazı Sağ Orta ve Dikeyse: Blur şeridini sağa yasla */
.hl-banner-card.pos-cr.orient-ver-tb .hl-banner-blur-v3,
.hl-banner-card.pos-cr.orient-ver-bt .hl-banner-blur-v3 { width: 100px; height: 100%; top: 0; right: 0; }
.hl-banner-card.pos-cr .hl-banner-title-v3 { right: 0; top: 50%; transform: translateY(-50%); width: 100px; text-align: center; }

/* --- DİĞER KONUMLAR (Standart Yatay/Butik) --- */
.hl-banner-card.orient-hor.pos-cc .hl-banner-title-v3 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.hl-banner-card.orient-hor.pos-tl .hl-banner-title-v3 { top: 0; left: 0; }
.hl-banner-card.orient-hor.pos-bl .hl-banner-title-v3 { bottom: 0; left: 0; }

/* =================================================================
   MOBİL AKILLI RESET (V3 KATEGORİ VİTRİNİ İÇİN)
   ================================================================= */
@media (max-width: 767px) {
  /* 1. Kategori Vitrini - Mobilde tam ekran (Alt alta 1'li dizilim) */
  .hl-banner-item { 
    flex: 0 0 100% !important; 
    max-width: 100% !important; 
  }
  
  /* Mobilde daha estetik, dikey alanı çok yemeyen bir oran (4:3) */
  .hl-banner-card { 
    aspect-ratio: 4 / 3 !important; 
  }

  /* 2. Dikey (Vertical) Yazıları İptal Et ve Küçült */
  .title-inner { 
    writing-mode: horizontal-tb !important; 
    transform: none !important; 
    font-size: 20px !important; /* Ekrana sığması için fontu kıstık */
  }

  /* 3. Tüm Yazı Konumlarını Ezip "Alt Orta"ya Sabitleme */
  .hl-banner-title-v3 { 
    top: auto !important; 
    bottom: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    width: 100% !important; 
    transform: none !important; 
    padding: 20px !important; 
  }

  /* 4. Dikey Kalan Blur Şeritlerini Alt Yatay Bara Çevirme */
  .hl-banner-blur-v3 { 
    top: auto !important; 
    bottom: 0 !important; 
    left: 0 !important; 
    right: 0 !important; 
    width: 100% !important; 
    height: 70px !important; /* Yazıyı tam kapsayacak kadar yatay şerit */
  }
}