/* Hero "live lesson" video call (home + English for adults, EN/TR). Shared by all four pages. */
.meet-stage { position: relative; margin-top: 44px; padding-inline: 20px; }
.meet-wrap { position: relative; max-width: 960px; margin-inline: auto; }
.meet { background: #485935; border-radius: 26px; padding: 10px 10px 0; box-shadow: 0 34px 70px -34px rgba(31,38,24,.55); }
.meet-video { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #2A2E25; }
.meet-video .photo { position: absolute; inset: -2%; width: 104%; height: 104%; max-width: none; object-fit: cover; object-position: 50% 20%; transform-origin: 50% 35%; animation: meet-breathe 18s ease-in-out infinite alternate; }
.meet-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 22%, transparent 60%, rgba(0,0,0,.45) 100%); pointer-events: none; }
@keyframes meet-breathe { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.035) translate(-0.6%, 0.4%); } 100% { transform: scale(1.02) translate(0.5%, -0.3%); } }

.meet-top { position: absolute; left: 16px; right: 16px; top: 14px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.meet-pill { display: inline-flex; align-items: center; gap: .45em; padding: .38em .72em; border-radius: 8px; font-size: .78rem; font-weight: 700; background: rgba(20,22,18,.55); color: #fff; backdrop-filter: blur(6px); font-variant-numeric: tabular-nums; }
.meet-pill .rec { width: 8px; height: 8px; border-radius: 50%; background: #FF4D4D; animation: meet-blink 1.6s infinite; }
@keyframes meet-blink { 50% { opacity: .25; } }

/* speaking ring + name, like Meet's tile label */
.meet-name { position: absolute; left: 16px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: .85rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.meet-eq { display: inline-flex; align-items: center; gap: 2px; width: 22px; height: 22px; justify-content: center; border-radius: 50%; background: #93A267; }
.meet-eq i { display: block; width: 3px; height: 4px; border-radius: 2px; background: #fff; }
.meet.talking .meet-eq i { animation: meet-eq .9s ease-in-out infinite; }
.meet.talking .meet-eq i:nth-child(2) { animation-delay: -.3s; }
.meet.talking .meet-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes meet-eq { 0%, 100% { height: 4px; } 50% { height: 11px; } }
.meet-video .ring { position: absolute; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 3px #93A267; opacity: 0; transition: opacity .3s; z-index: 1; pointer-events: none; }
.meet.talking .meet-video .ring { opacity: 1; }

/* student self view */
.meet-self { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 21%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #3A3F33; box-shadow: 0 8px 20px -8px rgba(0,0,0,.6); }
.meet-self img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.meet-self span { position: absolute; left: 8px; bottom: 6px; color: #fff; font-size: .72rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* live captions */
.meet-cc { position: absolute; left: 50%; bottom: 56px; z-index: 2; transform: translateX(-50%); width: min(70%, 520px); text-align: center; }
.meet-cc p { margin: 0; display: inline; background: rgba(20,22,18,.72); color: #fff; padding: .35em .6em; border-radius: 8px; font-size: clamp(.82rem, 1.7vw, 1.08rem); line-height: 1.75; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.meet-cc small { display: block; margin-bottom: 6px; }
.meet-cc small span { display: inline-block; background: #F8DDD6; color: #1F2618; font-size: .7rem; font-weight: 700; padding: .2em .6em; border-radius: 999px; letter-spacing: .02em; }
.meet-cc .caret { display: inline-block; width: 2px; height: 1em; background: #fff; margin-left: 2px; vertical-align: -2px; animation: meet-blink 1s steps(1) infinite; }

/* control bar under the video */
.meet-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 10px 14px; color: #E6EDDC; font-size: .8rem; }
.meet-bar .when { font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.meet-ctrls { display: flex; gap: 10px; align-items: center; }
.meet-ctrls span { width: 40px; height: 40px; border-radius: 50%; background: #5E6F4A; display: grid; place-items: center; }
.meet-ctrls span.on { background: #CADBB7; }
.meet-ctrls span.on svg { stroke: #1F2618; }
.meet-ctrls span.end { width: 56px; border-radius: 999px; background: #D93025; }
.meet-ctrls svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.meet-bar .spacer { flex: 1 1 0; text-align: right; }

/* strong points floating around the call */
.perk { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .6em; padding: .6em 1.05em .6em .6em; border-radius: 14px; font-weight: 700; font-size: .92rem; color: #1F2618; box-shadow: 0 12px 26px -14px rgba(31,38,24,.4); white-space: nowrap; animation: meet-float 6s ease-in-out infinite; }
.perk .stk { width: 38px; height: 38px; flex: none; margin: -10px 0 -10px -6px; transform: rotate(-6deg); }
.perk.p1 { background: #CADBB7; left: -78px; top: 12%; }
.perk.p2 { background: #F8DDD6; right: -86px; top: 9%; animation-delay: -2s; }
.perk.p3 { background: #DCE6F1; left: -60px; bottom: 30%; animation-delay: -4s; }
.perk.p4 { background: #E5E0E9; right: -70px; bottom: 34%; animation-delay: -1s; }
@keyframes meet-float { 50% { transform: translateY(-8px); } }

@media (max-width: 1100px) {
  .perk.p1 { left: -20px; } .perk.p2 { right: -20px; } .perk.p3 { left: -14px; } .perk.p4 { right: -14px; }
}
@media (max-width: 760px) {
  .meet { border-radius: 20px; padding: 6px 6px 0; }
  .meet-video { aspect-ratio: 4 / 5; border-radius: 14px; }
  .meet-video .ring { border-radius: 14px; }
  .meet-self { width: 30%; top: 52px; bottom: auto; }
  .meet-cc { width: 86%; bottom: 52px; }
  .meet-name { bottom: 12px; }
  .meet-bar .when { display: none; }
  .meet-bar { justify-content: center; }
  .meet-bar .spacer { display: none; }
  .meet-ctrls span { width: 36px; height: 36px; }
  .perk-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
  .perk { position: static; animation: none; font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .meet-video .photo, .perk, .meet-pill .rec, .meet.talking .meet-eq i, .meet-cc .caret { animation: none; }
}