/* ===========================================================================
   patlak.css — ana sayfanın açılış bandı ("patlak görünüm")

   Yalnız inc/patlak.php yüklendiğinde devreye girer; o tek `require` satırı
   silinince bu dosya da hiç istenmez. Sitenin başka hiçbir kuralına dokunmaz,
   kendi `--patlak-*` değişkenlerini kullanır.

   YAZI SOLDA, KLİP SAĞDA — KLİBİN KUTUSU YOK (2026-08-24 akşam).
   Klip sağ sütunda `contain` ile duruyor, çevresinde kalan boşluk KLİBİN
   KENDİ ÇEVRE RENKLERİYLE dolduruluyor; kenarları da o dolguya doğru
   söndürülüyor. Amaç, ekranda bir video dikdörtgeni değil, aynı ışığın
   içinde süzülen parçalar görünmesi.

   Dolgunun sayıları klipten ÖLÇÜLDÜ (60 kare, dört kenar):
     sol/sağ kenar : üstte (28,28,28) → altta (15,15,15), düz nötr degrade
     alt kenar     : (17,17,17), düz
     üst kenar     : köşelerde (30,30,30), ortada tepe (68,67,72) — elips ışık
   Yani zemin = dikey degrade + klibin ÜST KENARINA oturan elips bir ışık.
   Bu iki katman `patlak.js` içinde tuvale, klibin o anki dikdörtgenine göre
   basılıyor: ışık sahnenin değil KLİBİN üst orta noktasında duruyor, ikisi
   birbirinin devamı gibi okunuyor. Buradaki `background` yalnız yedek —
   betik ya da tuval çalışmazsa görünen o.

   NEDEN `cover` DEĞİL: sağ sütun 835x860 gibi neredeyse kare bir kutu, klip
   1,78. `cover` ile oturtulsaydı genişliğin %45'i kırpılırdı; parçalar
   kadrajın iki kenarına kadar dağıldığı için sahnenin yarısı giderdi.
   `contain` boşluk bırakıyor ama o boşluk artık bir kusur değil, tasarımın
   kendisi.

   Bant iki temada da KOYU: klibin kendi zemini koyu, açık bir bant klibin
   altında ikinci bir kutu gibi duruyordu.
   =========================================================================== */

.patlak {
    /* KLİBİN ÇEVRE RENKLERİ — dördü de klipten ölçüldü, betik bu değişkenleri
       CSS'ten okuyup tuvale aynısını basıyor. Tek yerden yönetilsin diye
       burada duruyorlar; değiştirilirse zemin de tuval de birlikte değişir. */
    --patlak-ust:  #1c1c1c;    /* klibin üst kenarı, ışığın dışında kalan köşeler */
    --patlak-alt:  #0f0f0f;    /* klibin alt kenarı */
    --patlak-isik: 72, 72, 79; /* üst ortadaki elips ışığın tepe rengi (RGB) */
    /* Geriye dönük ad: dar ekranda ve yedek dolguda kullanılan tek renk. */
    --patlak-zemin: #151515;

    --patlak-murekkep: #f4f5f7;
    --patlak-sis: #a9aeb7;
    --patlak-cizgi: rgba(255, 255, 255, .22);
    --patlak-yol: 340vh;       /* bandın kaydırma yolu: ne kadar uzun, o kadar yavaş sürer */

    position: relative;
    /* YEDEK zemin. Gerçek zemini tuval basıyor (ışık klibin üst kenarına
       oturuyor, buradaki sabit %28 değil); bu kural yalnız betik ya da tuval
       çalışmadığında görünür. */
    background:
        radial-gradient(62% 46% at 74% 28%,
            rgba(var(--patlak-isik), .55) 0%,
            rgba(var(--patlak-isik), 0) 72%),
        linear-gradient(to bottom, var(--patlak-ust), var(--patlak-alt));

    /* Bant üst şeridin ALTINA çekiliyor. Şerit yapışkan ve saydam; band
       onun altından başlamazsa sabit sahne ekranın 68 px aşağısından
       başlıyor, ilerleme rayı ile "Kaydırın" ipucu ilk ekranda katlanın
       altında kalıyordu (ölçüldü: ray y=926, ekran 860). */
    margin-top: calc(var(--tepe-y) * -1);
}

/* ---------------------------------------------------------------------------
   AÇIK BANT — iPhone klibi (cihaz.php?tip=iphone)

   Bandın zeminini KLİP belirler, sayfanın teması değil. MacBook klibinin
   stüdyo zemini koyu; patlamış iPhone klibininki kodlarken tek renge
   düzleştirilmiş düz krem (ölçüldü: sol/üst/alt kenarların üçü de #efede9).
   Bu klibe koyu bir bant verilirse klip yeniden çevresinden ayrılan bir
   dikdörtgen olur — bandın tek işi tam bunu önlemek.

   Zemin DÜZ olduğu için üç jeton da aynı: betiğin çizdiği dikey degrade ve
   elips ışık kendiliğinden görünmez olur, tuval tek renge boyanır. Klibin
   kenarları yine o renge sönüyor.

   Sönük metin #55565c: krem zeminde kontrast 6,9 (AA üstü). Kart/çizgi
   renkleri siyahın saydamıyla yazılıyor — beyazın saydamı açık zeminde hiç
   görünmüyordu. */
.patlak.acik {
    --patlak-ust:  #efede9;
    --patlak-alt:  #efede9;
    --patlak-isik: 239, 237, 233;
    --patlak-zemin: #efede9;
    --patlak-murekkep: #14151a;
    --patlak-sis: #55565c;
    --patlak-cizgi: rgba(0, 0, 0, .18);
    background: #efede9;
}

/* Düğmeler bandın zeminine göre yazılıyor (bkz. .patlak .dugme). Koyu bantta
   zemin --patlak-murekkep, yani AÇIK bir blok; açık bantta aynı jeton koyu
   olduğu için blok koyu olur ve üstündeki #101216 yazı kaybolur. Üzerine
   gelme rengi de beyaza gidiyordu — açık zeminde düğme yok oluyordu. */
.patlak.acik .patlak-eylem .dugme:not(.hat):not(.sade),
.patlak.acik .dugme { color: #f7f7f8; }

.patlak.acik .patlak-eylem .dugme:not(.hat):not(.sade):hover,
.patlak.acik .dugme:hover {
    background: #33353d;
    border-color: #33353d;
    color: #f7f7f8;
}

.patlak.acik .dugme.hat { background: rgba(0, 0, 0, .04); }

.patlak.acik .dugme.hat:hover {
    background: rgba(0, 0, 0, .08);
    border-color: rgba(0, 0, 0, .38);
}

/* Ray yatağı beyazın saydamıydı — krem zeminde görünmüyordu. */
.patlak.acik .patlak-ray { background: rgba(0, 0, 0, .1); }

/* EKRANDA GÖRÜNEN KLİP BU. Betik klibi buraya çiziyor, gerçek <video> hazır
   olur olmaz saydamlaşıyor: tarayıcı video katmanını CSS renkleriyle aynı
   boru hattından geçirmediği için klibin dikdörtgeni çevresinden ayırt
   ediliyordu. Klip `cover` ile tam kadraj olduğundan doldurulacak boşluk yok;
   tuvalin geri kalanı (yalnız dar ekranda görünür) `--patlak-zemin` ile
   boyanıyor. Betik veya tuval çalışmazsa açılmaz (opacity 0 kalır) ve video
   görünür kalır — bant çalışmaya devam eder. */
.patlak-zemin {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity .25s linear;
    pointer-events: none;
}

.patlak-zemin.hazir { opacity: 1; }

/* Yazının sol payı sitenin kendi kabıyla (.kap → --kap 1140px) aynı hizada:
   bandın başlığı altındaki bölümlerin başlıklarıyla aynı dikey çizgiden
   başlasın. */
.patlak-uzun   {
    height: var(--patlak-yol);
    --patlak-pay: max(var(--yan), calc((100vw - var(--kap)) / 2 + var(--yan)));
}

.patlak-sabit  {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
}

/* --- sahne ------------------------------------------------------------- */

.patlak-sahne {
    position: relative;
    z-index: 1;          /* .patlak-sabit::before geçişinin üstünde kalsın */
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 44%) minmax(0, 56%);
    align-items: center;
}

/* Klip SAĞ SÜTUNDA, yazının yanında — üstünde değil. Kutusu yok: `contain`
   ile oturuyor, çevresinde kalan boşluğu tuval klibin kendi çevre renkleriyle
   dolduruyor ve kenarları o dolguya doğru sönüyor (bkz. patlak.js). */
.patlak-medya {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    height: 100%;
    /* Sağda pay ŞART: klip sütunun tamamını kaplayınca (contain enine
       oturuyor) sağ kenarı ekranın kenarına değiyor ve o kenarın sönmesi
       ekran dışında kalıyordu — üç kenar zemine karışırken dördüncüsü
       kesik duruyordu. */
    padding-inline: clamp(8px, 1.4vw, 26px) clamp(16px, 3.2vw, 56px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.patlak-video {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    /* Klip kendi kendine oynamaz; dokunuşu sayfaya bırak. */
    pointer-events: none;
    background: transparent;
    transition: opacity .2s linear;
}

/* Tuval hazır olunca gerçek <video> saydamlaşıyor: ekranda görünen klip
   tuvale çizileni. Video sayfada duruyor — kareyi çözen, arayan ve poster'ı
   gösteren o; yalnız GÖRÜNMÜYOR.

   Sebep ölçüldü: tarayıcı video katmanını CSS renkleriyle aynı renk boru
   hattından geçirmiyor. Klibin zemini ile bandın zemini bayt bayt aynı
   (239,237,233) olmasına rağmen ekranda klibin dikdörtgeni çevresinden daha
   AÇIK çıkıyor, tam da istenmeyen o kutu görünüyordu. Klip tuvale çizilince
   ikisi de aynı boru hattından geçiyor ve fark tamamen kayboluyor.

   Sınıfı betik ekliyor; betik ya da tuval çalışmazsa video görünür kalır. */
.patlak.tuval-hazir .patlak-video { opacity: 0; }

/* SOL PERDE KALDIRILDI. Klip yazının arkasında değil YANINDA duruyor; yazının
   üstünde okunurluk için karartma gerekmiyor, eklenirse de sahnenin sol yarısı
   sağ yarısından koyu kalır ve tam kaçınılmak istenen "iki ayrı kutu"
   görüntüsü geri gelir. */

/* --- yazı sütunu -------------------------------------------------------- */

.patlak-yazi {
    grid-column: 1;
    grid-row: 1;
    z-index: 2;
    padding: 0 clamp(20px, 2.4vw, 36px) 0 var(--patlak-pay);
    color: var(--patlak-murekkep);
}

/* Kırıntı + etiket yalnız iç sayfa bandında var (bkz. inc/patlak.php).
   Sitenin .kirinti / .sayfa-etiket kuralları bandın dışında tanımlı ve
   sayfanın temasına göre renkleniyor; bant kendi zeminine göre renklendiği
   için ayrı yazılıyorlar. */
.patlak-kirinti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--patlak-sis);
}
.patlak-kirinti a { color: inherit; text-decoration: none; }
.patlak-kirinti a:hover { color: var(--patlak-murekkep); text-decoration: underline; }

.patlak-etiket {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--patlak-sis);
}

.patlak-yazi h1 {
    margin: 0;
    font-size: clamp(32px, 4.1vw, 54px);
    line-height: 1.04;
    letter-spacing: -.025em;
    font-weight: 700;
    color: var(--patlak-murekkep);
}

.patlak-alt {
    margin: 16px 0 0;
    max-width: 30ch;
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.55;
    color: var(--patlak-sis);
}

/* Kaydırmayla değişen tek satır. Dört metin üst üste duruyor, yüksekliği
   en uzun olan belirliyor — sıra değiştiğinde altındaki düğmeler oynamasın. */
.patlak-perdeler {
    position: relative;
    margin: 26px 0 0;
    min-height: 3.4em;
}

.patlak-perde {
    position: absolute;
    inset: 0;
    margin: 0;
    max-width: 26ch;
    font-size: clamp(17px, 1.5vw, 22px);
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--patlak-murekkep);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
}

.patlak-perde.acik {
    opacity: 1;
    transform: none;
}

.patlak-eylem {
    margin: 30px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Düğmeler bandın kendi zeminine göre yazılıyor, sayfanın temasına göre değil:
   bant iki temada da koyu, açık temanın düğme renkleri burada okunmuyor.

   Seçici bilerek uzun: tema.css'te `[data-tema="koyu"] .dugme:not(.hat):not(.sade)`
   kuralı da bu düğmeye yetişiyor, kısa bir seçiciyle yazılırsa o kazanıyor. */
.patlak .patlak-eylem .dugme:not(.hat):not(.sade),
.patlak .dugme {
    border-radius: 999px;
    padding: 13px 24px;
    font-size: 15px;
    font-weight: 600;
    background: var(--patlak-murekkep);
    border: 1px solid var(--patlak-murekkep);
    color: #101216;
    box-shadow: none;
}

.patlak .patlak-eylem .dugme:not(.hat):not(.sade):hover,
.patlak .dugme:hover { background: #ffffff; border-color: #ffffff; color: #101216; }

.patlak .dugme.hat {
    background: rgba(255, 255, 255, .06);
    color: var(--patlak-murekkep);
    border-color: var(--patlak-cizgi);
}

.patlak .dugme.hat:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .42);
    color: var(--patlak-murekkep);
}

/* Düğmelerin altındaki açıklama. Sütunun alt yarısı boştu; metin oraya
   oturuyor. Genişliği 52ch'de duruyor — daha geniş yazılırsa satırlar klibin
   altına doğru uzuyor ve iki sütun tek blok gibi görünüyor. Punto başlıktan
   ve kaydırma satırından KÜÇÜK: sıralama başlık → kaydırma satırı → düğme →
   açıklama olarak okunmalı. */
.patlak-guven {
    margin: 22px 0 0;
    max-width: 52ch;
    font-size: clamp(12.5px, .95vw, 14px);
    line-height: 1.65;
    color: var(--patlak-sis);
}

/* --- kaydırma ipucu + ilerleme rayı ------------------------------------- */

.patlak-ipucu {
    position: absolute;
    left: var(--patlak-pay);
    bottom: 40px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--patlak-sis);
    transition: opacity .4s ease;
}

.patlak-ipucu i {
    display: block;
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: .5;
    animation: patlak-ipucu 1.9s ease-in-out infinite;
}

@keyframes patlak-ipucu {
    0%, 100% { transform: translateX(0);   opacity: .5; }
    50%      { transform: translateX(8px); opacity: 1; }
}

/* Kaydırma başlar başlamaz ipucu çekilir. */
.patlak.surulen .patlak-ipucu { opacity: 0; }

.patlak-ray {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(255, 255, 255, .12);
    z-index: 2;
}

/* Ray `width` ile değil `transform: scaleX()` ile sürülüyor: yüzde genişlik
   her karede yerleşim hesabı tetikliyordu, ölçek yalnız birleştirici
   katmanda kalıyor. Başlangıç 0, betik oranı yazıyor. */
.patlak-ray i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--patlak-murekkep);
    opacity: .55;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* KENAR KARARTMASI (vinyet) KALDIRILDI. Bandın zemini artık tek renk;
   kenarlara doğru koyulaşan bir katman o tek rengi bozuyor, parçalar düz
   yüzeyde değil bir kutunun içinde duruyormuş gibi görünüyordu. Geri
   eklenmesin. */

/* --- sürüş sırasında yalnız bant --------------------------------------- */

/* Bant sürülürken sayfanın kendi arayüzü ekrandan çekiliyor: üst şerit,
   yüzen WhatsApp düğmesi ve alttaki eylem çubuğu. Bant bitince hepsi geri
   geliyor. Silinmiyorlar, yalnız sönüyorlar — klavyeyle gezinen biri sekme
   tuşuna basınca odak zincirinin kopmaması için `visibility` kullanılıyor,
   `display` değil. */
html.patlak-tam .tepe,
html.patlak-tam .yuzen-wa,
html.patlak-tam .eylem-cubugu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .35s ease, visibility .35s ease, transform .35s ease;
}

html.patlak-tam .yuzen-wa,
html.patlak-tam .eylem-cubugu { transform: translateY(10px); }

/* Odaklanan bir öğe içerideyse (klavye gezintisi) şerit hemen geri gelsin. */
html.patlak-tam .tepe:focus-within {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* --- bandın sayfaya bağlandığı kenar ------------------------------------ */

.patlak-gecis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 140px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--yuzey-1));
}

/* --- dar ekran ---------------------------------------------------------- */

@media (max-width: 900px) {
    /* Kaydırma yolu dar ekranda KISALTILMIYOR (eskiden 260vh idi). Telefonda
       260vh ≈ 1000 piksellik bir yol demek; klibin 239 karesi buna sıkışınca
       her 4 pikselde bir kare aranıyor ve cihaz yetişemiyordu. Yol uzayınca
       kare başına düşen kaydırma iki katına çıkıyor, sürüş akıcılaşıyor. */
    .patlak { --patlak-yol: 340vh; }

    .patlak-sabit { min-height: 520px; }

    /* DİKEY TELEFONDA SÜTUN DÜZENİ. Eskiden klip `inset: 0` ile bütün ekranı
       kaplayan bir kutuya `contain` ediliyordu: 16:9 bir klip dikey ekranda
       ancak ekran genişliği kadar olabildiği için üstünde ve altında yüzlerce
       piksel boşluk kalıyor, sahne "ekranın ortasında asılı ince bir şerit"
       gibi görünüyordu. Artık klip kendi bandında üstte, yazı hemen altında —
       boş alan yok.

       Dar ekranda klip sahnenin tamamını KAPLAMIYOR: dikey ekranda 16:9 bir
       klibi `cover` ile kaplatmak genişliğin dörtte üçünü kırpar, parçalar
       kadrajın sol ve sağ kenarına kadar dağıldığı için sahnenin yarısı
       giderdi. Klip kendi bandında kalıyor, yazı altında. */
    .patlak-sahne {
        display: flex;
        flex-direction: column;
        padding-top: var(--tepe-y);
    }

    .patlak-medya {
        flex: 0 0 auto;
        /* Geniş ekrandaki sağ payı burada sıfırlanıyor: dar ekranda klip
           kendi bandında ortalanıyor, asimetrik pay onu sola kaydırıyordu. */
        padding-inline: 0;
        /* 56vw = klibin 16:9 en boyundan gelen doğal yükseklik; bant tam klip
           kadar, `contain` hiç boşluk bırakmıyor. Kısa ekranlarda 34svh sınırı
           devreye giriyor, orada bant 16:9'dan basık kalıyor ve klibin iki
           yanında ince bir boşluk oluşuyor — tuval orayı da klibin kendi
           çevre renkleriyle dolduruyor, kenar sönmesi görünmez yapıyor. */
        height: min(34svh, 56vw);
    }

    .patlak-yazi {
        position: relative;
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 20px 46px;
        /* Perde gerekmiyor: klip artık yazının arkasına girmiyor, tuvalin
           dolgusu da klibin kendi zemin rengi — bant baştan sona tek renk. */
        background: none;
    }

    .patlak-yazi h1  { font-size: clamp(28px, 8vw, 40px); }
    .patlak-alt      { margin-top: 10px; font-size: 14px; max-width: none; }
    .patlak-perdeler { margin-top: 16px; min-height: 2.8em; }
    .patlak-perde    { max-width: none; font-size: 17px; }
    .patlak-eylem    { margin-top: 20px; }
    .patlak .dugme   { padding: 12px 20px; font-size: 14px; }

    /* Dar ekranda yazı zaten sahnenin dibine oturuyor; bu paragraf da
       eklenirse düğmeler ekrandan taşıyor. Aynı bilgi hemen aşağıdaki
       künye bölümünde ve SSS'de yazılı, kayıp yok. */
    .patlak-guven    { display: none; }

    .patlak-ipucu    { display: none; }
    .patlak-gecis    { height: 90px; }
}

/* --- hareket azaltma ---------------------------------------------------- */

/* Kaydırma sürüşü kapanır: bant normal yüksekliğine düşer, klip ilk
   karesinde durur, metinlerin hepsi alt alta okunur. */
@media (prefers-reduced-motion: reduce) {
    .patlak-uzun    { height: auto; }
    .patlak-sabit   { position: static; height: auto; min-height: 0; overflow: visible; }
    .patlak-sahne   { display: block; min-height: 0; }
    .patlak-medya   { position: static; height: auto; }
    .patlak-video   { height: auto; }

    .patlak-yazi    {
        position: static;
        padding: 28px 20px 48px;
        background: none;
    }
    .patlak-ipucu   { display: none; }
    .patlak-ipucu i { animation: none; }
    .patlak-ray     { display: none; }

    .patlak-perdeler { min-height: 0; }
    .patlak-perde    { position: static; opacity: 1; transform: none; margin-top: 6px; }
}