/* ==========================================================================
   TafsirKurd 2.0 — homepage §7 «دەربارەی تەفسیر کورد», premium pass.
   The Tafsir Sanahi book as a 3D object (shapes from tk3-library.css) on a
   halo, the founder's mission quote signed, three pillars, real reach numbers.
   Static — no motion beyond the shared data-rv reveal and the 3D hover.
   ========================================================================== */
.tk-ab { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--s8); align-items: center; }

/* the book */
.tk-ab__book { position: relative; margin: 0; display: grid; justify-items: center; gap: var(--s4); padding: var(--s6) 0; }
.tk-ab__halo { position: absolute; left: 50%; top: 42%; width: 440px; height: 440px; margin: -220px 0 0 -220px; color: var(--green); opacity: .12; pointer-events: none;
  background: radial-gradient(closest-side, var(--wash-2), transparent); border-radius: 50%; }
.tk-ab__halo svg { width: 100%; height: 100%; }
.tk-ab__book .bk3__stage { width: 230px; }
.tk-ab__book .bk3__book { --T: 26px; transform: rotateY(24deg) rotateX(4deg); }
.tk-ab__book:hover .bk3__book, .tk-ab__open:focus-visible .bk3__book { transform: rotateY(8deg) translate3d(0, -8px, 0); }
/* the book is a link to the PDF: a «بخوینە» tag rises onto the cover on hover */
.tk-ab__open { position: relative; display: block; color: inherit; cursor: pointer; outline: none; }
.tk-ab__hint { position: absolute; left: 50%; bottom: 18%; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
  background: #F4E8CC; color: #0F3A25; font-weight: 700; font-size: var(--t-sm); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .55);
  opacity: 0; transform: translate3d(-50%, 10px, 0); transition: opacity var(--d3) var(--ease), transform var(--d3) var(--ease); pointer-events: none; }
.tk-ab__hint .tk-icon { width: 16px; height: 16px; }
.tk-ab__open:hover .tk-ab__hint, .tk-ab__open:focus-visible .tk-ab__hint { opacity: 1; transform: translate3d(-50%, 0, 0); }
.tk-ab__cta { display: flex; width: max-content; margin: var(--s3) auto 0; }
@media (hover: none) { .tk-ab__hint { opacity: 1; transform: translate3d(-50%, 0, 0); } }
.tk-ab__cover { display: grid; place-items: center; background: linear-gradient(160deg, #1f6b44, #0f3a25); }
.tk-ab__cover img { position: absolute; inset: 0; z-index: 1; }
.tk-ab__ph { padding: 16px; text-align: center; color: #F4E8CC; font: 800 1.3rem/1.5 var(--f-ui); }
.tk-ab__book figcaption { position: relative; text-align: center; margin-top: var(--s3); }
.tk-ab__book figcaption b { display: block; font-size: var(--t-lg); color: var(--green-ink); }
.tk-ab__book figcaption small { color: var(--muted); font-size: var(--t-sm); }
.tk-ab__ayah { position: relative; margin: 0; max-width: 22rem; text-align: center; font: 400 1.3rem/1.9 var(--f-quran); color: var(--ink-2); }
.tk-ab__ayah small { display: block; margin-top: 2px; font: 600 var(--t-xs)/1.5 var(--f-ui); color: var(--green); }

/* the words */
.tk-ab__copy h2 { margin: var(--s3) 0 0; }
.tk-ab__quote { position: relative; margin: var(--s5) 0 0; padding: var(--s6) var(--s6) var(--s5); border-radius: var(--r-xl); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.tk-ab__quote::before { content: '”'; position: absolute; top: -.18em; inset-inline-start: 18px; font: 700 6rem/1 Georgia, 'Times New Roman', serif; color: var(--green); opacity: .18; }
.tk-ab__quote p { margin: 0; font: 400 clamp(1.3rem, .9vw + 1.05rem, 1.75rem)/1.85 var(--f-read); color: var(--ink); }
.tk-ab__sign { display: inline-flex; align-items: center; gap: 12px; margin-top: var(--s4); color: var(--ink); }
.tk-ab__sign:hover { color: var(--green); }
.tk-ab__mark { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--green); }
.tk-ab__mark .tk-logo { height: 18px; background: var(--on-green); }
.tk-ab__sign b { display: block; font-size: var(--t-md); line-height: 1.35; }
.tk-ab__sign small { color: var(--muted); font-size: var(--t-xs); }

.tk-ab__pillars { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: 10px; }
.tk-ab__pillars li { display: flex; align-items: flex-start; gap: 14px; }
.tk-ab__pillars .tk-icon { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--wash-2); color: var(--green); }
.tk-ab__pillars b { display: block; color: var(--green-ink); line-height: 1.4; }
.tk-ab__pillars small { display: block; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.7; }

.tk-ab__reach { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s5); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.tk-ab__reach div { padding: 14px 12px; text-align: center; background: var(--surface-2); }
.tk-ab__reach div + div { border-inline-start: 1px solid var(--line); }
.tk-ab__reach b { display: block; font: 800 var(--t-xl)/1.3 var(--f-ui); color: var(--green); }
.tk-ab__reach span { color: var(--muted); font-size: var(--t-xs); line-height: 1.5; }

.tk-ab__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: var(--s5) 0 0; }
.tk-ab__links .tk-link { display: inline-flex; align-items: center; gap: 6px; direction: ltr; }
.tk-ab__links .tk-link .tk-icon { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .tk-ab { grid-template-columns: 1fr; gap: var(--s4); }
  .tk-ab__book .bk3__stage { width: 150px; }
  .tk-ab__book { padding: var(--s4) 0 0; }
  .tk-ab__halo { width: 340px; height: 340px; margin: -170px 0 0 -170px; }
  .tk-ab__quote { padding: var(--s5) var(--s4) var(--s4); }
  .tk-ab__reach b { font-size: var(--t-lg); }
}