/* ==========================================================
   LUMPEN LEFT — TELEFON KATMANI
   ----------------------------------------------------------
   Bu dosya her sayfanın KENDİ css'inden SONRA yükleniyor, bu
   yüzden eşit özgüllükte kazanır. İçindeki her kural ya
   `max-width: 900px` ya da `hover: none` sorgusunun içinde —
   yani masaüstü görünüm hiçbir şekilde etkilenmez.

   İki ayrı sorun çözülüyor:
   1) DOKUNMATİK: sayfaların metinlerinin çoğu :hover ile
      açılıyordu. Telefonda hover diye bir şey yok, dolayısıyla
      o metinler hiç görünmüyordu. Ekranın boyutuyla ilgisi
      olmadığı için `hover: none` ile çözülüyor (tablet dahil).
   2) YERLEŞİM: döndürülmüş paneller, sabit piksel konumları ve
      ekranın iki yanını kaplayan dikey şeritler dar ekranda
      metnin üstüne biniyordu.
   ========================================================== */


/* ==========================================================
   1. DOKUNMATİK CİHAZLAR — GİZLİ KALAN METİNLER
   ----------------------------------------------------------
   Fare imleci olmayan her cihazda geçerli, genişlikten
   bağımsız. Masaüstünde hiçbiri devreye girmez.
   ========================================================== */
@media (hover: none), (pointer: coarse) {

    /* --- 16 Mart: dört panelin de gövde metni --------------
       `.inner-text { opacity: 0 }` idi ve yalnızca
       `.panel:hover` ile açılıyordu. Telefonda sayfada
       okunacak hiçbir şey görünmüyordu.                     */
    .inner-text {
        opacity: 1 !important;
        transform: none !important;
    }
    .panel { height: auto !important; }
    .panel .content { padding: 26px 16px !important; }

    /* --- Ülkücü sayfası: üç tanımın içeriği ---------------- */
    .term-content {
        max-height: none !important;
        opacity: 1 !important;
        overflow: visible !important;
        margin-top: 10px;
    }

    /* --- Ülkücü sayfası: Türkeş / kamp / komando görselleri  */
    .hidden-image {
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
    }
    .img-caption { opacity: 1 !important; }

    /* --- PKK arşivi: kartların açıklama kutuları ----------- */
    .archive-card .info-box {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* --- Giriş sayfası: başlıkların açıklamaları ----------- */
    .hover-text {
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        width: auto !important;
        max-width: 100%;
        margin: 14px auto 0;
        font-size: .82rem;
        line-height: 1.5;
    }

    /* --- Maraş: fener efekti ------------------------------
       İmleci takip eden ışık halkası. Dokunmatikte imleç
       olmadığı için --cursor-x/y hiç atanmıyor; katmanı
       tamamen kaldırmak en temizi.                          */
    .flashlight-layer { display: none !important; }

    /* --- Maraş: sansür bloğu ve müzik kutusu --------------
       Bunlar birer etkileşim (üstüne gelince açılıyor).
       Silmek yerine dokunmayla açılır hale getiriyoruz;
       mobile.js `tap-open` sınıfını ekliyor.                */
    .censor-block { cursor: pointer; }
    .censor-block.tap-open .truth-text   { opacity: 1 !important; }
    .censor-block.tap-open .censor-overlay { opacity: 0 !important; }
    .censor-block::after {
        content: "TAP";
        position: absolute; top: 6px; right: 8px;
        font-size: .6rem; letter-spacing: .14em;
        color: #ff3b3b; opacity: .75; z-index: 3;
        pointer-events: none;
    }
    .censor-block.tap-open::after { content: none; }

    .music-info-container.tap-open .music-details {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
}


/* ==========================================================
   2. DAR EKRAN YERLEŞİMİ
   ========================================================== */
@media (max-width: 900px) {

    html, body { overflow-x: hidden; }

    /* --- 2.1 YAN ŞERİTLER ---------------------------------
       Her sayfada iki yanda üçer dikey şerit var; toplamda
       ekranın ~130px'ini yiyor ve z-index'leri yüksek olduğu
       için metnin ÜSTÜNE biniyorlardı. Telefonda kapatılıp
       yerlerine altta düzgün bir bölüm çubuğu konuyor
       (mobile.js kuruyor, aşağıdaki 2.7'de biçimlendiriliyor).
       Şeritler aynı zamanda tek gezinme yoluydu, o yüzden
       sadece gizlemek yetmezdi.                             */
    a.side-strip,
    .side-link {
        display: none !important;
    }

    /* --- 2.2 GİRİŞ SAYFASI --------------------------------
       Film şeritleri mobilde tamamen kapatılmıştı, eserin
       görsel kimliği yok oluyordu. İkisini geri getirip
       daraltıyor ve metnin arkasına alıyoruz.               */
    .film-strip { display: block !important; width: 54px; opacity: .28; z-index: -5; }
    .film-strip.left  { left: 0; }
    .film-strip.right { right: 0; }
    .film-strip.left2, .film-strip.left3,
    .film-strip.right2, .film-strip.right3 { display: none !important; }

    .center { padding: 26px 12px 120px; position: relative; z-index: 10; }
    .top, .bottom {
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px !important;
        margin: 0 auto 22px !important;
    }
    /* Paragraflar #part1..#part4 kimlikleriyle boyutlandığı için
       sınıf seçicisi yetmiyordu — ID daha güçlü.               */
    .top p, .bottom p,
    #part1, #part2, #part3, #part4,
    .clickable-para {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
    .heading-wrapper, .heading-wrapper-2 { margin: 26px 0 !important; }
    .glitch { font-size: clamp(2rem, 12vw, 3.2rem) !important; }
    #part2, #part4 {
        position: static !important;
        width: 100% !important;
        left: auto !important; right: auto !important; top: auto !important;
        rotate: 0deg !important;
        transform: none !important;
        margin-top: 14px;
    }

    /* --- 2.3 ÜLKÜCÜ SAYFASI -------------------------------
       Bu sayfanın hiç mobil kuralı yoktu. Tanım kutuları
       `translate(500px,-80px) rotate(-15deg)` gibi sabit
       değerlerle konumlanmıştı; 390px'lik ekranda üçü de
       tamamen ekran dışında kalıyordu. Metin bloğu da
       `left: -200px` ile sola kaçmıştı.                     */
    .left-content { padding: 24px 14px 130px !important; }
    .text-wrapper { max-width: 100% !important; }
    .glitch-small {
        font-size: clamp(2.4rem, 15vw, 4rem) !important;
        rotate: 0deg !important;
        text-align: center;
        margin: 10px auto 24px !important;
    }
    .text-body {
        left: 0 !important;
        width: 100% !important;
        transform: none !important;
    }
    .text-body p {
        font-size: 1rem !important;
        padding: 18px !important;
        transform: none !important;
        rotate: 0deg !important;
        margin-bottom: 16px;
    }
    .report {
        font-size: clamp(1.5rem, 8vw, 2.4rem) !important;
        transform: none !important;
        rotate: 0deg !important;
        line-height: 1.15;
        margin: 26px 0 18px !important;
    }
    .terms-container {
        display: flex !important;
        flex-direction: column;
        gap: 14px;
        margin: 22px 0;
    }
    /* min-height: 2500px masaüstünde mutlak konumlu görseller
       için gerekliydi; mobilde her şey akışa girdiği için
       sayfanın sonunda dev bir boşluk bırakıyordu.            */
    .left-content { min-height: 0 !important; }

    /* width: 100% + padding, box-sizing içerik kutusuysa
       taşmaya yol açıyor — genişliği otomatik bırakıyoruz.    */
    .term-item,
    #box-yurtsever, #box-milliyetci, #box-ulkucu {
        transform: none !important;
        position: static !important;
        box-sizing: border-box;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .term-title { font-size: 1.4rem; }
    #part1, #part2, #part3, #part4 {
        position: static !important;
        width: 100% !important;
    }
    /* Görseller mutlak konumdan çıkıp metnin altına diziliyor */
    .glitch-img-box {
        position: static !important;
        width: 100% !important;
        max-width: min(420px, 88vw);
        margin: 0 auto 46px !important;
        transform: none !important;
    }
    .glitch-img-box img,
    .glitch-img-box video { width: 100% !important; height: auto !important; }
    .img-caption {
        position: static !important;
        display: block;
        margin-top: 8px;
        font-size: .8rem;
    }

    /* --- 2.4 16 MART --------------------------------------
       Paneller `transform: skewX()` ile eğiliyor, İÇLERİNDEKİ
       metin ise ayrı bir `rotate:` özelliğiyle. İkisi farklı
       CSS özelliği olduğu için `transform: none` tek başına
       yetmiyordu — metin çapraz kalıyor ve kenarlardan
       kesiliyordu. İkisini birden sıfırlıyoruz.               */
    .shattered-container { height: auto !important; }
    .panel,
    .panel.deg1, .panel.deg2, .panel.deg3, .panel.deg4 {
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        transform: none !important;
        rotate: 0deg !important;
    }
    .panel .content,
    .deg1 .content, .deg2 .content, .deg3 .content, .deg4 .content {
        transform: none !important;
        rotate: 0deg !important;
        position: relative;
        padding: 26px 16px !important;
    }
    .vertical-title {
        position: static !important;
        writing-mode: horizontal-tb !important;
        transform: none !important;
        font-size: 1rem !important;
        letter-spacing: .18em;
        margin-bottom: 12px;
        opacity: .75;
    }
    .inner-text { width: 100% !important; max-width: 100% !important; }
    .inner-text h1 { font-size: clamp(1.5rem, 8vw, 2.2rem) !important; }
    .inner-text p.typewriter { font-size: .92rem !important; padding: 14px !important; }
    .bg-video, .bg-image { left: 0 !important; width: 100% !important; }

    /* --- 2.5 KANLI MAYIS ----------------------------------
       Kazıma kartları 400/450/350px sabit genişlikte ve
       mutlak konumluydu; telefonda üst üste biniyorlardı.   */
    /* Bu sayfa yatay kaydırmalı: paneller flex satırında ve
       `min-width: 100vw`. Paragrafa yüzde cinsinden genişlik
       vermek döngü yaratıp paneli 5000px'e şişiriyordu —
       sınırı görünüm birimiyle koyuyoruz.                     */
    /* Panelleri tam ekran genişliğine sabitliyoruz; içindeki
       başlıklar ve arka plan videosu yüzde genişlikle büyüyüp
       paneli 800px'e taşırıyordu, metin de ekranın sağına
       kayıyordu.                                              */
    .horizontal-scroll-wrapper .panel {
        min-width: 100vw !important;
        max-width: 100vw !important;
    }
    .panel-bg-video-container,
    .panel-bg-video,
    .collage-video-layer,
    .collage-bg-video { max-width: 100vw !important; }

    .text-panel, .text-panel2 { padding: 30px 16px !important; }
    .text-panel :is(h1, h2), .text-panel2 :is(h1, h2) {
        font-size: clamp(1.5rem, 8vw, 2.4rem) !important;
        max-width: 86vw !important;
        text-align: center;
    }
    .text-panel p, .text-panel2 p {
        font-size: 1rem !important;
        max-width: min(600px, 86vw) !important;
    }
    .collage-area, .collage-area2 { max-width: 100vw !important; }
    .collage-section { height: auto !important; padding: 40px 14px 70px !important; }
    .scratch-wrapper,
    .pos-1, .pos-2, .pos-3 {
        position: static !important;
        width: 100% !important;
        max-width: min(420px, 88vw);
        height: auto !important;
        aspect-ratio: 4 / 3;
        margin: 0 auto 54px !important;
        transform: none !important;
        top: auto !important; left: auto !important;
        right: auto !important; bottom: auto !important;
    }
    .label-tag { bottom: -22px !important; font-size: .72rem !important; }
    .music-info-container { bottom: 74px !important; right: 12px !important; }
    .music-details { width: min(78vw, 300px) !important; }

    /* --- 2.6 MARAŞ ---------------------------------------- */
    .container { padding: 60px 16px 120px !important; }
    .cutout-header { font-size: clamp(1.7rem, 11vw, 2.8rem) !important; }
    .punk-image-wrapper {
        margin: 34px auto !important;
        transform: none !important;
        rotate: 0deg !important;
    }
    .censor-block { position: relative; }

    /* --- 2.7 PKK ARŞİVİ -----------------------------------
       Merkezi metin şeridi 500px sabitti.                   */
    .text-feed {
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
        padding: 0 14px 120px !important;
    }
    .header-overlay { position: static !important; transform: none !important; padding: 20px 14px 0; }
    .header-overlay h1 { font-size: clamp(1.4rem, 8vw, 2rem) !important; letter-spacing: 2px !important; }
    .archive-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    .archive-card { min-width: 0 !important; height: 22vh !important; }
    .archive-card:hover { transform: none !important; }
    .info-box { width: 100% !important; padding: 8px !important; }
    .info-box h3 { font-size: .62rem !important; }
    .info-box p  { font-size: .52rem !important; }

    /* --- 2.8 ALT BÖLÜM ÇUBUĞU -----------------------------
       Kaldırılan yan şeritlerin yerine geçen gezinme.
       mobile.js sayfadaki mevcut bağlantılardan kuruyor.    */
    .ll-mobile-nav {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 99998;
        display: flex;
        background: rgba(6, 6, 6, .94);
        border-top: 1px solid rgba(255, 255, 255, .22);
        backdrop-filter: blur(6px);
        font-family: ui-monospace, "Courier New", monospace;
    }
    .ll-mobile-nav a {
        flex: 1 1 0;
        min-width: 0;
        padding: 13px 8px calc(13px + env(safe-area-inset-bottom, 0px));
        color: #ddd;
        text-decoration: none;
        font-size: 10.5px;
        letter-spacing: .07em;
        text-transform: uppercase;
        text-align: center;
        line-height: 1.3;
        border-left: 1px solid rgba(255, 255, 255, .14);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ll-mobile-nav a:first-child { border-left: none; }
    .ll-mobile-nav a:active { background: #8a2be2; color: #fff; }
    .ll-mobile-nav a.nav-back { flex: 0 0 34%; color: #9d9d9d; }

    /* Yüzen portfolyo çipi mobilde metnin üstüne biniyordu;
       yerine alt çubuğun ilk hücresi geçiyor (mobile.js).     */
    .pf-back { display: none !important; }
}

/* Çok dar ekranlar */
@media (max-width: 380px) {
    .ll-mobile-nav a { font-size: 9.5px; padding-left: 4px; padding-right: 4px; }
    .film-strip { width: 42px; }
}