/* ============================================================
   PAGE: Talent detail — editorial profile
   Art direction: split portrait hero + facts + gallery + shows.
   DNA shared (tokens/topbar/footer); layout unique.
============================================================ */

.t-detail{padding-bottom:1rem}

/* breadcrumb */
.t-crumb{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);padding-top:1.4rem;margin-bottom:2rem}
.t-crumb a{color:var(--muted);transition:color .25s}
.t-crumb a:hover{color:var(--b2)}
.t-crumb svg{width:14px;height:14px}

/* ---- hero: portrait + info ---- */
.t-hero{display:grid;grid-template-columns:2fr 3fr;gap:clamp(1.5rem,4vw,3.2rem);align-items:end}
@media(max-width:760px){.t-hero{grid-template-columns:1fr;gap:1.6rem}}

/* frameless fullbody PNG — tinggi dibatasi viewport agar full body terlihat */
.t-portrait{
  position:relative;
  display:flex;align-items:flex-end;justify-content:center;
}
.t-portrait img{
  width:auto;max-width:100%;
  max-height:82vh;   /* full body muat satu layar */
  height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 28px 52px rgba(0,0,0,.2));
  animation:t-float 5.5s ease-in-out infinite;
  animation-delay:1.1s;
  will-change:transform;
  transform-origin:50% 100%;
}
[data-theme="dark"] .t-portrait img{filter:drop-shadow(0 24px 56px rgba(0,0,0,.5))}

@keyframes t-float{
  0%,100%{transform:translateY(0)    translateX(0)    rotate(0deg)}
  30%    {transform:translateY(-6px) translateX(9px)  rotate(.6deg)}
  65%    {transform:translateY(-4px) translateX(-8px) rotate(-.5deg)}
}
@media(prefers-reduced-motion:reduce){.t-portrait img{animation:none}}

@media(max-width:760px){
  /* portrait: center di atas, batas tinggi wajar */
  .t-portrait{justify-content:center}
  .t-portrait img{max-height:52vh;max-width:72%}  /* tidak selebar layar, ada nafas */

  /* h1 lebih compact di mobile */
  .t-info h1{font-size:clamp(2rem,8vw,3rem)}

  /* quote font sedikit lebih besar agar terbaca */
  .t-quote{font-size:clamp(1rem,4.5vw,1.3rem)}

  /* booking CTA: stack vertikal */
  .t-book{flex-direction:column;align-items:flex-start}
}

.t-info .role{font-size:.8rem;font-weight:700;letter-spacing:.06em;color:var(--b2);text-transform:uppercase}
.t-info h1{font-family:var(--f-h);font-size:clamp(2.6rem,7vw,5.5rem);line-height:.95;letter-spacing:-.02em;color:var(--ink2);margin:.4rem 0 .8rem}
.t-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;color:var(--muted);font-size:.86rem;margin-bottom:1.1rem}
.t-meta .m{display:inline-flex;align-items:center;gap:6px}
.t-meta svg{width:15px;height:15px;color:var(--b3)}
.t-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.t-tags span{font-size:.72rem;font-weight:600;color:var(--ink2);background:var(--bg2);border:1px solid var(--line);padding:.35rem .8rem;border-radius:99px}
.t-quote{font-family:var(--f-h);font-size:clamp(1.1rem,2.2vw,1.6rem);line-height:1.3;color:var(--ink2);
  border-left:3px solid var(--cy);padding-left:1rem;margin:0 0 1.3rem}
.t-bio{color:var(--muted);font-size:1rem;max-width:52ch;margin-bottom:1.6rem}
.t-socials{display:flex;gap:.6rem;flex-wrap:wrap}
.t-socials a{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:var(--ink2);
  border:1px solid var(--line);padding:.55rem 1rem;border-radius:99px;transition:.3s var(--ease)}
.t-socials a:hover{border-color:var(--cy);color:var(--cy);transform:translateY(-2px)}
.t-socials svg{width:15px;height:15px}

/* social metrics row (IG / X / TikTok) */
.t-stats{display:flex;flex-wrap:wrap;gap:.7rem;margin:0 0 1.5rem}
.t-stat{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-width:96px;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;
  transition:.3s var(--ease)}
.t-stat:hover{border-color:var(--cy);transform:translateY(-3px);box-shadow:var(--shadow)}
.t-stat .ti{display:flex;color:var(--b3)}
.t-stat .ti svg{width:17px;height:17px}
.t-stat b{font-family:var(--f-h);font-size:1.15rem;line-height:1;color:var(--ink2);margin-top:.3rem}
.t-stat .tl{font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:100%}
@media(max-width:760px){.t-stat{flex:1 1 calc(50% - .35rem);min-width:0;overflow:hidden}}  /* 2×2 grid */

/* hero actions */
.t-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}

/* ---- client logo marquee ---- */
.client-marquee{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 92%,transparent)}
.cm-track{display:flex;align-items:center;width:max-content;animation:cmarq 26s linear infinite;will-change:transform}
.cm-track:hover{animation-play-state:paused}
/* translate by exactly one copy's width. Each logo owns its trailing space via margin
   (not track `gap`) so the loop seam is uniform = no jump. */
@keyframes cmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cm-track{animation:none}}
.cm-logo{height:56px;width:auto;object-fit:contain;opacity:.78;margin-right:clamp(2.5rem,6vw,4.5rem);
  transition:opacity .3s,transform .3s var(--ease)}
.cm-logo:hover{opacity:1;transform:translateY(-2px)}
[data-theme="dark"] .cm-logo{filter:brightness(0) invert(1);opacity:.72}

/* ---- section heading ---- */
.t-sec{margin-top:clamp(3rem,7vw,5rem)}
.t-sec h2{font-family:var(--f-h);font-size:clamp(1.4rem,3vw,2.2rem);color:var(--ink2);margin-bottom:1.4rem;display:flex;align-items:center;gap:.7rem}
.t-sec h2::before{content:"";width:22px;height:3px;background:var(--grad);border-radius:2px}

/* ---- portfolio (masonry: varied image sizes flow into columns) ---- */
.t-portfolio{column-count:4;column-gap:.9rem}
@media(max-width:960px){.t-portfolio{column-count:3}}
@media(max-width:620px){.t-portfolio{column-count:2}}
@media(max-width:380px){.t-portfolio{column-count:1}}
/* tight, low-spread shadow so neighbouring posters don't pool into a tinted panel */
.t-portfolio figure{break-inside:avoid;-webkit-column-break-inside:avoid;margin:0 0 .9rem;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 3px 12px rgba(20,32,80,.06);background:var(--bg)}
[data-theme="dark"] .t-portfolio figure{box-shadow:0 3px 12px rgba(0,0,0,.3)}
.t-portfolio img{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
.t-portfolio figure:hover img{transform:scale(1.05)}

/* ---- shows ---- */
.t-shows{display:flex;flex-direction:column;gap:.7rem}
.t-show{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem;transition:.3s var(--ease)}
.t-show:hover{border-color:rgba(31,140,206,.4);transform:translateX(4px)}
.t-show .st-t{font-weight:700;color:var(--ink2)}
.t-show .st-v{font-size:.84rem;color:var(--muted)}
.t-show .st-d{font-family:var(--f-h);font-size:.92rem;color:var(--b2);white-space:nowrap}
.t-empty{color:var(--muted);font-size:.92rem;background:var(--bg2);border:1px dashed var(--line);border-radius:14px;padding:1.1rem 1.2rem}

/* ---- booking CTA ---- */
.t-book{position:relative;margin-top:clamp(3rem,7vw,5rem);border-radius:22px;overflow:hidden;background:var(--grad);color:#fff;
  padding:clamp(2rem,5vw,3.4rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.4rem}
.t-book::after{content:"";position:absolute;width:260px;height:260px;right:-70px;top:-80px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2)}
.t-book .bt{position:relative;z-index:1}
.t-book h3{font-family:var(--f-h);font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.05}
.t-book p{opacity:.9;margin-top:.4rem;max-width:40ch;font-size:.92rem}
.t-book .btn-cy{position:relative;z-index:1;background:#fff;color:var(--b1)}

/* ---- prev / next (stays horizontal even on mobile) ---- */
.t-nav{display:flex;justify-content:space-between;align-items:stretch;gap:.7rem;margin-top:clamp(2.5rem,5vw,3.5rem);flex-wrap:nowrap}
.t-nav a{display:inline-flex;align-items:center;gap:8px;min-width:0;font-weight:700;color:var(--ink2);font-size:.9rem;
  border:1px solid var(--line);padding:.7rem 1.2rem;border-radius:99px;transition:.3s var(--ease)}
.t-nav a:last-child{justify-content:flex-end}
.t-nav a .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.t-nav a:hover{border-color:var(--b2);color:var(--b2)}
.t-nav svg{width:16px;height:16px;flex:0 0 auto}
@media(max-width:520px){
  .t-nav a{flex:1 1 0;font-size:.82rem;padding:.65rem .9rem}
}

/* ---- not found ---- */
.t-404{text-align:center;padding:6rem 0}
.t-404 h1{font-family:var(--f-h);font-size:2.4rem;color:var(--ink2);margin-bottom:.6rem}
.t-404 p{color:var(--muted);margin-bottom:1.4rem}

/* ── IP & SHOW marquee (khusus Pandji) ─────────────────────── */
/* Judul "IP & Show" tetap sejajar gutter container (sama dgn "Klien").
   Hanya baris marquee (.ips-rows) yang full-bleed ke tepi layar. */
.t-sec--flush .ips-rows {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ips-rows {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  overflow: hidden;
  /* tanpa mask / gradasi — mentok penuh */
}
.ips-row {
  display: flex;
  overflow: hidden;
}
.ips-track {
  display: flex;
  flex-shrink: 0;
  gap: .85rem;
  animation: ipsScroll 38s linear infinite;
  will-change: transform;
}
.ips-row.rev .ips-track {
  animation-direction: reverse;
  animation-duration: 44s;
}
.ips-rows:hover .ips-track { animation-play-state: paused; }
@keyframes ipsScroll { to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .ips-track { animation: none; } }

.ips-cell {
  flex-shrink: 0;
  width: clamp(200px, 24vw, 340px);
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg3);
}
.ips-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.ips-row:hover .ips-cell img { transform: scale(1.05); }