/* ══════════════════════════════════════════════════════════════════
   Ademore — mobil düzen pası · 26 Ağustos 2026
   ------------------------------------------------------------------
   Ana stil dosyası (index-*.css) içerik-hash'li ve 1 yıl "immutable"
   önbellekle servis ediliyor; yerinde değiştirilirse siteyi daha önce
   açan kimse değişikliği görmez. Bu yüzden düzeltmeler burada duruyor
   ve index.html'den (no-cache) bağlanıyor.

   Kural: yeni renk/font eklenmedi, her şey mevcut token'lardan türedi.
   ══════════════════════════════════════════════════════════════════ */


/* ── 1 · Tipografi tabanı ──────────────────────────────────────────
   Ölçülen değerler mobilde küçüktü: eyebrow/buton 11px, reel kaynağı
   10px, hero künyesi 9.5px. Token'ı yükseltmek tek noktadan tüm
   bileşenleri düzeltiyor — bileşen bileşen elle büyütmek yerine. */
@media (max-width: 900px) {
  :root {
    --t-xs: .75rem;    /* 11px → 12px */
    --t-sm: .875rem;   /* 13px → 14px */
  }
}

@media (max-width: 820px) {
  /* Ana dosyada 9.5px'e düşürülüyordu; okunur tabana çekildi. */
  .hero__rule {
    font-size: 11px;
    letter-spacing: .18em;
    gap: .5rem 1.25rem;
  }
}


/* ── 2 · Hero: video arka plan değil, akışın parçası ───────────────
   SORUN: video mutlak konumlu bir katmandı (inset:0), yazılar üstünde
   yüzüyordu. 16:9 video dikey ekranda "contain" ile ortada bir şerit
   olarak duruyor; şeridin nereye denk geleceği ekran boyuna göre
   değişiyordu. Ölçüm: iPhone SE'de şerit düğmelerin 26px üstüne
   biniyordu, iPhone 13'te aradaki boşluk 4px'ti.

   ÇÖZÜM: telefonda video ızgaranın gerçek bir satırı oluyor —
   marka · film şeridi · eylemler · künye. Kutuya 16/9 oranı verildiği
   için "cover" hiçbir şey kırpmıyor (kutu ile video aynı orana sahip),
   videodaki logo ve kolaj olduğu gibi duruyor. Hiçbir ekran boyunda
   çakışma olamaz: üst üste binen katman kalmadı. */
@media (max-width: 780px) and (max-aspect-ratio: 13/10) {
  .hero {
    /* Yapışkan menü, hero'nun alt kenarı ekranın %70'ini geçince açılıyor
       (JS'teki ScrollTrigger). Hero bundan kısa olursa menü sayfanın en
       başında açılıp hero'nun kendi markasının üstüne biniyor. 78svh bu
       eşiğin güvenli tarafında; artan boşluk künyenin altına gidiyor. */
    min-height: 78svh;
    padding: var(--s-3) 0 var(--s-5);
    gap: var(--s-4);
    grid-template-rows: none;
    align-content: start;
  }

  .hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    order: 2;
    aspect-ratio: 16 / 9;
  }
  .hero__media video {
    object-fit: cover;      /* kutu da 16:9 → kırpma yok */
    object-position: 50% 50%;
    filter: contrast(1.02) saturate(.98);
    /* Kaydırma paralaksı videoyu kutusunun dışına taşıyordu. */
    transform: none !important;
  }
  /* Video artık yazının arkasında değil; karartma perdesi gereksiz. */
  .hero__scrim { display: none; }

  /* Yazı blokları kenar boşluğunu kendileri taşıyor ki video tam
     genişlikte kalsın. */
  .hero__top  { order: 1; margin-inline: var(--gutter); }
  .hero__foot { order: 3; margin-inline: var(--gutter); }
  .hero__rule { order: 4; margin-inline: var(--gutter); }

  /* Ekran okuyucu ve arama motorları için H1 burada duruyor; kutusu
     sıfır yükseklikte, en sona alındı (display:none EDİLMEZ). */
  .hero__body { order: 5; height: 0; }

  /* Eylemler tek satırda ve eşit genişlikte; "Fiyat listesi" ikincil. */
  .hero__foot { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .hero__foot .eyebrow { letter-spacing: .24em; }
  .hero__actions { gap: var(--s-2); }
  .hero__actions .btn { flex: 1 1 0; padding-inline: 1rem; }
}

/* ── 3 · Yapışkan menü ─────────────────────────────────────────────
   Mobilde menü linkleri gizli; bar yalnızca marka + eylemler.
   Marka linkinin dokunma alanı 22px'ti, 44px'e tamamlandı — barın
   yüksekliği değişmiyor, çünkü yüksekliği zaten 44px'lik düğme
   belirliyor. WhatsApp kısayolu yüzen düğmenin işini devralıyor. */
.nav__wa {
  display: none;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  color: var(--bone);
  transition: color var(--d-mid) var(--e-out), border-color var(--d-mid) var(--e-out);
}
.nav__wa:hover { color: var(--gold); border-color: var(--gold); }

@media (max-width: 780px) {
  .nav { gap: var(--s-2); }
  .nav__mark { padding-block: .65rem; }
  .nav__wa { display: grid; margin-left: auto; }

  /* Yüzen WhatsApp düğmesi kaldırıldı: fiyat satırlarının ve atölye
     paragrafının üstüne biniyordu, işini artık menüdeki kısayol yapıyor. */
  .wa { display: none; }
}


/* ── 4 · Fiyat sekmeleri: sarma yerine yatay şerit ─────────────────
   Dört sekme mobilde iki satıra sarıyordu; altındaki gösterge çizgisi
   tek satır varsayımıyla konumlandığı için yanlış yerde kalıyordu.
   Tek satır + parmakla kaydırma, gösterge yeniden hizalanıyor. */
@media (max-width: 780px) {
  .tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Şerit ekran kenarına kadar uzasın, ama ilk/son sekme hizada dursun. */
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    /* Snap hizası olmadan ilk sekme sol boşluğu yiyordu. */
    scroll-padding-inline: var(--gutter);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button {
    flex: none;
    white-space: nowrap;
    scroll-snap-align: start;
    /* Harf aralığı .2em'de dördüncü sekme ekranın tam dışında kalıyordu;
       kısaltınca kenardan görünüyor ve kaydırılabildiği anlaşılıyor. */
    letter-spacing: .1em;
  }
  /* overflow gizlendiği için -1px'teki gösterge kırpılıyordu. */
  .tabs__ink { bottom: 0; }
}


/* ── 5 · Reels: mobilde tek sütun ──────────────────────────────────
   İki sütunda dikey video ~150px genişliğe düşüyordu. Tek sütunda
   kare ekranı dolduruyor; yükseklik ekranı aşmasın diye sınırlı. */
@media (max-width: 780px) {
  .reel-strip__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-6);
  }
  .reel__frame { max-height: 78svh; }
}


/* ── 6 · Dokunma hedefleri (asgari 44px) ───────────────────────────
   Ölçümde 22–29px arasında yedi link vardı. Negatif margin, hedefi
   büyütürken satır aralığının açılmasını engelliyor. */
@media (max-width: 780px) {
  .link-rule        { padding-block: .85rem .55rem; }
  .atelier__links a { padding-block: .7rem .5rem; }
  .reel__source     { font-size: 11px; padding-block: 1rem .6rem; }

  .facts dd a,
  .hero__rule a {
    display: inline-block;
    padding-block: .85rem;
    margin-block: -.6rem;
  }
}


/* ── 7 · Atölye bölümü ─────────────────────────────────────────────
   Dekoratif gölge fotoğrafı mobilde 520px yer kaplıyordu; metin
   ekranın çok altında kalıyordu. */
@media (max-width: 780px) {
  /* Fotoğraf 3:2; mobildeki geniş-alçak kutuda kadraj hurma gölgesine
     alındı, gökyüzü şeridi ince kaldı. */
  .atelier__img { min-height: min(46svh, 360px); }
  .atelier__img img { object-position: 12% 58%; }
  .atelier__text { gap: var(--s-3); }
}


/* ── 8 · Çıpalar menünün altına düşmesin ───────────────────────────
   Yapışkan menü ~68px; bölüm başlıkları tam onun altında kalıyordu. */
@media (max-width: 780px) {
  .pricing, .reel-strip, .reviews, .contact { scroll-margin-top: 76px; }
  .pricing { padding-top: calc(var(--s-9) + 1.25rem); }
}


/* ── 9 · Hero videosu renkli (deneme — 26 Ağustos) ─────────────────
   Ana dosyada video grayscale() ile siyah-beyaza çevriliyordu.
   Filtre kaldırıldı; üstteki/alttaki yazıların okunması için yalnızca
   hafif koyultma bırakıldı. Geri almak için bu bloğu silmek yeterli. */
.hero__media video,
.hero__media video[data-hero-video] {
  filter: contrast(1.04) brightness(.82) saturate(.94);
}