*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #060e09;
  color: #f0ede4;
  font-family: 'Segoe UI', Arial, sans-serif;
  height: 100vh; width: 100vw;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

/* ===== FONT ===== */
@font-face {
  font-family: 'LPMQ';
  src: url('../assets/fonts/LPMQ.ttf') format('truetype'),
       url('../assets/fonts/LPMQ.eot') format('embedded-opentype');
  font-display: swap;
}

/* ── KEYFRAMES ── */
@keyframes fadeIn    { from{opacity:0} to{opacity:1} }
@keyframes fadeOut   { from{opacity:1} to{opacity:0} }
@keyframes slideUp   { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideDown { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn   { from{opacity:0;transform:scale(0.84)} to{opacity:1;transform:scale(1)} }
@keyframes badgePop  { from{opacity:0;transform:scale(0.72) translateY(12px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes lineDraw  { from{width:0;opacity:0} to{width:200px;opacity:1} }
@keyframes shimmer   { from{background-position:-200% center} to{background-position:200% center} }
@keyframes glow      { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes ringIn    { from{opacity:0;transform:translate(-50%,-50%) scale(.5)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes slideInR  { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }
@keyframes slideOutL { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(-60px)} }

/* cover */
@keyframes coverReveal {
  0%   { opacity:0; transform:scale(0.68) translateY(24px); filter:blur(14px) brightness(.6); }
  50%  { filter:blur(0) brightness(1.05); }
  100% { opacity:1; transform:scale(1) translateY(0); filter:blur(0) brightness(1); }
}
@keyframes coverFloat {
  0%,100% { transform:translateY(0px) scale(1); }
  50%     { transform:translateY(-7px) scale(1.008); }
}
@keyframes coverGlow {
  0%,100% { filter:drop-shadow(0 16px 40px rgba(201,162,39,.35)); }
  50%     { filter:drop-shadow(0 20px 60px rgba(201,162,39,.6)); }
}
@keyframes coverShimmer {
  0%   { left:-120%; }
  100% { left:220%; }
}

/* pause helper */
.an { animation-play-state: paused !important; }
body.go .an { animation-play-state: running !important; }

/* ── DECO ── */
.bg-glow {
  position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 65% 55% at 50% 50%, rgba(201,162,39,.07) 0%, transparent 70%);
  opacity:0; animation:fadeIn 1.5s ease .3s both;
}
.ring {
  position:fixed;border-radius:50%;
  border:1px solid rgba(201,162,39,.06);
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.5);
  pointer-events:none;
}
.r1{width:520px;height:520px;animation:ringIn 1.6s ease .5s forwards}
.r2{width:740px;height:740px;animation:ringIn 1.6s ease .8s forwards;border-color:rgba(201,162,39,.035)}
.r3{width:960px;height:960px;animation:ringIn 1.6s ease 1.1s forwards;border-color:rgba(201,162,39,.02)}

/* ── SECTIONS ── */
#sect-bismillah, #sect-intro, #sect-ayat, #sect-features, #sect-closing {
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:28px 24px;
  pointer-events:none;
  transition: opacity .9s ease;
}
#sect-bismillah, #sect-intro, #sect-ayat, #sect-features, #sect-closing { opacity:0; }

/* ════ BISMILLAH SECTION ════ */
.bism-arab {
  font-family:'LPMQ','Scheherazade New',serif;
  font-size:clamp(24px,5vw,48px);
  color:#c9a227; line-height:1.8;
  animation:fadeIn .9s ease .3s both;
  animation-play-state:paused;
}
.bism-latin {
  font-size:clamp(11px,2vw,16px);
  color:rgba(201,162,39,.45);
  letter-spacing:1px; margin-top:8px;
  animation:fadeIn .8s ease 1s both;
  animation-play-state:paused;
}
body.go-bism .bism-arab,
body.go-bism .bism-latin { animation-play-state:running; }

/* ════ AYAT ════ */
.ayat-ref {
  font-size:clamp(10px,1.5vw,13px);
  color:rgba(201,162,39,0.55);
  letter-spacing:2.5px; text-transform:uppercase;
  margin-bottom:28px;
  animation:fadeIn .8s ease both;
  animation-play-state:paused;
}
.ayat-arab {
  font-family:'LPMQ','Scheherazade New',serif;
  font-size:clamp(22px,4.5vw,44px);
  color:#c9a227;
  line-height:2.1; direction:rtl;
  margin-bottom:24px;
  animation:slideUp .9s ease .2s both;
  animation-play-state:paused;
  text-shadow:0 0 40px rgba(201,162,39,.2);
}
.ayat-latin {
  font-size:clamp(11px,1.6vw,15px);
  color:rgba(255,255,255,0.35);
  font-style:italic; margin-bottom:14px;
  animation:fadeIn .8s ease .6s both;
  animation-play-state:paused;
}
.ayat-terjemah {
  font-size:clamp(13px,2vw,19px);
  color:rgba(240,237,228,0.82);
  line-height:1.8; max-width:640px;
  animation:slideUp .9s ease .8s both;
  animation-play-state:paused;
}
.ayat-pulse {
  margin-top:32px; width:36px; height:36px;
  border-radius:50%;
  border:2px solid rgba(201,162,39,0.4);
  animation:glow 1.4s ease-in-out infinite, fadeIn .6s ease 1s both;
  animation-play-state:paused;
  position:relative;
}
.ayat-pulse::after {
  content:''; position:absolute; inset:5px;
  border-radius:50%; background:rgba(201,162,39,0.25);
  animation:glow 1.4s ease-in-out .7s infinite;
  animation-play-state:paused;
}
body.go-ayat .ayat-ref,
body.go-ayat .ayat-arab,
body.go-ayat .ayat-latin,
body.go-ayat .ayat-terjemah,
body.go-ayat .ayat-pulse,
body.go-ayat .ayat-pulse::after { animation-play-state:running; }

/* ════ INTRO ════ */

/* --- Bismillah --- */
.bismillah-wrap {
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
}
.bismillah {
  font-family:'LPMQ','Scheherazade New',serif;
  font-size:clamp(30px,7vw,58px);
  color:#c9a227;line-height:1.5;letter-spacing:2px;
  animation:scaleIn 1.2s cubic-bezier(.22,1,.36,1) .4s both, fadeOut .7s ease 3.5s forwards;
}
.bismillah-latin {
  font-size:clamp(10px,1.8vw,13px);color:rgba(201,162,39,.55);letter-spacing:1px;margin-top:4px;
  animation:fadeIn .8s ease 1s both, fadeOut .7s ease 3.5s forwards;
}

/* --- Pemprov header --- */
.pemprov-header {
  display:flex;align-items:center;gap:clamp(10px,2vw,18px);
  margin-bottom:clamp(12px,2.5vh,22px);
  opacity:0;
  animation:slideDown .8s cubic-bezier(.22,1,.36,1) 4.2s forwards;
}
.pemprov-logo {
  height:clamp(60px,11vw,96px);width:auto;
  filter:drop-shadow(0 0 14px rgba(201,162,39,.3));
  object-fit:contain;
}
.pemprov-logo-fallback {
  height:clamp(44px,8vw,68px);width:clamp(44px,8vw,68px);
  border-radius:50%;border:2px dashed rgba(201,162,39,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,4vw,32px);color:rgba(201,162,39,.4);
}
.pemprov-meta { text-align:left; }
.pemprov-label { font-size:clamp(16px,3.2vw,26px);font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#f0ede4;margin-bottom:6px; }
.pemprov-name  { font-size:clamp(16px,3vw,24px);font-weight:600;color:rgba(201,162,39,.8);letter-spacing:1px; }

/* --- Cover --- */
.cover-wrap {
  position:relative;
  opacity:0;
  overflow:hidden;
  border-radius:4px;
  animation:coverReveal 1.6s cubic-bezier(.22,1,.36,1) 5.1s forwards;
  margin-bottom:clamp(12px,2vh,20px);
}
body.go .cover-wrap {
  animation:coverReveal 1.6s cubic-bezier(.22,1,.36,1) 5.1s forwards,
            coverFloat  4s ease-in-out 7s infinite,
            coverGlow   3s ease-in-out 6.8s infinite;
}
.cover-img {
  height:clamp(210px,38vh,320px);
  width:auto;max-width:clamp(150px,26vw,240px);
  object-fit:contain;
  display:block;
}
.cover-fallback {
  height:clamp(140px,26vh,220px);width:clamp(100px,18vw,160px);
  border-radius:6px;
  background:linear-gradient(160deg,#1a3025,#0d1b12);
  border:2px solid rgba(201,162,39,.35);
  display:flex;align-items:center;justify-content:center;
  font-family:'LPMQ','Scheherazade New',serif;
  font-size:36px;color:rgba(201,162,39,.6);
}
/* shimmer sweep on cover */
.cover-wrap::after {
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
  border-radius:6px;
  left:-120%;width:60%;height:100%;
  animation:coverShimmer 1.4s ease var(--cover-shimmer, 6.8s) forwards;
  pointer-events:none;
}

/* --- App title --- */
.app-name-ar {
  font-family:'LPMQ','Scheherazade New',serif;
  font-size:clamp(14px,2.8vw,22px);
  color:rgba(201,162,39,.65);
  letter-spacing:2px;
  opacity:0;
  animation:fadeIn .7s ease 6.8s forwards;
  margin-bottom:4px;
}
.app-name {
  font-size:clamp(22px,5vw,42px);font-weight:900;
  background:linear-gradient(135deg,#e8c44a 0%,#c9a227 50%,#a07820 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  opacity:0;
  animation:slideUp .9s cubic-bezier(.22,1,.36,1) 7.1s forwards, shimmer 3s linear 8s infinite;
  margin-bottom:4px;
}
.app-sub {
  font-size:clamp(10px,1.8vw,13px);color:rgba(184,201,176,.6);letter-spacing:1px;
  opacity:0;animation:fadeIn .7s ease 7.6s forwards;margin-bottom:clamp(12px,2vh,20px);
}

/* --- Divider --- */
.divider {
  height:1px;width:0;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.45),transparent);
  animation:lineDraw .7s ease 8s forwards;
  margin-bottom:clamp(10px,1.8vh,18px);
}

/* --- Orgs bawah --- */
.org-row {
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,2vw,16px);
  flex-wrap:wrap;
  opacity:0;animation:fadeIn .6s ease 8.3s forwards;
  margin-bottom:clamp(12px,2vh,22px);
}
.org-item { font-size:clamp(9px,1.6vw,12px);color:rgba(184,201,176,.55);font-weight:600; }
.org-sep  { width:3px;height:3px;border-radius:50%;background:rgba(201,162,39,.3); }

/* --- Badge --- */
.mtq-badge {
  display:inline-flex;align-items:center;gap:8px;
  padding:clamp(7px,1.4vw,11px) clamp(16px,3vw,26px);border-radius:40px;
  background:rgba(201,162,39,.1);border:1.5px solid rgba(201,162,39,.5);
  box-shadow:0 0 28px rgba(201,162,39,.12);
  opacity:0;animation:badgePop .7s cubic-bezier(.22,1,.36,1) 8.8s both;
}
.mtq-icon { font-size:clamp(14px,2.5vw,20px); }
.mtq-text { font-size:clamp(11px,2vw,15px);font-weight:800;color:#c9a227; }

/* ════ FEATURES ════ */
#sect-features { gap:0;justify-content:center; }

.feat-header {
  font-size:clamp(9px,1.6vw,11px);font-weight:700;letter-spacing:2.5px;
  text-transform:uppercase;color:rgba(201,162,39,.6);margin-bottom:18px;
}
.feat-stage {
  width:100%;max-width:900px;position:relative;height:clamp(260px,40vh,360px);
}
.feat-slide {
  position:absolute;inset:0;
  display:flex;align-items:center;gap:clamp(18px,4vw,50px);
  padding:0 clamp(14px,4vw,40px);
  opacity:0;pointer-events:none;
}
.feat-slide.active  { animation:slideInR .55s cubic-bezier(.22,1,.36,1) forwards;pointer-events:auto; }
.feat-slide.leaving { animation:slideOutL .45s ease forwards; }

.feat-text { flex:0 0 clamp(170px,34%,300px);text-align:left; }
.feat-icon { font-size:clamp(34px,5.5vw,52px);margin-bottom:10px;display:block;line-height:1; }
.feat-icon svg { width:clamp(34px,5.5vw,52px);height:clamp(34px,5.5vw,52px); }
.feat-name { font-size:clamp(19px,3.8vw,32px);font-weight:900;color:#f0ede4;margin-bottom:8px;line-height:1.2; }
.feat-desc { font-size:clamp(10px,1.7vw,13px);color:#7a9a82;line-height:1.85; }
.feat-desc strong { color:#b8c9b0; }

.feat-mockup {
  flex:1;
  background:linear-gradient(135deg,rgba(18,32,24,.9),rgba(10,21,16,.95));
  border:1px solid rgba(255,255,255,.08);border-radius:14px;
  height:clamp(190px,34vh,300px);overflow:hidden;position:relative;
  display:flex;flex-direction:column;
}
.mk-bar {
  height:34px;background:rgba(0,0,0,.3);border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;padding:0 10px;gap:7px;flex-shrink:0;
}
.mk-dot { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.1); }
.mk-bar-title { font-size:10px;font-weight:700;color:rgba(255,255,255,.25);flex:1;text-align:center; }
.mk-body { flex:1;padding:10px;overflow:hidden;display:flex;flex-direction:column;gap:6px; }
.mk-row  { display:flex;align-items:center;gap:7px; }
.mk-num  { width:20px;height:20px;border-radius:5px;background:rgba(201,162,39,.14);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:8px;color:rgba(201,162,39,.7);font-weight:700; }
.mk-line { height:7px;border-radius:4px;background:rgba(255,255,255,.07);flex:1; }
.mk-line-gold { background:rgba(201,162,39,.18); }
.mk-line-sm   { height:5px; }
.mk-arab-sm   { font-family:'LPMQ','Scheherazade New',serif;font-size:15px;color:rgba(201,162,39,.8);flex-shrink:0; }

.mk-player { padding:12px;display:flex;flex-direction:column;gap:9px; }
.mk-player-arab { font-family:'LPMQ','Scheherazade New',serif;font-size:clamp(16px,2.8vw,24px);color:#c9a227;text-align:right;line-height:1.6; }
.mk-player-bar  { display:flex;align-items:center;gap:7px; }
.mk-player-track{ flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);position:relative;overflow:hidden; }
.mk-player-fill { position:absolute;inset:0;right:55%;background:rgba(201,162,39,.6); }
.mk-player-time { font-size:9px;color:rgba(255,255,255,.28);flex-shrink:0; }
.mk-player-btns { display:flex;justify-content:center;gap:14px;align-items:center; }
.mk-btn-play { width:34px;height:34px;border-radius:50%;background:rgba(201,162,39,.2);border:1.5px solid rgba(201,162,39,.5);display:flex;align-items:center;justify-content:center;font-size:13px; }
.mk-btn-sm   { width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;font-size:10px; }

.mk-mushaf { flex:1;display:flex;gap:5px;padding:8px;align-items:stretch; }
.mk-page   { flex:1;background:rgba(255,255,255,.04);border-radius:7px;border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:7px; }
.mk-page-num  { font-size:8px;color:rgba(255,255,255,.18);font-weight:700; }
.mk-page-lines{ width:100%;display:flex;flex-direction:column;gap:4px; }
.mk-page-line { height:5px;border-radius:3px;background:rgba(255,255,255,.07); }
.mk-page-line.gold { background:rgba(201,162,39,.18); }

@media (max-width: 600px) {
  .mk-page-extra { display:none; }
  .mk-mushaf { justify-content:center; }
}

.mk-blur-row { display:flex;align-items:center;gap:7px;padding:3px 0; }
.mk-blur-text { flex:1;height:15px;border-radius:4px;background:rgba(255,255,255,.07);filter:blur(2px); }
.mk-blur-text.revealed { background:transparent;filter:none;font-family:'LPMQ','Scheherazade New',serif;font-size:14px;color:rgba(201,162,39,.85);height:auto; }
.mk-reveal-btn { font-size:8px;padding:3px 5px;border-radius:4px;background:rgba(201,162,39,.14);color:rgba(201,162,39,.7);flex-shrink:0; }
.mk-hafal      { font-size:8px;padding:2px 5px;border-radius:4px;background:rgba(16,185,129,.14);color:rgba(16,185,129,.8);flex-shrink:0; }

.mk-doa-cat  { font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(201,162,39,.6);margin-bottom:5px; }
.mk-doa-arab { font-family:'LPMQ','Scheherazade New',serif;font-size:clamp(14px,2.3vw,19px);color:#c9a227;text-align:right;line-height:1.7;margin-bottom:7px; }
.mk-doa-latin{ font-size:9px;color:rgba(184,201,176,.55);line-height:1.6;font-style:italic; }

.mk-ind-item  { display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.04); }
.mk-ind-icon  { font-size:13px;flex-shrink:0; }
.mk-ind-text  { flex:1; }
.mk-ind-title { height:6px;border-radius:3px;background:rgba(255,255,255,.11);margin-bottom:3px; }
.mk-ind-sub   { height:5px;border-radius:3px;background:rgba(255,255,255,.06);width:65%; }
.mk-ind-arrow { font-size:9px;color:rgba(255,255,255,.18); }

.mk-huruf-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:5px;direction:rtl; }
.mk-huruf-card { background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:7px;padding:7px 3px;text-align:center; }
.mk-huruf-arab { font-family:'LPMQ','Scheherazade New',serif;font-size:clamp(16px,2.8vw,24px);color:#c9a227;display:block;margin-bottom:2px;line-height:1.4; }
.mk-huruf-name { font-size:7px;color:rgba(255,255,255,.35);font-weight:700; }

.feat-dots { display:flex;gap:6px;margin-top:16px; }
.feat-dot  { width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.14);transition:all .3s; }
.feat-dot.active { width:20px;background:#c9a227; }

.feat-progress { width:100%;max-width:900px;height:2px;background:rgba(255,255,255,.06);border-radius:1px;margin-top:12px;overflow:hidden; }
.feat-progress-fill { height:100%;background:rgba(201,162,39,.5);border-radius:1px;width:0%;transition:width linear; }

/* ════ CLOSING ════ */
#sect-closing { gap:0; }
.cl-pemprov { display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px; }
.cl-pemprov-logo { height:clamp(56px,9vw,80px);width:auto;filter:drop-shadow(0 0 12px rgba(201,162,39,.3));object-fit:contain; }
.cl-pemprov-name { font-size:clamp(14px,2.6vw,22px);font-weight:800;color:rgba(184,201,176,.7);text-align:left;line-height:1.3; }
.cl-mushaf {
  height:clamp(140px,24vh,210px);width:auto;
  object-fit:contain;
  filter:drop-shadow(0 16px 40px rgba(201,162,39,.4));
  margin-bottom:clamp(10px,1.8vh,16px);
}
.cl-app-name {
  font-size:clamp(20px,4.5vw,46px);font-weight:900;
  background:linear-gradient(135deg,#e8c44a,#c9a227,#a07820);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 3s linear infinite;margin-bottom:6px;
}
.cl-app-sub { font-size:clamp(11px,2vw,15px);color:rgba(184,201,176,.5);margin-bottom:22px;letter-spacing:1px; }
.cl-url-wrap {
  display:inline-flex;align-items:center;gap:10px;
  padding:clamp(10px,1.8vw,14px) clamp(20px,4vw,36px);border-radius:16px;
  background:rgba(201,162,39,.08);border:1.5px solid rgba(201,162,39,.38);
  box-shadow:0 0 40px rgba(201,162,39,.1);margin-bottom:22px;
}
.cl-url { font-size:clamp(13px,2.6vw,21px);font-weight:800;color:#c9a227;letter-spacing:.5px; }
.cl-badge-row { display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:20px; }
.cl-badge {
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:20px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  font-size:clamp(9px,1.6vw,11px);font-weight:600;color:#7a9a82;
}
.cl-org { font-size:clamp(9px,1.6vw,12px);color:rgba(184,201,176,.35);line-height:1.9;margin-bottom:18px; }

/* QR Code */
.cl-qr-wrap {
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
#cl-qrcode canvas, #cl-qrcode img {
  border-radius:8px;
  border:3px solid rgba(201,162,39,.35);
  box-shadow:0 0 24px rgba(201,162,39,.15);
  padding:8px;
  background:#fff;
  display:block;
}
.cl-qr-label {
  font-size:clamp(9px,1.4vw,11px);color:rgba(201,162,39,.5);
  letter-spacing:1px;font-weight:600;
}

/* ── CONTROLS ── */
.controls {
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;z-index:200;pointer-events:auto;
}
.btn-ctrl {
  padding:9px 20px;border-radius:20px;
  font-size:13px;font-weight:700;cursor:pointer;
  border:1.5px solid rgba(201,162,39,.4);transition:all .2s;
}
.btn-start   { background:rgba(201,162,39,.15);color:#c9a227; }
.btn-start:hover { background:rgba(201,162,39,.28); }
.btn-restart { background:rgba(255,255,255,.05);color:#b8c9b0;display:none; }
.btn-restart:hover { background:rgba(255,255,255,.1); }

.rec-dot {
  position:fixed;top:16px;right:16px;z-index:200;
  display:none;align-items:center;gap:6px;
  font-size:12px;font-weight:700;color:#ef4444;
}
.rec-circle { width:10px;height:10px;border-radius:50%;background:#ef4444;animation:glow 1s ease-in-out infinite; }
.timer { font-variant-numeric:tabular-nums;color:rgba(255,255,255,.45);font-weight:700; }
.hint { position:fixed;top:16px;left:50%;transform:translateX(-50%);font-size:11px;color:rgba(255,255,255,.13);pointer-events:none;white-space:nowrap; }
.btn-back-home { position:fixed;top:12px;left:12px;z-index:999;color:rgba(255,255,255,.4);font-size:18px;text-decoration:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:color .2s,background .2s; }
.btn-back-home:hover { color:#fff;background:rgba(255,255,255,.12); }