/* Telegram mini app (telefon içinde çekmece) ve küçültülmüş çubuk. Uygulama taklidi: renkler sabit. */

.mapp{position:absolute;inset:0;z-index:5;pointer-events:none;--mapp-blue:#3a8fdc;--ease:cubic-bezier(.3,.8,.3,1)}
.mapp.no-anim *{transition:none!important;animation:none!important}
.mapp__scrim{position:absolute;inset:0;background:rgba(10,18,30,.42);opacity:0;transition:opacity .35s ease}
.mapp[data-state="open"] .mapp__scrim{opacity:1}

.mapp__sheet{position:absolute;left:0;right:0;bottom:0;top:62px;display:flex;flex-direction:column;background:#f2f3f5;border-radius:16px 16px 0 0;overflow:hidden;box-shadow:0 -10px 30px rgba(10,20,40,.25);transform:translateY(104%);transition:transform .45s var(--ease)}
.mapp[data-state="open"] .mapp__sheet{transform:none}
.mapp[data-state="min"] .mapp__sheet{transform:translateY(104%) scale(.94)}

.mapp__bar{flex:none;display:grid;grid-template-columns:70px 1fr 70px;align-items:center;height:46px;padding:0 12px;background:rgba(250,251,252,.96);border-bottom:1px solid rgba(15,20,25,.08)}
.mapp__close{color:var(--mapp-blue);font-size:14.5px}
.mapp__title{text-align:center;line-height:1.15}
.mapp__title b{display:block;font:600 14.5px/1.2 var(--tg-font)}
.mapp__title small{font-size:11px;color:#7d8b97}
.mapp__more{justify-self:end;color:#7d8b97;display:grid;place-items:center}

.mapp__body{flex:1;min-height:0;overflow:hidden;padding:14px 14px 10px}
.mapp__body.is-entering{animation:mapp-in .35s ease both}
@keyframes mapp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mapp__h{margin:0 0 4px;font:650 21px/1.2 var(--tg-font);letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mapp__sub{margin:0 0 10px;font-size:12.5px;color:#7d8b97}

.mapp__list{list-style:none;margin:10px 0 0;padding:0;background:#fff;border-radius:12px;overflow:hidden}
.mapp__row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #eef0f3;transition:background .2s}
.mapp__row:last-child{border-bottom:0}
.mapp__row b{display:block;font:600 13.5px/1.25 var(--tg-font)}
.mapp__row small{display:block;color:#7d8b97;font-size:11.5px;margin-top:1px}
.mapp__right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:12px;font-weight:500}
.mapp__row.is-tap,.mapp__btn.is-tap{background:#e4eef9}
.mapp__row.is-flash{animation:mapp-flash 2.4s ease .2s both}
@keyframes mapp-flash{0%{background:rgba(58,143,220,.22)}100%{background:transparent}}

.mapp__kv{margin:12px 0 0;background:#fff;border-radius:12px;overflow:hidden}
.mapp__kv div{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-bottom:1px solid #eef0f3;font-size:13px}
.mapp__kv div:last-child{border-bottom:0}
.mapp__kv dt{color:#7d8b97}
.mapp__kv dd{margin:0;font-weight:550;text-align:right}

.mapp__actions{display:flex;gap:8px;margin-top:12px}
.mapp__btn{flex:1;min-height:38px;padding:0 10px;border:0;border-radius:10px;background:#fff;color:var(--mapp-blue);font:550 13.5px/1.2 var(--tg-font);transition:background .2s}
.mapp__btn.is-primary{background:var(--mapp-blue);color:#fff}
.mapp__btn.is-primary.is-tap{background:#2a78bf}
.mapp__body>.mapp__btn{width:100%;margin-top:10px}

.mapp__amount{font:650 34px/1.1 var(--tg-font);letter-spacing:-.02em;margin:2px 0 4px}
.mapp__qr{width:104px;height:104px;margin:10px auto 12px;padding:6px;background:#fff;border-radius:10px;box-shadow:0 0 0 1px #e3e6eb}
.mapp__qr svg{display:block;width:100%;height:100%}
.mapp__linkbox{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fff;border-radius:12px;color:var(--mapp-blue);font-size:12.5px}
.mapp__linkbox b{font-weight:550;overflow-wrap:anywhere}

.mapp__done{display:grid;justify-items:center;text-align:center;padding:12px 0 2px;color:#2f9e5e}
.mapp__done .mapp__h{justify-content:center;color:#0f1419}
.mapp__done .mapp__amount{color:#0f1419}
.mapp__tick{display:block;margin-bottom:6px}
.mapp[data-state="open"] .mapp__tick{animation:mapp-pop .5s var(--ease) .1s both}
@keyframes mapp-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}

.mapp__main{flex:none;padding:10px 14px 14px;background:#f2f3f5}
.mapp__main[hidden]{display:none}
.mapp__mainbtn{width:100%;min-height:44px;border:0;border-radius:12px;background:var(--mapp-blue);color:#fff;font:600 15px/1.2 var(--tg-font);transition:transform .15s,background .2s}
.mapp__mainbtn.is-tap{background:#2a78bf;transform:scale(.97)}

/* küçültülmüş çubuk: bildirim içeriği burada görünür */
.mapp__pill{position:absolute;left:12px;right:12px;bottom:84px;display:flex;align-items:center;gap:9px;padding:8px 12px 8px 8px;border-radius:14px;background:rgba(28,37,52,.94);color:#fff;font:550 13px/1.25 var(--tg-font);box-shadow:0 8px 22px rgba(10,20,40,.35);transform:translateY(160%);opacity:0;transition:transform .45s var(--ease),opacity .3s ease,background .3s}
.mapp__pill img{flex:none;width:26px;height:26px;border-radius:8px}
.mapp__pill span{flex:1;min-width:0}
.mapp__pill i{flex:none;display:grid;opacity:.7}
.mapp[data-state="min"] .mapp__pill{transform:none;opacity:1}
.mapp.is-alert .mapp__pill{background:var(--mapp-blue)}
@media (prefers-reduced-motion:reduce){.mapp *{transition:none!important;animation:none!important}}
.is-calm .mapp *{transition:none!important;animation:none!important}

/* günün özeti */
.mapp__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 4px}
.mapp__tiles div{padding:8px 9px;background:#fff;border-radius:11px}
.mapp__tiles small{display:block;color:#7d8b97;font-size:10.5px}
.mapp__tiles b{display:block;margin-top:1px;font:650 17px/1.15 var(--tg-font);letter-spacing:-.01em}
.mapp__h3{margin:12px 0 0;font:600 12.5px/1.2 var(--tg-font);color:#7d8b97}
.mapp__h3+.mapp__list{margin-top:6px}

/* satırdaki küçük düğme (ör. Pay) */
.mapp__chip{min-height:26px;padding:0 12px;border:0;border-radius:13px;background:var(--mapp-blue);color:#fff;font:600 12px/1 var(--tg-font);transition:background .2s,transform .15s}
.mapp__chip.is-tap{background:#2a78bf;transform:scale(.94)}

/* ana menü: simgeli kutular */
.mapp__grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:6px}
.mapp__tile{display:grid;gap:2px;justify-items:start;align-content:start;min-height:74px;padding:11px 12px;border:0;border-radius:13px;background:#fff;text-align:start;font:inherit;color:inherit;transition:background .2s,transform .15s}
.mapp__tile b{font:600 13.5px/1.2 var(--tg-font)}
.mapp__tile small{font-size:11.5px;color:#7d8b97}
.mapp__tileicon{display:grid;place-items:center;width:30px;height:30px;margin-bottom:3px;border-radius:9px;background:rgba(58,143,220,.12);color:var(--mapp-blue)}
.mapp__tile.is-tap{background:#e4eef9;transform:scale(.97)}

/* bildirime tıklayınca açılan uygulamanın üstünde bildirim metni */
.mapp__banner{flex:none;display:flex;align-items:center;gap:9px;max-height:0;margin:0 12px;padding:0 11px;overflow:hidden;border-radius:12px;background:#1f2b3a;color:#fff;font:550 13px/1.3 var(--tg-font);opacity:0;transition:max-height .35s var(--ease),margin .35s var(--ease),padding .35s var(--ease),opacity .25s ease}
.mapp__banner.is-on{max-height:56px;margin:9px 12px 0;padding:9px 11px;opacity:1}
.mapp__banner span:nth-child(2){flex:1;min-width:0}
.mapp__bannericon{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mapp-blue)}
.mapp__banner small{flex:none;font-size:11px;opacity:.65}
.mapp__pill.is-tap{background:rgba(58,143,220,.96);transform:scale(.97)}
.is-calm .mapp__banner{transition:none}
@media (prefers-reduced-motion:reduce){.mapp__banner{transition:none}}