/* 02 · Uzaktan yönetim telefonu (V35, deneme seçeneği A2). 1em ≈ telefon ekranı
   genişliğinin %4'ü. Ürün ekranın dikeyde %28–71 aralığında durur; arayüz bu bandı
   kapatmaz. Seçenekler ve karşılaştırma: docs/neo-street/phone-ui-v35/README.md */
.phone-app[data-ui]{color:#fff}
/* cqw resolves against .phone-app (the container) only for its children. */
.phone-app[data-ui]>*{font-size:max(8.5px,4cqw);line-height:1.3;letter-spacing:-.005em}
.phone-app[data-ui] .ui-root{position:absolute;inset:0}
:where(.phone-app[data-ui]) button{font:inherit;color:inherit;letter-spacing:inherit}
.phone-app[data-ui] small{font-size:inherit}

/* shared pieces */
.ui-head{position:absolute;left:1.75em;right:1.5em;top:7.8%;display:flex;align-items:center;justify-content:space-between;gap:.6em}
.ui-head small{display:block;font-size:.8em;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:#ffffffc4}
.ui-head strong{display:block;margin-top:.1em;font-size:1.6em;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.ui-bell{position:relative;flex:none;display:grid;place-items:center;width:2.8em;height:2.8em;border-radius:50%;border:1px solid #ffffff42;background:#ffffff1c;backdrop-filter:blur(8px)}
.ui-bell svg{width:1.3em;height:1.3em;fill:none;stroke:currentColor;stroke-width:1.7}
.ui-bell i{position:absolute;right:-.25em;top:-.25em;display:grid;place-items:center;min-width:1.35em;height:1.35em;padding:0 .3em;border-radius:1em;border:.14em solid var(--primary-dark);background:#16c08a;font-size:.78em;font-style:normal;font-weight:700;color:#fff}
.ui-bell i:empty{display:none}
.ui-dot{display:inline-block;flex:none;width:.5em;height:.5em;border-radius:50%;background:var(--success);box-shadow:0 0 0 .22em color-mix(in srgb, var(--success) 20.000%, transparent)}
.ui-flash{box-shadow:0 0 0 .16em rgb(46 222 166 / calc(var(--flash,0)*.8)),0 0 1.4em rgb(46 222 166 / calc(var(--flash,0)*.45))}

/* ---------- notification band (under the notch) ---------- */
.pa-island{position:absolute;z-index:3;left:50%;top:1.2%;display:flex;align-items:center;gap:.6em;width:76%;min-height:2.7em;padding:.4em .9em .4em .4em;border-radius:1.6em;background:var(--hero-deep);box-shadow:0 .5em 1.2em #0007;opacity:var(--notice,0);transform:translateX(-50%) scale(calc(.72 + var(--notice,0)*.28));transform-origin:50% 0}
.pa-island-icon{display:grid;place-items:center;flex:none;width:1.9em;height:1.9em;border-radius:50%;background:var(--success);color:#04311f;font-weight:700}
.phone-app[data-beat=payment] .pa-island-icon{background:var(--warning);color:#4a3300}
.pa-island strong{display:block;font-size:.95em;font-weight:600;line-height:1.2}.pa-island small{display:block;font-size:.8em;color:var(--brand-line);line-height:1.25}
.pa-card{position:absolute;left:1.1em;right:1.1em;bottom:3.4%;padding:.7em .75em .65em;border-radius:1.5em;background:#fffffff2;color:var(--hero-deep)}

/* ---------- actions ---------- */
.ui-actions{display:flex;gap:.45em}
.ui-head small .ui-dot{margin-right:.15em;vertical-align:.08em}
.ui-gear svg,.a2-actions svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* A2 · Hızlı işlemler */
.a2-tabs{position:absolute;left:1.1em;right:1.1em;top:17%;display:grid;grid-template-columns:repeat(3,1fr);gap:.2em;padding:.25em;border-radius:1.2em;border:1px solid #ffffff2b;background:rgb(3 22 62 / .45);backdrop-filter:blur(10px)}
.a2-tabs button{min-height:2.3em;border:0;border-radius:.95em;background:none;font-size:.88em;font-weight:500;color:#ffffffcc}
.a2-tabs button[aria-selected=true]{background:#fff;color:var(--primary-dark);box-shadow:0 .15em .5em #00123a40}
.a2-card{padding:.55em .75em .65em}
.a2-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em;margin-top:.5em;padding-top:.55em;border-top:1px solid var(--brand-tint)}
.a2-actions button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25em;min-height:3.1em;border:0;border-radius:.9em;background:var(--bg-gray);color:var(--primary-dark);font-size:.8em;font-weight:500}
.a2-actions svg{width:1.4em;height:1.4em}
.a2-actions button:hover{background:var(--brand-tint)}

/* A2 revize: çentiğin altından inen bildirim bandı + koyu cam alt kart */
.pa-island-time{display:none}
.phone-app[data-ui=a2] .pa-island{left:.8em;right:.8em;top:5.3%;width:auto;min-height:0;gap:.65em;padding:.55em .85em .55em .55em;border-radius:1.2em;border:1px solid #ffffff24;background:rgb(6 16 38 / .88);backdrop-filter:blur(18px);box-shadow:0 .6em 1.6em #00081c66;transform:translateY(calc((1 - var(--notice,0))*-.9em));transform-origin:50% 0}
.phone-app[data-ui=a2] .pa-island>span:nth-child(2){min-width:0;flex:1}
.phone-app[data-ui=a2] .ui-head{opacity:calc(1 - var(--notice,0));transition:opacity .15s}
.phone-app[data-ui=a2] .pa-island strong{font-size:.92em}
.phone-app[data-ui=a2] .pa-island small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone-app[data-ui=a2] .pa-island-time{display:block;align-self:flex-start;margin-top:.1em;font-size:.76em;color:#ffffffa6;white-space:nowrap}
.phone-app[data-ui=a2] .a2-card{border:1px solid #ffffff30;background:rgb(3 18 50 / .6);color:#fff;backdrop-filter:blur(14px)}
.phone-app[data-ui=a2] .a2-card.ui-flash{box-shadow:0 .7em 2em #00081c55,0 0 0 .16em rgb(46 222 166 / calc(var(--flash,0)*.8)),0 0 1.4em rgb(46 222 166 / calc(var(--flash,0)*.45))}
.phone-app[data-ui=a2] .a2-actions{border-top-color:#ffffff26}
.phone-app[data-ui=a2] .a2-actions button{border:1px solid #ffffff1f;background:#ffffff14;color:#fff}
.phone-app[data-ui=a2] .a2-actions button:hover{background:#ffffff26}

/* A2 · sekmeye göre alt kart düzeni: Dolum = tür dağılımı, Ciro = alan grafiği, Durum = kontrol kutuları */
.a2-panel{height:7em}
.a2-p{display:none}
.phone-app[data-tab=fills] .a2-p-fills,.phone-app[data-tab=income] .a2-p-income,.phone-app[data-tab=status] .a2-p-status{display:flex;flex-direction:column;justify-content:space-between;height:100%;animation:a2-in .28s ease}
@keyframes a2-in{from{opacity:0;transform:translateY(.35em)}}
.a2-row{display:flex;align-items:center;justify-content:space-between;gap:.5em;min-height:1.5em}
.a2-row small{font-size:.84em;color:#ffffffc2}
.a2-chip{padding:.18em .55em;border-radius:1em;background:var(--success);color:#053b27;font-size:.76em;font-weight:700;white-space:nowrap;opacity:0}
.a2-chip.is-gold{background:var(--warning);color:#4a3300}
.phone-app[data-beat=fill] .a2-p-fills .a2-chip,.phone-app[data-beat=payment] .a2-p-income .a2-chip{opacity:var(--notice,0)}
.a2-big{display:flex;align-items:baseline;gap:.3em}
.a2-big strong{font-size:2.1em;font-weight:600;letter-spacing:-.045em;line-height:1.08;white-space:nowrap}
.a2-big span{font-size:.9em;color:#ffffffc2}
.a2-split{display:flex;gap:.18em;height:.6em;margin-top:.55em;border-radius:.3em;overflow:hidden}
.a2-split i{display:block;height:100%;transition:flex-grow .4s}
.a2-split .is-5l{flex:var(--share-5l,.84) 1 0;background:var(--primary)}.a2-split .is-19l{flex:var(--share-19l,.16) 1 0;background:var(--success)}
.a2-legend{display:flex;justify-content:space-between;gap:.5em;margin-top:.45em;font-size:.8em;color:#ffffffc7}
.a2-legend span{display:inline-flex;align-items:center;gap:.4em;white-space:nowrap}
.a2-legend i{display:block;width:.6em;height:.6em;border-radius:.2em}.a2-legend .is-5l{background:var(--primary)}.a2-legend .is-19l{background:var(--success)}
.a2-legend b{font-weight:600;color:#fff}
.a2-area{display:block;width:100%;height:1.8em;margin-top:.2em;overflow:hidden}
.a2-area-fill{fill:url(#a2-area-wash)}
.a2-area-line{fill:none;stroke:var(--primary-light);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.a2-axis{display:flex;justify-content:space-between;margin-top:.15em;font-size:.72em;color:#ffffffad}
.a2-live{display:inline-flex;align-items:center;gap:.4em;font-size:.84em;font-weight:600;color:#7ff0c6}
.a2-checks{display:grid;grid-template-columns:1fr 1fr;gap:.25em;margin:.12em 0 0;padding:0;list-style:none}
.a2-checks li{display:flex;flex-direction:column;justify-content:center;gap:.05em;min-height:2.15em;padding:.18em .6em;border-radius:.8em;border:1px solid #ffffff1f;background:#ffffff12;transition:border-color .2s}
.a2-checks b{font-size:.74em;font-weight:500;line-height:1.2;color:#ffffffb8}
.a2-checks span{display:flex;align-items:center;gap:.35em;font-size:.88em;font-weight:600;line-height:1.2}
.a2-checks span:before{content:'';flex:none;width:.45em;height:.45em;border-radius:50%;background:var(--success)}
.phone-app[data-beat=status] .a2-checks .is-signal{border-color:rgb(47 224 164 / calc(.2 + var(--notice,0)*.7));background:rgb(47 224 164 / calc(.07 + var(--notice,0)*.12))}
@media(prefers-reduced-motion:reduce){.phone-app[data-tab] .a2-p{animation:none}.a2-split i{transition:none}}

/* settings / points sheets */
.ui-settings,.ui-points{margin:.1em 0 0;padding:0;list-style:none}
.ui-settings li,.ui-points li{display:flex;align-items:center;justify-content:space-between;gap:.6em;min-height:2.6em;border-bottom:1px solid var(--bg-gray);font-size:.9em;color:var(--primary-dark)}
.ui-settings b{font-weight:500;color:var(--text-dark)}
.ui-switch{position:relative;flex:none;width:2.7em;height:1.55em;border:0;border-radius:1em;background:var(--brand-line);cursor:pointer;transition:background .2s}
.ui-switch:after{content:'';position:absolute;left:.18em;top:.18em;width:1.2em;height:1.2em;border-radius:50%;background:#fff;box-shadow:0 .1em .3em #0003;transition:transform .2s}
.ui-switch[aria-checked=true]{background:#119a6c}.ui-switch[aria-checked=true]:after{transform:translateX(1.15em)}
.ui-points li{justify-content:flex-start}.ui-points b{font-weight:600;color:var(--text-dark)}.ui-points span{margin-left:auto;font-size:.9em;color:var(--text-gray)}
.app-popup[data-kind=settings] .app-popup-icon,.app-popup[data-kind=points] .app-popup-icon{display:none}

/* details popup: a sheet from the bottom */
.phone-app[data-ui] .app-popup{inset:auto 4% 3% 4%;max-height:66%;padding:1.9em 1.2em 1.2em;border-radius:1.6em;font-size:1em}
.phone-app[data-ui] .app-popup h3{font-size:1.45em}
.phone-app[data-ui] .app-popup p,.phone-app[data-ui] .app-popup dl>div{font-size:.9em}
.phone-app[data-ui] .app-popup-icon{width:2.2em;height:2.2em;margin:0 0 .7em;font-size:1.1em}
.phone-app[data-ui] .app-popup-done{min-height:2.6em;font-size:.95em;margin-top:.9em}
.phone-app[data-ui] .app-popup-close{width:2.4em;height:2.4em;font-size:1.5em}