/* ==========================================================================
   Responsive — 1440 / 1024 / 768 / 320
   ========================================================================== */

/* ---------- ≥1440px: geniş ekran ---------- */
@media (min-width: 1440px) {
  :root { --container-width: min(1360px, 90vw); }
}

/* ---------- ≤1024px: tablet yatay ---------- */
@media (max-width: 1024px) {
  /* Kim: tek sütun. Soru ve başlık önce, fotoğraflar onların altında,
     sonra giriş, alıntı, üç perde ve düğmeler. Anlatının kutusu
     display: contents ile açılıyor ki fotoğraflar başlıkla yazının
     arasına girebilsin. Künye üç sütun. */
  .kim-izgara { grid-template-columns: 1fr; gap: 0; }
  .kim-anlati { display: contents; }
  .kim-anlati > .eyebrow { order: 1; justify-self: start; }
  .kim-anlati > .section-title { order: 2; }
  .kim-fotolar {
    order: 3;
    width: min(78%, 380px);
    justify-self: start;
    /* Alt pay: küçük çerçevenin taşan kısmı sığsın */
    margin: clamp(1.2rem, 4vw, 1.8rem) clamp(2.4rem, 12vw, 4rem) clamp(3.6rem, 11vw, 4.4rem) 0;
  }
  .kim-foto-yasli { right: calc(-1 * clamp(2.4rem, 12vw, 4rem)); bottom: calc(-1 * clamp(2.6rem, 8vw, 3.4rem)); }
  .kim-anlati > .kim-giris { order: 4; }
  .kim-alinti { order: 5; }
  .kim-perdeler { order: 6; }
  .kim-dugmeler { order: 7; }
  .kim-kunye { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kim-kunye > div:nth-child(4) { border-left: 0; }
  .kim-kunye > div:nth-child(n + 4) { border-top: 1px solid rgba(243, 236, 227, 0.1); }

  .contact-grid { grid-template-columns: 1fr; }

  .stats-inner { grid-template-columns: repeat(4, 1fr); }

  .museum-stage { height: min(56svh, 520px); }
}

/* ---------- ≤900px: mobil menü eşiği ---------- */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .navbar.is-scrolled { padding: 0.8rem 0; }
}

/* ---------- ≤768px: tablet dikey / büyük telefon ---------- */
@media (max-width: 768px) {
  :root {
    --section-padding: clamp(3.2rem, 11vw, 5rem);
    --container-width: 90vw;
  }

  /* Giriş perdesindeki logo dar ekranda küçük kalıyordu; ekran
     genişliğine göre büyüyor. */
  .giris-logo { width: clamp(240px, 74vw, 340px); }

  /* Müze mobilde de 3B panorama olarak çalışır */
  .museum-stage { height: min(54svh, 480px); min-height: 340px; }
  .museum-section { padding-bottom: 0; }
  .museum-hint { font-size: 0.7rem; gap: 0.9rem; padding: 0.6rem 1rem; bottom: 1rem; }

  .reader-hero { height: 46vh; min-height: 280px; }
  .reader-body p { font-size: 1.06rem; line-height: 1.8; }
  .reader-body blockquote { padding: 1.5rem 1.3rem 1.4rem 1.8rem; }
  .reader-close { top: 1rem; right: 1rem; width: 40px; height: 40px; }

  /* Istatistik seridi tablet-telefonda tek sirada kalir */
  .stats-inner { grid-template-columns: repeat(4, 1fr); }

  .blog-grid { grid-template-columns: 1fr; }
  .blog-grid .post-card.featured .post-card-media { aspect-ratio: 16/9; }

  .footer-inner { flex-direction: column; text-align: center; gap: 0.7rem; }

  .modal-overlay { padding: 1rem; }
  .modal-box { padding: 1.6rem; max-height: 88svh; }
}

/* ---------- ≤480px: telefon ---------- */
@media (max-width: 480px) {
  /* Istatistikler telefonda da tek sirada, yan yana */
  /* Telefonda etiket küçük harfli ve "sağlık" gibi alta sarkan harfler
     taşıyor; mürekkebin altta bıraktığı pay daha da azalıyor, bu yüzden
     üstten alınan miktar biraz daha fazla (bkz. style.css → .stats-inner). */
  /* Yazılar bandın dikey ortasında: üst ve alt pay eşit görünsün diye
     alttaki pay, etiketin satır aralığı kadar az. */
  .stats-inner { padding-block: 1.85rem 1.6rem; }
  .stat-item { padding-inline: 0.35rem; }
  .stat-num { font-size: 1.5rem; }
  /* Dar sütunda büyük harf + geniş harf aralığı okunmuyordu */
  .stat-label {
    max-width: 13ch;
    font-size: 0.62rem;
    line-height: 1.35;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .brand { font-size: 1rem; }

  /* Kim: üç perde alt alta, solda ince bir altın çizgiyle; künye iki sütun */
  .kim-perdeler { grid-template-columns: 1fr; gap: 1.1rem; padding-top: 1.3rem; }
  .kim-perdeler li,
  .kim-perdeler li:first-child {
    display: grid;
    grid-template-columns: 4.2rem minmax(0, 1fr);
    column-gap: 0.9rem;
    padding: 0;
    border-left: 0;
  }
  .kim-perde-yil { grid-row: span 2; font-size: 1.45rem; padding-top: 0.1rem; }
  .kim-perdeler strong { margin: 0 0 0.2rem; }
  .kim-dugmeler .btn { flex: 1 1 auto; justify-content: center; }
  .kim-kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kim-kunye > div:nth-child(n) { border-left: 1px solid rgba(243, 236, 227, 0.1); border-top: 0; }
  .kim-kunye > div:nth-child(odd) { border-left: 0; }
  .kim-kunye > div:nth-child(n + 3) { border-top: 1px solid rgba(243, 236, 227, 0.1); }
  .kim-kunye > div { padding: 0.95rem 1rem 1rem; }

  .blog-filter { gap: 0.5rem; }
  .blog-filter button { padding: 0.45rem 1rem; font-size: 0.76rem; }
}

/* ---------- ≤320px: en dar ekran ---------- */
@media (max-width: 360px) {
  :root { --container-width: 92vw; }
  .section-title { font-size: 1.85rem; }
  .stat-num { font-size: 1.3rem; }
  .stat-label { font-size: 0.56rem; max-width: 11ch; }
}

/* ---------- Yazdırma ---------- */
@media print {
  .navbar, .scroll-indicator, .museum-stage, .cursor-dot, .cursor-ring,
  #loading-screen, .contact-form { display: none !important; }
  body { background: #fff; color: #111; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Logo ölçekleri ---------- */
/* Yüzen hapın içinde 140px genişlik ekranın üçte birini kaplıyordu. */
@media (max-width: 900px) {
  .brand img,
  .navbar.is-scrolled .brand img { --brand-width: 88px; }
}
@media (max-width: 400px) {
  .brand img,
  .navbar.is-scrolled .brand img { --brand-width: 78px; }
}

/* Dar ekranda yatay giriş animasyonu sayfayı taşırıyordu; dikeye çeviriyoruz. */
@media (max-width: 768px) {
  .reveal-left, .reveal-right { transform: translateY(26px); }
}

/* ---------- Hero — akışkan tasarımın küçük ayarları ---------- */
/* Kompozisyonun tamamı style.css'te clamp()'lerle ölçekleniyor; burada
   yalnızca dar ve alçak ekranlar için birkaç düzeltme var. */
@media (max-width: 900px) {
  /* Mobilde portre tamamen kaldırılır, metin ortalanır — küçük ekranda
     fotoğraf + uzun metin bir arada sıkışık ve dağınık duruyordu. */
  /* minmax(0, 1fr): "1fr" aslında minmax(auto, 1fr) demek ve sütun,
     içindeki en geniş kırılamaz öğe kadar genişleyebiliyor. İngilizcede
     iki buton ("Watch the Documentary" + "Enter the Digital Museum")
     white-space: nowrap ile 410px tuttuğu için sütun 390px'lik ekranda
     410px'e çıkıyor, ortalanan içerik de ekrana göre sola kayıyordu. */
  .hero-columns { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero-content { min-width: 0; }

  /* Kesim portre + hâle + imzadan oluşan sahne (giriş koreografisi ve
     ışık huzmesi style.css · GİRİŞ SAHNESİ'nde, iki genişlikte ortak).
     Portre ortada, arkasında koyu bir disk ve sıcak bir hâle, sağ omzun
     üzerine düşen soluk imza; portrenin eteği zemine karışarak biter
     (soluma maskenin içine gömülü). */
  .hero-sahne {
    display: block;
    position: relative;
    z-index: 1;
    /* .hero-inner 92vw; sahne tam genişliğe taşsın ki imza kenardan çıksın */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    /* Öğüt kutusu buradan çıkınca boşalan yer portreye gidiyor. */
    height: min(50svh, 88vw);
    margin-bottom: clamp(0.4rem, 2svh, 1.4rem);
    --d: 300ms;
  }
  /* Ortalanan öğelerin giriş ölçeklemesi kaymasın diye (bkz. style.css) */
  .hero-sahne-disk,
  .hero-sahne-isik,
  .hero-sahne-portre { transform-origin: 0 40%; }

  /* Huzmenin tepesi ekranın dışında kalsın: dar sahnede daralan ucu
     görünürse ışık bir huzme değil, asılı bir lamba gibi okunuyordu. */
  .hero-sahne-huzme {
    top: -120%;
    height: 210%;
    background: conic-gradient(from 160deg at 50% 0%,
      rgba(255, 226, 176, 0) 0deg,
      rgba(255, 226, 176, 0.09) 12deg,
      rgba(255, 232, 190, 0.12) 20deg,
      rgba(255, 226, 176, 0.09) 28deg,
      rgba(255, 226, 176, 0) 40deg,
      rgba(255, 226, 176, 0) 360deg);
  }

  /* Portrenin arkasındaki koyu disk. Kafayla aynı eksende ve omuz
     genişliğinde; alt ucu maskeyle sönüyor. Eskiden tam daire olarak
     portrenin eteğine kadar iniyordu: ceketin alt %30'u maskeyle yumuşak
     bittiği için disk oradan sızıyor ve adamın önüne binmiş gibi
     duruyordu. */
  .hero-sahne-disk {
    left: 50%;
    top: 2%;
    width: min(68vw, 350px);
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
      rgba(66, 55, 41, 0.80) 0%,
      rgba(47, 39, 30, 0.60) 60%,
      rgba(27, 23, 18, 0) 70%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 76%);
    mask-image: linear-gradient(180deg, #000 0%, #000 46%, transparent 76%);
  }

  /* Başın çevresindeki sıcak hâle */
  .hero-sahne-isik {
    left: 50%;
    top: -6%;
    width: min(104vw, 560px);
    height: 92%;
    transform: translateX(-50%);
    background: radial-gradient(46% 38% at 50% 44%,
      rgba(219, 176, 104, 0.30) 0%,
      rgba(201, 161, 132, 0.13) 46%,
      rgba(27, 23, 18, 0) 72%);
    /* Diskle aynı sebeple alt ucu kesiliyor. */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 80%);
    mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 80%);
  }

  /* İmza — başın sağındaki koyu boşlukta durur. Referansta ekran
     kenarından taşıyordu; burada tamamı görünsün diye hem küçültüldü hem
     de yüzün üstüne binmeyecek şekilde sağa alındı. */
  .hero-sahne-imza {
    right: 3vw;
    top: 12%;
    width: min(36vw, 170px);
    height: 20%;
    background: url("../assets/images/brand/imza.png") no-repeat right center / contain;
    /* Yeni imza ince bir kontur çizgisi; eski dolgun imzanın 0.3'i
       burada görünmez kalıyordu, bu yüzden daha opak. */
    opacity: 0.85;
    transform: rotate(-8deg);
    transform-origin: right center;
  }

  /* Kesim portre: JPEG gövde + PNG alfa maskesi. Tek parça saydam PNG
     600 KB tutuyordu; bu ikili 90 KB. Maskenin alt %30'u yumuşak biter,
     böylece ceketin eteği zemine karışır. */
  /* Hizalama görselin ortasından değil kafanın ortasından: maskede baş
     hizasındaki satırların merkezi 820 piksellik görselde 362'de, görselin
     kendi merkezi ise 410'da. Aradaki 48 piksel, görsel kutunun genişliğini
     tam doldurduğu için kutu genişliğinin %5,85'i eder. */
  .hero-sahne-portre {
    left: 50%;
    bottom: 0;
    width: min(88vw, 400px);
    height: 100%;
    transform: translateX(calc(-50% + 5.85%));
    background: url("../assets/images/portrait/izzet-baysal-kesim.jpg") no-repeat center bottom / contain;
    -webkit-mask: url("../assets/images/portrait/izzet-baysal-maske.png") no-repeat center bottom / contain;
    mask: url("../assets/images/portrait/izzet-baysal-maske.png") no-repeat center bottom / contain;
  }

  /* Öğüt kutusu girişten çıkıp aşağıdaki şeride taşındığı için giriş
     yukarı çekiliyor: portre, ad, alıntı ve düğmeler ekranın üst yarısında
     tek blok hâlinde toplanıyor. Üst pay yüzen çubuğun altına denk gelecek
     kadar: çubuk 10px'te başlayıp ~66px'te bitiyor. */
  .hero {
    padding-top: clamp(4.4rem, 9.5svh, 5.6rem);
    padding-bottom: clamp(5rem, 13svh, 7.5rem);
  }

  .hero-content { text-align: center; }
  .hero-eyebrow { justify-content: center; }
  .hero-dates { justify-content: center; }
  .hero-dates .hero-rule { display: none; }
  /* Giriş alıntısı dar ekranda tek satır: ikiye bölününce portre ile
     düğmeler arasındaki denge bozuluyor ve cümle iki parça gibi okunuyordu.
     Ölçü ekran genişliğine bağlı — 16px'te satırın boyu 380px, kapsayıcı
     90vw; 3.6vw bunu payıyla birlikte tek satıra sığdırıyor. İngilizce
     cümle belirgin biçimde daha uzun olduğu için orada ölçü daha küçük. */
  .hero-quote {
    margin-inline: auto;
    margin-top: clamp(0.5rem, 1.3svh, 0.95rem);
    max-width: none;
    white-space: nowrap;
    font-size: min(3.15vw, 1.2rem);
  }
  html[lang="en"] .hero-quote { font-size: min(2.7vw, 1.2rem); }

  /* Düğmeler alıntıya yaklaşıyor: giriş bloğu tek parça hâlinde yukarıda
     toplansın. */
  .hero-actions { margin-top: clamp(1.1rem, 2.6svh, 1.8rem); }

  /* "Kaydır" göstergesi mutlak konumdan çıkıp akışa giriyor. Alt kenara
     çivilendiğinde İngilizce gibi etiketleri uzun dillerde düğmeler iki
     satıra sarıyor, giriş bloğu uzuyor ve gösterge düğmelerin altında
     kalıyordu. Akışta son öğe olunca hangi dilde olursa olsun düğmelerin
     altında, kendi payıyla duruyor. */
  .scroll-indicator {
    position: static;
    transform: none;
    margin-top: clamp(1.8rem, 5svh, 3rem);
  }

  /* Butonlar mobilde içeriğe göre daralır; tam genişliğe yayılınca hem
     iri duruyor hem aralarında gereksiz boşluk kalıyordu.

     İkisi her zaman yan yana: sarmaya izin verilince dar telefonlarda —
     özellikle etiketleri uzun olan İngilizcede — alt alta düşüyor ve giriş
     bloğu ikiye bölünmüş gibi duruyordu. Sarma kapatıldığına göre yazının
     sığması ölçüye kalıyor: yazı boyu ve iç payı ekran genişliğinden
     türetiliyor (.hero-quote'takiyle aynı yöntem), İngilizce etiketler
     belirgin biçimde uzun olduğu için orada ölçü bir tık daha küçük. */
  .hero-actions { width: auto; gap: 0.5rem; justify-content: center; flex-wrap: nowrap; }
  .hero-actions .btn {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0.72rem clamp(0.6rem, 2.4vw, 1.1rem);
    font-size: min(2.45vw, 0.72rem);
    letter-spacing: 0.05em;
    gap: 0.4rem;
    white-space: nowrap;
  }
  html[lang="en"] .hero-actions .btn { font-size: min(2.15vw, 0.72rem); }
  .hero-actions .btn svg { width: 15px; height: 15px; }
  /* Ok, iki düğmenin tek satırda kalması için dar ekranda çekilir */
  .hero-actions .btn-muze .icon-ok { display: none; }
  /* Tablet genişliğinde ölçü zaten sığıyor; yazı gereksiz küçülmesin. */
  @media (min-width: 620px) {
    .hero-actions .btn,
    html[lang="en"] .hero-actions .btn { font-size: 0.72rem; }
  }
}

/* Geniş ekranda dikey künye şeridi görünür */
@media (min-width: 1180px) {
  .hero-plate { display: block; }
}

/* Kısa ekranlı telefonlar (iPhone SE gibi 667px ve altı): giriş bloğu
   olduğu boyda ekrana sığmıyordu. Ölçüler burada bir tık daha küçük —
   pay, düğmelerin iki satıra sardığı İngilizce için de yetiyor. */
@media (max-width: 900px) and (max-height: 760px) {
  .hero { padding-bottom: clamp(2.6rem, 7svh, 4rem); }
  .hero-sahne { height: min(37svh, 70vw); }
  .scroll-indicator { margin-top: clamp(0.9rem, 2.6svh, 1.5rem); }
}

/* Çok kısa dikey ekranlar (320×568 gibi eski telefonlar): sahne bir kademe
   daha küçülüyor, yoksa giriş bloğunun ardından gösterge ekranın altından
   taşıyor. */
@media (max-width: 900px) and (max-height: 620px) and (orientation: portrait) {
  .hero { padding-bottom: clamp(2rem, 5svh, 3rem); }
  .hero-sahne { height: min(30svh, 60vw); }
}

/* Yatay moddaki telefonlar: dikey boşluklar ve dekor sadeleşir */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding: 5rem 0 3.5rem; }
  .hero-frame { display: none; }
  /* Alçak yatay ekranda sahneye yer yok: portre girdiğinde künye
     ekranın altına taşıyordu. */
  .hero-sahne { display: none; }
  .scroll-indicator { display: none; }
}
/* ---------- Dijital Müze sahnesi (mobil) ---------- */
/* Sahne tam genişlikte ve çok uzundu; diğer bölümlerle aynı hizaya alınıp
   yüksekliği ekranın yarısına çekiliyor. */
@media (max-width: 900px) {
  /* Genişlik ve çerçeve artık temel kuralda; burada yalnızca yükseklik */
  .museum-stage { height: 52svh; min-height: 320px; }
  .museum-enter { padding: 1.1rem; gap: 0.55rem; }
  .museum-enter-icon { width: 52px; height: 52px; }
  .museum-enter-icon svg { width: 24px; height: 24px; }
  .museum-enter-sub { font-size: 0.74rem; max-width: 28ch; }

  .museum-hint {
    bottom: 1rem;
    gap: 0.7rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.66rem;
    max-width: calc(100% - 1.6rem);
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .museum-stage { height: 46svh; min-height: 290px; }
}

/* ---------- Kaydırmalı şeritler: dar ekranda kart genişliği ---------- */
@media (max-width: 900px) {
  /* Alt boşluk, kart yüksekliğinin ondalıklı çıktığı durumlarda kartın alt
     kenarının overflow sınırında bir piksel kırpılmasını önler. */
  .snap-track { --snap-card-w: min(78vw, 380px); padding-bottom: 1.8rem; }

  /* Odak dışı kartlarda bulanıklık kaldırıldı. filter: blur() kartın
     tamamını her karede yeniden boyatıyor; kaydırırken hem komşu kartlar
     titriyor hem de bu sürekli boyama navbarın backdrop-filter'ını
     yeniden örneklemeye zorlayıp çubuğun arkasında aynı titremeyi
     yaratıyordu. Opaklık ve ölçek yalnızca kompozisyon katmanında çalışır,
     yeniden boyama gerektirmez. */
  .snap-track > *:not(.is-focus) {
    filter: none;
    opacity: 0.45;
    transform: scale(0.95);
  }
  .snap-track > * {
    transition:
      opacity 0.35s var(--ease-out),
      transform 0.35s var(--ease-out);
  }
}
@media (max-width: 480px) {
  .snap-track { --snap-card-w: min(76vw, 320px); gap: 0.8rem; }
}

/* ---------- Şerit gezinme: dar ekranda ok yerine kaydırma ipucu ---------- */
@media (max-width: 900px) {
  .snap-nav { display: none; }
  .snap-hint { display: flex; }
}


/* ---------- Ziyaretçi defteri şeritleri ---------- */
@media (max-width: 900px) {
  .reviews-marquees {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
  .review-card { width: clamp(260px, 72vw, 320px); padding: 1.5rem; }
}

/* Telefonda kartlar ekranı kaplamasın: daha dar, daha sıkı ve alıntı metni
   beş satırla sınırlı. Satır yüksekliğini en uzun yorum belirlediği için
   sınır olmadan iki şerit tek başına bir ekran boyu yer tutuyordu. */
@media (max-width: 768px) {
  .reviews-section { padding: clamp(2.5rem, 7vw, 4rem) 0; }
  /* Boşluk, GSAP'in bölüm başlığına verdiği 40 piksellik giriş kaymasından
     büyük kalmalı; aksi hâlde alt yazı, akan kartların altına giriyor. */
  .reviews-section .section-head { margin-bottom: 3.9rem; }

  .reviews-marquees { gap: 0.75rem; }

  .review-card {
    width: 248px;
    margin-right: 0.75rem;
    padding: 1rem 1.1rem;
    gap: 0.6rem;
  }

  .review-text {
    font-size: 0.95rem;
    line-height: 1.48;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    /* Masaüstündeki flex:1 kutuyu esnetince kırpılan metnin bir satırı
       yeniden görünür oluyordu; kutu tam dört satır kalmalı. */
    flex: 0 0 auto;
  }


  /* Metni kırpılan kart tıklanabilir: dokununca notun tamamı pencerede
     açılır. İşareti js/testimonials.js koyuyor; devamı olmayan kartta bu
     sınıf hiç oluşmadığı için onlar tıklanabilir görünmüyor. */
  .review-card.is-kisali {
    cursor: pointer;
  }
  .review-card.is-kisali:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
  }
  /* "Devamını oku" ipucu: kırpma çizgisinin hemen altında, sessiz. */
  .review-card.is-kisali .review-foot::after {
    content: '↗';
    margin-left: auto;
    font-size: 0.8rem;
    line-height: 1;
    color: var(--color-gold);
    opacity: 0.8;
  }

  /* Ad ve yıldızlar yan yana kalsın; alt alta geçmek kartı boyuna uzatıyor. */
  .review-foot { padding-top: 0.7rem; align-items: center; margin-top: auto; }
  .review-name { font-size: 0.69rem; letter-spacing: 0.1em; }
  .review-meta { font-size: 0.66rem; margin-top: 0.08rem; }
}

@media (max-width: 480px) {
  .reviews-section .section-head { margin-bottom: 3.6rem; }
  .review-card { width: 228px; padding: 0.95rem 1rem; gap: 0.55rem; }
  .review-text { font-size: 0.92rem; }
}

/* ---------- Bölüm haritası ---------- */
/* Yalnızca masaüstünde: dar ekranda kenarda da altta da yeterli yer yok,
   gezinme zaten mobil menüyle yapılıyor. */
@media (max-width: 1279px) {
  .smap { display: none; }
}

/* ---------- Navbar (dar ekran): yüzen, bulanık hap ---------- */
@media (max-width: 900px) {
  .navbar {
    top: 10px;
    left: 12px;
    right: 12px;
    padding: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .navbar.is-scrolled {
    padding: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .navbar-inner {
    position: relative;
    width: 100%;
    padding: 0.6rem 0.8rem 0.6rem 1.05rem;
    /* Çubuk kendi kompozisyon katmanında dursun; kaydırma sırasında
       sayfayla birlikte yeniden boyanmasın. (transform yerine isolation:
       transform burada position:fixed alt öğeler için kapsayıcı blok
       oluşturup mobil menü panelini bozardı.) */
    isolation: isolate;
  }

  /* Çubuğun zemini, .navbar-inner'ın kendisine değil arkasındaki katmana
     veriliyor: backdrop-filter taşıyan bir öğe, içindeki position:fixed
     menü panelinin konumlandırma bağlamını değiştirir ve panel tam ekran
     açılamaz. Sözde öğe z-index 0'da kaldığı için menü açıldığında
     panelin altında kalır.

     Bulanıklık bir ara titreme sebebi sanılıp kaldırılmıştı; kaldırmayın.
     Çubuğun arkasında görülen titremenin asıl kaynağı js/animations.js'teki
     açığa çıkma gözlemcisiydi: yukarıdan çıkan öğelerin `is-visible` sınıfı
     eşiğin tam üstünde gidip geliyor, bir saniyelik solma animasyonu
     durmadan yeniden başlıyordu (ayrıntı orada yazılı). O düzeltildikten
     sonra bulanıklık geri geldi ve sorun çıkarmıyor.

     Yine de iki tedbir duruyor: aşağıdaki translateZ katmanı sabitliyor ve
     js/backdrop.js telefonda sayfa gradyanını her kaydırma karesinde
     yeniden boyamıyor — backdrop-filter her karede taze bir zemini
     örneklemek zorunda kalmasın diye. */
  .navbar-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 999px;
    background: rgba(22, 21, 20, 0.58);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(243, 236, 227, 0.14);
    box-shadow: 0 12px 30px -12px rgba(20, 20, 20, 0.22);
    transition: background var(--dur-mid) var(--ease-out);
    /* Zemin kendi kompozisyon katmanında kalsın: kaydırırken sayfayla
       birlikte yeniden rasterlenmesin. */
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .navbar.is-scrolled .navbar-inner::before { background: rgba(18, 17, 16, 0.76); }

  .navbar-inner > .brand,
  .navbar-inner > .nav-toggle { position: relative; z-index: 2; }
}

/* Dar ekranda düğme menünün içinde değil, çubuğun kendisinde durur:
   menü ikonunun hemen solunda ve menü kapalıyken de görünür. */
@media (max-width: 900px) {
  .navbar-inner .brand { order: 1; margin-right: auto; }
  .navbar-inner .nav-cta {
    order: 2;
    position: relative;
    z-index: 2;
    margin-right: 0.7rem;
    padding: 0.44rem 0.9rem;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
  }
  .navbar-inner .nav-toggle { order: 3; }
}

@media (max-width: 400px) {
  .navbar-inner .nav-cta { margin-right: 0.55rem; padding: 0.4rem 0.72rem; font-size: 0.66rem; }
}

/* ---------- Hero başlığı: iki sütunlu genişliğe göre ölçek ---------- */
/* .hero-title'ın font-size'ı 14vw ile tüm ekran genişliğine göre büyüyor,
   ama iki sütunlu düzende başlık yalnızca sol sütunun (~%57'sinin) içine
   sığmak zorunda. 901–1439px arası bu yüzden "İzzet Baysal" iki satıra
   bölünüyordu; burada sütun genişliğine uygun daha ölçülü bir clamp
   devreye giriyor. 1440px ve üstünde asıl kural zaten tek satıra sığıyor. */
@media (min-width: 901px) and (max-width: 1439px) {
  .hero-title { font-size: min(clamp(2.8rem, 8.5vw, 7.3rem), 13.5svh); }
}
@media (min-width: 901px) and (max-width: 1439px) and (max-height: 860px) {
  .hero-title { font-size: min(clamp(2.8rem, 8.5vw, 7.3rem), 12.5svh); }
}

/* ---------- Sayfa zemini (dar-uzun ekran) ---------- */
/* Elips boyutları kendi kutusunun eksenlerine göre yüzde alıyor; dar ve
   uzun bir mobil ekranda dikey yüzdeler neredeyse tüm yüksekliği kaplayıp
   sıcak tonu ekranın tamamına "kahverengi" bir leke gibi yayıyordu.
   Soluklaştırma denendi, yeterli olmadı: telefonda gradyan tümüyle
   kaldırıldı ve zemin düz koyu bir renge indirildi. */
@media (max-width: 760px) {
  /* Gradyan kalktıktan sonra düz zemin fazla katı bir siyaha inmişti;
     birkaç ton açıldı. Masaüstündeki #1B1712 kadar sıcak değil: kahverengiye
     kaymasın diye kırmızı-yeşil-mavi arası fark dar tutuldu. */
  :root {
    --siyah: #141210;
    --color-bg-primary: #141210;
    --color-bg-secondary: #1C1916;
    --color-bg-tertiary: #24201B;
  }

  /* Telefonda gradyan tamamen kapalı. Dar ve uzun ekranda radyal ışıklar
     yayılacak yatay alan bulamadığı için renk kahverengiye kayıyordu;
     bunun yerine düz, koyu bir zemin kullanılıyor. */
  .sayfa-zemin {
    opacity: 1;
    background: var(--siyah);
  }
}

/* ---------- Sağ ortadaki dil anahtarıyla çakışmalar ---------- */
/* ---------- Dijital Müze: dar ekran düzeltmeleri ---------- */
@media (max-width: 900px) {
  /* Adımlar dar ekranda sahnenin altına iner: ziyaretçi önce salonu
     görüyor, nasıl gezileceğini sonra okuyor. */
  body[data-page="museum"] .hall-steps { order: 4; }
  body[data-page="museum"] .museum-section { order: 2; }
  body[data-page="museum"] .hall-guide { order: 5; }

  /* Dört kutu alt alta ama derli toplu: metinler görünür, ölçüler küçük. */
  .hall-steps { padding-block: clamp(1.6rem, 5vw, 2.4rem) 0; }
  .guide-plate { grid-template-columns: 1fr; }
  .guide-plate li { padding: 0.85rem 1rem; }
  .guide-no { font-size: 0.72rem; }
  .guide-plate h3 { margin: 0.3rem 0 0.25rem; font-size: 0.92rem; }
  .guide-plate p { font-size: 0.8rem; line-height: 1.5; }
  .hall-note { font-size: 0.8rem; }

  /* Üç ibare dar ekranda tek satıra sığmıyordu — hap taşıyordu. Artık
     satır atlıyor: her ibare kendi içinde bölünmüyor, sığmayan alta
     iniyor ve şerit iki satırlık derli toplu bir hap oluyor. */
  .museum-hint {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: clamp(0.5rem, 2.4vw, 0.9rem);
    row-gap: 0.15rem;
    padding: 0.45rem 0.85rem;
    font-size: clamp(0.58rem, 2.7vw, 0.68rem);
    line-height: 1.5;
    max-width: calc(100% - 1.6rem);
    text-align: center;
  }
  .museum-hint .hint-oge { white-space: nowrap; }
  .museum-hint .hint-ikon { width: 13px; height: 13px; }

  /* 2B galeri düğmesiyle aynı ölçüde kalsın: ikisi sahnenin iki üst
     köşesinde karşılıklı duruyor. */
  .museum-expand {
    top: 0.8rem;
    left: 0.8rem;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem 0.4rem 0.6rem;
    font-size: 0.66rem;
  }
  .museum-expand svg { width: 15px; height: 15px; }

  /* Dar ekranda nokta biraz küçülür ama parmakla rahat vurulacak kadar
     büyük kalır. */
  .museum-hotspot { width: 50px; height: 50px; }
  .hotspot-disk { width: 24px; height: 24px; }
  .hotspot-dalga { width: 24px; height: 24px; margin: -12px 0 0 -12px; }
  .hotspot-etiket {
    top: calc(50% + 24px);
    padding: 0.32rem 0.62rem;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
  }

  .museum-back {
    top: 0.8rem;
    right: 0.8rem;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem 0.4rem 0.6rem;
    font-size: 0.66rem;
  }
  .museum-back svg { width: 15px; height: 15px; }

  /* Eser kartları dar ekranda alt alta; sahne kısa olduğu için katman
     kendi içinde kayar. */
  .kart-kutu { grid-template-columns: minmax(0, 1fr); width: min(100%, 440px); }
  .kart-gorsel { height: clamp(110px, 20svh, 170px); }
  .kart-ustbilgi { display: block; }
  .ogut-liste li { font-size: 0.76rem; line-height: 1.5; padding-left: 1.8rem; }
  .kart-kapat { width: 32px; height: 32px; }
}



/* ---------- Eserler sayfası (dar ekran) ---------- */
@media (max-width: 900px) {

  /* Ana sayfada eserler bölümü, öğüt şeridiyle aynı kuşak zeminini alıyor:
     dar ekranda iki bölüm de tam genişlikte, kendi çerçevesi olan bir bant
     gibi okunuyor. Kuşağın kendi üst çizgisi olduğu için kapsayıcıdaki
     içerik genişliğindeki ayraç kalkıyor. */
  body[data-page="home"] .eser-bolum {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background:
      radial-gradient(90% 140% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, rgba(27, 23, 18, 0) 70%),
      linear-gradient(180deg, rgba(169, 126, 95, 0.05) 0%, rgba(169, 126, 95, 0.02) 100%);
  }
  body[data-page="home"] .eser-bolum > .container { border-top: 0; }

  /* Yıl rayı soldan üste taşınır ve yatay kaydırılan bir şeride döner:
     dar ekranda dikey ray hem yer kaplıyor hem içeriği sıkıştırıyordu. */
  .eser-govde {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }
  .eser-yillar-sarmal {
    /* Ray yatay: maske de yatay eksene döner, yükseklik sınırı kalkar. */
    max-height: none;
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg,
      transparent 0%, #000 8%, #000 92%, transparent 100%);
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    padding-right: 0;
    padding-bottom: 0.8rem;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .eser-yillar-sarmal::-webkit-scrollbar { display: none; }
  .eser-yillar {
    flex-direction: row;
    align-items: baseline;
    gap: 1rem;
    width: max-content;
    padding-inline: 0.2rem;
  }
  .eser-yillar button { font-size: 0.92rem; }
  .eser-yillar button.is-current { font-size: 1.35rem; }
  /* Çentik yatay şeritte alta düşer */
  .eser-yillar button.is-current::after {
    top: auto;
    right: auto;
    left: 50%;
    bottom: -0.85rem;
    width: 1.4em;
    height: 2px;
    transform: translateX(-50%);
  }

  /* Beş başlık dar ekranda üç satıra sarıp dağınık duruyordu; tek satırda
     yan yana dizilip parmakla kaydırılıyor. Uçlar maskeyle soluklaşarak
     devamının olduğunu gösteriyor. */
  .eser-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.45rem;
    /* Kapsayıcının dışına taşıp ekranın kenarından kenarına kaysın */
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 5vw;
    /* Üstteki bölüm metniyle arası: .section-head'in alt marjı çocuğun
       marjıyla çöküyor, bu yüzden ayrım şeridin kendi üst payından
       geliyor. Çökme 40px'ini yutuyor; görünen boşluk bu değerin o kadar
       eksiğidir, değer de ona göre yüksek. */
    margin-top: clamp(4.4rem, 14vw, 6rem);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg,
      transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg,
      transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
  .eser-tabs::-webkit-scrollbar { display: none; }
  .eser-tabs button {
    flex: none;
    white-space: nowrap;
    scroll-snap-align: center;
    padding: 0.5rem 0.9rem;
    font-size: 0.74rem;
  }

  /* Dar ekranda başlık, yıl şeridi ve eser metni tek sütunda alt alta
     dizildiği için hepsi birbirine yapışıyordu; aralar açıldı. */
  .eser-tabs { margin-bottom: clamp(2.2rem, 7vw, 2.9rem); }
  .eser-govde { gap: 1.9rem; }
  .eser-metin { padding-top: 0.35rem; }
  .eser-baslik { margin-top: 0.85rem; line-height: 1.28; }
  .eser-liste { margin-top: 1.35rem; gap: 0.9rem; }
  .eser-liste li { line-height: 1.72; }
  .eser-ipucu { margin-top: 2.1rem; }

  /* Dar ekranda görsel ve metin yeniden alt alta */
  .eser-panel { grid-template-columns: minmax(0, 1fr); gap: 1.7rem; }
  .eser-kart { aspect-ratio: 16 / 11; max-height: none; }
}

@media (max-width: 480px) {
  .eser-baslik { font-size: 1.25rem; }
}

/* ---------- Eserler: dokunmatik kaydırma ---------- */
@media (max-width: 900px) {
  /* Yıl şeridi parmakla akıcı kaysın ve seçilen yıl ortada dursun */
  .eser-yillar-sarmal {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .eser-yillar button { scroll-snap-align: center; }

  /* Panelde yatay kaydırma eserler arasında gezdiriyor; tarayıcının
     kendi yatay jestini devre dışı bırakıp dikey kaydırmayı bırakıyoruz. */
  .eser-panel { touch-action: pan-y; }

  /* Kaydırma ipucu yalnızca dar ekranda görünür */
  .eser-ipucu { display: block; }
}