/* Jenny Wision -demojen yhteinen kitti: realistinen iPhone, somenäkymät, katseluikkuna. Purettu Rytmistä (demo-3). */
/* IPHONE — Pro-mittasuhteet, titaanikehys, Dynamic Island, statusrivi */
.device { container-type: inline-size; width: min(320px, 72vw); position: relative; z-index: 1; }
.phone { position: relative; width: 100%; aspect-ratio: 71.5 / 146.6; border-radius: 16.5cqw; padding: 1.15cqw;
  background: linear-gradient(135deg, #cfc6ba 0%, #8f857a 18%, #e9e3da 34%, #7c7369 52%, #d6cec3 70%, #8a8075 86%, #cbc2b6 100%);
  box-shadow: 0 0 0 .3cqw rgba(0,0,0,.35), 0 3cqw 6cqw -1cqw rgba(34,27,23,.35), 0 14cqw 22cqw -8cqw rgba(107,51,65,.35); }
.phone::before, .phone::after, .phone .btns::before { content: ""; position: absolute; width: 1.1cqw; border-radius: 1cqw; background: linear-gradient(90deg, #6f675e, #cfc6ba 60%, #8f857a); }
.phone::before { left: -.9cqw; top: 25%; height: 8.5%; box-shadow: 0 -10.5cqw 0 -.05cqw #8f857a; }   /* äänenvoimakkuus + / toimintopainike */
.phone .btns::before { left: -.9cqw; top: 35.5%; height: 8.5%; }                                       /* äänenvoimakkuus − */
.phone::after { right: -.9cqw; top: 29%; height: 13%; }                                                /* sivupainike */
.phone .bezel { position: relative; width: 100%; height: 100%; border-radius: 15.4cqw; background: #050505; padding: 2.6cqw; }
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: 12.8cqw; overflow: hidden; background: #1b1b1b; isolation: isolate; }
.phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.phone video.on { opacity: 1; }
.phone .screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.phone .screen > img.inset { top: 14cqw; height: calc(100% - 14cqw); object-position: 50% 0; }   /* kasvot statusrivin ja Dynamic Islandin alle */
.phone .island { position: absolute; z-index: 3; top: 2.9cqw; left: 50%; transform: translateX(-50%); width: 33cqw; height: 9.6cqw; border-radius: 9cqw; background: #000; }
.phone .island::after { content: ""; position: absolute; right: 3.2cqw; top: 50%; width: 3.1cqw; height: 3.1cqw; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2b3550 0 25%, #0b0d14 60%); }
.phone .status { position: absolute; z-index: 5; inset: 0 0 auto; height: 15.4cqw; display: grid; grid-template-columns: 1fr 37cqw 1fr; align-items: center; justify-items: center; color: #fff; font: 600 4.3cqw/1 -apple-system, "SF Pro Text", system-ui, sans-serif; letter-spacing: -.01em; background: linear-gradient(rgba(0,0,0,.28), transparent); pointer-events: none; }
.phone .status .t { padding-left: 2cqw; }
.phone .status svg { height: 3.1cqw; width: auto; fill: #fff; }
.phone .status .ic { grid-column: 3; display: flex; gap: 1.3cqw; align-items: center; padding-right: 1cqw; }
.phone .home { position: absolute; z-index: 2; bottom: 2.2cqw; left: 50%; transform: translateX(-50%); width: 36cqw; height: 1.45cqw; border-radius: 2cqw; background: rgba(255,255,255,.88); }
.phone .glare { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 32%); }


/* SOMEPROFIILIT PUHELIMESSA (palvelu 02) */
.social { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; background: #fff; font: 400 3.5cqw/1.3 -apple-system, "SF Pro Text", system-ui, sans-serif; color: #000; text-align: left; }
.social.on { opacity: 1; }
.sp { position: absolute; inset: 0; padding-top: 14.5cqw; opacity: 0; transform: translateY(3cqw); transition: opacity .5s ease, transform .5s ease; overflow: hidden; }
.sp.cur { opacity: 1; transform: none; }
.sp::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 14.5cqw; background: inherit; }   /* kiinteä statusrivin tausta: sisältö ei rullaa kellon alle */
.sp.ig { background: #fff; }
.sp .scroll { animation: feedscroll 10s ease-in-out infinite alternate; }
@keyframes feedscroll { 0%, 25% { transform: translateY(0); } 100% { transform: translateY(-38%); } }
.sp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp .g { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5cqw; }
.sp .g > * { position: relative; aspect-ratio: 3/4; overflow: hidden; background: #ddd; }
.sp .av { border-radius: 50%; overflow: hidden; background: #111; flex: none; }
.sp .btn2 { display: flex; gap: 1.6cqw; }
.sp .btn2 span { flex: 1; text-align: center; padding: 2.2cqw 0; border-radius: 2.2cqw; font-weight: 600; font-size: 3.4cqw; background: #efefef; }
.sp .tabs { display: flex; justify-content: space-around; border-bottom: .3cqw solid #dbdbdb; margin-top: 3cqw; }
.sp .tabs i { width: 33%; display: grid; place-items: center; padding: 2.4cqw 0; }
.sp .tabs i:first-child { box-shadow: inset 0 -.5cqw 0 currentColor; }
.sp .tabs svg { width: 5.4cqw; height: 5.4cqw; fill: none; stroke: currentColor; stroke-width: 2; }
/* Instagram */
.ig .bar { display: flex; align-items: center; gap: 1.5cqw; padding: 1.5cqw 4cqw 3cqw; font-weight: 700; font-size: 4.6cqw; }
.ig .bar svg { width: 3cqw; height: 3cqw; }
.ig .prof { display: flex; gap: 4cqw; align-items: center; padding: 0 4cqw; }
.ig .ring { padding: .8cqw; border-radius: 50%; background: conic-gradient(from 200deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34); }
.ig .ring .av { width: 19cqw; height: 19cqw; border: .8cqw solid #fff; }
.ig .prof b { display: block; font-size: 3.8cqw; margin-bottom: 1cqw; }
.ig .prof span { font-size: 3.2cqw; line-height: 1.3; color: #222; }
.ig .btn2 { padding: 3.4cqw 4cqw 0; }
.ig .btn2 span:first-child { background: #0095f6; color: #fff; }
.ig .hl { display: flex; gap: 4cqw; padding: 3.6cqw 4cqw 0; }
.ig .hl figure { width: 14cqw; text-align: center; font-size: 2.8cqw; }
.ig .hl figure div { width: 14cqw; height: 14cqw; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .6cqw #fff, 0 0 0 .9cqw #dbdbdb; margin-bottom: 1.2cqw; }
/* Alanavigaatio (TikTok, YouTube) */
.tabbar { position: absolute; z-index: 3; inset: auto 0 0; height: 17cqw; padding: 1.6cqw 2cqw 5.4cqw; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; font-size: 2.5cqw; }
.tabbar span { display: grid; justify-items: center; gap: .8cqw; opacity: .9; }
.tabbar span.cur { opacity: 1; font-weight: 600; }
.tabbar svg { width: 6cqw; height: 6cqw; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tabbar .plus { width: 11cqw; height: 7.4cqw; border-radius: 2.2cqw; display: grid; place-items: center; }
.tabbar .plus svg { width: 4.4cqw; height: 4.4cqw; stroke-width: 2.6; }
/* TikTok */
.tt { background: #000; color: #fff; }
.tt .scroll { padding-bottom: 20cqw; }
.tt .top, .yt .top { display: flex; justify-content: space-between; align-items: center; padding: .6cqw 4cqw 3.4cqw; }
.tt .top svg, .yt .top svg { width: 5.6cqw; height: 5.6cqw; fill: none; stroke: currentColor; stroke-width: 2; }
.tt .head { display: grid; grid-template-columns: 1fr auto; gap: 3cqw; padding: 0 4cqw; align-items: start; }
.tt .name { font-size: 7.6cqw; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.tt .av { width: 23cqw; height: 23cqw; box-shadow: 0 0 0 .5cqw #2a2a2a; }
.tt .bio { font-size: 3.3cqw; line-height: 1.35; margin-top: 3cqw; color: #f1f1f1; }
.tt .btn2 { padding: 3.6cqw 4cqw 0; }
.tt .btn2 span { background: #2f2f2f; color: #fff; border-radius: 1.6cqw; }
.tt .btn2 span:first-child { background: #fe2c55; }
.tt .tabs { justify-content: space-between; padding: 0 3cqw; border-color: #2a2a2a; margin-top: 4cqw; }
.tt .tabs i { width: auto; padding: 2.6cqw 2.4cqw; }
.tt .tabs i:first-child { box-shadow: inset 0 -.5cqw 0 #fff; }
.tt .g { gap: .4cqw; }
.tt .g > * svg { position: absolute; left: 2cqw; bottom: 2cqw; width: 3.2cqw; height: 3.2cqw; fill: none; stroke: #fff; stroke-width: 1.4; filter: drop-shadow(0 0 .6cqw rgba(0,0,0,.6)); }
.tt .tabbar { background: #000; border-top: .3cqw solid #1f1f1f; }
.tt .tabbar .plus { background: #fff; color: #000; box-shadow: -.9cqw 0 0 #25f4ee, .9cqw 0 0 #fe2c55; }
/* YouTube */
.yt { background: #0f0f0f; color: #f1f1f1; }
.yt .scroll { padding-bottom: 20cqw; }
.yt .head { display: flex; gap: 4cqw; align-items: center; padding: 0 4cqw; }
.yt .av { width: 21cqw; height: 21cqw; }
.yt .name { font-size: 6.8cqw; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.yt .bio { font-size: 3.1cqw; color: #aaa; padding: 3.2cqw 4cqw 0; line-height: 1.35; }
.yt .bio b { color: #f1f1f1; font-weight: 600; }
.yt .sub { margin: 3.6cqw 4cqw 0; padding: 2.6cqw 0; border-radius: 6cqw; background: #f1f1f1; color: #0f0f0f; text-align: center; font-weight: 600; font-size: 3.5cqw; }
.yt .ytabs { display: flex; gap: 8cqw; padding: 4.4cqw 4cqw 0; border-bottom: .3cqw solid #303030; white-space: nowrap; overflow: hidden; font-size: 3.9cqw; color: #aaa; }
.yt .ytabs span { padding-bottom: 2.6cqw; }
.yt .ytabs span:first-child { color: #f1f1f1; box-shadow: inset 0 -.5cqw 0 #f1f1f1; }
.yt h5 { font-size: 4.6cqw; font-weight: 700; padding: 4.4cqw 4cqw 3cqw; }
.yt .row { display: flex; gap: 3cqw; padding-left: 4cqw; overflow: hidden; }
.yt .card { flex: 0 0 70cqw; }
.yt .card .th { position: relative; aspect-ratio: 16/9; border-radius: 2.4cqw; overflow: hidden; }
.yt .card .th::after { content: ""; position: absolute; left: 0; bottom: 0; height: .9cqw; width: var(--pr, 0%); background: #f00; }
.yt .card p { font-size: 3.6cqw; font-weight: 600; margin-top: 2cqw; line-height: 1.25; }
.yt .shorts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5cqw; }
.yt .shorts > * { position: relative; aspect-ratio: 9/16; overflow: hidden; }
.yt .shorts i { position: absolute; top: 2cqw; right: 2.4cqw; font-style: normal; font-weight: 700; font-size: 3.6cqw; letter-spacing: .2cqw; text-shadow: 0 0 1cqw rgba(0,0,0,.6); }
.yt .tabbar { background: #0f0f0f; border-top: .3cqw solid #272727; }
.yt .tabbar .plus { width: 9cqw; height: 9cqw; border-radius: 50%; background: #272727; }
.yt .tabbar .me { width: 6cqw; height: 6cqw; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 .4cqw #f1f1f1; }
.screen.light .status { color: #000; background: none; }
.screen.light .status svg { fill: #000; }
.screen.light .status rect[fill="none"] { stroke: #000; }
.screen.light .home { background: rgba(0,0,0,.85); }
/* KATSELUIKKUNA */
dialog.lb { margin: auto; border: 0; padding: 0; background: transparent; width: min(440px, 92vw); height: fit-content; max-height: 92vh; overflow: visible; }
dialog.lb::backdrop { background: rgba(34,27,23,.86); backdrop-filter: blur(4px); }
.lb .stage video, .lb .stage img { width: 100%; max-height: 84vh; object-fit: contain; background: #000; border-radius: 6px; }
.lb .close { position: absolute; top: -52px; right: 0; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--linen); cursor: pointer; font-size: 1.4rem; line-height: 1; }
.lb .cap { color: var(--linen); margin-top: 12px; font-size: .9rem; }