/* ══════════════════════════════════════════════════════════════
   Mom & Design — TATLIŞ KATMAN stili (21 Eyl 2026)
   site.css'ten SONRA yüklenir; yalnız üstüne katar. Katman panelden
   kapatılırsa bu dosya hiç yüklenmez (sunucu/gorunum/duzen.js).
   Renkler site.css değişkenlerinden okunur — Tasarım Stüdyosu'nun marka
   rengi değişince kelebek, parıltı ve nakış ipliği onu izler.
   Hareket ilkesi: yumuşak yay (spring) eğrileri, 200-900 ms, asla zıplama.
   ══════════════════════════════════════════════════════════════ */

:root {
  --yay: cubic-bezier(.34, 1.56, .64, 1);          /* hafif aşan yay — "squish" */
  --yumusak: cubic-bezier(.22, .61, .36, 1);
  --yazi-el: "Snell Roundhand", "Apple Chancery", "Savoye LET", "Segoe Script",
             "Dancing Script", "Brush Script MT", "Lucida Handwriting", cursive;
}
html[lang="ar"] { --yazi-el: "Noto Naskh Arabic", "Geeza Pro", "SF Arabic", "Amiri", serif; }

/* ── Sayfalar arası yumuşak geçiş (View Transitions — destekleyen
      tarayıcıda çalışır, diğerleri yok sayar; kırılan hiçbir şey yok). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 160ms; }
::view-transition-new(root) { animation-duration: 260ms; }

/* ── Dokunma tuvali: tüm ekran, tıklamayı ASLA yakalamaz ─────────── */
.tatlis-tuval {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 9990;
}

/* ── Düğmeler: basınca hafif "squish" (yay eğrisi) ─────────────────── */
.dugme, .ikon-dugme, .secenek, .adet-secim button, .sepet-adet button,
.galeri-kucukler button, .kopyala, .bolge-dugme, .sohbet-hizli button {
  transition-property: transform, background, color, box-shadow, border-color, opacity;
  transition-timing-function: var(--yay);
  transition-duration: 320ms;
}
.dugme:active, .ikon-dugme:active, .secenek:active, .adet-secim button:active,
.sepet-adet button:active, .galeri-kucukler button:active, .kopyala:active, .bolge-dugme:active {
  transform: scale(.94); transition-duration: 90ms;
}
.dugme.ana:hover { box-shadow: 0 6px 22px rgba(192, 142, 138, .28); }
.dugme.gul:hover { box-shadow: 0 6px 22px rgba(192, 142, 138, .34); }
.secenek:has(input:checked) { animation: secildi 380ms var(--yay); }
@keyframes secildi { 0% { transform: scale(.96); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* Adet alanı "hop" */
.adet-secim input.hop, .sepet-adet input.hop { animation: hop 320ms var(--yay); }
@keyframes hop { 0% { transform: scale(1); } 45% { transform: scale(1.18); color: var(--gul-koyu); } 100% { transform: scale(1); } }

/* Sepete eklendi: düğme nefes alır, sepet ikonu zıplar */
.dugme.kutla { animation: kutla 620ms var(--yay); }
@keyframes kutla {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(192, 142, 138, .22); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(192, 142, 138, 0); }
}
.dugme.sallan { animation: sallan 420ms var(--yumusak); }
@keyframes sallan { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 55% { transform: translateX(5px); } 80% { transform: translateX(-3px); } }
.sepet-bag.zipla { animation: zipla-sepet 640ms var(--yay); }
@keyframes zipla-sepet { 0% { transform: scale(1); } 30% { transform: scale(1.28) rotate(-8deg); } 60% { transform: scale(.94) rotate(4deg); } 100% { transform: scale(1); } }
.ucan-gorsel {
  position: fixed; z-index: 9991; pointer-events: none; object-fit: cover;
  border-radius: 14px; box-shadow: var(--golge-2); will-change: transform, opacity;
}

/* ⛔ SES DÜĞMESİ SÖKÜLDÜ (22 Eyl 2026, sahibin emri: "sol alttaki sesi kıs
   butonu olmasın"). `.ses-dugme` kuralları ve `--cerez-boy` yerleşimi silindi.
   ⛔ GERİ EKLEME. Sesin site geneli anahtarı Tasarım Stüdyosu'nda kalır. */
@media print { .kelebek-dost, .tatlis-tuval { display: none !important; } }

/* ── Kelebek yoldaş ────────────────────────────────────────────────── */
.kelebek-dost {
  position: fixed; top: 0; left: 0; z-index: 9989; pointer-events: none;
  width: clamp(38px, 5vw, 56px); aspect-ratio: 64 / 48;
  opacity: 0; transition: opacity 600ms var(--yumusak); will-change: transform;
}
.kelebek-dost.gorun { opacity: .96; }
.kelebek-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 6px rgba(120, 80, 76, .18)); }
.kanat { transform-box: fill-box; animation: kanat-cirp 340ms ease-in-out infinite alternate; }
.kanat.sol { transform-origin: 100% 50%; }
.kanat.sag { transform-origin: 0% 50%; animation-direction: alternate-reverse; }
@keyframes kanat-cirp { from { transform: scaleX(1); } to { transform: scaleX(.28); } }
/* Kanat çırpma zıt fazda kalsın: sağ kanat ters yönde başlar (alternate-reverse). */

/* Sayfadaki dekoratif kelebekler hafifçe süzülür (site.css `suzul` karesi) */
.kart-mesaj img, .bos-durum img, .basari-kutu img, .alt-marka img { animation: suzul 7s ease-in-out infinite; }
.bos-durum img { animation-duration: 6s; }
.alt-marka img { animation-duration: 8s; }

/* Logo: üzerine gelince küçük bir selam */
.marka img { transform-origin: 50% 80%; }
.marka:hover img { animation: selam 900ms var(--yumusak); }
@keyframes selam { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-2.2deg); } 60% { transform: rotate(1.8deg); } }

/* ── Güven şeridi ikonları: göründüğünde bir kez canlanır ─────────────
      1 makas (kırpar) · 2 yaprak (sallanır) · 3 kalem (yazar) · 4 dünya (döner) */
.serit-ogesi svg { transform-box: fill-box; transform-origin: 50% 50%; }
.serit-ogesi.gorundu:nth-child(1) svg { animation: kirp 1.3s ease-in-out .35s 1; }
.serit-ogesi.gorundu:nth-child(2) svg { animation: salla 2.4s ease-in-out .35s 1; }
.serit-ogesi.gorundu:nth-child(3) svg { animation: yaz 1.4s ease-in-out .35s 1; }
.serit-ogesi.gorundu:nth-child(4) svg { animation: don 1.9s ease-in-out .35s 1; }
@keyframes kirp { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg) scale(1.08); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(4deg); } }
@keyframes salla { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg) translateY(-2px); } 50% { transform: rotate(7deg); } 75% { transform: rotate(-4deg); } }
@keyframes yaz { 0%,100% { transform: translate(0,0) rotate(0); } 20% { transform: translate(-2px,1px) rotate(-6deg); } 40% { transform: translate(1px,-1px) rotate(3deg); } 60% { transform: translate(-1px,1px) rotate(-4deg); } 80% { transform: translate(2px,0) rotate(2deg); } }
@keyframes don { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
.guven-liste li:hover svg { animation: kalp-at 700ms var(--yay); }
@keyframes kalp-at { 0%,100% { transform: scale(1); } 40% { transform: scale(1.22); } 70% { transform: scale(.95); } }

/* ── Ürün kartı: hafif 3B eğim + gölge ─────────────────────────────── */
.kart-gorsel { transition: transform 360ms var(--yumusak), box-shadow 360ms var(--yumusak); transform-style: preserve-3d; }
.kart:hover .kart-gorsel { box-shadow: var(--golge-2); }
.kart-gorsel img { backface-visibility: hidden; }

/* Filiz bildirimi kelebekle gelir */
.filiz::before { content: "🦋 "; }

/* Küçük görsel şeridi: seçilince nazik parlama */
.galeri-kucukler button.etkin { box-shadow: 0 0 0 3px rgba(192, 142, 138, .18); }

/* ── CANLI NAKIŞ ÖNİZLEMESİ ───────────────────────────────────────────
      Kumaş: ürün rengi (yoksa müslin krem). İplik: seçilen nakış rengi.
      Açık iplik açık kumaşta kaybolmasın diye harflere ince kontur +
      kabartma gölgesi (gerçek nakışın kalınlığı gibi) verilir.         */
.nakis-onizleme {
  --iplik: var(--gul); --kumas: #fbf6ef;
  margin: -.25rem 0 1rem;
}
.nakis-etiket { display: block; font-size: .76rem; color: var(--murekkep-3); margin-bottom: .35rem; letter-spacing: .04em; }
.nakis-kumas {
  position: relative; min-height: 84px; padding: .9rem 1.1rem;
  display: flex; align-items: center; gap: .9rem;
  border-radius: var(--yuvarlak); border: 1px solid var(--cizgi);
  background-color: var(--kumas);
  background-image:
    repeating-linear-gradient(0deg, rgba(60, 40, 30, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(60, 40, 30, .035) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), var(--golge-1);
  transition: background-color 600ms var(--yumusak), box-shadow 320ms var(--yumusak);
  overflow: hidden;
}
.nakis-onizleme.odak .nakis-kumas { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 3px rgba(192, 142, 138, .16), var(--golge-1); }
/* Kumaşın kenarında dikiş izi */
.nakis-kumas::after {
  content: ""; position: absolute; inset: 6px; border-radius: calc(var(--yuvarlak) - 5px);
  border: 1px dashed rgba(120, 80, 76, .22); pointer-events: none;
}
.nakis-motif { flex: 0 0 auto; width: 46px; height: 36px; color: var(--iplik); transition: color 600ms var(--yumusak); }
.nakis-motif svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-dasharray: 3 2.2; }
.nakis-motif ellipse { fill: currentColor; stroke: none; }
.nakis-motif .kanat { animation-duration: 2.6s; animation-timing-function: ease-in-out; }
.nakis-motif .kanat.sag { animation-direction: alternate-reverse; }
@keyframes nakis-kanat { from { transform: scaleX(1); } to { transform: scaleX(.86); } }
.nakis-motif .kanat { animation-name: nakis-kanat; }
.nakis-yazi {
  flex: 1; min-width: 0; font-family: var(--yazi-el); font-size: clamp(1.7rem, 5.2vw, 2.35rem);
  line-height: 1.15; color: var(--iplik); letter-spacing: .01em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; transition: color 600ms var(--yumusak);
  -webkit-text-stroke: .35px rgba(70, 45, 40, .28);
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 1.5px 1px rgba(60, 40, 30, .22);
}
.nakis-onizleme.bos .nakis-yazi { opacity: .42; }
.nakis-harf { display: inline-block; animation: dikis 380ms var(--yay) both; }
.nakis-harf:where(:empty)::after { content: "\00a0"; }
@keyframes dikis {
  0% { opacity: 0; transform: translateY(8px) scale(.7) rotate(-6deg); filter: blur(2px); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.08) rotate(2deg); filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
.nakis-yazi.butun { animation: belir 520ms var(--yumusak) both; }
@keyframes belir { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: blur(0); } }
html[dir="rtl"] .nakis-kumas { flex-direction: row; }

/* ── Ana sayfa hero slaytı: çapraz geçiş + yavaş yakınlaşma (Ken Burns) ── */
.giris .cerceve { position: relative; }
.giris .cerceve .slayt-gorsel {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1500ms var(--yumusak); will-change: opacity, transform;
}
.giris .cerceve .slayt-gorsel.etkin { opacity: 1; animation: yakinlas 8.5s ease-in-out both; }
@keyframes yakinlas { from { transform: scale(1); } to { transform: scale(1.07); } }

/* Ürün kartı kendi kendine döner (telefonda ikinci fotoğraf görünsün) */
.kart.donuk .kart-gorsel img { transition-duration: 1300ms; }
.kart.donuk .kart-gorsel img.ilk { opacity: 0; }
.kart.donuk .kart-gorsel img.ikinci { opacity: 1; }
.kart.donuk .kart-gorsel img { transform: scale(1.045); }

/* ── Az hareket: her şey durur, içerik görünür kalır ───────────────── */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .kelebek-dost, .tatlis-tuval, .ucan-gorsel { display: none !important; }
  .kart-gorsel { transform: none !important; }
  .giris .cerceve .slayt-gorsel.etkin { animation: none; }
  .nakis-harf, .nakis-yazi.butun { animation: none; opacity: 1; transform: none; }
}