/* ============================================================================
   RAFİNE — ürün kartı ve ızgara inceltmesi
   13 Ağustos 2026 · styles.css'in ÜSTÜNE yüklenir, onu DEĞİŞTİRMEZ.

   Felsefe: kimlik aynı kalır. Sıcak palet, Fraunces + Manrope, kart kutusu,
   gölge, 4:5 fotoğraf — hepsi duruyor. Değişen tek şey İŞÇİLİK:
   gölgenin katmanlanması, hareketin zamanlaması, boşluğun ritmi, tipografinin
   sıkılığı. Pahalı duran siteyi ucuzundan ayıran şey fikir değil, bu ayarlar.

   GERİ ALMA: onizleme.html'den bu satırı sil, her şey eski hâline döner.
   ========================================================================== */

:root {
  /* --- GÖLGE RAMPASI — 3 katman, tek katman yerine.
     Tek büyük gölge "yapıştırılmış" durur; üç katman (temas + orta + geniş)
     nesneyi yüzeye gerçekten oturtur. Renk sıcak espressodan türetildi,
     nötr siyah değil — sıcak palette siyah gölge kirli gri görünür. --- */
  --g-durgun:
    0 1px 1px rgba(42, 37, 33, .04),
    0 3px 6px rgba(42, 37, 33, .05),
    0 10px 20px rgba(42, 37, 33, .05);
  --g-kalkik:
    0 2px 3px rgba(42, 37, 33, .05),
    0 8px 16px rgba(42, 37, 33, .07),
    0 20px 40px rgba(42, 37, 33, .09);

  /* --- ZAMANLAMA — tek eğri, tüm kart hareketleri. Karışık süreler
     "derlenmemiş" hissi verir; tek ritim pahalı durur. --- */
  --e-kart: cubic-bezier(.22, .61, .36, 1);
  --s-kart: 420ms;
}
:root[data-theme="dark"] {
  --g-durgun:
    0 1px 1px rgba(0, 0, 0, .30),
    0 3px 6px rgba(0, 0, 0, .28),
    0 10px 20px rgba(0, 0, 0, .26);
  --g-kalkik:
    0 2px 3px rgba(0, 0, 0, .34),
    0 8px 16px rgba(0, 0, 0, .34),
    0 20px 40px rgba(0, 0, 0, .38);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --g-durgun:
      0 1px 1px rgba(0, 0, 0, .30),
      0 3px 6px rgba(0, 0, 0, .28),
      0 10px 20px rgba(0, 0, 0, .26);
    --g-kalkik:
      0 2px 3px rgba(0, 0, 0, .34),
      0 8px 16px rgba(0, 0, 0, .34),
      0 20px 40px rgba(0, 0, 0, .38);
  }
}

/* ---------------------------------------------------------------- IZGARA
   Nefes payı. Sıkışık ızgara ucuz, gereğinden seyrek ızgara boş durur.
   Dikey aralık yatayın 1.5 katı: gözün satırları ayırması kolaylaşır. */
#grid.grid {
  gap: var(--sp-10) var(--sp-6);
}
@media (max-width: 860px) {
  #grid.grid { gap: var(--sp-8) var(--sp-4); }
}

/* ------------------------------------------------------------------ KART */
.card {
  box-shadow: var(--g-durgun);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  transition:
    transform var(--s-kart) var(--e-kart),
    box-shadow var(--s-kart) var(--e-kart),
    border-color var(--s-kart) var(--e-kart);
  will-change: transform;
}

/* HOVER — eski: -4px sıçrama + çok geniş gölge (0 24px 60px .22).
   Yeni: -3px, üç katmanlı gölge derinleşir, kenar ısınır. Daha küçük hareket
   ama daha inandırıcı derinlik. Fark, sıçramanın büyüklüğünde değil
   gölgenin katmanlanmasında. */
.card:hover,
.card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--g-kalkik);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}

/* Dokunmatik cihazda hover yok — basılınca hafif içeri gider (dokunma geri
   bildirimi). Masaüstündeki kalkma hareketiyle karışmaz. */
@media (hover: none) {
  .card:active { transform: scale(.985); transition-duration: 120ms; }
}

/* ----------------------------------------------------------- FOTOĞRAF
   Tek fotoğraflı kartta yakınlaşma 1.05 → 1.035 ve süre 400ms → 620ms.
   Hızlı ve büyük zoom "stok fotoğraf sitesi" hissi verir; yavaş ve küçük
   olan, fotoğrafın kendisine dikkat çeker. */
.card-media:not(.coklu):hover .card-shot {
  transform: scale(1.035);
}
.card-shot {
  transition: transform 620ms var(--e-kart);
}

/* Fotoğrafın alt kenarında gövdeye geçişi yumuşatan çok ince bir iç gölge.
   Kırpılmış fotoğrafın "yapıştırılmış" durmasını engeller. Sabit renk
   (fotoğraf üstü kuralı) — temadan bağımsız. */
.card-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 56px;
  background: linear-gradient(to top, rgba(20, 14, 8, .10), transparent);
  pointer-events: none; z-index: 1;
}

/* ------------------------------------------------------------- ROZETLER
   Daha küçük, daha kesin. Büyük rozet fotoğrafı örter; küçük ve net rozet
   "özenli" durur. Kalp 36 → 34, kampanya pili puntosu kısılır. */
.card-fav { width: 34px; height: 34px; }
.card-fav svg { width: 17px; height: 17px; }
.card-fav:hover { transform: scale(1.08); }

/* Kalp yalnız hover/odak/aktifken tam görünür — durgun kartta geri çekilir,
   fotoğraf temiz kalır. Dokunmatikte her zaman görünür (hover yok). */
@media (hover: hover) {
  .card-fav:not(.aktif) { opacity: 0; transition: opacity 260ms var(--e-kart), transform .15s; }
  .card:hover .card-fav,
  .card:focus-within .card-fav { opacity: 1; }
}

/* ---------------------------------------------------------- KART GÖVDESİ
   Tipografi sıkılaştırma: başlık satır aralığı 1.35 → 1.28, harf aralığı
   -0.008em. Kategori satırı biraz daha soluk, biraz daha geniş harf aralıklı
   — hiyerarşi boyutla değil ton ve aralıkla kurulur. */
/* Masaüstünde dolgu zaten 20px ve doğru — dokunulmuyor.
   Mobilde 20 → 16: dar ekranda kenar boşluğu fotoğrafa alan bırakır. */
@media (max-width: 860px) { .card-body { padding: var(--sp-4); } }

.card-body h3 {
  line-height: 1.28;
  letter-spacing: -.008em;
}
/* ⚠️ Burada bir kez `opacity: .82` denendi ve GERİ ALINDI: açık temada
   efektif kontrastı 5.81 → 3.89'a düşürüyordu (AA eşiği 4.5).
   Opaklık, metnin rengini zeminle karıştırdığı için kontrast hesabına
   girer — "biraz soluk dursun" ayarı erişilebilirliği sessizce bozar.
   Hiyerarşi zaten --muted rengi ve harf aralığıyla kuruluyor. */
.card-cat {
  letter-spacing: .07em;
}
.card-foot { margin-top: var(--sp-4); }

/* Fiyat CTA'sı — alt çizgi hover'da soldan büyür. Küçük ama pahalı detay. */
.price-msg {
  position: relative; display: inline-block;
  text-decoration: none;
}
.price-msg::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--e-kart);
}
.card:hover .price-msg::after { transform: scaleX(1); }

/* ================================================================ GİRİŞ
   Kartlar görüş alanına girerken sakin yükselerek açılır.
   · yalnız JS varken gizlenir (html.rafine) — script çalışmazsa kart görünür
   · satır içinde en fazla 3 kart kademelenir, sonrası gecikmesiz
   · bir kez oynar, sonra gözlem bırakılır (unobserve)
   ============================================================== */
html.rafine .card {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 520ms var(--e-kart),
    transform 520ms var(--e-kart),
    box-shadow var(--s-kart) var(--e-kart),
    border-color var(--s-kart) var(--e-kart);
}
html.rafine .card.gorundu {
  opacity: 1;
  transform: translateY(0);
}
/* Kademe — CSS değişkeniyle, JS yalnızca sayıyı yazar */
html.rafine .card.gorundu { transition-delay: var(--gecikme, 0ms); }

/* Giriş bittikten sonra hover'ın transform'u devralabilmesi için
   gecikme sıfırlanır (yoksa hover da gecikmeli çalışırdı). */
html.rafine .card.gorundu.yerlesti { transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  html.rafine .card { opacity: 1; transform: none; transition: none; }
  .card:hover, .card:focus-visible { transform: none; }
  .card-media:not(.coklu):hover .card-shot { transform: none; }
}

/* ============================================================================
   HERO — açılış sırası
   Dağınık efekt yerine TEK orkestre edilmiş an: künye → başlık → metin →
   düğmeler → istatistik, arkasında fotoğraf. Toplam 620ms, sonra sayfa durur.
   Sayfanın hatırlanacağı hareket budur; başka yerde bu kadar hareket yok.
   ⚠️ Mobil hero yüksekliği kullanıcı için kritik — bu blok yalnızca opacity ve
   transform kullanır, HİÇBİR yükseklik değeri değiştirmez.
   ========================================================================== */
@keyframes heroGir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroMedyaGir {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-eyebrow,
.hero h1,
.hero p.lead,
.hero-cta,
.hero-stats { animation: heroGir 560ms var(--e-kart) both; }

.hero-eyebrow { animation-delay:  40ms; }
.hero h1      { animation-delay: 110ms; }
.hero p.lead  { animation-delay: 190ms; }
.hero-cta     { animation-delay: 270ms; }
.hero-stats   { animation-delay: 350ms; }

/* Fotoğraf metinle YARIŞMAZ, arkasından gelir: göz önce sözü okur. */
.hero-media { animation: heroMedyaGir 760ms var(--e-kart) 120ms both; }

/* --- Hero tipografisi ---
   h1 satır aralığı 1.02 → 1.06. 1.02 Fraunces'te çok sıkı: Türkçe'nin
   ğ/ş/ç kuyrukları alttaki satırın üstüne değiyordu. Yalnız masaüstünde —
   mobilde hero yüksekliği kritik, oraya dokunulmuyor. */
@media (min-width: 861px) {
  .hero h1 { line-height: 1.06; letter-spacing: -.015em; }
}

/* Künye harf aralığı .18em → .14em: .18 kelimeyi dağıtıyordu. */
.hero-eyebrow { letter-spacing: .14em; }

/* Hero fotoğrafının gölgesi: tek büyük gölge (0 24px 60px .22) yerine
   üç katman. Aynı derinlik, daha az "yapıştırılmış" his. */
.hero-media { box-shadow: var(--g-kalkik); }

/* Slayt geçişi 1.1s ease → 900ms, giriş eğrisiyle. Ease sonu ani biter;
   bu eğri fotoğrafı yerine oturtur. */
.hero-media .hero-slide { transition: opacity 900ms var(--e-kart); }

/* Fotoğraf üstü çip — biraz küçüldü ve yumuşadı. Fotoğrafı örtmesin.
   Renkler SABİT kalır (fotoğraf üstü kuralı, temadan bağımsız). */
.hero-slide-chip { border-radius: 8px; max-width: 68%; line-height: 1.3; }

/* ============================================================================
   MODAL — perde ve pencere ayrı gelir
   Eskiden ikisi birlikte 250ms'de patlıyordu. Perde önce ve yavaş kararır,
   pencere onun üstünde yükselir: mekânsal süreklilik kurulur.
   ========================================================================== */
@keyframes perdeGir { from { opacity: 0; } to { opacity: 1; } }
@keyframes pencereGir {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-back.open { animation: perdeGir 220ms var(--e-kart) both; }

/* styles.css'teki `animation: pop .25s ease` ezilir.
   ⚠️ Dolgu `both` DEĞİL `backwards`: both bitiş karesinin transform'unu kalıcı
   tutuyor, transform'lu öğe fixed torunların çapası olur — mobilde görünür
   alana sabitlenen ✕ pencereyle birlikte kayıp ekrandan çıkıyordu (29 Ağu).
   backwards: 60ms gecikmede başlangıç karesi korunur, bitişte taban stile
   (transform yok) dönülür — bitiş karesi tabanla özdeş, görsel fark yok. */
.modal-back.open .modal {
  animation: pencereGir 340ms var(--e-kart) 60ms backwards;
  box-shadow: var(--g-kalkik);
}

/* Dokunmatikte pencere girişi YALNIZ OPAKLIK (29 Ağu): styles.css eylem
   çubuğunu mobilde ekran altına `fixed` sabitler; pencereGir'in transform'u
   animasyon süresince .modal'ı fixed'in çapası yapıp çubuğu kaydırıyordu.
   perdeGir opaklık-tek keyframe'dir, süre/dolgu kısayoldan aynen kalır. */
@media (hover: none), (max-width: 860px) {
  .modal-back.open .modal { animation-name: perdeGir; }
}

/* Küçük resimler: 2px kenarlık yer kaplıyor ve aktif olmayanları da
   çerçeveliyordu. Aktif olan artık kenarlıkla DEĞİL, tam opaklıkla ayrılır —
   pasifler hafif soluk. Daha sakin bir şerit. */
.modal-thumbs img,
.modal-thumbs .thumb,
.modal-thumbs .thumb-video {
  opacity: .62;
  transition: opacity 260ms var(--e-kart), border-color 260ms var(--e-kart);
}
.modal-thumbs .thumb:hover,
.modal-thumbs .thumb-video:hover { opacity: .85; }
.modal-thumbs .thumb.active,
.modal-thumbs .thumb-video.active { opacity: 1; }

/* Galeri kaydırması kartlarla aynı ritme girer (.38s → .42s, aynı eğri) */
.slides { transition: transform 420ms var(--e-kart); }

/* Fiyat satırı ile başlık arasındaki hiyerarşi: ikisi de fs-xl idi, yarışıyorlardı.
   Başlık büyür, fiyat CTA'sı ağırlığını korur ama boyutça geri çekilir. */
.modal-info h2 { line-height: 1.2; letter-spacing: -.01em; }
.modal-info .m-price { font-size: var(--fs-lg); }

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero h1, .hero p.lead, .hero-cta, .hero-stats,
  .hero-media, .modal-back.open, .modal-back.open .modal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================================
   YORUMLAR — güven şeridi
   33 gerçek müşteri ekran görüntüsü. Fiyatın yazmadığı bir sitede tek teminat
   bunlar; o yüzden kartlarla AYNI özenle davranılır, ikinci sınıf bir şerit
   gibi değil. Sistemin ritmine sokulur: aynı gölge rampası, aynı eğri, aynı süre.
   ========================================================================== */
.yorum-kart {
  box-shadow: var(--g-durgun);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  /* eski: transform .15s ease — sistemin 420ms ritminin dışındaydı, "seğirme"
     gibi duruyordu. Artık kartlarla aynı zamanlama. */
  transition:
    transform var(--s-kart) var(--e-kart),
    box-shadow var(--s-kart) var(--e-kart),
    border-color var(--s-kart) var(--e-kart);
}
.yorum-kart:hover {
  transform: translateY(-3px);
  box-shadow: var(--g-kalkik);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
}

/* Oklar: backdrop-filter kaldırıldı (sayfada 14 yerde vardı, hepsi gidiyor —
   opak yüzey aynı işi görür, bedava). Gölge rampaya bağlandı. */
.yorum-ok {
  backdrop-filter: none;
  background: var(--surface);
  box-shadow: var(--g-durgun);
  transition: color 260ms var(--e-kart), border-color 260ms var(--e-kart),
              box-shadow 260ms var(--e-kart);
}
.yorum-ok:hover { box-shadow: var(--g-kalkik); }

/* DOKUNMATİKTE kenar solması — oklar orada gizli olduğu için "devamı var"
   işareti kalmıyordu. Fareli cihazda oklar zaten söylüyor, orada gösterme. */
@media (hover: none) {
  .yorum-sarici { position: relative; }
  .yorum-sarici::after {
    content: ""; position: absolute; inset: 0 0 0 auto; width: 40px;
    background: linear-gradient(to right, transparent, var(--surface-2));
    pointer-events: none;
  }
}

/* ============================================================================
   SSS — akordeon
   Cevap ANINDA belirmiyordu; artık açılırken kısa bir giriş yapıyor.
   Sebep-sonuç: kullanıcı bir şeye bastı, cevap ona doğru geldi.
   ========================================================================== */
@keyframes sssAc {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sss-soru[open] p { animation: sssAc 300ms var(--e-kart) both; }

/* Artı işareti sistemin eğrisine bağlandı (.2s ease → 300ms) */
.sss-soru summary::after { transition: transform 300ms var(--e-kart); }

/* Soru satırına dokunma/işaretçi geri bildirimi — eskiden hiç yoktu,
   tıklanabilir olduğu yalnız imleçten anlaşılıyordu. */
.sss-soru summary { transition: color 200ms var(--e-kart); }
.sss-soru summary:hover { color: var(--accent-ink); }
.sss-soru summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px;
}

/* Cevap metni 14px → 16px. Burası güven kurulan yer; en çok okunan
   paragrafların en küçük punto olması yanlıştı. Satır uzunluğu 60ch'te kalır. */
.sss-soru p { font-size: var(--fs-md); }

/* Satır arası nefes: 16px → 20px. Sekiz soru alt alta sıkışıktı. */
.sss-soru summary { padding: var(--sp-5) 0; }

/* ============================================================================
   ÇALIŞMALAR + YORUMLAR — giriş
   Kartlarla aynı davranış: görüş alanına girince sakin yükselerek açılır.
   rafine.js bu iki sınıfı da gözlüyor.
   ========================================================================== */
html.rafine .yorum-kart,
html.rafine .work {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms var(--e-kart),
    transform 520ms var(--e-kart),
    box-shadow var(--s-kart) var(--e-kart),
    border-color var(--s-kart) var(--e-kart);
}
html.rafine .yorum-kart.gorundu,
html.rafine .work.gorundu { opacity: 1; transform: translateY(0); }
html.rafine .yorum-kart.gorundu,
html.rafine .work.gorundu { transition-delay: var(--gecikme, 0ms); }
html.rafine .yorum-kart.gorundu.yerlesti,
html.rafine .work.gorundu.yerlesti { transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  html.rafine .yorum-kart, html.rafine .work {
    opacity: 1; transform: none; transition: none;
  }
  .yorum-kart:hover { transform: none; }
  .sss-soru[open] p { animation: none; }
}

/* ============================================================================
   DOKUNMATİKTE GİRİŞ ANİMASYONU YOK (29 Ağustos 2026 — müşteri şikayeti)
   Parmakla hızlı kaydırmada IntersectionObserver geç tetikleniyor (iOS Safari
   momentum kaydırması bitene dek bekletiyor); 520ms geçiş + kademe eklenince
   müşteri ekranlarca boş karanlık alan görüyordu ("ürünler yüklenmiyor" hissi).
   Kart/yorum/çalışma dokunmatikte anında görünür; gölge-kenar geçişleri ve
   hero açılış sırası korunur. Yalnız .gorundu bekleyen opacity/transform gider.
   ========================================================================== */
@media (hover: none), (max-width: 860px) {
  html.rafine .card,
  html.rafine .yorum-kart,
  html.rafine .work {
    opacity: 1;
    transform: none;
    transition:
      box-shadow var(--s-kart) var(--e-kart),
      border-color var(--s-kart) var(--e-kart);
  }
}

/* ============================================================================
   MOBİL — ölçülmüş üç sorunun düzeltmesi (13 Ağustos 2026)
   Denetim: 390×844'te ilk kart 2307px (2.73 ekran) aşağıdaydı, 85 dokunma
   hedefi 44px altındaydı, 2 sütunda fotoğraf 162px'e inip gömülü altyazılar
   okunmaz oluyordu.
   ========================================================================== */

/* --- 1) DOKUNMA HEDEFLERİ — Apple 44pt / Material 48dp --- */
@media (max-width: 860px) {
  /* Tema düğmesi 27×40 idi: genişlik parmak ucunun (≈45px) çok altında. */
  .theme-toggle { min-width: 44px; min-height: 44px; }

  /* Arama temizle 30×30 → görsel boyut aynı, dokunma alanı büyür. */
  .arama-temizle { width: 44px; height: 44px; }

  /* Çipler 42 → 44. İki piksel ama eşiğin doğru tarafında. */
  .chip, .subfilters .chip-sm { min-height: 44px; }

  /* Görünüm düğmeleri 42×38 → 44×44 */
  .gorunum-btn { min-width: 44px; min-height: 44px; }

  /* Modal kapat 39×39 → 44×44 */
  #closeModal { min-width: 44px; min-height: 44px; }

  /* Ölçü asistanı onay kutusu 18×18 — kutunun kendisi büyütülemez,
     etiketin tamamı dokunma alanı olur. */
  .olcu-duvar { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; }

  /* Kart kategori satırı 12 → 13px. Meta bilgi ama okunması gerekiyor. */
  .card-cat { font-size: 13px; }
}

/* --- 2) KATALOG ARAÇLARI mobilde katlanır ---
   "Ürünler"e basan kullanıcı tam bir ekran kontrol görüyordu, tek ürün değil.
   Ölçü asistanı + filtreler tek satıra iner; arama ve görünüm dışarıda kalır. */
.rafine-araclar { margin-bottom: var(--sp-5); }
.rafine-araclar > summary {
  cursor: pointer; list-style: none; min-height: 44px;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0 var(--sp-5); background: var(--surface);
  transition: border-color 200ms var(--e-kart), color 200ms var(--e-kart);
}
.rafine-araclar > summary::-webkit-details-marker { display: none; }
.rafine-araclar > summary::after { content: "+"; color: var(--accent-ink); font-size: var(--fs-lg); line-height: 1; }
.rafine-araclar[open] > summary::after { content: "−"; }
.rafine-araclar > summary:hover { border-color: var(--accent); color: var(--accent-ink); }
.rafine-araclar > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rafine-araclar-govde { padding-top: var(--sp-5); }
.rafine-araclar[open] .rafine-araclar-govde { animation: sssAc 300ms var(--e-kart) both; }

/* Masaüstünde katlama YOK — her şey açık, başlık gereksiz. */
@media (min-width: 861px) {
  .rafine-araclar > summary { display: none; }
  .rafine-araclar-govde { padding-top: 0; }
  .rafine-araclar { margin-bottom: 0; }
}

/* --- 3) MOBİLDE TEK SÜTUN VARSAYILAN ---
   2 sütunda fotoğraf 162px'e iniyor; Canva'da gömülü Türkçe altyazılar ve
   fiyat rozetleri okunmaz oluyor, ürün adı da tam ayırt edici yerde
   ("— Aytaşı") kırpılıyor. Tek sütunda fotoğraf 358px, ad tek satıra sığar.
   İki sütun "Görünüm" düğmesinde seçenek olarak KALIR (tercih hatırlanır);
   yalnızca VARSAYILAN değişti — rafine.js gv-mob anahtarını boşsa "1" yapar. */
@media (max-width: 860px) {
  .grid.gm-1 .card-body h3 { -webkit-line-clamp: 2; }
  /* ⚠️ Burada bir kez `aspect-ratio: 4/3` yazıldı ("tek sütunda 4:5 çok uzun")
     ve GERİ ALINDI: kaynak fotoğraflar 640×800, yani 4:5. Çerçeveyi 4:3'e
     kısaltmak object-fit:cover ile dolabın ALTINI VE ÜSTÜNÜ kırpıyordu —
     dikey bir gardırobun tam da gösterilmesi gereken kısmını.
     Kart oranı her yerde 4:5 kalır; styles.css'teki değere dokunulmaz. */
}

/* --- Kalan dokunma hedefleri (ikinci tarama sonrası) --- */
@media (max-width: 860px) {
  /* ⚠️ KENDİ AÇTIĞIM HATA: kalbi 36 → 34 küçültmüştüm. Masaüstünde hover'da
     geldiği için sorun değil, ama dokunmatikte hep görünür ve 43 kalp birden
     44px eşiğinin altına düşüyordu. Görsel daire 34 kalır, dokunma alanı 44. */
  .card-fav { width: 44px; height: 44px; background-clip: content-box; padding: 5px; }

  /* Hesapla düğmesi 43px — bir piksel eksikti */
  #olcuHesapla { min-height: 44px; }

  /* Marka bağlantısı 152×32 — dikey dokunma alanı dar */
  .brand { display: inline-flex; align-items: center; min-height: 44px; }

  /* Onay kutusunun kendisi 18×18; büyütülebilir ve etiket de hedef olur */
  #olcuDuvar { width: 22px; height: 22px; }
}

/* --- HERO MOBİL: DOKUNMA. Denendi ve GERİ ALINDI. ---
   Burada bir kez "hero'yu sıkıştırıyorum" diye dolgu/aralık yazıldı ve hero
   1394 → 1449px BÜYÜDÜ. Sebep: styles.css'te zaten elle ayarlanmış bir
   @media (max-width: 860px) bloğu var ve değerleri masaüstünden çok daha sıkı:
       alt dolgu 32px · sütun aralığı 24px · istatistik aralığı 8px
   Masaüstü değerlerine bakıp "küçültmek" aslında gevşetmek oluyor.
   ⚠️ Mobil hero yüksekliğine dokunmadan önce MEVCUT mobil bloğu oku. */

/* --- HEADER mobilde taşıyordu (kendi açtığım regresyon) ---
   Tema düğmesini 27 → 44px yapınca satır 390px'e sığmaz oldu:
   dolgu 48 + marka 152 + tema 44 + WhatsApp 136 + boşluk 40 = 420px.
   Çözüm dokunma hedefini küçültmek DEĞİL, satırda yer açmak:
   boşluk 20→12, WhatsApp yatay dolgusu 20→14, dar ekranda marka puntosu kısılır.
   Üç düğmenin de yüksekliği 44px kalır. */
@media (max-width: 860px) {
  header.site .nav { gap: var(--sp-3); }
  header.site .btn-wa { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 400px) {
  .brand { font-size: var(--fs-md); }
  header.site .nav { gap: var(--sp-2); }
}

/* ============================================================================
   HERO — düzen temizliği
   Üç somut sorun ölçüldü:
   (a) Fotoğrafın üstünde DÖRT grafik katmanı üst üste biniyordu: arayüz çipi,
       fotoğrafa gömülü "28.000 TL" rozeti, gömülü "%100 MDF" filigranı ve
       alttaki "ücretsiz teslimat" etiketi.
   (b) Alt etiket, sol sütundaki "Ücretsiz · Teslimat & kurulum" istatistiğinin
       BİREBİR tekrarıydı — aynı cümle iki kez.
   (c) Mobilde iki düğme ve üç istatistik pili farklı genişlikteydi;
       sağ kenar tırtıklı, kazara olmuş gibi duruyordu.
   ========================================================================== */

/* (a+b) FOTOĞRAFTA TEMİZ BÖLGE YOK — ölçüldü:
       sağ üst  → gömülü kampanya rozeti ("Kısa süreliğine 28.000 TL")
       orta     → gömülü "my furniture" filigranı
       alt      → gömülü Türkçe altyazı ("6 kapaklı Beyaz renk İNCİ model…")
   Çipi sağ üstten alt sola taşımak, rozetten kaçırıp altyazının üstüne
   oturtuyordu. Kare zaten markanın kendi grafik katmanını taşıyor; arayüzün
   ikinci bir katman kurması her konumda çakışıyor.
   Karar: hero fotoğrafının üstünde arayüzden gelen HİÇBİR öge kalmaz.
   · .tag zaten sol sütundaki "Ücretsiz · Teslimat & kurulum" istatistiğinin
     birebir tekrarıydı — bilgi kaybı yok.
   · Çipin taşıdığı ürün adını gömülü altyazı zaten söylüyor; ekran okuyucular
     için <img alt> ile korunuyor ve fotoğraf tıklanabilir <a> olarak kalıyor. */
.hero-media .tag,
.hero-slide-chip { display: none; }

/* (c) MOBİL — hizalama.
   Düğmeler tam genişlik: ikisi de aynı hizada başlar ve biter.
   İstatistik pilleri tam genişlik: sağ kenar hizalanır, parantezli uzun
   açıklama artık satırı bozmaz. Yükseklik değişmez — zaten 3 satırdılar. */
@media (max-width: 860px) {
  .hero-cta { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .hero-cta .btn { width: 100%; justify-content: center; }

  .hero-stats { flex-direction: column; align-items: stretch; }
  .hero-stats .stat { width: 100%; justify-content: flex-start; }

  /* Fotoğrafta çip alt sola indiği için kenar boşluğu biraz azalır */
  .hero-slide-chip { bottom: var(--sp-3); left: var(--sp-3); font-size: var(--fs-xs); }
}

/* MASAÜSTÜ hizalama DENENDİ ve YAZILMADI:
   `align-items: start` metnin altında büyük boşluk bırakıyor — mevcut
   ortalama daha dengeli. `position: sticky` ise burada işlevsiz: yapışkan öge
   kendi ızgara alanı içinde kalır, alan da fotoğrafın kendi yüksekliği kadar,
   yani hiç kaymaz. İkisi de eklenmedi. */

/* ============================================================================
   HERO — ilk izlenim
   Amaç: müşteri siteye girdiği ilk 3 saniyede "burası işini biliyor" desin.
   Dört ekleme; hiçbiri içerik çıkarmaz, hepsi derinlik ve canlılık katar.
   ========================================================================== */

/* --- 1) FOTOĞRAF YAŞIYOR (yavaş kaydırma) ---
   Duran bir fotoğraf broşür, çok yavaş süzülen bir fotoğraf vitrindir.
   Aktif slayt 5 saniyede %4,5 büyür — göz hareketi fark etmez ama kare
   "canlı" hisseder. transform-only: düzen hesabı yok, GPU'da tek katman. */
@keyframes heroSuzul {
  from { transform: scale(1); }
  to   { transform: scale(1.045); }
}
.hero-media .hero-slide.active img {
  animation: heroSuzul 5s linear both;
}

/* --- 2) NEREDEYİZ? (slayt göstergesi) ---
   Beş fotoğraf dönüyordu ama hiçbir işaret yoktu; ziyaretçi devamı olduğunu
   bilmiyordu. İnce çizgiler pozisyonu söyler.

   ⚠️ FOTOĞRAFIN ÜSTÜNE KONMADI — ölçüldü. Beş hero karesinin dört köşesindeki
   yerel kontrast varyansı (yüksek = altında gömülü yazı/rozet var):
       sol üst  en kötü 39   ·  sağ üst  en kötü 66
       sol alt  en kötü 68   ·  sağ alt  en kötü 104
   Hiçbir köşe beş karede birden temiz değil. Gösterge fotoğrafın ALTINA,
   kendi satırına çıktı; böylece hangi kare dönerse dönsün çakışma olmaz.
   Fotoğrafın üstünde arayüzden gelen hiçbir öge kalmadı kuralı korunur. */
.hero-medya-sarici { display: flex; flex-direction: column; gap: var(--sp-3); }
.hero-nokta-serit {
  display: flex; gap: 6px; justify-content: center;
  pointer-events: none;              /* fotoğrafın kendisi zaten ürüne gidiyor */
}
/* Soyut çizgi yerine gerçek kare: ziyaretçi ilk ekranda beş ürün görür.
   Tıklanabilir — 44px dokunma hedefi kutunun kendisinden gelir. */
.hero-nokta {
  width: 56px; height: 70px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius); overflow: hidden; background: var(--surface-2);
  box-shadow: var(--g-durgun);
  opacity: .55; flex: 0 0 auto;
  transition: opacity 420ms var(--e-kart), box-shadow 420ms var(--e-kart),
              outline-color 420ms var(--e-kart);
  outline: 2px solid transparent; outline-offset: 2px;
}
.hero-nokta img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-nokta:hover { opacity: .85; }
.hero-nokta.active { opacity: 1; outline-color: var(--accent); box-shadow: var(--g-kalkik); }
.hero-nokta:focus-visible { outline-color: var(--accent); }
@media (max-width: 860px) {
  .hero-nokta { width: 48px; height: 60px; }
}

/* Mobilde fotoğrafın max-width'i sarıcıya taşınır ki göstergenin genişliği
   fotoğrafla hizalı kalsın (styles.css: .hero-media { max-width: 420px }). */
@media (max-width: 860px) {
  .hero-medya-sarici { max-width: 420px; }
  .hero-media { max-width: none; }
}

/* --- 3) FOTOĞRAF ÇERÇEVELENİR ---
   Dış gölge nesneyi sayfadan ayırır; 1px iç halka ona kenar verir —
   baskı gibi durur, ekrana yapıştırılmış gibi değil. */
.hero-media {
  box-shadow: var(--g-kalkik), inset 0 0 0 1px rgba(255, 255, 255, .10);
}

/* --- 4) AÇILIŞ SIRASI KATEGORİ KARTLARINA KADAR İNER ---
   Hero metni 40→350ms arası giriyordu, sonra sayfa aniden duruyordu.
   Kategori kartları da sıraya katılınca ilk ekran TEK bir koreografi olarak
   çözülür — müşterinin gördüğü ilk "ürün"ler bunlar. */
.hero .kat-strip .kat-kart { animation: heroGir 560ms var(--e-kart) both; }
.hero .kat-strip .kat-kart:nth-child(1) { animation-delay: 430ms; }
.hero .kat-strip .kat-kart:nth-child(2) { animation-delay: 490ms; }
.hero .kat-strip .kat-kart:nth-child(3) { animation-delay: 550ms; }
.hero .kat-strip .kat-kart:nth-child(4) { animation-delay: 610ms; }

/* Kategori kartları da kart sistemine girer: aynı gölge rampası, aynı eğri,
   aynı süre. Eskiden .15s ease ile seğiriyorlardı. */
.kat-kart {
  box-shadow: var(--g-durgun);
  transition:
    transform var(--s-kart) var(--e-kart),
    box-shadow var(--s-kart) var(--e-kart);
}
.kat-kart:hover { transform: translateY(-3px); box-shadow: var(--g-kalkik); }
.kat-kart img { transition: transform 620ms var(--e-kart); }
.kat-kart:hover img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .hero-media .hero-slide.active img,
  .hero .kat-strip .kat-kart { animation: none !important; }
  .kat-kart:hover { transform: none; }
  .kat-kart:hover img { transform: none; }
}

/* ============================================================================
   ZOOM + GALERİ — kullanıcı bildirimi (14 Ağu):
   "zoom yapınca geri gelinemiyor" · "kaydırma ve gezinme akıcı değil"
   ========================================================================== */

/* ✕ düğmesi 40×40 idi — dokunma eşiği 44. Zoom'dan çıkışın mobildeki ana
   yolu bu düğme olduğu için eşiğin altında kalması kritikti. */
.zoom-back .close-x,
#zoomKapatBtn { min-width: 44px; min-height: 44px; }

/* Zoom okları da eşiğe çıkar */
.zoom-nav { min-width: 48px; min-height: 48px; }

/* GALERİ SÜRÜKLEME — rafine.js parmağı takip eden sürüklemeyi ekliyor.
   · touch-action: pan-y → yatay hareket bizim, dikey sayfaya kalır
     (yoksa tarayıcı yatay sürüklemeyi sayfa kaydırması sanıp el koyuyor)
   · will-change → sürükleme sırasında ayrı katman, her karede yeniden
     boyama olmaz */
#mMain { touch-action: pan-y; }
.slides { will-change: transform; }

/* Sürükleme sırasında geçiş KAPALI olmalı: parmağa 1:1 yapışsın.
   rafine.js bu sınıfı ekleyip kaldırıyor. */
.slides.suruklenuyor { transition: none !important; }

/* Zoom görüntüsü parmağa yapışır — üstünde geçiş olursa pan gecikmeli hisseder */
#zoomImg { will-change: transform; }

/* ZOOM PERDESİ TAM OPAK — kullanıcı ekran görüntüsüyle bildirdi:
   "çift ok ve iki ✕ görünüyor". Sebep: perde rgba(15,11,7,.96) idi ve
   altındaki MODALIN kendi düğmeleri (#closeModal, #mPrev, #mNext, #mZoomAc)
   %4'lük saydamlıktan hayalet gibi sızıyordu. Zoom açıkken ekranda yalnız
   zoom'un kendi kontrolleri olmalı. */
.zoom-back { background: #0f0b07; }

/* ============================================================================
   ZOOM ŞERİDİ — telefon galerisi gibi kaydırma (kullanıcı isteği, 14 Ağu)
   Özel fizik YAZILMADI: tarayıcının kendi kaydırması + scroll-snap kullanılıyor
   (kart karuselinde zaten çalışan mekanizma). Momentum, 60fps ve parmak
   takibi bedava gelir; el yazımı bir tween hiçbir zaman bu kadar akıcı olmaz.
   ========================================================================== */
.zoom-serit {
  position: absolute; inset: 0;
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x;          /* yatay bizim; dikey/pinch tarayıcıya kalmaz */
}
.zoom-serit::-webkit-scrollbar { display: none; }
.zoom-kare {
  flex: 0 0 100%; width: 100%; height: 100%;
  scroll-snap-align: center; scroll-snap-stop: always;
  /* ⚠️ grid DEĞİL flex (29 Ağu): grid'in otomatik satırında img'in
     max-height:100%'ü çözülemiyor, fotoğraf doğal 800px yüksekliğiyle basılıp
     alçak pencerede alttan kesiliyordu ("yarım gösteriyor" şikayeti — telefon
     ekranı 800px'ten uzun olduğu için oralarda görünmemişti). Flex kabında
     yüzde, kabın kesin yüksekliğine karşı çözülür. */
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6) var(--sp-4);
}
.zoom-kare img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}

/* Yakınlaştırma yokken şerit görünür, app.js'in tek görseli gizli.
   Yakınlaştırılınca tersi: pinch/pan app.js'in #zoomImg'i üzerinde sürer. */
.zoom-back.serit-modu #zoomImg { visibility: hidden; }
.zoom-back:not(.serit-modu) .zoom-serit {
  /* ⚠️ `display:none` KULLANMA: şeridin scrollLeft'i sıfırlanır, geri
     dönüldüğünde sahte bir scroll olayı tetiklenir ve galeri ilk kareye
     atlar (yakınlaştırma da sıfırlanır). visibility düzeni korur. */
  visibility: hidden; pointer-events: none;
}

/* Şerit modundayken ok düğmeleri de şeridi kaydırır (rafine.js bağlar) */
.zoom-back.serit-modu .zoom-nav { z-index: 81; }

/* ⚠️ styles.css:932 `.zoom-alan img { position:absolute; left:0; top:0;
   transform-origin:0 0 }` — bu seçici ŞERİT görsellerimi de yakalıyordu:
   kareler ızgarada ortalanamıyor, fotoğraf sol üste yapışıp altta koca bir
   siyah alan bırakıyordu. Yalnız şerit karelerini geri alıyoruz;
   #zoomImg'in kendi kuralları (pinch/pan bunlara dayanıyor) korunur. */
.zoom-kare img {
  position: static;
  transform-origin: center center;
  will-change: auto;
}

/* `.zoom-alan { touch-action: none }` özel pinch/pan için gerekli, ama şerit
   modunda yatay kaydırmayı engelliyor. Moda göre açılır. */
.zoom-back.serit-modu .zoom-alan { touch-action: pan-x; cursor: default; }

/* --- HERO SOSYAL KANIT SATIRI (rafine.js/heroKanit) ---
   Fiyatın yazmadığı bir sitede en güçlü teminat gerçek yorumlardır; 33 tanesi
   sitede duruyordu ama ilk ekranda hiç görünmüyordu. */
.hero-kanit {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-5); text-decoration: none;
  font-size: var(--fs-sm); color: var(--ink); font-weight: 700;
  min-height: 44px;
}
.hero-kanit b { font-weight: 700; border-bottom: 1px solid transparent; transition: border-color 260ms var(--e-kart); }
.hero-kanit:hover { text-decoration: none; }
.hero-kanit:hover b { border-bottom-color: var(--accent); }
.hero-yildiz { color: var(--accent-ink); letter-spacing: 2px; font-size: var(--fs-sm); line-height: 1; }
.hero-kanit-ok { color: var(--accent-ink); }

/* Kare şeridi yatayda sığmazsa kayar (dar telefonlarda 5 kare) */
.hero-nokta-serit { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.hero-nokta-serit::-webkit-scrollbar { display: none; }

/* --- KARE ŞERİDİ MOBİLDE İNCE ÇİZGİYE DÖNER (kullanıcı kararı, 14 Ağu) ---
   Kareler ilk ekranda 64px yiyordu ve mobilde ilk ürün kartını aşağı itiyordu.
   Masaüstünde kalır (orada yer bol ve beş ürünü birden göstermek değerli).
   Mobilde tamamen SİLMİYORUZ: "beş fotoğraf var" bilgisi kaybolurdu.
   Görsel 3px'e iner, dokunma alanı dolguyla 44px'te tutulur. */
@media (max-width: 860px) {
  .hero-nokta-serit { gap: 6px; padding: 0; justify-content: center; }
  .hero-nokta {
    /* ⚠️ box-sizing: border-box — width/height DOLGUYU KAPSAR.
       Görünür çubuk 16×3 istiyorsak kutu 24×27 olmalı (16+2·4, 3+2·12).
       Bir kez `height: 3px; padding: 12px` yazıldı ve içerik yüksekliği
       0'a düşüp ÇUBUK HİÇ ÇİZİLMEDİ — mobilde gösterge görünmez olmuştu. */
    width: 24px; height: 27px;
    padding: 12px 4px;
    background: var(--line); box-shadow: none; opacity: 1;
    border-radius: 999px; overflow: visible;
    background-clip: content-box;
    transition: width 420ms var(--e-kart), background 420ms var(--e-kart);
  }
  .hero-nokta img { display: none; }  /* mobilde kare göstermiyoruz */
  .hero-nokta.active {
    width: 38px;                     /* görünür çubuk 30px (38 − 2·4) */
    background: var(--accent);
    outline-color: transparent; box-shadow: none;
  }
}


/* --- KATEGORİ KARTLARI MOBİLDE YATAY ŞERİT (14 Ağu, kullanıcı seçti) ---
   Eskiden 2×2 ızgaraydı ve 406 px yer kaplıyordu — hero fotoğrafı kadar.
   Ölçüldü: şeritte 207 px, yani ilk ürün kartı 2001 → 1802 px'e (2.44 → 2.20
   ekran) çıkıyor. Dört kategori de erişilebilir kalır, yalnız dizilim değişir.
   Kaydırma native scroll-snap ile — momentum tarayıcıdan gelir.
   Yan fayda: üçüncü kartın yarısı görünür, "devamı var" sinyalini kendi verir
   (2×2 ızgarada böyle bir ipucu yoktu).
   ⚠️ Bedel: "33 Gerçek Yorum" kartı ilk bakışta görünmüyor. Kabul edilebilir,
   çünkü hero'daki ★★★★★ satırı yorumlara giden daha görünür bir yol açtı.
   Geri almak için: bu bloğu sil, styles.css'teki 2×2 ızgara geri gelir. */
@media (max-width: 860px) {
  .hero .kat-strip {
    display: flex; grid-template-columns: none;
    gap: var(--sp-3); overflow-x: auto;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    padding-bottom: 2px;                 /* odak halkası kesilmesin */
  }
  .hero .kat-strip::-webkit-scrollbar { display: none; }

  .kat-kart {
    flex: 0 0 42vw; max-width: 168px;    /* 2,4 kart görünür → devamı olduğu belli */
    scroll-snap-align: start;
    aspect-ratio: 4 / 5;
  }
  /* Dar kartta yazılar bir basamak iner */
  .kat-bilgi { padding: var(--sp-5) var(--sp-3) var(--sp-2); }
  .kat-bilgi b { font-size: var(--fs-sm); }
  .kat-bilgi small { font-size: 11px; }
  /* Yorum kartı fotoğrafsız — dar kutuda nefes alsın */
  .kat-kart-yorum { padding: var(--sp-3); gap: var(--sp-1); }
  .kat-kart-yorum b { font-size: var(--fs-md); }
  .kat-kart-yorum small { font-size: 11px; }
  .kat-kart-yorum .ky-yildiz { font-size: var(--fs-md); letter-spacing: 2px; }
}