/* =====================================================================
   Ana sayfa kitap bandı (10 dil) — Pusula mağazasına vitrin
   Sınıflar "hbk-" önekli; ana sayfa dili (Inter, lacivert/kırmızı) +
   mağazanın altın/yıldız deseni. Ekleyen: scripts/add-home-books.py
   ===================================================================== */
.hbk { background: #f5f7fb; padding: 64px 0; border-bottom: 1px solid #eef1f6; }
.hbk-card {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  background: #fff; border: 1px solid #e4eaf3; border-radius: 24px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 27, 45, .04), 0 18px 44px -18px rgba(15, 27, 45, .16);
}

/* Sol: kapak yelpazesi */
.hbk-visual {
  position: relative; display: block; min-height: 380px; text-decoration: none;
  background-color: #0F1B2D;
  background-image:
    radial-gradient(120% 90% at 50% 105%, rgba(200, 163, 90, .22), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C8A35A' stroke-opacity='.16' stroke-width='1.2'%3E%3Crect x='18' y='18' width='28' height='28'/%3E%3Crect x='18' y='18' width='28' height='28' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Cpath d='M0 0l12 12M64 0L52 12M0 64l12-12M64 64L52 52'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 48px 48px;
  overflow: hidden;
}
.hbk-stack { position: absolute; left: 50%; top: 50%; width: min(84%, 430px); aspect-ratio: 1.45 / 1; transform: translate(-50%, -46%); }
.hbk-cover {
  position: absolute; top: 0; width: 38%; height: auto; border-radius: 2px 6px 6px 2px;
  box-shadow: 0 26px 46px -18px rgba(0, 0, 0, .6), 0 8px 18px -8px rgba(0, 0, 0, .45);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  background: #fff;
}
.hbk-cover--a1 { left: 3%;  z-index: 1; transform: perspective(1400px) rotateY(14deg) rotate(-8deg) translateY(10%); }
.hbk-cover--a2 { left: 31%; z-index: 2; transform: perspective(1400px) rotateY(8deg) translateY(0); }
.hbk-cover--b1 { left: 59%; z-index: 3; transform: perspective(1400px) rotateY(-4deg) rotate(8deg) translateY(10%); }
.hbk-visual:hover .hbk-cover--a1 { transform: perspective(1400px) rotateY(10deg) rotate(-10deg) translate(-4%, 8%); }
.hbk-visual:hover .hbk-cover--a2 { transform: perspective(1400px) rotateY(4deg) translateY(-4%); }
.hbk-visual:hover .hbk-cover--b1 { transform: perspective(1400px) rotateY(-2deg) rotate(10deg) translate(4%, 8%); }

/* Sağ: metin */
.hbk-body { padding: 48px 52px; display: flex; flex-direction: column; justify-content: center; }
.hbk-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  margin: 0 0 16px; padding: 6px 13px 6px 11px; border-radius: 999px;
  background: rgba(227, 30, 36, .07); color: #c4181d;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; line-height: 1.3;
}
.hbk-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #E31E24; flex: 0 0 auto; }
.hbk-body h2 { font-size: clamp(23px, 2.7vw, 31px); font-weight: 800; color: #0F1B2D; line-height: 1.22; letter-spacing: -.01em; margin: 0 0 14px; text-wrap: balance; }
.hbk-desc { font-size: 16px; color: #5b6677; line-height: 1.7; margin: 0 0 20px; max-width: 560px; }
.hbk-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; }
.hbk-chips li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px;
  background: #f8fafd; border: 1px solid #e4eaf3; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; color: #0F1B2D; line-height: 1.2;
}
.hbk-chips i { color: #9A7A36; font-size: 13px; }
.hbk-price { margin: 0 0 22px; font-size: 14.5px; color: #5b6677; }
.hbk-price b { font-size: 22px; font-weight: 800; color: #0F1B2D; letter-spacing: -.01em; }
.hbk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hbk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #E31E24; color: #fff; font-weight: 700; font-size: 15.5px; line-height: 1.2;
  padding: 14px 26px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(227, 30, 36, .6);
  transition: background .16s, transform .16s, box-shadow .16s;
}
.hbk-btn:hover { background: #c4181d; color: #fff; transform: translateY(-1px); box-shadow: 0 14px 28px -10px rgba(227, 30, 36, .65); }
.hbk-link { display: inline-flex; align-items: center; gap: 8px; color: #0F1B2D; font-weight: 700; font-size: 15px; text-decoration: none; border-bottom: 1.5px solid rgba(15, 27, 45, .25); padding-bottom: 2px; }
.hbk-link:hover { border-bottom-color: #E31E24; color: #0F1B2D; }
.hbk-btn i, .hbk-link i { font-size: 13px; }
.hbk-btn:focus-visible, .hbk-link:focus-visible, .hbk-visual:focus-visible { outline: 3px solid #E31E24; outline-offset: 3px; }

/* RTL (ar): ızgara kendiliğinden aynalanır; yelpaze ve oklar çevrilir.
   Kapak etiketi solda olduğundan sağdaki kapak hep üstte durur. */
[dir="rtl"] .hbk-eyebrow { padding: 6px 11px 6px 13px; letter-spacing: 0; }
[dir="rtl"] .hbk-btn i, [dir="rtl"] .hbk-link i { transform: scaleX(-1); }
[dir="rtl"] .hbk-cover--a1 { left: 59%; z-index: 3; transform: perspective(1400px) rotateY(-14deg) rotate(8deg) translateY(10%); }
[dir="rtl"] .hbk-cover--a2 { transform: perspective(1400px) rotateY(-8deg) translateY(0); }
[dir="rtl"] .hbk-cover--b1 { left: 3%; z-index: 1; transform: perspective(1400px) rotateY(4deg) rotate(-8deg) translateY(10%); }
[dir="rtl"] .hbk-visual:hover .hbk-cover--a1 { transform: perspective(1400px) rotateY(-10deg) rotate(10deg) translate(4%, 8%); }
[dir="rtl"] .hbk-visual:hover .hbk-cover--a2 { transform: perspective(1400px) rotateY(-4deg) translateY(-4%); }
[dir="rtl"] .hbk-visual:hover .hbk-cover--b1 { transform: perspective(1400px) rotateY(2deg) rotate(-10deg) translate(-4%, 8%); }
:lang(ar) .hbk-body h2, :lang(ja) .hbk-body h2, :lang(zh) .hbk-body h2 { letter-spacing: 0; line-height: 1.4; }
:lang(ja) .hbk-eyebrow, :lang(zh) .hbk-eyebrow { letter-spacing: 0; }
:lang(ja) .hbk-body h2, :lang(ja) .hbk-desc { word-break: auto-phrase; }

@media (max-width: 900px) {
  .hbk-body { padding: 38px 34px; }
  .hbk-visual { min-height: 340px; }
}
@media (max-width: 760px) {
  .hbk { padding: 44px 0; }
  .hbk-card { grid-template-columns: 1fr; border-radius: 20px; }
  .hbk-visual { min-height: 0; aspect-ratio: 16 / 10; }
  .hbk-stack { width: min(80%, 380px); }
  .hbk-body { padding: 28px 22px 30px; }
  .hbk-desc { font-size: 15px; }
  .hbk-cta { flex-direction: column; align-items: stretch; gap: 16px; }
  .hbk-btn { width: 100%; }
  .hbk-link { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hbk-cover, .hbk-btn { transition: none; }
}