/* Shared portrait treatment, matching the home-page teacher gallery. */
.ht-portrait{position:relative; width:100%; aspect-ratio:1; isolation:isolate}
.ht-portrait-back{position:absolute; inset:11% 0 0 11%; border-radius:58% 42% 53% 47% / 45% 56% 44% 55%; background:#BFEAF4; transition:transform var(--dur-slow) var(--ease-spring)}
.ht-portrait-frame{position:absolute; inset:0 8% 8% 0; overflow:hidden; border-radius:47% 53% 44% 56% / 55% 47% 53% 45%; background:var(--cyan-50,#E7F6FA)}
.p3-video-card .ht-portrait img,#sorular .reel-zoom .ht-portrait img{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; max-width:none; object-fit:cover; object-position:center top; background:transparent; transition:transform var(--dur-slow) var(--ease-out)}
.ht-person-card:nth-child(even) .ht-portrait-back{inset:11% 11% 0 0; border-radius:44% 56% 42% 58% / 57% 43% 57% 43%}
.ht-person-card:nth-child(even) .ht-portrait-frame{inset:0 0 8% 8%; border-radius:53% 47% 52% 48% / 46% 54% 46% 54%}
.ht-portrait-hello,#neden .nd-hello{position:absolute; z-index:3; top:0; left:3%; max-width:94%; padding:9px 14px; border-radius:20px; background:var(--sun,#FFC94A); color:var(--ink); font-family:var(--fun,'Poetsen One',sans-serif); font-size:clamp(16px,1.5vw,22px); line-height:1.1; pointer-events:none; opacity:0; transform:translate(6px,10px) scale(.72) rotate(8deg); transform-origin:85% 120%; transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-slow) var(--ease-spring)}
.ht-portrait-hello::after{content:""; position:absolute; top:calc(100% - 3px); right:14px; width:18px; height:16px; background:var(--sun,#FFC94A); clip-path:polygon(0 0,100% 0,100% 100%)}
.p3-video-card.ht-person-card{overflow:visible; background:transparent; border:0; box-shadow:none}
.p3-video-card.ht-person-card .p3-card-body{padding:22px 4px}
.p3-video-card button.ht-portrait-play{position:absolute; z-index:2; bottom:12%; right:10%; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; background:var(--coral); color:var(--ink); font-size:18px; text-align:center; box-shadow:0 5px 16px #082d5626}
.p3-video-card button.ht-watch{width:auto; font-family:var(--body); font-size:15px; font-weight:700}
#sorular .reel-media{aspect-ratio:1; overflow:visible; background:transparent}
#sorular .reel-media::after{display:none}
#sorular .reel-zoom{transform:none; overflow:visible}
#sorular .reel:hover .reel-zoom,#sorular .reel:has(.reel-btn:focus-visible) .reel-zoom{transform:none}
#sorular .reel-vid{display:none}
#sorular .reel-cat{top:auto; bottom:8%; left:5%; background:#fff; color:var(--ink)}
#sorular .reel-hint{display:none}
#sorular .reel-play{left:auto; right:7%; bottom:8%}
#neden .nd-portrait::before{transition:transform var(--dur-slow) var(--ease-spring)}
@media(hover:hover) and (pointer:fine){
  .ht-person-card:hover .ht-portrait-hello,#neden .nd-photo:hover .nd-hello{opacity:1; transform:none}
  .ht-person-card:hover .ht-portrait-back,#neden .nd-photo:hover .nd-portrait::before{transform:scale(1.07) rotate(5deg)}
  .ht-person-card:hover .ht-portrait img{transform:scale(1.04)}
}
.ht-person-card:focus-within .ht-portrait-hello,#neden .nd-photo:focus-within .nd-hello{opacity:1; transform:none}
.ht-person-card:focus-within .ht-portrait-back,#neden .nd-photo:focus-within .nd-portrait::before{transform:scale(1.07) rotate(5deg)}
.ht-person-card:focus-within .ht-portrait img{transform:scale(1.04)}
@media(hover:none){.ht-portrait-hello,#neden .nd-hello{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.ht-portrait *,.nd-portrait::before,#neden .nd-hello{transition:none!important}.ht-person-card .ht-portrait-back,.ht-person-card .ht-portrait img,#neden .nd-photo .nd-portrait::before{transform:none!important}}
#vdlg .ht-video-brand{display:none}
#vdlg.ht-youtube{width:min(920px,calc(100vw - 32px),calc((100dvh - 180px) * 16 / 9)); padding:18px; border-radius:28px; background:#fff; box-shadow:var(--shadow-l)}
#vdlg.ht-youtube .ht-video-brand{display:flex; align-items:center; gap:18px; padding:0 44px 16px 0; color:var(--ink); font-size:14px; font-weight:600}
#vdlg .ht-video-brand img{width:160px; height:27px; object-fit:cover; object-position:center}
#vdlg.ht-youtube .v-frame{aspect-ratio:16/9; border-radius:18px}
#vdlg.ht-youtube iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
#vdlg.ht-youtube .v-cap{color:var(--ink); font-family:var(--display); font-size:18px; padding-inline:8px}
@media(max-width:520px){#vdlg.ht-youtube{padding:12px;border-radius:20px}#vdlg .ht-video-brand span{display:none}}
