/* Sayfa başlığı — SİNEMATİK varyant (page-header · cinema)

   Tam genişlik: arkada video/kapak, üstte perde, solda metin, altta cam
   şerit. Header bandın üstünde şeffaf durur (headerOverlay).

   OKUNURLUK PERDEDEN GELİYOR, videodan değil. Metnin durduğu sol yarı
   her karede koyu kalmalı: perde soldan %88 → %0'a iner; alttaki
   degrade bir sonraki beyaz bölüme bağlar. */

.sc-page-header--cinema {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(640px, 92vh, 900px);
    padding: calc(var(--header-h, 116px) + clamp(2.5rem, 5vw, 4.5rem)) 0 clamp(2rem, 4vw, 3rem);
    overflow: hidden;
    isolation: isolate;
    background: #07121c;
    color: #fff;
}

/* ------------------------------------------------------------ medya */

.phc__medya {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.phc__kapak,
.phc__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
}

/* Yavaş yakınlaşma: kapak da durağan kalmasın (video yokken) */
.phc__kapak { animation: phc-yakin 24s var(--ease) infinite alternate; }

@keyframes phc-yakin {
    from { transform: scale(1.02); }
    to   { transform: scale(1.09); }
}

/* Döngü dikişi: son saniyede video altındaki kapağa erir (bkz. app.js) */
.phc__video { transition: opacity 0.9s var(--ease); }
.phc__video--eriyor { opacity: 0; }

.phc__perde {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4, 12, 20, 0.90) 0%, rgba(4, 12, 20, 0.72) 32%, rgba(4, 12, 20, 0.22) 62%, rgba(4, 12, 20, 0) 80%),
        linear-gradient(180deg, rgba(4, 12, 20, 0.55) 0%, rgba(4, 12, 20, 0) 26%, rgba(4, 12, 20, 0) 64%, rgba(4, 12, 20, 0.78) 100%);
}

/* Marka turkuazı: sol altta hafif ışık — perdeyi düz siyah olmaktan çıkarır */
.phc__isik {
    position: absolute;
    left: -10%;
    bottom: -30%;
    width: 60%;
    height: 80%;
    background: radial-gradient(closest-side, rgba(14, 116, 144, 0.45), transparent);
    filter: blur(20px);
}

/* ------------------------------------------------------------ metin */

.phc__ic {
    position: relative;
    display: grid;
    gap: clamp(3rem, 7vw, 5.5rem);
    width: 100%;
}

.phc__metin { max-width: 40rem; }

.phc__etiket {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--sp-6);
    padding: 7px 16px 7px 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

/* Canlı nokta: "şu an yayında" */
.phc__etiket i {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
}

.phc__etiket i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #34d399;
    animation: phc-nabiz 2.2s var(--ease-out) infinite;
}

@keyframes phc-nabiz {
    from { transform: scale(1); opacity: 0.7; }
    to   { transform: scale(2.8); opacity: 0; }
}

.phc__baslik {
    margin: 0 0 var(--sp-6);
    font-size: var(--fs-display);
    font-weight: var(--fw-bold);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: #fff;
    text-wrap: balance;
}

.phc__alt {
    max-width: 34rem;
    margin: 0 0 var(--sp-10);
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
}

.phc__eylem {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.phc__btn {
    border-radius: var(--r-full);
    transition: transform 0.25s var(--ease-out), background-color 0.25s, box-shadow 0.25s;
}

.phc__btn--dolu {
    background: #fff;
    color: var(--ink-900);
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5);
}

.phc__btn--dolu:hover { transform: translateY(-2px); background: var(--brand-50); color: var(--ink-900); }

.phc__btn--cam {
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
}

.phc__btn--cam:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ------------------------------------------------------- alt şerit */

.phc__serit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-8);
    padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--r-lg);
    background: rgba(8, 20, 30, 0.42);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.phc__serit-baslik {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

.phc__serit-liste {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: var(--sp-2) clamp(1rem, 2.6vw, 2.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.phc__serit-liste li {
    font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.125rem);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    color: #fff;
}

.phc__serit-baglanti {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 10px 18px;
    border-radius: var(--r-full);
    background: rgba(255, 255, 255, 0.12);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: #fff;
    text-decoration: none;
    transition: background-color 0.25s;
}

.phc__serit-baglanti svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease-out); }
.phc__serit-baglanti:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.phc__serit-baglanti:hover svg { transform: translateY(2px); }

/* --------------------------------------------------------- ölçüler */

@media (max-width: 900px) {
    /* Dar ekranda özne sağda kalıyor; perde tüm genişliğe yayılır */
    .phc__perde {
        background: linear-gradient(180deg, rgba(4, 12, 20, 0.62) 0%, rgba(4, 12, 20, 0.55) 40%, rgba(4, 12, 20, 0.88) 100%);
    }
}

@media (max-width: 640px) {
    .sc-page-header--cinema { min-height: 0; padding-bottom: var(--sp-6); }
    .phc__kapak,
    .phc__video { object-position: 70% center; }
    .phc__alt   { margin-bottom: var(--sp-8); }
    .phc__eylem .btn { flex: 1 1 auto; justify-content: center; }
    .phc__serit { padding: var(--sp-4); }
    .phc__serit-baglanti { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .phc__kapak,
    .phc__etiket i::after { animation: none; }
    .phc__btn,
    .phc__serit-baglanti svg { transition: none; }
}