/* ==========================================================================
   TafsirKurd 2.0 — homepage §6 «بەڕنامە», premium pass.
   A deep-green showcase card: headline, feature grid, store buttons, facts; three
   real iPhone screenshots that fan open as the section scrolls in.
   Motion: transform/opacity only. CSS view timeline where supported; otherwise the
   existing IntersectionObserver adds .is-in (tk3-home.js phones()).
   ========================================================================== */
.tk-app.tk-app--pro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s7); align-items: center; padding: var(--s8) var(--s7);
  background: radial-gradient(120% 90% at 15% 110%, rgba(140, 196, 164, .22) 0%, rgba(140, 196, 164, 0) 55%),
              radial-gradient(90% 70% at 100% 0%, rgba(216, 181, 106, .14) 0%, rgba(216, 181, 106, 0) 60%),
              linear-gradient(160deg, #143522 0%, #0E1A14 72%);
  box-shadow: 0 40px 80px -40px rgba(8, 20, 14, .7); }
.tk-app--pro h2 { font-size: var(--t-h2); line-height: 1.2; margin-top: var(--s3); }
.tk-app__lede { margin: var(--s4) 0 0; color: #D7CDB4; font-size: var(--t-lg); line-height: 1.8; max-width: 34rem; }

.tk-app__feats { list-style: none; margin: var(--s6) 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
.tk-app__feats li { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--r-md);
  background: rgba(244, 232, 204, .04); border: 1px solid rgba(244, 232, 204, .08); }
.tk-app__feats .tk-icon { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 11px; background: rgba(140, 196, 164, .16); color: #8CC4A4; }
.tk-app__feats b { display: block; color: #FBF3DD; font-size: var(--t-md); line-height: 1.4; }
.tk-app__feats small { display: block; color: #B9B09A; font-size: var(--t-xs); line-height: 1.55; }

/* store buttons: light on the dark card */
.tk-app__storebar { max-width: 460px; }
.tk-app__storebar .tk-store { background: #F4E8CC; color: #0d1510; }
.tk-app__storebar .tk-store:hover { background: #fff; color: #0d1510; }
.tk-app__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s4) 0 0; }
.tk-app__facts span { padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(244, 232, 204, .18); color: #D7CDB4; font-size: var(--t-xs); }
.tk-app__facts span:first-child { background: rgba(140, 196, 164, .16); border-color: rgba(140, 196, 164, .35); color: #8CC4A4; font-weight: 700; }

/* ── the iPhones ── */
.tk-app__stage { position: relative; height: 560px; }
.tk-app__glow { position: absolute; left: 50%; top: 50%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; z-index: 0;
  background: radial-gradient(closest-side, rgba(140, 196, 164, .28), rgba(140, 196, 164, 0)); }
.tk-iphone { position: absolute; left: 50%; top: 50%; z-index: 1; width: 236px; aspect-ratio: 540 / 1174; padding: 7px; border-radius: 42px;
  background: linear-gradient(145deg, #5a605c 0%, #262a28 40%, #3a3f3c 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 40px 60px -28px rgba(0, 0, 0, .75);
  transform: translate3d(-50%, -50%, 0); }
.tk-iphone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 35px; }
/* the app tour plays inside the same iPhone as the screenshots: bezel + screen + a drawn Dynamic Island
   (the 9:16 footage is cover-cropped ~9% per side to the phone's screen; its text is centred) */
.tk-app__promo { z-index: 3; position: absolute; left: 50%; top: 50%; width: 250px; aspect-ratio: 540 / 1174; padding: 7px; border-radius: 42px; transform: translate3d(-50%, -50%, 0);
  background: linear-gradient(145deg, #5a605c 0%, #262a28 40%, #3a3f3c 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 40px 60px -28px rgba(0, 0, 0, .75); }
.tk-app__promo img { height: 100%; border-radius: 35px; }
.tk-app__promo video { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 35px; }
.tk-app__promo::before { content: ""; position: absolute; z-index: 2; top: 17px; left: 50%; width: 30%; height: 22px; margin-left: -15%; border-radius: 999px; background: #000; pointer-events: none; }
.tk-app__promo .tk-promo__snd { z-index: 2; bottom: 22px; inset-inline-end: 20px; }
.tk-iphone--l, .tk-iphone--r { z-index: 2; width: 214px; }
/* fanned (final) positions */
.tk-app__stage.is-in .tk-iphone--l { transform: translate3d(-106%, -44%, 0) rotate(-8deg); }
.tk-app__stage.is-in .tk-iphone--r { transform: translate3d(6%, -44%, 0) rotate(8deg); }
.tk-app__stage .tk-iphone, .tk-app__stage .tk-app__promo { transition: transform 1.1s var(--ease); }
.tk-app__stage .tk-app__promo { transform: translate3d(-50%, -42%, 0); }
.tk-app__stage.is-in .tk-app__promo { transform: translate3d(-50%, -50%, 0); }

/* native scroll-driven fan-out (compositor): phones spread while the section scrolls in */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tk-app__stage { view-timeline: --appstage block; }
    .tk-app__stage .tk-iphone, .tk-app__stage .tk-app__promo { transition: none; animation-timeline: --appstage; animation-range: entry 10% cover 45%; animation-fill-mode: both; animation-timing-function: linear; }
    .tk-app__stage .tk-app__promo { animation-name: tkAppC; }
    .tk-app__stage .tk-iphone--l { animation-name: tkAppL; }
    .tk-app__stage .tk-iphone--r { animation-name: tkAppR; }
    .tk-app__glow { animation: tkAppGlow linear both; animation-timeline: --appstage; animation-range: entry 0% cover 50%; }
  }
}
@keyframes tkAppC { from { transform: translate3d(-50%, -38%, 0) scale(.94); } to { transform: translate3d(-50%, -50%, 0); } }
@keyframes tkAppL { from { transform: translate3d(-50%, -40%, 0) rotate(0deg); opacity: .4; } to { transform: translate3d(-106%, -44%, 0) rotate(-8deg); opacity: 1; } }
@keyframes tkAppR { from { transform: translate3d(-50%, -40%, 0) rotate(0deg); opacity: .4; } to { transform: translate3d(6%, -44%, 0) rotate(8deg); opacity: 1; } }
@keyframes tkAppGlow { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .tk-app.tk-app--pro { grid-template-columns: 1fr; padding: var(--s6) var(--s5); gap: var(--s5); }
  .tk-app__feats { grid-template-columns: 1fr; }
  .tk-app__stage { height: 440px; }
  .tk-iphone { width: 188px; border-radius: 34px; padding: 6px; }
  .tk-iphone img { border-radius: 28px; }
  .tk-iphone--l, .tk-iphone--r { width: 168px; }
  .tk-app__promo { width: 196px; padding: 6px; border-radius: 34px; }
  .tk-app__promo img, .tk-app__promo video { border-radius: 28px; }
  .tk-app__promo video { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
  .tk-app__promo::before { top: 13px; height: 17px; }
}
@media (max-width: 420px) {
  .tk-app__stage { height: 400px; }
  .tk-iphone { width: 170px; } .tk-iphone--l, .tk-iphone--r { width: 150px; }
  .tk-app__promo { width: 180px; }
}