/* ============================================================
   kültfilmler — KİŞİ DETAY (Oyuncu / Yönetmen)
   Tasarım: özel tasarım
   (grid/kart archive.css'ten gelir; bu dosya: portre hero)
   ============================================================ */

.crumb{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--faint); padding-top:16px; flex-wrap:wrap; }
.crumb a:hover{ color:var(--muted); }
.crumb svg{ opacity:.6; }

.hero{ display:grid; grid-template-columns:230px 1fr; gap:32px; padding:22px 0 30px; align-items:start; }
.portrait{ position:relative; aspect-ratio:3/4; border-radius:13px; overflow:hidden; border:1px solid var(--line-2); display:grid; place-items:center;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 9px), radial-gradient(120% 90% at 50% -5%, hsla(265,40%,46%,.7), transparent 60%), linear-gradient(160deg,#2a2440,#14121d); box-shadow:0 18px 40px -16px rgba(0,0,0,.7); }
.portrait img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.portrait .ini{ font-size:64px; font-weight:800; color:rgba(255,255,255,.92); }
.hinfo .kick{ font-size:10.5px; letter-spacing:2.5px; text-transform:uppercase; color:var(--orange); font-weight:700; margin-bottom:10px; }
.hinfo h1{ font-family:var(--display); font-weight:700; letter-spacing:-.4px; font-size:34px; line-height:1.05; color:#fff; }
.hinfo .role{ font-size:14px; color:var(--muted); margin-top:7px; }
.meta{ display:flex; flex-wrap:wrap; gap:9px 22px; margin-top:18px; }
.meta .m .l{ font-size:10.5px; letter-spacing:.3px; text-transform:uppercase; color:var(--faint); font-weight:600; }
.meta .m .v{ font-size:13px; font-weight:600; color:#eef; margin-top:3px; }
.bio{ font-size:13.5px; line-height:1.75; color:var(--muted); margin-top:18px; max-width:70ch; }
.bio.clamp{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.morebtn{ margin-top:9px; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted); background:none; border:none; cursor:pointer; font-family:inherit; }
.morebtn:hover{ color:var(--orange); }
.morebtn svg{ transition:transform .2s; } .morebtn.open svg{ transform:rotate(180deg); }
.hacts{ display:flex; gap:9px; margin-top:20px; }
.hacts button{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:8px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:.15s; }
.hacts .follow{ border:none; color:#241a09; background:linear-gradient(180deg,var(--orange),var(--orange-deep)); }
.hacts .follow:hover{ filter:brightness(1.06); }
.hacts .follow.on{ background:rgba(232,162,60,.12); color:#f3d39b; box-shadow:inset 0 0 0 1px rgba(232,162,60,.5); }
.hacts .soc{ width:40px; padding:0; justify-content:center; background:rgba(255,255,255,.05); border:1px solid var(--line-2); color:var(--muted); }
.hacts .soc:hover{ color:#fff; background:rgba(255,255,255,.09); }

.hr{ height:1px; background:var(--line); }

.sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin:30px 0 18px; }
.sec-head h2{ font-family:var(--display); font-weight:700; letter-spacing:-.4px; font-size:20px; color:#f2f2f3; }
.sec-head .num{ font-size:12px; color:var(--faint); margin-left:9px; font-family:var(--sans); font-weight:500; }

@media (max-width:680px){
  .hero{ grid-template-columns:1fr; }
  .portrait{ max-width:200px; }
}