/* ============================================================================
   Depo teması — tasarım katmanı
   themes/depo/_design/style.css referans alınarak yazıldı.
   Bootstrap ve store.css'ten SONRA yüklenir; bileşenleri depo diline çevirir.
   Renk/tipografi token'ları layout.php içinde tema ayarlarından basılır.
   ========================================================================== */

/* ───────────────────────────────────────────────────────── temel ─── */
body.depo {
  margin: 0;
  background: linear-gradient(180deg, #fff 0, var(--d-bg) 780px);
  color: var(--d-ink);
  font-family: var(--d-font-body);
  font-size: 14px;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
}
/* Sıfırlama :where() ile özgüllüksüz: `body.depo h1` (0,1,1) tek sınıflı şablon
   kurallarını (.account-page-title, .blog-show-title gibi) yeniyor ve serif
   başlıkları gövde yazı tipine düşürüyordu. */
:where(body.depo) h1, :where(body.depo) h2,
:where(body.depo) h3, :where(body.depo) h4 { font-family: var(--d-font-body); }
.depo .d-serif,
.depo .hero-copy h1,
.depo .tile h2,
.depo .wide-banner h2,
.depo .shop-band h2,
.depo .drawer-title { font-family: var(--d-font-head); font-weight: 500; }

:where(.depo) a { color: inherit; text-decoration: none; }
/* Sıfırlama :where() ile özgüllüksüz: tek sınıflı şablon kuralları
   (.sh-refine-submit gibi) rengi kendileri belirleyebilsin. Aksi hâlde
   `.depo button` (0,1,1) onları yeniyor ve yazı zemine karışıyordu. */
:where(.depo) button { cursor: pointer; color: inherit; font: inherit; }
/* critical.css sayfaya satır içi gömülüyor ve `nav{background:#fff;box-shadow:…}`
   taşıyor. Kırıntı yolu gibi içerik içindeki <nav> öğeleri bu yüzden gövdeye
   ince bir çizgi çiziyordu. Sıfırlama özgüllüksüz: .site-nav kendi zeminini
   yine kendisi belirliyor. */
:where(.depo) nav { background: none; box-shadow: none; }
.depo button:focus-visible, .depo a:focus-visible,
.depo input:focus-visible, .depo select:focus-visible {
  outline: 2px solid var(--d-gold); outline-offset: 3px;
}
.depo img { max-width: 100%; }

/* Ortak genişlik — tasarımdaki .wrap */
.depo .d-wrap { width: min(1240px, 92%); margin-inline: auto; }
@media (max-width: 760px) { .depo .d-wrap { width: 93%; } }

/* Bootstrap konteyner taşmalarını depo genişliğine çek */
.depo main > .container,
.depo main > .container-fluid { width: min(1240px, 92%); max-width: none; margin-inline: auto; padding-inline: 0; }
/* Geniş ekranda yan boşluğu bu kural belirler; layout konteyneri px-lg-5
   taşıdığı ve Bootstrap onu !important yazdığı için bayrak şart. Bayraksız
   hâlde iç sayfalar başlık/menü hizasından 48px içeride başlıyordu.
   Dar ekranda dokunulmuyor: oradaki boşluğu px-3/px-sm-4 veriyor ve
   sıfırlanırsa içerik ekran kenarına yapışıyor. */
@media (min-width: 992px) {
  .depo main > .container,
  .depo main > .container-fluid { padding-inline: 0 !important; }
}

/* ──────────────────────────────────────────────────── üst şerit ─── */
.depo .topstrip {
  background: var(--d-topstrip-bg);
  color: var(--d-topstrip-color);
  font-size: var(--d-topstrip-size);
  border-bottom: 1px solid #bda57055;
}
.depo .topstrip-row {
  height: var(--d-topstrip-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.depo .topstrip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depo .topstrip-selects { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.depo .topstrip-selects form { margin: 0; }
.depo .topstrip-selects select {
  appearance: none; background: none; border: 0; color: inherit;
  font-size: inherit; padding: 2px 4px; cursor: pointer;
}
.depo .topstrip-divider { width: 1px; height: 11px; background: #888; margin: 0 12px; }
@media (max-width: 760px) { .depo .topstrip { display: none; } }

/* ───────────────────────────────────────────────────────── başlık ─── */
.depo .site-header {
  background: #fff;
  border-bottom: 1px solid var(--d-line);
  box-shadow: 0 10px 35px #15120d0a;
  position: relative; z-index: 1040;
}
.depo .site-header.is-sticky { position: sticky; top: 0; }
.depo .header-row {
  height: var(--d-header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 38px;
}

/* Logo — yazı logosu tasarımdaki gibi */
.depo .brand { position: relative; flex-shrink: 0; display: inline-flex; align-items: center; }
.depo .brand img { height: var(--d-logo-h); width: auto; display: block; }
.depo .brand-word {
  font-family: var(--d-font-body); font-weight: 800; font-size: 37px;
  letter-spacing: -2.7px; white-space: nowrap; line-height: 1;
}
.depo .brand-word span { font-weight: 400; }
.depo .brand-word sup {
  font: 12px Arial, sans-serif; vertical-align: top; display: inline-block;
  margin: 10px 0 0 5px; letter-spacing: 0;
}

/* Arama — hap biçimli */
.depo .header-search { flex: 1; max-width: 650px; min-width: 0; position: relative; }
.depo .header-search form {
  display: flex; align-items: center; height: 50px;
  background: #f6f5f2; border: 1px solid #ddd8ce; border-radius: 999px;
  padding-left: 5px; transition: border-color .2s, box-shadow .2s;
}
.depo .header-search form:focus-within {
  border-color: var(--d-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--d-gold) 12%, transparent);
}
.depo .header-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: 14px 18px; font-size: 13px; color: #222;
}
.depo .header-search input::placeholder { color: #908e87; }
.depo .header-search button[type="submit"] {
  width: 40px; height: 40px; margin-right: 5px; padding: 0; flex-shrink: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--d-dark); color: #fff; transition: transform .2s, background .2s;
}
.depo .header-search button[type="submit"]:hover { background: var(--d-gold); transform: scale(1.04); }
.depo .header-search svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Sağdaki aksiyon butonları */
/* Mobil başlık düğmeleri — masaüstünde gizli */
.depo .header-burger, .depo .header-searchbtn { display: none; }

.depo .header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.depo .header-action {
  height: 48px; min-width: 108px; padding: 7px 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid #e4dfd6; border-radius: 999px; background: #fff;
  font-size: 11px; font-weight: 600; white-space: nowrap; position: relative;
  transition: border-color .2s, background .2s, transform .2s;
}
.depo .header-action:hover { background: #f5f1e9; border-color: #cbb991; transform: translateY(-1px); }
.depo .header-action svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; flex-shrink: 0; }
.depo .header-action .badge-count {
  position: absolute; top: 4px; right: 8px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px;
  background: var(--d-dark); color: #fff; border: 2px solid #fff;
  font-size: 9px; font-weight: 700; display: grid; place-items: center;
}
.depo .header-action.is-icon { min-width: 48px; width: 48px; padding: 0; }

/* ─────────────────────────────────────────────────────────── menü ─── */
.depo .site-nav { background: #fff; border-top: 1px solid #eeeae3; border-bottom: 1px solid var(--d-line); }
.depo .site-nav-row {
  display: flex; align-items: center; gap: 27px;
  height: var(--d-nav-h); overflow-x: auto; white-space: nowrap;
  scrollbar-width: none;
}
.depo .site-nav-row::-webkit-scrollbar { display: none; }
.depo .site-nav-row > a, .depo .site-nav-row > button {
  border: 0; background: none; padding: 10px 0;
  font-size: var(--d-nav-size); color: var(--d-ink); flex-shrink: 0;
  transition: color .15s;
}
.depo .site-nav-row > a:hover, .depo .site-nav-row > button:hover { color: var(--d-gold); }
.depo .nav-all {
  display: inline-flex; align-items: center; gap: 12px;
  padding-right: 25px; border-right: 1px solid var(--d-line); font-weight: 700;
}
.depo .nav-all svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.65; }
.depo .nav-feature {
  margin-left: auto; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #f5f1e8, #ebe2cf);
  border: 1px solid #d8c59e; color: #594521;
  padding: 7px 12px; border-radius: 3px;
}
.depo .nav-feature:hover { color: #594521; }
@media (max-width: 991.98px) { .depo .site-nav { display: none; } }

/* Ortak ikon boyutu */
.depo .ui-icon {
  width: 17px; height: 17px; display: inline-block; vertical-align: middle;
  fill: none; stroke: currentColor; stroke-width: 1.65;
  stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto;
}

/* ───────────────────────────────────────────────────────── buton ─── */
.depo .d-btn {
  display: inline-flex; align-items: center; gap: 22px;
  min-height: 42px; padding: 12px 17px;
  border: 0; border-radius: 3px;
  background: var(--d-dark); color: #fff;
  font-size: 13px; font-weight: 600;
  transition: transform .2s, background .2s, box-shadow .2s;
}
.depo .d-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px #0002; background: #ece7dc; color: var(--d-dark); }
.depo .d-btn.white { background: #fff; color: #191919; }
.depo .d-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ──────────────────────────────────────────────────────── vitrin ─── */
.depo main { padding-top: 21px; }
/* Slider içerik genişliğini tek başına kaplar (yanındaki dörtlü kartlar kaldırıldı).
   Yükseklik genişlikle ölçeklenir, Tema Ayarları'ndaki değer üst sınırdır. */
.depo .promos { height: clamp(360px, 37vw, var(--d-hero-h)); }
.depo .hero {
  position: relative; height: 100%; min-height: 0;
  background: #171815; border-radius: var(--d-radius); overflow: hidden; color: #fff;
  box-shadow: 0 20px 55px #16120c24;
}
.depo .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.depo .hero-slide.is-active { opacity: 1; }
.depo .hero-slide > img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.depo .hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* Geniş kutuda karartma yalnızca metnin durduğu sol bölümü kaplar; görsel sağda açık kalır */
  background: linear-gradient(90deg, #090a08e8 0, #090a08a6 30%, transparent 62%),
              linear-gradient(0deg, #05060555, transparent 42%);
}
.depo .hero.hairline::before {
  content: ''; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  border: 1px solid #dfca8b55; border-radius: 3px;
}
.depo .hero-copy {
  position: absolute; top: 0; bottom: 32px; left: 64px; right: 44px; max-width: 600px; z-index: 3;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.depo .hero-copy h1 { font-size: 56px; line-height: 1.02; letter-spacing: -1.2px; margin: 17px 0 15px; text-shadow: 0 2px 20px #0009; }
.depo .hero-copy p { font-size: 15px; line-height: 1.7; color: #dfdfd9; margin: 0 0 23px; max-width: 460px; }
.depo .overline { font-size: 10px; letter-spacing: 2px; font-weight: 600; color: #e4d0a0; }

.depo .hero-controls {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  background: #13140fbf; border-top: 1px solid #ffffff20; padding: 0 12px;
}
.depo .hero-controls > span { font-size: 9px; letter-spacing: 2px; color: #a3a49b; }
.depo .hero-controls button {
  background: none; border: 0; color: #ccc; width: 33px; height: 32px; font-size: 13px;
  display: inline-grid; place-items: center;
}
.depo .hero-controls button.is-active { background: #e8dfc5; color: #111; }
.depo .hero-dots { display: flex; }

/* ──────────────────────────────────────────── kategori kutuları ─── */
.depo .tiles {
  display: grid; grid-template-columns: repeat(var(--d-tiles-cols), minmax(0, 1fr));
  gap: 15px; margin-top: 28px;
}
/* Karartma alttan verilir: açık ya da koyu her görselde yazı aynı okunur (soldan
   verilen degrade açık görsellerde sağ yarıyı beyaz bırakıyordu). Yazı alt köşede,
   çerçeve ve kutulu düğme yok; bağlantı metin + ok. */
.depo .tile {
  position: relative; display: block; height: var(--d-tiles-h); isolation: isolate;
  border: 0; border-radius: var(--d-radius); background: #1d1e1a; overflow: hidden;
  padding: 0; color: #fff; text-align: left; text-decoration: none;
  box-shadow: 0 1px 2px #21180e14, 0 12px 30px -14px #21180e40;
  transition: transform .35s ease, box-shadow .35s ease;
}
.depo .tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.depo .tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, #0b0c0a10 0%, #0b0c0a33 42%, #0b0c0ad9 100%);
  transition: background .35s;
}
.depo .tile:hover { transform: translateY(-3px); box-shadow: 0 1px 2px #21180e14, 0 22px 40px -16px #21180e5c; }
.depo .tile:hover img { transform: scale(1.06); }
.depo .tile > span {
  position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start;
}
.depo .tile h2 {
  font-size: 27px; line-height: 1.1; letter-spacing: .6px; margin: 0 0 6px; color: #fff;
  text-shadow: 0 1px 12px #0008; overflow-wrap: anywhere;
}
.depo .tile p { font-size: 13px; max-width: 280px; line-height: 1.5; margin: 0 0 14px; color: #e9e5da; }
.depo .tile b {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px;
  font-size: 10.5px; letter-spacing: 1.6px; font-weight: 600; text-transform: uppercase; color: #f1e6c8;
  background: linear-gradient(currentColor, currentColor) 0 100% / 28px 1px no-repeat;
  transition: background-size .35s ease, color .2s;
}
.depo .tile:hover b { background-size: 100% 1px; color: #fff; }
.depo .tile b .ui-icon { width: 14px; height: 14px; transition: transform .3s ease; }
.depo .tile:hover b .ui-icon { transform: translateX(3px); }

/* ────────────────────────────────────────────────── ürün bölümü ─── */
.depo .product-section { margin-top: 46px; }
.depo .section-heading {
  position: relative; display: flex; align-items: center; gap: 15px;
  border-bottom: 1px solid #d9d3c8; padding-bottom: 16px; margin-bottom: 18px;
}
.depo .section-heading::after {
  content: ''; position: absolute; bottom: -1px; left: 0; width: 72px; height: 2px; background: var(--d-gold);
}
.depo .section-heading h2 { font-size: 22px; font-weight: 700; letter-spacing: -.6px; margin: 0; }
.depo .section-heading > span { font-size: 12px; color: var(--d-muted); }
.depo .section-heading .section-cta {
  margin-left: auto; border: 0; background: none; padding: 5px 0; font-size: 12px;
  display: inline-flex; align-items: center; gap: 7px;
}
.depo .section-heading .section-cta .ui-icon { width: 14px; height: 14px; }

.depo .catalog-controls { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.depo .catalog-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.depo .catalog-tabs::-webkit-scrollbar { display: none; }
.depo .catalog-tabs a, .depo .catalog-tabs button {
  border: 1px solid #e3e3e3; background: #fff; border-radius: 4px;
  padding: 8px 12px; white-space: nowrap; font-size: 12px; flex-shrink: 0;
}
.depo .catalog-tabs .is-active { color: #fff; background: #1b1b1b; border-color: #1b1b1b; }
.depo .catalog-controls select {
  font-size: 12px; border: 1px solid var(--d-line); background: #fff; border-radius: 4px; padding: 7px;
}

/* ──────────────────────────────────────────────────── ürün kartı ─── */
.depo .product-grid {
  display: grid; grid-template-columns: repeat(var(--d-card-cols), minmax(0, 1fr)); gap: 18px;
}
/* Kategori ve arama ızgarası solda filtre sütunuyla paylaşıldığı için ayrı sayıda
   sütun kullanır; değeri Tema Ayarları → Ürün Kartı'ndan gelir. */
@media (min-width: 992px) {
  .depo .product-grid[data-inf-grid] {
    grid-template-columns: repeat(var(--d-card-cols-list), minmax(0, 1fr)) !important;
  }
}
.depo .product-card {
  position: relative; min-width: 0; background: #fff;
  border: 1px solid #e3ded5; border-radius: var(--d-radius); overflow: hidden;
  box-shadow: 0 8px 25px #1d160c0a; transition: box-shadow .2s, transform .2s;
}
.depo .product-card:hover { box-shadow: 0 18px 42px #1d160c1c; transform: translateY(-3px); }
.depo .product-image {
  display: block; position: relative; width: 100%; aspect-ratio: var(--d-card-ratio);
  background: #edeae4; border: 0; padding: 0; overflow: hidden;
}
.depo .product-image img { width: 100%; height: 100%; object-fit: var(--d-card-fit); transition: transform .5s; }
.depo .product-image::after { content: ''; position: absolute; inset: 0; border: 1px solid #fff8; pointer-events: none; }
.depo .product-image:hover img { transform: scale(1.035); }
.depo .product-card .tag {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  background: #fff; color: #5f4a26; border: 1px solid #d9c59c; border-radius: 3px;
  padding: 5px 7px; font-size: 9px; font-weight: 600; letter-spacing: .5px;
  box-shadow: 0 4px 12px #0000000d;
}
.depo .product-card .favorite {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  width: 29px; height: 29px; padding: 0; display: grid; place-items: center;
  border: 1px solid #e5ded2; border-radius: 50%; background: #ffffffec; color: #222;
  box-shadow: 0 4px 13px #0000000d;
}
.depo .product-card .favorite .ui-icon { width: 18px; height: 18px; }
.depo .product-card .favorite.on .ui-icon { fill: #9e3f32; stroke: #9e3f32; }
.depo .product-bottom { position: relative; padding: 16px 13px 15px; }
.depo .product-bottom small { color: #9a7e4e; letter-spacing: .8px; text-transform: uppercase; font-size: 9px; }
.depo .product-bottom h3 { font-size: 14px; line-height: 1.5; font-weight: 600; margin: 6px 0 12px; min-height: 44px; }
.depo .product-bottom .price { font-size: 14px; font-weight: 700; }
.depo .product-bottom .price-old { font-size: 12px; color: var(--d-muted); text-decoration: line-through; margin-right: 6px; font-weight: 500; }
.depo .product-bottom .add {
  position: absolute; right: 10px; bottom: 10px;
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 4px; color: #fff;
  background: linear-gradient(145deg, #2a2926, #0e0e0d); box-shadow: 0 6px 14px #0002;
}
.depo .product-bottom .add svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ─────────────────────────────────────────────────── geniş banner ─── */
.depo .wide-banner {
  position: relative; height: var(--d-banner-h); margin-top: 36px; overflow: hidden;
  background: #171715; border-radius: var(--d-radius); color: #fff;
  box-shadow: 0 18px 48px #1c140c21;
}
.depo .wide-banner > img { position: absolute; right: 0; top: 0; width: 70%; height: 100%; object-fit: cover; object-position: center 65%; }
.depo .wide-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #141512 22%, transparent 100%); }
.depo .wide-banner.hairline::before {
  content: ''; position: absolute; inset: 12px; z-index: 2; pointer-events: none; border: 1px solid #e5d4a755;
}
.depo .wide-banner > div { position: relative; z-index: 3; padding: 33px 40px; }
.depo .wide-banner h2 { font-size: 40px; margin: 13px 0 9px; text-shadow: 0 2px 20px #0009; }
.depo .wide-banner p { font-size: 13px; color: #d4d4cc; margin: 0 0 19px; }

/* ──────────────────────────────────────────────────── mağaza bandı ─── */
.depo .shop-band {
  display: flex; align-items: center; gap: 60px;
  margin: 52px 0 42px; padding: 32px 35px;
  background: linear-gradient(100deg, #fff, #f3eee4);
  border: 1px solid #ddd3c0;
}
.depo .shop-band .brand-word { font-size: 25px; }
.depo .shop-band h2 { font-size: 27px; line-height: 1.3; margin: 8px 0 0; }
.depo .shop-band p { flex: 1; max-width: 500px; color: #6c6c6c; font-size: 14px; line-height: 1.8; margin: 0; }
.depo .shop-band a {
  margin-left: auto; white-space: nowrap; font-size: 13px; padding-bottom: 6px;
  color: #67502a; border-bottom: 1px solid #9d8251;
  display: inline-flex; align-items: center; gap: 7px;
}
.depo .shop-band a .ui-icon { width: 14px; height: 14px; }

/* ───────────────────────────────────────────────────────── footer ─── */
.depo .site-footer {
  background: var(--d-footer-bg); border-top: 2px solid var(--d-footer-border);
  padding: 44px 0 20px; margin-top: 48px;
  /* store.css koyu zeminli footer için açık gri bir metin rengi miras bırakıyor;
     depo footer'ı beyaz zeminli olduğu için renk burada geri alınır. */
  color: var(--d-ink);
}
.depo .site-footer .brand,
.depo .site-footer .brand-word { color: var(--d-ink); }

/* Marka bloğu sabit bir sütun, bağlantı sütunları kalan alanı eşit paylaşır.
   Sütun sayısı Tema Ayarları → Footer'dan geldiği için ızgara sayıya göre esner. */
.depo .footer-columns {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 30px 44px;
}
.depo .footer-columns > div { min-width: 0; }
.depo .footer-columns > div:first-child { flex: 1 1 260px; max-width: 330px; }
.depo .footer-columns > div + div { flex: 1 1 140px; max-width: 240px; }

/* İlk satır hizası: sütun başlıkları logonun optik ortasıyla aynı çizgide dursun */
.depo .footer-columns > div + div { padding-top: 6px; }
.depo .footer-columns h3 {
  font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--d-footer-title); margin: 0 0 16px; font-weight: 700;
}
.depo .footer-columns p {
  font-size: 13px; color: var(--d-footer-text); line-height: 1.75; margin: 14px 0 0; max-width: 30ch;
}
.depo .footer-columns a:not(.brand) {
  display: block; width: fit-content; font-size: 12.5px; color: var(--d-footer-text);
  margin-bottom: 10px; text-align: left; line-height: 1.5;
}
.depo .footer-columns a:not(.brand):last-child { margin-bottom: 0; }
.depo .footer-columns a:not(.brand):hover { color: var(--d-gold); }
.depo .footer-social { display: flex; gap: 9px; margin-top: 18px; }
.depo .footer-social a {
  width: 34px; height: 34px; margin: 0; display: grid; place-items: center;
  border: 1px solid var(--d-line); border-radius: 50%; color: var(--d-ink);
}
.depo .footer-social a:hover { border-color: var(--d-gold); color: var(--d-gold); }
.depo .footer-payments { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.depo .footer-payments .pay-card {
  width: 42px; height: 28px; border: 1px solid var(--d-line); border-radius: 3px;
  overflow: hidden; background: #fff;
}
.depo .footer-payments .pay-card svg { width: 100%; height: 100%; display: block; }
.depo .footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  background: none; border: 0; border-top: 1px solid var(--d-line);
  margin-top: 34px; padding: 18px 0 0;
  font-size: 11.5px; color: var(--d-footer-text); letter-spacing: .2px;
}
.depo .footer-bottom a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--d-footer-text); margin-left: auto;
}
.depo .footer-bottom a:hover { color: var(--d-gold); }
.depo .footer-bottom a .ui-icon { width: 14px; height: 14px; }

/* ─────────────────────────────────────────────── mobil alt menü ─── */
.depo .mobile-bottom-nav { display: none; }
@media (max-width: 991.98px) {
  .depo .mobile-bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; height: 68px;
    padding: 7px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
    background: #fff; border-top: 1px solid var(--d-line);
    box-shadow: 0 -10px 30px #24190e12;
  }
  .depo .mobile-bottom-nav a, .depo .mobile-bottom-nav button {
    position: relative; height: 56px; border: 0; background: none; padding: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    color: #8b857a; font-size: 9.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
    transition: color .15s;
  }
  .depo .mobile-bottom-nav .ui-icon, .depo .mobile-bottom-nav svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.6; }

  /* Arama, taşan bir daire olarak çiziliyordu; etiketi de butonun dışına
     `top:53px` ile itilmişti — satır yüksekliği değişince kayıyordu. Artık
     diğer dördüyle aynı hizada, vurgusu yalnızca renkten geliyor. */
  .depo .mobile-bottom-nav .nav-search {
    width: auto; height: 56px; margin: 0; border-radius: 0;
    background: none; color: inherit; box-shadow: none;
  }
  .depo .mobile-bottom-nav .nav-search span { position: static; top: auto; color: inherit; }

  /* Bulunulan sayfa: koyu yazı + etiketin altında küçük nokta */
  .depo .mobile-bottom-nav .is-active { color: var(--d-ink); }
  .depo .mobile-bottom-nav .is-active::after {
    content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--d-ink);
  }

  .depo .mobile-bottom-nav .badge-count {
    position: absolute; top: 4px; left: calc(50% + 6px);
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px;
    background: var(--d-dark); color: #fff; border: 2px solid #fff;
    font-size: 8px; font-weight: 700; display: grid; place-items: center;
  }
  body.depo.has-bottom-nav { padding-bottom: 76px; }
}

/* ─────────────────────────────────────────────────── responsive ─── */
@media (max-width: 1100px) and (min-width: 992px) {
  .depo .header-row { gap: 20px; }
  .depo .header-search { max-width: none; }
  .depo .header-actions { gap: 7px; }
  .depo .header-action { min-width: 44px; width: 44px; padding: 0; }
  .depo .header-action > .label { display: none; }
  .depo .hero-copy { left: 40px; }
  .depo .hero-copy h1 { font-size: 46px; }
  .depo .tile h2 { font-size: 23px; }
  .depo .product-grid { gap: 12px; }
}

@media (max-width: 991.98px) {
  body.depo { background: linear-gradient(180deg, #fff 0, var(--d-bg) 600px); }
  .depo .site-header { position: sticky; top: 0; z-index: 1030; box-shadow: 0 7px 25px #21180e16; }
  .depo .brand img { height: var(--d-logo-h-mobile); }
  .depo .brand-word { font-size: 27px; letter-spacing: -2px; }

  .depo main { padding-top: 12px; }
  .depo .promos { display: block; height: auto; overflow: visible; }
  .depo .hero { height: var(--d-hero-h-mobile); min-height: var(--d-hero-h-mobile); }
  .depo .hero-slide > img { object-position: 64% center; }
  .depo .hero-copy { top: 31px; bottom: auto; left: 22px; right: 20px; max-width: none; display: block; }
  .depo .hero-copy h1 { font-size: 40px; line-height: .98; margin: 14px 0 12px; }
  .depo .hero-copy p { font-size: 12px; line-height: 1.55; margin-bottom: 16px; max-width: 215px; }
  .depo .hero-copy .d-btn { min-height: 38px; padding: 10px 14px; font-size: 11px; gap: 12px; }
  .depo .hero-controls { height: 38px; }

  .depo .tiles {
    grid-template-columns: repeat(var(--d-tiles-cols-mobile), minmax(0, 1fr));
    gap: 9px; margin-top: 18px;
  }
  .depo .tile { height: 196px; }
  .depo .tile:hover { transform: none; }
  .depo .tile > span { left: 16px; right: 14px; bottom: 15px; }
  .depo .tile h2 { font-size: 20px; margin-bottom: 4px; }
  .depo .tile p { font-size: 11.5px; line-height: 1.45; margin-bottom: 10px; }
  .depo .tile b { font-size: 9px; letter-spacing: 1.2px; gap: 6px; }

  .depo .product-section { margin-top: 27px; }
  .depo .section-heading h2 { font-size: 17px; }
  .depo .section-heading > span { display: none; }
  .depo .product-grid { grid-template-columns: repeat(var(--d-card-cols-mobile), minmax(0, 1fr)); gap: 12px; }
  .depo .product-card:hover { transform: none; }
  .depo .product-bottom h3 { font-size: 13px; min-height: 42px; }

  .depo .wide-banner { height: 224px; }
  .depo .wide-banner > div { padding: 28px; }
  .depo .wide-banner h2 { font-size: 29px; }
  .depo .wide-banner > img { width: 90%; }

  .depo .shop-band { flex-wrap: wrap; gap: 20px; margin: 30px 0; padding: 25px 22px; }
  .depo .shop-band p { min-width: 200px; font-size: 13px; }
  .depo .shop-band a { margin-left: 0; }

  .depo .footer-columns { gap: 26px 30px; }
  .depo .footer-columns > div:first-child { flex: 1 1 100%; max-width: none; }
  .depo .footer-columns > div:first-child p { max-width: 46ch; }
  .depo .footer-columns > div + div { flex: 1 1 130px; max-width: none; padding-top: 0; }
  .depo .footer-bottom { gap: 10px 18px; }
  .depo .footer-bottom a { margin-left: 0; }
}

@media (max-width: 470px) {
  .depo .header-actions { gap: 5px; }
  .depo .header-action { width: 39px; min-width: 39px; height: 39px; }
  .depo .hero { height: 292px; min-height: 292px; }
  .depo .hero-copy { left: 23px; }
  .depo .hero-copy h1 { font-size: 37px; }
  .depo .tile { height: 178px; }
  .depo .tile > span { left: 13px; right: 12px; bottom: 13px; }
  .depo .tile h2 { font-size: 17px; letter-spacing: .3px; }
  /* Dar kartta açıklama başlığı yukarı itiyordu: başlık + bağlantı yeterli */
  .depo .tile p { display: none; }
  .depo .tile h2 { margin-bottom: 8px; }
  .depo .tile b { font-size: 8.5px; letter-spacing: 1px; }
  .depo .product-grid { gap: 12px; }
  .depo .product-card .tag { font-size: 8px; }
  .depo .product-card .favorite { width: 26px; height: 26px; }
  .depo .product-bottom small { font-size: 8px; }
  .depo .catalog-controls select { display: none; }
  .depo .wide-banner > div { padding: 25px 20px; }
  .depo .wide-banner h2 { font-size: 27px; }
  .depo .wide-banner p { font-size: 11px; max-width: 180px; }
  .depo .footer-columns > div + div { flex: 1 1 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .depo *, .depo *::before, .depo *::after { transition: none !important; animation: none !important; }
}

/* ──────────────────────────────────────────── vitrin: metin katmanı ─── */
.depo .hero-copy[hidden] { display: none !important; }

/* Telefonda vitrin kenardan kenara ve başlığa bitişik: içerik kabının (%93) dışına
   taşırılır, main'in üst boşluğu geri alınır. Tablette kart görünümü kalır —
   kaydırma çubuklu tarayıcıda 100vw yatay taşma yapar. */
@media (max-width: 760px) {
  .depo .promos { margin: -12px calc(50% - 50vw) 0; }
  .depo .hero { border-radius: 0; box-shadow: none; }
  .depo .hero.hairline::before { display: none; }
}
.depo .hero-controls button.hero-dot { font-size: 11px; }

/* Favori kalbi — Bootstrap ikonu (toggleFavorite bi-heart/bi-heart-fill değiştirir) */
.depo .product-card .favorite i { font-size: 16px; line-height: 1; }
.depo .product-card .favorite.is-active { color: #9e3f32; border-color: #e2c3bc; }
.depo .product-card .favorite.is-pop { transform: scale(1.15); transition: transform .2s; }

/* Kart görseli: yenitema'dan gelen .pcard-img kurallarını depo oranına çek */
.depo .product-image img.pcard-img {
  position: static; width: 100%; height: 100%; object-fit: var(--d-card-fit);
  padding: 0; background: none; mix-blend-mode: normal;
}
.depo .product-image .pcard-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
  display: flex; gap: 4px; justify-content: center; pointer-events: none;
}

/* Fiyat satırı — sepet butonunun altına girmesin */
.depo .product-bottom .price { display: block; padding-right: 38px; }

/* Sepete ekle — yenitema'nın !important kurallarını depo diline çevirir */
.depo .product-bottom .add.pcard-add-cart {
  width: 30px !important; height: 30px !important; min-height: 30px !important;
  padding: 0 !important; border-radius: 4px !important; border: 0 !important;
  background: linear-gradient(145deg, #2a2926, #0e0e0d) !important;
  color: #fff !important; box-shadow: 0 6px 14px #0002 !important;
  display: grid !important; place-items: center !important;
  font-size: 0 !important; letter-spacing: 0 !important;
}
.depo .product-bottom .add.pcard-add-cart:hover { background: var(--d-gold) !important; }
.depo .product-bottom .add.pcard-add-cart svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Menü: vurgulu bağlantı kaydırma alanının dışında sabit kalsın */
.depo .site-nav-wrap { display: flex; align-items: center; gap: 18px; }
.depo .site-nav-wrap .site-nav-row { flex: 1 1 auto; min-width: 0; }
.depo .site-nav-wrap .nav-feature { margin-left: 0; flex: 0 0 auto; }

/* ─────────────────────────── sağ aksiyon rayı (masaüstü) ─── */
.depo .yt-rail {
  background: #fff !important;
  border: 1px solid #e4dfd6 !important;
  border-radius: var(--d-radius) !important;
  box-shadow: 0 14px 38px #1d160c14 !important;
}
.depo .yt-rail-btn { color: var(--d-ink) !important; }
.depo .yt-rail-btn:hover { background: #f5f1e9 !important; color: var(--d-gold) !important; }
.depo .yt-rail-btn svg { stroke-width: 1.5; }
.depo .yt-rail-badge { background: var(--d-dark) !important; border-color: #fff !important; }
.depo .yt-rail-badge.gold { background: var(--d-gold) !important; }
.depo .yt-rail-top {
  background: var(--d-dark) !important; color: #fff !important;
  border: 0 !important; border-radius: 50% !important;
  box-shadow: 0 10px 26px #0003 !important;
}
.depo .yt-rail-top:hover { background: var(--d-gold) !important; }

/* ───────────────────────────────────────────── çerez barı ─── */
.depo #cookie-bar { border-top: 1px solid #ded7ca; box-shadow: 0 -12px 35px #24190e1a; }
.depo #cookie-bar::before { background: linear-gradient(90deg, transparent, var(--d-gold), transparent) !important; }
.depo #cookie-bar .cookie-bar-title,
.depo #cookie-bar h3, .depo #cookie-bar strong { font-family: var(--d-font-body); letter-spacing: .3px; }
.depo #cookie-bar a { color: var(--d-gold); }
.depo #cookie-bar button {
  border-radius: 3px !important; font-weight: 600 !important;
  letter-spacing: .2px !important; min-height: 42px !important;
}
.depo #cookie-bar .cookie-bar-btn-primary {
  background: var(--d-dark) !important; border: 1px solid var(--d-dark) !important; color: #fff !important;
}
.depo #cookie-bar .cookie-bar-btn-primary:hover { background: var(--d-gold) !important; border-color: var(--d-gold) !important; }
.depo #cookie-bar .cookie-bar-btn-ghost {
  background: #fff !important; color: var(--d-ink) !important; border: 1px solid #ddd8ce !important;
}
.depo #cookie-bar .cookie-bar-btn-ghost:hover { border-color: var(--d-gold) !important; color: var(--d-gold) !important; }
.depo #cookie-bar .cookie-bar-link { color: var(--d-gold) !important; }

/* ─────────────────────────────────── sepet çekmecesi (sağdan) ─── */
.depo #cart-sidebar { border-left: 1px solid #ded7ca; box-shadow: -30px 0 80px #0002; }
.depo #cart-sidebar .cart-sidebar-title,
.depo #cart-sidebar h2, .depo #cart-sidebar h3 {
  font-family: var(--d-font-head); font-weight: 600; letter-spacing: 0;
}

/* Menü tek satırda kalsın — vurgulu bağlantı alta düşmesin.
   Menü uzunsa satır yatay kayar; sağ kenardaki soluma taşmayı belli eder. */
.depo .site-nav-wrap { flex-wrap: nowrap; position: relative; }
.depo .site-nav-row { scroll-behavior: smooth; }
.depo .site-nav-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 46px;
  pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(90deg, #fff0, #fff 78%);
}
.depo .site-nav-wrap.can-scroll::after { opacity: 1; }
/* Vurgulu bağlantı solumanın üstünde kalsın */
.depo .site-nav-wrap .nav-feature { position: relative; z-index: 2; }
.depo .site-nav-wrap.can-scroll .nav-feature { margin-left: 46px; }

/* ═══════════════════════════════════════════════════════════════════
   Başlık aksiyonları — tek gruplu hap
   Üç ayrı çerçeveli düğme (geniş hap · daire · geniş hap) başlığı
   tırtıklı gösteriyordu. Düğmeler artık arama kutusuyla aynı dilde tek
   bir hap grubunun içinde duruyor: aralarında saç çizgisi ayraç, en
   sonda dolu sepet düğmesi. Arama kutusundaki koyu gönder düğmesinin
   aynı kalıbı. Etiketler/görünürlük yine Tema Ayarları'ndan gelir.
   ═══════════════════════════════════════════════════════════════════ */
.depo .header-actions {
  display: flex; align-items: center; gap: 0; flex-shrink: 0;
  height: 50px; padding: 0 5px;
  background: #fff; border: 1px solid #ddd8ce; border-radius: 999px;
  transition: border-color .2s;
}
.depo .header-actions:hover { border-color: #cbb991; }
.depo .header-action {
  height: 40px; min-width: 0; width: auto; padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; background: none; color: var(--d-ink);
  font-size: 11.5px; font-weight: 600; letter-spacing: .1px;
  white-space: nowrap; position: relative;
  transition: background .2s, color .2s;
}
.depo .header-action:hover { background: #f6f3ec; border-color: transparent; transform: none; }
.depo .header-action svg { width: 18px; height: 18px; stroke-width: 1.55; }
/* Ayraçlar düğmenin kendisine değil aralığına ait */
.depo .header-actions > .header-action + .header-action::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: #ebe6dc;
}
.depo .header-actions > .header-action:last-child::before { display: none; }
.depo .header-action.is-icon { width: 40px; min-width: 40px; padding: 0; }

/* Sepet = gruptaki tek dolu yüzey; hiyerarşi buradan kuruluyor */
.depo .header-actions > .header-action:last-child {
  background: var(--d-dark); color: #fff; padding: 0 17px;
}
.depo .header-actions > .header-action:last-child:hover { background: var(--d-gold); }

/* Sayaç köşeye yapışan çıkartma değil, etiketin devamı */
.depo .header-action .badge-count {
  position: static; top: auto; right: auto; border: 0;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
  background: #f0ebe1; color: var(--d-ink);
  font-size: 9.5px; font-weight: 700; line-height: 1;
  display: inline-grid; place-items: center;
}
.depo .header-actions > .header-action:last-child .badge-count {
  background: var(--d-gold); color: #fff;
}
/* Etiketsiz düğmede satır yeri yok — sayaç köşeye döner */
.depo .header-action.is-icon .badge-count {
  position: absolute; top: 1px; right: 1px;
  background: var(--d-dark); color: #fff; border: 2px solid #fff;
}

/* Dar masaüstü: etiketler kalkar, grup ikonlara daralır */
@media (max-width: 1100px) and (min-width: 992px) {
  .depo .header-actions { padding: 0 4px; }
  .depo .header-action { width: 40px; min-width: 40px; padding: 0; }
  .depo .header-actions > .header-action:last-child { width: 40px; min-width: 40px; padding: 0; }
}



/* ═══════════════════════════════════════════════════════════════════
   Ürün kartı — hizalı taban
   Başlık kaç satır sürerse sürsün fiyat satırı kartın dibine oturur;
   böylece bir ızgara satırındaki bütün fiyatlar aynı hizada. Uzun
   adlar Tema Ayarları'ndaki satır sınırında kesilir. Sepet düğmesi de
   fiyatla aynı yüksekliğe alındı: artık kartın üstüne yapıştırılmış
   bir çıkartma gibi durmuyor.
   ═══════════════════════════════════════════════════════════════════ */
.depo .product-card { display: flex; flex-direction: column; }
.depo .product-card > .product-image { flex: 0 0 auto; }
.depo .product-bottom {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 14px 13px; min-width: 0;
}
.depo .product-bottom small { font-size: 9px; line-height: 1.4; }
.depo .product-bottom h3 {
  font-size: 13.5px; line-height: 1.45; font-weight: 600;
  margin: 5px 0 11px; min-height: 0;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--d-card-title-lines, 2); line-clamp: var(--d-card-title-lines, 2);
  overflow: hidden;
}
/* Fiyat satırı tabana yapışır — kart yüksekliği farkını buradaki boşluk yutar */
.depo .product-bottom .price {
  margin-top: auto; min-height: 32px; padding-right: 42px;
  display: flex; align-items: center; flex-wrap: wrap;
  column-gap: 7px; row-gap: 0;
  font-size: 15px; font-weight: 700; letter-spacing: -.2px;
}
.depo .product-bottom .price-old { margin-right: 0; font-size: 11.5px; font-weight: 500; }
.depo .product-bottom .add,
.depo .product-bottom .add.pcard-add-cart {
  right: 13px; bottom: 14px;
  width: 32px !important; height: 32px !important;
  border-radius: 3px !important; border: 0 !important;
  background: var(--d-dark) !important; color: #fff !important;
  box-shadow: none !important;
  transition: background .2s;
}
.depo .product-bottom .add:hover,
.depo .product-bottom .add.pcard-add-cart:hover { background: var(--d-gold) !important; }
.depo .product-bottom .add svg,
.depo .product-bottom .add.pcard-add-cart svg { width: 15px; height: 15px; stroke-width: 1.5; }

@media (max-width: 991.98px) {
  .depo .product-bottom { padding: 12px 11px; }
  .depo .product-bottom h3 { font-size: 12.5px; min-height: 0; margin: 4px 0 9px; }
  .depo .product-bottom .price { font-size: 13.5px; min-height: 30px; padding-right: 38px; }
  .depo .product-bottom .price-old { font-size: 10.5px; }
  .depo .product-bottom .add,
  .depo .product-bottom .add.pcard-add-cart {
    right: 11px; bottom: 12px; width: 30px !important; height: 30px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Kart üzerindeki ek parçalar — kategori/aramadan gelen özellikler
   Ortak partial artık kampanya rozeti, yönetici rozet görseli, fırsat
   geri sayımı, sepet indirimi şeridi ve puan satırını da basıyor.
   Hepsi yenitema'nın yeşil/turuncu değerlerinden depo paletine çekildi.
   ═══════════════════════════════════════════════════════════════════ */
.depo .product-card .tag--kp {
  max-width: calc(100% - 46px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--d-dark); color: #f0e2c4; border-color: var(--d-dark);
}
/* Yönetici rozet görseli favori düğmesinin altına oturur — etikete çarpmasın */
.depo .product-card .pcard-seal {
  position: absolute; top: 44px; right: 9px; z-index: 2;
  width: clamp(40px, 21%, 62px); height: auto;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 3px 7px #1d160c33);
}
.depo .product-card .deal-cd--card {
  position: absolute; left: 9px; bottom: 9px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px; border-radius: 3px;
  background: #171717e8; color: #f0e2c4; box-shadow: none;
  font-size: 10px; font-weight: 600; letter-spacing: .4px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.depo .product-card .deal-cd--card svg {
  width: 12px; height: 12px; flex: none;
  fill: none; stroke: var(--d-gold); stroke-width: 1.7;
}
.depo .product-card .pcard-cart-discount {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 7px 10px; text-align: center;
  background: #171717e8; color: #f0e2c4;
  font-size: 10px; font-weight: 600; letter-spacing: .9px; text-transform: uppercase;
}
/* Şerit varken çoklu görsel noktaları onun üstüne çıksın */
.depo .pcard-media:has(.pcard-cart-discount) .pcard-dots { bottom: 40px; }
.depo .product-bottom .pcard-rating {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0 0 9px; font-size: 11px; color: var(--d-muted);
}
.depo .product-bottom .pcard-rating svg {
  width: 12px; height: 12px; flex: none; fill: var(--d-gold); stroke: none;
}
.depo .product-bottom .pcard-rating b { color: var(--d-ink); font-weight: 700; }
/* Görseli olmayan ürün: gri kutu yerine ince çizgisel yer tutucu */
.depo .product-image .pcard-img--placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #f1eee8; color: #c3bbab;
}
.depo .product-image .pcard-img--placeholder svg {
  width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.3;
}
.depo .product-image video.pcard-img {
  width: 100%; height: 100%; object-fit: var(--d-card-fit); display: block;
}

/* ═══════════════════════════════════════════════════════════════════
   Sayfalama ve sonsuz kaydırma — kategori, arama ve kampanyalarda ortak
   Kategoride hiç biçim yoktu (Bootstrap varsayılanına düşüyordu),
   aramada ayrı bir kopya vardı. Tek yerde toplandı.
   ═══════════════════════════════════════════════════════════════════ */
.depo .pagination {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  margin: 30px 0 6px; padding: 0; list-style: none;
}
.depo .pagination .page {
  min-width: 38px; height: 38px; padding: 0 11px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e6e0d6; border-radius: 3px; background: #fff;
  font-size: 12.5px; font-weight: 500; color: #4a463f; text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.depo .pagination .page:hover { border-color: var(--d-gold); background: #fdfbf6; color: var(--d-ink); }
.depo .pagination .page.active {
  background: var(--d-dark); border-color: var(--d-dark); color: #fff; font-weight: 600;
}
.depo .inf { padding: 28px 0 6px; }
.depo .inf-spin { border-color: #ece7dd; border-top-color: var(--d-gold); }
.depo .inf-btn {
  border: 1px solid #e6e0d6; border-radius: 3px; background: #fff; color: #4a463f;
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 12px 22px;
}
.depo .inf-btn:hover { background: #fdfbf6; border-color: var(--d-gold); }
.depo .inf-end { font-size: 10.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #9a7e4e; }
.depo .inf-end::before, .depo .inf-end::after { width: 24px; background: #ded7c9; }

/* ═══════════════════════════════════════════════════════════════
   Bağlantı alt çizgisi
   critical.css'teki `a:hover{text-decoration:underline}` (0,1,1),
   :where(.depo) a sıfırlamasını (0,0,1) yeniyordu; bu yüzden düğme
   görünümlü bağlantılar üzerine gelince altı çiziliyordu. Burada
   (0,2,1) ile kapatılıyor — gerçekten alt çizgi isteyen yerler
   .depo-link ile ya da kendi sayfa kuralıyla açar.
   ═══════════════════════════════════════════════════════════════ */
.depo a:hover, .depo a:focus { text-decoration: none; }
.depo a.depo-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════
   Arama önerileri paneli
   Taban biçimi yenitema'dan devralınmamıştı: kutu konumsuz kalıyor,
   arama çubuğunun sağına taşıyor ve zemini olmadığı için altındaki
   menü çizgisi yazıların içinden geçiyordu.
   ═══════════════════════════════════════════════════════════════ */
.depo .header-search-suggest {
  position: absolute; z-index: 1200;
  top: calc(100% + 8px); left: 0; right: 0;
  max-height: min(70vh, 520px); overflow: hidden auto;
  background: #fff;
  border: 1px solid var(--d-line, #e6e1d6);
  border-radius: var(--d-radius, 7px);
  box-shadow: 0 24px 48px -24px rgba(31, 28, 23, .38);
}
.depo .header-search-suggest.hidden { display: none; }
.depo .header-search-suggest::-webkit-scrollbar { width: 6px; }
.depo .header-search-suggest::-webkit-scrollbar-thumb { background: #ded7c9; border-radius: 99px; }

.depo .hss-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px; border-bottom: 1px solid #f0ece3; background: #fbf9f5;
}
.depo .hss-header-label {
  font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--d-gold, #a58b58);
}
.depo .hss-header-count { font-size: 11px; font-weight: 600; color: var(--d-muted, #8b857a); }

.depo a.hss-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid #f5f2eb;
  color: var(--d-ink, #1f1c17); transition: background .15s;
}
.depo a.hss-item:last-of-type { border-bottom: 0; }
.depo a.hss-item:hover, .depo a.hss-item.active { background: #fbf9f5; }

.depo .hss-img, .depo .hss-img-placeholder {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 4px; border: 1px solid #f0ece3; background: #f6f5f2;
  object-fit: cover;
}
.depo .hss-img-placeholder {
  display: grid; place-items: center; color: #c3bcae;
}
.depo .hss-img-placeholder svg { fill: none; stroke: currentColor; }

.depo .hss-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.depo .hss-label {
  font-size: 13px; font-weight: 600; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.depo .hss-price-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.depo .hss-price { font-size: 13px; font-weight: 700; letter-spacing: -.2px; }
.depo .hss-price-old { font-size: 11.5px; color: var(--d-muted, #8b857a); text-decoration: line-through; }
.depo .hss-discount {
  font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #fff; background: var(--d-gold, #a58b58); padding: 2px 6px; border-radius: 3px;
}
.depo .hss-arrow {
  width: 15px; height: 15px; flex-shrink: 0;
  color: #c3bcae; opacity: 0; transform: translateX(-4px);
  transition: opacity .15s, transform .15s;
}
.depo a.hss-item:hover .hss-arrow, .depo a.hss-item.active .hss-arrow {
  opacity: 1; transform: none; color: var(--d-gold, #a58b58);
}

.depo .hss-empty { padding: 26px 20px; text-align: center; }
.depo .hss-empty-icon {
  width: 44px; height: 44px; margin: 0 auto 10px;
  display: grid; place-items: center; border-radius: 50%;
  background: #f6f5f2; color: #b7ae9c;
}
.depo .hss-empty-text { font-size: 13px; color: var(--d-ink, #1f1c17); line-height: 1.5; }
.depo .hss-empty-text strong { font-weight: 700; }
.depo .hss-empty-hint { margin-top: 4px; font-size: 11.5px; color: var(--d-muted, #8b857a); }

.depo .hss-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 26px 20px;
}
.depo .hss-loading svg { animation: hss-spin .8s linear infinite; }
.depo .hss-loading-text {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--d-muted, #8b857a);
}
@keyframes hss-spin { to { transform: rotate(360deg); } }

.depo a.hss-see-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 16px; border-top: 1px solid #f0ece3;
  background: var(--d-dark, #1f1c17); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
  transition: background .2s;
}
.depo a.hss-see-all:hover { background: var(--d-gold, #a58b58); }
.depo .hss-see-all svg { fill: none; stroke: currentColor; transition: transform .2s; }
.depo .hss-see-all:hover svg { transform: translateX(3px); }

/* Arama kutusundaki yerleşik temizle düğmesi mavi çıkıyordu */
.depo .header-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-left: 6px; cursor: pointer; opacity: .45;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/contain no-repeat;
}
.depo .header-search input[type="search"]::-webkit-search-cancel-button:hover { opacity: .8; }

@media (max-width: 991.98px) {
  .depo .header-search-suggest { top: calc(100% + 6px); max-height: 60vh; }
  .depo .hss-img, .depo .hss-img-placeholder { width: 42px; height: 42px; flex-basis: 42px; }
}

/* ═══════════════════════════════════════════════════════════════
   Anasayfa blog bölümü
   Ürün bölümleriyle aynı başlık dilini paylaşır (.section-heading);
   kartlar ürün kartının kardeşi: aynı çerçeve, aynı yarıçap, aynı
   görsel oranı. Sütun sayısı Tema Ayarları'ndaki yazı sayısından
   gelir (--blog-cols).
   ═══════════════════════════════════════════════════════════════ */
.depo .blog-band { margin: 54px 0 0; }
.depo .blog-band .section-heading { flex-wrap: wrap; }
.depo .blog-band-overline {
  order: -1; flex-basis: 100%;
  font-size: 10px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--d-gold); margin-bottom: 7px;
}
.depo .blog-band .section-heading h2 { font-family: var(--d-font-head); font-size: 29px; font-weight: 500; letter-spacing: -.2px; }

.depo .blog-band-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(var(--blog-cols, 3), minmax(0, 1fr));
}
.depo .blog-band-card {
  display: flex; flex-direction: column; min-width: 0;
  background: #fff; border: 1px solid var(--d-line); border-radius: var(--d-radius);
  overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.depo .blog-band-card:hover {
  border-color: #cbb991; transform: translateY(-3px);
  box-shadow: 0 22px 40px -30px #1f1c1799;
}
.depo .blog-band-media {
  position: relative; display: block; aspect-ratio: 16 / 10;
  background: #f6f5f2; overflow: hidden;
}
.depo .blog-band-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s; }
.depo .blog-band-card:hover .blog-band-media img { transform: scale(1.04); }
.depo .blog-band-ph { position: absolute; inset: 0; display: grid; place-items: center; color: #c3bcae; }
.depo .blog-band-ph svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.depo .blog-band-cat {
  position: absolute; left: 10px; top: 10px;
  padding: 4px 9px; border-radius: 3px;
  background: #1f1c17e8; color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.depo .blog-band-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 15px 15px 16px; min-width: 0; }
.depo .blog-band-body h3 {
  margin: 0 0 8px; font-size: 14.5px; line-height: 1.4; font-weight: 600;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.depo .blog-band-body h3 a:hover { color: var(--d-gold); }
.depo .blog-band-body p {
  margin: 0 0 12px; font-size: 12.5px; line-height: 1.65; color: var(--d-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.depo .blog-band-meta {
  margin-top: auto; padding-top: 11px; border-top: 1px solid #f0ece3;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: var(--d-muted);
}
.depo .blog-band-meta span { display: inline-flex; align-items: center; gap: 5px; }
.depo .blog-band-meta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }

@media (max-width: 991.98px) {
  .depo .blog-band { margin-top: 40px; }
  .depo .blog-band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .depo .blog-band .section-heading h2 { font-size: 24px; }
  .depo .blog-band-body { padding: 13px 13px 14px; }
  .depo .blog-band-body h3 { font-size: 13.5px; }
}
@media (max-width: 575px) {
  .depo .blog-band-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Bayi fiyatı rozeti — kart içinde fiyatın hemen üstünde */
.depo .pcard-ws {
  display: inline-block; margin-bottom: 4px; padding: 2px 7px; border-radius: 3px;
  background: var(--d-gold); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════════
   Mobil başlık — menü · logo · arama
   Dosyanın SONUNDA olmak zorunda: yukarıdaki gruplu hap bloğu
   (.depo .header-actions) aynı özgüllükte ve daha sonra geldiği için
   medya sorgusundaki display:none'ı eziyordu. Kaynak sırası kazanıyor.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .depo .header-row {
    height: 58px; min-height: 58px;
    padding: 0; gap: 8px;
    display: grid; grid-template-columns: 40px 1fr 40px; grid-template-rows: 1fr;
    align-items: center;
  }
  /* Arama kaplama olarak açılıyor, favoriler/sepet/hesap alt çubukta */
  .depo .header-search,
  .depo .header-actions { display: none !important; }

  .depo .header-burger,
  .depo .header-searchbtn {
    display: grid; place-items: center;
    width: 40px; height: 40px; padding: 0;
    border: 0; background: none; color: var(--d-ink);
  }
  /* grid-row açıkça verilmeli: işaretlemede logo düğmelerden önce geliyor,
     otomatik yerleşim sonradan gelip daha soldaki sütunu isteyen öğeyi bir
     alt satıra atıyor ve logo tek başına üstte kalıyordu. */
  .depo .header-burger { grid-column: 1; grid-row: 1; justify-self: start; }
  .depo .header-searchbtn { grid-column: 3; grid-row: 1; justify-self: end; }
  .depo .header-burger .ui-icon,
  .depo .header-searchbtn .ui-icon { width: 23px; height: 23px; stroke-width: 1.7; }

  .depo .brand { grid-column: 2; grid-row: 1; justify-self: center; align-self: center; max-width: 100%; }
  .depo .brand img { height: 30px; width: auto; }
  .depo .brand-word { font-size: 24px; letter-spacing: -1.7px; }
}
@media (max-width: 380px) {
  .depo .brand img { height: 26px; }
  .depo .brand-word { font-size: 21px; }
}