/* Planfla · "Uygulamayı yükle" düğmesi + iPhone rehberi (davranış: yukle.js) */

/* ---------- Yan menü satırı ---------- */
html body #planoxa-sidebar#planoxa-sidebar #px-sb-footer > #px-install-btn[hidden],
#px-install-btn[hidden] { display: none !important; }
html body #planoxa-sidebar#planoxa-sidebar .px-sb-footer > #px-install-btn { grid-column: 1 / -1; }
html body #planoxa-sidebar#planoxa-sidebar .px-sb-footer > #px-install-btn .px-svg-ico { color: var(--brand-hi, #34D399); }

/* ---------- Rehber penceresi ---------- */
#px-install-guide {
  --ig-bg: #0E121B; --ig-line: rgba(255,255,255,.09); --ig-fg: #E9EEF6; --ig-mut: #97A3B6; --ig-acc: #34D399; --ig-chip: rgba(255,255,255,.06);
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  font-family: inherit;
}
#px-install-guide[hidden] { display: none; }
html[data-px-theme="paper"] #px-install-guide {
  --ig-bg: #FFFFFF; --ig-line: rgba(15,23,42,.1); --ig-fg: #0F172A; --ig-mut: #5B6475; --ig-acc: #059669; --ig-chip: rgba(15,23,42,.05);
}
.px-ig-backdrop {
  position: absolute; inset: 0;
  background: rgba(3,5,10,.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.px-ig-sheet {
  position: relative; width: 100%; max-width: 400px;
  padding: 22px 20px 18px;
  border: 1px solid var(--ig-line); border-radius: 14px;
  background: var(--ig-bg); color: var(--ig-fg);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .22s ease, transform .26s cubic-bezier(.2,.8,.2,1);
}
#px-install-guide.is-open .px-ig-backdrop { opacity: 1; }
#px-install-guide.is-open .px-ig-sheet { opacity: 1; transform: none; }

.px-ig-head { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.px-ig-head img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.px-ig-head h2 { margin: 0 0 3px; font-size: 16.5px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; color: var(--ig-fg); }
.px-ig-head p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ig-mut); }

.px-ig-steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 0; }
.px-ig-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--ig-line); font-size: 14px; line-height: 1.5; }
.px-ig-steps li > b {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--ig-chip); color: var(--ig-acc);
}
.px-ig-steps strong { font-weight: 650; color: var(--ig-fg); }
.px-ig-steps small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ig-mut); }
.px-ig-ico {
  display: inline-grid; place-items: center; width: 24px; height: 24px; vertical-align: -6px;
  border-radius: 6px; background: var(--ig-chip); color: #3B82F6;
}
.px-ig-ico svg { width: 15px; height: 15px; }

.px-ig-ok {
  all: unset; box-sizing: border-box; display: block; width: 100%;
  height: 44px; border-radius: 999px; text-align: center; line-height: 44px;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  background: var(--ig-acc); color: #04130D;
}
html[data-px-theme="paper"] .px-ig-ok { color: #fff; }
.px-ig-ok:focus-visible { outline: 2px solid var(--ig-acc); outline-offset: 3px; }

/* Telefon: alttan açılan kart (Paylaş düğmesi de altta, göz oraya gitsin) */
@media (max-width: 600px) {
  #px-install-guide { align-items: flex-end; padding: 0; }
  .px-ig-sheet {
    max-width: none; border-radius: 18px 18px 0 0; border-bottom: 0;
    padding: 22px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-ig-backdrop, .px-ig-sheet { transition: none; }
}