/* SAHNE · YEMEKHANE (includes/scenes/meals.php) — adımlar:
   s1 Pazartesi hücresinin yemek seçicisi açılır, liste «Başlangıç»a kaydırılır · s2 «Ezogelin Çorbası» (⚠) + dört yemek çip olur ·
   s3 sayfa aşağı kayar, «Menüyü kaydet» · s4 yenilenir: «1 öğün kaydedildi.», dolu öğün 3/5 → 4/5, alerji riski 6 öğrenci ·
   s5 «Onaylayan diyetisyen» yazılır · s6 «Onaylı kaydet» → yeşil onay, Taslak → Onaylandı ·
   s7 velinin telefonu: Pazartesi (bugün) «Alerjen», kırmızı «Ezogelin Çorbası ⚠».
   Ölçüler değişkenlerde: sayfa kaydırması üstteki blokların SABİT yüksekliklerinden hesaplanır (--toph). */
/* değişkenler kökün ÇOCUKLARINDA: kök kap (container) olduğu için @container kuralları yalnız içerideki öğelere işler */
.mel { --d: 0s; --ok: #047857; --ok-ink: #065f46; --spring: cubic-bezier(.34, 1.56, .64, 1); container-type: inline-size; }
.mel > * { --H: 460px; --bandH: 52px; --g: 8px; --kh: 58px; --bh: 34px; --ah: 76px;
  --toph: calc(var(--kh) + var(--bh) + var(--ah) + 3 * var(--g));
  --vph: calc(var(--H) - var(--bandH) - 36px);
  --pw: 236px; --phh: 436px; --pr: 16px; --pt: 12px; --phs: 108px; }
.mel.s2 { --d: .25s; } .mel.s3 { --d: 0s; } .mel.s4 { --d: .16s; } .mel.s5 { --d: .5s; } .mel.s6 { --d: .72s; } .mel.s7 { --d: 0s; }
.mel-win { position: relative; height: var(--H); }
.mel-i { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mel b, .mel em, .mel i, .mel small { font-style: normal; }

/* çapraz geçiş: katmanlar aynı ızgara hücresinde; vAB = A. adımdan B. adıma kadar görünür (v04 = 4. adıma kadar) */
.mel-x { display: grid; min-width: 0; }
.mel-x > * { grid-area: 1 / 1; min-width: 0; opacity: 0; transition: opacity .25s var(--ui-ease) var(--d); }
.mel:not(.s4) .mel-x > .v04, .mel.s4 .mel-x > .v4, .mel.s4:not(.s6) .mel-x > .v46, .mel:not(.s6) .mel-x > .v06, .mel.s6 .mel-x > .v6,
.mel:not(.s5) .mel-x > .v05, .mel.s5 .mel-x > .v5 { opacity: 1; }

/* imleç: .mel-hit tıklama noktası; ok ucu orada, halka dalgası çevresinde */
.mel-hit { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.mel-hit .ui-cur, .mel-ddc .ui-cur { left: -5px; top: -3px; transform: translate(14px, 12px); transition: opacity .2s var(--ui-ease); }
.mel-rip { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(29, 79, 134, .55); opacity: 0; }
@keyframes mel-cur { 0% { opacity: 0; transform: translate(14px, 12px); } 34% { opacity: 1; transform: none; scale: 1; } 50% { scale: .8; } 64%, 100% { opacity: 1; transform: none; scale: 1; } }
@keyframes mel-cur-out { 0% { opacity: 0; transform: translate(14px, 12px); } 30% { opacity: 1; transform: none; scale: 1; } 44% { scale: .8; } 56% { scale: 1; } 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes mel-rip { 0% { opacity: 0; scale: .25; } 12% { opacity: .9; } 100% { opacity: 0; scale: 1.7; } }
@keyframes mel-push { 50% { scale: .95; } }

/* ── başlık bandı (kurum rengi) ── */
.mel-band { display: flex; align-items: center; gap: 12px; height: var(--bandH); margin: 12px 12px 0; padding: 0 12px; border-radius: 12px; color: #fff;
  background: linear-gradient(120deg, var(--navy-night), var(--navy) 55%, var(--navy-soft));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(11, 36, 64, .18), 0 10px 20px -14px rgba(11, 36, 64, .7); }
.mel-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.mel-ico .mel-i { width: 17px; height: 17px; stroke-width: 1.8; }
.mel-ttl { flex: 1; min-width: 0; }
.mel-ttl > b { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 19px; font-weight: 800; letter-spacing: -.01em; }
.mel-ttl .mel-hq { width: 14px; height: 14px; color: rgba(255, 255, 255, .7); stroke-width: 2; }
.mel-ttl small { display: block; margin-top: 2px; font-size: 11px; line-height: 14px; font-weight: 600; color: rgba(255, 255, 255, .82); white-space: nowrap; }

/* ── sayfa (kaydırılan sütun) ── */
.mel-vp { position: relative; height: var(--vph); margin-top: 10px; overflow: hidden; }
.mel-vp::after { content: ""; position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 18px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.mel-pg { padding: 0 14px 14px; translate: 0 calc(-1 * var(--toph)); transition: translate .65s cubic-bezier(.45, .05, .25, 1); }
.mel.s3 .mel-pg { translate: 0 min(calc(-1 * var(--toph)), calc(var(--vph) - 100%)); transition-delay: .05s; }
/* POST → sayfa yenilenir: kısa sönme, yenilenince en üstte */
.mel.s4 .mel-pg { translate: 0 0; transition: translate 0s .16s; animation: mel-rl .52s ease both; }
.mel.s6 .mel-pg { animation: mel-rl2 .52s ease .56s both; }
@keyframes mel-rl { 0% { opacity: 1; } 30%, 42% { opacity: .15; } 100% { opacity: 1; } }
@keyframes mel-rl2 { 0% { opacity: 1; } 30%, 42% { opacity: .15; } 100% { opacity: 1; } }

/* yenilenince beliren ileti (admin-meals.php:192) */
.mel-fl { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0s var(--d); }
.mel.s4 .mel-fl { grid-template-rows: 1fr; }
.mel-fl__in { min-height: 0; overflow: hidden; }
.mel-fl__in > .mel-x { height: 32px; margin-bottom: var(--g); align-items: center; padding: 0 12px; border-radius: 10px; background: #ecfdf5; box-shadow: inset 0 0 0 1px #a7f3d0;
  font-size: 11.5px; font-weight: 800; color: var(--ok); white-space: nowrap; }

/* dört sayaç */
.mel-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; height: var(--kh); margin-bottom: var(--g); }
.mel-k { display: block; min-width: 0; padding: 8px 11px 0; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05), inset 0 1px 0 rgba(255, 255, 255, .6); }
.mel-k small { display: block; font-size: 10px; line-height: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; white-space: nowrap; }
.mel-k__v { display: flex; align-items: baseline; margin-top: 5px; font-size: 20px; line-height: 24px; font-weight: 900; letter-spacing: -.02em; color: #18181b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mel-k__v em { margin-left: 3px; font-size: 12px; font-weight: 700; letter-spacing: 0; color: #71717a; }
.mel-k__v .mel-k__sl { margin-left: 0; }
.mel-flip > * { transition: opacity .2s var(--ui-ease) var(--d), translate .45s var(--spring) var(--d); }
.mel-flip > .v4 { translate: 0 10px; }
.mel.s4 .mel-flip > .v04 { translate: 0 -10px; }
.mel.s4 .mel-flip > .v4 { translate: 0 0; transition-delay: calc(var(--d) + .3s); }
.mel.s4:not(.s5) .mel-k--dolu { animation: mel-glow 1.1s ease .45s both; }
.mel.s6:not(.s7) .mel-k--onay { animation: mel-glow2 1.1s ease .95s both; }
@keyframes mel-glow { 0%, 100% { background-color: #fff; } 30% { background-color: #eef4fb; } }
@keyframes mel-glow2 { 0%, 100% { background-color: #fff; } 30% { background-color: #ecfdf5; } }
.mel-k__b { margin-top: 6px; justify-items: start; }
.mel-bdg { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 7px; background: #f4f4f5; color: #52525b; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.mel-bdg--ok { background: #d1fae5; color: var(--ok); }
.mel-bdg .mel-i { width: 12px; height: 12px; stroke-width: 2.8; }
.mel-k--risk { background: #fffbeb; box-shadow: 0 0 0 1px #fcd34d, 0 1px 2px rgba(146, 64, 14, .06), inset 0 1px 0 rgba(255, 255, 255, .6); }
.mel-k--risk .mel-k__v { color: #b45309; }

/* uyarı şeridi (alerji riski) */
.mel-ban { display: flex; align-items: center; gap: 8px; height: var(--bh); margin-bottom: var(--g); padding: 0 12px; border-radius: 10px; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a;
  font-size: 11px; line-height: 15px; font-weight: 600; color: #92400e; }
.mel-ban > .mel-i { width: 14px; height: 14px; color: #d97706; }
.mel-ban b { font-weight: 800; }
.mel-ban .mel-x { flex: 1; }

/* menü onayı */
.mel-apr { height: var(--ah); margin-bottom: var(--g); padding: 9px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05);
  transition: background-color .3s var(--ui-ease) var(--d), box-shadow .3s var(--ui-ease) var(--d); }
.mel.s6 .mel-apr { background: #f3fcf8; box-shadow: 0 0 0 1px #a7f3d0, 0 1px 2px rgba(4, 120, 87, .06); }
.mel-apr__x, .mel-apr__st { height: 100%; }
.mel-apr__st { display: flex; flex-direction: column; justify-content: space-between; }
.mel-apr__r1 { display: flex; align-items: center; gap: 8px; height: 22px; min-width: 0; }
.mel-apr__t { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #18181b; white-space: nowrap; }
.mel-apr__t .mel-i { color: var(--ok); }
.mel-apr__f { display: flex; align-items: center; gap: 6px; height: 28px; min-width: 0; }
.mel-in { position: relative; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 8px; background: #fff; font-size: 11px; font-weight: 600; color: #27272a;
  box-shadow: inset 0 0 0 1px var(--ui-line-2); white-space: nowrap; transition: box-shadow .25s var(--ui-ease); }
.mel-in > span { min-width: 0; overflow: hidden; }
.mel-in--src { flex: none; }
.mel-in--ad { flex: 1; min-width: 0; }
.mel-in--ad .mel-x { flex: 1; }
.mel-chev { width: 13px; height: 13px; margin-left: auto; color: #71717a; }
.mel-ph-t { color: #9ca3af; font-weight: 500; }
.mel-typed { display: flex; align-items: center; font-weight: 700; color: #18181b; }
.mel-typed__t { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .8s steps(16, end) .55s; }
.mel.s5 .mel-typed__t { max-width: 120px; }
.mel-caret { flex: none; width: 1px; height: 13px; margin-left: 1px; background: #18181b; }
.mel.s5:not(.s6) .mel-caret { animation: mel-blink 1s steps(1) infinite; }
@keyframes mel-blink { 50% { opacity: 0; } }
.mel.s5:not(.s6) .mel-in--ad { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: .38s; }
.mel-in--ad .mel-hit { left: 46%; top: 16px; }
.mel.s5:not(.s6) .mel-hit--inp .ui-cur { animation: mel-cur-out 1.1s var(--ui-ease) both; }
.mel.s5:not(.s6) .mel-hit--inp .mel-rip { animation: mel-rip .55s ease-out .34s both; }
.mel-btn { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; font-size: 11.5px; font-weight: 800; color: #fff; white-space: nowrap; }
.mel-btn--ok { background: var(--ok); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(4, 120, 87, .3), 0 6px 12px -8px rgba(4, 120, 87, .8); }
.mel-btn--ok .mel-hit { right: 22px; bottom: 8px; }
.mel.s6:not(.s7) .mel-btn--ok { animation: mel-push .3s var(--ui-ease) .4s; }
.mel.s6:not(.s7) .mel-hit--ok .ui-cur { animation: mel-cur-out .95s var(--ui-ease) both; }
.mel.s6:not(.s7) .mel-hit--ok .mel-rip { animation: mel-rip .55s ease-out .4s both; }
.mel-lc { flex: none; height: 19px; padding: 0 7px; border-radius: 6px; background: #f4f4f5; color: #52525b; font-size: 10.5px; font-weight: 800; line-height: 19px; white-space: nowrap; }
.mel-rm { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #71717a; white-space: nowrap; }
.mel-apr__d { display: flex; align-items: center; height: 28px; font-size: 11.5px; font-weight: 700; color: #52525b; white-space: nowrap; }
.mel.s6 .mel-apr .v6 .mel-bdg--ok { animation: mel-pop .5s var(--spring) .9s both; }
@keyframes mel-pop { 0% { opacity: 0; scale: .6; } 60% { opacity: 1; scale: 1.08; } 100% { opacity: 1; scale: 1; } }

/* görünüm + hafta + liste */
.mel-ctl { display: flex; align-items: center; gap: 6px; height: 30px; margin-bottom: var(--g); min-width: 0; }
.mel-seg { flex: none; display: inline-flex; padding: 3px; border-radius: 10px; background: #f1f2f4; font-size: 11.5px; font-weight: 800; color: #52525b; }
.mel-seg > * { display: grid; place-items: center; height: 24px; padding: 0 9px; border-radius: 7px; }
.mel-seg > b { background: #fff; color: var(--navy-soft); box-shadow: 0 1px 2px rgba(16, 37, 64, .12); }
.mel-nb { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: #3f3f46; box-shadow: inset 0 0 0 1px var(--ui-line-2); }
.mel-wk { flex: none; display: grid; place-items: center; height: 30px; padding: 0 10px; border-radius: 9px; background: #f1f2f4; font-size: 11.5px; font-weight: 800; color: #3f3f46; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mel-ls { min-width: 0; display: flex; align-items: center; gap: 6px; height: 30px; margin-left: auto; padding: 0 9px 0 11px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line-2); font-size: 11.5px; font-weight: 700; color: #27272a; white-space: nowrap; }

/* haftalık tablo */
.mel-tb { border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--ui-line), 0 1px 2px rgba(16, 37, 64, .05); }
.mel-tr { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 8px; padding: 7px 8px 7px 12px; border-top: 1px solid #f1f1f3; }
.mel-tr--h { align-items: center; height: 26px; padding-top: 0; padding-bottom: 0; border-top: 0; border-radius: 12px 12px 0 0; background: #fafafa; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; }
.mel-day { padding-top: 4px; }
.mel-day b { display: block; font-size: 12px; line-height: 16px; font-weight: 800; color: #27272a; }
.mel-day small { display: block; font-size: 10.5px; line-height: 14px; font-weight: 700; color: #71717a; font-variant-numeric: tabular-nums; }
.mel-cell { position: relative; min-width: 0; padding: 5px; border-radius: 9px; background: #fafafb; box-shadow: inset 0 0 0 1px var(--ui-line); }
.mel-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mel-chips + .mel-sel { margin-top: 5px; }
.mel-chip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 5px 0 7px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7;
  font-size: 11px; font-weight: 700; color: #3f3f46; white-space: nowrap; }
.mel-chip em { font-size: 10px; font-weight: 900; letter-spacing: .01em; color: var(--navy-soft); }
.mel-w { width: 12px; height: 12px; fill: #fde68a; stroke: #b45309; stroke-width: 2.1; }
.mel-cx { width: 10px; height: 10px; color: #a1a1aa; stroke-width: 2.6; }
.mel-sel { position: relative; display: flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--ui-line-2);
  font-size: 11px; font-weight: 600; color: #3f3f46; white-space: nowrap; transition: box-shadow .2s var(--ui-ease); }
.mel-sel > span { min-width: 0; overflow: hidden; }

/* düzenlenen satır (Pazartesi): çipler sırayla gelir, satır yumuşakça büyür */
.mel-chw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .95s var(--ui-ease) .24s; }
.mel.s2 .mel-chw { grid-template-rows: 1fr; }
.mel-chw > .mel-chips { min-height: 0; overflow: hidden; padding-bottom: 5px; }
.mel-tr--ed .mel-chip { opacity: 0; translate: 0 12px; scale: .7; transition: opacity .2s var(--ui-ease), translate .45s var(--spring), scale .45s var(--spring); }
.mel.s2 .mel-tr--ed .mel-chip { opacity: 1; translate: 0 0; scale: 1; transition-delay: calc(.32s + var(--i) * .2s + min(var(--i), 1) * .18s); }
.mel-tr--ed .mel-chip .mel-w { scale: 0; transition: scale .45s var(--spring); }
.mel.s2 .mel-tr--ed .mel-chip .mel-w { scale: 1; transition-delay: calc(.55s + var(--i) * .2s + min(var(--i), 1) * .18s); }
.mel.s1:not(.s3) .mel-tr--ed .mel-sel { box-shadow: inset 0 0 0 1px var(--navy-soft), 0 0 0 3px rgba(29, 79, 134, .14); transition-delay: .36s; }
.mel.s2:not(.s3) .mel-tr--ed .mel-sel { animation: mel-pick 1s ease .62s both; }
@keyframes mel-pick { 0%, 100% { background-color: #fff; } 20%, 40%, 60%, 80% { background-color: #f0f5fb; } 10%, 30%, 50%, 70%, 90% { background-color: #fff; } }

/* yemek seçicinin açılır listesi (yerel select penceresi; kurs grupları optgroup) */
.mel-dd { position: absolute; z-index: 8; left: 5px; right: 5px; top: calc(100% - 4px); height: 162px; overflow: hidden; border-radius: 8px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 37, 64, .14), 0 2px 4px rgba(16, 37, 64, .08), 0 16px 30px -12px rgba(16, 37, 64, .5);
  opacity: 0; scale: 1 .94; transform-origin: top; pointer-events: none; transition: opacity .16s var(--ui-ease), scale .2s var(--ui-ease); }
.mel.s1:not(.s2) .mel-dd { opacity: 1; scale: 1; transition-delay: .44s; }
.mel-dd__l { display: block; padding-top: 1px; transition: translate .5s cubic-bezier(.3, .1, .2, 1) .66s; }
/* 78 satır × 20 px; «Ezogelin Çorbası» (72.) görünür 6. satıra gelir: −(72 − 6) × 20 */
.mel.s1 .mel-dd__l { translate: 0 -1320px; }
.mel-dd__o, .mel-dd__g { display: flex; align-items: center; height: 20px; font-size: 11px; white-space: nowrap; }
.mel-dd__o { padding-left: 20px; font-weight: 500; color: #27272a; transition: background-color .1s linear 1.36s, color .1s linear 1.36s; }
.mel-dd__g { padding-left: 8px; font-weight: 800; color: #18181b; }
.mel-dd__o--sel { padding-left: 8px; background: #e7ecf3; }
.mel.s1 .mel-dd__o--pick { background: var(--navy-soft); color: #fff; }
.mel-dd__th { position: absolute; right: 2px; top: 3px; width: 4px; height: 16px; border-radius: 2px; background: rgba(16, 37, 64, .28); transition: translate .5s cubic-bezier(.3, .1, .2, 1) .66s; }
/* kaydırma oranı 1320 / (1561 − 162) ≈ ,94 → iz 140 px × ,94 */
.mel.s1 .mel-dd__th { translate: 0 132px; }
/* imleç: seçiciye tıklar, listeyi kaydırır, «Ezogelin Çorbası»na iner (s1) ve seçer (s2) */
.mel-ddc { --dcx: -26px; position: absolute; z-index: 9; left: 128px; top: calc(100% + 127px); width: 0; height: 0; pointer-events: none; }
.mel.s1:not(.s2) .mel-ddc .ui-cur { animation: mel-dc1 1.6s var(--ui-ease) both; }
.mel.s2:not(.s3) .mel-ddc .ui-cur { animation: mel-dc2 .8s var(--ui-ease) both; }
.mel.s1:not(.s2) .mel-ddc .mel-rip { translate: var(--dcx) -145px; animation: mel-rip .55s ease-out .3s both; }
.mel.s2:not(.s3) .mel-ddc .mel-rip { animation: mel-rip .5s ease-out .08s both; }
@keyframes mel-dc1 {
  0% { opacity: 0; transform: translate(calc(var(--dcx) + 14px), -133px); }
  16% { opacity: 1; transform: translate(var(--dcx), -145px); scale: 1; }
  21% { scale: .8; } 27% { scale: 1; }
  38%, 70% { opacity: 1; transform: translate(calc(var(--dcx) / 2), -70px); }
  86%, 100% { opacity: 1; transform: none; scale: 1; }
}
@keyframes mel-dc2 { 0% { opacity: 1; transform: none; scale: 1; } 16% { scale: .8; } 30% { opacity: 1; transform: none; scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dcx), -145px); } }

/* menüyü kaydet */
.mel-sv { margin-top: 12px; }
.mel-btn--save { height: 32px; padding: 0 14px; border-radius: 10px; font-size: 12px; background: linear-gradient(135deg, var(--navy-soft), var(--navy));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(16, 37, 64, .2), 0 6px 14px -8px rgba(20, 61, 107, .75); }
.mel-btn--save .mel-hit { right: 30px; bottom: 10px; }
.mel.s3:not(.s4) .mel-btn--save { animation: mel-push .3s var(--ui-ease) .82s; }
.mel.s3:not(.s4) .mel-hit--save .ui-cur { animation: mel-cur 1.3s var(--ui-ease) .2s both; }
.mel.s3:not(.s4) .mel-hit--save .mel-rip { animation: mel-rip .55s ease-out .82s both; }

/* ── velinin telefonu (portal/meals) ── */
.mel-ph { position: absolute; z-index: 10; right: var(--pr); top: var(--pt); width: var(--pw); height: var(--phh); padding: 6px; border-radius: 34px;
  background: linear-gradient(160deg, #26324a, #0b1322 60%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 2px 4px rgba(11, 19, 34, .25), 0 30px 50px -22px rgba(11, 19, 34, .65);
  opacity: 0; translate: 0 44px; transition: opacity .35s var(--ui-ease), translate .75s cubic-bezier(.3, 1.25, .5, 1); }
.mel.s7 .mel-ph { opacity: 1; translate: 0 0; transition-delay: .12s; }
.mel-ph__sc { position: relative; height: 100%; overflow: hidden; border-radius: 28px; background: #f6f7fb; }
.mel-ph__sb { position: absolute; z-index: 4; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 14px 0 20px; background: #f6f7fb; color: #0b1526; }
.mel-ph__sb > b { font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mel-ph__isl { position: absolute; left: 50%; top: 6px; width: 56px; height: 15px; margin-left: -28px; border-radius: 999px; background: #05070b; }
.mel-ph__sbi { display: flex; align-items: center; gap: 3px; }
.mel-ph__sbi .mel-i { width: 11px; height: 11px; stroke-width: 2.4; }
.mel-ph__sbi .mel-bat { width: 16px; height: 12px; }
.mel-ph__hd { position: absolute; z-index: 3; left: 0; right: 0; top: 24px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 12px; background: #f6f7fb; color: #1b2233; }
.mel-ph__bk { width: 16px; height: 16px; }
.mel-ph svg.mel-logo { flex: none; width: 26px; height: 26px; stroke: none; border-radius: 50%; box-shadow: 0 0 0 1.5px #fff, 0 2px 5px -1px rgba(16, 37, 64, .35); }
.mel-ph__sp { flex: 1; }
.mel-ph__bell { position: relative; display: grid; place-items: center; width: 24px; height: 24px; color: #4b5263; }
.mel-ph__bell .mel-i { width: 15px; height: 15px; }
.mel-ph__bell::after { content: ""; position: absolute; top: 3px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #e0352b; box-shadow: 0 0 0 1.5px #f6f7fb; }
.mel-ph__av { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--navy-soft); font-size: 12px; font-weight: 800; box-shadow: 0 0 0 1px #e4e7ec, 0 2px 4px -2px rgba(16, 37, 64, .3); }
.mel-ph__vp { position: absolute; left: 0; right: 0; top: 62px; bottom: 40px; overflow: hidden; }
.mel-ph__pg { display: block; padding: 2px 10px 0; transition: translate .8s cubic-bezier(.45, .05, .25, 1) 1.5s; }
.mel.s7 .mel-ph__pg { translate: 0 calc(-1 * var(--phs)); }
.mel-ph__kids { display: flex; gap: 6px; }
.mel-ph__kids > span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 4px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 800; color: #3f3f46; box-shadow: inset 0 0 0 1px #e4e7ec; }
.mel-ph__kids i { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; font-size: 10.5px; font-weight: 800; color: var(--navy-soft); }
.mel-ph__kids .on { background: var(--navy); color: #fff; box-shadow: 0 4px 10px -6px rgba(20, 61, 107, .8); }
.mel-ph__kids .on i { background: rgba(255, 255, 255, .2); color: #fff; }
.mel-ph__t { display: block; margin-top: 8px; font-size: 16px; line-height: 20px; font-weight: 800; letter-spacing: -.015em; color: #0f172a; }
.mel-ph__lead { display: block; font-size: 10px; line-height: 13px; font-weight: 600; color: #6b7280; white-space: nowrap; }
.mel-ph__nav { display: flex; align-items: center; justify-content: space-between; height: 30px; margin-top: 8px; padding: 0 8px; border-radius: 12px; background: #fff; color: #4b5263;
  box-shadow: 0 0 0 1px rgba(199, 197, 208, .35), 0 4px 12px rgba(30, 34, 86, .05); }
.mel-ph__nav b { font-size: 12px; font-weight: 800; color: #0f172a; }
.mel-ph__nav .mel-i { width: 14px; height: 14px; }
.mel-ph__note { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding: 7px 9px; border-radius: 10px; background: #fff7e0; color: #8a4b05; font-size: 10.5px; line-height: 14px; font-weight: 600; }
.mel-ph__note .mel-i { width: 13px; height: 13px; margin-top: 1px; stroke-width: 2.2; }
.mel-ph__note b { font-weight: 800; }
.mel-pc { display: block; margin-top: 7px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(199, 197, 208, .35), 0 4px 12px rgba(30, 34, 86, .05); overflow: hidden; }
.mel-pc--bugun { box-shadow: 0 0 0 2px rgba(29, 79, 134, .55), 0 4px 12px rgba(30, 34, 86, .06); }
.mel-pc__h { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-bottom: 1px solid rgba(199, 197, 208, .3); }
.mel-pc__h b { font-size: 12.5px; font-weight: 800; color: #0f172a; }
.mel-pc__h em { height: 17px; padding: 0 7px; border-radius: 999px; background: #e6eef8; color: var(--navy-soft); font-size: 10px; font-weight: 700; line-height: 17px; }
.mel-pc__h small { margin-left: auto; font-size: 10.5px; font-weight: 700; color: #6b7280; white-space: nowrap; }
.mel-pc__m { display: flex; align-items: center; gap: 6px; padding: 7px 10px 0; }
.mel-pc__ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #ffe4e1; color: #b42318; }
.mel-pc__ic .mel-i { width: 12px; height: 12px; }
.mel-pc__m b { font-size: 12px; font-weight: 800; color: #0f172a; }
.mel-pc__m em { height: 17px; padding: 0 8px; border-radius: 999px; background: #ffe4e1; color: #b42318; font-size: 10px; font-weight: 700; line-height: 17px; }
.mel-pc__dl { display: block; padding: 4px 10px 8px; }
.mel-pr { display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 5px; padding: 1.5px 0; }
.mel-pr small { padding-top: 2px; font-size: 10px; line-height: 12px; font-weight: 800; letter-spacing: -.01em; color: #6b7280; }
.mel-pr > span { font-size: 11px; line-height: 14px; font-weight: 600; color: #1f2633; }
.mel-pr > span i { color: #9ca3af; }
.mel-pr > span b { font-weight: 800; color: #93000a; }
.mel-pr .mel-w { display: inline-block; width: 11px; height: 11px; margin: 0 0 -1px 3px; fill: none; stroke: #93000a; stroke-width: 2.4; }
/* rozet hep tam boyda durur (Salı'daki gibi); kaydırma bitince bir kez nabız atar — bekleme süresince küçülmez */
.mel.s7 .mel-pc--bugun .mel-pc__m em { animation: mel-beat .6s ease 2.45s both; }
@keyframes mel-beat { 0%, 100% { scale: 1; } 40% { scale: 1.16; } }
.mel.s7 .mel-pc--bugun .mel-pr b { animation: mel-flash 1.2s ease 2.5s both; }
@keyframes mel-flash { 0%, 100% { background-color: rgba(255, 228, 225, 0); } 35% { background-color: rgba(255, 228, 225, 1); } }
.mel-pr b { border-radius: 4px; }
.mel-nw { white-space: nowrap; }
.mel-ph__tab { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: 40px; padding: 0 6px 4px; background: #fff;
  box-shadow: inset 0 1px 0 rgba(16, 37, 64, .07), 0 -6px 14px -10px rgba(16, 37, 64, .25); color: #3f4656; }
.mel-ph__tab > span { display: grid; place-items: center; }
.mel-ph__tab .mel-i { width: 16px; height: 16px; stroke-width: 1.9; }
.mel-ph__tag { position: absolute; z-index: 4; left: 50%; bottom: -9px; display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 9px 0 7px; border-radius: 999px;
  background: var(--sun); color: var(--sun-ink, #2a1c00); font-size: 10px; font-weight: 800; white-space: nowrap; translate: -50% 0;
  box-shadow: 0 0 0 1.5px #fff, 0 4px 10px -4px rgba(16, 37, 64, .45); opacity: 0; scale: .7; transition: opacity .3s var(--ui-ease), scale .45s var(--spring); }
.mel-ph__tag .mel-i { width: 11px; height: 11px; stroke-width: 2.4; }
.mel.s7 .mel-ph__tag { opacity: 1; scale: 1; transition-delay: .8s; }

/* ── DAR KAPLAR ── */
@container (max-width: 700px) {
  .mel-ls { max-width: 210px; }
}
@container (max-width: 660px) {
  .mel > * { --bh: 46px; }
}
@container (max-width: 520px) {
  .mel > * { --bandH: 60px; }
  .mel-ttl small { font-size: 10.5px; line-height: 13px; white-space: normal; }
}
@container (max-width: 600px) {
  .mel-ls { display: none; }
}
@container (max-width: 560px) {
  .mel > * { --kh: 102px; --pw: 222px; --pr: 12px; }
  .mel-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 47px); gap: 8px; }
  .mel-k { padding-top: 7px; }
  .mel-k__v { margin-top: 3px; font-size: 18px; line-height: 22px; }
  .mel-k__b { margin-top: 4px; }
  .mel-in--src { display: none; }
}
@container (max-width: 470px) {
  .mel > * { --H: 480px; --bandH: 46px; --bh: 50px; --ah: 84px; --pw: 212px; --pr: 8px; --pt: 12px; --phh: 456px; --phs: 108px; }
  .mel-band { margin: 10px 10px 0; padding: 0 10px; gap: 10px; }
  .mel-ico { width: 30px; height: 30px; border-radius: 9px; }
  .mel-ico .mel-i { width: 15px; height: 15px; }
  .mel-ttl small { display: none; }
  .mel-pg { padding: 0 10px 12px; }
  .mel-k { padding: 7px 9px 0; }
  .mel-k small { font-size: 10px; letter-spacing: .02em; }
  .mel-ban { padding: 0 10px; font-size: 10.5px; line-height: 14px; }
  .mel-apr { padding: 9px 10px; }
  .mel-lc { display: none; }
  .mel-apr__d { height: 32px; align-items: center; font-size: 11px; line-height: 15px; white-space: normal; }
  .mel-seg { display: none; }
  .mel-tr { grid-template-columns: 62px minmax(0, 1fr); column-gap: 6px; padding: 6px 6px 6px 9px; }
  .mel-tr--h { padding: 0 9px; }
  .mel-day b { font-size: 11px; line-height: 15px; }
  .mel-day small { font-size: 10px; }
  .mel-ddc { --dcx: -12px; left: 96px; }
  .mel-ph__sb { padding: 0 12px 0 17px; }
  .mel-ph__pg { padding: 2px 8px 0; }
  .mel-pc__dl, .mel-pc__h, .mel-pc__m { padding-left: 9px; padding-right: 9px; }
  .mel-pr { grid-template-columns: 72px minmax(0, 1fr); column-gap: 6px; }
}