/* Kitanda tanıtım — giriş bölümü ve telefon kabuğu (iPhone 17 Pro Max).
   Telefonun İÇİ tanitim-demo.css'tedir; burada yalnız sayfa düzeni ve cihaz vardır. */
.experience-hero {
  position: relative; min-height: calc(100vh - 70px); padding: clamp(24px, 4vh, 56px) 0 clamp(28px, 5vh, 64px);
  overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--border);
  background: radial-gradient(80% 90% at 78% 42%, rgba(117,64,226,.16), transparent 64%), linear-gradient(180deg, rgba(255,255,255,.018), transparent 30%);
}
.experience-orb { position: absolute; border-radius: 999px; filter: blur(90px); pointer-events: none; z-index: -1; }
.experience-orb-a { width: 420px; height: 420px; right: -120px; top: 6%; background: rgba(110,72,232,.20); }
.experience-orb-b { width: 280px; height: 280px; left: -120px; bottom: 0; background: rgba(225,107,240,.09); }
.experience-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(400px, .98fr); align-items: center; gap: clamp(36px, 6vw, 90px); }
.experience-copy { max-width: 640px; }
.experience-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0; color: var(--purple-lt); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.7px; }
.experience-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--purple-lt); box-shadow: 0 0 0 6px rgba(139,92,246,.12); }
.experience-title { margin: 22px 0 0; max-width: 650px; font-family: var(--font-display); font-size: clamp(48px, 5.8vw, 78px); line-height: .96; letter-spacing: -3.2px; font-weight: 800; }
.experience-title span { color: transparent; background: linear-gradient(105deg, #fff 0%, #cfbcff 42%, #9c78ff 76%, #ed8df4 100%); background-clip: text; -webkit-background-clip: text; }
.experience-lead { margin: 24px 0 0; max-width: 580px; color: var(--fg2); font-size: 17.5px; line-height: 1.7; }
.experience-lead b { color: var(--fg1); }

.experience-auto-demo { display: flex; align-items: center; gap: 13px; max-width: 590px; margin-top: 28px; padding: 14px 17px; color: var(--fg1); border: 1px solid rgba(167,135,255,.28); border-radius: 18px; background: linear-gradient(115deg, rgba(123,77,231,.14), rgba(255,255,255,.025)); box-shadow: 0 16px 40px rgba(51,29,102,.14); }
.experience-auto-demo > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.experience-auto-demo b { font-size: 13px; }
.experience-auto-demo small { color: var(--fg3); font-size: 11.5px; line-height: 1.45; }
.auto-demo-pulse { position: relative; flex: 0 0 13px; width: 13px; height: 13px; border-radius: 50%; background: #9d7aff; box-shadow: 0 0 0 7px rgba(157,122,255,.1); }
.auto-demo-pulse::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(184,155,255,.5); border-radius: 50%; animation: autoDemoPulse 1.7s ease-out infinite; }
@keyframes autoDemoPulse { to { transform: scale(1.65); opacity: 0; } }

/* Mod çipleri: telefonun ALTINDA, cihazın dışında (uygulama arayüzü değil). */
.phone-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.phone-modes { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.mode-hint { display: inline-flex; align-items: center; gap: 7px; color: var(--fg3); font-size: 12.5px; font-weight: 600; }
.mode-hint .material-icons-round { font-size: 17px; color: var(--purple-lt); }
.mode-chip { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; color: var(--fg2); border: 1px solid var(--border); background: rgba(255,255,255,.03); font-size: 13px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.mode-chip .material-icons-round { font-size: 17px; }
.mode-chip:hover { color: var(--fg1); border-color: rgba(167,135,255,.4); }
.mode-chip.is-active { color: #fff; border-color: rgba(167,135,255,.55); background: linear-gradient(115deg, rgba(123,77,231,.3), rgba(139,92,246,.12)); }
.experience-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.experience-gestures { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 18px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--fg3); font-size: 12.5px; }
.experience-gestures[hidden] { display: none; }
.experience-gestures li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.experience-gestures .material-icons-round { font-size: 17px; color: var(--purple-lt); }
.experience-gestures b { color: var(--fg2); font-weight: 700; }

/* ── CİHAZ ───────────────────────────────────────────────────────────────── */
.phone-stage { position: relative; width: 100%; height: 972px; }
.phone-aura { position: absolute; inset: 16% 4% 10%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(135,88,255,.24), rgba(90,48,170,.07) 52%, transparent 72%); filter: blur(24px); animation: phoneAura 4.8s ease-in-out infinite; }
@keyframes phoneAura { 50% { transform: scale(1.06); opacity: .82; } }
.iphone-shell {
  --phone-scale: 1;
  position: absolute; top: 0; left: 50%; margin-left: -228px; width: 456px; height: 972px; padding: 8px; box-sizing: border-box; border-radius: 70px;
  transform: scale(var(--phone-scale)); transform-origin: top center;
  background: linear-gradient(145deg, #b8b5c2 0%, #514e59 16%, #dedce4 32%, #55515f 62%, #b6b2bf 82%, #35323c 100%);
  box-shadow: 0 46px 90px rgba(0,0,0,.54), 0 0 0 1px rgba(255,255,255,.24), inset 0 0 0 1px rgba(0,0,0,.8);
}
.iphone-side { position: absolute; z-index: -1; width: 4px; border-radius: 3px 0 0 3px; background: linear-gradient(#a7a4ad, #4f4c55); left: -4px; }
.iphone-side-left-a { top: 142px; height: 58px; }
.iphone-side-left-b { top: 218px; height: 88px; }
.iphone-side-right { left: auto; right: -4px; top: 202px; height: 112px; border-radius: 0 3px 3px 0; }
:root[data-flavor="light"] .experience-title span { background-image: linear-gradient(105deg, #1d1730, #6e42d8 58%, #bd4bc9); }
:root[data-flavor="light"] .iphone-shell { box-shadow: 0 42px 90px rgba(64,45,105,.24), 0 0 0 1px rgba(25,20,35,.18); }
@media (max-width: 980px) {
  .experience-hero { padding-top: 48px; }
  .experience-grid { grid-template-columns: 1fr; text-align: center; }
  .experience-copy { max-width: 720px; margin: 0 auto; }
  .experience-title, .experience-lead, .experience-auto-demo { margin-left: auto; margin-right: auto; }
  .experience-auto-demo { text-align: left; }
  .experience-actions { justify-content: center; }
  .experience-gestures { max-width: 560px; margin-left: auto; margin-right: auto; text-align: left; }
  .phone-col { order: -1; width: 100%; }
}
/* "Dokun ve dene": yalnız mobil önizlemede görünür (fitPhone gösterir). */
.phone-open { display: none; }

@media (max-width: 560px) {
  html, body { scrollbar-width: none; }
  /* `overflow: visible` + `right/left: -120px` duran dekoratif küreler
     sayfayı 120px yatayda taşırıyordu; telefonda kürelerin görsel katkısı
     yok, gizleniyorlar ve kabuk yine kesiyor. */
  .experience-hero { min-height: 0; padding: 0 0 56px; overflow: hidden; }
  .experience-orb { display: none; }
  .experience-grid { width: 100%; max-width: none; display: flex; flex-direction: column; margin: 0; padding: 0; gap: 0; }

  /* SIRA DÜZELTMESİ: 980px bloğundaki `.phone-col { order: -1 }` maketi
     başlığın ÖNÜNE alıyordu; telefonda sayfa bağlamsız bir telefon resmiyle
     açılıyor, başlık/metin/CTA hiç görünmüyordu. DOM sırası zaten doğru. */
  .experience-copy { order: 0; width: 100%; max-width: none; padding: 40px 20px 0; text-align: center; box-sizing: border-box; }
  .phone-col { order: 1; width: 100vw; margin-top: 26px; }

  /* Maket artık ekranı yemiyor: yüksekliği fitPhone sınırlıyor. */
  .phone-stage { width: 100vw; margin: 0; height: 62svh; max-height: 640px; }
  .phone-modes { margin: 14px 0 6px; }
  .phone-aura, .iphone-side { display: none; }
  .iphone-shell { width: 440px; height: 956px; margin-left: -220px; padding: 0;
    border-radius: 58px; background: #0c0b0f;
    box-shadow: 0 18px 44px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.10); }
  /* Çerçeve ile ekran AYNI yarıçapta: eskiden burada ikisi de 30px'ti ama
     ekranın kuralı sonra yüklenen tanitim-demo.css'teki 62px'e yeniliyordu;
     çerçeve çizgisi 30'da, ekran 62'de kalınca alt köşelerde koyu boşluk
     açılıyordu. Seçici bilerek bir basamak özgül. */
  .iphone-shell .iphone-screen { border-radius: 58px; }
  :root[data-flavor="light"] .iphone-shell {
    box-shadow: 0 18px 44px rgba(64,45,105,.20), 0 0 0 1px rgba(25,20,35,.16); }

  /* Önizlemede maket DOKUNMA ALMAZ: sayfa normal kaydırılır. Tam ekrana
     yalnız ortadaki düğmeyle girilir. */
  .phone-stage.is-preview .iphone-shell { pointer-events: none; }
  .phone-stage.is-preview .phone-open {
    position: absolute; inset: 0; z-index: 4; display: flex;
    align-items: flex-end; justify-content: center; padding: 0 0 16px;
    width: 100%; border: 0; background: transparent; cursor: pointer;
    -webkit-tap-highlight-color: transparent; }
  .phone-stage.is-preview .phone-open > span {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 48px; padding: 0 20px; border-radius: 999px;
    color: #fff; font-size: 15px; font-weight: 700;
    border: 1px solid rgba(255,255,255,.22); background: rgba(18,14,30,.74);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px rgba(0,0,0,.40); }

  /* Tam ekranda çerçeve tamamen kalkar — gerçek arayüz. */
  /* KÖŞELER (2026-09-23, kullanıcı ekran görüntüsü): burada radius 0'dı,
     "çerçeve kalkar, maket ekranı kaplar" varsayımıyla. Oysa maket BOYA
     sığdırılıyor (956/440 oranı telefondan uzun); iki yanda ~45px koyu bant
     kalıyor ve kare köşeli maket ekranda asılı bir kâğıt gibi duruyordu.
     Artık gerçek bir iPhone ekranının köşe oranı (~%13, 440 genişlikte 58px;
     ölçekle birlikte küçülür) ve koyu zeminde kenarı seçtiren ince bir çizgi. */
  html.phone-fs .iphone-shell { border-radius: 58px; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 18px 48px rgba(0,0,0,.45); }
  html.phone-fs .iphone-screen { border-radius: 58px; }

  .experience-title { font-size: clamp(38px, 11vw, 52px); letter-spacing: -2px; }
  .experience-lead { font-size: 16px; line-height: 1.65; }
  .experience-actions { display: grid; }
  .experience-actions .btn { justify-content: center; min-height: 48px; }
  .experience-gestures { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .phone-aura, .auto-demo-pulse::after { animation: none; } }

/* İmleç ışığı (kitanda.js cursor-orb) telefonun üstüne binmesin: cihazın üstündeyken kapalı. */
body.phone-hover .cursor-orb { opacity: 0 !important; }

/* ── Ses çipi (telefon dışı) ── */
.mode-chip-sound { margin-left: 0; }
.mode-chip-sound.is-muted { color: var(--fg3); }
.mode-chip-sound.is-teklif { color: var(--fg1); border-color: rgba(139,92,246,.6); background: rgba(139,92,246,.16); }
/* ── Mobil tam ekran: telefon görüntü alanını kaplar, üstte ince çıkış şeridi ── */
.phone-fs-bar { display: none; }
/* TELEFONDA ZIPLAMA (2026-09-23, kullanıcı: "canlı demo telefonda saçmalıyor"):
   sahne 100svh (adres çubuğu AÇIKKEN'ki boy) iken maket window.innerHeight'a
   (çubuk gizlenince büyüyen boy) göre ölçekleniyordu; ikisi ayrışınca maket
   alttan kesiliyor, çubuk her oynadığında yeniden ölçeklenip zıplıyordu.
   Artık sahne 100dvh (gerçek boy) ve ölçek sahnenin ÇİZİLEN boyundan
   hesaplanıyor (tanitim-demo.js fitPhone). Arka sayfa da kaydırılamaz. */
html.phone-fs, html.phone-fs body { overflow: hidden; overscroll-behavior: none; }
html.phone-fs .nav, html.phone-fs .cursor-orb { display: none !important; }
/* max-height:none: önizlemenin 640px tavanı (yukarıdaki mobil kural) tam
   ekranda da geçerli kalıyordu; iPhone'da sahne 714 yerine 640 çiziliyor,
   maket küçülüp altta boş bant kalıyordu (Safari ölçümü 2026-09-23). */
html.phone-fs .phone-stage { position: fixed; inset: 0; z-index: 300; width: 100vw; height: 100vh !important; height: 100dvh !important; max-height: none; margin: 0; background: #0c0b0f; overscroll-behavior: contain; }
html.phone-fs .phone-fs-bar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 16px; color: #fff; font-size: 13px; font-weight: 700; background: #0c0b0f; }
.phone-fs-bar > span { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.72); }
.phone-fs-bar .material-icons-round { font-size: 18px; }
.phone-fs-bar button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 40px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); color: #fff; font-size: 13px; font-weight: 700; }
html.phone-fs .iphone-shell { top: 48px; }
/* Tam ekranda telefonun ataları katman oluşturmasın (reveal: will-change/transform), diğer içerik görünmesin. */
html.phone-fs .phone-col, html.phone-fs .experience-grid, html.phone-fs .experience-hero, html.phone-fs .experience-hero > .wrap { transform: none !important; will-change: auto !important; filter: none !important; opacity: 1 !important; overflow: visible !important; isolation: auto !important; }
html.phone-fs .experience-copy, html.phone-fs .phone-modes, html.phone-fs .experience-orb, html.phone-fs .phone-aura, html.phone-fs .experience-hero ~ *, html.phone-fs .footer, html.phone-fs .nav-drawer { visibility: hidden !important; }
html.phone-fs body { background: #0c0b0f; }
.fs-actions { display: inline-flex; align-items: center; gap: 8px; flex: none; }
#fs-sound, .phone-fs-bar .fs-ikon { min-width: 40px; height: 40px; padding: 0; justify-content: center; }
#fs-sound.is-on { color: #C4B5FD; border-color: rgba(167,135,255,.5); }
/* Demo sessiz başladıysa (otomatik açılış, tarayıcı sesli oynatmaya izin
   vermez) ses düğmesi "Sesi aç" yazısıyla açılır; dokununca simgeye döner. */
.fs-ses-metin { display: none; }
#fs-sound.is-teklif { padding: 0 14px 0 10px; gap: 5px; color: #fff; border-color: rgba(167,135,255,.6); background: rgba(124,58,237,.34); }
#fs-sound.is-teklif .fs-ses-metin { display: inline; }
/* Durdur/oynat: çubuğun solunda, çalarken mor dolu. */
.phone-fs-bar .fs-tour { min-width: 0; flex: 0 1 auto; gap: 5px; padding: 8px 14px 8px 10px; overflow: hidden; }
.phone-fs-bar .fs-tour.is-running { background: #7C3AED; border-color: #7C3AED; }
.fs-tour-metin { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.phone-fs .phone-fs-bar { gap: 8px; padding: 0 10px; }
@media (max-width: 374px) { .phone-fs-bar .fs-ikon { display: none; } }

/* ═══════════════════════════════════════════════════════════════════════
   EŞLEŞME UYUMU — "yüzde neye göre" (2026-09-22)
   Sayılar uydurma değil: lib/servisler/eslesme/eslesme_puani.dart içindeki
   GÖSTERİLEN UYUM ağırlıkları (affinityBookWeight .60 / Genre .30 /
   Proximity .10). Oradaki değer değişirse burası da değişmeli.
   ═══════════════════════════════════════════════════════════════════════ */
.uyum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }
.uyum-kart { position: relative; padding: 26px 24px 24px; }
.uyum-kart .pay { display: flex; align-items: baseline; gap: 8px; }
.uyum-kart .pay b { font-family: var(--font-display); font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -1.5px; }
.uyum-kart .pay span { font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--fg3); }
.uyum-kart h3 { margin: 14px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.uyum-kart p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--fg2); }
/* Ağırlık çubuğu: payın görsel karşılığı, süs değil — genişlik yüzdeye eşit. */
.uyum-bar { height: 4px; margin-top: 18px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; }
:root[data-flavor="light"] .uyum-bar { background: rgba(20,15,40,.09); }
.uyum-bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad-brand); }
.uyum-kart.k-kitap .pay b { color: var(--purple-lt); }
.uyum-kart.k-tur .pay b { color: #8FA8FF; }
.uyum-kart.k-yakin .pay b { color: var(--fg2); }
.uyum-kart.k-yakin .uyum-bar i { background: linear-gradient(90deg, #6366F1, #8B5CF6); }

/* Dürüstlük notları: uyumun NE OLMADIĞINI da söyler. */
.uyum-notlar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }
.uyum-not { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface-2); }
.uyum-not .material-icons-round { flex: none; font-size: 19px; color: var(--purple-lt); }
.uyum-not b { display: block; font-size: 14px; font-weight: 800; }
.uyum-not span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--fg2); }

@media (max-width: 920px) {
  .uyum-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
  .uyum-notlar { grid-template-columns: 1fr; }
  .uyum-kart { padding: 22px 20px; }
  .uyum-kart .pay b { font-size: 38px; }
}