/* ==========================================================================
   Uygulamayı yükle — kenar menü bloğu ve yükleme penceresi (assets/js/app-install.js)
   Uygulama web tabanlı (PWA: app.webmanifest + sw.js); bu dosya yalnızca tanıtım ve
   platforma göre yükleme adımları. Yüklü uygulamanın içinde (html.is-app) hepsi gizlenir.
   ========================================================================== */

.is-app [data-app-promo], .is-app [data-app-only-web] { display: none !important; }

/* ---------- kenar menü ---------- */
.side-app {
  position: relative; margin-top: 18px; padding: 14px 14px 14px; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid rgba(var(--accent-hi-rgb), .2);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(var(--cyan-rgb), .2), transparent 60%),
    linear-gradient(150deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .05) 70%);
}

.side-app__art { position: relative; height: 86px; margin-bottom: 8px; }
/* dizüstü: ekran + klavye tabanı */
.side-app__laptop {
  position: absolute; left: 4px; bottom: 9px; width: 116px; height: 66px; padding: 5px;
  border-radius: 9px 9px 3px 3px; border: 2px solid rgba(var(--accent-hi-rgb), .45);
  background: var(--bg-1);
}
.side-app__laptop::after {
  content: ''; position: absolute; left: -12px; right: -12px; bottom: -9px; height: 7px;
  border-radius: 2px 2px 7px 7px; background: linear-gradient(180deg, rgba(var(--accent-hi-rgb), .55), rgba(var(--accent-hi-rgb), .25));
}
.side-app__laptop i {
  display: block; height: 100%; border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(var(--accent-hi-rgb), .55) 0 30%, transparent 30%) 0 0 / 100% 7px no-repeat,
    linear-gradient(90deg, rgba(var(--cyan-rgb), .5) 0 22%, transparent 22% 26%, rgba(var(--accent-rgb), .45) 26% 48%, transparent 48% 52%, rgba(var(--accent-hi-rgb), .4) 52% 74%, transparent 74% 78%, rgba(var(--cyan-rgb), .35) 78%) 0 14px / 100% 22px no-repeat,
    linear-gradient(90deg, rgba(var(--accent-hi-rgb), .25) 0 60%, transparent 60%) 0 42px / 100% 5px no-repeat;
}
/* telefon: önde, süzülür */
.side-app__phone {
  position: absolute; right: 22px; bottom: 0; display: grid; place-items: center;
  width: 46px; height: 84px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .55);
  background: linear-gradient(160deg, #1a5cff, #2f7bff 45%, #22b8ee); color: #fff;
  box-shadow: 0 14px 30px -12px rgba(var(--accent-rgb), .9);
  animation: float-y 4.2s ease-in-out infinite;
}
.side-app__phone::before { content: ''; position: absolute; top: 4px; width: 14px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .55); }
.side-app__phone .ico { width: 22px; height: 22px; }
.side-app__badge {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 21px; margin-bottom: 6px; padding: 0 8px;
  border-radius: 11px; background: rgba(var(--accent-rgb), .18); color: var(--accent-hi); font-size: 11px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.side-app__badge .ico { width: 12px; height: 12px; }

.side-app strong { position: relative; display: block; font: 700 15.5px/1.25 var(--font-display); }
.side-app p { position: relative; margin: 4px 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.side-app__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.side-app__btns .btn { padding: 0 8px; }
.side-app__btns .ico { width: 16px; height: 16px; }

/* ==========================================================================
   Yükleme penceresi
   ========================================================================== */
.modal--app .modal__box.apx { max-width: 470px; padding: 24px 22px 20px; }

.apx__head { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.apx__icon { flex-shrink: 0; width: 64px; height: 64px; border-radius: 17px; box-shadow: 0 14px 30px -12px rgba(var(--accent-rgb), .9); }
.modal--app.is-open .apx__icon { animation: apx-pop .6s var(--ease-spring) .1s backwards; }
@keyframes apx-pop { from { transform: scale(.6) rotate(-12deg); opacity: 0; } }
.apx__head h3 { font-size: 19px; }
.apx__head p { margin-top: 2px; color: var(--text-mute); font-size: 12.5px; }

.apx__perks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 16px; }
.apx__perks li {
  display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; line-height: 1.35;
}
.modal--app.is-open .apx__perks li { animation: fade-up .45s var(--ease) backwards; animation-delay: calc(.12s + var(--i) * 60ms); }
.apx__perks .ico { flex-shrink: 0; width: 18px; height: 18px; color: var(--accent-hi); }

/* üç seçenekli kayan sekme */
.apx__tabs { position: relative; display: flex; width: 100%; }
.apx__tabs button { position: relative; z-index: 1; flex: 1; }
.apx__tabs button.is-active { background: none; box-shadow: none; color: var(--text); }
.apx__tabs .ico { width: 16px; height: 16px; }
.apx__glider {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 16px) / 3); border-radius: 9px;
  background: var(--bg-3); box-shadow: inset 0 0 0 1px rgba(var(--accent-hi-rgb), .28), 0 6px 18px -8px rgba(var(--accent-rgb), .8);
  transform: translateX(calc(var(--i, 0) * (100% + 4px))); transition: transform .45s var(--ease-spring);
}

/* bilgisayardan telefona: QR (kutu modül sayısının tam katı piksel — okuyucular kesirli boyutta zorlanıyor) */
.apx__qr {
  display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 12px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid rgba(var(--accent-hi-rgb), .22); animation: fade-up .35s var(--ease);
}
.apx__qr[hidden] { display: none; }
.apx__qr-code { flex-shrink: 0; padding: 6px; border-radius: 10px; background: #fff; line-height: 0; }
.apx__qr-code svg { display: block; width: var(--qr, 132px); height: var(--qr, 132px); }
.apx__qr b { display: block; font-size: 14.5px; }
.apx__qr small { display: block; margin-top: 3px; color: var(--text-mute); font-size: 12.5px; line-height: 1.45; }

.apx__pane { display: grid; gap: 12px; margin-top: 14px; animation: fade-up .35s var(--ease); }
.apx__pane[hidden] { display: none; }
.apx__go .ico { width: 19px; height: 19px; }
.apx__go:not([hidden]) { animation: apx-glow 2.4s ease-in-out infinite; }
@keyframes apx-glow { 50% { box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .14), 0 12px 30px -10px rgba(var(--accent-rgb), .9); } }

.apx__steps { display: grid; gap: 8px; counter-reset: apx; }
.apx__steps li {
  position: relative; display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 9px 12px 9px 46px;
  border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13.5px; line-height: 1.4;
  counter-increment: apx;
}
.apx__steps li::before {
  content: counter(apx); position: absolute; left: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-grad); color: #fff; font: 800 12px/1 var(--font);
}
.apx__steps b { color: var(--text); }
.apx__key {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin: 0 2px; vertical-align: middle;
  border-radius: 7px; background: var(--bg-3); border: 1px solid var(--line-strong); color: var(--accent-hi);
}
.apx__key .ico { width: 15px; height: 15px; }
.apx__alt { color: var(--text-mute); font-size: 12.5px; line-height: 1.5; }
.apx__alt b { color: var(--text-dim); }
.apx__warn { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(250, 178, 25, .1); border: 1px solid rgba(250, 178, 25, .3); color: #ffd27a; font-size: 13px; line-height: 1.45; }
.apx__warn .ico { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; }

.apx__done { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .3); color: var(--green-hi); font-size: 13.5px; font-weight: 700; }
.apx__done[hidden] { display: none; }
.apx__done .ico { flex-shrink: 0; width: 20px; height: 20px; }
.apx__note { display: flex; gap: 8px; margin-top: 14px; color: var(--text-mute); font-size: 12px; line-height: 1.5; }
.apx__note .ico { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; color: var(--accent-hi); }

@media (max-width: 767px) {
  .modal--app .modal__box.apx { padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); }
  .apx__perks { gap: 6px; margin: 14px 0 12px; }
  .apx__perks li { padding: 9px; font-size: 12px; }
  .apx__tabs button { padding: 0 6px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .side-app__phone, .apx__go:not([hidden]) { animation: none; }
}