/* =========================
   The Flower's Land - Clean CSS (CLEANED)
   Scope: index.html, hakkimizda.html, cicekler.html, admin.html, admin_login.html
   ========================= */

/* -------------------------------------------------
   0) VARIABLES
------------------------------------------------- */
:root {
  /* palette */
  --premium-bordo: #561D23;
  --premium-gold: #D6B256;
  --accent-color: #FFC43F;

  --dark: #222;
  --text: #747474;
  --muted: #9aa0a6;

  /* mega menu helpers */
  --accent: #16a34a;
  --mega-bg: #fff;
  --mega-border: #eaeaea;
  --mega-hover: #f7f7f7;

  /* layout */
  --header-height: 160px;
  --header-height-min: 80px;

  /* product detail polish */
  --brand: #6b1e26;   /* bordo */
  --cream: #F7F4EF;   /* krem */
  --ink: #212529;     /* koyu metin */
  --ring: #e8e2d9;    /* açık çerçeve */
  --shadow: 0 6px 24px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);

  /* mobile theme */
  --ral-3005:#5E2129;
  --gold:#F6E3B4;
}

@media (max-width:600px) {
  :root {
    --header-height: 100px;
    --header-height-min: 80px;
  }
}

/* -------------------------------------------------
   1) BASE / RESET
------------------------------------------------- */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

*, *::before, *::after{
  box-sizing: border-box;
}

img, video, svg, iframe, canvas{
  max-width: 100%;
  height: auto;
}

html{
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: "Open Sans", sans-serif;
  letter-spacing: .03em;
  color: var(--text);
  --bs-body-line-height: 2;

  background-color: var(--ral-3005) !important;
  color: #FFFFFF;
}

h1,h2,h3,h4,h5,h6 {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  color: var(--dark);
}

.display-1,.display-2,.display-3,.display-4,.display-5,.display-6 {
  font-weight: 700;
}

/* Containers: wider gutters */
.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  --bs-gutter-x: 3rem;
}

/* Desktop max width preference */
.container-fluid {
  max-width: 1600px;
}

/* -------------------------------------------------
   2) PRELOADER
------------------------------------------------- */
.preloader-wrapper {
  position: fixed;
  inset: 0;
  z-index: 111;
  background: var(--premium-bordo);
  width: 100%;
  height: 100vh;
}

.preloader-wrapper .preloader {
  margin: 20% auto 0;
  transform: translateZ(0);
}

.preloader,
.preloader:before,
.preloader:after {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  position: absolute;
  top: 0;
  animation: preload-bounce 1.2s infinite ease-in-out;
}

.preloader { animation-delay: -.16s; }

.preloader:before {
  content: "";
  left: -3.5em;
  animation-delay: -.32s;
}

.preloader:after {
  content: "";
  left: 3.5em;
}

@keyframes preload-bounce {
  0%, 80%, 100% { box-shadow: 0 2em 0 -1em var(--accent-color); }
  40% { box-shadow: 0 2em 0 0 var(--accent-color); }
}

/* -------------------------------------------------
   3) HEADER / NAV
------------------------------------------------- */
header .main-menu .menu-list {
  justify-content: center !important;
}

header .main-menu .menu-list .nav-link {
  text-align: center;
}

/* navbar links */
.main-menu .nav-link {
  color: #d4af37 !important;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: .5px;
  transition: color .25s ease, transform .2s ease;
}

.main-menu .nav-link:hover,
.main-menu .nav-link:focus {
  color: #000 !important;
  transform: translateY(-2px);
}

/* Logo sizing */
header .main-logo img {
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.footer-menu img {
  max-height: 250px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Cart total (desktop usage) */
.cart-total-line {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
}
.cart-total-label {
  font-size: .9rem;
  color: #ddd;
  font-weight: 600;
}
.cart-total,
.cart-total-amount {
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
}
.cart-image {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* -------------------------------------------------
   4) HERO / BANNER BLOCKS
------------------------------------------------- */
.banner-blocks{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.block-1 { grid-area: 1 / 1 / 3 / 8; }
.block-2 { grid-area: 1 / 8 / 2 / 13; }
.block-3 { grid-area: 2 / 8 / 3 / 13; }

@media (max-width:1140px) {
  .banner-blocks{
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .block-1 { grid-area: 1 / 1 / 3 / 2; }
  .block-2 { grid-area: 3 / 1 / 4 / 2; }
  .block-3 { grid-area: 4 / 1 / 5 / 2; }
}

.banner-ad {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.banner-ad .swiper-pagination {
  bottom: 40px;
  left: 0;
  right: 0;
}

.banner-ad .swiper-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  margin: 4px;
  background: #fff;
  opacity: 1;
  transition: background .3s ease-out;
}

.banner-ad .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--accent-color);
}

.banner-ad .swiper-slide {
  min-height: 630px;
  display: flex;
}

/* block-1 image cover */
.block-1 .img-wrapper { width: 100%; height: 100%; padding: 0 !important; }
.block-1 .img-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* block-2 / block-3 background */
.banner-ad.block-2,
.banner-ad.block-3 {
  background-color: var(--premium-bordo) !important;
  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: right bottom !important;
  border-radius: 12px;
}

/* Swiper overflow safety */
.main-swiper, .swiper, .swiper-wrapper, .swiper-slide { max-width: 100%; }
.swiper { overflow: hidden; }

/* -------------------------------------------------
   5) TITLES / BUTTONS
------------------------------------------------- */
.products-title {
  font-size: 3rem;
  font-weight: 900;
  color: #d4af37;
  margin: 2.5rem 0 2rem;
}
.products-title::after { display:none !important; }

/* category buttons (desktop defaults) */
.category-buttons .btn-cat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  height: 120px;
  padding: 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  border-radius: 18px;
  background: #f1efe9;
  border: 1px solid #e7e3d7;
  color: #333;
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease, background-color .15s ease, border-color .15s ease;
  text-decoration: none;
}

.category-buttons .btn-cat:hover,
.category-buttons .btn-cat:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  color: #b8860b;
  background: #fff7e0;
  border-color: #e7d7a8;
}

/* -------------------------------------------------
   6) ABOUT PREMIUM (Hakkımızda)
------------------------------------------------- */
.about-parallax-premium {
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(255, 255, 255, .25), transparent 60%),
    url("images/hakkimizda-bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}

.about-parallax-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(86, 29, 35, .55), rgba(86, 29, 35, .65));
  z-index: 1;
}

.glass-card-premium {
  position: relative;
  z-index: 2;
  background: linear-gradient(145deg, #F9F6F0, #EFE9DD);
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 24px;
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .18);
}

.kicker {
  letter-spacing: .25em;
  font-size: .78rem;
  color: rgba(0, 0, 0, .55);
}

.premium-title { letter-spacing: .02em; }

.premium-divider {
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--premium-gold), transparent);
  border-radius: 2px;
  margin-inline: auto;
}

.glass-card-premium h2,
.glass-card-premium h3 {
  color: #3E2F29;
  font-weight: 700;
  letter-spacing: .5px;
}

.glass-card-premium p {
  color: #5A4D45;
  line-height: 1.7;
}

.info-card-premium {
  background: #fff;
  border: 1px solid #f1e6e8;
  border-radius: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.info-card-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .08);
}

.icon-ring {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(214, 178, 86, .25), rgba(214, 178, 86, .08));
  color: var(--premium-bordo);
  border: 1px solid rgba(214, 178, 86, .35);
}

.stat-tile {
  background: linear-gradient(180deg, #ffffff, #fff9f2);
  border: 1px solid #f1e6e8;
  border-radius: 14px;
}

.gallery-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: 220px 160px 180px;
  gap: 14px;
}

.gallery-a { grid-column: 1/2; grid-row: 1/3; }
.gallery-b { grid-column: 2/3; grid-row: 1/2; }
.gallery-c { grid-column: 2/3; grid-row: 2/4; }

.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }

.premium-quote {
  position: relative;
  padding: 14px 0 0;
  margin-top: 20px;
  font-style: italic;
  color: #5a5a5a;
  text-align: center;
}
.premium-quote::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(214, 178, 86, .9), transparent);
}

@media (max-width:991.98px) {
  .about-parallax-premium { background-attachment: scroll; }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 160px 160px;
  }
}

/* -------------------------------------------------
   7) MODAL POLISH
------------------------------------------------- */
.modal-content {
  background: #fffdf7 !important;
  color: #222 !important;
  border: 1px solid #e5dcc3;
}
.modal-header {
  background: #f5efe6;
  border-bottom: 1px solid #e8d9b9;
}
.modal-title {
  font-weight: 600;
  color: var(--premium-bordo);
}
.modal-footer {
  border-top: 1px solid #e8d9b9;
}

/* -------------------------------------------------
   8) PRODUCT CARD (GENERIC)
------------------------------------------------- */
.product-card {
  background: #F7F4EF;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.product-card .thumb-wrap{
  height: 220px; /* desktop default */
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.product-card img.thumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-card .content { padding: 10px 12px 14px; }

.category-chip {
  font-size: .75rem;
  color: #666;
  background: #f1f1f1;
  padding: 2px 8px;
  border-radius: 999px;
  max-width: 100%;
}

.discount-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #d32f2f;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  padding: 8px 10px;
  border-radius: 8px;
}

.price-line {
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: .4rem;
}
.price-line .old {
  color: #888;
  text-decoration: line-through;
  margin-right: 8px;
  font-size: .95rem;
}
.price-line .now { color: #000; font-weight: 800; }

/* -------------------------------------------------
   9) MEGA MENU (PUBLIC)
------------------------------------------------- */
.mega { position: relative; margin-top: .75rem; }
.mega.d-none { display: none !important; }

#megaMenu{
  position: relative;
  z-index: 60;
}
#megaMenu::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 16px;
  background: transparent;
  pointer-events: auto;
}

.mega .mega-inner {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--mega-bg);
  border: 1px solid var(--mega-border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
  padding: 18px 12px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 sütun FINAL */
  gap: 8px;
  max-width: 100vw;
}

/* 3. kolon varsa 2.sütuna düşsün */
#megaMenu .mega-col:nth-child(3){ grid-column: 2; }

.mega-col { padding: 4px 6px; min-height: 320px; }

.mega-title {
  font-size: .9rem;
  font-weight: 800;
  color: #666;
  margin: 2px 8px 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-align: left;
}

.mega-list { list-style: none; margin: 0; padding: 0; }

.mega-list li {
  display: block;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
  color: #000 !important;
}

.mega-list li:hover { background: var(--mega-hover); }

.mega-list li .chev { opacity: .5; font-weight: 900; }
.mega-list li:hover .chev { opacity: 1; color: var(--accent); }

#mega-l1 li.active {
  background: #f4fff6;
  outline: 2px solid rgba(22, 163, 74, .08);
  box-shadow: inset 3px 0 0 var(--accent);
}

#megaMenu .mega-list li.disabled {
  color: var(--muted);
  cursor: default;
  background: transparent;
}

/* -------------------------------------------------
   10) SEARCH BAR (PUBLIC)
------------------------------------------------- */
.search-wrap { max-width: 350px; margin: 0 auto; }

#productSearch {
  border-radius: 30px;
  padding: 10px 18px;
  border: 2px solid #ddd;
}
#productSearch:focus {
  border-color: #b08a48;
  box-shadow: 0 0 0 2px rgba(176, 138, 72, .2);
}

.search-bar{
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------
   11) PRODUCT DETAIL POLISH
------------------------------------------------- */
.breadcrumb {
  --bs-breadcrumb-divider: "›";
  font-size: .95rem;
  margin-bottom: 0;
  position: relative;
  z-index: 9999 !important;
  background: #fff;
}

.breadcrumb .breadcrumb-item a {
  color: var(--brand);
  text-decoration: none;
}
.breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }

.product-detail-section {
  background: linear-gradient(0deg, rgba(107, 30, 38, .05), rgba(107, 30, 38, .05));
}

#product-detail { align-items: stretch; }

#product-detail > .col-md-6:first-child .ratio {
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
  border: 1px solid var(--ring);
  overflow: hidden;
}

#product-detail img {
  object-fit: cover;
  transition: transform .35s ease;
}

#product-detail .ratio:not(.zoom-box):hover img { transform: scale(1.02); }

#product-detail > .col-md-6:last-child {
  background: #fff;
  border: 1px solid var(--ring);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 28px;
}

#product-detail h1 {
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 800;
  margin-bottom: .5rem;
  color: var(--ink);
}

#product-detail .badge {
  background: var(--cream);
  color: var(--brand);
  border: 1px solid var(--ring);
  font-weight: 700;
  padding: .4rem .6rem;
  border-radius: 999px;
}

#price-wrap { padding: .6rem 0 1rem; }
#price-wrap .fs-4 {
  font-size: clamp(1.2rem, 2vw, 1.6rem) !important;
  color: #000 !important;
}
#price-wrap .text-decoration-line-through { color: #000 !important; }
#price-wrap .badge.bg-danger {
  background-color: #dc3545 !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 4px 8px;
}

#product-detail .input-group.input-group-sm {
  --h: 40px;
  height: var(--h);
  max-width: 160px;
  border: 1px solid var(--ring);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

#product-detail .input-group .btn {
  border: none;
  height: var(--h);
  width: 42px;
}
#product-detail #qty {
  height: var(--h);
  border: none;
  box-shadow: none !important;
}

.btn-gold {
  background: linear-gradient(180deg, #f1d58d, #d9b96b);
  color: #3b2b0c;
  border: 1px solid #d4b26a;
  border-radius: 12px;
  padding: .55rem 1rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .06);
  transition: transform .06s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-gold:hover {
  filter: saturate(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .08);
}

#product-detail h6 { font-weight: 800; letter-spacing: .2px; }
#product-detail p.text-muted { color: rgba(0,0,0,.55) !important; }

#related-grid .product-card {
  border-radius: 14px;
  border: 1px solid var(--ring);
  transition: transform .2s ease, box-shadow .2s ease;
}
#related-grid .product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

/* zoom box */
.zoom-box {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  cursor: zoom-in;
}
.zoom-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.12s ease-out;
  transform-origin: center center;
  will-change: transform;
}
.zoom-box.zoom-disabled { cursor: default; }
.zoom-box.zoom-disabled .zoom-img { transform: none; }
.zoom-box.zoom-disabled:hover .zoom-img { transform: scale(1.02); }
.product-detail-section .zoom-box.is-zoomed .zoom-img { transform: scale(2); }

/* -------------------------------------------------
   12) CART / CHECKOUT PREMIUM COLORS
------------------------------------------------- */
.premium-cart-card,
.premium-cart-card .card-header,
.premium-cart-card .card-body,
.premium-cart-card .card-footer {
  background-color: #f5ebda !important;
  border-color: #f5ebda !important;
}

.premium-cart-card .cart-table thead,
.premium-cart-card .cart-table thead th {
  background-color: #f5ebda !important;
}

.premium-cart-card #cart-empty-state {
  background-color: #f5ebda !important;
}

.premium-cart-card .form-control,
.premium-cart-card .form-select,
.premium-cart-card textarea {
  background-color: #fffaf1;
  border-color: #e5ddcf;
}

/* -------------------------------------------------
   13) ORGANIZATION SLIDER TEMPLATE
------------------------------------------------- */
.org-slide {
  position: relative;
  width: 100%;
  max-width: 620px;
  aspect-ratio: 12 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
}

.org-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0.15), rgba(0,0,0,0));
  pointer-events: none;
  z-index: 1;
}

.org-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.4s ease;
}

.swiper-slide:hover .org-slide-img { transform: scale(1.06); }

.org-slide-caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
}

.org-chip {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: #333;
  font-size: 0.85rem;
  font-weight: 600;
}

@media (max-width: 768px){
  .org-slide { max-width: 100%; border-radius: 14px; }
}

/* -------------------------------------------------
   14) SUPPORT BOX (footer contact)
------------------------------------------------- */
.support-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.support-box span { display: block; text-align: center; }
.support-box .text-muted { color: #d4aa00 !important; }

.support-box a {
  display: block;
  color: #ffffff;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
}
.support-box a:hover { text-decoration: underline; }

/* long strings don't expand page */
.support-box a,
.org-info a,
.product-title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* -------------------------------------------------
   15) OFFCANVAS (Search + Mobile Nav)
------------------------------------------------- */
.search-offcanvas{
  background: var(--ral-3005);
}
.search-offcanvas .offcanvas-header{
  background: var(--ral-3005);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.search-offcanvas .offcanvas-title{
  color: var(--gold);
  font-weight: 800;
}
.search-offcanvas .offcanvas-body{
  padding: 14px 20px 22px;
  background: var(--ral-3005);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.search-form-premium{
  display: flex;
  gap: 12px;
  align-items: center;
}
.search-input-wrap{ position: relative; flex: 1; }
.search-icon{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0,0,0,0.45);
  pointer-events: none;
}
.search-input-premium{
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.95);
  padding: 0 14px 0 42px;
  outline: none;
  font-size: 15px;
  transition: all .15s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.search-input-premium:focus{
  border-color: rgba(86,29,35,0.35);
  box-shadow: 0 10px 24px rgba(86,29,35,0.10);
}
.search-btn-premium{
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--gold);
  background: linear-gradient(180deg, #7A2B34 0%, #4C181F 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.search-btn-premium:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(86,29,35,0.22);
}
.search-btn-premium:active{
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(86,29,35,0.18);
}
.search-offcanvas .btn-close{
  filter: invert(1);
  opacity: 0.85;
}

/* Mobile nav offcanvas */
.mobile-nav-offcanvas{
  background: var(--ral-3005);
  color:#fff;
}
.mobile-nav-offcanvas .offcanvas-header{
  background: var(--ral-3005);
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.mobile-nav-offcanvas .offcanvas-title{
  color: var(--gold);
  font-weight: 900;
}
.mobile-nav-offcanvas .btn-close{
  filter: invert(1);
  opacity: .9;
}
.mobile-nav-offcanvas .offcanvas-body{ padding: 10px 0; }
.mobile-nav-offcanvas .nav-item{
  border-bottom: 1px solid rgba(246,227,180,0.22);
}
.mobile-nav-offcanvas .nav-link{
  padding: 16px 22px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}
.mobile-nav-offcanvas .nav-link:hover{
  background: rgba(255,255,255,0.06);
  color: var(--gold);
}

/* -------------------------------------------------
   16) PRODUCT GRID (FINAL - SINGLE SOURCE)
------------------------------------------------- */
#product-grid{
  display: grid !important;
  gap: 12px !important;
  padding: 0 12px !important;
  margin: 0 !important;
}

/* Bootstrap row/col override */
#product-grid.row{ margin: 0 !important; }
#product-grid > .col{
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
  min-width: 0 !important;
}

/* breakpoints */
@media (max-width: 480px){
  #product-grid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (min-width: 481px) and (max-width: 768px){
  #product-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (min-width: 1200px){
  #product-grid{ grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
}

/* image sizing in grid */
#product-grid .product-card .thumb-wrap{ height: 220px !important; }
#product-grid .product-card .thumb-wrap img.thumb{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
@media (max-width: 768px){
  #product-grid .product-card .thumb-wrap{ height: 120px !important; }
}

/* text ellipsis (no letter-by-letter break) */
#product-grid .product-title,
#product-grid .category-chip,
#product-grid .price-line,
#product-grid .price-line span{
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* compact controls on mobile */
@media (max-width: 768px){
  #product-grid .content{ padding: 10px !important; }

  #product-grid .product-qty{
    display: inline-flex !important;
    max-width: 78px !important;
  }
  #product-grid .product-qty .btn{
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    font-size: .85rem !important;
    line-height: 1 !important;
  }
  #product-grid .product-qty .input-number{
    height: 26px !important;
    padding: 0 !important;
    font-size: .85rem !important;
  }
  #product-grid .add-to-cart{
    padding: 6px 8px !important;
    font-size: .78rem !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }
  #product-grid .content .d-flex.align-items-center.mt-3{
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  #product-grid .discount-badge{
    top: 8px !important;
    left: 8px !important;
    font-size: .75rem !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
  }
}

/* -------------------------------------------------
   17) MOBILE CATEGORY BUTTONS (FINAL: 4 GRID)
------------------------------------------------- */
@media (max-width: 600px){
  .category-buttons{
    width: 100%;
    margin: 0 auto;
    padding: 0 12px;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    justify-items: stretch;
  }

  .category-buttons .btn-cat{
    min-width: 0 !important;
    width: 100%;
    height: 72px !important;
    padding: 10px 8px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    font-weight: 800;
    font-size: clamp(10px, 2.7vw, 13px) !important;
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: normal;
    overflow: hidden;
  }
}

/* -------------------------------------------------
   18) MOBILE HEADER (FINAL - SINGLE SOURCE)
------------------------------------------------- */
.mobile-header{
  background: var(--ral-3005);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: #fff;
}

.mobile-logo img{
  height: 40px;
  width: auto;
  display: block;
}

.mobile-header .mobile-icon-btn{
  padding: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff;
}

.mobile-header .mobile-cart-btn{
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  text-decoration: none;
}

.mobile-header .mobile-cart-icon{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

/* mobilde sepet tutarı gizle */
@media (max-width: 991.98px) {
  .mobile-cart-total { display: none !important; }
}

/* -------------------------------------------------
   19) BOOTSTRAP SMALL RESPONSIVE TWEAKS
------------------------------------------------- */
@media (max-width:991px) {
  .offcanvas-body .nav-item {
    font-weight: 700;
    border-bottom: 1px solid #d1d1d1;
  }
  .dropdown-menu {
    padding: 0;
    border: none;
    line-height: 1.4;
    font-size: .9em;
  }
  .dropdown-toggle::after {
    position: absolute;
    right: 0;
    top: 21px;
  }
}

/* reduce gutters on mobile (less overflow risk) */
@media (max-width: 768px) {
  .container,
  .container-fluid,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    --bs-gutter-x: 1rem !important;
  }

  header .main-logo img { max-height: 90px !important; }
  .footer-menu img { max-height: 140px !important; }
}
/* =========================
   MOBILE: Category buttons biraz genişlesin
   ========================= */
@media (max-width: 600px){

  .category-buttons{
    gap: 12px !important;          /* araları az aç */
  }

  .category-buttons .btn-cat{
    padding-left: 12px !important; /* 🔹 yatay nefes */
    padding-right: 12px !important;

    font-size: clamp(11px, 3vw, 14px) !important;
    letter-spacing: 0.2px;

    /* görsel olarak daha geniş his */
    transform: scaleX(1.1);
  }
}
/* =========================
   MOBILE: Category text smaller
   ========================= */
@media (max-width: 600px){

  .category-buttons .btn-cat{
    font-size: clamp(9px, 2.6vw, 12.5px) !important; /* 🔽 biraz küçüldü */
    line-height: 1.1 !important;                     /* daha sıkı */
    font-weight: 700 !important;                     /* premium görünüm kalsın */
  }
}
/* =========================
   MOBILE: Daha fazla ürün görünsün (2 kolon + kısa kart)
   ========================= */
@media (max-width: 768px){

  /* 2 kolon sabit kalsın */
  #product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;               /* boşluk küçülsün */
    padding: 0 10px !important;
  }

  /* Kart iç padding azalsın */
  #product-grid .product-card .content{
    padding: 8px 10px 10px !important;
  }

  /* Görsel alanı kısalsın = kart boyu kısalır */
  #product-grid .product-card .thumb-wrap{
    height: 95px !important;            /* 🔽 daha kısa */
  }

  /* Ürün adı daha küçük + 2 satır */
  #product-grid .product-title{
    font-size: 0.78rem !important;
    line-height: 1.15 !important;
    margin-top: 6px !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
  }

  /* Kategori chip daha kompakt */
  #product-grid .category-chip{
    font-size: 0.64rem !important;
    padding: 2px 6px !important;
  }

  /* Fiyatları alt alta: eski üstte, yeni altta */
  #product-grid .price-line{
    margin-top: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
    font-weight: 800 !important;
    font-size: 0.86rem !important;      /* yeni fiyatın genel boyu */
  }

  #product-grid .price-line .old{
    order: 1 !important;
    font-size: 0.72rem !important;
    line-height: 1.1 !important;
    margin-right: 0 !important;
  }

  #product-grid .price-line .now{
    order: 2 !important;
    font-size: 0.9rem !important;
    line-height: 1.1 !important;
  }

  /* Adet + buton satırı daha sıkı */
  #product-grid .content .d-flex.align-items-center.mt-3{
    margin-top: 8px !important;
    gap: 6px !important;
  }

  /* +/- alanı minik */
  #product-grid .product-qty{
    max-width: 74px !important;
  }
  #product-grid .product-qty .btn{
    width: 24px !important;
    height: 24px !important;
    font-size: 0.72rem !important;
  }
  #product-grid .product-qty .input-number{
    height: 24px !important;
    font-size: 0.72rem !important;
  }

  /* Sepete ekle daha küçük */
  #product-grid .add-to-cart{
    padding: 6px 8px !important;
    font-size: 0.72rem !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  /* İndirim badge biraz küçülsün */
  #product-grid .discount-badge{
    font-size: 0.7rem !important;
    padding: 4px 6px !important;
    border-radius: 10px !important;
    top: 8px !important;
    left: 8px !important;
  }
}
/* =========================
   MOBILE: Qty buttons ultra-compact
   ========================= */
@media (max-width: 768px){

  /* Qty kapsayıcı: tek satır, minik */
  #product-grid .product-qty{
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;          /* 🔥 neredeyse bitişik */
    max-width: 60px !important;
    margin: 0 !important;
  }

  /* + / - butonları */
  #product-grid .product-qty .btn{
    width: 20px !important;       /* 🔥 çok küçük */
    height: 20px !important;
    padding: 0 !important;
    font-size: 0.65rem !important;
    line-height: 1 !important;
    border-radius: 6px !important;
  }

  /* Input */
  #product-grid .product-qty .input-number,
  #product-grid .product-qty input{
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    font-size: 0.65rem !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 6px !important;
  }

  /* + / - + input kesinlikle yan yana */
  #product-grid .product-qty *{
    flex: 0 0 auto !important;
  }

  /* Buton satırı daha sıkı olsun */
  #product-grid .content .d-flex.align-items-center.mt-3{
    gap: 6px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
}
/* =========================
   MOBILE: Add to cart text 2 lines
   ========================= */
@media (max-width: 768px){

  #product-grid .add-to-cart{
    white-space: normal !important;      /* 🔥 satır kırılmasına izin ver */
    text-align: center !important;
    line-height: 1.05 !important;        /* sıkı satırlar */
    padding: 6px 6px !important;
    font-size: 0.72rem !important;
    word-break: break-word !important;
  }

  /* Buton içi metin max 2 satır */
  #product-grid .add-to-cart span,
  #product-grid .add-to-cart{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;    /* 🔥 max 2 satır */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}
/* =========================
   MOBILE: Hide product category text
   ========================= */
@media (max-width: 768px){
  #product-grid .category-chip{
    display: none !important;
  }
}
/* =========================
   MOBILE: Qty buttons ultra-mini
   ========================= */
@media (max-width: 768px){

  /* Kapsayıcı */
  #product-grid .product-qty{
    display: inline-flex !important;
    align-items: center !important;
    gap: 1px !important;
    max-width: 46px !important;
    margin: 0 !important;
  }

  /* + ve - buton */
  #product-grid .product-qty .btn{
    width: 16px !important;        /* 🔥 daha da küçük */
    height: 16px !important;
    padding: 0 !important;
    font-size: 0.55rem !important;
    line-height: 1 !important;
    border-radius: 4px !important;
  }

  /* Ortadaki sayı */
  #product-grid .product-qty .input-number,
  #product-grid .product-qty input{
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    font-size: 0.55rem !important;
    line-height: 1 !important;
    text-align: center !important;
    border-radius: 4px !important;
  }

  /* Satır kesinlikle uzamasın */
  #product-grid .content .d-flex.align-items-center.mt-3{
    gap: 5px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
}
/* =========================
   MOBILE: Compact add-to-cart + inline qty
   ========================= */
@media (max-width: 768px){

  /* --- Sepete Ekle (daha küçük) --- */
  #product-grid .add-to-cart{
    font-size: 0.68rem !important;
    padding: 5px 7px !important;
    border-radius: 9px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }

  /* --- Qty kapsayıcı: YAN YANA zorla --- */
  #product-grid .product-qty{
    display: inline-flex !important;
    flex-direction: row !important;   /* 🔥 alt alta olmasın */
    align-items: center !important;
    gap: 1px !important;
    max-width: 48px !important;
    margin: 0 !important;
  }

  /* + / - / input yan yana */
  #product-grid .product-qty button,
  #product-grid .product-qty input{
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }

  /* Boyutlar (ultra-compact) */
  #product-grid .product-qty .btn{
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    font-size: 0.55rem !important;
    line-height: 1 !important;
    border-radius: 4px !important;
  }

  #product-grid .product-qty .input-number,
  #product-grid .product-qty input{
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    font-size: 0.55rem !important;
    text-align: center !important;
    border-radius: 4px !important;
    line-height: 1 !important;
  }

  /* Satır taşmasın */
  #product-grid .content .d-flex.align-items-center.mt-3{
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 6px !important;
  }
}
/* =========================
   MOBILE: Center +/- inside tiny boxes
   ========================= */
@media (max-width: 768px){

  /* +/- butonlarının içindeki işaretleri tam ortala */
  #product-grid .product-qty .btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 16px !important;
    height: 16px !important;

    padding: 0 !important;
    line-height: 16px !important;  /* 🔥 dikey ortalama */
    font-size: 12px !important;    /* 🔥 daha dengeli görünür */

    border-radius: 4px !important;
  }

  /* Eğer buton içinde <span> ya da ikon varsa onu da sabitle */
  #product-grid .product-qty .btn *{
    line-height: 1 !important;
    display: inline-block !important;
    transform: translateY(-0.5px); /* 🔥 mikron ayarı */
  }
}
/* =========================
   MOBILE: Old price yoksa da boşluk bırak (fiyat hizası sabit)
   ========================= */
@media (max-width: 768px){

  /* Fiyatlar zaten column ise: eski üstte, yeni altta */
  #product-grid .price-line{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  /* Eski fiyat satırı için sabit yer */
  #product-grid .price-line .old{
    min-height: 0.85em !important; /* satır yüksekliği kadar alan */
  }

  /* Eğer .old yoksa, üstte boş satır üret */
  #product-grid .price-line:not(:has(.old))::before{
    content: "";
    display: block;
    height: 0.85em;               /* aynı boşluk */
  }
}
/* =========================
   MOBILE: Header logo bigger
   ========================= */
@media (max-width: 991.98px){

  /* Logo görseli */
  header .main-logo img,
  .mobile-logo img{
    height: 55px !important;     /* 🔼 40 → 48 (ideal) */
    max-height: 55px !important;
    width: auto !important;
  }

  /* Logo kapsayıcı (ortada düzgün dursun) */
  header .main-logo,
  .mobile-logo{
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
/* =========================
   MOBILE: Subcategory text smaller
   ========================= */
@media (max-width: 768px){

  /* Alt kategori listesi item'ları */
  .categories-box li,
  .category-panel li,
  .subcategories-wrapper li,
  #megaMenu .mega-list li{
    font-size: 0.85rem !important;   /* 🔽 küçültüldü */
    line-height: 1.25 !important;
    padding: 8px 10px !important;    /* daha kompakt */
  }

  /* Aktif olan (yeşil çerçeveli) */
  .categories-box li.active,
  .category-panel li.active{
    font-size: 0.85rem !important;   /* aynı kalsın, zıplama olmasın */
    font-weight: 700 !important;
  }
}
/* =========================
   FOOTER: Mobile-only responsive (no redesign)
   ========================= */
@media (max-width: 991.98px){

  /* genel footer spacing */
  footer{
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* kolonlar alt alta + aralık */
  footer .container-fluid > .row{
    row-gap: 18px;
  }

  /* logo: ortala, çok büyümesin */
  footer .footer-menu{
    text-align: center;
  }
  footer .footer-menu img{
    max-height: 150px !important;
    margin: 0 auto;
  }

  /* sosyal ikonlar taşmasın */
  footer .social-links ul{
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 0;
  }

  footer .social-links .btn{
    width: 38px;
    height: 38px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Harita: full width + düzgün oran + taşma engeli */
  footer .map-wrapper{
    max-width: 100% !important;
    width: 100%;
    overflow: hidden;
  }
  footer .map-wrapper .ratio{
    border-radius: 12px;
    overflow: hidden;
  }

  /* Adres & iletişim: satır aralığı + taşma engeli */
  footer p,
  footer li{
    line-height: 1.55;
    margin-bottom: 10px;
  }
  footer a{
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* CTA butonlar: taşma yapmasın, iki buton yan yana sığmıyorsa alta insin */
  footer .d-flex.flex-wrap.gap-2{
    gap: 10px !important;
  }
  footer .d-flex.flex-wrap.gap-2 .btn{
    white-space: normal;
    line-height: 1.2;
  }

  /* mobilde footer içi yatay padding biraz azalt */
  footer .container-fluid{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
/* =========================
   FOOTER: Mobile text scale down (safe)
   ========================= */
@media (max-width: 991.98px){

  /* Footer başlıkları */
  footer h5{
    font-size: 0.95rem !important;   /* ~15px */
    margin-bottom: 10px;
  }

  /* Paragraf ve adres metinleri */
  footer p{
    font-size: 0.8rem !important;    /* ~13px */
    line-height: 1.5;
  }

  /* Liste elemanları (telefon, mail vs) */
  footer li{
    font-size: 0.8rem !important;
    line-height: 1.5;
  }

  /* Linkler (telefon, mail) */
  footer a{
    font-size: 0.8rem !important;
  }

  /* CTA butonlar (Organizasyon Teklifi Al vs) */
  footer .btn{
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
  }
}
/* =========================
   FOOTER: Mobile CTA buttons inline + smaller + centered
   ========================= */
@media (max-width: 991.98px){

  /* Butonların olduğu kapsayıcıyı ortala */
  footer .col-lg-5 .d-flex.flex-wrap.gap-2{
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  /* Butonları biraz küçült */
  footer .col-lg-5 .d-flex.flex-wrap.gap-2 .btn{
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    min-width: auto !important;
  }
}
/* =========================
   FOOTER: Mobile CTA buttons FORCE inline
   ========================= */
@media (max-width: 991.98px){

  /* Buton kapsayıcı */
  footer .col-lg-5 .d-flex.flex-wrap.gap-2{
    display: flex !important;
    flex-wrap: nowrap !important;      /* 🔥 KIRILMA YOK */
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Butonlar */
  footer .col-lg-5 .d-flex.flex-wrap.gap-2 .btn{
    flex: 0 0 auto !important;          /* 🔥 %100 GENİŞLİK YOK */
    width: auto !important;
    min-width: auto !important;
    font-size: 0.78rem !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }
}
/* =========================
   FOOTER: Mobile CTA buttons a bit smaller
   ========================= */
@media (max-width: 991.98px){

  footer .col-lg-5 .d-flex.flex-wrap.gap-2{
    gap: 8px !important;                 /* biraz daha sık */
  }

  footer .col-lg-5 .d-flex.flex-wrap.gap-2 .btn{
    font-size: 0.72rem !important;       /* 🔽 yazı küçüldü */
    padding: 5px 10px !important;        /* 🔽 buton kısaldı */
    border-radius: 9px !important;       /* biraz daha zarif */
    line-height: 1.1 !important;
  }
}
/* =========================
   BANNER LAYOUT FIX (gap + alignment + remove blue bg)
   ========================= */

/* 1) Soldaki slider arkasındaki mavi: bg-info'yu ez */
.banner-ad.block-1,
.banner-ad.block-1.bg-info{
  background: transparent !important;
  background-color: transparent !important;
}

/* 2) Slider ve sağ bloklar arası boşluk */
.banner-blocks{
  gap: 18px;                 /* aradaki boşluk */
  align-items: stretch;
}

/* 3) Slider resimleri kutuyu tam doldursun (arkada renk kalmasın) */
.banner-ad.block-1 .swiper-slide{
  height: 630px;             /* desktop */
  display: flex;
}
.banner-ad.block-1 .swiper-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 4) Sağ indirim blokları hizalı dursun + bootstrap bg renklerini bastır */
.banner-ad.block-2,
.banner-ad.block-3{
  background-color: var(--premium-bordo) !important;  /* tutarlı zemin */
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 12px;
}

/* içeriği dikeyde ortalamak için */
.banner-ad.block-2 .banner-content,
.banner-ad.block-3 .banner-content{
  width: 100%;
  margin: 0;
  align-items: center;
}

/* tablet */
@media (max-width: 1140px){
  .banner-ad.block-1 .swiper-slide{ height: 420px; }
  .banner-blocks{ gap: 14px; }
}

/* mobile */
@media (max-width: 600px){
  .banner-ad.block-1 .swiper-slide{ height: 260px; }
  .banner-blocks{ gap: 12px; }
}
/* =========================
   RIGHT DISCOUNT IMAGE ALIGN FIX
   ========================= */

/* Sağdaki görseller: sağa yapışık ama dikeyde ORTALI */
#banner-block-2,
#banner-block-3{
  background-repeat: no-repeat !important;
  background-position: right 24px center !important; /* 🔥 bottom yerine center */
  background-size: auto 82% !important;              /* 🔥 yükseklik bazlı: hizası sabit */
}

/* Çok dar ekranlarda görsel taşmasın */
@media (max-width: 768px){
  #banner-block-2,
  #banner-block-3{
    background-position: right 12px center !important;
    background-size: auto 70% !important;
  }
}
/* =========================
   RIGHT BANNERS: 60% text / 40% image (contain)
   ========================= */

#banner-block-2,
#banner-block-3{
  display: grid !important;
  grid-template-columns: 60% 40%;   /* 🔥 SOL METİN / SAĞ GÖRSEL */
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: contain !important; /* 🔥 KESİLME YOK */
  align-items: center;
}

/* metin alanı taşmasın */
#banner-block-2 .content-wrapper,
#banner-block-3 .content-wrapper{
  max-width: 100%;
  z-index: 2;
}

/* desktop */
@media (min-width: 1200px){
  #banner-block-2,
  #banner-block-3{
    min-height: 300px;
  }
}

/* tablet */
@media (max-width: 1140px){
  #banner-block-2,
  #banner-block-3{
    min-height: 240px;
    background-size: contain !important;
  }
}

/* mobile: alt alta gelsin, görsel üste çıkmasın */
@media (max-width: 768px){
  #banner-block-2,
  #banner-block-3{
    grid-template-columns: 1fr;      /* tek kolon */
    background-position: center bottom !important;
    background-size: 70% !important;
    min-height: 220px;
  }
}
/* =========================
   MOBILE: Banner blocks fix (no shift / clean layout)
   ========================= */
@media (max-width: 768px){

  /* Banner grid: hepsi alt alta + boşluk */
  .banner-blocks{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 12px !important;
  }

  /* block sıraları */
  .block-1{ grid-area: auto !important; }
  .block-2{ grid-area: auto !important; }
  .block-3{ grid-area: auto !important; }

  /* kartların radius + taşma kontrolü */
  .banner-ad{
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  /* SOL SWIPER: yükseklik sabitle (kayma olmasın) */
  .banner-ad.block-1 .swiper-slide{
    min-height: 220px !important;
  }
  .banner-ad.block-1 .swiper-slide img{
    width: 100% !important;
    height: 220px !important;       /* 🔥 her slaytta aynı boy */
    object-fit: cover !important;   /* taşma yok */
    object-position: center !important;
    display: block !important;
  }

  /* pagination biraz yukarı */
  .banner-ad .swiper-pagination{
    bottom: 10px !important;
  }

  /* SAĞ İNDİRİM KARTLARI: mobilde tek kolon + görsel altta */
  #banner-block-2,
  #banner-block-3{
    grid-template-columns: 1fr !important;
    background-position: center bottom !important;
    background-size: 75% !important;
    min-height: 240px !important;
  }

  /* içerik padding (p-5 çok büyük geliyor) */
  #banner-block-2 .banner-content,
  #banner-block-3 .banner-content{
    padding: 18px !important;
  }

 
}
/* =========================
   MOBILE: Slider üstte full, indirimler altta yan yana
   ========================= */
@media (max-width: 768px){

  /* Banner alanını mobilde 2 satıra böl */
  .banner-blocks{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "slider slider"
      "b2 b3";
    gap: 12px !important;
  }

  /* Slider en üstte full genişlik */
  .block-1{
    grid-area: slider !important;
  }

  /* Sağdaki iki indirim kutusu altta yan yana */
  .block-2{
    grid-area: b2 !important;
  }
  .block-3{
    grid-area: b3 !important;
  }

  /* Slider yüksekliği mobilde mantıklı olsun */
  .banner-ad.block-1 .swiper-slide{
    min-height: 220px !important;
  }
  .block-1 .img-wrapper img,
  .banner-ad.block-1 img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* İndirim kartlarını küçült + düzenle */
  .banner-ad.block-2,
  .banner-ad.block-3{
    min-height: 170px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
  }

  /* İç padding küçülsün */
  .banner-ad.block-2 .banner-content,
  .banner-ad.block-3 .banner-content{
    padding: 14px !important;
  }
}
@media (max-width: 768px) {

  /* Banner genel yükseklik & flex */
  #banner-block-2,
  #banner-block-3 {
    min-height: auto;
    display: flex;
    align-items: flex-start; /* ortalama yerine yukarı al */
  }

  /* İç padding: aşırı boşluğu kır */
  #banner-block-2 .banner-content,
  #banner-block-3 .banner-content {
    padding: 18px !important;   /* p-5 etkisini tamamen kır */
  }

  /* Yazı bloğu genişliği */
  #banner-block-2 .content-wrapper,
  #banner-block-3 .content-wrapper {
    max-width: 100%;
  }

  /* 🔻 İNDİRİM YAZISI */
  #banner-block-2-discount,
  #banner-block-3-discount {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
    line-height: 1.1;
  }

  /* 🔻 BAŞLIK */
  #banner-block-2-title,
  #banner-block-3-title {
    margin-bottom: 8px !important;
    line-height: 1.15;
  }

  /* 🔻 ALIŞVERİŞ YAP (EN ÖNEMLİ KISIM) */
  #banner-block-2-link,
  #banner-block-3-link {
    font-size: 10px !important;   /* küçült */
    margin-top: 4px !important;
    gap: 4px;
  }

  #banner-block-2-link svg,
  #banner-block-3-link svg {
    width: 16px;
    height: 16px;
  }

  /* Görselin yazıyı boğmaması için */
  #banner-block-2,
  #banner-block-3 {
    background-size: contain;
    background-position: right bottom;
  }
}
@media (max-width: 768px) {

  #banner-block-2,
  #banner-block-3 {
    /* Kartın yüksekliği referans olsun */
    min-height: 260px;

    /* Görsel ayarları */
    background-size: cover;          /* yanlarda boşluk kalmaz */
    background-position: center bottom; /* alt kısma yasla */
    background-repeat: no-repeat;
  }

  /* Yazı alanı üstte kalsın */
  #banner-block-2 .banner-content,
  #banner-block-3 .banner-content {
    padding: 16px !important;
    padding-bottom: 90px !important; /* ⬅️ alt %40 için alan açıyoruz */
  }
}
@media (max-width: 768px) {

  /* Kart temel ayar */
  #banner-block-2,
  #banner-block-3 {
    min-height: 260px;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: relative; /* linki konumlandırmak için */
  }

  /* İçerik alanı */
  #banner-block-2 .banner-content,
  #banner-block-3 .banner-content {
    padding: 16px !important;
    padding-bottom: 110px !important; /* görsel + link için alan */
  }

  /* 🔸 İNDİRİM → BAŞLIK ARASI NEFES */
  #banner-block-2-discount,
  #banner-block-3-discount {
    margin-bottom: 12px !important; /* arttırıldı */
    padding-bottom: 0 !important;
    line-height: 1.1;
  }

  #banner-block-2-title,
  #banner-block-3-title {
    margin-bottom: 0 !important; /* link artık ayrı yerde */
    line-height: 1.15;
  }

  

  #banner-block-2-link svg,
  #banner-block-3-link svg {
    width: 16px;
    height: 16px;
  }
}
@media (max-width: 768px) {
  #banner-block-2-discount,
  #banner-block-3-discount {
    margin-bottom: 14px !important;
  }
}
@media (max-width: 768px) {
  #banner-block-2::after,
  #banner-block-3::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40%;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.12),
      rgba(0,0,0,0)
    );
    pointer-events: none;
  }
}
@media (max-width: 768px) {
  .main-swiper .swiper-pagination {
    bottom: 30px !important; /* varsayılan genelde 4–6px */
  }
}
/* =========================
   ABOUT (HAKKIMIZDA) - MOBILE FIX
   Bu bloğu style.css'in EN ALTINA koy
   ========================= */

/* Genel mobil spacing */
@media (max-width: 991.98px) {
  .about-parallax-premium {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  /* container kenar boşlukları */
  #hakkimizda .container-fluid {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Glass card padding küçült */
  #hakkimizda .glass-card-premium {
    padding: 18px !important;
    border-radius: 18px !important;
  }

  /* Üst başlık alanı */
  #hakkimizda .kicker {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
  }

  #hakkimizda .premium-title {
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin-bottom: 8px !important;
  }

  #hakkimizda .lead {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  /* Grid: sol içerik + sağ kolaj alt alta */
  #hakkimizda .row.g-4.align-items-stretch {
    --bs-gutter-x: 14px;
    --bs-gutter-y: 14px;
  }

  /* Sol taraftaki kartlar */
  #hakkimizda .info-card-premium {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  #hakkimizda .info-card-premium p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  /* Mini istatistikler: mobilde okunur */
  #hakkimizda .stat-tile {
    padding: 12px 10px !important;
    border-radius: 14px !important;
  }
  #hakkimizda .stat-tile .fs-3 {
    font-size: 20px !important;
    line-height: 1.1 !important;
  }
  #hakkimizda .stat-tile small {
    font-size: 11px !important;
  }

  /* CTA buton mobilde daha doğal */
  #hakkimizda .btn.btn-primary {
    width: 100% !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }

  /* Sağdaki kolaj: mobilde tek kolon (en sorunsuz) */
  #hakkimizda .gallery-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Figürlerin “garip” oran bozmasını engelle */
  #hakkimizda .gallery-grid figure {
    margin: 0 !important;
  }

  #hakkimizda .gallery-grid img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 16px !important;
  }

  /* Quote */
  #hakkimizda .premium-quote {
    margin-top: 16px !important;
    padding-top: 12px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  #hakkimizda .premium-quote span {
    display: block;
    margin-top: 6px;
    font-size: 12px !important;
    opacity: 0.9;
  }
}

/* Daha dar ekranlarda (çok küçük telefon) statlar 2'li aksın */
@media (max-width: 420px) {
  #hakkimizda .row.g-3.mt-1 {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
  }
  #hakkimizda .row.g-3.mt-1 > .col-4 {
    width: 50% !important;
  }
  #hakkimizda .row.g-3.mt-1 > .col-4:last-child {
    width: 100% !important;
  }
}
@media (max-width: 991.98px) {
  section .row .products-title {
    font-size: 18px;
    line-height: 1.3;

    /* 👇 boşluğu toparlayan kısım */
    margin-top: 0;
    margin-bottom: 12px;
  }
}
/* ✅ Sadece Sipariş Bilgileri sayfası (order-page) + sadece mobil */
@media (max-width: 991.98px) {
  .order-page .products-title {
    font-size: 18px;
    line-height: 1.25;
    margin-top: 0;
    margin-bottom: 10px; /* üst boşluğu toparlar */
  }

  /* kart başlıkları: "Müşteri Bilgileri", "Sipariş Özeti" */
  .order-page .card-body > h5,
  .order-page .card-title {
    font-size: 16px;
    margin-bottom: 10px;
  }

  /* label'lar */
  .order-page .form-label {
    font-size: 13px;
  }

  /* input/select/textarea yazıları */
  .order-page .form-control,
  .order-page .form-select,
  .order-page textarea.form-control {
    font-size: 14px;
  }

  /* yardımcı metinler */
  .order-page .form-text,
  .order-page .small {
    font-size: 12px;
  }

  /* sağ taraftaki özet satırları */
  .order-page #order-subtotal,
  .order-page #order-shipping,
  .order-page #order-grand-total,
  .order-page .d-flex.justify-content-between > span {
    font-size: 13px;
  }

  /* buton yazısı */
  .order-page #order-pay-btn {
    font-size: 14px;
  }
}
@media (max-width: 991.98px) {
  /* ✅ sadece Sipariş Bilgileri sayfası boşluk sıkıştırma */
  .order-page .card-body { padding: 16px !important; }

  .order-page .mb-3 { margin-bottom: 12px !important; }          /* form grupları */
  .order-page .mb-4 { margin-bottom: 14px !important; }          /* başlık satırı */

  .order-page .form-label { margin-bottom: 6px !important; }     /* label -> input arası */
  .order-page .form-control,
  .order-page .form-select {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .order-page .form-text {
    margin-top: 6px !important;                                  /* input altı açıklama */
    line-height: 1.35;
  }

  /* Kart başlıklarının alt boşluğunu da biraz kıs */
  .order-page .card-body > h5 { margin-bottom: 10px !important; }
}
/* ===============================
   urun.html — MOBİL küçültme
   (resim/zoom/thumbnail'a dokunmaz)
================================ */
@media (max-width: 991.98px) {

  /* sadece ürün sayfasının içerik alanı */
  .product-detail-section {
    padding-top: 24px !important;
    padding-bottom: 28px !important;
  }

  /* Breadcrumb biraz daha kompakt */
  .breadcrumb {
    font-size: 12px;
  }

  /* Ürün adı (h1) */
  #product-detail h1.h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
    margin-bottom: 8px !important;
  }

  /* Kategori chip’leri */
  #product-detail .badge {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  /* Fiyat alanı */
  #product-detail #price-wrap .fs-4 {
    font-size: 18px !important;
  }
  #product-detail #price-wrap .text-muted {
    font-size: 12px !important;
  }
  #product-detail #price-wrap .badge.bg-danger {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }

  /* Adet input + butonlar (Sepete Ekle) */
  #product-detail .input-group.input-group-sm {
    max-width: 124px !important;
  }
  #product-detail .input-group-sm .btn {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }
  #product-detail .input-group-sm .form-control {
    padding: 6px 8px !important;
    font-size: 13px !important;
  }

  #product-detail #btnAdd {
    padding: 7px 12px !important;
    font-size: 13px !important;
  }

  /* Açıklama başlığı + metin */
  #product-detail h6 {
    font-size: 13px !important;
    margin-bottom: 6px !important;
  }
  #product-detail p.text-muted {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  /* İlgili ürünler başlığı */
  .product-detail-section h4 {
    font-size: 16px !important;
    margin-bottom: 10px !important;
  }

  /* İlgili ürün kart yazıları (resme dokunmuyoruz) */
  #related-grid .content {
    padding: 10px 10px !important;
  }
  #related-grid .category-chip {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  #related-grid .product-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }
  #related-grid .small,
  #related-grid .small .fw-semibold,
  #related-grid .small .text-muted {
    font-size: 12px !important;
  }
}

/* Yan menü açılınca sayfa içerikleri üste çıkmasın (mobil) */
@media (max-width: 991.98px) {
  /* Offcanvas’ı en üste al */
  #offcanvasNavbar.mobile-nav-offcanvas,
  #offcanvasNavbar.offcanvas {
    z-index: 2000 !important;
  }


  /* Menünün içi kesin opak olsun (alttaki breadcrumb görünmesin) */
  #offcanvasNavbar .offcanvas-header,
  #offcanvasNavbar .offcanvas-body {
    background: #6b2228 !important; /* senin bordo tona yakın */
  }
}
/* ✅ Offcanvas açılınca sayfa içeriği üste çıkmasın (ultimate fix) */
@media (max-width: 991.98px) {
  /* Offcanvas kesin en üstte */
  #offcanvasNavbar,
  #offcanvasNavbar.offcanvas,
  #offcanvasNavbar.offcanvas-start,
  #offcanvasNavbar.offcanvas.show {
    position: fixed !important;
  }


  /* Offcanvas içi kesin opak olsun (alttaki breadcrumb görünmesin) */
  #offcanvasNavbar .offcanvas-header,
  #offcanvasNavbar .offcanvas-body {
    background: #6b2228 !important; /* senin bordo */
  }

  /* ⚠️ Breadcrumb / üst section gibi şeyler z-index basıyorsa mobilde sıfırla */
  .breadcrumb,
  #breadcrumb,
  section.py-3.bg-light,
  section.py-3.bg-light * {
    position: relative !important;
    z-index: 0 !important;
  }
}
/* About sağ görsel: sol kolon yüksekliğini doldursun */
#hakkimizda .gallery-grid,
#hakkimizda .gallery-a {
  height: 100%;
}

#hakkimizda .gallery-a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#hakkimizda .gallery-grid{
  display: flex;
  width: 100%;
}

#hakkimizda .gallery-a{
  flex: 1;
  height: 100%;
}

#hakkimizda .gallery-a img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#hakkimizda .gallery-a{
  flex: 1;
  height: 100%;
  max-height: 480px; /* burayı 380-480 arası dene */
}
/* Hakkımızda – mobilde sadece görseli düzelt */
@media (max-width: 991.98px) {
  #hakkimizda .gallery-a {
    max-height: 280px;      /* 240–320 arası oynayabilirsin */
  }

  #hakkimizda .gallery-a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@media (max-width: 991.98px) {
  /* Mobilde resim alanı kadar yer kaplasın */
  #hakkimizda .gallery-grid {
    display: block;
  }

  #hakkimizda .gallery-a {
    height: auto !important;
    max-height: none !important;
    flex: none !important;
  }

  #hakkimizda .gallery-a img {
    height: auto;
    display: block;
  }
}
@media (max-width: 991.98px) {
  #hakkimizda .gallery-a,
  #hakkimizda .gallery-a img {
    height: auto !important;
  }
}
/* =========================
   ÜRÜN SAYFASI KREM TEMA
   ========================= */
:root{
  --cream: #F7F4EF; /* istediğin krem tonu */
  --cream-2: #F3EEE6; /* istersen ikinci ton */
}

/* Breadcrumb bar (üstteki beyaz şerit) */
.breadcrumb-section,
section.py-3.bg-light{
  background: var(--cream) !important;
}

/* Ürün detayındaki sol görsel kutusunun arka planı (beyaz görünen yer) */
.product-detail-section .zoom-box.bg-light{
  background: var(--cream) !important;
}

/* Sağdaki ürün info paneli (beyaz kart) */
.product-detail-section #product-detail > .col-md-6:nth-child(2){
  background: var(--cream) !important;
  border-radius: 18px; /* ekrandaki gibi */
  padding: 28px;       /* ekrandaki gibi */
}

/* Sol taraftaki görsel kutusunun dış sarmalı da krem olsun (beyaz çerçeve hissi varsa) */
.product-detail-section #product-detail > .col-md-6:nth-child(1) .ratio{
  background: var(--cream) !important;
  border-radius: 18px;
}

/* Badge’lerde bg-light kullandığın chipler (Bukletler / Mevsim Buketi gibi) */
.product-detail-section .badge.bg-light{
  background: var(--cream) !important;
  border-color: rgba(0,0,0,.08) !important;
}

/* Desktop üst arama barı da bg-light -> krem */
.search-bar.bg-light{
  background: var(--cream) !important;
}

/* İlgili ürünler alanındaki genel beyazlıklar varsa */
.product-detail-section .product-card{
  background: var(--cream) !important;
}

/* Mobil offcanvas (arama) tıklama engeli fix */

/* Bootstrap default: backdrop 1040, offcanvas 1045
   Biz bu sırayı kesinleştiriyoruz */
.offcanvas-backdrop {
  z-index: 1040 !important;
}

.offcanvas {
  z-index: 1045 !important;
}

/* Search offcanvas'ı biraz daha yukarı al (üstteki header vs karışmasın) */
#offcanvasSearch {
  z-index: 1060 !important;
}

/* Offcanvas içi kesin tıklanabilir olsun */
#offcanvasSearch .offcanvas-header,
#offcanvasSearch .offcanvas-body {
  position: relative;
  z-index: 1061 !important;
}

/* ===============================
   Empty state (Ürün bulunamadı) — FIX
   row-cols-* içinde dar kalmasın
================================ */

/* grid içindeki col-12 gerçekten 100% olsun */
.product-grid > .col-12{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* yazı bloğunu ortalı ve geniş yap */
.product-grid > .col-12 > .text-center.py-5.text-muted{
  width: 100% !important;
  max-width: 640px;
  margin: 24px auto !important;

  /* premium görünüm */
  background: #F7F4EF;
  border-radius: 18px;
  padding: 44px 22px !important;
  color: #6b2228 !important;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* İkonu daha premium yap, sola yapışmasın */
.product-grid > .col-12 > .text-center.py-5.text-muted::before{
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;

  /* altın tonlu küçük ikon hissi */
  background: radial-gradient(circle at 30% 30%, rgba(230,196,120,.55), rgba(230,196,120,.12));
  border: 1px solid rgba(230,196,120,.45);
  border-radius: 999px;
}

/* Mobil biraz daha kompakt */
@media (max-width: 768px){
  .product-grid > .col-12 > .text-center.py-5.text-muted{
    max-width: 92%;
    padding: 34px 16px !important;
    font-size: 14px;
  }
}

#product-grid.row-cols-2 > .empty-col,
#product-grid.row-cols-3 > .empty-col,
#product-grid.row-cols-4 > .empty-col {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}


#product-grid > .col-12 > .text-center.py-5.text-muted {
  width: 100% !important;
  max-width: 680px;
  margin: 28px auto !important;

  background: #F7F4EF;
  border: 1px solid rgba(230, 196, 120, .35);
  border-radius: 18px;
  padding: 44px 22px !important;

  color: #6b2228 !important;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

#product-grid > .col-12 > .text-center.py-5.text-muted::before{
  content: "🔍";
  display: block;
  font-size: 28px;
  margin-bottom: 12px;
  opacity: .6;
}