/* =====================================================================
   LikedWin — App Store / Google Play sahnesi (ums-*)
   ÖZEL BÖLÜM (extras/uygulama-magaza) — markup: extra.php · zamanlama: extra.js
   Sahne kabuğu (adımlar, pencere, sipariş, görev paneli, rapor, istatistik,
   imleç) extras/organik-hit/extra.css'ten gelir (css_from). Burada yalnız
   mağazaya özel parçalar. Gradyan YOK; renkler token'dan. Mağaza rengi:
   Google Play yeşili / App Store mavisi (--ums-store), koyu temada açılır.
   ===================================================================== */

.ums { --ums-store: #01875f; --ums-store-soft: rgba(1, 135, 95, .1); --ums-star: #f5a524; }
.ums--apple { --ums-store: #0a84ff; --ums-store-soft: rgba(10, 132, 255, .1); }
:root[data-theme="dark"] .ums { --ums-store: #3ad6a2; --ums-store-soft: rgba(58, 214, 162, .14); }
:root[data-theme="dark"] .ums--apple { --ums-store: #5eaeff; --ums-store-soft: rgba(94, 174, 255, .16); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .ums { --ums-store: #3ad6a2; --ums-store-soft: rgba(58, 214, 162, .14); }
    :root:not([data-theme]) .ums--apple { --ums-store: #5eaeff; --ums-store-soft: rgba(94, 174, 255, .16); }
}

/* 5 adımlı senaryolarda mobil adım ızgarası 5 sütun */
@media (max-width: 960px) {
    .ums[data-steps="5"] .ohs__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Sipariş formu: en fazla 4 blok sığsın */
.ums .ohs-order { gap: 11px; }
.ums .ohs-order__block .ohs-field { height: 42px; }
.ums .ohs-order__block .ohs-qty__opt { height: 36px; }
.ums-storeico { background: var(--ums-store) !important; }
:root[data-theme="dark"] .ums-storeico { color: #0f1320 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ums-storeico { color: #0f1320 !important; } }

/* ---------- Uygulama simgesi ---------- */
.ums-ico {
    --ums-is: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--ums-is);
    height: var(--ums-is);
    border-radius: 24%;
    background: var(--ums-ic, #888);
    color: #fff;
    font-size: calc(var(--ums-is) * .42);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.ums-ico--s { --ums-is: 36px; }
.ums-ico--m { --ums-is: 48px; }
.ums-ico--l { --ums-is: 72px; }

/* ---------- Mağazada arama + sıralama ---------- */
.ums-search { display: flex; flex-direction: column; gap: 12px; }
.ums-search .ohs-search__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ums-sbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}
.ums-sbar > i { font-size: 13px; color: var(--muted); }
.ums-sbar.is-focus { border-color: var(--ums-store); box-shadow: 0 0 0 3px var(--ums-store-soft); }
.ums-sbar.is-focus .ohs-caret { display: inline-block; background: var(--ums-store); }

.ums-res-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: ums-rank; }
.ums-res {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: opacity .35s ease, transform .35s ease, background var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.ums-res__rank { width: 16px; flex: 0 0 auto; font-size: 13px; font-weight: 800; color: var(--muted-2); text-align: center; }
.ums-res__rank::before { counter-increment: ums-rank; content: counter(ums-rank); }
.ums-res__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; margin-right: auto; }
.ums-res__body b { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ums-res__body small { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ums-res__body small i { font-size: 9px; color: var(--ums-star); }
.ums-res.is-me { border-color: var(--ums-store); background: var(--ums-store-soft); }
.ums-res.is-me .ums-res__rank { color: var(--ums-store); }
.ums-res.is-hit { box-shadow: 0 0 0 3px var(--ums-store-soft); }
.ums-get {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    border: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ums-store);
}
.ums-res.is-me .ums-get { background: var(--ums-store); border-color: var(--ums-store); color: #fff; }
:root[data-theme="dark"] .ums-res.is-me .ums-get { color: #0f1320; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ums-res.is-me .ums-get { color: #0f1320; } }
.ums-res-list.is-empty .ums-res { opacity: 0; transform: translateY(6px); }
.ums-search .ohs-res__up { order: 0; }

/* ---------- Uygulama sayfası ---------- */
.ums-app { display: flex; flex-direction: column; gap: 14px; }
.ums-app__head { display: flex; align-items: center; gap: 16px; }
.ums-app__name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ums-app__name b { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 20px; font-weight: 800; color: var(--ink); }
.ums-app__name small { font-size: 13px; font-weight: 700; color: var(--ums-store); }
.ums-app__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ums-app__meta span { padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--muted); }
.ums-app__meta i { font-size: 9px; color: var(--ums-star); }
.ums-app__head--s .ums-app__name b { font-size: 16px; }
.ums-app__head--s .ums-app__name small { color: var(--muted); font-weight: 600; }

.ums-install {
    position: relative;
    display: grid;
    place-items: center;
    height: 42px;
    border-radius: 10px;
    background: var(--ums-store);
    color: #fff;
    font-size: 14.5px;
    font-weight: 800;
    overflow: hidden;
    transition: transform .15s ease;
}
.ums--apple .ums-install { width: 128px; border-radius: var(--radius-pill); }
:root[data-theme="dark"] .ums-install { color: #0f1320; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ums-install { color: #0f1320; } }
.ums-install > * { grid-area: 1 / 1; transition: opacity .25s ease; }
.ums-install__prog { width: 82%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .35); overflow: hidden; opacity: 0; }
.ums-install__prog i { display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left center; }
.ums-install__done { opacity: 0; }
.ums-install.is-load .ums-install__idle { opacity: 0; }
.ums-install.is-load .ums-install__prog { opacity: 1; }
.ums-install.is-done .ums-install__idle,
.ums-install.is-done .ums-install__prog { opacity: 0; }
.ums-install.is-done .ums-install__done { opacity: 1; }
.ums-install.is-press { transform: scale(.96); }

.ums-shots-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ums-phone-mini {
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: 150px;
    padding: 14px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--surface-2);
}
.ums-phone-mini > i:first-child { font-size: 22px; color: #f26b3a; margin-bottom: 4px; }
.ums-app__about { display: flex; flex-direction: column; gap: 7px; margin: 0; font-size: 13px; color: var(--ink); }

/* ---------- Kullanım: telefon + işlem paneli ---------- */
.ums-use { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 18px; align-items: center; }
.ums-phone {
    display: flex;
    flex-direction: column;
    gap: 9px;
    height: 430px;
    padding: 16px 13px;
    border: 6px solid var(--solid-dark);
    border-radius: 30px;
    background: var(--surface);
    overflow: hidden;
}
.ums-phone__bar { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 4px; font-size: 15px; color: var(--ink); }
.ums-phone__bar b { font-weight: 800; }
.ums-phone__bar i { color: var(--muted); }
.ums-phone__search {
    display: flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 12px;
    border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
    font-size: 12.5px; color: var(--muted);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.ums-phone__search.is-tap { border-color: #f26b3a; box-shadow: 0 0 0 3px rgba(242, 107, 58, .15); }
.ums-phone__card {
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    transition: border-color var(--ease), background var(--ease), transform .2s ease;
}
.ums-phone__card > i { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; background: rgba(242, 107, 58, .12); color: #f26b3a; font-size: 16px; }
.ums-phone__card span { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.ums-phone__card b { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ums-phone__card small { font-size: 11px; color: var(--muted); }
.ums-phone__card em { font-size: 13px; color: var(--muted-2); }
.ums-phone__card.is-tap { border-color: #f26b3a; background: rgba(242, 107, 58, .06); transform: scale(.98); }
.ums-phone__card em.is-on { color: #e0567a; font-weight: 900; }
.ums-phone__card em.is-on::before { content: '\f004'; font-family: 'Font Awesome 6 Free'; font-weight: 900; }
.ums-use .ums-hud { position: static; width: auto; }

/* ---------- 5 yıldız + yorum ---------- */
.ums-rate { display: flex; flex-direction: column; gap: 16px; }
.ums-stars { display: flex; gap: 10px; font-size: 34px; color: var(--line-strong); }
.ums-stars i { transition: color .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.ums-stars i.is-on { color: var(--ums-star); transform: scale(1.08); }
.ums-compose {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 96px;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    background: var(--surface);
    font-size: 14px;
    color: var(--ink);
}
.ums-compose small { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.ums-compose.is-focus { border-color: var(--ums-store); box-shadow: 0 0 0 3px var(--ums-store-soft); }
.ums-compose.is-focus .ohs-caret { display: inline-block; background: var(--ums-store); }
.ums-send { align-self: flex-end; }
.ums-send.is-press { transform: scale(.95); }

/* ---------- Rapor: kanıt küçük resimleri ---------- */
.ums .ohs-report { gap: 10px; }
.ums .ohs-report .ohs-sig { gap: 6px; }
.ums .ohs-report .ohs-sig li { padding-top: 7px; padding-bottom: 7px; }
.ums .ohs-report__prog { padding-top: 12px; padding-bottom: 12px; }
.ums .ohs-report__head { padding-bottom: 10px; }
.ums-shots {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}
.ums-shot { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; transition: opacity .35s ease, transform .4s cubic-bezier(.2, .9, .3, 1.2); }
.ums-shot.is-off { opacity: 0; transform: scale(.85); }
.ums-shot small { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.ums-shot__img {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 44px; height: 58px;
    padding: 7px 6px;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    background: var(--surface-2);
    overflow: hidden;
}
.ums-shot__img > i:first-child { font-size: 12px; color: var(--ums-store); }
.ums-shot__img .ohs-ln { height: 5px; width: 90%; }
.ums-shot__img .ohs-ln--m { width: 60%; }
.ums-shot__img::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; }
.ums-shot.is-snap .ums-shot__img::after { animation: ums-flash .5s ease-out; }
@keyframes ums-flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.ums-shots__cap { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; }
.ums-shots__cap i { color: var(--ums-store); }

/* ---------- Yorumlar (yorum senaryosunun sonu) ---------- */
.ums-reviews { display: flex; flex-direction: column; gap: 14px; }
.ums-rsum { display: flex; align-items: center; gap: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.ums-rsum__big { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 0 0 auto; }
.ums-rsum__big b { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 40px; font-weight: 800; line-height: 1; color: var(--ink); }
.ums-rsum__stars { display: flex; gap: 2px; font-size: 12px; color: var(--ums-star); }
.ums-rsum__big small { font-size: 11.5px; color: var(--muted); }
.ums-rsum__bars { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; }
.ums-rsum__bars span { display: flex; align-items: center; gap: 8px; }
.ums-rsum__bars small { width: 10px; font-size: 11px; font-weight: 700; color: var(--muted); }
.ums-rsum__bars i { display: block; height: 7px; flex: 1 1 auto; border-radius: 4px; background: var(--line); overflow: hidden; }
.ums-rsum__bars em { display: block; height: 100%; background: var(--ums-store); }
.ums-rv-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ums-rv { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: opacity .4s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2); }
.ums-rv .ohs-who__ava, .ums-rv__ini { width: 28px; height: 28px; flex: 0 0 auto; }
.ums-rv__ini { display: grid; place-items: center; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 800; }
.ums-rv__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-right: auto; }
.ums-rv__body b { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.ums-rv__body small { font-size: 12.5px; color: var(--text); }
.ums-rv__st { display: inline-flex; gap: 1px; font-size: 9.5px; color: var(--ums-star); }
.ums-rv.is-new { border-color: var(--ums-store); background: var(--ums-store-soft); }
.ums-rv__tag { padding: 3px 8px; border-radius: var(--radius-pill); background: var(--ums-store); color: #fff; font-size: 10.5px; font-weight: 800; }
:root[data-theme="dark"] .ums-rv__tag { color: #0f1320; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .ums-rv__tag { color: #0f1320; } }
.ums-rv.is-hidden { opacity: 0; transform: translateY(-10px); }

/* Sunucunun bastığı son kare */
.ums.is-final .ums-res .ohs-res__up { opacity: 1; transform: none; }
.ums.is-final .ohs-who { display: inline-flex; }

/* ---------- Duyarlı ---------- */
@media (max-width: 620px) {
    .ums .ohs-order { gap: 9px; }
    .ums .ohs-order__block .ohs-field { height: 40px; }
    .ums-res { gap: 9px; padding: 7px 6px; }
    .ums-ico--s { --ums-is: 30px; }
    .ums-res__body b { font-size: 12.5px; }
    .ums-get { padding: 5px 10px; font-size: 11.5px; }
    .ums-app__head { gap: 12px; }
    .ums-ico--l { --ums-is: 58px; }
    .ums-app__name b { font-size: 17px; }
    .ums-phone-mini { height: 118px; padding: 10px 8px; }
    .ums-use { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .ums-phone { height: 300px; border-width: 5px; border-radius: 24px; padding: 12px 10px; gap: 7px; }
    .ums-phone__card[data-ums-pcard="2"] { display: none; }
    .ums-use .ums-hud { padding: 10px; }
    .ums-stars { font-size: 28px; gap: 8px; }
    .ums-shots { padding: 8px 10px; }
    .ums-shots__cap { display: none; }
    .ums-shot__img { width: 36px; height: 46px; padding: 5px; }
    .ums .ohs-report__prog { padding: 10px 12px; }
    .ums-rsum { gap: 14px; padding: 12px; }
    .ums-rsum__big b { font-size: 32px; }
    .ums-rv:nth-child(3) { display: none; }
}