/* =========================
   KOLEKSIYON BROSUR 2
   "Dergi / Kapak" hissi
   ========================= */

/* Header */
.b2-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.b2-left{ min-width:0; }

/* Metin hizasını logical yap: LTR’de sol, RTL’de sağ */
.b2-title,
.b2-sub{
  text-align: start;
}

.b2-title{
  font-size:22px;
  font-weight:950;
  letter-spacing:.01em;
  line-height:1.1;
}
.b2-sub{
  margin-top:6px;
  font-size:12px;
  opacity:.72;
  line-height:1.35;
  max-width:760px;
}

.b2-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.b2-all{
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  color:#111;
  box-shadow:0 12px 26px rgba(0,0,0,.08);
}
.b2-all:hover{ box-shadow:0 16px 34px rgba(0,0,0,.12); }

.b2-nav{ display:flex; gap:8px; }
.b2-btn{
  width:42px; height:42px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.10);
  font-size:22px; font-weight:900; line-height:1;
  display:flex; align-items:center; justify-content:center;
  color:#111; user-select:none;
}
.b2-btn:hover{ box-shadow:0 16px 32px rgba(0,0,0,.14); }
.b2-btn:disabled{ opacity:.35; cursor:not-allowed; box-shadow:none; }

/* Slick fixes */
.b2-slick .slick-track{ display:flex; }
.b2-slick .slick-slide{ height:auto; }
.b2-slick .slick-slide > div{ height:100%; }

/* Card */
.b2-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease;
  height:520px;
  display:flex;
  flex-direction:column;
  font-family: var(--ana-font);
}
.b2-card:hover{
  transform: translateY(-2px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* Media */
.b2-media{
  position:relative;
  display:block;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,.06);
  aspect-ratio: 4 / 3;
  overflow:hidden;
}
.b2-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  transform:scale(.8);
  transition: transform .28s ease;
}
.b2-card:hover .b2-media img{ transform: scale(1); }

/* Badges */
.b2-badge{
  position:absolute;
  top:12px;
  left:12px;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.01em;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
}
.b2-sale{
  left:auto; right:12px;
  background: linear-gradient(180deg, #111, #444);
  color:#fff;
  border-color: rgba(255,255,255,.22);
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.b2-stock{ top:auto; bottom:12px; }
.b2-last{
  background: rgba(255,230,230,.92);
  border-color: rgba(176,0,32,.18);
  color:#b00020;
}
.b2-out{ color:#111; }

/* Body */
.b2-body{
  flex:1;
  padding: 0 14px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;

  /* RTL/LTR uyumlu metin hizası */
  text-align: start;
}

.b2-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* Marka (Arapça’da uppercase/letter-spacing kötü durur; RTL patchte düzelteceğiz) */
.b2-brand{
  font-size:12px;
  font-weight:950;
  opacity:.62;
  text-transform:uppercase;
  letter-spacing:.03em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:60%;
  text-align: start;
}

/* Rating */
.b2-rating{ display:flex; align-items:center; gap:8px; }
.b2-v{
  font-size:14px;
  font-weight:800;
  opacity:.75;
  line-height:14px;
}
.b2-stars{
  --rate:0;
  width:92px; height:16px;
  display:inline-block;
  background:linear-gradient(90deg,#f5a623 calc((var(--rate)/5)*100%), rgba(0,0,0,.14) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20'%3E%3Cpath fill='%23000' d='M10 0l3 6 7 1-5 5 1 8-6-3-6 3 1-8-5-5 7-1zM35 0l3 6 7 1-5 5 1 8-6-3-6 3 1-8-5-5 7-1zM60 0l3 6 7 1-5 5 1 8-6-3-6 3 1-8-5-5 7-1zM85 0l3 6 7 1-5 5 1 8-6-3-6 3 1-8-5-5 7-1zM110 0l3 6 7 1-5 5 1 8-6-3-6 3 1-8-5-5 7-1z'/%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 120 20'%3E%3Cpath fill='%23000' d='M10 0l3 6 7 1-5 5 1 8-6-3-6 3 1-8-5-5 7-1zM35 0l3 6 7 1-5 5 1 8-6-3-6 3 1-8-5-5 7-1zM60 0l3 6 7 1-5 5 1 8-6-3-6 3 1-8-5-5 7-1zM85 0l3 6 7 1-5 5 1 8-6-3-6 3 1-8-5-5 7-1zM110 0l3 6 7 1-5 5 1 8-6-3-6 3 1-8-5-5 7-1z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Product name + desc */
.b2-name,
.b2-desc{
  text-align: start;
  /* karışık Arapça + sayı/latin için daha düzgün */
  unicode-bidi: plaintext;
}

.b2-name{
  text-decoration:none;
  color:#111;
  font-size:16px;
  font-weight:950;
  line-height:1.22;

  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(3 * 1.45em);
}
.b2-name:hover{ text-decoration:underline; }

.b2-desc{
  font-size:12.5px;
  line-height:1.55;
  opacity:.82;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(2 * 1.55em);
}

/* Bottom */
.b2-bottom{
  margin-top:auto;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.b2-price{
  min-width:0;
  text-align: start;
}
.b2-old{
  font-size:12px;
  opacity:.55;
  text-decoration:line-through;
}
.b2-new{
  font-size:20px;
  font-weight:950;
  letter-spacing:.01em;
  line-height:1.1;
}

.b2-cta{
  text-decoration:none;
  font-size:12px;
  font-weight:950;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#111;
  color:#fff;
  white-space:nowrap;
  box-shadow:0 14px 30px rgba(0,0,0,.16);
}
.b2-cta:hover{
  background:#000;
  box-shadow:0 18px 36px rgba(0,0,0,.20);
}

/* Tablet sıkılaştırma */
@media (max-width: 991.98px){
  .b2-card{ height:400px; }
  .b2-new{ font-size:19px; }
}

/* Gerçek mobil */
@media (max-width: 767.98px){
  .b2-card{ height:auto; }
  .b2-media{ aspect-ratio: 16 / 10; }

  .b2-head{
    flex-direction: column;
    align-items: stretch;
    gap:10px;
  }
  .b2-right{
    width:100%;
    justify-content:space-between;
  }
}

@media (max-width: 575.98px){
  .b2-title{ font-size:20px; }
  .b2-all{ padding:9px 10px; }
}

/* Loader */
.ui-loader--brosur2 .ui2-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.ui-loader--brosur2 .ui2-lines{ width:70%; max-width:520px; }
.ui-loader--brosur2 .ui2-btns{ display:flex; gap:8px; }

.ui-loader--brosur2 .ui2-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.ui-loader--brosur2 .ui2-card{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.08);
  padding:12px;
}
.ui-loader--brosur2 .ui-skel.img{
  height:160px;
  border-radius:14px;
  margin-bottom:12px;
}
.ui-loader--brosur2 .ui-skel.t1{ height:14px; margin-bottom:8px; }
.ui-loader--brosur2 .ui-skel.t2{ height:14px; width:78%; margin-bottom:12px; }
.ui-loader--brosur2 .ui-skel.price{ height:18px; width:46%; margin-bottom:12px; }
.ui-loader--brosur2 .ui-skel.btn{ height:36px; border-radius:12px; }

@media (max-width: 991.98px){
  .ui-loader--brosur2 .ui2-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px){
  .ui-loader--brosur2 .ui2-cards{ grid-template-columns: 1fr; }
}

/* =========================
   BROSUR 2 - RTL (NET)
   ========================= */

/* Hem section dir rtl ise, hem sayfa genel dir rtl ise yakala */
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-head{
  text-align:right;
}

/* Başlık + içerik metinleri: global text-align:left varsa ezsin diye !important */
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-title,
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-sub,
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-body,
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-brand,
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-name,
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-desc,
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-price{
  text-align:right !important;
}

/* Arapçada uppercase/letter-spacing kaldır */
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-brand{
  text-transform:none;
  letter-spacing:0;
}

/* Row-reverse (tablet+) */
@media (min-width: 768px){
  :where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-head{
    flex-direction: row-reverse;
  }
  :where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-nav{
    flex-direction: row-reverse;
  }
  :where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-topline{
    flex-direction: row-reverse;
  }
  :where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-bottom{
    flex-direction: row-reverse;
  }

  /* Sağ blok (butonlar) artık solda olacağı için sola yasla */
  :where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-right{
    justify-content:flex-start;
  }
}

/* Badge swap */
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-badge{
  left:auto;
  right:12px;
}
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-sale{
  right:auto;
  left:12px;
}

/* =========================
   BROSUR 2 - RTL (HEADER SWAP FIX)  ✅
   EN ALTA KOY
   ========================= */

/* Hem section dir rtl, hem sayfa dir rtl senaryosu */
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-head{
  direction: rtl;                /* ekstra garanti */
}

/* ÇOCUKLARIN SIRASINI ZORLA: Başlık sağa, oklar sola */
:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-left{
  order: 2 !important;
  text-align: right !important;
}

:where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-right{
  order: 1 !important;
  justify-content: flex-start !important;  /* oklar solda kalsın */
}

/* Mobilde head column oluyor ya; yine sağa hizala */
@media (max-width: 767.98px){
  :where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-head{
    align-items: stretch !important;
  }
  :where(.brosur2-block[dir="rtl"], [dir="rtl"] .brosur2-block) .b2-right{
    justify-content: space-between !important;
  }
}