/* Hakkımda: yalnız ortak kitte olmayan yerleşimler. Tüm sınıflar hk- önekli. */

/* ——— İç sahne: sağda, sahnenin alt kenarında duran portre ——— */
.hk-sahne { padding-bottom: 0; }
.hk-sahne__ic { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: end; }
.hk-sahne__metin { position: relative; z-index: 1; align-self: center; padding-bottom: clamp(2.75rem, 6vw, 5rem); }
.hk-sahne .baslik--sayfa { font-size: clamp(2.6rem, 1.3rem + 5.2vw, 5.75rem); max-width: 11em; }
.hk-sahne .not { margin-top: 1.4rem; }
.hk-figur { position: relative; isolation: isolate; justify-self: center; height: clamp(24rem, 20rem + 16vw, 40rem); aspect-ratio: 610 / 988; }
.hk-figur .demo-etiket { position: absolute; right: -4%; bottom: 22%; color: var(--metin); background: rgba(7, 10, 24, .7); }

/* ——— Bölüm başı: başlık ve kısa giriş ——— */
.hk-bas { margin-bottom: clamp(1.75rem, 4vw, 3.25rem); }
.hk-giris { margin: 1.3rem 0 0; font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem); line-height: 1.55; }

/* ——— Hikâye: köşe yazısından alıntı ve eğitim kutusu ——— */
.hk-alinti blockquote { margin: 0; }
.hk-alinti figcaption { margin-top: .7rem; }
.hk-egitim li { display: grid; gap: .15rem; }
.hk-egitim strong { font-weight: 650; color: var(--metin); line-height: 1.3; }
.hk-egitim span { font-size: .95rem; line-height: 1.4; color: var(--sis); }
.hk-egitim .demo-etiket { justify-self: start; margin-top: .3rem; }

/* ——— Yolculuk: solda yapışkan başlık, sağda zaman çizgisi ——— */
.hk-iki { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.75rem, 6vw, 6rem); align-items: start; }
.hk-iki__bas { position: sticky; top: 6.25rem; }
.yolculuk__yil .demo-etiket { vertical-align: middle; margin-left: .55rem; font-stretch: 100%; }
.yolculuk .hk-yil-bekliyor { font-stretch: 88%; font-weight: 700; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); color: var(--sis); }

/* ——— Nasıl çalışırım: çizgi simgeli ilke kartları ——— */
.hk-ikon { width: 2.75rem; height: 2.75rem; margin-bottom: 1.1rem; overflow: visible; fill: none; stroke: var(--buz); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hk-ikon * { vector-effect: non-scaling-stroke; }
.hk-ikon .hk-ikon__vurgu { stroke: var(--altin); }
.hk-sinir { margin-top: 1rem; max-width: 46rem; }

/* ——— Sahada: iki geniş, üç dar kart ——— */
.hk-saha { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.hk-saha > * { grid-column: span 2; }
.hk-saha > :nth-child(-n+2) { grid-column: span 3; }
.hk-gorev { margin-bottom: 1rem; max-width: 46rem; }

/* ——— Belgeler: onay bekleyen yer tutucu ——— */
.hk-bekleyen { display: grid; gap: .4rem; max-width: 46rem; border-style: dashed; border-color: rgba(127, 214, 255, .45); }
.hk-bekleyen h3 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; }

/* ——— Tablet ve telefon ——— */
@media (max-width: 60rem) {
  .hk-sahne__ic { grid-template-columns: minmax(0, 1fr); }
  .hk-sahne__metin { padding-bottom: clamp(2.75rem, 8vw, 4rem); }
  /* Portre metnin arkasına geçer: soldan ve alttan silinir, taşma yapmaz (sahne kırpar) */
  .hk-figur { position: absolute; z-index: 0; right: -2rem; bottom: 0; height: min(100%, 36rem); opacity: .5; pointer-events: none; }
  .hk-figur .figur {
    -webkit-mask-image: linear-gradient(#000 70%, rgba(0, 0, 0, 0) 99%), linear-gradient(90deg, rgba(0, 0, 0, 0), #000 55%);
    mask-image: linear-gradient(#000 70%, rgba(0, 0, 0, 0) 99%), linear-gradient(90deg, rgba(0, 0, 0, 0), #000 55%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .hk-figur .demo-etiket { right: 3.5rem; bottom: 10%; }   /* figür 2rem dışarı taşar; etiket ekranın içinde kalsın */
  .hk-iki { grid-template-columns: minmax(0, 1fr); }
  .hk-iki__bas { position: static; }
  .hk-saha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hk-saha > *, .hk-saha > :nth-child(-n+2) { grid-column: auto; }
  .hk-saha > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .hk-figur { right: -4.5rem; height: min(92%, 30rem); opacity: .36; }
  .hk-figur .demo-etiket { right: 5.25rem; bottom: 6%; }
  .hk-saha { grid-template-columns: minmax(0, 1fr); }
}