/* ==========================================================================
   11. DUYARLI AYARLAR
   ========================================================================== */
/* Detay iki sütunu dar ekranda taşımadan taşıyamaz: üst üste geçiyor. */
@media (max-width: 900px) {
    .image-grid--works { grid-template-columns: repeat(2, 1fr); }
    .work-detail-inner {
        grid-template-columns: 1fr;
        align-items: start;
        align-content: start;
        gap: 30px;
        padding: 90px 24px 60px;
    }
    .work-figure > img,
    .work-figure > video { max-height: 56vh; }
    .work-demo { height: min(58vh, 460px); }
    .work-stack { --stack-h: 48vh; }
    /* Dar ekranda yan yana durmak ikisini de avuç içi kadar bırakırdı: detayın
       kendisi zaten tek sütuna düşmüş, yani yatayda pay kalmadı. Alt alta
       geçiyorlar ve her biri tam genişliği alıyor — figür kaydırmayla okunuyor,
       o yüzden ikisini tek ekrana sıkıştırmaya da gerek yok. */
    .work-figure--with-clip { flex-direction: column; gap: 26px; }
    .work-figure--with-clip > .work-stack-col,
    .work-figure--with-clip > .work-clip { flex: 0 1 auto; width: 100%; }
    .work-figure--with-clip > img { max-width: 100%; max-height: 46vh; }
    .work-figure--with-clip .work-stack { --stack-h: 46vh; }
    .work-clip video { max-height: 52vh; }
}

@media (max-width: 700px) {
    .portfolio-item-row { gap: 16px; padding: 22px 10px; }
    .portfolio-section { padding: 40px 10px 0; }
    .portfolio-item-arrow { display: none; }
    .image-grid { grid-template-columns: 1fr; }
    .cv-grid { grid-template-columns: 1fr; gap: 30px; }
    .cv-title { font-size: 2.2rem; }
}

@media (max-width: 640px) {
    #intro-progress { height: 96px; right: 12px; }
    #intro-hint { letter-spacing: 0.24em; text-indent: 0.24em; }

    /* LOGO TELEFONDA DAHA İRİ
       Masaüstündeki `15vw`, dar ekranda başlığı gereğinden küçük bırakıyordu:
       "STUDIO" satırı 92vw'lik alanın ancak yarısını dolduruyor, intro da
       bir açılış olmaktan çıkıp ortada duran bir yazıya dönüşüyordu.
       `19vw`de aynı satır ~78vw tutuyor — kenarda hâlâ pay var, yani en dar
       telefonda bile taşmıyor. Alt sınır da birlikte yükseldi. */
    #intro-title .big { font-size: clamp(3.6rem, 19vw, 12rem); }
}

@media (max-width: 520px) {
    #navbar { flex-wrap: wrap; justify-content: center; row-gap: 10px; max-width: 92vw; }
    .nav-btn { padding: 13px 18px; font-size: 13px; }
    #lang-toggle { padding: 13px 16px; }
    .close-btn { padding: 12px 20px; font-size: 12px; }
    .eyebrow { font-size: 0.8rem; }
    .contact-hint { font-size: 0.8rem; }
    /* `align-items: center` olmadan sütundaki bağlantılar kabın genişliğine
       GERİLİYOR: üçü de aynı noktadan başlıyor ama farklı yerde bitiyor,
       yani sağ kenar tırtıklı kalıyor. Ortalanınca her bağlantı kendi
       genişliğinde duruyor ve "LinkedIn ↗" ile "Instagram ↗" tek bir eksende
       hizalanıyor. */
    .social-grid { gap: 26px; flex-direction: column; align-items: center; }
}

/* ==========================================================================
   DOKUNMA HEDEFLERİ
   Parmak imleç değil: 13 piksellik yazıya 13 piksellik dolgu, ekranda ~42
   piksellik bir düğme demek ve o düğmeye nişan almak gerekiyor. Apple da
   Google da alt sınırı 44 piksel veriyor.
   `min-height` yazmak dolguyu bozmuyor, yalnızca eksik kalan durumda
   düğmeyi büyütüyor — geniş ekranda hiçbir şey değişmiyor.
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
    /* `.contact-email` bilerek listede yok: zaten 4.5rem'e kadar büyüyen,
       satıra sığmayınca kırılan bir düğme — 44 pikselin çok üstünde ve
       `inline-flex` onun satır kırmasını bozardı. */
    .nav-btn,
    .close-btn,
    .cv-download,
    .work-demo-open,
    .work-nav button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Izgara kartı ve dizin satırı zaten iri, ama aralarındaki boşluk dar
       ekranda yanlış karta basmayı kolaylaştırıyordu. */
    .portfolio-item-row { min-height: 56px; }
}

/* ==========================================================================
   YATAY TELEFON
   Yükseklik 400 pikselin altına düşünce şerit 46vh'de avuç içi kadar
   kalıyor, üstteki navigasyon boşluğu ise ekranın üçte birini yiyordu.
   Burada oranlar yeniden dağıtılıyor: şerit büyüyor, çevresindeki boşluk
   küçülüyor.
   ========================================================================== */
@media (max-height: 460px) and (orientation: landscape) {
    #navbar { margin-top: max(12px, calc(env(safe-area-inset-top) + 6px)); padding: 2px; }
    .nav-btn { padding: 9px 16px; font-size: 12px; min-height: 38px; }
    #lang-toggle { padding: 9px 14px; }
    .reel-item { height: clamp(150px, 62vh, 300px); }
    .close-btn { top: max(14px, calc(env(safe-area-inset-top) + 8px)); }
    .work-detail-inner { padding: 60px 24px 40px; }
    .work-figure > img, .work-figure > video { max-height: 68vh; }
}

/* ==========================================================================
   ÇENTİK YANDAYKEN
   Telefon yan çevrildiğinde çentik ve ana ekran çizgisi SOLDA/SAĞDA kalıyor.
   Dikey güvenli alan zaten hesaba katılmıştı, yatay olan katılmamıştı:
   navigasyonun ve şeridin kenarı çentiğin altında kalabiliyordu.
   ========================================================================== */
@media (orientation: landscape) {
    #navbar,
    #hero {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
}

/* Dokunmatikte "takılı kalmış hover" görünmesin. */
@media (hover: none), (pointer: coarse) {
    .nav-btn:hover { background: transparent; color: inherit; transform: none; }
    .portfolio-item-row:hover { background: transparent; color: inherit; transform: none; }
    .brutal-link:hover::after { transform: scaleX(0); }
    .brutal-link:hover .arrow { transform: none; }
    .close-btn:hover { background: var(--text); color: var(--surface); transform: none; }
    .contact-email:hover { opacity: 1; }
    .reel-item:hover { border-color: var(--line); transform: none; box-shadow: var(--reel-glow); }
    .reel-item:hover img { filter: var(--reel-vivid); }
    .intro-btn:hover { background: transparent; color: var(--text); border-color: var(--line); }
    .cv-download:hover { background: transparent; color: inherit; border-color: var(--line); }
    .img-card:hover .img-card-video { transform: none; }
    .img-card:hover .img-card-tool { transform: none; box-shadow: none; }
    .img-card:hover .play-badge { transform: none; background: rgba(10, 8, 4, 0.62); }
}

/* Hareket azaltma tercihi: TÜM geçişler kapanır, intro tek kare olarak durur.
   Şeridin kendiliğinden akışı da durur (JS'te taban hız sıfırlanıyor) — ama
   kullanıcı isterse elle sürükleyip gezebiliyor. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    #intro-hint, #intro-progress { display: none !important; }
    #intro-enter { display: block; }
}