/* Efekt vitrini seçimleri (27 Eylül 2026, sahibin onayı): docs/KITAP.md "Bekleyen işler" → "Efekt vitrini 1
   seçimleri". Kaynak kod: brand/vitrin/efekt-vitrini-1.html ve efekt-vitrini-2.html (kodlar B1, K2, H2… oradaki
   isimlerle aynı, burada yorum satırlarında anılıyor). Renkler site token'larından (var(--lime), var(--text)…),
   ayrı koyu/açık blok yok — token'lar zaten iki temada da doğru değer taşıyor.
   Kurallar: hover'lı efektler yalnızca @media (hover:hover) içinde; her şey dosya sonundaki
   prefers-reduced-motion bloğuyla kapanır; JS'li olanlar public/efektler.js'te tek sefer kurulan
   delege dinleyiciler kullanır (bkz. o dosyanın başındaki not). */

/* ===================== Vitrin 1 ===================== */

/* B1 — basılan tuş: ana limon butonlar (Satın al, Siteye git, hero "6 taksit ve üstü"). Sitenin kendi
   .btn-lime zemini ve .btn:active transform'unu (translateY 1px) bozmadan altına "basılabilir" gölge ekler. */
.btn-lime { position: relative; overflow: hidden; box-shadow: inset 0 -3px 0 rgba(15, 16, 13, 0.22), 0 3px 0 rgba(15, 16, 13, 0.18); }
.btn-lime:active:not([disabled]) { box-shadow: inset 0 -1px 0 rgba(15, 16, 13, 0.22), 0 0 0 rgba(15, 16, 13, 0.18); }
@media (hover: hover) {
  .btn-lime:hover { transform: translateY(-2px); box-shadow: inset 0 -4px 0 rgba(15, 16, 13, 0.26), 0 5px 0 rgba(15, 16, 13, 0.2); }
  .btn-lime:hover .arr { transform: translateX(3px); } /* zaten .btn:hover .arr'de var, burada yalnızca miras */
}

/* B3 — parıltı süpürme: YALNIZCA hero'daki "6 taksit ve üstü" butonu (.hero-cta-shine, bkz. public/parts.js). */
.hero-cta-shine { overflow: hidden; }
.hero-cta-shine::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
@media (hover: hover) {
  .hero-cta-shine:hover::after { transition: transform 0.7s ease; transform: translateX(120%); }
}

/* B5 — dolan zemin (KALDIRILDI, 27 Eylül sahibin isteği: ikincil butonlarda hover'da çok hızlı limon doluyordu).
   .btn-outline-light / .btn-ghost artık yalnızca styles.css'teki eski hover'ını kullanır (border/background,
   dolan zemin yok). */

/* B6 — tıklama dalgası: B1'in uygulandığı limon butonlarda da (.btn-lime); span'lar public/efektler.js'te
   tek bir delege 'click' dinleyicisiyle eklenir. */
.eff-ripple { position: absolute; border-radius: 50%; background: rgba(15, 16, 13, 0.3); transform: scale(0); pointer-events: none; animation: eff-rip 0.6s ease-out forwards; }
@keyframes eff-rip { to { transform: scale(3.2); opacity: 0; } }

/* B7 — favori patlaması: kalp düğmesi zaten tıklanınca .pop alıyor (public/account.js); burada yalnızca
   lime noktaların patlamasını CSS'le ekliyoruz, yeni JS gerekmiyor. */
.fav.pop::before, .fav.pop::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: eff-burst 0.5s ease-out both; }
.fav.pop::before { box-shadow: 0 -16px 0 -6px var(--lime), 0 16px 0 -6px var(--lime), -16px 0 0 -6px var(--lime), 16px 0 0 -6px var(--lime); }
.fav.pop::after { box-shadow: -12px -12px 0 -7px var(--lime), 12px -12px 0 -7px var(--lime), -12px 12px 0 -7px var(--lime), 12px 12px 0 -7px var(--lime); animation-delay: 0.03s; }
@keyframes eff-burst { from { opacity: 1; transform: scale(0.3); } to { opacity: 0; transform: scale(1.9); } }

/* K2 + K4 + K5 — ürün kartı: hafif 3D eğilme (masaüstü, en fazla 6°) + lime çerçeve + el feneri; hepsi
   public/efektler.js'teki TEK delege pointermove dinleyicisiyle sürülür (yalnızca hover:hover varsa kurulur). */
@media (hover: hover) {
  /* K2: eğilme public/efektler.js'te doğrudan inline transform (perspective + rotateX/Y) olarak uygulanır,
     buraya taban transform konmaz (position:fixed içerik olursa yeni bir kapsayan blok yaratmasın diye). */
  /* K4: kenar boyunca lime çizgi, sol-üstten başlayıp saat yönünde çizilir */
  .card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--lime); clip-path: inset(0 100% 100% 0); transition: clip-path 0.45s ease; pointer-events: none; }
  .card:hover::after { clip-path: inset(0 0 0 0); }
  /* K5: imlecin altında hafif lime ışık; .card-body'nin kendi zemini yok, alttan süzülür (görsel alanı .card-media
     kendi zemini yüzünden etkilenmez, bu istenen: ışık yalnızca metin alanında görünür). */
  .card-body { position: relative; }
  .card-body::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient(160px circle at var(--eff-mx, 50%) var(--eff-my, 50%), color-mix(in srgb, var(--lime) 20%, transparent), transparent 65%); transition: opacity 0.25s ease; pointer-events: none; }
  .card:hover .card-body::before { opacity: 1; }
  .card-body > * { position: relative; z-index: 1; }
}

/* H2 — bütçe seçicideki (Ayda X TL) hap satırında kayan seçim zemini; span public/efektler.js'te bir kez
   eklenir, tıklanan hapın altına kayar. Hapların KENDİ arka planı bu durumda kapanır (glider onun yerine geçer). */
.budget-seg { position: relative; }
.eff-glide { position: absolute; top: 5px; bottom: 5px; left: 0; border-radius: 999px; background: var(--lime); z-index: 0; transition: left 0.3s cubic-bezier(0.3, 0.7, 0.4, 1), width 0.3s cubic-bezier(0.3, 0.7, 0.4, 1); pointer-events: none; }
.budget-seg.eff-h2 .budget-pill { position: relative; z-index: 1; }
.budget-seg.eff-h2 .budget-pill[aria-pressed='true'] { background: transparent; color: #0f100d; }

/* H4 — "Kartın hangisi?" kutuları: köşede büyük soluk baş harf, üzerine gelince kayıp koyulaşır (public/card-shortcuts.js
   data-init ekliyor). Öne çıkan (koyu) kutuda da çalışır, kendi renk paletiyle. */
.card-tile.eff-h4 { overflow: hidden; }
.card-tile.eff-h4::before { content: attr(data-init); position: absolute; right: -6px; bottom: -14px; font: 800 72px var(--display); line-height: 1; color: color-mix(in srgb, var(--text) 8%, transparent); pointer-events: none; z-index: 0; }
.card-tile.eff-h4.card-tile-ink::before { color: color-mix(in srgb, var(--night-text) 10%, transparent); }
.card-tile.eff-h4 > * { position: relative; z-index: 1; }
@media (hover: hover) {
  .card-tile.eff-h4::before { transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.4, 1), color 0.4s; }
  .card-tile.eff-h4:hover::before { transform: translate(-6px, -6px) rotate(-6deg); color: color-mix(in srgb, var(--lime) 55%, transparent); }
}

/* R1 — sayaç: hero düğmesindeki ürün sayısı (public/efektler.js IntersectionObserver, tek örnek). SSR'daki
   gerçek sayı her zaman b içinde yazılı kalır; JS yalnızca görünüme girince sıfırdan sayar. */
.eff-count { font-variant-numeric: tabular-nums; }

/* R3 — "= peşin fiyat" damgası: Hesapla kutusundaki mark ve günün fırsatı fişindeki hap; görünüme girince
   bir kez "PAT" diye oturur (public/efektler.js, tek IntersectionObserver). */
.eff-stamp { display: inline-block; }
.eff-stamp.eff-stamp-go { animation: eff-stamp 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
@keyframes eff-stamp { 0% { transform: scale(2.1) rotate(-8deg); opacity: 0; } 70% { transform: scale(0.94) rotate(1deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
/* "Günün fırsatı" fişindeki hap zaten kendi eğimiyle durur (--tilt, bkz. styles.css .receipt-pill); PAT
   animasyonunun son karesi o eğimi 0'a döndürmesin diye burada ayrıca tanımlanır. */
.receipt-pill.eff-stamp.eff-stamp-go { animation-name: eff-stamp-pill; }
@keyframes eff-stamp-pill {
  0% { transform: scale(2.1) rotate(-8deg); opacity: 0; }
  70% { transform: scale(0.94) rotate(calc(-2deg - var(--tilt, 1.5deg))); opacity: 1; }
  100% { transform: scale(1) rotate(calc(-2deg - var(--tilt, 1.5deg))); }
}

/* ===================== Vitrin 2 ===================== */

/* A1 — üstteki arama kutusu: odaklanınca lime halka. 27 Eylül'de sahip genişleme de istedi: masaüstünde (≥900 px)
   kutu küçük başlar (~240 px), tıklanınca/odaklanınca (:focus-within tıklamayı da kapsar) mevcut tam genişliğine
   (styles.css'teki flex:1/max-width:520px) yumuşakça büyür. flex-basis (flex-grow/shrink değil, o oransal ve
   animasyona uygun değil) geçişli; --topbar-h yüksekliğe bakar, genişlik değişikliği onu etkilemez. Telefonda
   (styles.css .search order/flex-basis:100% kuralı) dokunulmadı. */
.search input:focus { border-color: var(--lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lime) 45%, transparent); }
@media (min-width: 900px) {
  /* flex-grow SABİT 0 tutulur: grow açılsaydı boşluk anında (transitionsuz) alınır, geçiş atlardı — büyüme
     tamamen flex-basis'in geçişine bağlı kalsın diye grow hiç değişmiyor. */
  .search { flex: 0 0 240px; transition: flex-basis 0.35s cubic-bezier(0.3, 0.7, 0.4, 1); }
  .search:focus-within { flex-basis: 520px; }
}

/* A2 — arama önerileri iner: liste her açıldığında (innerHTML yeniden yazıldığında) satırlar sırayla üstten iner. */
.suggest:not([hidden]) li { animation: eff-drop 0.22s cubic-bezier(0.3, 0.7, 0.4, 1) both; }
.suggest:not([hidden]) li:nth-child(n + 2) { animation-delay: 0.03s; }
.suggest:not([hidden]) li:nth-child(n + 3) { animation-delay: 0.06s; }
.suggest:not([hidden]) li:nth-child(n + 4) { animation-delay: 0.09s; }
.suggest:not([hidden]) li:nth-child(n + 6) { animation-delay: 0.12s; }
@keyframes eff-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* A3 (kaldırıldı, 27 Eylül 2026): "Kendi tutarın" −/+ düğmeleri kalktı, kutu artık hap satırında (bkz.
   .budget-pill-custom aşağıda "Bütçe seçici" bölümünde). .eff-bump keyframe'i E3 ile paylaşıldığı için kalır. */
.eff-bump { animation: eff-bump 0.25s; }
@keyframes eff-bump { 50% { transform: translateY(-2px); color: var(--lime-text); } }

/* A4 — hesap ayarlarındaki bildirim tercihleri: yaylı anahtar görünümü (native checkbox erişilebilirliği korunur,
   yalnızca görünüm CSS'le değişir; :has() desteklemeyen tarayıcıda normal onay kutusu olarak kalır).
   27 Eylül düzeltmesi: üst hizadaki (align-items:flex-start miras) anahtar etiketle dikey hizasızdı, kapalı
   zemin (--line) neredeyse görünmüyordu — anahtar etiketle ortalandı, kapalı zemin --muted'e çıkarıldı. */
.check.eff-switch { cursor: pointer; align-items: center; }
.check.eff-switch input[type='checkbox'] { position: relative; appearance: none; width: 44px; height: 26px; flex: none; margin: 0; border-radius: 999px; background: var(--muted); cursor: pointer; transition: background-color 0.25s; }
.check.eff-switch input[type='checkbox']::before { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1); }
.check.eff-switch input[type='checkbox']:checked { background: var(--lime); }
.check.eff-switch input[type='checkbox']:checked::before { transform: translateX(18px); }
.check.eff-switch input[type='checkbox']:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* D1 — "Neden bu puan?" akordeonu artık burada değil: ::details-content tabanlı eski kural Safari'de hiç
   çalışmıyordu ve Chrome'da da düzgün açılmıyordu; yerine public/efektler.js'teki WAAPI yükseklik animasyonu
   geldi (initScoreWhyAnim). .ph-table / .paychart-table (birden çok kardeş öğe, ölçülecek tek kapsayıcı yok)
   normal <details> davranışında kaldı — zaten sorun bildirilmedi. */

/* D3 — menü ikonu X'e döner (üç çizgi → çarpı); public/index.html'de path yerine 3 line, menu.js zaten
   aria-expanded'ı değiştiriyor, burada yalnızca CSS. */
.menu-btn svg .eff-l1, .menu-btn svg .eff-l3 { transition: transform 0.3s ease; transform-origin: center; }
.menu-btn svg .eff-l2 { transition: opacity 0.2s ease; }
.menu-btn[aria-expanded='true'] svg .eff-l1 { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded='true'] svg .eff-l2 { opacity: 0; }
.menu-btn[aria-expanded='true'] svg .eff-l3 { transform: translateY(-5px) rotate(-45deg); }

/* S1 — rehber sayfalarında okuma çubuğu (public/efektler.js, .topbar'ın altına sabitlenir). */
.eff-readbar { position: fixed; left: 0; top: var(--topbar-h, 0px); height: 3px; width: 100%; z-index: 25; pointer-events: none; }
.eff-readbar > span { display: block; height: 100%; width: 100%; background: var(--lime); transform: scaleX(0); transform-origin: left; will-change: transform; }

/* S3 — ana sayfa bölümleri kaydırınca belirir: JS yalnızca ekranın epey altındaki (ilk boyamada görünmeyen)
   bölümlere .eff-reveal ekler; görünürdekiler ASLA gizlenmez (public/efektler.js). */
.eff-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s cubic-bezier(0.3, 0.7, 0.4, 1), transform 0.5s cubic-bezier(0.3, 0.7, 0.4, 1); }
.eff-reveal.eff-in { opacity: 1; transform: none; }

/* S4 — ana sayfadaki yatay ürün sıraları (.rail-track): sağ kenar solması (kaydırma zaten snap ile vardı). */
.rail-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }

/* T1 — bütçe seçicinin altında kaydırıcı (markup public/parts.js). Kutu/link güncellemesi ve 100 TL'ye
   yuvarlama artık public/butce.js bindBudgetPicker() içinde (27 Eylül 2026, hap satırındaki yazılabilir
   kutuyla birleştirildi — tek yerde tutulup çakışma olmasın diye). */
.eff-range-row { margin: 4px 0 14px; }
.eff-range-row input[type='range'] { width: 100%; accent-color: var(--lime); }
.eff-range-row .eff-range-label { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--night-muted); font-family: var(--mono); margin-bottom: 4px; }

/* T2 — ödeme takvimi noktaları sırayla yanar: ürün sayfasındaki sade ödeme takvimi (public/odeme-takvimi.js)
   artık 12 kutulu ay takvimi değil, tek satır + ince taksit şeridi (.paycal .strip) gösteriyor (27 Eylül,
   sahibin sadeleştirmesi). "Sırayla yanma" hissi bu şeride uygulandı: public/ux.js'teki mevcut R2 mekanizması
   (animateStrips, strip-wait/strip-go) genişletilip .paycal .strip de kapsandı — ayrı kod gerekmedi. */

/* E1 — boş durum çizimleri (favoriler, karşılaştırma…) hafifçe süzülür. */
.es-art { display: inline-block; animation: eff-float 3.2s ease-in-out infinite; }

/* E3 — favori / karşılaştırma sayacı değişince zıplar (public/widgets.js .eff-bump ekliyor; keyframe A3'le ortak). */
.cmp-tray-label small.eff-bump { animation: eff-bump 0.3s cubic-bezier(0.3, 1.7, 0.5, 1); }

/* E4 — "Linki kopyala" tike döner (public/widgets.js kısa süre metni değiştirip menüyü sonra kapatıyor). */
[data-copy].eff-copied { color: var(--lime-text); }

/* M1 — hero başlığı ilk yüklemede kelime kelime yükselir (public/efektler.js, yalnızca bir kez). */
.eff-word { display: inline-block; opacity: 0; transform: translateY(14px); }
.eff-word-go .eff-word { animation: eff-word-up 0.45s cubic-bezier(0.3, 0.7, 0.4, 1) forwards; }
@keyframes eff-word-up { to { opacity: 1; transform: none; } }
@keyframes eff-float { 50% { transform: translateY(-6px) rotate(-3deg); } }

/* ===================== Hareketi azalt ===================== */
@media (prefers-reduced-motion: reduce) {
  .btn-lime, .btn-lime:hover, .btn-lime:active:not([disabled]),
  .hero-cta-shine::after,
  .card::after, .card-body::before,
  .eff-glide,
  .card-tile.eff-h4::before,
  .eff-word, .eff-reveal,
  .check.eff-switch input[type='checkbox'],
  .search,
  .es-art { transition: none !important; animation: none !important; transform: none !important; }
  /* Anahtarın topuzu (::before) burada transform'dan muaf: transform açık/kapalı konumu TAŞIYOR (translateX),
     "none!important" onu da silerse iki durum da aynı yerde görünür, anahtar hep "kapalı" gibi kalır — yalnızca
     kayma ANİMASYONU (transition) kapatılır, konumun kendisi (transform) kalır, geçiş anlık olur. */
  .check.eff-switch input[type='checkbox']::before { transition: none !important; animation: none !important; }
  .eff-ripple, .fav.pop::before, .fav.pop::after { display: none !important; }
  .eff-reveal, .eff-word { opacity: 1 !important; }
  .eff-readbar { display: none !important; }
}