/**

 * OKUL HEDÄ°YESÄ° - CUSTOM CSS

 * AŞAMA 4-7: GELİŞMİŞ MOBİL UX, BİLEŞENLER VE FOOTER

 */



/* =========================================

   FULL-WIDTH RESET (PrestaShop Classic Override)

   - Header/Footer tam ekran geniÅŸliÄŸi

   - İçerik alanı ortalanmış, yan boşluk yok

   - Yatay scroll engellendi

========================================= */



/* Yatay scroll tamamen engelle */

html, body {

  /* overflow-x: clip !important; removed to fix position: sticky */

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box;

}



/* PrestaShop wrapper elementlerini tam geniÅŸlik yap */

#wrapper,

#content-wrapper,

#main,

#columns,

#content,

.page-home,

.casaba-home-content {

  width: 100% !important;

  max-width: 100% !important;

  padding-left: 0 !important;

  padding-right: 0 !important;

  margin-left: 0 !important;

  margin-right: 0 !important;

  box-sizing: border-box !important;

  /* overflow-x: clip !important; removed from main to fix position: sticky */

}



#wrapper {

  overflow-x: clip !important;

}



/* Classic temasının iç .container'larını sıfırla -> Düzeltildi (Bütünlük için) */

#wrapper > .container,

#content-wrapper > .container,

#main > .container,

#columns > .container,

.page-home > .container,

.casaba-home-content > .container {

  width: 100% !important;

  padding-left: 15px !important;

  padding-right: 15px !important;

  margin-left: auto !important;

  margin-right: auto !important;

}

@media (min-width: 1200px) {

  #wrapper > .container,

  #content-wrapper > .container,

  #main > .container,

  #columns > .container,

  .page-home > .container,

  .casaba-home-content > .container {

    max-width: 1320px !important;

  }

}



/* Bootstrap .row negatif margin overflow'u önle */

.row {

  margin-left: 0 !important;

  margin-right: 0 !important;

}



/* Header / Footer her zaman tam geniÅŸlik */

.casaba-header,

.casaba-top-announcement,

.casaba-top-contact,

.casaba-header-main,

.casaba-navigation,

.casaba-footer {

  width: 100% !important;

  max-width: 100% !important;

  left: 0 !important;

  right: 0 !important;

  box-sizing: border-box !important;

}

/* ======= END FULL-WIDTH RESET ======= */



:root {

  --color-primary: #f26522; /* Turuncu ana renk */

  --color-primary-dark: #d55317;

  --color-secondary: #1e2c45; /* Koyu lacivert yardımcı renk */

  --color-bg: #f5f6f8; /* Açık gri sayfa zemini */

  --color-white: #ffffff;

  --color-text: #333333;

  --color-text-light: #777777;

  --color-border: #e0e0e0;

  

  --radius-sm: 4px;

  --radius-md: 8px;

  --radius-lg: 12px;

  --radius-xl: 20px;

  --radius-circle: 50%;

  

  --shadow-sm: 0 2px 5px rgba(0,0,0,0.05);

  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);

  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);

  

  --font-main: 'Inter', 'Roboto', sans-serif;

  

  --header-height: 80px; /* Yaklaşık mobil sticky header yüksekliği */

}



/* =========================================

   GENEL RESET VE YAPI

========================================= */

body {

  margin: 0;

  padding: 0;

  font-family: var(--font-main);

  background-color: var(--color-bg);

  color: var(--color-text);

  /* overflow-x: clip; removed to fix position: sticky */

}

body.has-bottom-bar {

  padding-bottom: 60px; /* Mobil alt bar yüksekliği kadar boşluk */

}

body.no-scroll {

  overflow: hidden;

}



a {

  text-decoration: none;

  color: inherit;

}



ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



/* .casaba-container — büyük ekranda fluid (tam genişlik + padding),

   küçük ekranda responsive padding */

.casaba-container {

  width: 100%;

  max-width: 100%;

  margin: 0 auto;

  padding: 0 30px; /* Yan boşluk — tamamen sıfır değil, düzgün görünsün */

  box-sizing: border-box;

}



/* SVG Ä°konlar */

.casaba-icon {

  width: 24px;

  height: 24px;

  fill: currentColor;

  display: inline-block;

  vertical-align: middle;

}



/* PrestaShop varsayılan kancalarından gelen Custom Text (Duyuru) modülünü gizle (beyaz kutu sorunu) */

#custom-text {

    display: none !important;

}



/* =========================================

   HEADER & NAVIGATION

========================================= */

.casaba-header {

  background: var(--color-white);

  box-shadow: var(--shadow-sm);

  margin-bottom: 20px;

  position: sticky !important;

  top: 0;

  z-index: 1000;

}

#header {

  display: contents !important;

}

.casaba-header.is-sticky {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  z-index: 1000;

  animation: slideDown 0.3s ease forwards;

}

@keyframes slideDown {

  from { transform: translateY(-100%); }

  to { transform: translateY(0); }

}



/* Üst Bilgi Çubuğu (Duyuru) */

.casaba-top-announcement {

  background: var(--color-primary-dark);

  color: var(--color-white);

  text-align: center;

  padding: 8px 15px;

  font-size: 13px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

}

.casaba-header.is-sticky .casaba-top-announcement {

  display: none; /* Sticky olunca duyuru çubuğu gizlenir */

}

.casaba-top-contact {

  background: var(--color-secondary);

  color: var(--color-white);

  font-size: 12px;

  padding: 5px 15px;

  text-align: right;

}

.casaba-header.is-sticky .casaba-top-contact {

  display: none;

}

.casaba-top-contact a {

  margin-left: 15px;

}



/* Slider Okları (Duyuru için) */

.announcement-nav {

  background: none;

  border: none;

  color: var(--color-white);

  cursor: pointer;

  padding: 0 5px;

  display: flex;

  align-items: center;

}

.announcement-nav svg {

  width: 16px;

  height: 16px;

}



/* Ana Header */

.casaba-header-main {

  padding: 20px 0;

  background: var(--color-white);

}

.casaba-header.is-sticky .casaba-header-main {

  padding: 10px 0;

}

.casaba-header-grid {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}

.casaba-logo img {

  max-height: 60px;

  transition: max-height 0.3s;

}

.casaba-header.is-sticky .casaba-logo img {

  max-height: 40px;

}

.casaba-search {

  flex: 1;

  max-width: 600px;

}

.casaba-search form {

  display: flex;

  border: 2px solid var(--color-primary);

  border-radius: var(--radius-sm);

  overflow: hidden;

}

.casaba-search input {

  flex: 1;

  padding: 10px 15px;

  border: none;

  outline: none;

  font-size: 14px;

}

.casaba-search button {

  background: var(--color-primary);

  color: var(--color-white);

  border: none;

  padding: 0 25px;

  font-weight: bold;

  cursor: pointer;

}

.casaba-user-actions {

  display: flex;

  gap: 20px;

  align-items: center;

}

.action-item {

  display: flex;

  align-items: center;

  gap: 10px;

  cursor: pointer;

}

.action-item .text {

  display: flex;

  flex-direction: column;

}

.action-item .title {

  font-size: 12px;

  color: #777;

}

.action-item .subtitle {

  font-size: 14px;

  font-weight: bold;

}



/* Mobil Ä°kon Grubu */

.casaba-mobile-icons {

  display: none;

  gap: 15px;

  align-items: center;

}

.casaba-mobile-toggle {

  display: none;

  background: none;

  border: none;

  cursor: pointer;

  padding: 5px;

  color: var(--color-secondary);

}



/* Navigasyon */

.casaba-navigation {

  background: var(--color-primary);

  color: var(--color-white);

}

.casaba-header.is-sticky .casaba-navigation {

  display: none; /* Mobilde veya sticky'de saklanabilir, masaüstünde kalsın diyorsak @media'da yönetiriz */

}

.nav-grid {

  display: flex;

  align-items: center;

}

.btn-categories {

  background: var(--color-primary-dark);

  color: var(--color-white);

  border: none;

  padding: 15px 20px;

  font-size: 16px;

  font-weight: bold;

  cursor: pointer;

  height: 100%;

}

.nav-links {

  display: flex;

  flex: 1;

}

.nav-links li a {

  display: block;

  padding: 15px 20px;

  font-size: 15px;

  font-weight: 500;

  transition: background 0.2s;

}

.nav-links li a:hover {

  background: var(--color-primary-dark);

}

.nav-cart {

  padding: 0 20px;

  background: var(--color-secondary);

  height: 100%;

  display: flex;

  align-items: center;

  cursor: pointer;

}



/* =========================================

   OFF-CANVAS SEPET (YANDAN AÇILAN MODERN DRAWER)

========================================= */

.casaba-offcanvas-cart {

  position: fixed;

  top: 0;

  right: -450px;

  width: 400px;

  max-width: 92vw;

  height: 100vh;

  height: 100dvh;

  background: #ffffff;

  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);

  z-index: 9999;

  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  flex-direction: column;

}

.casaba-offcanvas-cart.is-open {

  right: 0;

}

.casaba-offcanvas-cart .cart-header {

  padding: 18px 22px;

  background: #ffffff;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1px solid #edf2f7;

}

.casaba-offcanvas-cart .cart-header-title {

  display: flex;

  align-items: center;

  gap: 8px;

}

.casaba-offcanvas-cart .cart-header-title h3 {

  margin: 0;

  font-size: 18px;

  font-weight: 700;

  color: #0f172a;

}

.casaba-offcanvas-cart .cart-header-count {

  font-size: 14px;

  font-weight: 600;

  color: var(--color-primary);

}

.casaba-offcanvas-cart .cart-close {

  background: #f1f5f9;

  border: none;

  border-radius: 50%;

  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: #64748b;

  transition: all 0.2s ease;

}

.casaba-offcanvas-cart .cart-close:hover {

  background: #e2e8f0;

  color: #0f172a;

  transform: rotate(90deg);

}



/* Sepet Gövdesi */

.casaba-offcanvas-cart .cart-body {

  flex: 1;

  padding: 18px 20px;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

}

.casaba-cart-items-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 14px;

}

.casaba-cart-item {

  display: flex;

  align-items: center;

  gap: 14px;

  padding-bottom: 14px;

  border-bottom: 1px solid #f1f5f9;

  position: relative;

  transition: opacity 0.2s ease;

}

.casaba-cart-item:last-child {

  border-bottom: none;

  padding-bottom: 0;

}

.casaba-cart-item .cart-item-img {

  width: 66px;

  height: 66px;

  border-radius: 10px;

  border: 1px solid #e2e8f0;

  overflow: hidden;

  background: #f8fafc;

  flex-shrink: 0;

}

.casaba-cart-item .cart-item-img img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}

.casaba-cart-item .cart-item-details {

  flex: 1;

  min-width: 0;

}

.casaba-cart-item .cart-item-name {

  display: block;

  font-size: 13.5px;

  font-weight: 600;

  color: #1e293b;

  line-height: 1.35;

  text-decoration: none;

  margin-bottom: 4px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  transition: color 0.2s ease;

}

.casaba-cart-item .cart-item-name:hover {

  color: var(--color-primary);

}

.casaba-cart-item .cart-item-attributes {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 6px;

}

.casaba-cart-item .attr-pill {

  font-size: 11px;

  background: #f1f5f9;

  color: #64748b;

  padding: 2px 7px;

  border-radius: 4px;

  font-weight: 500;

}

.casaba-cart-item .cart-item-meta {

  display: flex;

  align-items: center;

  gap: 10px;

}

.casaba-cart-item .cart-item-qty {

  font-size: 12px;

  color: #64748b;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  padding: 2px 8px;

  border-radius: 6px;

  font-weight: 600;

}

.casaba-cart-item .cart-item-price {

  font-size: 14px;

  font-weight: 700;

  color: var(--color-primary);

}

.casaba-cart-item .cart-item-remove {

  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  color: #94a3b8;

  transition: all 0.2s ease;

  flex-shrink: 0;

  text-decoration: none;

}

.casaba-cart-item .cart-item-remove:hover {

  background: #fee2e2;

  color: #ef4444;

}



/* BoÅŸ Sepet */

.casaba-cart-empty {

  text-align: center;

  padding: 60px 20px;

}

.casaba-cart-empty .empty-cart-icon {

  color: #cbd5e1;

  margin-bottom: 16px;

}

.casaba-cart-empty h4 {

  font-size: 17px;

  font-weight: 700;

  color: #1e293b;

  margin: 0 0 8px;

}

.casaba-cart-empty p {

  font-size: 13.5px;

  color: #64748b;

  line-height: 1.5;

  margin: 0 0 20px;

}

.btn-continue-shopping {

  display: inline-block;

  background: var(--color-primary);

  color: #ffffff;

  font-size: 13.5px;

  font-weight: 600;

  padding: 10px 24px;

  border-radius: 8px;

  text-decoration: none;

  transition: all 0.2s ease;

}

.btn-continue-shopping:hover {

  background: var(--color-primary-dark);

  color: #ffffff;

}



/* Sepet Alt Bilgi ve Butonlar */

.casaba-offcanvas-cart .cart-footer {

  padding: 18px 22px;

  border-top: 1px solid #edf2f7;

  background: #ffffff;

  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.03);

}

.cart-summary-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 8px;

  font-size: 13.5px;

  color: #64748b;

}

.cart-summary-row.total-row {

  margin-bottom: 16px;

  padding-top: 8px;

  border-top: 1px dashed #e2e8f0;

  font-size: 16px;

  font-weight: 700;

  color: #0f172a;

}

.cart-summary-row.total-row .summary-val {

  color: var(--color-primary);

  font-size: 18px;

}

.cart-actions-row {

  display: flex;

  width: 100%;

  gap: 10px;

}

.cart-actions-row .btn-checkout {

  width: 100% !important;

  flex: 1;

}

.btn-view-cart {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 12px;

  background: #f1f5f9;

  border: 1px solid #cbd5e1;

  border-radius: 8px;

  font-size: 13.5px;

  font-weight: 600;

  color: #334155;

  text-decoration: none;

  transition: all 0.2s ease;

}

.btn-view-cart:hover {

  background: #e2e8f0;

  color: #0f172a;

}

.btn-checkout {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 12px;

  background: var(--color-primary);

  border: 1px solid var(--color-primary);

  border-radius: 8px;

  font-size: 13.5px;

  font-weight: 700;

  color: #ffffff;

  text-decoration: none;

  transition: all 0.2s ease;

  box-shadow: 0 4px 12px rgba(242, 101, 34, 0.25);

}

.btn-checkout:hover {

  background: var(--color-primary-dark);

  border-color: var(--color-primary-dark);

  color: #ffffff;

  transform: translateY(-1px);

}

.cart-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(15, 23, 42, 0.55);

  backdrop-filter: blur(2px);

  z-index: 9998;

  display: none;

  transition: opacity 0.3s ease;

}

.cart-overlay.is-active {

  display: block;

}



/* =========================================

   MOBÄ°L ALT BAR (SMART BOTTOM BAR)

========================================= */

.casaba-mobile-bottom-bar {

  display: none; /* Masaüstünde gizli */

  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 60px;

  background: var(--color-white);

  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);

  z-index: 1500;

  transition: bottom 0.3s ease-in-out;

}

.casaba-mobile-bottom-bar.is-visible {

  bottom: 0 !important;

}

body.hide-bottom-bar .casaba-mobile-bottom-bar {

  bottom: -70px !important;

}

.bottom-bar-grid {

  display: flex;

  height: 100%;

  justify-content: space-around;

  align-items: center;

}

.bottom-bar-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: var(--color-secondary);

  font-size: 11px;

  gap: 4px;

  flex: 1;

  height: 100%;

}

.bottom-bar-item.cart {

  position: relative;

}

.bottom-bar-item.cart .badge {

  position: absolute;

  top: 5px;

  right: 25px;

  background: var(--color-primary);

  color: var(--color-white);

  font-size: 10px;

  width: 16px;

  height: 16px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* =========================================

   ANA İÇERİK (3 KOLON)

========================================= */

.casaba-layout-3col {

  display: grid;

  grid-template-columns: 250px 1fr 250px;

  gap: 20px;

  margin-bottom: 30px;

}

.casaba-widget-box {

  background: var(--color-white);

  border-radius: var(--radius-md);

  border: 1px solid var(--color-border);

  overflow: hidden;

}

.casaba-category-list li {

  border-bottom: 1px solid var(--color-border);

}

.casaba-category-list li:last-child {

  border-bottom: none;

}

.casaba-category-list a {

  display: flex;

  align-items: center;

  padding: 12px 15px;

  font-size: 14px;

  color: var(--color-text);

  transition: background 0.2s;

}

.casaba-category-list a:hover {

  background: var(--color-bg);

  color: var(--color-primary);

}

.casaba-category-list .icon {

  margin-right: 10px;

  font-size: 18px;

}



/* Hero Section */

.casaba-hero {

  background: var(--color-white);

  border-radius: var(--radius-md);

  overflow: hidden;

  position: relative;

  box-shadow: var(--shadow-sm);

  height: 100%;

  min-height: 400px;

}

.hero-banner {

  position: relative;

  width: 100%;

  height: 100%;

}

.hero-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.hero-content {

  position: absolute;

  top: 50%;

  left: 40px;

  transform: translateY(-50%);

  background: rgba(255, 255, 255, 0.9);

  padding: 30px;

  border-radius: var(--radius-md);

  max-width: 350px;

}

.hero-content h2 {

  margin: 0 0 10px;

  color: var(--color-secondary);

  font-size: 24px;

}

.hero-content p {

  margin: 0 0 20px;

  color: #555;

  font-size: 15px;

}

.btn-primary {

  display: inline-block;

  background: var(--color-primary);

  color: var(--color-white);

  padding: 10px 20px;

  border-radius: var(--radius-sm);

  font-weight: bold;

}



/* =========================================

   RESİMLİ KATEGORİLER (MOBİL İÇİN YATAY)

========================================= */

.casaba-image-categories {

  margin-bottom: 30px;

  display: flex;

  gap: 15px;

  overflow-x: auto;

  padding-bottom: 10px;

  scrollbar-width: none; /* Firefox */

}

.casaba-image-categories::-webkit-scrollbar {

  display: none; /* Chrome */

}

.img-cat-item {

  flex: 0 0 100px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  gap: 10px;

}

.img-cat-item img {

  width: 80px;

  height: 80px;

  border-radius: var(--radius-circle);

  object-fit: cover;

  border: 2px solid var(--color-primary);

  padding: 2px;

}

.img-cat-item span {

  font-size: 12px;

  font-weight: 500;

}



/* =========================================

   PROMO BANNERLAR

========================================= */

.casaba-promo-banners {

  margin-bottom: 40px;

}

.banner-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

}

.promo-banner {

  border-radius: var(--radius-md);

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  transition: transform 0.2s;

}

.promo-banner:hover {

  transform: translateY(-3px);

}

.promo-banner img {

  width: 100%;

  display: block;

}



/* =========================================

   ÃœRÃœN VÄ°TRÄ°NÄ° & SEKMELER (TABS)

========================================= */

.casaba-product-section {

  margin-bottom: 40px;

  background: var(--color-white);

  padding: 20px;

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);

}



.casaba-tabs {

  display: flex;

  gap: 20px;

  border-bottom: 2px solid var(--color-bg);

  margin-bottom: 20px;

  overflow-x: auto;

  scrollbar-width: none;

}

.casaba-tabs::-webkit-scrollbar { display: none; }

.tab-btn {

  background: none;

  border: none;

  padding: 10px 5px;

  font-size: 16px;

  font-weight: bold;

  color: var(--color-text-light);

  cursor: pointer;

  white-space: nowrap;

  position: relative;

}

.tab-btn.active {

  color: var(--color-secondary);

}

.tab-btn.active::after {

  content: '';

  position: absolute;

  bottom: -2px;

  left: 0;

  width: 100%;

  height: 2px;

  background: var(--color-primary);

}



/* PrestaShop Classic temasıyla çakışmaması için sadece casaba içindeki tab-content'i gizle */

.casaba-product-section .tab-content {

  display: none;

}

.casaba-product-section .tab-content.active {

  display: block;

  animation: fadeIn 0.4s;

}

@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



.product-carousel {

  display: flex; /* grid yerine mobil yatay kaydırma için flex */

  gap: 15px;

  overflow-x: auto;

  padding-bottom: 10px;

  scrollbar-width: thin;

}

/* Masaüstünde sarmala (wrap) veya kaydır. Örnek site grid şeklinde masaüstünde. */

@media (min-width: 1025px) {

  .product-carousel {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    overflow: visible;

  }

}

.casaba-product-card {

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  padding: 15px;

  background: var(--color-white);

  transition: box-shadow 0.2s;

  display: flex;

  flex-direction: column;

  flex: 0 0 200px; /* Mobilde kart geniÅŸliÄŸi */

}

@media (min-width: 1025px) {

  .casaba-product-card { flex: auto; }

}



.casaba-product-card:hover {

  box-shadow: var(--shadow-md);

}

.product-img {

  position: relative;

}

.product-img img {

  width: 100%;

  height: auto;

  margin-bottom: 15px;

  border-radius: var(--radius-sm);

}

.product-badge {

  position: absolute;

  top: 10px;

  left: 10px;

  background: var(--color-primary);

  color: var(--color-white);

  font-size: 11px;

  padding: 3px 8px;

  border-radius: var(--radius-sm);

  font-weight: bold;

}

.product-info {

  flex: 1;

  display: flex;

  flex-direction: column;

}

.category-name {

  font-size: 11px;

  color: #999;

  text-transform: uppercase;

}

.product-name {

  font-size: 13px;

  margin: 5px 0 10px;

  color: var(--color-text);

  line-height: 1.4;

  flex: 1;

}

.product-price {

  font-size: 16px;

  font-weight: bold;

  color: var(--color-primary);

  margin-bottom: 15px;

}

.product-action {

  display: flex;

  gap: 5px;

}

.qty-input {

  width: 40px;

  text-align: center;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

}

.btn-add-to-cart {

  flex: 1;

  background: var(--color-secondary);

  color: var(--color-white);

  border: none;

  padding: 8px 0;

  border-radius: var(--radius-sm);

  cursor: pointer;

  font-weight: bold;

  font-size: 12px;

}

.btn-add-to-cart:hover {

  background: var(--color-primary);

}



/* =========================================

   GÃœVEN ALANI (MODERN SVG Ä°KONLAR)

========================================= */

.casaba-trust-section {

  background: var(--color-white);

  padding: 30px 0;

  margin-bottom: 40px;

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);

}

.trust-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;

}

.trust-item {

  display: flex;

  align-items: center;

  gap: 15px;

  padding: 15px;

  background: var(--color-bg);

  border-radius: var(--radius-md);

  transition: transform 0.2s;

}

.trust-item:hover {

  transform: translateY(-3px);

  background: #ffebe3; /* Açık turuncu hover */

}

.trust-item .icon {

  width: 40px;

  height: 40px;

  color: var(--color-primary);

}

.trust-item h5 {

  margin: 0 0 5px;

  font-size: 15px;

  color: var(--color-secondary);

}

.trust-item p {

  margin: 0;

  font-size: 12px;

  color: var(--color-text-light);

}



/* =========================================

   MÜŞTERİ YORUMLARI (GOOGLE STİLİ)

========================================= */

.casaba-testimonials {

  margin-bottom: 40px;

}

.section-header-centered {

  text-align: center;

  margin-bottom: 30px;

}

.section-header-centered h3 {

  font-size: 24px;

  color: var(--color-secondary);

  margin: 0;

}

.testimonials-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}

.review-card {

  background: var(--color-white);

  padding: 20px;

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-sm);

  border: 1px solid var(--color-border);

}

.review-header {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 15px;

}

.reviewer-avatar {

  width: 40px;

  height: 40px;

  border-radius: var(--radius-circle);

  background: var(--color-primary);

  color: var(--color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

  font-size: 18px;

}

.reviewer-info h5 {

  margin: 0 0 5px;

  font-size: 14px;

}

.stars {

  color: #fbbc04; /* Google yıldız rengi */

  font-size: 14px;

}

.review-text {

  font-size: 13px;

  line-height: 1.5;

  color: #555;

  margin: 0;

}



/* =========================================

   FOOTER (ALT BÄ°LGÄ°)

========================================= */

.casaba-footer {

  background: var(--color-secondary);

  color: var(--color-white);

  padding-top: 50px;

  margin-top: 50px;

}

.footer-top {

  display: grid;

  grid-template-columns: 1fr 2fr 1fr;

  gap: 30px;

  padding-bottom: 40px;

  border-bottom: 1px solid rgba(255,255,255,0.1);

}

.footer-logo img {

  max-width: 200px;

  margin-bottom: 20px;

}

.footer-social {

  display: flex;

  gap: 15px;

}

.social-icon {

  width: 40px;

  height: 40px;

  border-radius: var(--radius-circle);

  background: rgba(255,255,255,0.1);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: background 0.3s;

  color: var(--color-white);

}

.social-icon:hover {

  background: var(--color-primary);

}

.social-icon svg {

  width: 20px;

  height: 20px;

}

.footer-links-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}

.footer-col h4 {

  color: var(--color-primary);

  margin: 0 0 20px;

  font-size: 16px;

}

.footer-col ul li {

  margin-bottom: 10px;

}

.footer-col ul li a {

  color: #ccc;

  font-size: 14px;

  transition: color 0.2s;

}

.footer-col ul li a:hover {

  color: var(--color-white);

}

.footer-newsletter p {

  font-size: 13px;

  color: #ccc;

  line-height: 1.5;

  margin-bottom: 15px;

}

.newsletter-form {

  display: flex;

}

.newsletter-form input {

  flex: 1;

  padding: 10px;

  border: none;

  border-radius: var(--radius-sm) 0 0 var(--radius-sm);

  outline: none;

}

.newsletter-form button {

  background: var(--color-primary);

  color: var(--color-white);

  border: none;

  padding: 0 15px;

  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

  cursor: pointer;

  font-weight: bold;

}

.footer-bottom {

  padding: 20px 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 12px;

  color: #999;

}

.payment-icons {

  display: flex;

  gap: 10px;

}

.payment-icons svg {

  height: 24px;

  width: auto;

}



/* =========================================

   RESPONSIVE (MOBİL ÖNCELİKLİ ADAPTASYON)

========================================= */

@media (max-width: 1024px) {

  .casaba-layout-3col {

    grid-template-columns: 200px 1fr;

  }

  .casaba-sidebar-right { display: none; }

  .footer-top { grid-template-columns: 1fr 1fr; }

}



@media (max-width: 768px) {

  body { padding-bottom: 0 !important; }

  .casaba-footer { padding-bottom: 110px !important; }



  /* ===== MOBİL: YATAY SCROLL VE KENAR BOŞLUK DÜZELTME ===== */

  /* Tüm ana elementlerde overflow-x kilitle */

  html, body,

  #wrapper, #content-wrapper, #main, #columns, #content,

  .page-home, .casaba-home-content {

    overflow-x: hidden !important;

    width: 100% !important;

    max-width: 100% !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    box-sizing: border-box !important;

  }

  /* Inner .container sıfırla */

  #wrapper > .container,

  #content-wrapper > .container,

  #main > .container,

  #columns > .container,

  .page-home > .container,

  .casaba-home-content > .container {

    padding: 0 !important;

    margin: 0 !important;

    max-width: 100% !important;

    width: 100% !important;

    overflow-x: hidden !important;

  }

  /* Mobilde casaba-container SIFIR padding — tam kenara yapışsın */

  .casaba-container {

    padding: 0 !important;

    margin: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    overflow-x: hidden !important;

  }

  /* Bootstrap row negatif margin'ini mobilde sıfırla */

  .row {

    margin-left: 0 !important;

    margin-right: 0 !important;

  }

  /* Google reviews kartları mobilde overflow olmasın */

  .reviews-carousel-wrapper {

    overflow: hidden !important;

  }

  .reviews-carousel-viewport {

    overflow-x: auto !important;

    overflow-y: hidden !important;

  }

  /* ===== HEADER ===== */

  .casaba-mobile-bottom-bar { display: block; }

  .casaba-header.is-sticky .casaba-navigation { display: none; }

  

  .casaba-header-main {

    padding: 5px 0; /* Boşlukları daralt */

  }

  

  .casaba-header-grid {

    display: grid;

    grid-template-columns: auto 1fr auto;

    grid-template-areas:

      "menu logo icons"

      "search search search";

    gap: 0;

    row-gap: 5px;

    align-items: center;

    padding: 0 10px; /* Header içi minimal yan boşluk */

    box-sizing: border-box;

  }

  .casaba-search {

    grid-area: search;

    width: 100%;

    max-width: 100%;

    margin-bottom: 5px;

  }

  .casaba-user-actions { display: none; }

  

  .casaba-mobile-toggle {

    display: block;

    position: static;

    grid-area: menu;

  }

  .casaba-mobile-icons {

    display: flex;

    position: static;

    grid-area: icons;

  }

  .casaba-logo { margin: 0; text-align: center; grid-area: logo; }

  

  .casaba-header.is-sticky .casaba-header-grid {

    padding-bottom: 5px;

  }

  

  .nav-links, .btn-categories, .nav-cart { display: none; }

  .casaba-navigation { padding: 10px 0; }

  

  /* ===== LAYOUT ===== */

  .casaba-layout-3col { grid-template-columns: 1fr; }

  .casaba-sidebar-left { display: none; }

  

  .hero-content {

    left: 10px;

    right: 10px;

    padding: 15px;

  }

  .banner-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .testimonials-grid { grid-template-columns: 1fr; }

  

  /* ===== FOOTER ===== */

  .footer-top { grid-template-columns: 1fr; gap: 30px; }

  .footer-links-grid { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; gap: 15px; text-align: center; }

}



@media (max-width: 480px) {

  .hero-content h2 { font-size: 18px; }

  .hero-content p { font-size: 13px; }

  .casaba-product-card { flex: 0 0 160px; }

}



/* =========================================

   HATA DÃœZELTMELERÄ° (SON EKLENENLER)

========================================= */



/* 1. Yan Menüler Beyaz Alan İçinde (PrestaShop ve Özel Tema) */

#left-column .block,

#right-column .block,

#left-column > div,

#right-column > div {

    background: var(--color-white);

    border-radius: var(--radius-md);

    border: 1px solid var(--color-border);

    margin-bottom: 20px;

    padding: 15px;

    overflow: hidden;

}



/* ============================================================

   MODERN ÇOK SEVİYELİ (MULTI-LEVEL & FLYOUT) MENÜ MİMARİSİ

============================================================ */



/* Masaüstü Genel ve Ok Göstergeleri (Desktop >= 1025px) */

@media (min-width: 1025px) {

  .mobile-menu-close {

    display: none !important;

  }

  .menu-expand {

    display: none !important;

  }

  

  /* Yatay Ana Menü Maddeleri */

  .nav-links {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    margin: 0;

    padding: 0;

    list-style: none;

  }

  

  .nav-links > li {

    position: relative;

  }

  

  .nav-links > li > a {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 15px 18px;

    font-size: 14.5px;

    font-weight: 600;

    color: var(--color-white);

    text-decoration: none;

    transition: background 0.2s ease, color 0.2s ease;

  }

  

  .nav-links > li > a:hover,

  .nav-links > li.has-children:hover > a {

    background: var(--color-primary-dark);

  }

  

  /* 1. Seviye Ãœst Ok Ä°konu */

  .desktop-top-chevron {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 14px;

    height: 14px;

    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  }

  .desktop-top-chevron svg {

    width: 12px;

    height: 12px;

  }

  .nav-links > li.has-children:hover > a .desktop-top-chevron {

    transform: rotate(180deg);

  }



  /* 1. SEVİYE AÇILIR MENÜ (DROPDOWN - Modern Glassmorphism & Entrance) */

  .nav-links > li > .sub-menu {

    display: block;

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 240px;

    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border-radius: 12px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.16), 0 4px 12px -2px rgba(0, 0, 0, 0.06);

    padding: 8px;

    margin: 0;

    list-style: none;

    z-index: 1005;

    

    /* Akıcı Mikro Animasyon */

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(10px) scale(0.98);

    transform-origin: top left;

    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), 

                transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 

                visibility 0.22s;

  }

  

  .nav-links > li:hover > .sub-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0) scale(1);

  }



  /* Çok Kategori İçeren Menüler (Örn: Madalya 22 alt kategori) - 2 Kolonlu Düzen */

  .nav-links > li > .sub-menu.is-multi-col {

    display: grid !important;

    grid-template-columns: repeat(2, minmax(210px, 1fr));

    gap: 4px 12px;

    min-width: 450px;

    max-width: 540px;

    max-height: calc(85vh - 70px);

    overflow-y: auto;

    scrollbar-width: thin;

    scrollbar-color: var(--color-primary) #f8f9fa;

  }

  .nav-links > li > .sub-menu.is-multi-col::-webkit-scrollbar {

    width: 6px;

  }

  .nav-links > li > .sub-menu.is-multi-col::-webkit-scrollbar-track {

    background: #f8f9fa;

    border-radius: 4px;

  }

  .nav-links > li > .sub-menu.is-multi-col::-webkit-scrollbar-thumb {

    background: var(--color-primary);

    border-radius: 4px;

  }



  /* 2. VE 3. SEVİYE AÇILIR MENÜ (YANA AÇILAN FLYOUT) */

  .sub-menu li {

    position: relative;

    list-style: none;

  }

  

  .sub-menu li.has-children > .sub-menu {

    display: block;

    position: absolute;

    top: -6px;

    left: calc(100% + 4px);

    min-width: 220px;

    background: rgba(255, 255, 255, 0.98);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border-radius: 12px;

    border: 1px solid rgba(0, 0, 0, 0.08);

    box-shadow: 0 16px 36px -6px rgba(0, 0, 0, 0.16), 0 4px 12px -2px rgba(0, 0, 0, 0.06);

    padding: 8px;

    margin: 0;

    list-style: none;

    z-index: 1010;

    

    /* Akıcı Sağa Açılış Animasyonu */

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateX(-10px);

    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), 

                transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 

                visibility 0.2s;

  }

  

  /* Farenin Çapraz Geçiş Köprüsü (Hover kaybolmasını önler) */

  .sub-menu li.has-children > .sub-menu::before {

    content: '';

    position: absolute;

    top: 0;

    left: -12px;

    width: 16px;

    height: 100%;

  }



  .sub-menu li.has-children:hover > .sub-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateX(0);

  }



  /* Ekran Sağ Kenarına Taşmayı Önleme (Otomatik Sola Açılma) */

  .sub-menu li.has-children > .sub-menu.flyout-left {

    left: auto;

    right: calc(100% + 4px);

    transform: translateX(10px);

  }

  .sub-menu li.has-children > .sub-menu.flyout-left::before {

    left: auto;

    right: -12px;

  }

  .sub-menu li.has-children:hover > .sub-menu.flyout-left {

    transform: translateX(0);

  }



  /* Alt Menü Link Tasarımı */

  .sub-menu li a {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 9px 14px;

    border-radius: 8px;

    font-size: 13.5px;

    font-weight: 500;

    color: #2d3748;

    text-decoration: none;

    border-bottom: none;

    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;

  }

  

  .sub-menu li a:hover,

  .sub-menu li.has-children:hover > a {

    background: #fff5ee;

    color: var(--color-primary);

    transform: translateX(2px);

  }



  /* Yan Açılan Menü İçin Sağ Ok İkonu */

  .desktop-sub-chevron {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-left: auto;

    color: #94a3b8;

    transition: transform 0.2s ease, color 0.2s ease;

  }

  .desktop-sub-chevron svg {

    width: 14px;

    height: 14px;

  }

  .sub-menu li.has-children:hover > a .desktop-sub-chevron {

    color: var(--color-primary);

    transform: translateX(3px);

  }

}



/* 2. Markalar ve Tedarikçiler bloklarını (İstenmeyen) gizle */

#left-column .block-manufacturer,

#left-column .block-supplier,

#right-column .block-manufacturer,

#right-column .block-supplier,

.block-brand, 

.block-supplier,

#search_filters_brands,

#search_filters_suppliers,

.block_manufacturer,

.block_supplier {

    display: none !important;

}



/* 3. Telefon numaraları (Görünmüyordu, hover olmadan) */

.casaba-top-contact a,

.casaba-top-contact {

    color: var(--color-white) !important;

}



/* ============================================================

   MOBİL MENÜ GELİŞTİRMELERİ (Mobile <= 1024px)

============================================================ */

@media (max-width: 1024px) {

  .casaba-navigation {

    display: block;

    padding: 0;

  }

  .casaba-header.is-sticky .casaba-navigation {

    display: block;

  }

  .nav-grid {

    flex-direction: column;

    align-items: flex-start;

  }

  

  /* Masaüstü chevron oklarını mobilde gizle */

  .desktop-top-chevron,

  .desktop-sub-chevron {

    display: none !important;

  }

  

  /* Mobildeki accordion genişletme butonunu göster */

  .menu-expand {

    display: flex !important;

  }

  

  /* Mobil Çekmece Menü: Dinamik Yükseklik ve Güvenli Alt Boşluk */

  .nav-links {

    display: flex;

    flex-direction: column;

    position: fixed;

    top: 0;

    left: -300px;

    width: 285px;

    height: 100dvh; /* Modern dinamik ekran boyu */

    max-height: 100dvh;

    background: var(--color-primary-dark);

    z-index: 9999;

    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    padding-top: 0;

    padding-bottom: 120px !important; /* Listenin en altındaki menülerin kesilmesini kalıcı çözer */

    box-shadow: 5px 0 20px rgba(0,0,0,0.4);

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    overscroll-behavior-y: contain;

  }

  

  /* Menü Kapat Butonu Tasarımı */

  .mobile-menu-close {

    display: block !important;

    background: rgba(255, 255, 255, 0.95);

    color: var(--color-primary-dark);

    padding: 15px 20px;

    font-weight: bold;

    font-size: 17px;

    text-align: left;

    cursor: pointer;

    border-bottom: 2px solid rgba(0,0,0,0.08);

    position: sticky;

    top: 0;

    z-index: 10;

  }

  

  .nav-links.is-open {

    left: 0;

  }

  

  .nav-links li a {

    color: var(--color-white) !important;

    border-bottom: 1px solid rgba(255,255,255,0.08);

    padding: 14px 20px;

    display: flex;

    align-items: center;

    font-size: 14.5px;

  }

  

  /* Mobil Alt Menüler (Accordion Düzeni) */

  .nav-links .sub-menu,

  .top-menu .sub-menu {

    position: static !important;

    display: none !important;

    opacity: 1 !important;

    visibility: visible !important;

    transform: none !important;

    box-shadow: none !important;

    border-radius: 0 !important;

    background: rgba(0, 0, 0, 0.15) !important;

    border: none !important;

    padding: 0 !important;

    min-width: 100% !important;

    max-width: 100% !important;

    max-height: none !important;

    overflow: visible !important;

    grid-template-columns: 1fr !important;

  }

  

  /* Accordion Açıldığında */

  .nav-links li.is-expanded > .sub-menu {

    display: block !important;

  }

  

  .nav-links .sub-menu li a {

    padding-left: 32px !important;

    font-size: 13.5px;

    background: transparent !important;

    border-radius: 0 !important;

  }

  

  .nav-links .sub-menu .sub-menu li a {

    padding-left: 45px !important;

    font-size: 13px;

    background: rgba(0, 0, 0, 0.1) !important;

  }

}



/* =========================================

   GOOGLE REVIEWS COMPONENT (CUSTOM CAROUSEL)

========================================= */

.casaba-google-reviews {

  background: transparent;

  padding: 30px 0;

  margin-bottom: 40px;

}

.reviews-header-block {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  margin-bottom: 40px;

  gap: 15px;

}

.reviews-title-area h3 {

  margin: 0 0 8px;

  font-size: 32px;

  color: var(--color-primary-dark);

  font-weight: 700;

}

.reviews-title-area p {

  margin: 0;

  color: var(--color-text-light);

  font-size: 16px;

}

.google-summary {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

}

.google-logo svg {

  display: block;

}

.google-rating {

  display: flex;

  align-items: center;

  gap: 8px;

}

.rating-score {

  font-weight: 700;

  font-size: 20px;

  color: var(--color-text);

}

.rating-stars {

  color: #FBBC05;

  letter-spacing: 2px;

  font-size: 20px;

}

.rating-count {

  font-size: 14px;

  color: var(--color-text-light);

}



.reviews-carousel-wrapper {

  position: relative;

  display: flex;

  align-items: center;

  background: var(--color-white);

  padding: 40px;

  border-radius: var(--radius-lg);

  box-shadow: 0 5px 30px rgba(0,0,0,0.05);

}

.review-nav {

  background: var(--color-white);

  border: 1px solid var(--color-border);

  width: 45px;

  height: 45px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

  color: var(--color-primary-dark);

  font-size: 18px;

  z-index: 2;

  transition: all 0.2s;

  flex-shrink: 0;

}

.review-nav:hover {

  background: #f8f9fa;

  color: var(--color-primary);

}

.prev-review {

  margin-right: -22px;

}

.next-review {

  margin-left: -22px;

}



.reviews-carousel-viewport {

  display: flex;

  gap: 20px;

  overflow-x: auto;

  scroll-behavior: smooth;

  scrollbar-width: none;

  -ms-overflow-style: none;

  padding: 10px 0;

  scroll-snap-type: x mandatory;

}

.reviews-carousel-viewport::-webkit-scrollbar {

  display: none;

}



/* Animated RGB Border */

@keyframes rgbBorder {

  0% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

  100% { background-position: 0% 50%; }

}



.google-review-card {

  position: relative;

  flex: 0 0 calc(25% - 15px);

  background: var(--color-white);

  border-radius: var(--radius-md);

  padding: 25px;

  border: 1px solid #eee;

  box-shadow: 0 2px 10px rgba(0,0,0,0.02);

  display: flex;

  flex-direction: column;

  scroll-snap-align: start;

  z-index: 1;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

/* Sürekli Yanan Işık Efekti İçin - opacity:1 ve ::before/::after kullanımı */

.google-review-card::before {

  content: "";

  position: absolute;

  top: -2px; left: -2px; right: -2px; bottom: -2px;

  z-index: -1;

  background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);

  background-size: 400%;

  border-radius: calc(var(--radius-md) + 2px);

  animation: rgbBorder 15s linear infinite;

  opacity: 0.2; /* Her zaman hafif yanık */

  transition: opacity 0.3s ease;

}

.google-review-card:hover::before {

  opacity: 0.8; /* Üzerine gelince parlasın */

}

.google-review-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 20px rgba(0,0,0,0.05);

  border-color: transparent;

}



.review-card-header {

  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom: 15px;

}

.review-avatar {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: var(--color-primary-light);

  color: var(--color-white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

  font-size: 20px;

  flex-shrink: 0;

}

.review-avatar img {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  object-fit: cover;

}

.review-author-info {

  flex: 1;

  display: flex;

  flex-direction: column;

}

.review-author-name {

  font-weight: 700;

  color: var(--color-text);

  font-size: 15px;

}

.review-google-badge {

  display: flex;

  align-items: center;

  gap: 5px;

  font-size: 12px;

  color: var(--color-text-light);

  margin-top: 2px;

}

.review-google-badge svg {

  width: 14px;

  height: 14px;

}



.review-stars {

  color: #FBBC05;

  font-size: 18px;

  letter-spacing: 2px;

  margin-bottom: 15px;

}

.review-text-content {

  font-size: 14px;

  line-height: 1.6;

  color: var(--color-text);

  margin-bottom: 25px;

  flex: 1;

}



.review-card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: auto;

}

.review-date {

  font-size: 13px;

  color: var(--color-text-light);

}



.btn-view-review {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  font-size: 13px;

  color: var(--color-text);

  text-decoration: none;

  font-weight: 600;

  padding: 8px 15px;

  border: 1px solid #eee;

  border-radius: 20px;

  transition: all 0.2s;

  background: #fff;

  position: relative;

  z-index: 5;

  pointer-events: auto;

}

.btn-view-review:hover {

  background: #f8f9fa;

  border-color: #ddd;

}

.btn-view-review svg.g-icon {

  width: 16px;

  height: 16px;

}

.btn-view-review svg.link-icon {

  width: 14px;

  height: 14px;

  color: #666;

}



.reviews-footer-note {

  text-align: center;

  font-size: 13px;

  color: var(--color-text-light);

  margin-top: 25px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

}

.reviews-footer-note svg {

  width: 16px;

  height: 16px;

}



@media (max-width: 1200px) {

  .google-review-card {

    flex: 0 0 calc(33.333% - 14px);

  }

}

@media (max-width: 1024px) {

  .google-review-card {

    flex: 0 0 calc(50% - 10px);

  }

  .reviews-carousel-wrapper {

    padding: 20px;

  }

}

@media (max-width: 768px) {

  .google-review-card {

    flex: 0 0 85%;

  }

  .review-nav {

    display: none;

  }

  .reviews-carousel-wrapper {

    padding: 15px;

    border-radius: var(--radius-md);

  }

  .casaba-google-reviews {

    padding: 15px 0;

  }

  .reviews-title-area h3 {

    font-size: 24px;

  }

  .reviews-header-block {

    margin-bottom: 25px;

  }

}



/* =========================================

   KATEGORÄ° / ÃœRÃœN LÄ°STELEME SAYFASI

   Çiçeksepeti tarzı premium tasarım

========================================= */



/* Sayfa container */

.ck-category-page {

  padding-top: 20px;

  padding-bottom: 50px;

  min-height: 60vh;

}



/* ===== KATEGORİ BAŞLIK ÇUBUĞU ===== */

.ck-category-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 20px;

  padding-bottom: 15px;

  border-bottom: 2px solid var(--color-border);

}

.ck-category-title-bar {

  display: flex;

  align-items: center;

  gap: 12px;

}

.ck-category-icon img {

  width: 48px;

  height: 48px;

  border-radius: var(--radius-md);

  object-fit: cover;

}

.ck-category-title {

  font-size: 22px;

  font-weight: 700;

  color: var(--color-secondary);

  margin: 0;

  line-height: 1.2;

}

.ck-product-count {

  font-size: 13px;

  color: var(--color-text-light);

  background: var(--color-bg);

  padding: 3px 10px;

  border-radius: 20px;

  white-space: nowrap;

}

.ck-category-desc {

  font-size: 14px;

  color: var(--color-text-light);

  line-height: 1.6;

  margin-bottom: 20px;

  padding: 12px 16px;

  background: var(--color-bg);

  border-radius: var(--radius-md);

  border-left: 3px solid var(--color-primary);

}



/* ===== SIRALAMA DROPDOWN (Classic Override) ===== */

.ck-sort-wrap .select-title,

.ck-sort-wrap #js-product-sort-select {

  border: 1px solid var(--color-border) !important;

  border-radius: var(--radius-sm) !important;

  padding: 8px 35px 8px 12px !important;

  font-size: 13px !important;

  background: var(--color-white) !important;

  color: var(--color-text) !important;

  cursor: pointer !important;

  appearance: none !important;

  -webkit-appearance: none !important;

}

.ck-sort-wrap .sort-by-row {

  display: flex;

  align-items: center;

  gap: 10px;

}

.ck-sort-wrap label[for="js-product-sort-select"] {

  font-size: 13px;

  color: var(--color-text-light);

  white-space: nowrap;

}



/* ===== ALT KATEGORÄ°LER ===== */

.ck-subcategories {

  display: flex;

  gap: 10px;

  overflow-x: auto;

  padding-bottom: 15px;

  margin-bottom: 20px;

  scrollbar-width: none;

}

.ck-subcategories::-webkit-scrollbar { display: none; }



.ck-subcat-item {

  flex: 0 0 auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  text-decoration: none;

  color: var(--color-text);

  font-size: 12px;

  font-weight: 500;

  text-align: center;

  padding: 10px 8px;

  border: 2px solid var(--color-border);

  border-radius: var(--radius-md);

  min-width: 80px;

  transition: all 0.2s;

  background: var(--color-white);

}

.ck-subcat-item:hover {

  border-color: var(--color-primary);

  color: var(--color-primary);

  transform: translateY(-2px);

  box-shadow: var(--shadow-sm);

}

.ck-subcat-item img {

  width: 56px;

  height: 56px;

  border-radius: var(--radius-circle);

  object-fit: cover;

  border: 2px solid var(--color-bg);

}

.ck-subcat-placeholder {

  width: 56px;

  height: 56px;

  border-radius: var(--radius-circle);

  background: var(--color-bg);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-primary);

}



/* ===== ÃœRÃœN GRID ===== */

.ck-product-grid,

.products.row {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 20px !important;

  margin-bottom: 30px !important;

  float: none !important;

  width: 100% !important;

  margin-left: auto !important;

  margin-right: auto !important;

}



/* =========================================

   YATAY FÄ°LTRELEME (FACETED SEARCH)

   (Sadece Masaüstü)

========================================= */

@media (min-width: 769px) {

  .ck-search-filters {

    margin-bottom: 25px;

  }

  .ck-facets-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-md);

    background: var(--color-white);

    padding: 10px 15px;

  }

  .ck-facets-bar {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

  }

  .ck-facet-item {

    position: relative;

    margin: 0;

  }

  .ck-facet-trigger {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 14px;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-sm);

    cursor: pointer;

    font-size: 13px;

    font-weight: 500;

    transition: all 0.2s;

    user-select: none;

  }

  .ck-facet-trigger:hover {

    border-color: var(--color-primary);

    color: var(--color-primary);

  }

  @media (min-width: 768px) {

    .ck-facet-dropdown {

      position: absolute;

      top: calc(100% + 5px);

      left: 0;

      background: var(--color-white);

      border: 1px solid var(--color-border);

      border-radius: var(--radius-md);

      box-shadow: 0 4px 15px rgba(0,0,0,0.1);

      min-width: 200px;

      max-height: 300px;

      overflow-y: auto;

      z-index: 100;

      padding: 10px 0;

      display: none;

    }

    .ck-facet-item:hover .ck-facet-dropdown {

      display: block;

    }

    .ck-facet-dropdown li {

      list-style: none;

      margin: 0;

      padding: 5px 15px;

    }

    .ck-facet-dropdown li label {

      display: flex;

      align-items: center;

      gap: 10px;

      margin: 0;

      cursor: pointer;

    }

  }

  }

  .ck-filter-link {

    font-size: 13px;

    color: var(--color-text);

    text-decoration: none;

  }

  .ck-filter-link:hover {

    color: var(--color-primary);

  }

  .ck-custom-checkbox, .ck-custom-radio {

    display: inline-flex;

    margin-top: 2px;

  }

  .ck-btn-clear {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 13px;

    color: #e84545;

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px 12px;

  }

  .ck-btn-clear:hover {

    background: #fce8e8;

    border-radius: var(--radius-sm);

  }



.products.row {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  gap: 20px !important;

  margin-bottom: 30px !important;

  float: none !important;

  width: 100% !important;

  margin-left: auto !important;

  margin-right: auto !important;

}



/* ===== ÃœRÃœN KARTI ===== */

.ck-product-card {

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-md);

  overflow: hidden;

  display: flex;

  flex-direction: column;

  position: relative;

  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s;

  cursor: pointer;

  height: 100%;

}

.ck-product-card:hover {

  box-shadow: 0 8px 30px rgba(0,0,0,0.08);

  transform: translateY(-4px);

  border-color: #d1d5db;

}



/* Görsel Alanı */

.ck-product-img-wrap {

  display: block;

  position: relative;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  background: var(--color-white);

  padding: 0; /* Kullanıcı talebi: üst kısım tamamen görsel olsun */

  text-decoration: none;

}

.ck-product-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover; /* Kenarlarda boşluk kalmaması için cover */

  transition: transform 0.4s ease;

}

.ck-product-card:hover .ck-product-img-wrap img {

  transform: scale(1.06);

}





/* Rozet */

.ck-badge {

  position: absolute;

  top: 8px;

  left: 8px;

  z-index: 3;

  font-size: 10px;

  font-weight: 700;

  padding: 4px 8px;

  border-radius: var(--radius-sm);

  letter-spacing: 0.3px;

  line-height: 1.3;

  text-transform: uppercase;

}

.ck-badge-discount {

  background: #e84545;

  color: #fff;

}

.ck-badge-new {

  background: #27ae60;

  color: #fff;

}



/* Favori Butonu */

.ck-wishlist-btn {

  position: absolute;

  top: 8px;

  right: 8px;

  z-index: 3;

  background: rgba(255,255,255,0.92);

  border: 1px solid var(--color-border);

  width: 32px;

  height: 32px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  opacity: 0;

  transform: scale(0.8);

  transition: opacity 0.2s, transform 0.2s, color 0.2s;

  color: #bbb;

}

.ck-product-card:hover .ck-wishlist-btn {

  opacity: 1;

  transform: scale(1);

}

.ck-wishlist-btn:hover {

  color: #e84545;

  border-color: #e84545;

}

.ck-wishlist-btn svg {

  width: 15px;

  height: 15px;

  pointer-events: none;

}



/* Ürün Bilgi Alanı */

.ck-product-body {

  padding: 12px;

  display: flex;

  flex-direction: column;

  gap: 5px;

  flex: 1;

}



/* Kategori adı */

.ck-product-category {

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: var(--color-primary);

  font-weight: 600;

}



/* Ürün Adı */

.ck-product-name {

  margin: 0;

  font-size: 13px;

  font-weight: 500;

  line-height: 1.45;

}

.ck-product-name a {

  color: var(--color-text);

  text-decoration: none;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.ck-product-name a:hover {

  color: var(--color-primary);

}



/* Fiyat */

.ck-product-prices {

  display: flex;

  flex-direction: column;

  gap: 2px;

  margin-top: 4px;

}

.ck-price-old {

  font-size: 12px;

  color: #aaa;

  text-decoration: line-through;

  line-height: 1.2;

}

.ck-price-row {

  display: flex;

  align-items: center;

  gap: 5px;

  flex-wrap: wrap;

}

.ck-price-current {

  font-size: 17px;

  font-weight: 700;

  color: var(--color-primary);

  line-height: 1.2;

}

.ck-price-tax-label {

  display: inline-flex;

  align-items: center;

  font-size: 10px;

  font-weight: 700;

  color: #475569;

  background: #f1f5f9;

  border: 1px solid #e2e8f0;

  padding: 1px 5px;

  border-radius: 4px;

  line-height: 1.2;

  letter-spacing: 0.3px;

  text-transform: uppercase;

  white-space: nowrap;

}

.ck-price-tax-label.product-tax-label {

  font-size: 12px;

  padding: 2px 7px;

  margin-left: 6px;

  vertical-align: middle;

}

.ck-price-save {

  font-size: 11px;

  color: #27ae60;

  font-weight: 600;

}



/* Aksiyon Butonu ve Adet Seçici */

.ck-card-actions {

  margin-top: auto;

  padding-top: 10px;

}

.ck-add-to-cart-form {

  width: 100%;

}

.ck-cart-group {

  display: flex;

  align-items: center;

  gap: 5px;

  width: 100%;

}

.ck-qty-wrap {

  display: flex;

  align-items: center;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  height: 34px;

  background: var(--color-white);

  overflow: hidden;

}

.ck-qty-btn {

  background: none;

  border: none;

  width: 24px;

  height: 100%;

  font-size: 16px;

  color: var(--color-text);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

}

.ck-qty-btn:hover {

  background: var(--color-bg);

}

.ck-qty-input {

  width: 26px;

  height: 100%;

  border: none;

  text-align: center;

  font-size: 13px;

  font-weight: 600;

  color: var(--color-text);

  padding: 0;

  -moz-appearance: textfield;

}

.ck-qty-input::-webkit-outer-spin-button,

.ck-qty-input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

.ck-btn-cart {

  flex: 1;

  background: var(--color-secondary);

  color: var(--color-white);

  border: none;

  height: 34px;

  border-radius: var(--radius-sm);

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;



  transition: background 0.2s, transform 0.15s;

  white-space: nowrap;

}

.ck-btn-cart:hover {

  background: var(--color-primary);

}

.ck-btn-cart:active {

  transform: scale(0.98);

}

.ck-btn-detail {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  width: 100%;

  padding: 9px 10px;

  background: var(--color-bg);

  color: var(--color-text);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  font-size: 12px;

  font-weight: 600;

  text-decoration: none;

  transition: all 0.2s;

  box-sizing: border-box;

}

.ck-btn-detail:hover {

  background: var(--color-primary);

  color: var(--color-white);

  border-color: var(--color-primary);

}



/* Aktif Filtreler */

.ck-active-filters {

  margin-bottom: 15px;

}



/* ===== BOŞ KATEGORİ ===== */

.ck-empty-state {

  text-align: center;

  padding: 60px 20px;

  color: var(--color-text-light);

}

.ck-empty-state svg {

  color: var(--color-border);

  margin-bottom: 20px;

}

.ck-empty-state h4 {

  font-size: 20px;

  color: var(--color-secondary);

  margin: 0 0 8px;

}

.ck-empty-state p {

  font-size: 14px;

  margin: 0;

}



/* ===== SAYFALAMA ===== */

.ck-category-page .pagination,

#js-product-list .pagination {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 4px;

  list-style: none;

  padding: 15px 0;

  margin: 0;

  flex-wrap: wrap;

}

.ck-category-page .pagination .page-item .page-link,

#js-product-list .pagination .page-item .page-link {

  min-width: 34px;

  height: 34px;

  padding: 0 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid var(--color-border);

  border-radius: var(--radius-sm);

  color: var(--color-text);

  text-decoration: none;

  font-size: 13px;

  font-weight: 500;

  transition: all 0.2s;

  background: var(--color-white);

  white-space: nowrap;

}

.ck-category-page .pagination .page-item.active .page-link,

.ck-category-page .pagination .page-item .page-link:hover,

#js-product-list .pagination .page-item.active .page-link,

#js-product-list .pagination .page-item .page-link:hover {

  background: var(--color-primary);

  border-color: var(--color-primary);

  color: var(--color-white);

}

.ck-category-page .pagination .page-item.disabled .page-link,

#js-product-list .pagination .page-item.disabled .page-link {

  opacity: 0.4;

  pointer-events: none;

}



/* Stok 0 ürün görünümü */

.ck-product-card.ck-out-of-stock .ck-product-img-wrap img {

  opacity: 0.6;

  filter: grayscale(30%);

}

.ck-product-card.ck-out-of-stock .ck-btn-cart {

  background: #aaa;

  cursor: not-allowed;

}

.ck-product-card.ck-out-of-stock .ck-btn-cart:hover {

  background: #999;

}



/* Classic tema fallback — .products.row içindeki js-product her zaman grid-item olsun */

.products.row > .js-product,

.products.row > .ck-product-card {

  width: 100% !important;

  float: none !important;

  flex: none !important;

  padding: 0 !important;

  max-width: 100% !important;

}



/* ===== RESPONSIVE ===== */



@media (min-width: 1025px) {

  .ck-product-grid,

  .products.row {

    grid-template-columns: repeat(4, 1fr) !important;

    gap: 15px !important;

  }

}

@media (max-width: 1024px) and (min-width: 769px) {

  .ck-product-grid,

  .products.row {

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 10px !important;

  }

}

@media (max-width: 768px) {

  .ck-category-page {

    padding-top: 10px;

    padding-bottom: 100px; /* mobil alt bar için */

  }

  .ck-category-header {

    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 12px;

    padding-bottom: 10px;

  }

  .ck-category-title {

    font-size: 18px;

  }

  .ck-product-grid,

  .products.row {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 8px !important;

  }

  .ck-product-body {

    padding: 8px;

    gap: 4px;

  }

  .ck-product-name {

    font-size: 12px;

  }

  .ck-product-name a {

    -webkit-line-clamp: 2;

  }

  .ck-price-current {

    font-size: 14px;

  }

  .ck-price-old {

    font-size: 11px;

  }

  .ck-btn-cart,

  .ck-btn-detail {

    font-size: 11px;

    padding: 8px 6px;

    gap: 4px;

  }

  /* Mobilde favori butonu her zaman görünür */

  .ck-wishlist-btn {

    opacity: 1 !important;

    transform: scale(1) !important;

    width: 28px;

    height: 28px;

  }

  .ck-badge {

    font-size: 9px;

    padding: 3px 5px;

  }

}

@media (max-width: 400px) {

  .ck-product-grid {

    gap: 6px;

  }

  .ck-product-body {

    padding: 6px;

  }

  .ck-price-current {

    font-size: 13px;

  }

}

/* ======= END KATEGORÄ° SAYFASI ======= */





/* =====================================================================

   ÇİÇEKSEPETİ TARZI YATAY FİLTRELEME (DESKTOP)

   ===================================================================== */

.ck-search-filters {

    margin-bottom: 20px;

    padding: 10px 0;

    border-bottom: 1px solid #eee;

}



.ck-facets-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Sadece desktop'ta yatay yapıyoruz */

@media (min-width: 768px) {

    .ck-facets-bar {

        display: flex;

        flex-wrap: wrap;

        gap: 10px;

    }



    .ck-facet-item {

        position: relative;

        margin-bottom: 0 !important;

    }



    .ck-facet-trigger {

        display: flex;

        align-items: center;

        gap: 5px;

        padding: 8px 16px;

        background-color: #f5f5f5;

        border-radius: 20px;

        cursor: pointer;

        font-size: 13px;

        font-weight: 500;

        color: #333;

        border: 1px solid transparent;

        transition: all 0.2s ease;

        user-select: none;

    }



    .ck-facet-trigger:hover,

    .ck-facet-trigger.is-open {

        background-color: #fff;

        border-color: #007bff;

        color: #007bff;

    }



    .ck-facet-trigger svg {

        transition: transform 0.2s ease;

    }

    .ck-facet-trigger.is-open svg {

        transform: rotate(180deg);

    }



    /* DROPDOWN MENU */

    .ck-facet-dropdown {

        position: absolute;

        top: calc(100% + 10px);

        left: 0;

        width: max-content;

        min-width: 200px;

        max-width: 300px;

        background: #fff;

        border-radius: 8px;

        box-shadow: 0 4px 15px rgba(0,0,0,0.1);

        padding: 15px;

        z-index: 1000;

        opacity: 0;

        visibility: hidden;

        transform: translateY(10px);

        transition: all 0.2s ease;

        border: 1px solid #eaeaea;

        /* Desktopta prestashop'un bootstrap collapse'ını eziyoruz */

        display: block !important;

        height: auto !important;

    }



    .ck-facet-item.is-active .ck-facet-dropdown {

        opacity: 1;

        visibility: visible;

        transform: translateY(0);

    }



    /* DROPDOWN ITEMS */

    .ck-facet-dropdown > li {

        margin-bottom: 10px;

    }

    .ck-facet-dropdown > li:last-child {

        margin-bottom: 0;

    }



    .ck-facet-dropdown .facet-label {

        display: flex;

        align-items: center;

        cursor: pointer;

        font-size: 13px;

        color: #444;

        margin: 0;

    }

    .ck-facet-dropdown .facet-label:hover {

        color: #007bff;

    }



    /* Custom Checkbox/Radio */

    .ck-custom-checkbox,

    .ck-custom-radio {

        position: relative;

        display: flex;

        align-items: center;

        justify-content: center;

        width: 18px;

        height: 18px;

        border: 1px solid #ccc;

        border-radius: 3px;

        margin-right: 10px;

        background-color: #fff;

        flex-shrink: 0;

    }

    .ck-custom-radio {

        border-radius: 50%;

    }



    /* Hide native inputs */

    .ck-custom-checkbox input,

    .ck-custom-radio input {

        position: absolute;

        opacity: 0;

        cursor: pointer;

        width: 100%;

        height: 100%;

        margin: 0;

        z-index: 2;

    }



    /* Checked state */

    .facet-label.active .ck-custom-checkbox,

    .ck-custom-checkbox input:checked + span,

    .ck-custom-radio input:checked + span {

        background-color: #007bff;

        border-color: #007bff;

    }



    .facet-label.active .ck-custom-checkbox i,

    .ck-custom-checkbox input:checked + span i {

        color: #fff;

        font-size: 14px;

        display: block !important;

    }

    

    .ck-custom-checkbox span i {

        display: none; /* native material icon */

    }



    .ck-filter-link {

        flex: 1;

        text-decoration: none;

        color: inherit;

    }

    .ck-filter-link .magnitude {

        color: #888;

        font-size: 11px;

        margin-left: 5px;

    }



    /* CLEAR BUTTON */

    .ck-btn-clear {

        display: flex;

        align-items: center;

        gap: 5px;

        background: transparent;

        border: none;

        color: #666;

        font-size: 13px;

        cursor: pointer;

        padding: 8px 12px;

        border-radius: 20px;

    }

    .ck-btn-clear:hover {

        background-color: #ffeaea;

        color: #dc3545;

    }

}







/* ============================================================

   MODERN ÃœRÃœN SAYFASI (PRODUCT DETAIL) STÄ°LLERÄ°

============================================================ */



/* Ana YerleÅŸim ve Arka Plan */

.casaba-product-page-main {

  padding: 20px 0 50px;

}

.casaba-product-detail-layout {

  display: flex;

  flex-wrap: wrap;

  margin-bottom: 40px;

}



/* 1. MASAÜSTÜ ÜRÜN GÖRSELİ BOYUT SINIRLAMASI (Masaüstü >= 992px) */

@media (min-width: 992px) {

  .casaba-product-gallery-col {

    position: sticky;

    top: 100px;

  }

  .casaba-product-gallery-col .casaba-product-cover {

    width: 100% !important;

    max-width: 460px !important;

    aspect-ratio: 1 / 1 !important; /* Masaüstünde tam KARE (1:1) */

    height: auto !important;

    max-height: 460px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    background: #ffffff !important;

    border: 1px solid #edf2f7 !important;

    border-radius: 14px !important;

    padding: 20px !important;

    margin: 0 auto 16px auto !important;

    overflow: hidden !important;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;

    box-sizing: border-box !important;

  }

  .casaba-product-gallery-col .casaba-product-cover picture {

    width: 100% !important;

    height: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

  }

  .casaba-product-gallery-col .casaba-product-cover img.main-product-image,

  .casaba-product-gallery-col .casaba-product-cover img {

    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

    max-height: 100% !important;

    object-fit: contain !important;

    margin: auto !important;

    transition: transform 0.3s ease;

  }

  .casaba-product-gallery-col .casaba-product-cover:hover img {

    transform: scale(1.03);

  }

  .casaba-thumb-list {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    list-style: none;

    padding: 0;

    margin: 0;

    justify-content: center;

  }

  .casaba-thumb-list .thumb-container {

    width: 72px;

    height: 72px;

    border-radius: 10px;

    border: 2px solid #e2e8f0;

    overflow: hidden;

    cursor: pointer;

    transition: all 0.2s ease;

  }

  .casaba-thumb-list .thumb-container:hover,

  .casaba-thumb-list .thumb-container.selected,

  .casaba-thumb-list .thumb-container.js-thumb-selected {

    border-color: var(--color-primary) !important;

    box-shadow: 0 3px 10px rgba(242, 101, 34, 0.25);

    transform: translateY(-2px);

  }

  .casaba-thumb-list .thumb-container img {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

}



/* Sadece Ürün Sayfalarında Mobilde Üst Duyuru ve Mavi Telefon Çubuğunu Gizle */

@media (max-width: 991px) {

  body#product .casaba-top-announcement,

  body#product .casaba-top-contact,

  .page-product .casaba-top-announcement,

  .page-product .casaba-top-contact {

    display: none !important;

  }

}



/* Mobilde Ürün Sayfasında Konum (Breadcrumb) Alanını Daraltma */

@media (max-width: 768px) {

  body#product .breadcrumb,

  .page-product .breadcrumb {

    padding: 4px 0 !important;

    margin: 4px 0 8px 0 !important;

    background: transparent !important;

    border: none !important;

  }

  body#product .breadcrumb ol,

  .page-product .breadcrumb ol {

    display: flex !important;

    flex-wrap: nowrap !important;

    align-items: center !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch;

    white-space: nowrap !important;

    padding: 2px 0 !important;

    margin: 0 !important;

    list-style: none !important;

    scrollbar-width: none !important;

  }

  body#product .breadcrumb ol::-webkit-scrollbar,

  .page-product .breadcrumb ol::-webkit-scrollbar {

    display: none !important;

  }

  body#product .breadcrumb li,

  .page-product .breadcrumb li {

    display: inline-flex !important;

    align-items: center !important;

    flex-shrink: 0 !important;

    font-size: 11.5px !important;

    color: #64748b !important;

    line-height: 1.2 !important;

  }

  body#product .breadcrumb li a,

  .page-product .breadcrumb li a {

    color: #64748b !important;

    text-decoration: none !important;

    font-size: 11.5px !important;

  }

  body#product .breadcrumb li::after,

  .page-product .breadcrumb li::after {

    content: '/' !important;

    margin: 0 5px !important;

    color: #cbd5e1 !important;

    font-size: 10px !important;

  }

  body#product .breadcrumb li:last-child::after,

  .page-product .breadcrumb li:last-child::after {

    display: none !important;

  }

  body#product .breadcrumb li:last-child,

  .page-product .breadcrumb li:last-child {

    color: #1e293b !important;

    font-weight: 600 !important;

    max-width: 160px !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

    white-space: nowrap !important;

  }

}



/* Ürün Rozetleri (Product Flags - Satılık, Yeni, İndirim vb.) */

.casaba-product-cover {

  position: relative !important;

}

.casaba-product-cover .product-flags {

  position: absolute !important;

  top: 14px !important;

  left: 14px !important;

  z-index: 10 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  gap: 6px !important;

  margin: 0 !important;

  padding: 0 !important;

  list-style: none !important;

  pointer-events: none;

}

.casaba-product-cover .product-flags .product-flag {

  display: inline-flex !important;

  align-items: center !important;

  padding: 6px 12px !important;

  border-radius: 6px !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  text-transform: uppercase !important;

  letter-spacing: 0.5px !important;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;

  line-height: 1 !important;

}

.casaba-product-cover .product-flags .product-flag.new {

  background: #10b981 !important;

  color: #ffffff !important;

}

.casaba-product-cover .product-flags .product-flag.on-sale {

  background: #ef4444 !important;

  color: #ffffff !important;

}

.casaba-product-cover .product-flags .product-flag.discount {

  background: #f59e0b !important;

  color: #ffffff !important;

}



/* 2. MOBİL ÜRÜN GÖRSELLERİ VE YATAY THUMBNAIL KAYDIRMA (Mobile <= 768px) */

/* NOT: Kullanıcı talebi gereği mobildeki büyük görsel boyutlarına DOKUNULMAMIŞTIR */

@media (max-width: 768px) {

  .casaba-product-detail-layout,

  .casaba-product-gallery-col,

  .casaba-gallery-container,

  .page-content#content {

    min-width: 0 !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .casaba-product-gallery-col .casaba-product-cover {

    position: relative !important;

    border-radius: 12px;

    overflow: hidden;

    touch-action: pan-y pinch-zoom;

    width: 100% !important;

    max-width: 100% !important;

  }

  .casaba-thumb-mask.mask {

    width: 100% !important;

    max-width: 100% !important;

    min-width: 0 !important;

    overflow-x: auto !important;

    overflow-y: hidden !important;

    -webkit-overflow-scrolling: touch;

    padding: 10px 4px !important;

    margin-top: 12px !important;

    scrollbar-width: thin;

    scrollbar-color: var(--color-primary) #f1f5f9;

  }

  .casaba-thumb-mask.mask::-webkit-scrollbar {

    height: 4px;

  }

  .casaba-thumb-mask.mask::-webkit-scrollbar-thumb {

    background: var(--color-primary);

    border-radius: 4px;

  }

  .casaba-thumb-list.product-images {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    gap: 10px !important;

    margin: 0 !important;

    padding: 0 !important;

    width: max-content !important;

    list-style: none;

  }

  .casaba-thumb-list .thumb-container {

    flex: 0 0 68px !important;

    width: 68px !important;

    height: 68px !important;

    border-radius: 8px !important;

    border: 2px solid #e2e8f0;

    overflow: hidden;

    cursor: pointer;

    transition: border-color 0.2s ease, transform 0.2s ease;

  }

  .casaba-thumb-list .thumb-container.selected,

  .casaba-thumb-list .thumb-container.js-thumb-selected {

    border-color: var(--color-primary) !important;

    box-shadow: 0 2px 8px rgba(242, 101, 34, 0.3);

    transform: scale(1.06);

  }

  .casaba-thumb-list .thumb-container img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

  }

}



/* 3. ÜRÜN BİLGİ ALANI VE BAŞLIK */

.product-title-section {

  margin-bottom: 18px;

  border-bottom: 1px solid #edf2f7;

  padding-bottom: 14px;

}

.product-title {

  font-size: 26px;

  font-weight: 700;

  color: #1a202c;

  line-height: 1.35;

  margin: 0 0 8px;

}

.product-reference {

  font-size: 13px;

  color: #718096;

}

.product-reference strong {

  color: #2d3748;

}

.product-short-desc {

  font-size: 14.5px;

  color: #4a5568;

  line-height: 1.6;

  margin: 15px 0 20px;

}



/* 4. MODERN VARYANT SEÇİMLERİ (RENK VE HAP BUTONLAR) */

.casaba-variants-wrapper {

  margin: 20px 0;

}

.casaba-variant-group {

  margin-bottom: 18px;

}

.variant-label-row {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 10px;

}

.variant-label-row .control-label {

  font-size: 14px;

  font-weight: 600;

  color: #2d3748;

}

.selected-variant-name {

  font-size: 14px;

  font-weight: 700;

  color: var(--color-primary);

}



/* Renk Daireleri (Color Swatches) */

.color-swatches-list {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  list-style: none;

  padding: 0;

  margin: 0;

}

.color-item-wrap {

  position: relative;

}

.color-item-wrap label {

  cursor: pointer;

  margin: 0;

  display: flex;

  align-items: center;

  position: relative;

}

.color-item-wrap input.input-color {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}

.color-item-wrap span.color {

  display: block;

  width: 36px;

  height: 36px;

  border-radius: 50%;

  border: 2px solid #ffffff;

  box-shadow: 0 0 0 1.5px #cbd5e1;

  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);

}

.color-item-wrap:hover span.color {

  transform: scale(1.1);

  box-shadow: 0 0 0 2px var(--color-primary);

}

.color-item-wrap.active span.color,

.color-item-wrap input:checked + span.color {

  transform: scale(1.15);

  box-shadow: 0 0 0 2.5px var(--color-primary), 0 3px 8px rgba(0,0,0,0.15);

}

.swatch-tooltip {

  display: none; /* Erişilebilirlik için DOM'da kalır */

}



/* Seçenek Hapları (Pills / Chips) */

.radio-pills-list {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  list-style: none;

  padding: 0;

  margin: 0;

}

.pill-item-wrap {

  position: relative;

}

.pill-item-wrap label {

  cursor: pointer;

  margin: 0;

  position: relative;

}

.pill-item-wrap input.input-radio {

  position: absolute;

  opacity: 0;

  pointer-events: none;

}

.pill-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 9px 18px;

  background: #ffffff;

  border: 1.5px solid #e2e8f0;

  border-radius: 10px;

  font-size: 13.5px;

  font-weight: 600;

  color: #334155;

  transition: all 0.2s ease;

}

.pill-item-wrap:hover .pill-button {

  border-color: var(--color-primary);

  color: var(--color-primary);

}

.pill-item-wrap.active .pill-button,

.pill-item-wrap input:checked + .pill-button {

  border-color: var(--color-primary);

  background: #fff7ed;

  color: var(--color-primary);

  box-shadow: 0 2px 8px rgba(242, 101, 34, 0.18);

  font-weight: 700;

}



/* Modern Select */

.casaba-modern-select {

  border: 1.5px solid #cbd5e1;

  border-radius: 8px;

  padding: 10px 14px;

  font-size: 14px;

  font-weight: 500;

  color: #334155;

  max-width: 320px;

}



/* 5. SEPETE EKLE & WHATSAPP İLE SİPARİŞ/BİLGİ */

.casaba-add-to-cart-block {

  margin: 25px 0 20px;

}

.product-quantity {

  display: flex;

  flex-wrap: wrap;

  gap: 14px;

  align-items: center;

  margin-bottom: 16px;

}

.qty-control-wrapper {

  display: inline-flex;

  align-items: center;

  border: 1.5px solid #cbd5e1;

  border-radius: 10px;

  background: #ffffff;

  overflow: hidden;

  height: 50px;

}

.qty-btn {

  width: 42px;

  height: 100%;

  border: none;

  background: #f8fafc;

  color: #334155;

  font-size: 20px;

  font-weight: 700;

  cursor: pointer;

  transition: background 0.15s;

  display: flex;

  align-items: center;

  justify-content: center;

}

.qty-btn:hover {

  background: #e2e8f0;

}

.qty-input {

  width: 50px;

  height: 100%;

  border: none;

  text-align: center;

  font-size: 16px;

  font-weight: 700;

  color: #0f172a;

  -moz-appearance: textfield;

}

.qty-input::-webkit-outer-spin-button,

.qty-input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0;

}

.add-cart-btn-wrapper {

  flex: 1;

  min-width: 220px;

}

.btn-modern-add-cart {

  width: 100%;

  height: 50px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  background: var(--color-primary);

  border: none;

  border-radius: 10px;

  color: #ffffff;

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: 0 4px 14px rgba(242, 101, 34, 0.28);

}

.btn-modern-add-cart:hover {

  background: var(--color-primary-dark);

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(242, 101, 34, 0.38);

}

.btn-modern-add-cart:disabled {

  background: #cbd5e1;

  cursor: not-allowed;

  transform: none;

  box-shadow: none;

}



/* WhatsApp SipariÅŸ ve Bilgi Butonu */

.whatsapp-order-box {

  margin: 12px 0 20px;

}

.btn-whatsapp-order {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  width: 100%;

  padding: 13px 20px;

  background: #25D366;

  color: #ffffff !important;

  border-radius: 10px;

  text-decoration: none !important;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28);

}

.btn-whatsapp-order:hover {

  background: #1eb856;

  color: #ffffff !important;

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.38);

}

.whatsapp-svg {

  flex-shrink: 0;

}

.wa-text-group {

  display: flex;

  flex-direction: column;

  text-align: left;

}

.wa-title {

  font-size: 14.5px;

  font-weight: 700;

  line-height: 1.25;

}

.wa-sub {

  font-size: 11.5px;

  opacity: 0.92;

}



/* Mobilde Sepete Ekle ve WhatsApp Butonlarının Ekrana Tam Sığması (Taşma Önleme) */

@media (max-width: 768px) {

  .casaba-add-to-cart-block {

    margin: 16px 0;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .product-quantity-row {

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .product-quantity {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    gap: 8px !important;

    align-items: stretch !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    margin-bottom: 12px !important;

  }

  .qty-control-wrapper {

    flex: 0 0 auto !important;

    width: 104px !important;

    height: 46px !important;

    border-radius: 8px !important;

    box-sizing: border-box !important;

  }

  .qty-btn {

    width: 32px !important;

    font-size: 18px !important;

  }

  .qty-input {

    width: 40px !important;

    font-size: 15px !important;

  }

  .add-cart-btn-wrapper {

    flex: 1 1 auto !important;

    min-width: 0 !important;

    width: auto !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .btn-modern-add-cart {

    width: 100% !important;

    height: 46px !important;

    padding: 0 10px !important;

    font-size: 13.5px !important;

    border-radius: 8px !important;

    gap: 6px !important;

    white-space: nowrap !important;

    box-sizing: border-box !important;

  }

  .btn-modern-add-cart .cart-svg-icon {

    width: 18px !important;

    height: 18px !important;

    flex-shrink: 0 !important;

  }

  .whatsapp-order-box {

    margin: 8px 0 14px !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  .btn-whatsapp-order {

    width: 100% !important;

    max-width: 100% !important;

    padding: 10px 12px !important;

    gap: 8px !important;

    border-radius: 8px !important;

    box-sizing: border-box !important;

  }

  .btn-whatsapp-order .whatsapp-svg {

    width: 20px !important;

    height: 20px !important;

    flex-shrink: 0 !important;

  }

  .btn-whatsapp-order .wa-title {

    font-size: 12.5px !important;

    line-height: 1.2 !important;

  }

  .btn-whatsapp-order .wa-sub {

    font-size: 10.5px !important;

  }

}



/* Stok Rozetleri */

.casaba-stock-status {

  margin-top: 10px;

}

.stock-badge {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 6px 12px;

  border-radius: 20px;

  font-size: 12.5px;

  font-weight: 600;

}

.stock-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

}

.stock-badge.in-stock {

  background: #ecfdf5;

  color: #059669;

}

.stock-badge.in-stock .stock-dot {

  background: #10b981;

}

.stock-badge.low-stock {

  background: #fffbeb;

  color: #d97706;

}

.stock-badge.low-stock .stock-dot {

  background: #f59e0b;

}

.stock-badge.out-stock {

  background: #fef2f2;

  color: #dc2626;

}

.stock-badge.out-stock .stock-dot {

  background: #ef4444;

}



/* 6. KİŞİSELLEŞTİRİLEBİLİR ÜRÜN ALANI (CUSTOMIZATION CARD) */

.casaba-customization-section {

  margin: 22px 0;

}

.customization-card {

  background: #fafafa;

  border: 1.5px dashed #f97316;

  border-radius: 14px;

  padding: 20px;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);

}

.customization-title-box {

  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--color-primary);

  margin-bottom: 4px;

}

.customization-title-box h4 {

  margin: 0;

  font-size: 17px;

  font-weight: 700;

  color: var(--color-primary-dark);

}

.customization-help-text {

  font-size: 12.5px;

  color: #64748b;

  margin-bottom: 16px;

}

.customization-fields-list {

  list-style: none;

  padding: 0;

  margin: 0 0 16px 0;

}

.custom-field-item {

  margin-bottom: 16px;

}

.custom-field-label {

  display: block;

  font-size: 13.5px;

  font-weight: 600;

  color: #1e293b;

  margin-bottom: 6px;

}

.required-badge {

  color: #e11d48;

  font-size: 11.5px;

  margin-left: 6px;

  font-weight: 600;

}

.custom-input-textarea {

  width: 100%;

  border: 1.5px solid #cbd5e1;

  border-radius: 10px;

  padding: 10px 14px;

  font-size: 13.5px;

  resize: vertical;

  min-height: 75px;

  background: #ffffff;

  transition: border-color 0.2s;

}

.custom-input-textarea:focus {

  border-color: var(--color-primary);

  outline: none;

  box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.15);

}

.char-counter {

  display: block;

  text-align: right;

  font-size: 11px;

  color: #94a3b8;

  margin-top: 4px;

}

.saved-custom-info {

  margin-top: 6px;

  padding: 6px 10px;

  background: #ecfdf5;

  border-radius: 6px;

  font-size: 12.5px;

  color: #065f46;

}

.saved-custom-info .saved-label {

  font-weight: 600;

  margin-right: 4px;

}



/* Dosya Yükleme Kutusu */

.custom-file-dropzone {

  position: relative;

  border: 2px dashed #cbd5e1;

  border-radius: 10px;

  padding: 18px;

  text-align: center;

  background: #ffffff;

  cursor: pointer;

  transition: all 0.2s;

}

.custom-file-dropzone:hover {

  border-color: var(--color-primary);

  background: #fffaf7;

}

.custom-file-dropzone input[type="file"] {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  cursor: pointer;

  z-index: 2;

}

.dropzone-inner {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  color: #475569;

}

.upload-icon {

  color: var(--color-primary);

}

.dropzone-filename {

  font-size: 13px;

  font-weight: 500;

}

.btn-browse-file {

  display: inline-block;

  padding: 5px 14px;

  background: #f1f5f9;

  border-radius: 6px;

  font-size: 12px;

  font-weight: 600;

  color: #334155;

  margin-top: 4px;

}

.file-ext-hint {

  display: block;

  font-size: 11px;

  color: #94a3b8;

  margin-top: 4px;

}

.btn-save-customization {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 10px 22px;

  background: var(--color-primary);

  border: none;

  border-radius: 8px;

  color: #ffffff;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;

}

.btn-save-customization:hover {

  background: var(--color-primary-dark);

  transform: translateY(-1px);

}



/* 7. MÜŞTERİ GÜVENCESİ (CUSTOMER REASSURANCE) - AÇILIR KAPANIR MODERN AKORDİYON */

.casaba-reassurance-wrapper {

  margin: 24px 0 16px;

  border-top: 1px solid #edf2f7;

  padding-top: 18px;

}

.casaba-reassurance-wrapper .blockreassurance_product {

  display: flex !important;

  flex-direction: column !important;

  gap: 10px !important;

  list-style: none;

  padding: 0;

  margin: 0;

}

.casaba-reassurance-wrapper .blockreassurance_product > div:not(.clearfix) {

  background: #f8fafc;

  border: 1.5px solid #e2e8f0;

  border-radius: 10px;

  overflow: hidden;

  transition: all 0.25s ease;

  cursor: pointer;

  position: relative;

  display: block !important;

  padding: 0 !important;

}

.casaba-reassurance-wrapper .blockreassurance_product > div:not(.clearfix):hover {

  border-color: #cbd5e1;

  background: #f1f5f9;

}

.casaba-reassurance-wrapper .blockreassurance_product > div.is-open {

  border-color: var(--color-primary);

  background: #ffffff;

  box-shadow: 0 4px 14px rgba(242, 101, 34, 0.08);

}

.casaba-reassurance-wrapper .reassurance-accordion-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 14px;

  user-select: none;

}

.casaba-reassurance-wrapper .reassurance-header-left {

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;

}

.casaba-reassurance-wrapper .item-product {

  display: inline-flex !important;

  align-items: center;

  justify-content: center;

  width: 34px !important;

  height: 34px !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 8px !important;

  flex-shrink: 0;

  padding: 0 !important;

  margin: 0 !important;

}

.casaba-reassurance-wrapper .item-product img,

.casaba-reassurance-wrapper .item-product svg {

  width: 20px !important;

  height: 20px !important;

  object-fit: contain;

}

.casaba-reassurance-wrapper .block-title {

  font-size: 13.5px !important;

  font-weight: 600 !important;

  color: #1e293b !important;

  margin: 0 !important;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.casaba-reassurance-wrapper .reassurance-toggle-icon {

  width: 24px;

  height: 24px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #94a3b8;

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;

  flex-shrink: 0;

}

.casaba-reassurance-wrapper .blockreassurance_product > div.is-open .reassurance-toggle-icon {

  transform: rotate(180deg);

  color: var(--color-primary);

}

.casaba-reassurance-wrapper .blockreassurance_product > div:not(.clearfix) p {

  max-height: 0;

  opacity: 0;

  overflow: hidden;

  margin: 0 !important;

  padding: 0 16px 0 60px !important;

  font-size: 13px !important;

  color: #475569 !important;

  line-height: 1.55 !important;

  transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.3s ease;

}

.casaba-reassurance-wrapper .blockreassurance_product > div.is-open p {

  max-height: 180px;

  opacity: 1;

  padding: 0 16px 14px 60px !important;

}



/* 8. ÜRÜN TABLARI (AÇIKLAMA VE DETAYLAR) */

.casaba-product-tabs-wrapper {

  margin: 40px 0;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 24px;

  box-shadow: 0 2px 10px rgba(0,0,0,0.02);

}

.product-nav-tabs {

  display: flex;

  gap: 10px;

  border-bottom: 2px solid #e2e8f0;

  margin-bottom: 20px;

  list-style: none;

  padding: 0;

}

.product-nav-tabs .nav-link {

  display: inline-block;

  padding: 10px 20px;

  font-size: 15px;

  font-weight: 600;

  color: #64748b;

  text-decoration: none;

  border-bottom: 3px solid transparent;

  margin-bottom: -2px;

  transition: all 0.2s ease;

}

.product-nav-tabs .nav-link:hover {

  color: var(--color-primary);

}

.product-nav-tabs .nav-link.active {

  color: var(--color-primary);

  border-bottom-color: var(--color-primary);

}

.product-description-full {

  font-size: 15px;

  color: #334155;

  line-height: 1.7;

}



/* ============================================================

   9. ÜRÜN DETAYLARI VE ÖZELLİKLERİ (DATA SHEET)

============================================================ */

.casaba-product-details-content {

  display: flex;

  flex-direction: column;

  gap: 24px;

}

.casaba-details-card {

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 12px;

  padding: 20px;

}

.details-card-title {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 16px;

  font-weight: 700;

  color: #0f172a;

  margin-bottom: 16px;

  padding-bottom: 12px;

  border-bottom: 1px solid #e2e8f0;

}

.details-card-title svg {

  stroke: var(--color-primary, #ff6000);

}

.casaba-data-sheet {

  display: flex;

  flex-direction: column;

  margin: 0;

  padding: 0;

}

.data-sheet-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10px 14px;

  border-radius: 8px;

  font-size: 14px;

}

.data-sheet-row:nth-child(odd) {

  background: #ffffff;

}

.data-sheet-label {

  font-weight: 600;

  color: #64748b;

  margin: 0;

  width: 40%;

}

.data-sheet-value {

  color: #1e293b;

  margin: 0;

  width: 60%;

  text-align: right;

}

.brand-link {

  color: var(--color-primary, #ff6000);

  font-weight: 600;

  text-decoration: none;

}

.brand-link:hover {

  text-decoration: underline;

}

.stock-status-badge {

  display: inline-block;

  padding: 3px 10px;

  border-radius: 20px;

  font-size: 12px;

  font-weight: 600;

}

.stock-status-badge.in-stock {

  background: #dcfce7;

  color: #15803d;

}

.stock-status-badge.out-stock {

  background: #fee2e2;

  color: #b91c1c;

}



/* ============================================================

   10. DİNAMİK KİŞİSELLEŞTİRME & EXCEL BİLEŞENLERİ

============================================================ */

.customization-header-main {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

}

.custom-batch-badge {

  background: #e0f2fe;

  color: #0369a1;

  font-size: 12px;

  font-weight: 700;

  padding: 4px 10px;

  border-radius: 20px;

}

.casaba-excel-tools-bar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 16px;

  padding: 12px 14px;

  background: #f1f5f9;

  border: 1px solid #e2e8f0;

  border-radius: 10px;

}

.excel-tools-left, .excel-tools-right {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}

.btn-excel-tool {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 8px 14px;

  border-radius: 8px;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;

  border: none;

}

.btn-upload-excel {

  background: #10b981;

  color: #ffffff;

}

.btn-upload-excel:hover {

  background: #059669;

  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.25);

}

.btn-download-template {

  background: #ffffff;

  color: #334155;

  border: 1px solid #cbd5e1;

}

.btn-download-template:hover {

  background: #f8fafc;

  color: #0f172a;

  border-color: #94a3b8;

}

.btn-view-guide {

  background: #ede9fe;

  color: #6d28d9;

}

.btn-view-guide:hover {

  background: #ddd6fe;

}

.casaba-dynamic-names-section {

  margin-top: 16px;

}

.names-section-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 12px;

}

.names-count-badge {

  background: #f8fafc;

  color: #1e293b;

  border: 1px solid #cbd5e1;

  padding: 4px 10px;

  border-radius: 6px;

  font-size: 13px;

  font-weight: 600;

}

.names-sync-hint {

  font-size: 12px;

  color: #64748b;

}

.casaba-dynamic-rows-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

  max-height: 480px;

  overflow-y: auto;

  padding-right: 4px;

}

.casaba-dynamic-rows-list::-webkit-scrollbar {

  width: 6px;

}

.casaba-dynamic-rows-list::-webkit-scrollbar-thumb {

  background: #cbd5e1;

  border-radius: 4px;

}

.casaba-person-card {

  display: flex;

  align-items: center;

  gap: 10px;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 10px;

  padding: 8px 12px;

  transition: border-color 0.2s, box-shadow 0.2s;

}

.casaba-person-card:focus-within {

  border-color: var(--color-primary, #ff6000);

  box-shadow: 0 0 0 2px rgba(255, 96, 0, 0.12);

}

.person-card-badge {

  flex-shrink: 0;

  width: 32px;

  height: 32px;

  border-radius: 8px;

  background: #f1f5f9;

  color: #475569;

  font-size: 13px;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

}

.person-card-content {

  flex: 1;

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

}

.person-name-wrap {

  flex: 1;

  min-width: 180px;

}

.casaba-person-name-input {

  border: 1px solid #e2e8f0;

  border-radius: 8px;

  padding: 8px 12px;

  font-size: 14px;

  width: 100%;

}

.casaba-person-name-input:focus {

  border-color: var(--color-primary, #ff6000);

  outline: none;

}

.person-photo-picker {

  display: flex;

  align-items: center;

  gap: 6px;

}

.btn-pick-photo {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 7px 12px;

  border-radius: 8px;

  background: #f8fafc;

  border: 1px dashed #cbd5e1;

  color: #475569;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  margin: 0;

  transition: all 0.2s ease;

  max-width: 160px;

  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;

}

.btn-pick-photo:hover {

  background: #f1f5f9;

  border-color: #94a3b8;

}

.btn-pick-photo.has-file {

  background: #ecfdf5;

  border: 1px solid #10b981;

  color: #047857;

}

.btn-clear-photo {

  background: #fee2e2;

  color: #b91c1c;

  border: none;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;

  cursor: pointer;

}

.casaba-add-row-action {

  margin-top: 12px;

}

.btn-add-person-row {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding: 10px;

  background: #ffffff;

  border: 2px dashed #cbd5e1;

  border-radius: 10px;

  color: #475569;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;

}

.btn-add-person-row:hover {

  border-color: var(--color-primary, #ff6000);

  color: var(--color-primary, #ff6000);

  background: #fff7ed;

}



/* ============================================================

   11. EXCEL FORMAT KILAVUZU MODAL

============================================================ */

.casaba-modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(15, 23, 42, 0.65);

  backdrop-filter: blur(4px);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 99999;

  padding: 20px;

}

.casaba-modal-dialog {

  background: #ffffff;

  border-radius: 16px;

  max-width: 540px;

  width: 100%;

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

  overflow: hidden;

  animation: casabaModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);

}

@keyframes casabaModalIn {

  from { opacity: 0; transform: scale(0.94) translateY(12px); }

  to { opacity: 1; transform: scale(1) translateY(0); }

}

.casaba-modal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 18px 24px;

  background: #f8fafc;

  border-bottom: 1px solid #e2e8f0;

}

.modal-title-wrap {

  display: flex;

  align-items: center;

  gap: 10px;

}

.modal-title-wrap h3 {

  font-size: 17px;

  font-weight: 700;

  color: #0f172a;

  margin: 0;

}

.btn-close-modal {

  background: transparent;

  border: none;

  font-size: 24px;

  color: #64748b;

  cursor: pointer;

  line-height: 1;

}

.btn-close-modal:hover {

  color: #0f172a;

}

.casaba-modal-body {

  padding: 22px 24px;

}

.modal-intro {

  font-size: 14px;

  color: #475569;

  margin-bottom: 16px;

  line-height: 1.5;

}

.sample-excel-table-preview {

  border: 1px solid #cbd5e1;

  border-radius: 8px;

  overflow: hidden;

  margin-bottom: 18px;

  background: #ffffff;

}

.table-header-cols {

  display: flex;

  background: #f1f5f9;

  border-bottom: 1px solid #cbd5e1;

}

.col-indicator {

  padding: 6px 12px;

  font-size: 11px;

  font-weight: 700;

  color: #64748b;

  border-right: 1px solid #e2e8f0;

  text-align: center;

  flex: 1;

}

.col-indicator-corner {

  flex: 0 0 35px;

  background: #e2e8f0;

}

.mock-excel-table {

  width: 100%;

  border-collapse: collapse;

  font-size: 13px;

}

.mock-excel-table th, .mock-excel-table td {

  border-right: 1px solid #e2e8f0;

  border-bottom: 1px solid #e2e8f0;

  padding: 6px 12px;

}

.row-num {

  background: #f8fafc;

  color: #94a3b8;

  font-weight: 600;

  text-align: center;

  width: 35px;

}

.col-target {

  background: #ecfdf5;

  color: #065f46;

  font-weight: 700;

}

.col-optional {

  color: #94a3b8;

  font-weight: 400;

}

.cell-highlight {

  color: #0f172a;

  font-weight: 600;

  background: #f0fdf4;

}

.modal-tips-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.tip-item {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  font-size: 13px;

  color: #334155;

  line-height: 1.4;

}

.tip-dot {

  color: #10b981;

  font-weight: 800;

}

.casaba-modal-footer {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 12px;

  padding: 16px 24px;

  background: #f8fafc;

  border-top: 1px solid #e2e8f0;

}

.casaba-modal-footer .btn {

  padding: 8px 18px;

  font-size: 13px;

  font-weight: 600;

  border-radius: 8px;

}

.casaba-modal-footer .btn-outline {

  border: 1px solid #cbd5e1;

  background: #ffffff;

  color: #334155;

}

.casaba-modal-footer .btn-outline:hover {

  background: #f1f5f9;

}

.casaba-modal-footer .btn-primary {

  background: var(--color-primary, #ff6000);

  border: none;

  color: #ffffff;

}

.casaba-modal-footer .btn-primary:hover {

  filter: brightness(0.92);

}



/* ============================================================

   12. TOPLU FOTOĞRAF EŞLEŞTİRME VE BASKI ONAY KART STİLLERİ

============================================================ */

.btn-upload-photos-batch {

  background: #3b82f6;

  color: #ffffff;

}

.btn-upload-photos-batch:hover {

  background: #2563eb;

  box-shadow: 0 3px 10px rgba(59, 130, 246, 0.25);

}

.photos-match-badge {

  display: inline-block;

  font-size: 12px;

  font-weight: 600;

  padding: 4px 10px;

  border-radius: 6px;

  animation: fadeIn 0.2s ease;

}

.photos-match-badge.match-success {

  background: #ecfdf5;

  color: #047857;

  border: 1px solid #10b981;

}

.photos-match-badge.match-warning {

  background: #fffbeb;

  color: #b45309;

  border: 1px solid #f59e0b;

}

.person-photo-thumb {

  width: 34px;

  height: 34px;

  border-radius: 6px;

  object-fit: cover;

  border: 1px solid #10b981;

  box-shadow: 0 1px 4px rgba(0,0,0,0.1);

  flex-shrink: 0;

}



/* Baskı Öncesi Onay Kartı */

.casaba-print-approval-card {

  margin: 20px 0 14px;

  background: #fffbeb;

  border: 2px solid #f59e0b;

  border-radius: 12px;

  padding: 16px 18px;

  transition: all 0.25s ease;

}

.casaba-print-approval-card.is-invalid {

  border-color: #ef4444;

  background: #fef2f2;

  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);

  animation: shakeCard 0.4s ease;

}

@keyframes shakeCard {

  0%, 100% { transform: translateX(0); }

  20%, 60% { transform: translateX(-6px); }

  40%, 80% { transform: translateX(6px); }

}

.approval-checkbox-label {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  cursor: pointer;

  margin: 0;

}

.approval-checkbox-label input[type="checkbox"] {

  width: 20px;

  height: 20px;

  margin-top: 2px;

  accent-color: #d97706;

  cursor: pointer;

  flex-shrink: 0;

}

.approval-text {

  font-size: 13px;

  color: #78350f;

  line-height: 1.5;

}

.casaba-print-approval-card.is-invalid .approval-text {

  color: #991b1b;

}

.approval-text strong {

  color: #b45309;

  font-weight: 700;

}

.approval-error-msg {

  margin-top: 10px;

  padding: 8px 12px;

  background: #fee2e2;

  border-left: 4px solid #ef4444;

  border-radius: 4px;

  font-size: 12px;

  font-weight: 700;

  color: #991b1b;

}



/* ============================================================

   13. ÇOKLU AFİŞ & DİNAMİK ÜRÜNLER VİTRİN MİMARİSİ

============================================================ */

.casaba-main-fullwidth {

  width: 100%;

  margin: 0 auto;

}



.casaba-banner-showcase-container {

  display: flex;

  flex-direction: column;

  gap: 32px;

  margin-top: 12px;

  margin-bottom: 36px;

}



.casaba-showcase-section {

  position: relative;

  width: 100%;

}



/* Afiş (Banner) Görseli - MASAÜSTÜ İÇİN ÖZEL OPTİMİZE EDİLMİŞ BOYUT */

@media (min-width: 769px) {

  .casaba-showcase-banner {

    width: 100%;

    max-height: 400px;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

    background: #f8fafc;

    transition: transform 0.25s ease, box-shadow 0.25s ease;

  }

  .casaba-showcase-banner:hover {

    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);

  }

  .casaba-showcase-banner .banner-link {

    display: block;

    width: 100%;

    max-height: 400px;

    overflow: hidden;

    line-height: 0;

  }

  .casaba-showcase-banner .banner-img {

    width: 100%;

    max-height: 400px;

    object-fit: cover;

    object-position: center;

    display: block;

    border-radius: 16px;

    transition: transform 0.35s ease, filter 0.2s ease;

  }

  .casaba-showcase-banner:hover .banner-img {

    transform: scale(1.015);

    filter: brightness(0.98);

  }

}



/* MOBİL İÇİN ESKİ ORİJİNAL HALİ KESİNLİKLE KORU */

@media (max-width: 768px) {

  .casaba-showcase-banner {

    width: 100% !important;

    max-height: none !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05) !important;

    background: #f8fafc;

  }

  .casaba-showcase-banner .banner-link {

    display: block !important;

    width: 100% !important;

    height: auto !important;

    max-height: none !important;

    line-height: 0 !important;

  }

  .casaba-showcase-banner .banner-img {

    width: 100% !important;

    height: auto !important;

    max-height: none !important;

    object-fit: contain !important;

    display: block !important;

    border-radius: 12px !important;

  }

}



/* Dinamik Ürünler Konteyneri (Tek Satır Yana Kayan) */

.casaba-showcase-slider-wrap {

  position: relative;

  margin-top: 14px;

  width: 100%;

}



.casaba-showcase-products-track {

  display: flex;

  align-items: stretch;

  gap: 14px;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  padding: 4px 2px 14px 2px;

  scrollbar-width: thin;

  scrollbar-color: #cbd5e1 transparent;

}

.casaba-showcase-products-track::-webkit-scrollbar {

  height: 6px;

}

.casaba-showcase-products-track::-webkit-scrollbar-thumb {

  background: #cbd5e1;

  border-radius: 4px;

}



/* Track İçindeki Ürün Kartları */

.casaba-showcase-products-track .ck-product-card {

  flex: 0 0 calc(20% - 12px);

  min-width: 205px;

  max-width: 250px;

  scroll-snap-align: start;

  margin-bottom: 0 !important;

}



/* Masaüstü Ok Butonları */

.showcase-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);

  color: #334155;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 10;

  transition: all 0.2s ease;

  outline: none;

}

.showcase-arrow svg {

  width: 18px;

  height: 18px;

}

.showcase-arrow:hover {

  background: var(--color-primary, #ff6000);

  border-color: var(--color-primary, #ff6000);

  color: #ffffff;

  transform: translateY(-50%) scale(1.08);

}

.showcase-arrow.showcase-prev {

  left: -16px;

}

.showcase-arrow.showcase-next {

  right: -16px;

}



/* ============================================================

   14. GOOGLE YORUMLARI KOMPAKT & İÇTEN SCROLL TASARIMI

============================================================ */

.casaba-google-reviews--compact {

  padding: 20px 18px !important;

  margin-top: 10px !important;

  margin-bottom: 28px !important;

  background: #ffffff !important;

  border: 1px solid #f1f5f9 !important;

  border-radius: 16px !important;

}

.casaba-google-reviews--compact .reviews-header-block {

  margin-bottom: 14px !important;

}

.casaba-google-reviews--compact .reviews-title-area h3 {

  font-size: 18px !important;

  margin-bottom: 3px !important;

}

.casaba-google-reviews--compact .reviews-title-area p {

  font-size: 12px !important;

  color: #64748b !important;

}

.casaba-google-reviews--compact .google-review-card {

  max-height: 185px !important;

  height: 185px !important;

  padding: 14px 16px !important;

  display: flex !important;

  flex-direction: column !important;

  justify-content: flex-start !important;

  box-sizing: border-box !important;

  overflow: hidden !important;

}

.casaba-google-reviews--compact .review-text-content {

  max-height: 75px !important;

  overflow-y: auto !important;

  font-size: 12.5px !important;

  line-height: 1.45 !important;

  color: #334155 !important;

  padding-right: 4px;

  margin: 6px 0 !important;

  scrollbar-width: thin;

  scrollbar-color: #cbd5e1 transparent;

}

.casaba-google-reviews--compact .review-text-content::-webkit-scrollbar {

  width: 4px;

}

.casaba-google-reviews--compact .review-text-content::-webkit-scrollbar-thumb {

  background: #cbd5e1;

  border-radius: 3px;

}

.casaba-google-reviews--compact .reviews-footer-note {

  margin-top: 10px !important;

  font-size: 11px !important;

}



/* ============================================================

   15. RESPONSIVE DÃœZENLEMELER (Mobile <= 768px)

============================================================ */

@media (max-width: 768px) {

  .casaba-banner-showcase-container {

    gap: 22px;

    margin-top: 6px;

    margin-bottom: 24px;

  }

  

  .casaba-showcase-banner {

    border-radius: 10px;

  }

  .casaba-showcase-banner .banner-img {

    border-radius: 10px;

  }



  .casaba-showcase-products-track {

    gap: 10px;

    padding-bottom: 8px;

  }

  .casaba-showcase-products-track .ck-product-card {

    flex: 0 0 calc(46% - 6px);

    min-width: 155px;

    max-width: 175px;

  }



  /* Mobilde doğal parmak kaydırması için ok butonlarını gizle */

  .showcase-arrow {

    display: none !important;

  }



  .casaba-google-reviews--compact {

    padding: 16px 12px !important;

  }

  .casaba-google-reviews--compact .review-card {

    height: 170px !important;

    max-height: 170px !important;

  }

}





/* ============================================================

   16. OKUL HEDÄ°YEM STÄ°LÄ° SEPET SAYFASI (DESKTOP & MOBÄ°L)

   ============================================================ */



/* Sepet Sayfasında Üst Boşluğu Sıfırlama (Üste Dayalı Düzen) */

body#cart #wrapper {

  padding-top: 12px !important;

  margin-top: 0 !important;

}

body#cart #wrapper > .container {

  padding-top: 0 !important;

}

body#cart #notifications,

body#cart .breadcrumb:not(.okul-cart-breadcrumb) {

  display: none !important;

}



/* Sepet Sayfasında Üst Header, Mobil Bar ve Menüdeki Sepet İkonunu Gizleme */

body#cart .casaba-user-actions .cart-trigger,

body#cart .casaba-mobile-icons .cart-trigger,

body#cart .casaba-navigation .nav-cart,

body#cart #casaba-offcanvas-cart,

body#cart #cart-overlay {

  display: none !important;

}



/* PrestaShop Touchspin / Stepper ve Arttırma-Azaltma Çubuklarını Gizle */

body#cart .bootstrap-touchspin,

body#cart .input-group-btn-vertical,

body#cart .js-cart-line-product-quantity {

  display: none !important;

}



/* Breadcrumb */

.okul-cart-breadcrumb {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 16px;

  font-size: 13px;

  font-weight: 700;

  color: #1e293b;

  padding: 4px 0;

}

.okul-cart-breadcrumb .home-icon {

  color: #64748b;

  display: inline-flex;

  align-items: center;

  transition: color 0.2s;

}

.okul-cart-breadcrumb .home-icon:hover {

  color: #ff5722;

}

.okul-cart-breadcrumb .separator {

  color: #94a3b8;

  font-weight: 400;

}

.okul-cart-breadcrumb .current {

  color: #1e293b;

  letter-spacing: 0.5px;

}



/* Sepet Kartı */

.okul-cart-card {

  border: 1px solid #e2e8f0 !important;

  border-radius: 12px !important;

  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;

  background: #ffffff !important;

  overflow: hidden;

  margin-bottom: 20px !important;

  padding: 0 !important;

}

.okul-cart-header {

  display: grid;

  grid-template-columns: 3.2fr 1.2fr 1fr 1.2fr 45px;

  align-items: center;

  background: #f8fafc;

  border-bottom: 1px solid #e2e8f0;

  padding: 14px 20px;

  font-size: 13.5px;

  font-weight: 700;

  color: #475569;

}

.okul-cart-items-list {

  list-style: none;

  padding: 0;

  margin: 0;

}

.okul-cart-item-row {

  border-bottom: 1px solid #f1f5f9;

  padding: 16px 20px;

  transition: background 0.15s ease;

}

.okul-cart-item-row:last-child {

  border-bottom: none;

}

.okul-cart-item-row:hover {

  background: #fafafa;

}



/* Ürün Satırı */

.okul-product-line {

  display: grid;

  grid-template-columns: 3.2fr 1.2fr 1fr 1.2fr 45px;

  align-items: center;

  gap: 12px;

}

.okul-line-product-col {

  display: flex;

  align-items: center;

  gap: 16px;

}

.okul-product-thumb {

  width: 72px;

  height: 72px;

  flex-shrink: 0;

  border-radius: 8px;

  border: 1px solid #e2e8f0;

  overflow: hidden;

  background: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

}

.okul-product-thumb img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

}

.okul-product-info {

  display: flex;

  flex-direction: column;

  gap: 4px;

}

.okul-product-title {

  font-size: 14px;

  font-weight: 700;

  color: #0f172a;

  text-decoration: none;

  line-height: 1.4;

  transition: color 0.15s;

}

.okul-product-title:hover {

  color: #ff5722;

}

.okul-product-code {

  font-size: 12px;

  color: #64748b;

}

.okul-product-code span {

  font-weight: 600;

  color: #475569;

}

.okul-product-attrs {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}

.okul-attr-tag {

  font-size: 11.5px;

  background: #f1f5f9;

  padding: 2px 7px;

  border-radius: 4px;

  color: #475569;

}



/* Kolonlar */

.okul-line-price-col {

  font-size: 14.5px;

  font-weight: 600;

  color: #334155;

}

.okul-line-qty-col {

  font-size: 14px;

}

.okul-qty-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 38px;

  height: 38px;

  border-radius: 8px;

  background: #f8fafc;

  border: 1px solid #cbd5e1;

  font-size: 14px;

  font-weight: 700;

  color: #1e293b;

}

.okul-line-total-col {

  font-size: 15.5px;

  font-weight: 800;

  color: #0f172a;

}

.okul-trash-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 36px;

  height: 36px;

  border-radius: 8px;

  color: #94a3b8;

  transition: all 0.2s;

  text-decoration: none;

}

.okul-trash-btn:hover {

  background: #fee2e2;

  color: #ef4444;

}



/* Tablo Altı Aksiyon Çubuğu */

.okul-cart-bottom-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 14px;

  margin-top: 14px;

  margin-bottom: 24px;

}

.okul-btn-continue {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 10px 18px;

  font-size: 13.5px;

  font-weight: 600;

  color: #334155;

  background: #ffffff;

  border: 1.5px solid #cbd5e1;

  border-radius: 8px;

  text-decoration: none;

  transition: all 0.2s;

}

.okul-btn-continue:hover {

  background: #f1f5f9;

  border-color: #94a3b8;

  color: #0f172a;

}

.okul-free-ship-pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 10px 18px;

  border-radius: 8px;

  background: #fefce8;

  border: 1px solid #fef08a;

  font-size: 13px;

  color: #854d0e;

}

.okul-free-ship-pill .highlight {

  font-weight: 700;

  text-decoration: underline;

}



/* Sağ Kolon Sipariş Özeti Kartı */

.okul-summary-card {

  border: 1px solid #e2e8f0 !important;

  border-radius: 12px !important;

  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;

  background: #ffffff !important;

  overflow: hidden;

  margin-bottom: 20px !important;

  padding: 0 !important;

}

.okul-summary-header {

  padding: 14px 20px;

  background: #f8fafc;

  border-bottom: 1px solid #e2e8f0;

}

.okul-summary-header .summary-title {

  margin: 0;

  font-size: 15px;

  font-weight: 700;

  color: #0f172a;

}

.okul-summary-card .card-block {

  padding: 20px;

}

.okul-summary-card .cart-summary-line {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 13.5px;

  color: #475569;

  padding: 6px 0;

}

.okul-summary-card .cart-summary-line.cart-total {

  border-top: 1.5px solid #e2e8f0;

  margin-top: 10px;

  padding-top: 14px;

  font-size: 16px;

  font-weight: 800;

  color: #0f172a;

}

.okul-summary-card .cart-summary-line.cart-total .value {

  font-size: 20px;

  font-weight: 800;

  color: #0f172a;

}



/* Sipariş Notu & Sözleşme & Buton */

.casaba-order-note-wrapper {

  margin-top: 16px;

}

.casaba-order-note-label {

  font-size: 13px;

  font-weight: 600;

  color: #334155;

  margin-bottom: 6px;

}

.casaba-order-note-textarea {

  width: 100%;

  border: 1.5px solid #e2e8f0;

  border-radius: 8px;

  padding: 10px 12px;

  font-size: 13px;

  resize: vertical;

  min-height: 65px;

  box-sizing: border-box;

  font-family: inherit;

  transition: border-color 0.2s;

}

.casaba-order-note-textarea:focus {

  border-color: #2563eb;

  outline: none;

}

.casaba-cart-legal-box {

  margin-top: 14px;

  font-size: 12.5px;

  color: #475569;

  line-height: 1.5;

}

.casaba-cart-legal-label {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  cursor: pointer;

}

.casaba-cart-legal-label input[type="checkbox"] {

  margin-top: 3px;

  accent-color: #16a34a;

  transform: scale(1.15);

}

.casaba-cart-legal-link {

  color: #1e3a8a;

  font-weight: 600;

  text-decoration: underline;

}



/* Marka Turuncusu "SipariÅŸi Tamamla" Butonu (Site KimliÄŸine Uygun) */

.casaba-complete-order-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

  padding: 14px 20px;

  margin-top: 18px;

  border-radius: 8px;

  background: #ff6000 !important;

  border: none !important;

  color: #ffffff !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  letter-spacing: 0.5px;

  text-transform: uppercase;

  cursor: pointer;

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: 0 4px 14px rgba(255, 96, 0, 0.28);

}

.casaba-complete-order-btn:hover:not(:disabled) {

  background: #e05500 !important;

  transform: translateY(-1px);

  box-shadow: 0 6px 18px rgba(255, 96, 0, 0.38);

}

.casaba-complete-order-btn.disabled,

.casaba-complete-order-btn:disabled {

  background: #94a3b8 !important;

  box-shadow: none !important;

  cursor: not-allowed;

  opacity: 0.8;

  transform: none !important;

}



/* Kupon Kodu Kartı */

.okul-coupon-card {

  border: 1px solid #e2e8f0 !important;

  border-radius: 12px !important;

  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;

  background: #ffffff !important;

  overflow: hidden;

  margin-top: 16px !important;

  padding: 0 !important;

}

.okul-coupon-header {

  padding: 12px 20px;

  background: #f8fafc;

  border-bottom: 1px solid #e2e8f0;

}

.okul-coupon-header .coupon-title {

  margin: 0;

  font-size: 14px;

  font-weight: 700;

  color: #0f172a;

}

.okul-coupon-body {

  padding: 16px 20px;

}

.okul-coupon-body .coupon-desc {

  font-size: 12px;

  color: #64748b;

  margin-bottom: 12px;

  line-height: 1.4;

}

.okul-coupon-form .coupon-input-group {

  display: flex;

  gap: 8px;

}

.coupon-input {

  flex: 1;

  border: 1.5px solid #cbd5e1;

  border-radius: 8px;

  padding: 9px 12px;

  font-size: 13.5px;

}

.coupon-submit-btn {

  padding: 9px 18px;

  background: #1e293b !important;

  border-color: #1e293b !important;

  color: #ffffff !important;

  font-weight: 700;

  font-size: 13.5px;

  border-radius: 8px;

  cursor: pointer;

  transition: background 0.2s;

}

.coupon-submit-btn:hover {

  background: #0f172a !important;

}

.okul-voucher-list {

  list-style: none;

  padding: 0;

  margin: 0 0 12px;

}

.okul-voucher-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 13px;

  padding: 6px 10px;

  background: #f8fafc;

  border-radius: 6px;

  margin-bottom: 6px;

}

.voucher-remove {

  color: #ef4444;

  text-decoration: none;

  margin-left: 8px;

  font-weight: bold;

}



/* ============================================================

   17. MOBÄ°L SEPET UYARLAMALARI (Mobile <= 767px)

   ============================================================ */

@media (max-width: 767px) {

  body#cart #wrapper {

    padding-top: 8px !important;

  }

  .okul-cart-item-row {

    padding: 12px 14px;

  }

  .okul-product-line {

    display: grid;

    grid-template-columns: 64px 1fr auto;

    gap: 12px;

    align-items: flex-start;

  }

  .okul-line-product-col {

    grid-column: 1 / 3;

    display: flex;

    gap: 12px;

    align-items: flex-start;

  }

  .okul-product-thumb {

    width: 64px;

    height: 64px;

    border-radius: 6px;

  }

  .okul-product-title {

    font-size: 13px;

    line-height: 1.35;

  }

  .okul-product-code {

    font-size: 11px;

  }

  .okul-mobile-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 6px;

    font-size: 12px;

  }

  .okul-mobile-qty {

    background: #f1f5f9;

    padding: 2px 8px;

    border-radius: 4px;

    font-weight: 600;

    color: #334155;

  }

  .okul-mobile-unit-price {

    color: #64748b;

    font-size: 12px;

  }

  .okul-line-total-col {

    grid-column: 2 / 3;

    font-size: 14.5px;

    font-weight: 800;

    color: #0f172a;

    margin-top: 4px;

  }

  .okul-line-action-col {

    grid-column: 3 / 4;

    grid-row: 1 / 3;

    align-self: flex-start;

  }

  .okul-trash-btn {

    width: 32px;

    height: 32px;

  }

  .okul-cart-bottom-bar {

    flex-direction: column;

    align-items: stretch;

  }

  .okul-btn-continue {

    justify-content: center;

  }

  .okul-free-ship-pill {

    justify-content: center;

    font-size: 12px;

  }

}







/* ============================================================

   18. KULLANICI GERÄ°BÄ°LDÄ°RÄ°MÄ° DÃœZELTMELERÄ° (SEPET & ÃœRÃœN DETAY)

   ============================================================ */



/* 1. Ürün Sayfası Adet Seçici (+ / -) Çakışma Düzeltmesi */

.product-add-to-cart .bootstrap-touchspin .input-group-btn-vertical,

.product-add-to-cart .bootstrap-touchspin-up,

.product-add-to-cart .bootstrap-touchspin-down,

.product-add-to-cart input[type=number]::-webkit-inner-spin-button,

.product-add-to-cart input[type=number]::-webkit-outer-spin-button {

  display: none !important;

  -webkit-appearance: none !important;

  margin: 0 !important;

}



.qty-control-wrapper {

  display: inline-flex !important;

  align-items: center !important;

  border: 1.5px solid #cbd5e1 !important;

  border-radius: 8px !important;

  background: #ffffff !important;

  overflow: hidden !important;

  height: 46px !important;

}



.qty-control-wrapper .bootstrap-touchspin {

  display: flex !important;

  align-items: center !important;

  height: 100% !important;

  border: none !important;

  margin: 0 !important;

  padding: 0 !important;

  box-shadow: none !important;

  background: transparent !important;

}



.qty-control-wrapper .qty-btn {

  width: 36px !important;

  height: 100% !important;

  border: none !important;

  background: #f8fafc !important;

  color: #334155 !important;

  font-size: 20px !important;

  font-weight: 700 !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  transition: background 0.15s !important;

  user-select: none !important;

}



.qty-control-wrapper .qty-btn:hover {

  background: #e2e8f0 !important;

}



.qty-control-wrapper .qty-input {

  width: 44px !important;

  height: 100% !important;

  border: none !important;

  text-align: center !important;

  font-size: 16px !important;

  font-weight: 700 !important;

  color: #0f172a !important;

  padding: 0 !important;

  background: transparent !important;

  -moz-appearance: textfield !important;

}



/* 2. Sipariş Notu: Genişletilemesin (resize:none), İstenilen Uzunlukta Yazılabilsin */

.casaba-order-note-textarea {

  resize: none !important;

  overflow-y: auto !important;

  min-height: 75px !important;

}



/* 3. Dinamik Kargo Bedava Bandı (Toplam Tutarın Hemen Altında) */

.casaba-free-shipping-banner {

  display: flex;

  flex-direction: column;

  gap: 8px;

  background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%) !important;

  color: #ffffff !important;

  padding: 12px 16px !important;

  border-radius: 10px !important;

  margin: 12px 0 0 0 !important;

  font-size: 13px !important;

  line-height: 1.4 !important;

  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.18) !important;

}



.casaba-free-shipping-content {

  display: flex;

  align-items: center;

  gap: 10px;

}



.casaba-free-shipping-content .ship-icon {

  font-size: 20px;

  flex-shrink: 0;

}



.casaba-free-shipping-content .ship-text {

  flex: 1;

  font-size: 12.5px;

}



.casaba-free-shipping-content .ship-text strong {

  font-weight: 700;

}



.casaba-free-shipping-content .remaining-text {

  display: block;

  font-size: 12px;

  opacity: 0.92;

  margin-top: 2px;

}



.casaba-free-shipping-continue-link {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  background: rgba(255, 255, 255, 0.2);

  color: #ffffff !important;

  padding: 6px 12px;

  border-radius: 6px;

  font-size: 12px;

  font-weight: 700;

  text-decoration: none !important;

  transition: background 0.2s;

  align-self: flex-start;

}



.casaba-free-shipping-continue-link:hover {

  background: rgba(255, 255, 255, 0.35);

  color: #ffffff !important;

}



/* 4. Eski Güvenlik ve Teslimat Politikası Akordeon Tasarımı (Hızlı & Hatasız) */

.casaba-reassurance-accordion {

  margin-top: 12px !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 8px !important;

  background: #ffffff !important;

  overflow: hidden !important;

}



.casaba-reassure-item {

  border-bottom: 1px solid #e2e8f0 !important;

}



.casaba-reassure-item:last-child {

  border-bottom: none !important;

}



.casaba-reassure-header {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding: 9px 12px !important;

  cursor: pointer !important;

  background: #f8fafc !important;

  transition: background 0.15s ease !important;

  user-select: none !important;

}



.casaba-reassure-header:hover {

  background: #f1f5f9 !important;

}



.casaba-reassure-left {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

}



.casaba-reassure-icon {

  font-size: 16px !important;

  color: #64748b !important;

  display: flex !important;

  align-items: center !important;

}



.casaba-reassure-title {

  font-size: 12px !important;

  font-weight: 600 !important;

  color: #1e293b !important;

}



.casaba-reassure-arrow {

  font-size: 17px !important;

  color: #94a3b8 !important;

  transition: transform 0.2s ease !important;

  transform: rotate(0deg) !important;

  display: inline-block !important;

}



.casaba-reassure-item.is-open .casaba-reassure-arrow {

  transform: rotate(180deg) !important;

  color: #1e3a5f !important;

}



.casaba-reassure-content {

  background: #ffffff !important;

  padding: 0 12px !important;

  display: none !important;

}



.casaba-reassure-item.is-open .casaba-reassure-content {

  display: block !important;

}



.casaba-reassure-inner {

  padding: 8px 0 10px !important;

  font-size: 11.5px !important;

  line-height: 1.45 !important;

  color: #475569 !important;

  border-top: 1px solid #f1f5f9 !important;

}



/* 5. Tablo Altı Butonları Kaldır (Masaüstü & Mobil - Kullanıcı Talebi) */

.okul-cart-bottom-bar,

.okul-free-ship-pill {

  display: none !important;

}





/* ============================================================

   19. SİPARİŞ ÖZETİ ALANI BOŞLUK AZALTMA & OPTİMİZASYON (MOBİL & MASAÜSTÜ)

   ============================================================ */

.okul-summary-card .card-block {

  padding: 0 !important;

}



.okul-summary-card > .card-block {

  padding: 14px 16px !important;

}



.okul-summary-card .cart-detailed-subtotals {

  padding: 0 !important;

  margin: 0 !important;

}



.okul-summary-card .cart-summary-totals {

  padding: 0 !important;

  margin: 0 !important;

}



.okul-summary-card .cart-detailed-actions {

  padding: 0 !important;

  margin: 0 !important;

}



/* Ara Toplam, Kargo Ücreti, K.D.V. Toplam satır aralığı */

.okul-summary-card .cart-summary-line {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  font-size: 13px !important;

  color: #475569 !important;

  padding: 3px 0 !important;

  margin: 0 !important;

}



/* KDV Toplamı altındaki çizgi ve TOPLAM satırı */

.okul-summary-card .cart-summary-line.cart-total {

  border-top: 1px solid #e2e8f0 !important;

  margin-top: 6px !important;

  padding-top: 8px !important;

  padding-bottom: 2px !important;

  font-size: 15px !important;

  font-weight: 800 !important;

  color: #0f172a !important;

}



.okul-summary-card .cart-summary-line.cart-total .value {

  font-size: 18px !important;

  font-weight: 800 !important;

  color: #0f172a !important;

}



/* Toplam ile Kargo Bedava Bandı Arası Boşluk */

.casaba-free-shipping-banner {

  display: flex !important;

  flex-direction: column !important;

  gap: 5px !important;

  background: linear-gradient(135deg, #1e3a5f 0%, #1d4ed8 100%) !important;

  color: #ffffff !important;

  padding: 7px 11px !important;

  border-radius: 7px !important;

  margin: 6px 0 0 0 !important;

  font-size: 12px !important;

  line-height: 1.35 !important;

  box-shadow: 0 3px 8px rgba(29, 78, 216, 0.15) !important;

}



.casaba-free-shipping-continue-link {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 4px !important;

  background: rgba(255, 255, 255, 0.22) !important;

  color: #ffffff !important;

  padding: 3px 9px !important;

  border-radius: 4px !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  transition: background 0.15s ease !important;

  align-self: flex-start !important;

}

.casaba-free-shipping-continue-link:hover {

  background: rgba(255, 255, 255, 0.35) !important;

}



/* Kargo Bedava Yazısı Altındaki Sipariş Notu Aralığı */

.casaba-order-note-wrapper {

  margin-top: 8px !important;

}



.casaba-order-note-label {

  font-size: 12px !important;

  font-weight: 600 !important;

  color: #334155 !important;

  margin-bottom: 3px !important;

}



.casaba-order-note-textarea {

  width: 100% !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: 6px !important;

  padding: 6px 10px !important;

  font-size: 12px !important;

  resize: none !important;

  min-height: 50px !important;

  box-sizing: border-box !important;

  font-family: inherit !important;

  overflow-y: auto !important;

}



/* Mesafeli Satış Sözleşmesi 3 Satır Düzeni */

.casaba-cart-legal-box {

  margin-top: 8px !important;

  font-size: 11px !important;

  color: #475569 !important;

  line-height: 1.35 !important;

}



.casaba-cart-legal-label {

  display: flex !important;

  align-items: flex-start !important;

  gap: 6px !important;

  cursor: pointer !important;

}



.casaba-cart-legal-text {

  display: inline-block !important;

  font-size: 11px !important;

  line-height: 1.35 !important;

}



/* SipariÅŸi Tamamla Butonu */

.casaba-complete-order-btn {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  width: 100% !important;

  padding: 12px 16px !important;

  margin-top: 10px !important;

  border-radius: 7px !important;

  background: #ff6000 !important;

  color: #ffffff !important;

  font-size: 14px !important;

  font-weight: 700 !important;

  cursor: pointer !important;

  border: none !important;

  box-shadow: 0 4px 14px rgba(255, 96, 0, 0.28) !important;

  transition: all 0.2s ease !important;

}

.casaba-complete-order-btn:hover:not(:disabled) {

  background: #e05500 !important;

  box-shadow: 0 6px 18px rgba(255, 96, 0, 0.38) !important;

}



/* Mobil Alt Navigasyon Güvenliği */

.casaba-mobile-bottom-bar {

  z-index: 9999 !important;

  pointer-events: auto !important;

}



.casaba-mobile-bottom-bar a.bottom-bar-item {

  pointer-events: auto !important;

  cursor: pointer !important;

}



/* ============================================================

   17. OKULHEDİYEM REFERANS STİLİ ÖDEME (CHECKOUT) SAYFASI

   ============================================================ */



/* Sayfa Ãœst BoÅŸluÄŸu & Bildirim / Breadcrumb TemizliÄŸi */

body#checkout #wrapper {

  padding-top: 14px !important;

  margin-top: 0 !important;

}

body#checkout #wrapper > .container {

  padding-top: 0 !important;

}

body#checkout #notifications,

body#checkout .breadcrumb {

  display: none !important;

}



/* ========================================================

 * ÖDEME SAYFASINDA MASAÜSTÜ VE MOBİLDE SEPET İKONLARI VE SEÇENEĞİ GİZLİDİR

 * ======================================================== */

body#checkout .cart-trigger,

body#checkout .nav-cart,

body#checkout .action-item.cart,

body#checkout .action-item.cart-trigger,

body#checkout .icon-btn.cart-trigger,

body#checkout .casaba-user-actions .cart-trigger,

body#checkout .casaba-mobile-icons .cart-trigger,

body#checkout .bottom-bar-item.cart,

body#checkout .bottom-bar-item.cart-trigger,

body#checkout #casaba-offcanvas-cart,

body#checkout .header-cart,

body#checkout #_desktop_cart,

body#checkout #_mobile_cart {

  display: none !important;

}



/* Mobilde alt gezinme barı sepet gizlenince 3 eşit kolona oturur */

body#checkout .casaba-mobile-bottom-bar .bottom-bar-grid {

  grid-template-columns: repeat(3, 1fr) !important;

}



/* Adım Başlığı Sadeleştirme */

body#checkout .checkout-step {

  border: 1px solid #e2e8f0 !important;

  border-radius: 12px !important;

  padding: 20px 24px !important;

  margin-bottom: 24px !important;

  background: #ffffff !important;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;

}

body#checkout .checkout-step .step-title {

  font-size: 17px !important;

  font-weight: 700 !important;

  color: #1e293b !important;

  margin-bottom: 20px !important;

  padding-bottom: 12px !important;

  border-bottom: 1px solid #f1f5f9 !important;

  display: flex !important;

  align-items: center !important;

}

body#checkout .checkout-step .step-number {

  background: #1e3050 !important;

  color: #ffffff !important;

  border-radius: 50% !important;

  width: 28px !important;

  height: 28px !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 13px !important;

  margin-right: 10px !important;

}



/* HIZLI SİPARİŞ & HESABIM VAR BUTONLARI (REFERANS SİTE STİLİ) */

.casaba-checkout-selector {

  margin: 12px 0 24px 0 !important;

}



.casaba-choice-col {

  margin-bottom: 12px !important;

}



.casaba-choice-card {

  display: flex !important;

  align-items: center !important;

  padding: 12px 16px !important;

  background: #ffffff !important;

  border: 1.5px solid #cbd5e1 !important;

  border-radius: 8px !important;

  cursor: pointer !important;

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;

  position: relative !important;

  user-select: none !important;

  min-height: 52px !important;

  width: 100% !important;

}



.casaba-choice-card:hover {

  border-color: #64748b !important;

  background: #f8fafc !important;

}



/* Aktif Buton Durumu - Okulhediyem Referans Koyu Lacivert (#1e3050 / #1b2a47) */

.casaba-choice-card.active {

  background: #1e3050 !important;

  border-color: #1e3050 !important;

  color: #ffffff !important;

  box-shadow: 0 4px 14px rgba(30, 48, 80, 0.22) !important;

}



/* Radyo Buton Göstergesi */

.casaba-choice-card .choice-radio {

  width: 20px !important;

  height: 20px !important;

  border: 2px solid #94a3b8 !important;

  border-radius: 50% !important;

  margin-right: 12px !important;

  margin-top: 2px !important;

  flex-shrink: 0 !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: #ffffff !important;

  transition: all 0.2s ease !important;

}



.casaba-choice-card.active .choice-radio {

  border-color: #ffffff !important;

  background: #ffffff !important;

}



.casaba-choice-card.active .choice-radio::after {

  content: '✓' !important;

  font-size: 13px !important;

  font-weight: 800 !important;

  color: #1e3050 !important;

  line-height: 1 !important;

}



.casaba-choice-card .choice-content {

  flex: 1 !important;

}



.casaba-choice-card .choice-title {

  font-size: 14.5px !important;

  font-weight: 700 !important;

  color: #1e293b !important;

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  flex-wrap: wrap !important;

  line-height: 1.3 !important;

}



.casaba-choice-card.active .choice-title {

  color: #ffffff !important;

}



.casaba-choice-card .choice-badge {

  font-size: 10px !important;

  font-weight: 700 !important;

  padding: 2px 7px !important;

  background: #f1f5f9 !important;

  color: #1e3050 !important;

  border-radius: 4px !important;

  text-transform: uppercase !important;

  letter-spacing: 0.3px !important;

}



.casaba-choice-card.active .choice-badge {

  background: rgba(255, 255, 255, 0.22) !important;

  color: #ffffff !important;

}



.casaba-choice-card .choice-desc {

  font-size: 12px !important;

  color: #64748b !important;

  margin: 4px 0 0 0 !important;

  line-height: 1.4 !important;

}



.casaba-choice-card.active .choice-desc {

  color: #cbd5e1 !important;

}



/* FORM ALANLARI VE ETÄ°KETLER */

#customer-form .form-group {

  margin-bottom: 16px !important;

}



#customer-form .form-control-label {

  font-size: 13.5px !important;

  font-weight: 600 !important;

  color: #334155 !important;

  padding-top: 10px !important;

}



#customer-form .form-control,

.casaba-fullname-input,

.casaba-phone-input,

.casaba-fast-state-select,

.casaba-fast-district-select,

.casaba-fast-address-input {

  border: 1.5px solid #cbd5e1 !important;

  border-radius: 8px !important;

  padding: 10px 14px !important;

  font-size: 14px !important;

  color: #1e293b !important;

  background: #ffffff !important;

  transition: border-color 0.2s, box-shadow 0.2s !important;

  height: 44px !important;

}



.casaba-fast-address-input {

  height: auto !important;

  min-height: 85px !important;

  resize: vertical !important;

}



#customer-form .form-control:focus,

.casaba-fullname-input:focus,

.casaba-phone-input:focus,

.casaba-fast-state-select:focus,

.casaba-fast-district-select:focus,

.casaba-fast-address-input:focus {

  border-color: #1e3050 !important;

  box-shadow: 0 0 0 3px rgba(30, 48, 80, 0.12) !important;

  outline: none !important;

}



.casaba-fullname-help {

  font-size: 12px !important;

  color: #64748b !important;

  margin-top: 4px !important;

  display: block !important;

}



/* TESLİMAT ADRESİ VE KARGO FİRMASI BÖLÜM BAŞLIKLARI */

.casaba-fast-checkout-section {

  margin-top: 24px !important;

  padding-top: 18px !important;

  border-top: 1px dashed #e2e8f0 !important;

}



.casaba-section-subtitle {

  font-size: 15px !important;

  font-weight: 700 !important;

  color: #1e293b !important;

  margin-bottom: 16px !important;

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

}



.casaba-section-subtitle .material-icons {

  font-size: 20px !important;

  color: #1e3050 !important;

}



/* KARGO FİRMASI SEÇİM KARTLARI */

.casaba-fast-carriers-list {

  display: flex !important;

  flex-direction: column !important;

  gap: 10px !important;

  margin-top: 10px !important;

}



.casaba-carrier-item {

  display: flex !important;

  align-items: center !important;

  padding: 12px 16px !important;

  background: #ffffff !important;

  border: 1.5px solid #cbd5e1 !important;

  border-radius: 8px !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  gap: 14px !important;

  margin-bottom: 0 !important;

}



.casaba-carrier-item:hover {

  border-color: #64748b !important;

  background: #f8fafc !important;

}



.casaba-carrier-item.selected {

  border-color: #1e3050 !important;

  background: #f8fafc !important;

  box-shadow: 0 2px 8px rgba(30, 48, 80, 0.08) !important;

}



.casaba-carrier-item input[type="radio"] {

  width: 18px !important;

  height: 18px !important;

  accent-color: #1e3050 !important;

  margin: 0 !important;

}



.casaba-carrier-logo-wrap {

  width: 75px !important;

  height: 38px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 6px !important;

  padding: 3px !important;

  flex-shrink: 0 !important;

}



.casaba-carrier-logo-img {

  max-width: 100% !important;

  max-height: 100% !important;

  object-fit: contain !important;

  display: block !important;

}



.casaba-carrier-info {

  flex: 1 !important;

  display: flex !important;

  flex-direction: column !important;

}



.casaba-carrier-name {

  font-size: 14px !important;

  font-weight: 700 !important;

  color: #1e293b !important;

}



.casaba-carrier-delay {

  font-size: 12px !important;

  color: #64748b !important;

}



.casaba-carrier-price {

  font-size: 13.5px !important;

  font-weight: 700 !important;

  color: #16a34a !important;

}



/* DEVAM ET / SİPARİŞİ TAMAMLA BUTONU (Site Kimliğine Uygun Marka Turuncusu) */

.casaba-continue-btn,

.casaba-fast-checkout-btn {

  background: #ff6000 !important;

  border: none !important;

  border-radius: 8px !important;

  padding: 13px 28px !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  color: #ffffff !important;

  box-shadow: 0 4px 14px rgba(255, 96, 0, 0.28) !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

}



.casaba-continue-btn:hover,

.casaba-fast-checkout-btn:hover {

  background: #e05500 !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 6px 18px rgba(255, 96, 0, 0.38) !important;

}



/* FOOTER TEMİZLİĞİ VE DÜZENİ */

.casaba-checkout-footer {

  padding: 20px 0 !important;

  margin-top: 30px !important;

  border-top: 1px solid #e2e8f0 !important;

  background: #f8fafc !important;

}



.casaba-checkout-footer .casaba-footer-legal p {

  font-size: 12.5px !important;

  color: #64748b !important;

  margin: 0 !important;

  line-height: 1.5 !important;

}



/* MOBÄ°L DUYARLILIK */

@media (max-width: 767px) {

  .casaba-checkout-selector .row {

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    gap: 8px !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

  }

  .casaba-choice-col {

    flex: 1 1 50% !important;

    max-width: 50% !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-bottom: 0 !important;

  }

  .casaba-choice-card {

    min-height: 46px !important;

    padding: 10px 8px !important;

    align-items: center !important;

    justify-content: center !important;

  }

  .casaba-choice-card .choice-radio {

    width: 16px !important;

    height: 16px !important;

    margin-right: 6px !important;

    margin-top: 0 !important;

  }

  .casaba-choice-card.active .choice-radio::after {

    font-size: 11px !important;

  }

  .casaba-choice-card .choice-title {

    font-size: 12px !important;

    white-space: nowrap !important;

    gap: 4px !important;

    line-height: 1.2 !important;

  }

  .casaba-choice-card .choice-badge {

    display: none !important;

  }

  .casaba-choice-card .choice-desc {

    display: none !important;

  }

  body#checkout .checkout-step {

    padding: 16px 14px !important;

  }

}











/* ============================================================

   20. UYELIK ve GIRIS SAYFASI - OkulHediyem Tarzi 2 Kolon / 2 Sekme

   ============================================================ */



/* Sayfanin #wrapper padding sifirlamasi */

body#authentication #wrapper,

body#registration #wrapper {

  padding-top: 14px !important;

  margin-top: 0 !important;

}

body#authentication #wrapper > .container,

body#registration #wrapper > .container {

  padding-top: 0 !important;

}

body#authentication #notifications,

body#authentication .breadcrumb,

body#registration #notifications,

body#registration .breadcrumb {

  display: none !important;

}



/* Uyelik Sayfasi Ana Sarici */

.casaba-auth-page {

  max-width: 1080px;

  margin: 0 auto;

  padding: 0 16px 40px 16px;

}



/* ---- MOBIL SEKME BASLIKLARI ---- */

.casaba-auth-tabs {

  display: flex;

  background: #f1f5f9;

  border-radius: 10px;

  padding: 4px;

  gap: 4px;

  margin-bottom: 20px;

}



.casaba-auth-tab {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  padding: 10px 14px;

  border: none;

  border-radius: 8px;

  background: transparent;

  color: #64748b;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;

  font-family: inherit;

}



.casaba-auth-tab:hover {

  background: rgba(30, 48, 80, 0.06);

  color: #1e3050;

}



.casaba-auth-tab.active {

  background: #1e3050;

  color: #ffffff;

  box-shadow: 0 2px 8px rgba(30, 48, 80, 0.22);

}



/* ---- 2 KOLONLU LAYOUT ---- */

.casaba-auth-grid {

  display: flex;

  gap: 0;

  align-items: flex-start;

}



.casaba-auth-col {

  flex: 1;

  min-width: 0;

}



/* ---- KART YAPISI ---- */

.casaba-auth-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 28px 28px 24px 28px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

}



.casaba-auth-card-header {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 4px;

  color: #1e3050;

}



.casaba-auth-card-header h2 {

  font-size: 18px;

  font-weight: 700;

  color: #1e293b;

  margin: 0;

}



.casaba-auth-card-desc {

  font-size: 13px;

  color: #64748b;

  margin: 0 0 18px 0;

}



/* ---- ORTA DIVIDER (masaustu) ---- */

.casaba-auth-divider {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 0 20px;

  flex-shrink: 0;

  min-height: 200px;

}



.casaba-divider-line {

  flex: 1;

  width: 1px;

  background: #e2e8f0;

  min-height: 40px;

}



.casaba-divider-text {

  font-size: 12px;

  font-weight: 700;

  color: #94a3b8;

  padding: 10px 0;

  letter-spacing: 0.5px;

}



/* ---- HIZLI SIPARIS YONLENDIRME BANDI ---- */

.casaba-guest-banner {

  margin-top: 28px;

  background: linear-gradient(135deg, #f8fafc 0%, #f0f7ff 100%);

  border: 1px solid #dbeafe;

  border-radius: 12px;

  overflow: hidden;

}



.casaba-guest-banner-inner {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 16px 24px;

  flex-wrap: wrap;

}



.casaba-guest-banner-inner > svg {

  color: #f97316;

  flex-shrink: 0;

}



.casaba-guest-banner-text {

  flex: 1;

  font-size: 14px;

  color: #1e293b;

  min-width: 180px;

}



.casaba-guest-banner-text strong {

  color: #1e3050;

}



.casaba-guest-banner-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  padding: 9px 18px;

  background: #1e3050;

  color: #ffffff !important;

  border-radius: 8px;

  font-size: 13.5px;

  font-weight: 700;

  text-decoration: none !important;

  transition: background 0.2s ease, transform 0.15s ease;

  white-space: nowrap;

}



.casaba-guest-banner-btn:hover {

  background: #152238;

  transform: translateY(-1px);

}



/* ---- YENI UYELIK REDIRECT KUTUSU (odeme adiminda) ---- */

.casaba-register-redirect-box {

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 10px;

  padding: 20px 24px;

  text-align: center;

}



.casaba-register-redirect-box p {

  font-size: 14px;

  color: #475569;

  margin: 0 0 4px 0;

}



/* ---- ODEME ADIMI: 2 SECENEK KARTI RESPONSIVE ---- */

@media (min-width: 992px) {

  body#checkout .casaba-checkout-selector .row {

    display: flex;

    flex-wrap: nowrap;

  }

  body#checkout .casaba-checkout-selector .casaba-choice-col {

    flex: 0 0 50%;

    max-width: 50%;

  }

}



/* ---- MOBIL DUYARLILIK ---- */

@media (max-width: 991px) {

  .casaba-auth-grid {

    flex-direction: column;

  }

  .casaba-auth-divider {

    display: none !important;

  }

  .casaba-auth-col {

    width: 100%;

  }

  .casaba-auth-tabs {

    display: flex !important;

  }

  #login-form .btn-primary {

    width: 100% !important;

  }

}



@media (min-width: 992px) {

  .casaba-auth-tabs {

    display: none !important;

  }

  #casaba-tab-login,

  #casaba-tab-register {

    display: block !important;

  }

}



@media (max-width: 576px) {

  .casaba-auth-card {

    padding: 20px 16px;

  }

  .casaba-guest-banner-inner {

    padding: 14px 16px;

    flex-direction: column;

    align-items: flex-start;

  }

  .casaba-guest-banner-btn {

    width: 100%;

    justify-content: center;

  }

}



/* Uyelik sayfasindaki giris formu butonlari tema rengiyle uyumlu */

body#authentication #login-form .btn-primary,

body#authentication #customer-form .btn-primary {

  background: #1e3050 !important;

  border-color: #1e3050 !important;

  border-radius: 8px !important;

  font-size: 14.5px !important;

  font-weight: 700 !important;

  padding: 12px 24px !important;

}



body#authentication #login-form .btn-primary:hover,

body#authentication #customer-form .btn-primary:hover {

  background: #152238 !important;

  border-color: #152238 !important;

}



body#authentication .forgot-password a {

  color: #2563eb !important;

  font-size: 13px !important;

}



/* ---- YENİ ÜYELİK KVKK & SÖZLEŞME ONAY KUTULARI (DİKEY YAZI KIRILMASI ÖNLENDİ) ---- */

.casaba-consent-group {

  margin-top: 16px !important;

  margin-bottom: 22px !important;

}



.casaba-consent-inner {

  width: 100% !important;

  flex: 0 0 100% !important;

  max-width: 100% !important;

}



.casaba-consent-item {

  display: flex !important;

  flex-direction: row !important;

  align-items: flex-start !important;

  gap: 12px !important;

  margin-bottom: 12px !important;

  width: 100% !important;

  cursor: pointer;

}



.casaba-consent-checkbox {

  width: 19px !important;

  height: 19px !important;

  min-width: 19px !important;

  max-width: 19px !important;

  margin-top: 2px !important;

  cursor: pointer !important;

  accent-color: #1e3050 !important;

  flex: 0 0 19px !important;

  opacity: 1 !important;

  position: static !important;

  display: inline-block !important;

  vertical-align: top !important;

  visibility: visible !important;

  transition: all 0.2s ease !important;

}



.casaba-consent-checkbox.is-invalid {

  outline: 2px solid #dc2626 !important;

  outline-offset: 1px !important;

  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25) !important;

}



.casaba-consent-label {

  flex: 1 1 auto !important;

  font-size: 13.5px !important;

  line-height: 1.55 !important;

  color: #334155 !important;

  cursor: pointer !important;

  white-space: normal !important;

  word-break: normal !important;

  overflow-wrap: break-word !important;

  margin: 0 !important;

  padding: 0 !important;

  text-align: left !important;

  display: block !important;

  width: auto !important;

  max-width: calc(100% - 31px) !important;

}



/* PrestaShop Classic'in #authentication .custom-checkbox span { flex: 0 0 15px } kuralını tamamen geçersiz kıl */

#authentication .casaba-consent-item span,

body#authentication .casaba-consent-item span,

#authentication .casaba-consent-label span,

body#authentication .casaba-consent-label span {

  flex: none !important;

  width: auto !important;

  display: inline !important;

  white-space: normal !important;

}



.casaba-consent-label a.casaba-legal-link {

  color: #1e3050 !important;

  font-weight: 700 !important;

  text-decoration: underline !important;

  transition: color 0.15s ease !important;

}



.casaba-consent-label a.casaba-legal-link:hover {

  color: #f26522 !important;

}



.casaba-req-star {

  color: #dc2626 !important;

  font-weight: 700 !important;

  font-size: 12px !important;

  margin-left: 3px !important;

  white-space: nowrap !important;

}



.casaba-privacy-alert {

  display: none;

  align-items: center;

  gap: 8px;

  background: #fef2f2 !important;

  border: 1px solid #fecaca !important;

  color: #b91c1c !important;

  border-radius: 8px !important;

  padding: 10px 14px !important;

  font-size: 13px !important;

  line-height: 1.4 !important;

  margin-top: 10px !important;

  animation: casabaShake 0.4s ease-in-out !important;

}



.casaba-reg-submit-row .col-12 {

  padding-left: 0;

  padding-right: 0;

}



/* ==========================================================================

   YASAL SAYFALAR VE FOOTER LINKLERI

   ========================================================================== */

.footer-legal-col h4 {

  font-size: 15px;

  font-weight: 700;

  color: #0f172a;

  margin-bottom: 12px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}

.footer-legal-links {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.footer-legal-links li a {

  color: #64748b;

  text-decoration: none;

  font-size: 13px;

  transition: color 0.2s ease;

}

.footer-legal-links li a:hover {

  color: #2563eb;

  text-decoration: underline;

}



/* CMS Yasal Doküman Stilleri */

.legal-document {

  max-width: 960px;

  margin: 20px auto 40px;

  background: #ffffff;

  padding: 32px 28px;

  border-radius: 12px;

  border: 1px solid #e2e8f0;

  box-shadow: 0 2px 10px rgba(0,0,0,0.03);

  line-height: 1.7;

  color: #334155;

  font-size: 14.5px;

}

.legal-document h2 {

  font-size: 22px;

  font-weight: 800;

  color: #0f172a;

  margin-bottom: 20px;

  padding-bottom: 12px;

  border-bottom: 2px solid #e2e8f0;

}

.legal-document h3 {

  font-size: 16px;

  font-weight: 700;

  color: #1e3050;

  margin: 24px 0 10px;

}

.legal-document ul, .legal-document ol {

  padding-left: 20px;

  margin-bottom: 16px;

}

.legal-document li {

  margin-bottom: 6px;

}

.legal-document table {

  width: 100%;

  margin: 20px 0;

  border-collapse: collapse;

  font-size: 13px;

}

.legal-document table th, .legal-document table td {

  border: 1px solid #cbd5e1;

  padding: 10px 12px;

  text-align: left;

}

.legal-document table th {

  background: #f8fafc;

  color: #0f172a;

  font-weight: 700;

}



/* ============================================================

   ÖDEME YÖNTEMLERİ GÖRSELİ (FOOTER PAYMENT ICONS)

============================================================ */

.casaba-payment-methods-img {

  max-height: 38px;

  width: auto;

  object-fit: contain;

  vertical-align: middle;

  transition: opacity 0.2s ease;

}



/* ============================================================

   ÖZEL İLETİŞİM SAYFASI (/bize-ulasin)

============================================================ */

.casaba-contact-container {

  max-width: 1200px;

  margin: 30px auto 50px;

  padding: 0 15px;

}

.contact-header-banner {

  text-align: center;

  margin-bottom: 35px;

}

.contact-header-banner h1 {

  font-size: 30px;

  font-weight: 800;

  color: #1e3050;

  margin-bottom: 10px;

}

.contact-header-banner p {

  font-size: 16px;

  color: #64748b;

  max-width: 600px;

  margin: 0 auto;

}

.contact-grid {

  display: grid;

  grid-template-columns: 1.25fr 1fr;

  gap: 30px;

  align-items: start;

  margin-bottom: 40px;

}

.contact-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 30px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

}

.contact-card h2 {

  font-size: 20px;

  font-weight: 700;

  color: #1e3050;

  margin-top: 0;

  margin-bottom: 22px;

  padding-bottom: 12px;

  border-bottom: 2px solid #f1f5f9;

}

.contact-form-column .form-group {

  margin-bottom: 18px;

}

.contact-form-column .form-control {

  border: 1.5px solid #cbd5e1;

  border-radius: 8px;

  padding: 10px 14px;

  font-size: 14px;

  transition: border-color 0.2s;

}

.contact-form-column .form-control:focus {

  border-color: #1e3050;

  outline: none;

}

.contact-form-column .btn-primary {

  background: #1e3050;

  color: #ffffff;

  border: none;

  padding: 12px 28px;

  border-radius: 8px;

  font-weight: 700;

  font-size: 15px;

  cursor: pointer;

  transition: background 0.2s;

}

.contact-form-column .btn-primary:hover {

  background: #0f172a;

}

.contact-info-column .info-item {

  display: flex;

  gap: 15px;

  margin-bottom: 20px;

  align-items: flex-start;

}

.contact-info-column .info-icon {

  font-size: 22px;

  line-height: 1;

  flex-shrink: 0;

  margin-top: 2px;

}

.contact-info-column .info-content strong {

  display: block;

  font-size: 12px;

  font-weight: 700;

  color: #64748b;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  margin-bottom: 4px;

}

.contact-info-column .info-content p {

  margin: 0;

  font-size: 15px;

  color: #1e293b;

  font-weight: 500;

  line-height: 1.5;

}

.contact-info-column .phone-link {

  color: #1e3050;

  font-size: 18px;

  font-weight: 800;

  text-decoration: none;

  transition: color 0.2s;

}

.contact-info-column .phone-link:hover {

  color: #2563eb;

}

.contact-info-column .whatsapp-btn {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  background: #25d366;

  color: #ffffff !important;

  padding: 8px 18px;

  border-radius: 8px;

  font-weight: 700;

  font-size: 14px;

  text-decoration: none;

  margin-top: 5px;

  box-shadow: 0 3px 10px rgba(37, 211, 102, 0.35);

  transition: transform 0.2s, background 0.2s;

}

.contact-info-column .whatsapp-btn:hover {

  transform: translateY(-2px);

  background: #1eb857;

}

.contact-info-column .email-link {

  color: #0284c7;

  font-weight: 600;

  text-decoration: none;

}

.contact-info-column .email-link:hover {

  text-decoration: underline;

}

.contact-info-column .legal-info {

  background: #f8fafc;

  padding: 12px 14px;

  border-radius: 8px;

  border-left: 3px solid #1e3050;

  margin-top: 22px;

  margin-bottom: 0;

}

.contact-map-section {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 28px;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);

}

.contact-map-section .map-header {

  text-align: center;

  margin-bottom: 20px;

}

.contact-map-section .map-header h2 {

  font-size: 22px;

  font-weight: 800;

  color: #1e3050;

  margin: 0 0 6px 0;

}

.contact-map-section .map-header p {

  font-size: 15px;

  color: #64748b;

  margin: 0;

}

.contact-map-section .map-iframe-wrapper {

  border-radius: 12px;

  overflow: hidden;

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

}

.contact-map-section .map-footer-action {

  text-align: center;

  margin-top: 20px;

}

.contact-map-section .open-maps-btn {

  display: inline-block;

  background: #1e3050;

  color: #ffffff !important;

  padding: 12px 26px;

  border-radius: 8px;

  font-weight: 700;

  font-size: 14px;

  text-decoration: none;

  transition: background 0.2s, transform 0.2s;

  box-shadow: 0 2px 8px rgba(30, 48, 80, 0.2);

}

.contact-map-section .open-maps-btn:hover {

  background: #0f172a;

  transform: translateY(-1px);

}



@media (max-width: 991px) {

  .contact-grid {

    grid-template-columns: 1fr;

    gap: 24px;

  }

  .contact-card {

    padding: 22px 18px;

  }

  .contact-header-banner h1 {

    font-size: 24px;

  }

}









/* ==========================================================================

   CASABA CHECKOUT - ERROR VALIDATION & SHAKE ANIMATION

   ========================================================================== */

@keyframes casabaShake {

  0%, 100% { transform: translateX(0); }

  20% { transform: translateX(-8px); }

  40% { transform: translateX(8px); }

  60% { transform: translateX(-5px); }

  80% { transform: translateX(5px); }

}



@keyframes casabaSpin {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



.casaba-field-invalid {

  border: 2px solid #ef4444 !important;

  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;

  animation: casabaShake 0.45s ease-in-out !important;

  background-color: #fef2f2 !important;

}



.casaba-field-error-msg {

  color: #dc2626 !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  margin-top: 6px !important;

  display: block;

  background: #fef2f2 !important;

  border-left: 3px solid #dc2626 !important;

  padding: 6px 12px !important;

  border-radius: 4px !important;

}



.casaba-loading-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(15, 23, 42, 0.75);

  z-index: 9999999;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  color: #ffffff;

}



.casaba-loading-spinner {

  width: 52px;

  height: 52px;

  border: 4px solid rgba(255, 255, 255, 0.3);

  border-top-color: #38bdf8;

  border-radius: 50%;

  animation: casabaSpin 0.75s linear infinite;

  margin-bottom: 18px;

}



.casaba-loading-text {

  font-size: 17px;

  font-weight: 600;

  letter-spacing: 0.3px;

  text-align: center;

  padding: 0 20px;

}





/* ==========================================================================

   CASABA THEME - MODERN CUSTOMER ACCOUNT PORTAL STYLES

   ========================================================================== */



/* Ortak Tanıtım Başlık Kartı */

.casaba-page-intro {

  display: flex;

  align-items: center;

  gap: 16px;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 20px 24px;

  margin-bottom: 24px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.03);

}

.casaba-intro-icon {

  width: 52px;

  height: 52px;

  border-radius: 12px;

  background: #f1f5f9;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #1e3a8a;

  flex-shrink: 0;

}

.casaba-intro-icon i {

  font-size: 28px;

}

.casaba-intro-title {

  font-size: 20px;

  font-weight: 700;

  color: #0f172a;

  margin: 0 0 4px 0;

}

.casaba-intro-desc {

  font-size: 14px;

  color: #64748b;

  margin: 0;

  line-height: 1.5;

}



/* 1. HESABIM ANA SAYFASI */

.casaba-account-wrapper {

  max-width: 1040px;

  margin: 0 auto;

}

.casaba-account-hero {

  display: flex;

  align-items: center;

  gap: 20px;

  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);

  color: #ffffff;

  border-radius: 16px;

  padding: 28px 32px;

  margin-bottom: 28px;

  box-shadow: 0 10px 25px -5px rgba(30, 58, 138, 0.25);

}

.casaba-hero-avatar {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  background: rgba(255,255,255,0.2);

  border: 2px solid rgba(255,255,255,0.4);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.casaba-avatar-letter {

  font-size: 28px;

  font-weight: 800;

  color: #ffffff;

}

.casaba-hero-details {

  flex: 1;

}

.casaba-hero-title {

  font-size: 22px;

  font-weight: 700;

  margin: 0 0 4px 0;

  color: #ffffff;

}

.casaba-hero-email {

  font-size: 14px;

  color: #94a3b8;

  margin: 0 0 10px 0;

}

.casaba-hero-badge {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  background: rgba(16, 185, 129, 0.2);

  border: 1px solid rgba(16, 185, 129, 0.4);

  color: #34d399;

  padding: 4px 10px;

  border-radius: 20px;

  font-size: 12px;

  font-weight: 600;

}

.casaba-hero-badge i {

  font-size: 14px;

}



/* Menü Kartları Grid */

.casaba-account-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;

  margin-bottom: 30px;

}

.casaba-card-item {

  display: flex;

  flex-direction: column;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 22px 20px;

  text-decoration: none !important;

  color: inherit !important;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  box-shadow: 0 2px 6px rgba(0,0,0,0.02);

  position: relative;

  overflow: hidden;

}

.casaba-card-item:hover {

  transform: translateY(-4px);

  border-color: #3b82f6;

  box-shadow: 0 12px 24px -6px rgba(59, 130, 246, 0.15);

}

.casaba-card-icon {

  width: 48px;

  height: 48px;

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 16px;

  transition: transform 0.2s;

}

.casaba-card-item:hover .casaba-card-icon {

  transform: scale(1.08);

}

.casaba-card-icon i {

  font-size: 26px;

}

.casaba-icon-profile  { background: #eff6ff; color: #2563eb; }

.casaba-icon-orders   { background: #f0fdf4; color: #16a34a; }

.casaba-icon-address  { background: #faf5ff; color: #9333ea; }

.casaba-icon-coupons  { background: #fff7ed; color: #ea580c; }

.casaba-icon-wishlist { background: #fdf2f8; color: #db2777; }

.casaba-icon-returns  { background: #fefce8; color: #ca8a04; }

.casaba-icon-logout   { background: #fef2f2; color: #dc2626; }



.casaba-card-title {

  font-size: 16px;

  font-weight: 700;

  color: #0f172a;

  margin: 0 0 6px 0;

}

.casaba-card-desc {

  font-size: 13px;

  color: #64748b;

  margin: 0 0 16px 0;

  line-height: 1.45;

  flex: 1;

}

.casaba-card-arrow {

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 13px;

  font-weight: 700;

  color: #1e3a8a;

  border-top: 1px solid #f1f5f9;

  padding-top: 12px;

}

.casaba-card-arrow i {

  font-size: 18px;

  transition: transform 0.2s;

}

.casaba-card-item:hover .casaba-card-arrow i {

  transform: translateX(4px);

}



/* 2. PROFÄ°LÄ°M & ADRES FORMLARI */

.casaba-identity-wrapper, .casaba-address-edit-wrapper {

  max-width: 800px;

  margin: 0 auto;

}

.casaba-identity-form-card, .casaba-address-form-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 28px 32px;

  box-shadow: 0 2px 10px rgba(0,0,0,0.03);

}

.casaba-form-row {

  margin-bottom: 18px;

  align-items: center;

}

.casaba-form-row .form-control-label {

  font-weight: 600;

  color: #1e293b;

  font-size: 14px;

}

.casaba-form-row .form-control {

  border: 1.5px solid #cbd5e1;

  border-radius: 8px;

  padding: 10px 14px;

  font-size: 14.5px;

  transition: border-color 0.2s, box-shadow 0.2s;

}

.casaba-form-row .form-control:focus {

  border-color: #2563eb;

  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);

  outline: none;

}

.casaba-invoice-choice-card {

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 10px;

  padding: 14px 18px;

}



/* 3. KAYITLI ADRESLER */

.casaba-addresses-page-wrapper {

  max-width: 960px;

  margin: 0 auto;

}

.casaba-btn-add-address {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-weight: 700;

  padding: 10px 20px;

  border-radius: 8px;

  background: #1e3a8a;

  border: none;

}

.casaba-address-col {

  margin-bottom: 20px;

}

.casaba-address-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 20px;

  height: 100%;

  display: flex;

  flex-direction: column;

  box-shadow: 0 2px 6px rgba(0,0,0,0.02);

  transition: border-color 0.2s, box-shadow 0.2s;

}

.casaba-address-card:hover {

  border-color: #3b82f6;

  box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.12);

}

.casaba-address-card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid #f1f5f9;

  padding-bottom: 12px;

  margin-bottom: 14px;

}

.casaba-address-alias {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 16px;

  font-weight: 700;

  color: #0f172a;

}

.casaba-address-alias i {

  color: #1e3a8a;

}

.casaba-address-badge span {

  background: #f1f5f9;

  color: #475569;

  font-size: 11px;

  font-weight: 700;

  padding: 3px 8px;

  border-radius: 12px;

  text-transform: uppercase;

}

.casaba-address-card-body {

  flex: 1;

}

.casaba-address-text {

  font-size: 14px;

  color: #334155;

  line-height: 1.6;

  margin: 0 0 16px 0;

  font-style: normal;

}

.casaba-address-card-footer {

  display: flex;

  align-items: center;

  gap: 10px;

  border-top: 1px solid #f1f5f9;

  padding-top: 14px;

}

.casaba-addr-btn {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  font-size: 13px;

  font-weight: 600;

  border-radius: 6px;

  padding: 6px 14px;

}



/* 4. SİPARİŞ GEÇMİŞİ AKORDİYON */

.casaba-history-wrapper {

  max-width: 980px;

  margin: 0 auto;

}

.casaba-orders-accordion-list {

  display: flex;

  flex-direction: column;

  gap: 16px;

}

.casaba-order-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  overflow: hidden;

  box-shadow: 0 2px 8px rgba(0,0,0,0.03);

  transition: border-color 0.2s, box-shadow 0.2s;

}

.casaba-order-card:hover {

  border-color: #cbd5e1;

}

.casaba-order-card.open {

  border-color: #3b82f6;

  box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.12);

}

.casaba-order-card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 18px 24px;

  cursor: pointer;

  background: #ffffff;

  transition: background-color 0.15s;

  user-select: none;

}

.casaba-order-card-header:hover {

  background: #f8fafc;

}

.casaba-order-col-ref {

  display: flex;

  flex-direction: column;

}

.casaba-order-ref-label {

  font-size: 11px;

  color: #64748b;

  text-transform: uppercase;

  font-weight: 700;

}

.casaba-order-ref-val {

  font-size: 16px;

  font-weight: 800;

  color: #0f172a;

}

.casaba-order-date {

  font-size: 12px;

  color: #94a3b8;

  margin-top: 2px;

}

.casaba-order-col-price {

  display: flex;

  flex-direction: column;

  text-align: right;

}

.casaba-order-price-label {

  font-size: 11px;

  color: #64748b;

  text-transform: uppercase;

  font-weight: 700;

}

.casaba-order-price-val {

  font-size: 17px;

  font-weight: 800;

  color: #1e3a8a;

}

.casaba-order-payment {

  font-size: 12px;

  color: #64748b;

}

.casaba-order-col-status {

  text-align: center;

}

.casaba-status-badge {

  display: inline-block;

  padding: 6px 14px;

  border-radius: 20px;

  font-size: 12.5px;

  font-weight: 700;

  letter-spacing: 0.2px;

}

.casaba-accordion-btn {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  background: #f1f5f9;

  border: 1px solid #e2e8f0;

  border-radius: 8px;

  padding: 8px 14px;

  font-size: 13px;

  font-weight: 700;

  color: #1e293b;

  cursor: pointer;

  transition: all 0.2s;

}

.casaba-order-card.open .casaba-accordion-btn {

  background: #1e3a8a;

  color: #ffffff;

  border-color: #1e3a8a;

}

.casaba-chevron {

  font-size: 20px;

  transition: transform 0.25s;

}

.casaba-order-card.open .casaba-chevron {

  transform: rotate(180deg);

}



.casaba-order-card-body {

  border-top: 1px solid #f1f5f9;

  padding: 24px;

  background: #fafafa;

}

.casaba-order-section {

  margin-bottom: 24px;

}

.casaba-section-title {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 15px;

  font-weight: 700;

  color: #1e293b;

  margin-bottom: 12px;

}

.casaba-carrier-item-info {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 8px;

  padding: 12px 16px;

  font-size: 14px;

  color: #334155;

}

.casaba-tracking-code {

  background: #f1f5f9;

  padding: 2px 6px;

  border-radius: 4px;

  font-size: 13px;

  color: #0f172a;

  font-weight: 700;

}

.casaba-order-products-table {

  display: flex;

  flex-direction: column;

  gap: 10px;

}

.casaba-order-product-row {

  display: flex;

  align-items: center;

  gap: 16px;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 10px;

  padding: 12px 16px;

}

.casaba-prod-img-wrap {

  width: 56px;

  height: 56px;

  border-radius: 8px;

  overflow: hidden;

  background: #f8fafc;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}

.casaba-prod-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.casaba-prod-placeholder i {

  font-size: 28px;

  color: #cbd5e1;

}

.casaba-prod-details {

  flex: 1;

}

.casaba-prod-name {

  font-size: 14px;

  font-weight: 700;

  color: #0f172a;

  margin: 0 0 2px 0;

}

.casaba-prod-attr {

  font-size: 12px;

  color: #64748b;

}

.casaba-prod-qty {

  font-size: 13.5px;

  color: #334155;

  width: 90px;

}

.casaba-prod-price {

  font-size: 13.5px;

  color: #64748b;

  width: 90px;

  text-align: right;

}

.casaba-prod-total {

  font-size: 15px;

  font-weight: 700;

  color: #0f172a;

  width: 100px;

  text-align: right;

}

.casaba-order-footer-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid #e2e8f0;

  padding-top: 18px;

  gap: 16px;

  flex-wrap: wrap;

}

.casaba-order-address-box {

  font-size: 13.5px;

  color: #475569;

  flex: 1;

}

.casaba-order-actions-box {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-wrap: wrap;

}



/* 5. KUPONLARIM SAYFASI */

.casaba-coupons-wrapper {

  max-width: 960px;

  margin: 0 auto;

}

.casaba-coupons-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;

}

.casaba-coupon-card {

  display: flex;

  background: #ffffff;

  border: 1.5px dashed #cbd5e1;

  border-radius: 14px;

  overflow: hidden;

  box-shadow: 0 2px 8px rgba(0,0,0,0.03);

  transition: all 0.2s;

}

.casaba-coupon-card:hover {

  border-color: #ea580c;

  transform: translateY(-2px);

  box-shadow: 0 8px 20px -4px rgba(234, 88, 12, 0.15);

}

.casaba-coupon-badge {

  width: 100px;

  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);

  color: #ffffff;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 16px;

  text-align: center;

  flex-shrink: 0;

}

.casaba-coupon-value {

  font-size: 20px;

  font-weight: 800;

  line-height: 1.2;

}

.casaba-coupon-label {

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1px;

  opacity: 0.9;

}

.casaba-coupon-body {

  flex: 1;

  padding: 16px;

}

.casaba-coupon-title {

  font-size: 15px;

  font-weight: 700;

  color: #0f172a;

  margin: 0 0 10px 0;

}

.casaba-coupon-details {

  list-style: none;

  padding: 0;

  margin: 0;

  font-size: 12.5px;

  color: #64748b;

  display: flex;

  flex-direction: column;

  gap: 4px;

}

.casaba-coupon-details li {

  display: flex;

  align-items: center;

  gap: 4px;

}

.casaba-coupon-details li i {

  font-size: 14px;

  color: #94a3b8;

}

.casaba-coupon-action {

  padding: 16px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 8px;

  border-left: 1px dashed #e2e8f0;

  background: #f8fafc;

}

.casaba-code-box {

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-radius: 6px;

  padding: 6px 12px;

  font-family: monospace;

  font-weight: 800;

  font-size: 14px;

  color: #0f172a;

}

.casaba-copy-coupon-btn {

  font-size: 12px !important;

  font-weight: 700 !important;

  padding: 6px 12px !important;

  border-radius: 6px !important;

  white-space: nowrap;

}



/* 6. FAVORILERIM & BOS DURUM (EMPTY STATE) */

.casaba-wishlist-wrapper {

  max-width: 960px;

  margin: 0 auto;

}

.casaba-empty-state {

  text-align: center;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 48px 24px;

  margin: 20px auto;

  max-width: 540px;

}

.casaba-empty-icon {

  width: 72px;

  height: 72px;

  background: #f1f5f9;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 18px auto;

  color: #64748b;

}

.casaba-empty-icon i {

  font-size: 36px;

}

.casaba-empty-state h4 {

  font-size: 18px;

  font-weight: 700;

  color: #0f172a;

  margin: 0 0 8px 0;

}

.casaba-empty-state p {

  font-size: 14px;

  color: #64748b;

  margin: 0 0 20px 0;

  line-height: 1.5;

}



/* TOAST BILDIRIM KUTUSU */

.casaba-toast-msg {

  position: fixed;

  bottom: 24px;

  right: 24px;

  z-index: 9999999;

  background: #0f172a;

  color: #ffffff;

  padding: 14px 20px;

  border-radius: 10px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.25);

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 14px;

  font-weight: 600;

  transform: translateY(30px);

  opacity: 0;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  pointer-events: auto;

}

.casaba-toast-msg.visible {

  transform: translateY(0);

  opacity: 1;

}

.casaba-toast-success {

  background: #065f46;

  border-left: 4px solid #10b981;

}

.casaba-toast-info {

  background: #1e293b;

  border-left: 4px solid #3b82f6;

}

.casaba-toast-icon {

  font-weight: 800;

}



/* MOBIL UYUMLULUK */

@media (max-width: 991px) {

  .casaba-account-grid {

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

  }

  .casaba-coupons-grid {

    grid-template-columns: 1fr;

  }

}

@media (max-width: 767px) {

  .casaba-page-intro {

    flex-direction: column;

    text-align: center;

    padding: 16px;

    gap: 12px;

  }

  .casaba-account-hero {

    flex-direction: column;

    text-align: center;

    padding: 22px 18px;

    gap: 14px;

  }

  .casaba-account-grid {

    grid-template-columns: 1fr;

    gap: 12px;

  }

  .casaba-card-item {

    padding: 16px;

  }

  .casaba-order-card-header {

    flex-wrap: wrap;

    gap: 12px;

    padding: 14px;

  }

  .casaba-order-col-ref, .casaba-order-col-price {

    width: 48%;

  }

  .casaba-order-col-status {

    width: 60%;

    text-align: left;

  }

  .casaba-order-col-toggle {

    width: 35%;

    text-align: right;

  }

  .casaba-order-product-row {

    flex-wrap: wrap;

    gap: 10px;

  }

  .casaba-prod-details {

    width: 100%;

  }

  .casaba-prod-qty, .casaba-prod-price, .casaba-prod-total {

    width: auto;

    font-size: 13px;

  }

  .casaba-coupon-card {

    flex-direction: column;

  }

  .casaba-coupon-badge {

    width: 100%;

    padding: 12px;

  }

  .casaba-coupon-action {

    border-left: none;

    border-top: 1px dashed #e2e8f0;

    width: 100%;

  }

  .casaba-identity-form-card, .casaba-address-form-card {

    padding: 20px 16px;

  }

  .casaba-form-row .form-control-label {

    text-align: left;

    margin-bottom: 6px;

  }

}



/* ========================================================

   CHECKOUT STEPS ACCORDION & EDIT INTERACTIVITY

======================================================== */

.checkout-step {

  margin-bottom: 1.5rem !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 12px !important;

  overflow: hidden !important;

  transition: all 0.25s ease !important;

}

.checkout-step.-current {

  border-color: #f97316 !important;

  box-shadow: 0 4px 20px rgba(249, 115, 22, 0.1) !important;

}

.checkout-step .step-title {

  padding: 16px 20px !important;

  margin: 0 !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  font-size: 16px !important;

  font-weight: 700 !important;

  color: #1e293b !important;

  background: #f8fafc !important;

  border-bottom: 1px solid #e2e8f0 !important;

}

.checkout-step.-current .step-title {

  background: #fff7ed !important;

  color: #c2410c !important;

  border-bottom-color: #ffedd5 !important;

}

.checkout-step .step-edit {

  margin-left: auto !important;

  font-size: 13px !important;

  color: #2563eb !important;

  font-weight: 600 !important;

  cursor: pointer !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 4px !important;

}

.checkout-step.-current .step-edit {

  display: none !important;

}

.checkout-step .content {

  padding: 20px !important;

}

.checkout-step.-current .content {

  display: block !important;

}

.checkout-step:not(.-current) .content {

  display: none;

}



/* ========================================================

 * PRESTASHOP THEME.CSS 46PX MARGIN-LEFT RESET & CENTERING

 * ======================================================== */

body#checkout .additional-information,

body#checkout [id$="-additional-information"],

body#checkout .definition-list.additional-information {

  margin-left: 0 !important;

  margin-right: 0 !important;

  padding-left: 0 !important;

  padding-right: 0 !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



body#checkout .additional-information .row,

body#checkout .additional-information .col-xs-12,

body#checkout [id$="-additional-information"] .row,

body#checkout [id$="-additional-information"] .col-xs-12 {

  margin-left: 0 !important;

  margin-right: 0 !important;

  padding-left: 0 !important;

  padding-right: 0 !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



.casaba-iyzico-full-wrap {

  width: 100% !important;

  max-width: 100% !important;

  box-sizing: border-box !important;

}



#iyzipay-checkout-form,

.iyzipay-checkout-form,

#iyzico-checkout-form,

#iyzicoLoadingContainer {

  margin: 15px auto !important;

  text-align: center !important;

  box-sizing: border-box !important;

}



/* İyzico Seçildiğinde PrestaShop Place Order Butonunu Kesin Olarak Gizle */

#payment-confirmation,

.casaba-place-order-btn,

#payment-confirmation button {

  display: none !important;

}



/* Sadece Banka Havalesi seçildiğinde göster */

body.casaba-bankwire-active #payment-confirmation,

body.casaba-bankwire-active .casaba-place-order-btn,

body.casaba-bankwire-active #payment-confirmation button {

  display: block !important;

}



/* ========================================================

 * CHECKOUT LAYOUT - DESKTOP YAN PANEL & MOBIL CENTERING

 * ======================================================== */

body#checkout {

  overflow-x: hidden !important;

}



/* Masaüstü Yan Panel (Sipariş ve Sepet Özeti) */

@media (min-width: 992px) {

  body#checkout .container {

    max-width: 1320px !important;

    width: 100% !important;

  }

  .cart-grid-right {

    display: block !important;

    position: sticky !important;

    top: 24px !important;

    z-index: 10 !important;

  }

  .cart-grid-right .cart-summary {

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 12px !important;

    padding: 20px !important;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;

    margin-bottom: 20px !important;

  }

  .cart-grid-right .blockreassurance_product,

  .cart-grid-right #block-reassurance {

    background: #f8fafc !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 12px !important;

    padding: 16px !important;

  }

}



/* Mobilde checkout sayfasında sağ yan panel gizli kalır (Sepet sayfası /sepet etkilenmez) */

@media (max-width: 991px) {

  body#checkout .cart-grid-right {

    display: none !important;

  }

}



#checkout-payment-step .content {

  padding: 24px 28px !important;

  width: 100% !important;

  box-sizing: border-box !important;

}



/* ========================================================

 * MOBİL VE TÜM TELEFONLAR İÇİN KUSURSUZ İYZİCO VE ADIM DÜZENİ

 * ======================================================== */

@media (max-width: 991px) {

  body#checkout,

  body#checkout #wrapper,

  body#checkout .container,

  body#checkout #wrapper .container,

  body#checkout #content,

  body#checkout #content-wrapper,

  body#checkout .cart-grid,

  body#checkout .cart-grid-body {

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

    width: 100% !important;

    max-width: 100vw !important;

    overflow-x: hidden !important;

    box-sizing: border-box !important;

  }

  body#checkout .checkout-step {

    border-radius: 8px !important;

    margin-bottom: 12px !important;

    padding: 10px 4px !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }

  body#checkout .checkout-step .step-title {

    padding: 10px 8px !important;

    font-size: 15px !important;

    margin-bottom: 10px !important;

  }

  body#checkout #checkout-payment-step .content,

  body#checkout .checkout-step .content {

    padding: 4px 0 !important;

    margin: 0 !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }

  body#checkout .payment-options {

    padding: 0 !important;

    margin: 0 !important;

    width: 100% !important;

  }

  body#checkout .casaba-payment-card-wrap {

    margin-bottom: 10px !important;

    width: 100% !important;

    padding: 0 !important;

    box-sizing: border-box !important;

  }

  body#checkout .casaba-payment-option-card {

    padding: 12px 10px !important;

    border-radius: 8px !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }

  body#checkout .additional-information,

  body#checkout [id$="-additional-information"],

  body#checkout .definition-list.additional-information {

    margin: 4px 0 0 0 !important;

    padding: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    border: none !important;

    background: transparent !important;

    box-sizing: border-box !important;

    overflow: visible !important;

  }

  body#checkout .additional-information .row,

  body#checkout [id$="-additional-information"] .row,

  body#checkout .additional-information .col-xs-12,

  body#checkout [id$="-additional-information"] .col-xs-12 {

    margin-left: 0 !important;

    margin-right: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

  }

  body#checkout .casaba-iyzico-full-wrap {

    padding: 0 !important;

    border: none !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }

  /* Mobilde İyzico formunu %100 ortalı tutar, sağa/sola taşmayı tamamen önler */

  #iyzipay-checkout-form,

  .iyzipay-checkout-form,

  #iyzico-checkout-form,

  #iyzicoLoadingContainer {

    margin: 0 auto !important;

    text-align: center !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    overflow: visible !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

  }

  #iyzipay-checkout-form iframe,

  .iyzipay-checkout-form iframe,

  iframe[id*="iyzi"],

  iframe[name*="iyzi"] {

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 auto !important;

    display: block !important;

    border: none !important;

    box-sizing: border-box !important;

  }

  .iyziCards,

  #iyziCards {

    margin: 8px auto !important;

    text-align: center !important;

    width: 100% !important;

  }

  .iyziCards img,

  #iyziCards img {

    max-width: 100% !important;

    height: auto !important;

    margin: 0 auto !important;

    display: block !important;

  }

  .casaba-payment-security-badge {

    padding: 8px 10px !important;

  }

}



/* 380px altındaki standart telefonlar (iPhone Mini, Galaxy A, Xiaomi vb.) */

@media (max-width: 380px) {

  #iyzipay-checkout-form,

  .iyzipay-checkout-form {

    transform: scale(0.93);

    transform-origin: top center;

  }

}



/* 345px altındaki ultra dar ekranlar (iPhone SE 1, Galaxy Z Fold kapak ekranı) */

@media (max-width: 345px) {

  #iyzipay-checkout-form,

  .iyzipay-checkout-form {

    transform: scale(0.85);

    transform-origin: top center;

  }

}



/* ========================================================

 * SIPARIS DETAYLARI - 3 ASAMALI GERCEK AKORDIYON

 * ======================================================== */

.casaba-tracking-accordion-group {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 18px;

}

.casaba-acc-card {

  border: 1px solid #e2e8f0;

  border-radius: 10px;

  background: #ffffff;

  overflow: hidden;

  transition: border-color 0.2s ease, box-shadow 0.2s ease;

}

.casaba-acc-card.active-state {

  border-color: #38bdf8;

  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.12);

}

.casaba-acc-card.completed-state {

  border-color: #86efac;

}

.casaba-acc-header {

  padding: 14px 18px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  cursor: pointer;

  background: #f8fafc;

  user-select: none;

  transition: background 0.15s ease;

}

.casaba-acc-header:hover {

  background: #f1f5f9;

}

.casaba-acc-card.active-state .casaba-acc-header {

  background: #f0f9ff;

}

.casaba-acc-card.completed-state .casaba-acc-header {

  background: #f0fdf4;

}

.acc-left {

  display: flex;

  align-items: center;

  gap: 14px;

}

.acc-status-icon {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  font-size: 18px;

}

.acc-status-icon.prep { background: #dbeafe; color: #1d4ed8; }

.acc-status-icon.pack { background: #ffedd5; color: #c2410c; }

.acc-status-icon.ship { background: #dcfce7; color: #15803d; }

.casaba-acc-card.completed-state .acc-status-icon { background: #10b981; color: #fff; }



.acc-title {

  font-size: 15px;

  font-weight: 700;

  color: #0f172a;

  display: block;

}

.acc-subtitle {

  font-size: 13px;

  color: #64748b;

  display: block;

}

.acc-right {

  display: flex;

  align-items: center;

  gap: 10px;

}

.acc-badge {

  font-size: 12px;

  font-weight: 600;

  padding: 4px 10px;

  border-radius: 12px;

}

.acc-badge.current { background: #e0f2fe; color: #0369a1; }

.acc-badge.done { background: #dcfce7; color: #15803d; }

.acc-badge.shipping { background: #dbeafe; color: #1d4ed8; }

.acc-badge.waiting { background: #f1f5f9; color: #64748b; }

.acc-arrow {

  color: #64748b;

  font-size: 20px;

  transition: transform 0.25s ease;

}

.casaba-acc-card.open .acc-arrow {

  transform: rotate(180deg);

}

.casaba-acc-content {

  padding: 16px 20px;

  border-top: 1px solid #e2e8f0;

  background: #ffffff;

  font-size: 14px;

  color: #334155;

  line-height: 1.6;

}



/* ========================================================

 * İYZİCO SAĞ PANELDE AÇILMA - MASAÜSTÜ LAYOUT (>= 992px)

 * Ödeme adımı sol kolonda kalır, sadece iyzico formu sağ panele açılır.

 * ======================================================== */

@media (min-width: 992px) {

  body.casaba-iyzico-in-right .cart-grid-right {

    display: block !important;

  }



  /* Sağ panele taşınan İyzico kart tasarımı */

  .casaba-iyzico-right-panel {

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 12px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    margin-bottom: 20px;

    overflow: hidden;

    transition: all 0.3s ease;

  }



  .casaba-iyzico-right-panel .casaba-iyzico-panel-header {

    background: linear-gradient(135deg, #f97316, #fb923c);

    color: #ffffff;

    padding: 14px 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-radius: 11px 11px 0 0;

  }



  .casaba-iyzico-right-panel .casaba-iyzico-panel-header .header-left {

    display: flex;

    align-items: center;

    gap: 10px;

  }



  .casaba-iyzico-right-panel .casaba-iyzico-panel-body {

    padding: 16px;

    background: #ffffff;

  }



  .casaba-iyzico-right-panel .additional-information,

  .casaba-iyzico-right-panel [id$="-additional-information"] {

    border: none !important;

    padding: 0 !important;

    background: transparent !important;

    margin: 0 !important;

    width: 100% !important;

  }



  .casaba-iyzico-right-panel #iyzipay-checkout-form {

    margin: 0 auto !important;

    width: 100% !important;

  }



  /* Sol kolonda iyzico seçeneği altındaki yönlendirme ipucu */

  .casaba-iyzico-desktop-hint {

    margin-top: 10px;

    padding: 10px 14px;

    background: #fff7ed;

    border: 1px solid #fed7aa;

    border-radius: 8px;

    color: #c2410c;

    font-size: 13px;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 8px;

  }



  /* Masaüstünde Sepet Özeti Sol Kolonda En Altta Olduğunda */

  .cart-grid-body #js-checkout-summary.casaba-summary-in-left {

    margin-top: 24px !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 12px !important;

    background: #ffffff !important;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;

    overflow: hidden;

  }



  .cart-grid-body #js-checkout-summary.casaba-summary-in-left .cart-summary {

    box-shadow: none !important;

    border: none !important;

    margin-bottom: 0 !important;

  }



  /* Sepet özeti sağ panelde kaldığında */

  body.casaba-iyzico-in-right .cart-grid-right .cart-summary {

    margin-top: 0 !important;

  }

}



/* ==========================================================================

   HEPSİBURADA STİLİ SİPARİŞLERİM & SİPARİŞ DETAYI (OKUL HEDİYEM TASARIMI)

   ========================================================================== */



/* 1. Üst Başlık & Arama Çubuğu */

.hb-page-header, .hb-detail-nav {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  margin-bottom: 16px !important;

}



.hb-back-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 38px !important;

  height: 38px !important;

  border-radius: 50% !important;

  background: #f1f5f9 !important;

  color: #0f172a !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

}



.hb-back-btn:hover {

  background: #e2e8f0 !important;

  color: #ff6000 !important;

}



.hb-title, .hb-nav-title {

  font-size: 20px !important;

  font-weight: 800 !important;

  color: #0f172a !important;

  margin: 0 !important;

}



.hb-search-bar {

  position: relative !important;

  margin-bottom: 20px !important;

}



.hb-search-icon {

  position: absolute !important;

  left: 14px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  color: #94a3b8 !important;

  font-size: 20px !important;

  pointer-events: none !important;

}



.hb-search-input {

  width: 100% !important;

  height: 48px !important;

  padding: 0 42px 0 44px !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 12px !important;

  font-size: 14px !important;

  background: #ffffff !important;

  color: #1e293b !important;

  outline: none !important;

  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;

  transition: all 0.2s ease !important;

}



.hb-search-input:focus {

  border-color: #ff6000 !important;

  box-shadow: 0 0 0 3px rgba(255, 96, 0, 0.12) !important;

}



.hb-search-clear {

  position: absolute !important;

  right: 12px !important;

  top: 50% !important;

  transform: translateY(-50%) !important;

  background: none !important;

  border: none !important;

  color: #94a3b8 !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 4px !important;

}



/* 2. Sipariş Kartları (Görsel 1) */

.hb-orders-list {

  display: flex !important;

  flex-direction: column !important;

  gap: 14px !important;

}



.hb-order-card {

  display: block !important;

  background: #ffffff !important;

  border: 1px solid #eef2f6 !important;

  border-radius: 14px !important;

  padding: 16px 18px !important;

  text-decoration: none !important;

  color: inherit !important;

  box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;

  transition: all 0.2s ease !important;

}



.hb-order-card:hover {

  transform: translateY(-2px) !important;

  box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important;

  border-color: #cbd5e1 !important;

}



.hb-order-top-row {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  gap: 12px !important;

  margin-bottom: 12px !important;

}



.hb-thumbs-wrap {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

}



.hb-thumb-box {

  width: 58px !important;

  height: 58px !important;

  border: 1px solid #f1f5f9 !important;

  border-radius: 10px !important;

  overflow: hidden !important;

  background: #f8fafc !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  flex-shrink: 0 !important;

}



.hb-thumb-box img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.hb-thumb-placeholder {

  color: #94a3b8 !important;

}



.hb-thumb-more {

  font-size: 12px !important;

  font-weight: 700 !important;

  color: #64748b !important;

  background: #f1f5f9 !important;

  border-radius: 6px !important;

  padding: 4px 6px !important;

}



.hb-meta-wrap {

  text-align: right !important;

}



.hb-order-date {

  display: block !important;

  font-size: 13px !important;

  color: #64748b !important;

  margin-bottom: 4px !important;

}



.hb-order-price {

  display: inline-flex !important;

  align-items: center !important;

  gap: 4px !important;

  font-size: 16px !important;

  font-weight: 800 !important;

  color: #10b981 !important; /* Hepsiburada yeÅŸil tutar */

}



.hb-chevron {

  font-size: 20px !important;

  color: #94a3b8 !important;

}



.hb-order-bottom-row {

  border-top: 1px solid #f8fafc !important;

  padding-top: 10px !important;

}



.hb-status-badge {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  font-size: 13.5px !important;

  font-weight: 600 !important;

}



.hb-status-badge.status-done {

  color: #059669 !important;

}



.hb-status-badge.status-wait {

  color: #d97706 !important;

}



.hb-status-icon {

  font-size: 18px !important;

}



/* 3. Sipariş Detay Sayfası (Görsel 2) */

.hb-breadcrumb {

  display: flex !important;

  align-items: center !important;

  gap: 6px !important;

  font-size: 12.5px !important;

  color: #64748b !important;

  margin-bottom: 12px !important;

}



.hb-breadcrumb a {

  color: #64748b !important;

  text-decoration: none !important;

}



.hb-breadcrumb a:hover {

  color: #ff6000 !important;

}



.hb-header-card {

  background: #ffffff !important;

  border-radius: 12px !important;

  padding: 14px 16px !important;

  margin-bottom: 12px !important;

  box-shadow: 0 1px 3px rgba(0,0,0,0.02) !important;

}



.hb-main-title {

  font-size: 18px !important;

  font-weight: 800 !important;

  color: #0f172a !important;

  margin: 0 !important;

}



.hb-eye-icon {

  color: #94a3b8 !important;

}



.hb-order-meta-info {

  font-size: 13px !important;

  color: #64748b !important;

  margin-top: 4px !important;

}



.hb-meta-dot {

  margin: 0 6px !important;

  color: #cbd5e1 !important;

}



.hb-warning-banner {

  display: flex !important;

  align-items: flex-start !important;

  gap: 10px !important;

  background: #fefce8 !important;

  border-left: 4px solid #eab308 !important;

  border-radius: 8px !important;

  padding: 12px 14px !important;

  margin-bottom: 14px !important;

  font-size: 13px !important;

  color: #713f12 !important;

  line-height: 1.5 !important;

}



.hb-warn-icon {

  color: #ca8a04 !important;

  font-size: 20px !important;

  flex-shrink: 0 !important;

}



.hb-seller-card {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  background: #ffffff !important;

  border: 1px solid #eef2f6 !important;

  border-radius: 12px !important;

  padding: 12px 16px !important;

  margin-bottom: 14px !important;

}



.hb-seller-left {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  font-size: 13.5px !important;

}



.hb-seller-label {

  color: #64748b !important;

}



.hb-seller-name {

  color: #1e3050 !important;

  font-weight: 700 !important;

}



.hb-follow-badge {

  background: #ff6000 !important;

  color: #fff !important;

  font-size: 11px !important;

  font-weight: 700 !important;

  padding: 3px 8px !important;

  border-radius: 6px !important;

}



.hb-ask-seller-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 4px !important;

  background: #f1f5f9 !important;

  color: #0f172a !important;

  font-size: 12.5px !important;

  font-weight: 600 !important;

  padding: 6px 12px !important;

  border-radius: 8px !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

}



.hb-ask-seller-btn:hover {

  background: #e2e8f0 !important;

  color: #ff6000 !important;

}



/* 4. Ürün Kartları (Görsel 2) */

.hb-product-card {

  background: #ffffff !important;

  border: 1px solid #eef2f6 !important;

  border-radius: 14px !important;

  padding: 16px !important;

  margin-bottom: 14px !important;

  box-shadow: 0 1px 4px rgba(0,0,0,0.02) !important;

}



.hb-product-main {

  display: flex !important;

  gap: 14px !important;

  align-items: flex-start !important;

}



.hb-prod-thumb {

  width: 72px !important;

  height: 72px !important;

  border-radius: 10px !important;

  overflow: hidden !important;

  background: #f8fafc !important;

  border: 1px solid #f1f5f9 !important;

  flex-shrink: 0 !important;

}



.hb-prod-thumb img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.hb-prod-info {

  flex: 1 !important;

}



.hb-prod-title {

  font-size: 14.5px !important;

  font-weight: 700 !important;

  color: #0f172a !important;

  margin: 0 0 4px 0 !important;

  line-height: 1.4 !important;

}



.hb-prod-attr {

  font-size: 12.5px !important;

  color: #64748b !important;

  margin-bottom: 4px !important;

}



.hb-prod-qty {

  font-size: 12.5px !important;

  color: #64748b !important;

  margin-bottom: 6px !important;

}



.hb-prod-price {

  font-size: 16px !important;

  font-weight: 800 !important;

  color: #10b981 !important;

}



.hb-prod-actions {

  display: flex !important;

  gap: 10px !important;

  margin-top: 14px !important;

  padding-top: 12px !important;

  border-top: 1px solid #f1f5f9 !important;

}



.hb-btn-reorder {

  flex: 1 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 6px !important;

  background: #ffffff !important;

  border: 1px solid #cbd5e1 !important;

  border-radius: 8px !important;

  height: 38px !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  color: #1e293b !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

}



.hb-btn-reorder:hover {

  border-color: #ff6000 !important;

  color: #ff6000 !important;

}



.hb-btn-eval {

  flex: 1 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: #fff7ed !important;

  border: 1px solid #ffedd5 !important;

  border-radius: 8px !important;

  height: 38px !important;

  font-size: 13px !important;

  font-weight: 600 !important;

  color: #ea580c !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

}



.hb-btn-eval:hover {

  background: #ffedd5 !important;

}



.hb-customization-wrap {

  margin-top: 12px !important;

}



/* 5. Durum Özeti Kartı (Görsel 2) */

.hb-status-summary-card {

  display: flex !important;

  align-items: center !important;

  gap: 14px !important;

  background: #f0fdf4 !important;

  border: 1px solid #bbf7d0 !important;

  border-radius: 12px !important;

  padding: 16px !important;

  margin-bottom: 16px !important;

}



.hb-status-icon-circle {

  width: 44px !important;

  height: 44px !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: #22c55e !important;

  color: #fff !important;

  flex-shrink: 0 !important;

}



.hb-status-title {

  font-size: 15px !important;

  font-weight: 800 !important;

  color: #15803d !important;

  margin: 0 0 4px 0 !important;

}



.hb-status-sub {

  font-size: 13px !important;

  color: #334155 !important;

  line-height: 1.4 !important;

}



/* 6. İşlem Menüsü Kartı (Görsel 3) */

.hb-action-list-card {

  background: #ffffff !important;

  border: 1px solid #eef2f6 !important;

  border-radius: 14px !important;

  overflow: hidden !important;

  margin-bottom: 18px !important;

  box-shadow: 0 1px 4px rgba(0,0,0,0.02) !important;

}



.hb-action-row {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding: 16px 18px !important;

  border-bottom: 1px solid #f1f5f9 !important;

  cursor: pointer !important;

  text-decoration: none !important;

  color: inherit !important;

  transition: background 0.2s ease !important;

}



.hb-action-row:last-child {

  border-bottom: none !important;

}



.hb-action-row:hover {

  background: #f8fafc !important;

}



.hb-action-left {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

}



.hb-action-icon {

  font-size: 22px !important;

  color: #64748b !important;

}



.hb-action-text {

  font-size: 14.5px !important;

  font-weight: 600 !important;

  color: #1e293b !important;

}



/* 7. Adres & Ödeme Blokları (Görsel 7 ve 8) */

.hb-section-block {

  margin-bottom: 22px !important;

}



.hb-block-heading {

  font-size: 17px !important;

  font-weight: 800 !important;

  color: #0f172a !important;

  margin-bottom: 12px !important;

}



.hb-address-card {

  background: #ffffff !important;

  border: 1px solid #eef2f6 !important;

  border-radius: 12px !important;

  padding: 16px !important;

  margin-bottom: 12px !important;

}



.hb-address-title {

  font-size: 15px !important;

  font-weight: 700 !important;

  color: #0f172a !important;

  margin: 0 0 10px 0 !important;

}



.hb-address-alias {

  font-size: 13.5px !important;

  color: #334155 !important;

  margin-bottom: 6px !important;

}



.hb-address-text {

  font-size: 13px !important;

  color: #64748b !important;

  line-height: 1.5 !important;

  margin: 0 0 8px 0 !important;

}



.hb-address-person {

  font-size: 13px !important;

  font-weight: 600 !important;

  color: #1e293b !important;

}



.hb-accordion-card {

  background: #ffffff !important;

  border: 1px solid #eef2f6 !important;

  border-radius: 12px !important;

  overflow: hidden !important;

}



.hb-acc-head {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding: 14px 16px !important;

  cursor: pointer !important;

}



.hb-acc-title {

  font-size: 14.5px !important;

  font-weight: 700 !important;

  color: #0f172a !important;

}



.hb-acc-arrow {

  color: #94a3b8 !important;

  transition: transform 0.2s ease !important;

}



.hb-acc-body {

  padding: 0 16px 16px 16px !important;

  border-top: 1px solid #f8fafc !important;

}



/* 8. Ödeme Kartı & Kırılım (Görsel 7, 8 ve 9) */

.hb-payment-card {

  background: #ffffff !important;

  border: 1px solid #eef2f6 !important;

  border-radius: 14px !important;

  padding: 18px !important;

}



.hb-pay-method-row {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  padding-bottom: 16px !important;

  border-bottom: 1px solid #f1f5f9 !important;

  margin-bottom: 14px !important;

}



.hb-pay-bank {

  display: flex !important;

  align-items: center !important;

}



.hb-pay-card-num {

  font-size: 14.5px !important;

  font-weight: 700 !important;

  color: #0f172a !important;

}



.hb-pay-amount {

  font-size: 17px !important;

  font-weight: 800 !important;

  color: #10b981 !important;

}



.hb-price-breakdown {

  display: flex !important;

  flex-direction: column !important;

  gap: 10px !important;

  font-size: 13.5px !important;

  color: #475569 !important;

}



.hb-breakdown-row {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

}



.hb-free-tag {

  color: #10b981 !important;

  font-weight: 700 !important;

}



.hb-total-row {

  border-top: 1px solid #e2e8f0 !important;

  padding-top: 12px !important;

  margin-top: 4px !important;

  font-size: 16px !important;

  color: #0f172a !important;

}



.hb-total-val {

  color: #0f172a !important;

  font-size: 18px !important;

}



/* 9. Floating Başa Dön Butonu */

.hb-scroll-top-pill {

  position: fixed !important;

  bottom: 30px !important;

  left: 50% !important;

  transform: translateX(-50%) translateY(80px) !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  background: #ffffff !important;

  color: #0f172a !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 30px !important;

  padding: 8px 18px !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;

  cursor: pointer !important;

  z-index: 9999 !important;

  opacity: 0 !important;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.hb-scroll-top-pill.visible {

  opacity: 1 !important;

  transform: translateX(-50%) translateY(0) !important;

}



.hb-scroll-top-pill:hover {

  background: #0f172a !important;

  color: #ffffff !important;

  border-color: #0f172a !important;

}



/* 10. Modallar ve Bottom Sheet */

.hb-modal-overlay {

  position: fixed !important;

  top: 0 !important;

  left: 0 !important;

  right: 0 !important;

  bottom: 0 !important;

  background: rgba(15, 23, 42, 0.6) !important;

  backdrop-filter: blur(4px) !important;

  z-index: 100000 !important;

  display: none !important;

  align-items: flex-end !important;

  justify-content: center !important;

}



.hb-modal-overlay.is-open,

.hb-modal-overlay.active {

  display: flex !important;

}



@media (min-width: 768px) {

  .hb-modal-overlay {

    align-items: center !important;

  }

}



.hb-modal-sheet {

  background: #ffffff !important;

  width: 100% !important;

  max-width: 540px !important;

  max-height: 90vh !important;

  border-top-left-radius: 20px !important;

  border-top-right-radius: 20px !important;

  overflow-y: auto !important;

  padding: 20px 24px !important;

  box-shadow: 0 -10px 30px rgba(0,0,0,0.15) !important;

  animation: hbSheetUp 0.3s ease !important;

}



@media (min-width: 768px) {

  .hb-modal-sheet {

    border-radius: 16px !important;

  }

}



@keyframes hbSheetUp {

  from { transform: translateY(100%); }

  to { transform: translateY(0); }

}



.hb-modal-header {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  border-bottom: 1px solid #f1f5f9 !important;

  padding-bottom: 14px !important;

  margin-bottom: 16px !important;

}



.hb-modal-title {

  font-size: 18px !important;

  font-weight: 800 !important;

  color: #0f172a !important;

  margin: 0 !important;

}



.hb-modal-close {

  background: #f1f5f9 !important;

  border: none !important;

  width: 32px !important;

  height: 32px !important;

  border-radius: 50% !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  color: #64748b !important;

  cursor: pointer !important;

}



/* 11. Kargo Çizelgesi & Detaylar (Görseller 4, 11 ve 12) */

.hb-tracking-hero {

  text-align: center !important;

  margin-bottom: 16px !important;

}



.hb-tracking-label {

  font-size: 11px !important;

  font-weight: 800 !important;

  letter-spacing: 0.8px !important;

  color: #94a3b8 !important;

  margin-top: 4px !important;

}



.hb-tracking-num-box {

  background: #f1f5f9 !important;

  border-radius: 24px !important;

  padding: 10px 24px !important;

  display: inline-block !important;

  font-size: 17px !important;

  font-weight: 800 !important;

  color: #1e293b !important;

  letter-spacing: 1px !important;

  margin-top: 10px !important;

}



.hb-pkg-summary {

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  background: #f8fafc !important;

  border-radius: 8px !important;

  padding: 10px 14px !important;

  font-size: 13.5px !important;

  color: #334155 !important;

  margin-bottom: 20px !important;

}



.hb-timeline-wrap {

  position: relative !important;

  padding-left: 36px !important;

  margin-bottom: 20px !important;

}



.hb-timeline-wrap::before {

  content: '' !important;

  position: absolute !important;

  left: 17px !important;

  top: 10px !important;

  bottom: 20px !important;

  width: 3px !important;

  background: #e2e8f0 !important;

}



.hb-timeline-step {

  position: relative !important;

  margin-bottom: 22px !important;

}



.hb-timeline-step:last-child {

  margin-bottom: 0 !important;

}



.hb-step-icon {

  position: absolute !important;

  left: -36px !important;

  top: -2px !important;

  width: 28px !important;

  height: 28px !important;

  border-radius: 50% !important;

  background: #3b82f6 !important;

  color: #fff !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  font-size: 16px !important;

  border: 3px solid #ffffff !important;

  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3) !important;

}



.hb-timeline-step.waiting .hb-step-icon {

  background: #cbd5e1 !important;

  box-shadow: none !important;

}



.hb-timeline-step.current .hb-step-icon {

  background: #ff6000 !important;

  box-shadow: 0 2px 8px rgba(255, 96, 0, 0.4) !important;

}



.hb-step-info strong {

  font-size: 14.5px !important;

  color: #1e293b !important;

}



.hb-show-events-link {

  background: none !important;

  border: none !important;

  color: #ea580c !important;

  font-size: 14px !important;

  font-weight: 700 !important;

  cursor: pointer !important;

  text-decoration: none !important;

}



.hb-events-drawer {

  background: #f8fafc !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 12px !important;

  padding: 16px !important;

  margin-bottom: 20px !important;

}



.hb-event-card {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 8px !important;

  padding: 10px 14px !important;

  margin-bottom: 8px !important;

  font-size: 12.5px !important;

}



.hb-event-card.highlight-green {

  background: #f0fdf4 !important;

  border-color: #bbf7d0 !important;

}



.hb-event-left strong {

  display: block !important;

  color: #0f172a !important;

  font-size: 13px !important;

}



.hb-event-left span {

  color: #64748b !important;

}



.hb-event-branch {

  color: #0284c7 !important;

  font-weight: 600 !important;

}



.hb-branch-info-block {

  border-top: 1px solid #e2e8f0 !important;

  padding-top: 16px !important;

  margin-top: 16px !important;

}



.hb-branch-sub {

  font-size: 11px !important;

  font-weight: 800 !important;

  color: #94a3b8 !important;

  letter-spacing: 0.6px !important;

  margin-bottom: 6px !important;

}



/* 12. Fatura ve İade Modalleri (Görsel 5 ve 6) */

.hb-btn-download-doc {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  width: 100% !important;

  height: 48px !important;

  background: #ff6000 !important;

  color: #ffffff !important;

  font-size: 15px !important;

  font-weight: 700 !important;

  border-radius: 10px !important;

  text-decoration: none !important;

  box-shadow: 0 4px 14px rgba(255, 96, 0, 0.25) !important;

  transition: all 0.2s ease !important;

}



.hb-btn-download-doc:hover {

  background: #e05500 !important;

  color: #ffffff !important;

}



.hb-return-prod-row {

  display: flex !important;

  align-items: center !important;

  background: #f8fafc !important;

  border-radius: 8px !important;

  padding: 10px 12px !important;

  margin-bottom: 14px !important;

}



.hb-return-notice {

  font-size: 13px !important;

  color: #64748b !important;

  line-height: 1.5 !important;

  margin-bottom: 16px !important;

}



.hb-return-options {

  display: flex !important;

  flex-direction: column !important;

  gap: 8px !important;

}



.hb-return-opt-item {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 10px !important;

  padding: 14px 16px !important;

  text-decoration: none !important;

  color: #1e293b !important;

  font-size: 13.5px !important;

  transition: all 0.2s ease !important;

}



.hb-return-opt-item:hover {

  background: #f8fafc !important;

  border-color: #cbd5e1 !important;

}



.hb-return-opt-item.disabled {

  opacity: 0.55 !important;

  cursor: not-allowed !important;

  pointer-events: none !important;

  background: #f8fafc !important;

}



.hb-opt-left {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

}



.hb-opt-left i {

  color: #64748b !important;

  font-size: 20px !important;

}



.hb-rec-grid {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 10px !important;

  margin-top: 12px !important;

}



.hb-cat-chip {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  padding: 10px 16px !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 20px !important;

  color: #334155 !important;

  font-size: 13.5px !important;

  font-weight: 600 !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

}



.hb-cat-chip:hover {

  background: #ff6000 !important;

  border-color: #ff6000 !important;

  color: #ffffff !important;

  box-shadow: 0 4px 12px rgba(255, 96, 0, 0.2) !important;

}



.hb-cat-chip i {

  font-size: 18px !important;

  color: #ff6000 !important;

  transition: color 0.2s ease !important;

}



.hb-cat-chip:hover i {

  color: #ffffff !important;

}



/* ============================================================

   WHATSAPP BİLGİ AL BARI (Gereksiz uyarı ve satıcı barı yerine)

   ============================================================ */

.hb-whatsapp-bar {

  display: flex !important;

  justify-content: space-between !important;

  align-items: center !important;

  background: #f0fdf4 !important;

  border: 1px solid #bbf7d0 !important;

  border-radius: 12px !important;

  padding: 14px 18px !important;

  margin-bottom: 16px !important;

  flex-wrap: wrap !important;

  gap: 12px !important;

}



.hb-wa-info {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  color: #166534 !important;

  font-size: 13.5px !important;

  font-weight: 500 !important;

}



.hb-wa-icon {

  font-size: 22px !important;

  color: #22c55e !important;

}



.hb-whatsapp-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: 8px !important;

  background: #25d366 !important;

  color: #ffffff !important;

  padding: 10px 18px !important;

  border-radius: 20px !important;

  font-size: 13.5px !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  transition: all 0.2s ease !important;

  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.25) !important;

}



.hb-whatsapp-btn:hover {

  background: #1eb855 !important;

  color: #ffffff !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.35) !important;

}



/* ============================================================

   HEPSİBURADA STİLİ MODERN ÜRÜN DEĞERLENDİRME MODALI (Görsel 2)

   ============================================================ */

.hb-review-header {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding-bottom: 14px !important;

  border-bottom: 1px solid #f1f5f9 !important;

  margin-bottom: 18px !important;

}



.hb-review-header-left {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

}



.hb-modal-back-btn {

  background: none !important;

  border: none !important;

  cursor: pointer !important;

  color: #334155 !important;

  padding: 0 !important;

  display: flex !important;

  align-items: center !important;

}



.hb-modal-back-btn i {

  font-size: 24px !important;

}



.hb-review-modal-title {

  font-size: 18px !important;

  font-weight: 700 !important;

  color: #0f172a !important;

  margin: 0 !important;

}



.hb-review-prod-card {

  display: flex !important;

  align-items: center !important;

  gap: 14px !important;

  padding: 12px 14px !important;

  border: 1px solid #f1f5f9 !important;

  border-radius: 12px !important;

  background: #ffffff !important;

  margin-bottom: 20px !important;

}



.hb-review-prod-thumb {

  width: 56px !important;

  height: 56px !important;

  border-radius: 8px !important;

  overflow: hidden !important;

  flex-shrink: 0 !important;

  background: #f8fafc !important;

}



.hb-review-prod-thumb img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.hb-review-prod-meta {

  flex: 1 !important;

  min-width: 0 !important;

}



.hb-review-prod-title {

  font-size: 14px !important;

  font-weight: 600 !important;

  color: #1e293b !important;

  margin: 0 0 4px 0 !important;

  white-space: nowrap !important;

  overflow: hidden !important;

  text-overflow: ellipsis !important;

}



.hb-review-prod-seller {

  font-size: 12px !important;

  color: #94a3b8 !important;

  font-weight: 500 !important;

}



/* 5 Yıldız Seçimi */

.hb-review-stars-wrap {

  text-align: center !important;

  margin-bottom: 20px !important;

}



.hb-review-stars {

  display: inline-flex !important;

  gap: 8px !important;

}



.hb-star-btn {

  background: none !important;

  border: none !important;

  cursor: pointer !important;

  padding: 4px !important;

  line-height: 1 !important;

  transition: transform 0.15s ease !important;

}



.hb-star-btn:hover {

  transform: scale(1.15) !important;

}



.hb-star-btn i {

  font-size: 38px !important;

  color: #ff6000 !important;

}



/* Yorum Yazma Alanı */

.hb-review-textarea-wrap {

  margin-bottom: 22px !important;

}



.hb-review-textarea {

  width: 100% !important;

  border: 1.5px solid #ff6000 !important;

  border-radius: 12px !important;

  padding: 14px 16px !important;

  font-size: 14px !important;

  font-family: inherit !important;

  color: #1e293b !important;

  outline: none !important;

  resize: vertical !important;

  min-height: 100px !important;

  transition: border-color 0.2s, box-shadow 0.2s !important;

}



.hb-review-textarea:focus {

  border-color: #e05300 !important;

  box-shadow: 0 0 0 3px rgba(255, 96, 0, 0.15) !important;

}



.hb-review-textarea::placeholder {

  color: #94a3b8 !important;

}



/* Medya Ekleme Bölümü */

.hb-review-media-section {

  margin-bottom: 24px !important;

}



.hb-review-media-title {

  font-size: 15px !important;

  font-weight: 700 !important;

  color: #1e293b !important;

  margin: 0 0 4px 0 !important;

}



.hb-review-media-sub {

  font-size: 12.5px !important;

  color: #64748b !important;

  margin-bottom: 12px !important;

}



.hb-media-buttons-row {

  display: flex !important;

  gap: 14px !important;

}



.hb-media-upload-card {

  flex: 1 !important;

  height: 90px !important;

  border: 1.5px dashed #cbd5e1 !important;

  border-radius: 12px !important;

  background: #f8fafc !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 6px !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  margin: 0 !important;

}



.hb-media-upload-card:hover {

  background: #f1f5f9 !important;

  border-color: #ff6000 !important;

}



.hb-upload-icon {

  font-size: 28px !important;

  color: #ff6000 !important;

}



.hb-media-upload-card span {

  font-size: 13px !important;

  font-weight: 600 !important;

  color: #475569 !important;

}



.hb-media-previews-grid {

  display: flex !important;

  flex-wrap: wrap !important;

  gap: 10px !important;

  margin-top: 14px !important;

}



.hb-media-preview-item {

  position: relative !important;

  width: 64px !important;

  height: 64px !important;

  border-radius: 8px !important;

  overflow: hidden !important;

  border: 1px solid #e2e8f0 !important;

}



.hb-media-preview-item img,

.hb-media-preview-item video {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

}



.hb-media-remove-btn {

  position: absolute !important;

  top: 2px !important;

  right: 2px !important;

  width: 20px !important;

  height: 20px !important;

  background: rgba(15, 23, 42, 0.75) !important;

  color: #ffffff !important;

  border-radius: 50% !important;

  border: none !important;

  font-size: 12px !important;

  cursor: pointer !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  line-height: 1 !important;

}



/* Aydınlatma ve Kriterler */

.hb-review-legal-notes {

  margin-bottom: 22px !important;

}



.hb-review-criteria-link {

  font-size: 13px !important;

  font-weight: 600 !important;

  color: #ff6000 !important;

  text-decoration: none !important;

  display: inline-block !important;

  margin-bottom: 4px !important;

}



.hb-review-consent-text {

  font-size: 12px !important;

  color: #94a3b8 !important;

  line-height: 1.4 !important;

}



.hb-review-consent-text a {

  color: #64748b !important;

  text-decoration: underline !important;

}



/* Gönder Butonu */

.hb-review-submit-wrap {

  text-align: center !important;

}



.hb-review-submit-btn {

  width: 100% !important;

  background: #ff6000 !important;

  color: #ffffff !important;

  border: none !important;

  border-radius: 12px !important;

  padding: 14px 20px !important;

  font-size: 16px !important;

  font-weight: 700 !important;

  cursor: pointer !important;

  transition: all 0.2s ease !important;

  box-shadow: 0 4px 14px rgba(255, 96, 0, 0.3) !important;

}



.hb-review-submit-btn:hover {

  background: #e05300 !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 6px 18px rgba(255, 96, 0, 0.4) !important;

}



.hb-review-submit-btn:disabled {

  opacity: 0.65 !important;

  cursor: not-allowed !important;

  transform: none !important;

}



/* ============================================================

   SON GEZDİĞİN VE İLGİLENDİĞİN ÜRÜNLER (Hepsiburada Tasarımı)

   ============================================================ */

.hb-recent-prods-grid {

  display: grid !important;

  grid-template-columns: repeat(2, 1fr) !important;

  gap: 12px !important;

  margin-top: 14px !important;

}



@media (min-width: 640px) {

  .hb-recent-prods-grid {

    grid-template-columns: repeat(3, 1fr) !important;

  }

}



@media (min-width: 992px) {

  .hb-recent-prods-grid {

    grid-template-columns: repeat(4, 1fr) !important;

  }

}



.hb-recent-card {

  background: #ffffff !important;

  border: 1px solid #f1f5f9 !important;

  border-radius: 12px !important;

  overflow: hidden !important;

  display: flex !important;

  flex-direction: column !important;

  transition: all 0.2s ease !important;

  text-decoration: none !important;

  color: inherit !important;

}



.hb-recent-card:hover {

  transform: translateY(-2px) !important;

  border-color: #cbd5e1 !important;

  box-shadow: 0 6px 16px rgba(0,0,0,0.06) !important;

}



.hb-recent-thumb-wrap {

  width: 100% !important;

  aspect-ratio: 1 / 1 !important;

  background: #f8fafc !important;

  position: relative !important;

  overflow: hidden !important;

}



.hb-recent-thumb-wrap img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  transition: transform 0.3s ease !important;

}



.hb-recent-card:hover .hb-recent-thumb-wrap img {

  transform: scale(1.05) !important;

}



.hb-recent-info {

  padding: 10px 12px !important;

  display: flex !important;

  flex-direction: column !important;

  flex: 1 !important;

}



.hb-recent-name {

  font-size: 13px !important;

  font-weight: 600 !important;

  color: #1e293b !important;

  line-height: 1.35 !important;

  margin: 0 0 6px 0 !important;

  display: -webkit-box !important;

  -webkit-line-clamp: 2 !important;

  -webkit-box-orient: vertical !important;

  overflow: hidden !important;

  height: 35px !important;

}



.hb-recent-bottom {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  margin-top: auto !important;

  padding-top: 6px !important;

}



.hb-recent-price {

  font-size: 14.5px !important;

  font-weight: 800 !important;

  color: #ff6000 !important;

}



.hb-recent-btn {

  font-size: 12px !important;

  font-weight: 600 !important;

  color: #ff6000 !important;

  border: 1px solid #ff6000 !important;

  border-radius: 6px !important;

  padding: 4px 8px !important;

  background: #fff8f5 !important;

  transition: all 0.15s ease !important;

}



.hb-recent-card:hover .hb-recent-btn {

  background: #ff6000 !important;

  color: #ffffff !important;

}



/* ============================================================

   SİPARİŞ GEÇMİŞİ REFERANS & ÜRÜN İSİMLERİ LİSTESİ

   ============================================================ */

.hb-order-card-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-bottom: 12px;

  margin-bottom: 12px;

  border-bottom: 1px solid #f1f5f9;

  flex-wrap: wrap;

  gap: 8px;

}



.hb-order-ref-badge {

  display: inline-flex;

  align-items: center;

  gap: 5px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  color: #1e293b;

  font-size: 13px;

  font-weight: 700;

  padding: 4px 10px;

  border-radius: 6px;

  letter-spacing: 0.5px;

}



.hb-order-date {

  font-size: 12.5px;

  color: #64748b;

  font-weight: 500;

}



.hb-order-prods-list {

  background: #f8fafc;

  border: 1px solid #edf2f7;

  border-radius: 8px;

  padding: 10px 14px;

  margin-bottom: 14px;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.hb-order-prod-item {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  color: #334155;

  line-height: 1.4;

}



.hb-order-prod-item i {

  font-size: 16px;

  color: #ff6000;

  flex-shrink: 0;

}



.hb-order-prod-name {

  font-weight: 600;

  color: #1e293b;

  flex: 1;

}



.hb-order-prod-qty {

  font-size: 12px;

  font-weight: 700;

  color: #64748b;

  background: #fff;

  border: 1px solid #e2e8f0;

  border-radius: 4px;

  padding: 2px 6px;

  white-space: nowrap;

}



/* ============================================================

   SİPARİŞ DETAY: SİPARİŞ NOTU VE MAĞAZA İLETİŞİMİ

   ============================================================ */

.hb-note-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 12px;

  padding: 18px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.hb-note-box {

  border-radius: 10px;

  padding: 14px 16px;

}



.hb-note-box.customer {

  background: #fff7ed;

  border: 1px solid #fed7aa;

}



.hb-note-box.merchant {

  background: #f0fdf4;

  border: 1px solid #bbf7d0;

}



.hb-note-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 6px;

  flex-wrap: wrap;

  gap: 6px;

}



.hb-note-author {

  font-size: 13px;

  font-weight: 700;

  display: inline-flex;

  align-items: center;

  gap: 6px;

}



.hb-note-box.customer .hb-note-author {

  color: #c2410c;

}



.hb-note-box.customer .hb-note-author i {

  font-size: 16px;

  color: #ea580c;

}



.hb-note-box.merchant .hb-note-author {

  color: #15803d;

}



.hb-note-box.merchant .hb-note-author i {

  font-size: 16px;

  color: #16a34a;

}



.hb-note-date {

  font-size: 12px;

  color: #64748b;

  font-weight: 500;

}



.hb-note-content {

  font-size: 13.5px;

  color: #1e293b;

  line-height: 1.5;

}



.hb-note-waiting {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  color: #047857;

  background: #ecfdf5;

  border: 1px solid #a7f3d0;

  border-radius: 8px;

  padding: 10px 14px;

}



/* ==========================================================================

   YUVARLAK KATEGORİ GÖRSELLERİ (ANASAYFA HİKAYE BARI & ALT KATEGORİLER)

   ========================================================================== */

.casaba-round-cats-container {

  margin-top: 14px;

  margin-bottom: 20px;

  position: relative;

  z-index: 5;

}



.casaba-round-cats-section {

  position: relative;

  background: #ffffff;

  border-radius: 18px;

  padding: 16px 14px 14px;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

  border: 1px solid #edf2f7;

}



.casaba-round-cats-slider-wrap {

  position: relative;

  display: flex;

  align-items: center;

}



.casaba-round-cats-track {

  display: flex;

  align-items: flex-start;

  gap: 16px;

  overflow-x: auto;

  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  padding: 4px 6px 8px;

  width: 100%;

}



.casaba-round-cats-track::-webkit-scrollbar {

  display: none;

}



/* Navigasyon Okları (Desktop) */

.casaba-round-cats-arrow {

  position: absolute;

  top: 38%;

  transform: translateY(-50%);

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: #ffffff;

  border: 1.5px solid #e2e8f0;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 10;

  color: #1e293b;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

}



.casaba-round-cats-arrow:hover {

  background: var(--color-primary, #f26522);

  border-color: var(--color-primary, #f26522);

  color: #ffffff;

  box-shadow: 0 6px 18px rgba(242, 101, 34, 0.35);

  transform: translateY(-50%) scale(1.08);

}



.casaba-round-cats-arrow.prev {

  left: -14px;

}



.casaba-round-cats-arrow.next {

  right: -14px;

}



/* Kategori Yuvarlak Elemanı */

.casaba-round-cat-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-decoration: none !important;

  flex: 0 0 auto;

  width: 86px;

  cursor: pointer;

  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  outline: none;

}



.casaba-round-cat-item:hover {

  transform: translateY(-4px);

}



/* Üst Lacivert Telefon Bantını Tamamen Kaldır */

.casaba-top-contact {

  display: none !important;

}



/* ==========================================================================

   YUVARLAK KATEGORİ GÖRSELLERİ (STANDART TEK TURUNCU ÇERÇEVE & İRİ BOYUT)

   ========================================================================== */

.casaba-round-cats-container {

  margin-top: 10px;

  margin-bottom: 16px;

  position: relative;

  z-index: 5;

}



.casaba-round-cats-section {

  position: relative;

  background: #ffffff;

  border-radius: 18px;

  padding: 16px 14px 14px;

  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);

  border: 1px solid #edf2f7;

}



.casaba-round-cats-slider-wrap {

  position: relative;

  display: flex;

  align-items: center;

}



.casaba-round-cats-track {

  display: flex;

  align-items: flex-start;

  gap: 16px;

  overflow-x: auto;

  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;

  padding: 4px 6px 8px;

  width: 100%;

}



.casaba-round-cats-track::-webkit-scrollbar {

  display: none;

}



/* Navigasyon Okları (Desktop) */

.casaba-round-cats-arrow {

  position: absolute;

  top: 38%;

  transform: translateY(-50%);

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: #ffffff;

  border: 1.5px solid #e2e8f0;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 10;

  color: #1e293b;

  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

}



.casaba-round-cats-arrow:hover {

  background: var(--color-primary, #f26522);

  border-color: var(--color-primary, #f26522);

  color: #ffffff;

  box-shadow: 0 6px 18px rgba(242, 101, 34, 0.35);

  transform: translateY(-50%) scale(1.08);

}



.casaba-round-cats-arrow.prev {

  left: -14px;

}



.casaba-round-cats-arrow.next {

  right: -14px;

}



/* Kategori Yuvarlak Elemanı */

.casaba-round-cat-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-decoration: none !important;

  flex: 0 0 auto;

  width: 92px;

  cursor: pointer;

  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);

  outline: none;

}



.casaba-round-cat-item:hover {

  transform: translateY(-3px);

}



/* Standart Tek Yuvarlak Turuncu Çerçeve (Daha İri Ebat) */

.casaba-round-cat-thumb-wrap {

  width: 84px;

  height: 84px;

  border-radius: 50% !important;

  padding: 3px;

  background: #ffffff;

  border: 2.5px solid var(--color-primary, #f26522) !important;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  position: relative;

  box-shadow: 0 3px 12px rgba(242, 101, 34, 0.16);

  flex-shrink: 0;

}



.casaba-round-cat-item:hover .casaba-round-cat-thumb-wrap {

  border-color: #e85510 !important;

  box-shadow: 0 6px 20px rgba(242, 101, 34, 0.35);

  transform: scale(1.06);

}



/* Yuvarlak İç Görsel Alanı (Kusursuz Daire) */

.casaba-round-cat-thumb {

  width: 100%;

  height: 100%;

  border-radius: 50% !important;

  overflow: hidden;

  position: relative;

  z-index: 1;

  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);

  display: flex;

  align-items: center;

  justify-content: center;

}



.casaba-round-cat-thumb img {

  width: 100% !important;

  height: 100% !important;

  border-radius: 50% !important;

  object-fit: cover !important;

  display: block;

  transition: transform 0.35s ease;

}



.casaba-round-cat-item:hover .casaba-round-cat-thumb img {

  transform: scale(1.08);

}



/* Fallback Ä°kon */

.casaba-round-cat-fallback-icon {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-primary, #f26522);

  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);

  border-radius: 50% !important;

}



.casaba-round-cat-fallback-icon .material-icons {

  font-size: 32px;

}



/* Kategori Başlığı */

.casaba-round-cat-title {

  margin-top: 7px;

  font-size: 12px;

  font-weight: 700;

  color: #1e293b;

  text-align: center;

  line-height: 1.25;

  width: 100%;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

  word-break: break-word;

  transition: color 0.2s ease;

}



.casaba-round-cat-item:hover .casaba-round-cat-title {

  color: var(--color-primary, #f26522);

}



/* İlk Kategori Vurgusu (Canlı Kırmızı) */

.casaba-round-cat-item.is-featured .casaba-round-cat-title {

  color: #e11d48 !important;

  font-weight: 800;

}



/* ==========================================================================

   BÄ°LGÄ°LENDÄ°RME / DUYURU BANTI & HAREKETLÄ° KARGO Ä°KONU

   ========================================================================== */

@keyframes truckDrive {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-2.5px);

  }

}



@keyframes speedWind {

  0% {

    opacity: 0.25;

    transform: translateX(1.5px);

  }

  50% {

    opacity: 1;

    transform: translateX(-1px);

  }

  100% {

    opacity: 0.25;

    transform: translateX(1.5px);

  }

}



.casaba-home-announcement-strip {

  width: 100%;

  background: #f26522; /* Canlı Kurumsal Turuncu */

  color: #ffffff;

  padding: 11px 18px;

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  margin: 0 0 16px 0;

  position: relative;

  z-index: 4;

  box-shadow: 0 3px 12px rgba(242, 101, 34, 0.25);

}



.casaba-home-announcement-strip .casaba-announcement-inner {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  width: auto;

  max-width: 1200px;

  margin: 0 auto;

}



/* Hareketli Kargo Ä°konu */

.casaba-ann-truck-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  color: #ffffff;

}



.casaba-ann-truck-icon .truck-svg {

  animation: truckDrive 0.85s ease-in-out infinite;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));

}



.casaba-ann-truck-icon .truck-wind {

  animation: speedWind 0.6s ease-in-out infinite alternate;

}



/* Daha İri ve Okunaklı Duyuru Yazısı */

.casaba-ann-text-wrap {

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.casaba-home-announcement-strip p,

.casaba-home-announcement-strip div,

.casaba-home-announcement-strip span,

.casaba-home-announcement-strip a {

  margin: 0 !important;

  padding: 0 !important;

  color: #ffffff !important;

  font-size: 15px !important;

  font-weight: 800 !important;

  letter-spacing: 0.6px !important;

  text-transform: uppercase !important;

  line-height: 1.35 !important;

  text-decoration: none !important;

  font-family: inherit !important;

}



/* Eski oklar, kaydırma butonları veya kapatma butonu asla görünmesin */

.casaba-home-announcement-strip .announcement-nav,

.casaba-home-announcement-strip .announcement-close,

.casaba-home-announcement-strip button {

  display: none !important;

}



/* ==========================================================================

   ALT KATEGORİLER BÖLÜMÜ (KATEGORİ SAYFALARI - STANDART TEK ÇERÇEVE)

   ========================================================================== */

.casaba-subcats-wrapper {

  margin-bottom: 24px;

  background: #ffffff;

  padding: 16px 14px 12px;

  border-radius: 16px;

  border: 1px solid #edf2f7;

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.03);

}



.casaba-subcats-title-row {

  margin-bottom: 12px;

  padding-left: 4px;

  display: flex;

  align-items: center;

}



.casaba-subcats-title {

  font-size: 13.5px;

  font-weight: 700;

  color: var(--color-secondary, #1e2c45);

  text-transform: uppercase;

  letter-spacing: 0.6px;

}



.casaba-subcats-track {

  gap: 16px;

  padding-bottom: 4px;

}



/* Kategori Başlık İkonu (Aktif Sayfa Başlığı) */

.ck-category-icon {

  margin-right: 14px;

  display: flex;

  align-items: center;

}



.ck-category-icon img {

  width: 54px !important;

  height: 54px !important;

  border-radius: 50% !important;

  object-fit: cover !important;

  border: 2px solid var(--color-primary, #f26522);

  box-shadow: 0 4px 12px rgba(242, 101, 34, 0.2);

}



/* ==========================================================================

   MOBÄ°L CÄ°HAZ DÃœZENÄ° VE ARAMA BUTONUNA 0 MESAFE KURALI

   ========================================================================== */

@media (max-width: 768px) {

  /* Ok butonlarını mobilde gizle */

  .casaba-round-cats-arrow {

    display: none !important;

  }



  /* Header ve Arama boşluklarını sıfırla */

  .casaba-header {

    margin-bottom: 0 !important;

    border-bottom: 1px solid #f1f5f9;

  }

  .casaba-header-main {

    padding-bottom: 2px !important;

    margin-bottom: 0 !important;

  }

  .casaba-header-grid {

    row-gap: 3px !important;

    padding-bottom: 0 !important;

  }

  .casaba-search {

    margin-bottom: 0 !important;

    padding-bottom: 0 !important;

  }

  .casaba-search form {

    margin-bottom: 0 !important;

  }

  .casaba-navigation {

    /* display:none yerine height:0 - nav-links position:fixed ile calisabilsin */

    height: 0 !important;

    overflow: visible !important;

    padding: 0 !important;

    margin: 0 !important;

    min-height: 0 !important;

    border: none !important;

    background: transparent !important;

  }



  /* Anasayfa üst alanı sıfırla - Arama butonuna 0 mesafe */

  body#index #wrapper {

    padding-top: 0 !important;

    margin-top: 0 !important;

  }

  body#index #wrapper > .container {

    padding-top: 0 !important;

    margin-top: 0 !important;

  }

  body#index .breadcrumb {

    display: none !important;

  }

  body#index #notifications {

    margin: 0 !important;

    padding: 0 !important;

  }

  body#index #content.page-home {

    margin-top: 0 !important;

    padding-top: 0 !important;

  }



  .casaba-round-cats-container {

    margin-top: 0 !important;

    margin-bottom: 0 !important;

    padding: 2px 0 0 !important;

  }

  .casaba-round-cats-section {

    padding: 4px 4px 6px !important;

    border-radius: 0 !important;

    border: none !important;

    box-shadow: none !important;

    background: #ffffff !important;

    margin: 0 !important;

  }

  

  /* Mobilde de kategori boyutları daha iri ve belirgin */

  .casaba-round-cat-item {

    width: 74px !important;

  }

  .casaba-round-cat-thumb-wrap {

    width: 68px !important;

    height: 68px !important;

    border: 2px solid var(--color-primary, #f26522) !important;

    padding: 2.5px !important;

  }

  .casaba-round-cat-fallback-icon .material-icons {

    font-size: 26px;

  }

  .casaba-round-cat-title {

    font-size: 10.5px !important;

    margin-top: 4px !important;

  }

  .casaba-round-cats-track {

    gap: 12px !important;

    padding: 2px 8px 4px !important;

  }



  /* Turuncu Duyuru Banti Mobilde */

  .casaba-home-announcement-strip {

    margin-top: 0 !important;

    margin-bottom: 10px !important;

    padding: 9px 12px !important;

  }

  .casaba-home-announcement-strip .casaba-announcement-inner {

    gap: 8px !important;

  }

  .casaba-ann-truck-icon .truck-svg {

    width: 22px !important;

    height: 16px !important;

  }

  .casaba-home-announcement-strip p,

  .casaba-home-announcement-strip span,

  .casaba-home-announcement-strip div {

    font-size: 12.5px !important;

    letter-spacing: 0.3px !important;

  }



  .casaba-subcats-wrapper {

    padding: 12px 10px 8px;

    border-radius: 12px;

  }

}



/* ==========================================================================

   GÜVENLİ ÖDEME LOGOLARI (SAYFA EN ALTI, ORTALANMIŞ, OVAL KENARLI)

   ========================================================================== */

.casaba-footer-payment-wrap {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 22px 14px 28px;

  margin-top: 14px;

  background: transparent;

  text-align: center;

  box-sizing: border-box;

}



.casaba-payment-methods-img {

  max-width: 480px;

  width: 90%;

  height: auto;

  border-radius: 22px !important; /* Oval kenarlı */

  background: #ffffff;

  padding: 8px 18px;

  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);

  border: 1px solid #e2e8f0;

  display: block;

  object-fit: contain;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.casaba-payment-methods-img:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);

}



@media (max-width: 768px) {

  .casaba-footer-payment-wrap {

    padding: 14px 10px 36px;

    margin-bottom: 54px; /* Mobilde smart bottom bar ile çakışmasın */

  }

  .casaba-payment-methods-img {

    max-width: 320px;

    width: 92%;

    border-radius: 18px !important; /* Oval kenarlı mobilde */

    padding: 6px 14px;

  }

}









/* ==========================================================================

   FIX 1: MOBİL MENÜ OFF-CANVAS DRAWER (TAM DÜZELTME)

   ========================================================================== */



/* Masaüstünde nav-links yatay flex */

@media (min-width: 769px) {

  .casaba-mobile-toggle {

    display: none !important;

  }

  .casaba-mobile-icons {

    display: none !important;

  }

  .casaba-user-actions {

    display: flex !important;

  }

  .nav-links {

    display: flex !important;

    position: static !important;

    left: auto !important;

    top: auto !important;

    width: auto !important;

    height: auto !important;

    background: transparent !important;

    box-shadow: none !important;

    overflow: visible !important;

    flex-direction: row !important;

    z-index: auto !important;

    transition: none !important;

  }

  /* Masaüstü alt menü açılımı (hover) */

  .nav-links > li > .sub-menu {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    min-width: 220px;

    background: #fff;

    border-radius: 10px;

    box-shadow: 0 8px 32px rgba(0,0,0,0.12);

    z-index: 9000;

    padding: 8px 0;

    border: 1px solid #edf2f7;

  }

  .nav-links > li:hover > .sub-menu {

    display: block;

  }

  .nav-links > li {

    position: relative;

  }

  .nav-links > li > .sub-menu li a {

    display: block;

    padding: 10px 18px;

    color: #1e293b !important;

    font-size: 14px;

    font-weight: 500;

    border-bottom: none !important;

    transition: background 0.15s, color 0.15s;

  }

  .nav-links > li > .sub-menu li a:hover {

    background: #fff7ed;

    color: var(--color-primary, #f26522) !important;

  }

  /* sub-menu chevron gizle masaüstü */

  .menu-expand {

    display: none !important;

  }

  .mobile-menu-close {

    display: none !important;

  }

}



/* Mobilde nav-links tam ekran off-canvas drawer */

@media (max-width: 768px) {

  .casaba-mobile-toggle {

    display: flex !important;

    align-items: center;

    justify-content: center;

    background: none;

    border: none;

    cursor: pointer;

    padding: 6px;

    color: var(--color-secondary, #1e2c45);

    order: -1;

    flex-shrink: 0;

  }

  .casaba-mobile-toggle svg {

    width: 26px;

    height: 26px;

  }

  .casaba-user-actions {

    display: none !important;

  }

  .casaba-mobile-icons {

    display: flex !important;

    gap: 12px;

    align-items: center;

    position: relative;

  }

  .icon-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    color: var(--color-secondary, #1e2c45);

    padding: 4px;

  }



  /* Nav-links: başlangıçta ekran dışında, açıldığında içeri kayar */

  .nav-links {

    position: fixed !important;

    top: 0 !important;

    left: -100% !important;

    width: 82vw !important;

    max-width: 320px !important;

    height: 100vh !important;

    height: 100dvh !important;

    background: var(--color-secondary, #1e2c45) !important;

    z-index: 10000 !important;

    flex-direction: column !important;

    display: flex !important;

    overflow-y: auto !important;

    overflow-x: hidden !important;

    -webkit-overflow-scrolling: touch !important;

    overscroll-behavior-y: contain !important;

    padding-bottom: 80px !important;

    box-shadow: 4px 0 24px rgba(0,0,0,0.25) !important;

    transition: left 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;

  }

  .nav-links.is-open {

    left: 0 !important;

  }



  /* Menü kapanış overlay */

  .nav-links::before {

    content: '';

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(0,0,0,0);

    z-index: -1;

    pointer-events: none;

    transition: background 0.3s;

  }

  .nav-links.is-open::before {

    background: rgba(0,0,0,0.45);

    pointer-events: auto;

  }



  /* Kapatma başlığı */

  .mobile-menu-close {

    display: flex !important;

    align-items: center;

    justify-content: space-between;

    padding: 18px 20px;

    color: #fff;

    font-size: 15px;

    font-weight: 700;

    background: rgba(255,255,255,0.07);

    border-bottom: 1px solid rgba(255,255,255,0.12);

    cursor: pointer;

    flex-shrink: 0;

  }



  /* Menu item'ları */

  .nav-links > li {

    border-bottom: 1px solid rgba(255,255,255,0.08);

    position: relative;

  }

  .nav-links > li > a {

    display: flex !important;

    align-items: center;

    padding: 14px 20px !important;

    color: #fff !important;

    font-size: 14.5px !important;

    font-weight: 500 !important;

    transition: background 0.15s;

  }

  .nav-links > li > a:hover {

    background: rgba(255,255,255,0.08) !important;

    color: #fff !important;

  }

  /* Desktop chevron gizle mobilde */

  .desktop-top-chevron {

    display: none !important;

  }



  /* Alt menüler accordion */

  .nav-links .sub-menu {

    display: none;

    background: rgba(0,0,0,0.2);

    padding: 0;

  }

  .nav-links li.is-expanded > .sub-menu {

    display: block !important;

  }

  .nav-links .sub-menu li a {

    display: block !important;

    padding: 11px 20px 11px 36px !important;

    color: rgba(255,255,255,0.82) !important;

    font-size: 13.5px !important;

    border-bottom: 1px solid rgba(255,255,255,0.05) !important;

    transition: background 0.15s;

  }

  .nav-links .sub-menu li a:hover {

    background: rgba(255,255,255,0.06) !important;

    color: #fff !important;

  }

  .nav-links .sub-menu .sub-menu li a {

    padding-left: 52px !important;

  }



  /* Expand ikon (accordion okları) */

  .menu-expand {

    display: flex !important;

    position: absolute !important;

    right: 15px !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    width: 32px !important;

    height: 32px !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    color: rgba(255,255,255,0.7) !important;

    z-index: 2 !important;

  }

}



/* ==========================================================================

   FIX 2: MASAÜSTÜ BANNER GÖRÜNTÜSÜ - KESME OLMADAN TAM GÖSTER

   ========================================================================== */



/* Banner showcase genel yapı */

.casaba-banner-showcase-container {

  width: 100%;

  box-sizing: border-box;

}



.casaba-showcase-section {

  margin-bottom: 32px;

}



/* MASAÜSTÜ: Banner görüntüsü tam göster, kesme yok */

@media (min-width: 769px) {

  .casaba-showcase-banner {

    width: 100%;

    overflow: hidden;

    border-radius: 16px;

    background: #f8fafc;

    position: relative;

  }

  .casaba-showcase-banner .banner-link {

    display: block;

    width: 100%;

  }

  .casaba-showcase-banner .banner-img {

    width: 100% !important;

    height: auto !important;        /* Yüksekliği otomatik — resim kesilmez */

    max-height: 520px !important;   /* Çok uzun resimleri sınırla */

    object-fit: contain !important; /* Resmi kesmeden tam göster */

    object-position: center top !important;

    display: block;

    border-radius: 16px;

    transition: transform 0.35s ease;

  }

  .casaba-showcase-banner:hover .banner-img {

    transform: scale(1.012);

  }

}



/* MOBÄ°L: ESKÄ° ORÄ°JÄ°NAL HALÄ° KESÄ°NLÄ°KLE KORU */

@media (max-width: 768px) {

  .casaba-showcase-banner {

    width: 100%;

    overflow: hidden;

    position: relative;

  }

  .casaba-showcase-banner .banner-link {

    display: block;

    width: 100%;

  }

  .casaba-showcase-banner .banner-img {

    width: 100% !important;

    height: auto !important;

    display: block;

    border-radius: 0;

  }

  /* Ürün slider-wrap mobilde */

  .casaba-showcase-slider-wrap {

    position: relative;

    padding: 0 0 12px;

  }

  .casaba-showcase-products-track {

    display: flex;

    gap: 12px;

    overflow-x: auto;

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    padding: 8px 12px 4px;

  }

  .casaba-showcase-products-track::-webkit-scrollbar {

    display: none;

  }

  .casaba-showcase-products-track .ck-product-card {

    flex: 0 0 150px;

    min-width: 150px;

  }

  /* Mobilde showcase okları gizle */

  .showcase-arrow {

    display: none !important;

  }

}



/* Ürün slider wrap - masaüstü */

@media (min-width: 769px) {

  .casaba-showcase-slider-wrap {

    position: relative;

    padding: 0 40px;

    margin-top: 12px;

  }

  .casaba-showcase-products-track {

    display: flex;

    gap: 16px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scrollbar-width: none;

    padding: 12px 4px;

  }

  .casaba-showcase-products-track::-webkit-scrollbar {

    display: none;

  }

  .casaba-showcase-products-track .ck-product-card {

    flex: 0 0 190px;

    min-width: 190px;

    background: #fff;

    border-radius: 12px;

    border: 1px solid #edf2f7;

    overflow: hidden;

    transition: box-shadow 0.2s, transform 0.2s;

  }

  .casaba-showcase-products-track .ck-product-card:hover {

    box-shadow: 0 6px 20px rgba(0,0,0,0.1);

    transform: translateY(-2px);

  }

  /* Showcase navigation arrows */

  .showcase-arrow {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: #fff;

    border: 1.5px solid #e2e8f0;

    box-shadow: 0 3px 10px rgba(0,0,0,0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    z-index: 5;

    color: #1e293b;

    transition: all 0.2s;

  }

  .showcase-arrow:hover {

    background: var(--color-primary, #f26522);

    border-color: var(--color-primary, #f26522);

    color: #fff;

    box-shadow: 0 4px 14px rgba(242,101,34,0.3);

  }

  .showcase-prev { left: 0; }

  .showcase-next { right: 0; }

}



/* Ürün kartı ortak */

.ck-product-img-wrap {

  display: block;

  position: relative;

  overflow: hidden;

  aspect-ratio: 1 / 1;

  background: #f8fafc;

}

.ck-product-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  display: block;

  transition: transform 0.3s ease;

}

.ck-product-img-wrap:hover .ck-product-img {

  transform: scale(1.05);

}

.ck-wishlist-btn {

  position: absolute;

  top: 8px;

  right: 8px;

  background: rgba(255,255,255,0.9);

  border: none;

  border-radius: 50%;

  width: 30px;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: #64748b;

  transition: all 0.2s;

}

.ck-wishlist-btn:hover {

  background: #fff;

  color: #ef4444;

}

.ck-product-body {

  padding: 10px 10px 12px;

}

.ck-product-category {

  font-size: 10.5px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  color: var(--color-primary, #f26522);

  font-weight: 700;

  display: block;

  margin-bottom: 4px;

}

.ck-product-name {

  font-size: 13px;

  font-weight: 600;

  color: #1e293b;

  margin: 0 0 6px;

  line-height: 1.35;

}

.ck-product-name a {

  color: inherit;

  text-decoration: none;

}

.ck-product-name a:hover {

  color: var(--color-primary, #f26522);

}

.ck-price-current {

  font-size: 14px;

  font-weight: 700;

  color: var(--color-primary, #f26522);

}

.ck-price-tax-label {

  font-size: 10px;

  color: #94a3b8;

  margin-left: 3px;

}

.ck-card-actions {

  padding: 0 10px 10px;

}

.ck-cart-group {

  display: flex;

  gap: 6px;

  align-items: center;

}

.ck-qty-wrap {

  display: flex;

  align-items: center;

  border: 1px solid #e2e8f0;

  border-radius: 6px;

  overflow: hidden;

}

.ck-qty-btn {

  background: #f1f5f9;

  border: none;

  width: 24px;

  height: 28px;

  font-size: 14px;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #334155;

  transition: background 0.15s;

}

.ck-qty-btn:hover { background: #e2e8f0; }

.ck-qty-input {

  width: 30px;

  text-align: center;

  border: none;

  font-size: 13px;

  font-weight: 600;

  color: #1e293b;

  padding: 0;

  background: #fff;

}

.ck-btn-cart {

  flex: 1;

  background: var(--color-primary, #f26522);

  color: #fff;

  border: none;

  border-radius: 6px;

  padding: 6px 8px;

  font-size: 11.5px;

  font-weight: 700;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 5px;

  transition: background 0.15s, transform 0.15s;

}

.ck-btn-cart:hover {

  background: var(--color-primary-dark, #d55317);

  transform: translateY(-1px);

}



/* ==========================================================================

   FIX 3: GÜVENLİ ÖDEME LOGOSU - BÜYÜK VE OKUNAKLII BOYUT

   ========================================================================== */

.casaba-footer-payment-wrap {

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 24px 16px 32px;

  margin-top: 16px;

  background: transparent;

  text-align: center;

  box-sizing: border-box;

}



.casaba-payment-methods-img {

  max-width: 560px !important;  /* Masaüstü: büyük ve okunaklı */

  width: 88% !important;

  height: auto !important;

  border-radius: 22px !important;

  background: #ffffff;

  padding: 10px 22px;

  box-shadow: 0 4px 20px rgba(0,0,0,0.09);

  border: 1px solid #e2e8f0;

  display: block;

  object-fit: contain;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.casaba-payment-methods-img:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 24px rgba(0,0,0,0.13);

}



@media (max-width: 768px) {

  .casaba-footer-payment-wrap {

    padding: 16px 12px 40px;

    margin-bottom: 60px; /* Mobilde smart bottom bar ile çakışmasın */

  }

  .casaba-payment-methods-img {

    max-width: 340px !important;  /* Mobilde daha büyük - okunaklı */

    width: 90% !important;

    border-radius: 18px !important;

    padding: 8px 16px;

  }

}









/* ==========================================================================

   2026-10-03 ANASAYFA DÃœZENLEMELERÄ° (v2)

   1) Mobil menü çekmecesi tekrar site rengi olan TURUNCU

   2) Yuvarlak kategoriler daha iri, mobilde 4.5 adet (yarım görünen) + kaydırma çubuğu YOK

   3) Güvenli ödeme logosu daha büyük ve tam ortada

   ========================================================================== */



/* ---- 1) MOBİL MENÜ: TURUNCU ---- */

@media (max-width: 1024px) {

  .nav-links {

    background: var(--color-primary, #f26522) !important;

  }

  .mobile-menu-close {

    background: var(--color-primary-dark, #d55317) !important;

    color: #ffffff !important;

    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;

  }

  .nav-links > li {

    border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;

  }

  .nav-links .sub-menu {

    background: rgba(0, 0, 0, 0.13) !important;

  }

  .nav-links .sub-menu .sub-menu {

    background: rgba(0, 0, 0, 0.12) !important;

  }

  .nav-links li a,

  .nav-links > li > a,

  .nav-links .sub-menu li a {

    color: #ffffff !important;

    border-bottom-color: rgba(255, 255, 255, 0.16) !important;

  }

  .nav-links > li > a:hover,

  .nav-links .sub-menu li a:hover {

    background: rgba(255, 255, 255, 0.14) !important;

    color: #ffffff !important;

  }

  .menu-expand {

    color: #ffffff !important;

    width: 40px !important;

    height: 40px !important;

    right: 8px !important;

    -webkit-tap-highlight-color: transparent;

  }

  .menu-expand svg {

    transition: transform 0.25s ease;

  }

  .nav-links li.is-expanded > .menu-expand svg {

    transform: rotate(180deg);

  }

  /* Alt menüler: sadece .is-expanded sınıfı ile açılır/kapanır */

  .nav-links .sub-menu {

    display: none !important;

  }

  .nav-links li.is-expanded > .sub-menu {

    display: block !important;

  }

  /* Başlığı olan satırda ok alanına yer bırak */

  .nav-links li.has-children > a {

    padding-right: 56px !important;

  }

}



/* ---- 2) YUVARLAK KATEGORÄ°LER: DAHA Ä°RÄ° ---- */

.casaba-round-cats-track {

  scrollbar-width: none !important;

  -ms-overflow-style: none !important;

}

.casaba-round-cats-track::-webkit-scrollbar {

  display: none !important;

  width: 0 !important;

  height: 0 !important;

}



/* Masaüstü */

@media (min-width: 769px) {

  .casaba-round-cats-track {

    gap: 22px;

  }

  .casaba-round-cat-item {

    width: 124px;

  }

  .casaba-round-cat-thumb-wrap {

    width: 114px;

    height: 114px;

    padding: 4px;

  }

  .casaba-round-cat-title {

    font-size: 13.5px;

    margin-top: 9px;

  }

  .casaba-round-cat-fallback-icon .material-icons {

    font-size: 44px;

  }

  .casaba-round-cats-arrow {

    top: 42%;

  }

}



/* Mobil: ekranda tam 4.5 kategori (4 tam + yarım) */

@media (max-width: 768px) {

  .casaba-round-cats-track {

    gap: 8px !important;

    padding: 2px 6px 4px !important;

    scroll-snap-type: x proximity;

    scroll-padding-left: 6px;

  }

  .casaba-round-cat-item {

    /* (ekran - sol/sağ boşluk - 3 aralık) / 3.5 */

    width: calc((100vw - 8px - 12px - 24px) / 3.5) !important;

    scroll-snap-align: start;

  }

  .casaba-round-cat-thumb-wrap {

    width: 100% !important;

    height: auto !important;

    aspect-ratio: 1 / 1;

    padding: 3px !important;

  }

  .casaba-round-cat-title {

    font-size: 11px !important;

    margin-top: 5px !important;

  }

  .casaba-round-cat-fallback-icon .material-icons {

    font-size: 30px !important;

  }

}



/* ---- 3) GÜVENLİ ÖDEME LOGOSU: DAHA BÜYÜK, TAM ORTADA ---- */

.casaba-footer-payment-wrap {

  width: 100% !important;

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  text-align: center;

}



/* ==========================================================================

   2026-10-06: ANASAYFA, MOBİL, MASAÜSTÜ VİTRİN VE HEADER GÜNCELLEMELERİ

   ========================================================================== */



/* 1. Global Yatay Taşma Önleme */

html, body, #wrapper {

  overflow-x: hidden !important;

  max-width: 100vw !important;

  box-sizing: border-box !important;

}



/* 2. Masaüstü Header & Menü: Turuncu Menü Barını Kaldır, Arama Çubuğunu Ortala, Boşlukları Sıfırla */

@media (min-width: 1025px) {

  .casaba-navigation {

    display: none !important;

  }

  .casaba-header-main {

    padding: 12px 0 6px !important;

  }

  .casaba-header-grid {

    display: grid !important;

    grid-template-columns: 240px 1fr 240px !important;

    align-items: center !important;

    gap: 24px !important;

    width: 100% !important;

  }

  .casaba-logo {

    display: flex !important;

    align-items: center !important;

    justify-content: flex-start !important;

  }

  .casaba-logo img {

    max-height: 54px !important;

    max-width: 220px !important;

    height: auto !important;

    object-fit: contain !important;

  }

  .casaba-search {

    width: 100% !important;

    max-width: 620px !important;

    margin: 0 auto !important;

  }

  .casaba-user-actions {

    display: flex !important;

    justify-content: flex-end !important;

    align-items: center !important;

    gap: 20px !important;

  }



  /* Masaüstünde Arama ile Yuvarlak Kategoriler Arası 0 Boşluk */

  #content.page-home,

  #content.casaba-home-content {

    margin-top: 0 !important;

    padding-top: 0 !important;

  }

  .casaba-round-cats-container {

    margin-top: 0 !important;

    padding-top: 4px !important;

    padding-bottom: 6px !important;

  }

}



/* 3. Mobil Header: Logo ve Yanındaki Giriş/Sepet Sığdırma & Cihazlar Arası Uyum */

@media (max-width: 1024px) {

  .casaba-header-main {

    padding: 6px 0 4px !important;

  }

  .casaba-header-grid {

    display: grid !important;

    grid-template-columns: 40px 1fr auto !important;

    grid-template-areas:

      "menu logo icons"

      "search search search" !important;

    align-items: center !important;

    gap: 6px !important;

    padding: 0 10px !important;

    box-sizing: border-box !important;

    width: 100% !important;

  }

  .casaba-mobile-toggle {

    grid-area: menu !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 36px !important;

    height: 36px !important;

    flex-shrink: 0 !important;

    padding: 0 !important;

    margin: 0 !important;

  }

  .casaba-logo {

    grid-area: logo !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    min-width: 0 !important;

    max-width: 100% !important;

    overflow: hidden !important;

    margin: 0 !important;

    text-align: center !important;

  }

  .casaba-logo a {

    display: inline-flex !important;

    align-items: center !important;

    justify-content: center !important;

    max-width: 100% !important;

  }

  .casaba-logo img {

    max-height: 36px !important;

    max-width: 100% !important;

    width: auto !important;

    object-fit: contain !important;

  }

  .casaba-mobile-icons {

    grid-area: icons !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    flex-shrink: 0 !important;

  }

  .casaba-mobile-icons .icon-btn {

    width: 36px !important;

    height: 36px !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    position: relative !important;

  }

  .casaba-search {

    grid-area: search !important;

    width: 100% !important;

    margin: 4px 0 2px !important;

  }

  .casaba-round-cats-container {

    margin-top: 0 !important;

    padding-top: 2px !important;

  }

}



/* 4. Mobil Menü Accordion Açma / Kapama Çubuğu Düzeltmesi */

@media (max-width: 1024px) {

  .nav-links li.has-children {

    position: relative !important;

  }

  .nav-links li.has-children > a {

    padding-right: 52px !important;

  }

  .menu-expand {

    display: flex !important;

    position: absolute !important;

    top: 0 !important;

    right: 0 !important;

    width: 48px !important;

    height: 48px !important;

    align-items: center !important;

    justify-content: center !important;

    transform: none !important;

    cursor: pointer !important;

    color: rgba(255, 255, 255, 0.85) !important;

    z-index: 5 !important;

    -webkit-tap-highlight-color: transparent !important;

  }

  .menu-expand svg {

    transition: transform 0.25s ease !important;

    pointer-events: none !important;

  }

  .nav-links li.is-expanded > .menu-expand svg {

    transform: rotate(180deg) !important;

  }

  .nav-links .sub-menu {

    display: none !important;

    background: rgba(0, 0, 0, 0.2) !important;

    padding: 0 !important;

    width: 100% !important;

    position: static !important;

  }

  .nav-links li.is-expanded > .sub-menu {

    display: block !important;

  }

}



/* 5. Yuvarlak Kategoriler: Kırmızı Yazı Kaldırma (Standart Siyah/Koyu) */

.casaba-round-cat-title,

.casaba-round-cat-item .casaba-round-cat-title,

.casaba-round-cat-item.is-featured .casaba-round-cat-title {

  color: #1e293b !important;

  font-weight: 600 !important;

}

.casaba-round-cat-item.is-featured .casaba-round-cat-thumb-wrap {

  border-color: #f26522 !important;

}



/* 6. Alt Kısım Güvenli Ödeme Görseli (Ekran Görüntüsündeki İdeal Ortalama Boyut) */

.casaba-footer-payment-wrap {

  width: 100% !important;

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  padding: 18px 15px 26px !important;

  margin: 12px 0 0 !important;

  box-sizing: border-box !important;

}

.casaba-footer-payment-wrap .casaba-payment-methods-img {

  max-width: 580px !important;

  width: 92% !important;

  height: auto !important;

  max-height: 56px !important;

  display: block !important;

  margin: 0 auto !important;

  padding: 7px 22px !important;

  background: #ffffff !important;

  border-radius: 26px !important;

  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;

  border: 1px solid #e2e8f0 !important;

  object-fit: contain !important;

}

@media (max-width: 768px) {

  .casaba-footer-payment-wrap .casaba-payment-methods-img {

    max-width: 360px !important;

    width: 94% !important;

    max-height: 44px !important;

    padding: 6px 14px !important;

    border-radius: 22px !important;

  }

}



/* 7. Masaüstü Arama Çubuğu & Yuvarlak Kategoriler Arası Boşluğu 0'a Düşürme */

@media (min-width: 1025px) {

  #casaba-header,

  .casaba-header {

    margin-bottom: 0 !important;

    padding-bottom: 0 !important;

  }

  .casaba-header-main {

    padding-top: 10px !important;

    padding-bottom: 8px !important;

    margin-bottom: 0 !important;

  }

  .casaba-search,

  #search_widget {

    margin-bottom: 0 !important;

  }

  .casaba-navigation {

    display: none !important;

  }

  .casaba-round-cats-container {

    margin-top: 0 !important;

    padding-top: 2px !important;

    margin-bottom: 12px !important;

  }

  #content.page-home,

  .casaba-home-content {

    margin-top: 0 !important;

    padding-top: 0 !important;

  }

  #wrapper {

    padding-top: 0 !important;

  }

}



/* 8. Masaüstü Vitrin: Dikey Banner Solda + Yanında Tek Satır 4 Ürün (BİREBİR EŞİT YÜKSEKLİK VE HİZALAMA) */

@media (min-width: 769px) {

  .casaba-banner-showcase-container {

    width: 100% !important;

    box-sizing: border-box !important;

  }

  .casaba-showcase-section {

    display: flex !important;

    flex-direction: row !important;

    align-items: stretch !important; /* Banner ve ürün kartları aynı boyda başlar ve biter */

    gap: 16px !important;

    margin-bottom: 36px !important;

    width: 100% !important;

    box-sizing: border-box !important;

    min-height: 410px !important;

  }

  

  /* Soldaki Dikey Banner: Sağdaki ürün kartlarıyla %100 eşit yükseklik */

  .casaba-showcase-banner {

    flex: 0 0 280px !important;

    width: 280px !important;

    max-width: 280px !important;

    display: flex !important;

    flex-direction: column !important;

    height: 100% !important;

    min-height: 100% !important;

    border-radius: 12px !important;

    overflow: hidden !important;

    background: #f8fafc !important;

    box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;

    position: relative !important;

    box-sizing: border-box !important;

  }

  .casaba-showcase-banner .banner-link,

  .casaba-showcase-banner .banner-picture,

  .casaba-showcase-banner .banner-img {

    width: 100% !important;

    height: 100% !important;

    min-height: 100% !important;

    object-fit: cover !important;

    display: block !important;

    border-radius: 12px !important;

  }

  .casaba-showcase-banner:hover .banner-img {

    transform: scale(1.015) !important;

  }



  /* Sağdaki Ürünler Sliderı */

  .casaba-showcase-slider-wrap {

    flex: 1 1 0% !important;

    min-width: 0 !important;

    position: relative !important;

    display: flex !important;

    align-items: stretch !important;

    margin: 0 !important;

    padding: 0 !important;

    height: 100% !important;

  }

  .casaba-showcase-products-track {

    display: flex !important;

    align-items: stretch !important;

    gap: 14px !important;

    overflow-x: auto !important;

    scroll-behavior: smooth !important;

    scrollbar-width: none !important;

    width: 100% !important;

    padding: 2px 2px !important;

    height: 100% !important;

  }

  .casaba-showcase-products-track::-webkit-scrollbar {

    display: none !important;

  }

  .casaba-showcase-products-track .ck-product-card {

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

    height: 100% !important;

    min-height: 100% !important;

    flex: 0 0 calc((100% - 42px) / 4) !important;

    min-width: 180px !important;

    max-width: calc((100% - 42px) / 4) !important;

    background: #ffffff !important;

    border-radius: 12px !important;

    border: 1px solid #edf2f7 !important;

    box-sizing: border-box !important;

  }

  .ck-product-img-wrap {

    width: 100% !important;

    aspect-ratio: 1 / 1 !important;

    height: auto !important;

    overflow: hidden !important;

    display: block !important;

    position: relative !important;

  }

  .ck-product-img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

  }

  .ck-product-body {

    flex: 1 1 auto !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;

    padding: 12px 14px 14px !important;

  }

  .showcase-arrow {

    position: absolute !important;

    top: 50% !important;

    transform: translateY(-50%) !important;

    z-index: 10 !important;

    width: 38px !important;

    height: 38px !important;

    border-radius: 50% !important;

    background: #ffffff !important;

    box-shadow: 0 3px 12px rgba(0,0,0,0.18) !important;

    border: 1px solid #e2e8f0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    cursor: pointer !important;

    color: #1e293b !important;

    transition: background 0.2s, transform 0.2s !important;

  }

  .showcase-arrow:hover {

    background: #f8fafc !important;

    transform: translateY(-50%) scale(1.08) !important;

  }

  .showcase-arrow.showcase-prev {

    left: -14px !important;

  }

  .showcase-arrow.showcase-next {

    right: -14px !important;

  }

}



/* 9. Mobil Vitrin */

@media (max-width: 768px) {

  .casaba-showcase-section {

    display: block !important;

    margin-bottom: 22px !important;

    width: 100% !important;

  }

  .casaba-showcase-banner {

    width: 100% !important;

    max-width: 100% !important;

    margin-bottom: 8px !important;

    border-radius: 0 !important;

  }

  .casaba-showcase-banner .banner-picture,

  .casaba-showcase-banner .banner-img {

    width: 100% !important;

    height: auto !important;

    object-fit: contain !important;

    border-radius: 0 !important;

  }

  .casaba-showcase-slider-wrap {

    width: 100% !important;

    padding: 0 !important;

  }

  .casaba-showcase-products-track {

    display: flex !important;

    gap: 10px !important;

    overflow-x: auto !important;

    scroll-behavior: smooth !important;

    -webkit-overflow-scrolling: touch !important;

    padding: 4px 10px !important;

  }

  .casaba-showcase-products-track .ck-product-card {

    flex: 0 0 150px !important;

    min-width: 150px !important;

    max-width: 150px !important;

  }

  .showcase-arrow {

    display: none !important;

  }

}



/* 10. Stokta Olmayan Ürün Buton Tasarımı */

.ck-btn-out-of-stock {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;

  padding: 8px 12px !important;

  background: #f1f5f9 !important;

  color: #94a3b8 !important;

  font-size: 12.5px !important;

  font-weight: 600 !important;

  border-radius: 8px !important;

  border: 1px dashed #cbd5e1 !important;

  cursor: not-allowed !important;

  user-select: none !important;

  text-align: center !important;

}



/* 11. Kategori Sayfası: Mobil 2 Buton & Beyaz Filtre Modal & Sıralama Dropdown */

.ck-mobile-filter-bar {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 10px !important;

  margin-bottom: 14px !important;

  padding: 2px 0 !important;

}

.btn-mobile-filter-action {

  flex: 1 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 8px !important;

  padding: 9px 12px !important;

  background: #ffffff !important;

  border: 1px solid #e2e8f0 !important;

  border-radius: 10px !important;

  font-size: 13.5px !important;

  font-weight: 600 !important;

  color: #1e293b !important;

  box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;

  cursor: pointer !important;

  position: relative !important;

}

.mobile-sort-wrapper {

  flex: 1 !important;

  position: relative !important;

}

.mobile-sort-wrapper .btn-mobile-filter-action {

  width: 100% !important;

}

.ck-mobile-sort-dropdown {

  display: none;

  position: absolute;

  top: calc(100% + 6px);

  left: 0;

  right: 0;

  background: #ffffff;

  border-radius: 12px;

  border: 1px solid #e2e8f0;

  box-shadow: 0 12px 28px rgba(0,0,0,0.15);

  z-index: 1050;

  padding: 8px 0;

  min-width: 200px;

}

.ck-mobile-sort-dropdown.is-open {

  display: block;

}

.ck-mobile-sort-dropdown .sort-dropdown-title {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  color: #94a3b8;

  padding: 6px 14px 4px;

  letter-spacing: 0.5px;

}

.ck-mobile-sort-dropdown .sort-option-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 9px 14px;

  font-size: 13.5px;

  color: #1e293b;

  text-decoration: none;

}

.ck-mobile-sort-dropdown .sort-option-item.active {

  background: #fff7ed;

  color: #ea580c;

  font-weight: 700;

}



@media (max-width: 768px) {

  #search_filters,

  #search_filters_wrapper,

  .ck-faceted-wrapper .ck-search-filters {

    position: fixed !important;

    top: 0 !important;

    left: -100vw !important;

    width: 100vw !important;

    max-width: 100vw !important;

    height: 100vh !important;

    background: #ffffff !important;

    z-index: 99999 !important;

    overflow-y: auto !important;

    padding: 16px 18px 80px !important;

    box-shadow: 4px 0 24px rgba(0,0,0,0.2) !important;

    transition: left 0.3s ease !important;

    border: none !important;

  }

  #search_filters.is-open,

  .ck-search-filters.is-open {

    left: 0 !important;

  }

  .ck-filter-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(0,0,0,0.5);

    z-index: 99998;

  }

  .ck-filter-overlay.is-active {

    display: block;

  }

  .ck-mobile-modal-footer {

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100vw;

    max-width: 100vw;

    background: #ffffff;

    border-top: 1px solid #e2e8f0;

    padding: 12px 16px;

    display: flex;

    gap: 8px;

    z-index: 100000;

    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);

  }

  .ck-btn-mobile-clear {

    flex: 1;

    padding: 10px;

    font-size: 13px;

    border-radius: 8px;

    background: #f1f5f9;

    border: 1px solid #cbd5e1;

    color: #475569;

    font-weight: 600;

  }

  .ck-btn-mobile-apply {

    flex: 2;

    padding: 10px;

    font-size: 13px;

    border-radius: 8px;

    background: #f26522;

    border: 1px solid #f26522;

    color: #ffffff;

    font-weight: 700;

  }

}



/* 12. İyzico Taksit Tablosu Tasarımı */

.casaba-iyzico-installments-wrapper {

  padding: 16px 0;

}

.iyzico-header-badge {

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 10px;

  padding: 14px 18px;

  margin-bottom: 20px;

  display: flex;

  flex-direction: column;

  gap: 4px;

}

.iyzico-badge-logo {

  display: flex;

  align-items: center;

  gap: 12px;

}

.iyzico-badge-sub {

  font-size: 12.5px;

  color: #64748b;

}

.iyzico-banks-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 16px;

  margin-bottom: 18px;

}

.iyzico-bank-card {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 1px 4px rgba(0,0,0,0.03);

}

.iyzico-bank-card .bank-header {

  padding: 10px 14px;

  font-weight: 700;

  font-size: 13.5px;

  background: #f1f5f9;

  border-bottom: 1px solid #e2e8f0;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.iyzico-bank-card .bank-sub {

  font-size: 11px;

  font-weight: normal;

  color: #64748b;

}

.table-installment {

  width: 100%;

  border-collapse: collapse;

  font-size: 12.5px;

}

.table-installment th {

  background: #fafbfc;

  padding: 7px 12px;

  font-weight: 600;

  color: #475569;

  border-bottom: 1px solid #edf2f7;

  text-align: left;

}

.table-installment td {

  padding: 7px 12px;

  border-bottom: 1px solid #f1f5f9;

  color: #1e293b;

}

.table-installment tr:last-child td {

  border-bottom: none;

}

.iyzico-footer-notice {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 12px;

  color: #64748b;

  background: #f8fafc;

  padding: 10px 14px;

  border-radius: 8px;

}









/* ========================================================

   2026-10-07 KATEGORÄ° TOOLBAR, SMART SCROLL, FÄ°LTRE & TAB DÃœZENLEMELERÄ°

   ======================================================== */



/* Kategori Başlığı */

.ck-category-header {

  margin: 0 0 12px 0 !important;

  padding: 0 !important;

}

.ck-category-title-bar {

  display: flex;

  align-items: center;

  gap: 8px;

  margin: 0;

}

.ck-category-title {

  font-size: 22px;

  font-weight: 800;

  color: #0f172a;

  margin: 0;

}

.ck-product-count {

  font-size: 13.5px;

  color: #64748b;

  font-weight: 500;

}



/* Kategori Toolbar (Filtreleme & Sıralama Barı - Yuvarlak Kategorilerin Üstünde) */

.ck-category-toolbar {

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 12px;

  padding: 8px 16px;

  margin: 0 0 16px 0;

  box-shadow: 0 2px 8px rgba(0,0,0,0.03);

  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;

}



/* Mobilde Akıllı Kaydırma (Smart Sticky Toolbar) */

@media (max-width: 767px) {

  .ck-category-toolbar {

    position: sticky;

    top: 60px; /* Adjust according to header height */

    z-index: 95;

    margin: 0 !important;

    padding: 8px;

    border-radius: 10px;

    background: #ffffff;

    box-shadow: 0 4px 10px rgba(0,0,0,0.05);

  }

}



.ck-toolbar-mobile-grid {

  display: flex;

  gap: 8px;

  width: 100%;

}

.btn-toolbar-action {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background: #f8fafc;

  border: 1px solid #cbd5e1;

  border-radius: 8px;

  padding: 10px 14px;

  font-size: 14px;

  font-weight: 700;

  color: #1e293b;

  cursor: pointer;

  position: relative;

  transition: all 0.2s ease;

}

.btn-toolbar-action:active {

  background: #f1f5f9;

  transform: scale(0.98);

}

.filter-indicator-dot {

  width: 7px;

  height: 7px;

  background: #f26522;

  border-radius: 50%;

  position: absolute;

  top: 8px;

  right: 12px;

}



/* Mobil Sıralama Açılır Menüsü */

.toolbar-sort-wrapper {

  position: relative;

  flex: 1;

}

.ck-sort-menu-dropdown {

  display: none;

  position: absolute;

  top: calc(100% + 6px);

  right: 0;

  width: 250px;

  max-width: calc(100vw - 32px);

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 12px;

  box-shadow: 0 12px 30px rgba(0,0,0,0.18);

  z-index: 10000;

  overflow: hidden;

}

.ck-sort-menu-dropdown.is-open {

  display: block;

}

.sort-menu-header {

  padding: 10px 16px;

  background: #f8fafc;

  font-size: 11.5px;

  font-weight: 700;

  color: #64748b;

  border-bottom: 1px solid #e2e8f0;

  text-transform: uppercase;

}

.sort-menu-list {

  max-height: 320px;

  overflow-y: auto;

  padding: 4px 0;

}

.sort-menu-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 16px;

  font-size: 13.5px;

  color: #1e293b;

  text-decoration: none;

  border-bottom: 1px solid #f1f5f9;

  line-height: 1.35;

  white-space: normal;

  transition: background 0.15s ease;

}

.sort-menu-item:last-child {

  border-bottom: none;

}

.sort-menu-item:hover, .sort-menu-item.active {

  background: #fff7ed;

  color: #ea580c;

  font-weight: 700;

}

.sort-check {

  color: #ea580c;

  font-weight: 800;

  font-size: 14px;

}



/* Masaüstü Toolbar */

.ck-toolbar-desktop-bar {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.ck-desktop-filter-heading {

  font-size: 13.5px;

  font-weight: 800;

  letter-spacing: 0.5px;

  color: #0f172a;

}

.ck-desktop-sort-right {

  display: flex;

  align-items: center;

  gap: 10px;

}

.desktop-sort-label {

  font-size: 13px;

  color: #64748b;

  font-weight: 600;

}

.desktop-sort-select-wrap {

  position: relative;

}

.desktop-sort-btn {

  display: flex;

  align-items: center;

  gap: 8px;

  background: #ffffff;

  border: 1px solid #cbd5e1;

  border-radius: 8px;

  padding: 7px 14px;

  font-size: 13px;

  font-weight: 600;

  color: #0f172a;

  cursor: pointer;

}

.desktop-sort-btn:hover {

  border-color: #94a3b8;

}

.desktop-sort-dropdown {

  display: none;

  position: absolute;

  top: calc(100% + 4px);

  right: 0;

  min-width: 230px;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 8px;

  box-shadow: 0 10px 25px rgba(0,0,0,0.12);

  z-index: 1000;

  overflow: hidden;

  padding: 4px 0;

}

.desktop-sort-dropdown.is-open {

  display: block;

}



/* Alt Kategoriler Başlık ve Boşluk */

.casaba-subcats-wrapper {

  margin-bottom: 20px;

}

.casaba-subcats-title-row {

  margin-bottom: 8px;

}

.casaba-subcats-title {

  font-size: 12.5px;

  font-weight: 800;

  color: #64748b;

  letter-spacing: 0.5px;

}



/* Mobil Filtre Çekmecesi (Drawer Modal) */

@media (max-width: 767px) {

  #search_filters {

    position: fixed;

    top: 0;

    left: -100vw;

    width: 100vw !important;

    max-width: 100vw !important;

    height: 100vh;

    background: #ffffff;

    z-index: 99999;

    box-shadow: none;

    transition: left 0.32s cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;

    flex-direction: column;

    padding: 0;

    overflow: hidden;

  }

  #search_filters.is-open {

    left: 0;

  }

  .ck-mobile-filter-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    background: #f8fafc;

    border-bottom: 1px solid #e2e8f0;

  }

  .ck-filter-header-title {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 15.5px;

    font-weight: 800;

    color: #0f172a;

  }

  .ck-filter-close-btn {

    background: transparent;

    border: none;

    color: #64748b;

    cursor: pointer;

    padding: 4px;

    display: flex;

    align-items: center;

    justify-content: center;

  }

  .ck-facets-container {

    flex: 1;

    overflow-y: auto;

    padding: 16px 20px 80px;

  }

  .ck-filter-overlay {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background: rgba(15, 23, 42, 0.55);

    backdrop-filter: blur(3px);

    z-index: 99998;

  }

  .ck-filter-overlay.is-active {

    display: block;

  }

}



/* Ürün Sayfası Sekmeler ve Tam Genişlik / Hizalama */

.casaba-product-tabs-wrapper {

  width: 100% !important;

  max-width: 100% !important;

  margin: 28px 0 20px 0 !important;

  padding: 0 !important;

}

.product-tabs-container {

  width: 100% !important;

  max-width: 100% !important;

}

.product-nav-tabs {

  display: flex !important;

  width: 100% !important;

  border-bottom: 2px solid #e2e8f0 !important;

  gap: 4px !important;

  padding: 0 !important;

  margin: 0 0 20px 0 !important;

  list-style: none !important;

  overflow-x: auto !important;

  -webkit-overflow-scrolling: touch !important;

  scrollbar-width: none !important;

}

.product-nav-tabs::-webkit-scrollbar {

  display: none !important;

}

.product-nav-tabs .nav-item {

  flex: 1 1 auto !important;

  text-align: center !important;

  min-width: fit-content !important;

}

.product-nav-tabs .nav-link {

  display: block !important;

  padding: 12px 18px !important;

  font-size: 14px !important;

  font-weight: 700 !important;

  color: #64748b !important;

  border: none !important;

  border-bottom: 3px solid transparent !important;

  background: transparent !important;

  text-decoration: none !important;

  white-space: nowrap !important;

  transition: all 0.2s ease !important;

}

.product-nav-tabs .nav-link:hover {

  color: #0f172a !important;

}

.product-nav-tabs .nav-link.active,

.product-nav-tabs .nav-link.js-product-nav-active {

  color: #f26522 !important;

  border-bottom-color: #f26522 !important;

  background: transparent !important;

}

.casaba-product-tabs-wrapper .tab-content {

  width: 100% !important;

  max-width: 100% !important;

}







/* ========================================================

   2026-10-07 KATEGORİ BOŞLUK SIFIRLAMA, BREADCRUMB & 3'LÜ MOBİL TAB

   ======================================================== */



/* Kategori ve Sayfa Üst Boşluk Sıfırlama */

#wrapper {

  padding-top: 0 !important;

}

.ck-category-page {

  padding-top: 0 !important;

  margin-top: 0 !important;

}

.breadcrumb, nav[data-depth] {

  margin: 4px 0 6px 0 !important;

  padding: 0 !important;

  background: transparent !important;

}

.breadcrumb ol {

  margin: 0 !important;

  padding: 0 !important;

}

.breadcrumb li {

  font-size: 12px !important;

  color: #64748b !important;

}

.breadcrumb li a {

  color: #64748b !important;

}



/* Masaüstü Toolbar İçi Facet Hizalama */

.ck-toolbar-desktop-bar {

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 16px !important;

  width: 100% !important;

}

.ck-desktop-filter-left {

  display: flex !important;

  align-items: center !important;

  gap: 14px !important;

  flex: 1 !important;

}

.ck-desktop-filter-heading {

  font-size: 13px !important;

  font-weight: 800 !important;

  color: #0f172a !important;

  white-space: nowrap !important;

}

.ck-faceted-inline {

  display: flex !important;

  align-items: center !important;

}

@media (min-width: 768px) {

  .ck-faceted-inline .ck-search-filters {

    margin: 0 !important;

    padding: 0 !important;

    border: none !important;

  }

  .ck-faceted-inline .ck-facets-bar {

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

    flex-wrap: wrap !important;

  }

}



/* Mobilde 3'lü Eşit Sekme (Yan Kaydırma Gerektirmeyen Tam Genişlik Düzeni) */

@media (max-width: 767px) {

  .casaba-product-tabs-wrapper {

    margin: 20px 0 !important;

  }

  .product-nav-tabs {

    display: flex !important;

    width: 100% !important;

    border-bottom: 2px solid #e2e8f0 !important;

    margin: 0 0 14px 0 !important;

    padding: 0 !important;

    gap: 2px !important;

    overflow: visible !important;

  }

  .product-nav-tabs .nav-item {

    flex: 1 1 0% !important;

    text-align: center !important;

    min-width: 0 !important;

    margin: 0 !important;

  }

  .product-nav-tabs .nav-link {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    width: 100% !important;

    padding: 10px 4px !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    text-align: center !important;

    white-space: normal !important;

    line-height: 1.25 !important;

    border: none !important;

    border-bottom: 3px solid transparent !important;

    color: #64748b !important;

    border-radius: 0 !important;

    min-height: 44px !important;

  }

  .product-nav-tabs .nav-link.active,

  .product-nav-tabs .nav-link.js-product-nav-active {

    color: #f26522 !important;

    border-bottom-color: #f26522 !important;

  }

}









@media (max-width: 767px) {

  .casaba-subcats-wrapper { margin-bottom: 0 !important; }

  

}





/* ========================================= */

/* KULLANICI TALEPLERÄ° - 7 EKÄ°M GÃœNCELLEMESÄ° */

/* ========================================= */



/* 1. Kategori sayfasında breadcrumb'ı ortala */

.breadcrumb {

  text-align: center;

  justify-content: center;

}

.breadcrumb ol {

  justify-content: center;

}



/* 2. Boşlukları sıfırla (Header -> Filtre -> Navigasyon -> Kategori Görselleri -> Ürünler) */

@media (max-width: 767px) {

  #wrapper {

    padding-top: 0 !important;

  }

  .breadcrumb {

    margin-bottom: 5px !important;

    padding-bottom: 0 !important;

  }

  .casaba-subcats-wrapper {

    margin-bottom: 5px !important;

    padding-top: 0 !important;

  }

  #products {

    margin-top: 0 !important;

  }

  

  /* 3. Filtre ve Sırala butonları tam %50 yatay */

  .ck-toolbar-mobile-grid {

    display: flex !important;

    width: 100% !important;

    justify-content: space-between !important;

    gap: 8px !important;

  }

  .ck-toolbar-mobile-grid > .btn-toolbar-action, 

  .ck-toolbar-mobile-grid > .toolbar-sort-wrapper {

    flex: 1 !important;

    width: 50% !important;

  }

  .ck-toolbar-mobile-grid .btn-toolbar-action {

    width: 100% !important;

    justify-content: center !important;

  }



  /* 4. Ürün görselleri alt alta 2.5 tane sığacak şekilde küçültülsün */

  #products .ck-product-img-wrap {

    height: 160px !important;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

  }

  #products .ck-product-img-wrap img {

    height: 100% !important;

    width: 100% !important;

    object-fit: cover !important;

  }

  #products .ck-product-card {

    margin-bottom: 8px !important;

  }

  #products .ck-product-body {

    padding: 8px !important;

  }

  #products .ck-product-title {

    font-size: 12px !important;

    line-height: 1.3 !important;

    margin-bottom: 4px !important;

  }

  #products .ck-price-current {

    font-size: 14px !important;

  }

  #products .ck-btn-add-to-cart {

    padding: 6px !important;

    font-size: 12px !important;

  }

}



/* 5. Modern Pagination */

.ck-pagination-wrapper {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 15px;

  margin-top: 20px;

  margin-bottom: 10px;

}

.ck-pagination-wrapper .page-list {

  display: flex;

  list-style: none;

  padding: 0;

  margin: 0;

  gap: 8px;

}

.ck-pagination-wrapper .page-list li a {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 8px 14px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 8px;

  color: #1e293b;

  font-weight: 600;

  font-size: 14px;

  text-decoration: none;

  transition: all 0.2s ease;

}

.ck-pagination-wrapper .page-list li a:hover {

  background: #ea580c;

  color: #fff;

  border-color: #ea580c;

}

.ck-pagination-wrapper .page-list li.current a {

  background: #ea580c;

  color: #fff;

  border-color: #ea580c;

}

.ck-pagination-wrapper .page-list li a i {

  font-size: 18px;

  margin: 0 4px;

}

.ck-pagination-summary {

  font-size: 13px;

  color: #64748b;

  font-weight: 500;

  text-align: center;

}



/* 6. Yukarı Dön butonunu gizle */

#btn-back-to-top, .back-to-top {

  display: none !important;

}



/* 7. Kategori Açıklaması en altta ortalı */

.ck-category-description-bottom {

  text-align: center;

  font-size: 14px;

  color: #475569;

  line-height: 1.6;

  margin-top: 30px;

  margin-bottom: 40px;

  padding: 20px;

  background: #f8fafc;

  border-radius: 12px;

}



@media (max-width: 767px) {

  #ck_mobile_filter_drawer { position: fixed; top: 0; left: -100vw; width: 100vw !important; max-width: 100vw !important;

    height: 100vh;

    background: #ffffff;

    z-index: 99999;

    box-shadow: 6px 0 25px rgba(0,0,0,0.2);

    transition: left 0.32s cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;

    flex-direction: column;

    padding: 0;

    overflow-y: auto;

  }

  #ck_mobile_filter_drawer.is-open {

    left: 0 !important;

  }

  /* If the widget itself has fixed position from my old css, override it */

  #search_filters,

  #search_filters_wrapper {

    position: static !important;

    width: 100% !important;

    height: auto !important;

    box-shadow: none !important;

    left: 0 !important;

    transform: none !important;

  }

}



/* -------------------------------------

   MOBİLDE ÜRÜN BOYUTLARI (2.5 Ürün Sığdırma)

   ------------------------------------- */

@media (max-width: 767px) {

  .products.row {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 6px !important;

  }

  .ck-product-card {

    min-height: auto !important;

    max-height: 38vh !important;

  }

  .ck-product-img-wrap {

    position: relative !important;

    width: 100% !important;

    aspect-ratio: 1 / 1 !important;

    height: auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    overflow: hidden !important;

    padding: 10px !important;

  }

  .ck-product-img-wrap img {

    position: absolute !important;

    top: 50% !important;

    left: 50% !important;

    transform: translate(-50%, -50%) !important;

    width: calc(100% - 20px) !important;

    height: calc(100% - 20px) !important;

    object-fit: contain !important;

    margin: 0 !important;

    padding: 0 !important;

  }

  .ck-product-body {

    padding: 6px !important;

    gap: 4px !important;

    justify-content: flex-start !important;

  }

  .ck-product-title {

    font-size: 11px !important;

    line-height: 1.25 !important;

    margin-bottom: 2px !important;

    display: -webkit-box !important;

    -webkit-line-clamp: 2 !important;

    -webkit-box-orient: vertical !important;

    overflow: hidden !important;

  }

  .ck-price-current {

    font-size: 13px !important;

    margin-bottom: 2px !important;

  }

  .ck-btn-add-to-cart {

    padding: 4px 6px !important;

    font-size: 11px !important;

    min-height: 26px !important;

    margin-top: auto !important;

  }

}







/* GOREV 5: Mobil Filtre Ekrani duzeltmesi */

#ck_mobile_filter_drawer #search_filters,

#ck_mobile_filter_drawer .faceted-search {

    display: flex !important;

    flex-direction: column !important;

    visibility: visible !important;

    opacity: 1 !important;

}

#search_filters_wrapper {

    display: block !important;

}



/* GOREV 7: Urun Sayfasi Yorum Alani Modernizasyonu (hb-review benzeri) */

#product-comments-list-header {

    display: flex !important;

    align-items: center !important;

    justify-content: space-between !important;

    margin-bottom: 20px !important;

    padding-bottom: 12px !important;

    border-bottom: 2px solid #f1f5f9 !important;

}

#product-comments-list-header .comments-nb {

    font-size: 18px !important;

    font-weight: 700 !important;

    color: #1e293b !important;

    display: flex !important;

    align-items: center !important;

    gap: 8px !important;

}

#product-comments-list-header .comments-nb i {

    color: #ff6000 !important;

}



.product-comment-list-item.row {

    display: flex !important;

    flex-direction: column !important;

    padding: 16px !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 12px !important;

    background: #ffffff !important;

    margin-bottom: 16px !important;

    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;

    margin-left: 0 !important;

    margin-right: 0 !important;

}

.product-comment-list-item .comment-infos {

    display: flex !important;

    flex-direction: row !important;

    align-items: center !important;

    gap: 12px !important;

    margin-bottom: 12px !important;

    border-bottom: 1px solid #f1f5f9 !important;

    padding-bottom: 10px !important;

    width: 100% !important;

}

.product-comment-list-item .comment-author {

    font-size: 13.5px !important;

    font-weight: 600 !important;

    color: #1e293b !important;

    margin: 0 !important;

}

.product-comment-list-item .comment-date {

    font-size: 12px !important;

    color: #94a3b8 !important;

    margin-left: auto !important;

}

.product-comment-list-item .grade-stars {

    margin-right: 8px !important;

}

.product-comment-list-item .comment-content {

    width: 100% !important;

    padding: 0 !important;

}

.product-comment-list-item .comment-content .h4 {

    font-size: 15.5px !important;

    font-weight: 700 !important;

    color: #0f172a !important;

    margin: 0 0 8px 0 !important;

}

.product-comment-list-item .comment-content p {

    font-size: 14px !important;

    color: #475569 !important;

    line-height: 1.6 !important;

    margin: 0 !important;

}

.product-comment-list-item .comment-buttons {

    margin-top: 14px !important;

    display: flex !important;

    gap: 16px !important;

}

.product-comment-list-item .comment-buttons a {

    font-size: 12.5px !important;

    color: #64748b !important;

    display: inline-flex !important;

    align-items: center !important;

    gap: 4px !important;

    cursor: pointer !important;

}

.product-comment-list-item .comment-buttons a:hover {

    color: #ff6000 !important;

}

.product-comment-list-item .comment-buttons a i {

    font-size: 16px !important;

}

#empty-product-comment {

    font-size: 14px !important;

    color: #64748b !important;

    padding: 20px !important;

    text-align: center !important;

    background: #f8fafc !important;

    border-radius: 8px !important;

}



/* A11Y Contrast Overrides */

.casaba-home-announcement-strip { background: #d24f11 !important; }

.ck-price-current, #products .ck-price-current { color: #d24f11 !important; }

.ck-price-tax-label { color: #64748b !important; }

.casaba-footer h4, .casaba-footer .h4 { color: #f8fafc !important; }

.casaba-footer p, .casaba-footer a, .casaba-footer li { color: #cbd5e1 !important; }



/* =====================================================================

   GÖREV: FİLTRE SEÇENEKLERİ MODERNİZASYONU VE SLIDER (PRICE) DESTEĞİ

   ===================================================================== */



/* 1. Renk / Texture (Swatch) Modernizasyonu */

.ck-color-swatch {

    display: inline-block;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    border: 2px solid #e2e8f0;

    cursor: pointer;

    position: relative;

    box-shadow: 0 2px 5px rgba(0,0,0,0.05);

    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;

    background-size: cover;

    background-position: center;

    vertical-align: middle;

}

.ck-color-swatch:hover {

    transform: scale(1.1);

    border-color: #cbd5e1;

    box-shadow: 0 4px 10px rgba(0,0,0,0.1);

}

.facet-label.active .ck-color-swatch {

    border-color: #ea580c;

    transform: scale(1.1);

}

/* Seçili renkte ortasında beyaz çentik/yuvarlak */

.facet-label.active .ck-color-swatch::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 10px;

    height: 10px;

    background: white;

    border-radius: 50%;

    box-shadow: 0 0 3px rgba(0,0,0,0.5);

}



/* 2. Slider (Fiyat) Modernizasyonu */

.ck-slider-range {

    height: 6px;

    background: #e2e8f0;

    border-radius: 3px;

    margin: 20px 10px 10px !important;

    position: relative;

}

.ck-slider-range .ui-slider-range {

    background: #ea580c;

    border-radius: 3px;

    position: absolute;

    height: 100%;

}

.ck-slider-range .ui-slider-handle {

    width: 20px;

    height: 20px;

    background: #ffffff;

    border: 2px solid #ea580c;

    border-radius: 50%;

    top: -7px;

    cursor: pointer;

    box-shadow: 0 2px 5px rgba(0,0,0,0.2);

    position: absolute;

    z-index: 2;

    transition: transform 0.1s;

    outline: none;

}

.ck-slider-range .ui-slider-handle:hover,

.ck-slider-range .ui-slider-handle:active {

    transform: scale(1.15);

}



/* 3. Mobil Çekmece İçindeki Başlıklar & Tasarım */

#ck_mobile_filter_drawer .facet-title {

    font-size: 15px;

    font-weight: 700;

    color: #1e293b;

    margin: 0;

    padding: 15px 20px;

    border-bottom: 1px solid #f1f5f9;

    background: #f8fafc;

    text-transform: capitalize;

}

#ck_mobile_filter_drawer .title[data-toggle="collapse"] {

    cursor: pointer;

    position: relative;

}

#ck_mobile_filter_drawer .collapse-icons {

    position: absolute;

    right: 20px;

    top: 50%;

    transform: translateY(-50%);

    color: #64748b;

}



/* 4. Liste Öğeleri ve Checkbox Modernizasyonu */

.ck-facet-dropdown li {

    padding: 10px 20px;

    border-bottom: 1px solid #f8fafc;

}

.ck-facet-dropdown li:last-child {

    border-bottom: none;

}

.ck-facet-dropdown li label {

    font-size: 14px;

    color: #475569;

    display: flex;

    align-items: center;

    gap: 12px;

    cursor: pointer;

    margin: 0;

    transition: color 0.2s;

}

.ck-facet-dropdown li label:hover {

    color: #0f172a;

}

.ck-facet-dropdown li label.active {

    font-weight: 600;

    color: #ea580c;

}



/* Checkbox gizleyip custom hale getirme */

.ck-custom-checkbox input[type="checkbox"] {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}

.ck-custom-checkbox {

    position: relative;

    display: inline-flex;

    align-items: center;

}

/* Eger color swatch degilse (normal checkbox ise), prestashop ps-shown-by-js kullanir. Orayi duzeltiyoruz */

.ck-custom-checkbox .ps-shown-by-js {

    width: 20px;

    height: 20px;

    border: 2px solid #cbd5e1;

    border-radius: 4px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    transition: all 0.2s;

    background: #fff;

}

.ck-custom-checkbox input[type="checkbox"]:checked + .ps-shown-by-js {

    background: #ea580c;

    border-color: #ea580c;

}

.ck-custom-checkbox input[type="checkbox"]:checked + .ps-shown-by-js i {

    color: white;

    font-size: 16px;

    visibility: visible;

}

.ck-custom-checkbox .ps-shown-by-js i {

    visibility: hidden;

}



/* Clear all mobil */

.ck-mobile-clear {

    padding: 4px 10px;

    font-size: 13px;

    color: #e84545;

    background: none;

    border: 1px solid #e84545;

    border-radius: 4px;

    cursor: pointer;

    transition: all 0.2s;

}

.ck-mobile-clear:hover {

    background: #e84545;

    color: white;

}







/* =====================================================================

   GÖREV: Mobil Filtre Görünüm Düzeltmeleri

   ===================================================================== */



@media (max-width: 767px) {

    /* Container tam genişlik olsun ki başlıklar yarım kalmasın */

    .ck-facets-container {

        display: block !important;

        width: 100% !important;

    }

    .ck-facets-bar {

        display: block !important;

        width: 100% !important;

    }

    

    /* Native Checkbox & Radio kesinlikle gizlensin */

    .ck-custom-checkbox input[type="checkbox"],

    .ck-custom-radio input[type="radio"] {

        position: absolute !important;

        opacity: 0 !important;

        pointer-events: none !important;

        width: 0 !important;

        height: 0 !important;

        margin: 0 !important;

    }



    /* Çift ok sorununu çözelim (Sadece biri görünsün) */

    #ck_mobile_filter_drawer .collapse-icons .remove {

        display: none !important;

    }

    #ck_mobile_filter_drawer .title[aria-expanded="true"] .collapse-icons .add,

    #ck_mobile_filter_drawer .title:not(.collapsed) .collapse-icons .add {

        display: none !important;

    }

    #ck_mobile_filter_drawer .title[aria-expanded="true"] .collapse-icons .remove,

    #ck_mobile_filter_drawer .title:not(.collapsed) .collapse-icons .remove {

        display: block !important;

    }

    

    /* İkonlar üst üste binmesin diye line-height ve margin ayarı */

    #ck_mobile_filter_drawer .collapse-icons i {

        font-size: 20px;

        line-height: 1;

        margin: 0;

    }



    /* Başlık tasarımını tam genişliğe yayalım */

    #ck_mobile_filter_drawer .facet-title {

        display: block !important;

        width: 100% !important;

        box-sizing: border-box;

    }

}





@media (max-width: 767px) {

    /* Container paddinglerini sıfırla ki elemanlar tam genişlikte olsun */

    #ck_mobile_filter_drawer .ck-facets-container {

        padding-left: 0 !important;

        padding-right: 0 !important;

    }

    

    /* Başlık için sağ sol boşluk verelim ama arka plan tam genişlik olsun */

    #ck_mobile_filter_drawer .facet-title {

        padding-left: 20px !important;

        padding-right: 20px !important;

    }

    

    /* İkonları (okları) biraz içeri alalım padding kalktığı için */

    #ck_mobile_filter_drawer .collapse-icons {

        right: 20px !important;

    }



    /* Liste elemanları ve diğer içerikler container margininden etkilenmesin diye padding verelim */

    #ck_mobile_filter_drawer .ck-facet-dropdown {

        padding-left: 0 !important;

        padding-right: 0 !important;

    }

    

    #ck_mobile_filter_drawer .ck-facet-dropdown li {

        padding-left: 20px !important;

        padding-right: 20px !important;

    }

}









@media (max-width: 767px) {

    /* Flex layout to reorder items inside drawer */

    #search_filters {

        display: flex !important;

        flex-direction: column !important;

    }

    #search_filters .ck-mobile-filter-header {

        order: 1 !important;

    }

    #search_filters .faceted-search {

        order: 2 !important;

        flex: 1 !important;

        overflow-y: auto !important;

    }

    #search_filters #search_filter_controls {

        order: 3 !important;

        margin-top: auto !important;

        display: flex !important; 

        flex-direction: column !important; 

        align-items: center !important; 

        padding: 15px !important; 

        background: #fff !important; 

        width: 100% !important; 

        box-sizing: border-box !important; 

        border-top: 1px solid #e2e8f0 !important; 

        box-shadow: 0 -4px 12px rgba(0,0,0,0.05) !important;

    }

    

    /* TAMAM becomes FİLTRELE (Orange, On Top) */

    #search_filter_controls .btn.ok { 

        order: 1 !important; 

        width: 100% !important; 

        background-color: #ea580c !important; 

        border-color: #ea580c !important; 

        color: #fff !important; 

        border-radius: 8px !important; 

        padding: 12px !important; 

        margin: 0 0 10px 0 !important; 

        display: flex !important; 

        justify-content: center !important; 

        align-items: center !important; 

        gap: 8px !important; 

        font-size: 0 !important; 

    }

    #search_filter_controls .btn.ok::after { 

        content: "FİLTRELE" !important; 

        font-size: 16px !important; 

        font-weight: 600 !important; 

    }

    #search_filter_controls .btn.ok i,

    #search_filter_controls .btn.ok svg { 

        display: none !important; 

    }

    

    /* Temizle (Grey, On Bottom) */

    #search_filter_controls #_mobile_search_filters_clear_all {

        order: 2 !important;

        width: 100% !important;

        display: block !important;

    }

    #search_filter_controls #_mobile_search_filters_clear_all .js-search-filters-clear-all { 

        width: 100% !important; 

        background-color: transparent !important; 

        color: #64748b !important; 

        border: none !important; 

        text-decoration: underline !important; 

        padding: 8px !important; 

        margin: 0 !important; 

        font-size: 0 !important; 

        display: flex !important; 

        justify-content: center !important; 

        align-items: center !important; 

    }

    #search_filter_controls #_mobile_search_filters_clear_all .js-search-filters-clear-all::after { 

        content: "Seçilenleri Temizle" !important; 

        font-size: 15px !important; 

        font-weight: 600 !important; 

    }

    #search_filter_controls #_mobile_search_filters_clear_all .js-search-filters-clear-all i,

    #search_filter_controls #_mobile_search_filters_clear_all .js-search-filters-clear-all svg { 

        display: none !important; 

    }

    

    /* Fix Filtreler Title generated by JS */

    #search_filter_controls::before { 

        display: none !important; 

    }

}











@media (max-width: 767px) {

    /* Mobil filtre kategorilerini açıp kapatma (aria-expanded'e göre) */

    #search_filters .title[aria-expanded="false"] ~ .ck-facet-dropdown,

    #search_filters .title[aria-expanded="false"] ~ * .ck-facet-dropdown {

        display: none !important;

    }

    #search_filters .title[aria-expanded="true"] ~ .ck-facet-dropdown,

    #search_filters .title[aria-expanded="true"] ~ * .ck-facet-dropdown {

        display: block !important;

    }

}



@media (max-width: 767px) {

    /* Mobil filtre ekrani tam ekran genislik ayarlari */