/* Hakkımızda: Mobil uygulama ve Yapay zekâ asistanı (Emir, 13.10.2026: web sitesinden hemen sonra, ayrıca vurgulu).
   Film: başlığın altındaki cümle (.altyazi) ve sohbet kutusu (.sohbet); ikisini assets/flovey.js (CM, CA) kurar, yerleştirir ve zamanla sürer.
   Pano (hareketi azalt, betiksiz): .pano-vurgu; filmdeki sahnelerin son hâli, kıpırtısız. Renkler: mobil mercan, asistan orkide. */
:root { --mercan: #FF7A59; --orkide: #DE80FF; }

/* ── Film ─────────────────────────────────────────────── */
/* filmdeki bölüm etiketleri (.etiket, site.css'te mono ve aralıklı büyük harf) burada düz cümle: alt cümleyle aynı yazı */
.metin .etiket { font: 400 14px/1.35 'Archivo', sans-serif; letter-spacing: 0; }
.metin .dugum-adi { font: 500 11px/1.2 'Archivo', sans-serif; letter-spacing: 0; color: rgba(245, 248, 250, .7); }
.altyazi { position: absolute; left: 0; top: 0; font: 400 14px/1.35 'Archivo', sans-serif; color: rgba(245, 248, 250, .74); letter-spacing: 0; visibility: hidden; }

.sohbet { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; box-sizing: border-box; visibility: hidden; overflow: hidden;
  font-family: 'Archivo', sans-serif; line-height: 1.38; color: var(--murekkep); border-radius: 1.1em;
  background: rgba(13, 12, 16, .94); border: 1px solid rgba(222, 128, 255, .3);
  box-shadow: 0 30px 90px -40px rgba(222, 128, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .05); }
.sb-ust { flex: none; display: flex; align-items: center; gap: .6em; padding: .8em 1em .75em; border-bottom: 1px solid rgba(245, 248, 250, .07); font-size: .92em; }
.sb-ust b { font-weight: 600; }
.sb-simge, .pv-sohbet-ust i { width: 1.45em; height: 1.45em; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #F6DCFF 0, var(--orkide) 46%, #7A3BCF 100%); }
.sb-pencere { position: relative; flex: 1; min-height: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 1.4em); mask-image: linear-gradient(transparent, #000 1.4em); }
.sb-akis { position: absolute; inset: 0; }
.sb-m { position: absolute; top: 0; box-sizing: border-box; max-width: 86%; width: max-content; padding: .62em .9em; border-radius: 1.05em; visibility: hidden; }
.sb-kisi, .pv-kisi { right: .85em; background: var(--murekkep); color: #0B0C0F; border-bottom-right-radius: .3em; }
.sb-ai, .pv-ai { left: .85em; background: rgba(222, 128, 255, .11); border: 1px solid rgba(222, 128, 255, .3); border-bottom-left-radius: .3em; }
.sb-nokta { display: flex; gap: .32em; padding: .8em .95em; }
.sb-nokta i { width: .46em; height: .46em; border-radius: 50%; background: var(--orkide); }
.sb-kaydet { display: grid; width: max-content; margin-top: .6em; padding: .38em .95em; border-radius: .7em; background: var(--orkide); color: #16091F; font-weight: 700; font-size: .92em; }
.sb-kaydet > span { grid-area: 1 / 1; text-align: center; }
.sb-kaydet > span + span, .sb-kaydet.kayitli > span:first-child { visibility: hidden; }
.sb-kaydet.kayitli { background: transparent; color: var(--orkide); box-shadow: inset 0 0 0 1px rgba(222, 128, 255, .55); }
.sb-kaydet.kayitli > span + span { visibility: inherit; } /* sohbet gizliyken görünmesin */
.sb-giris { flex: none; display: flex; align-items: flex-end; gap: .6em; margin: .55em .7em .7em; padding: .5em .5em .5em .95em; border-radius: 1.1em; background: rgba(245, 248, 250, .065); }
.sb-yazi { flex: 1; min-width: 0; height: 2.76em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.sb-satir > span:empty::before { content: 'Asistana yazın'; color: rgba(245, 248, 250, .38); }
.sb-imlec { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--orkide); opacity: 0; }
.sb-gonder { flex: none; display: grid; place-items: center; width: 2.15em; height: 2.15em; border-radius: 50%; background: var(--orkide); opacity: .45; }
.sb-gonder svg { width: 1.05em; height: 1.05em; fill: none; stroke: #16091F; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Pano ─────────────────────────────────────────────── */
/* sıra: web sitesi (geniş) → mobil uygulama ve asistan (vurgulu iki sahne) → öbür kartlar */
.pano .pano-formlar { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.pano .pano-formlar > figure { grid-column: span 3; }
.pano .pano-formlar > #pano-referanslar, .pano .pano-formlar > #pano-animasyon, .pano .pano-formlar > #pano-diger { grid-column: span 4; }
.pano .pano-formlar > #pano-web { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 3.5vw; align-items: center; }
.pano #pano-web figcaption b { margin-top: 0; font-size: clamp(26px, 2.6vw, 44px); }
.pano-vurgu { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2vw; }
.pano .pv { margin: 0; }
.pv-sahne { position: relative; display: grid; place-items: center; box-sizing: border-box; height: clamp(460px, 38vw, 580px); padding: 32px; border-radius: 12px; overflow: hidden; background: #0B0D10; }
.pv-mobil .pv-sahne { background: radial-gradient(60% 62% at 50% 46%, rgba(255, 122, 89, .24), transparent 72%), #0B0D10; box-shadow: inset 0 0 0 1px rgba(255, 122, 89, .22); }
.pv-asistan .pv-sahne { background: radial-gradient(62% 70% at 40% 50%, rgba(222, 128, 255, .2), transparent 72%), #0B0D10; box-shadow: inset 0 0 0 1px rgba(222, 128, 255, .22); }
.pano .pv figcaption b { font-size: clamp(24px, 2.2vw, 38px); }
.pano .pv-mobil figcaption b { color: var(--mercan); }
.pano .pv-asistan figcaption b { color: var(--orkide); }
.pano .pv figcaption span { max-width: 34em; margin-top: 10px; font: 400 clamp(15px, 1.05vw, 17px)/1.5 'Archivo', sans-serif; letter-spacing: 0; color: rgba(245, 248, 250, .74); }

/* telefon: ölçüler filmdeki çizimle aynı oranlarda (cqw = ekran genişliği) */
.pv-telefon { box-sizing: border-box; height: 100%; max-height: 500px; aspect-ratio: 9 / 19.5; padding: 3.6% 4.6%; border-radius: 13% / 6%;
  background: #100F0E; box-shadow: inset 0 0 0 1.5px rgba(245, 248, 250, .58), 0 30px 80px -30px rgba(255, 122, 89, .55); }
.pv-ekran { container-type: inline-size; height: 100%; overflow: hidden; border-radius: 9% / 4.2%; padding: 0 7%; box-sizing: border-box; font-family: 'Archivo', sans-serif; color: var(--murekkep); }
.pv-ust { display: flex; align-items: center; gap: 3.5cqw; height: 22cqw; }
.pv-ust b { font-size: 9cqw; font-weight: 700; }
.pv-nokta { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: var(--turan); }
.pv-zil { position: relative; width: 7.6cqw; height: 7cqw; margin-left: auto; border: 1.2cqw solid rgba(245, 248, 250, .55); border-bottom-width: .9cqw; border-radius: 50% 50% 0 0; box-sizing: border-box; }
.pv-zil::after { content: ''; position: absolute; right: -2.8cqw; top: -2.8cqw; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: var(--mercan); }
.pv-bildirim { display: flex; align-items: center; gap: 4.5cqw; margin: 0 -3cqw 4cqw; padding: 4.5cqw; border-radius: 5cqw; background: #242224; box-shadow: inset 0 0 0 1px rgba(255, 122, 89, .55); }
.pv-bildirim i { flex: none; width: 13cqw; height: 13cqw; border-radius: 3cqw; background: var(--mercan); }
.pv-bildirim p { margin: 0; }
.pv-bildirim b, .pv-bildirim span { display: block; }
.pv-bildirim b { font-size: 7.4cqw; font-weight: 700; }
.pv-bildirim span { margin-top: 1cqw; font-size: 6cqw; color: rgba(245, 248, 250, .6); }
.pv-kutular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5cqw; }
.pv-kutular p { margin: 0; padding: 4.5cqw 4cqw; border-radius: 5cqw; background: #1A1918; }
.pv-kutular span, .pv-kutular b { display: block; }
.pv-kutular span { font-size: 6cqw; color: rgba(245, 248, 250, .5); }
.pv-kutular b { margin-top: 2cqw; font-size: 12.5cqw; line-height: 1; font-weight: 800; }
.pv-bas { margin: 9cqw 0 2cqw; font-size: 7.6cqw; font-weight: 700; color: rgba(245, 248, 250, .7); }
.pv-liste { margin: 0; padding: 0; list-style: none; }
.pv-liste li { display: flex; align-items: center; gap: 4.5cqw; height: 20cqw; border-bottom: 1px solid rgba(245, 248, 250, .07); font-size: 7.6cqw; }
.pv-liste li:last-child { border-bottom: 0; }
.pv-liste i { width: 13cqw; height: 13cqw; border-radius: 3cqw; background: #2C2926; }
.pv-liste span { font-weight: 600; color: rgba(245, 248, 250, .85); }
.pv-liste b { margin-left: auto; font-weight: 700; }
.pv-liste .pv-degisti b { color: var(--orkide); }

/* sohbet: filmdeki kutunun sabit hâli */
.pv-sohbet { box-sizing: border-box; width: 100%; max-width: 520px; border-radius: 18px; background: rgba(13, 12, 16, .94); border: 1px solid rgba(222, 128, 255, .3);
  box-shadow: 0 30px 90px -40px rgba(222, 128, 255, .55); font: 400 clamp(14px, 1vw, 16px)/1.42 'Archivo', sans-serif; color: var(--murekkep); }
.pv-sohbet-ust { display: flex; align-items: center; gap: .6em; margin: 0; padding: .85em 1.05em .8em; border-bottom: 1px solid rgba(245, 248, 250, .07); font-size: .92em; }
.pv-sohbet-ust b { font-weight: 600; }
.pv-sohbet ol { display: flex; flex-direction: column; gap: .65em; margin: 0; padding: 1em .9em 1.1em; list-style: none; }
.pv-sohbet li { max-width: 86%; padding: .62em .9em; border-radius: 1.05em; box-sizing: border-box; }
.pv-kisi { align-self: flex-end; }
.pv-ai { align-self: flex-start; }
.pv-kaydet { display: block; width: max-content; margin-top: .6em; padding: .36em .95em; border-radius: .7em; color: var(--orkide); font-weight: 700; font-size: .92em; box-shadow: inset 0 0 0 1px rgba(222, 128, 255, .55); }

@media (max-width: 1200px) {
  .pano .pano-formlar > figure, .pano .pano-formlar > #pano-referanslar, .pano .pano-formlar > #pano-animasyon { grid-column: span 6; }
  .pano .pano-formlar > #pano-diger { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 0 3.5vw; align-items: center; }
  .pano #pano-diger figcaption b { margin-top: 0; }
}
@media (max-width: 860px) {
  .pano-vurgu { grid-template-columns: minmax(0, 1fr); gap: 6vh; margin: 3vh 0 6vh; }
  .pv-sahne { height: auto; min-height: 0; padding: 28px 16px; }
  .pv-telefon { height: auto; width: min(58vw, 230px); }
}
@media (max-width: 760px) {
  .pano .pano-formlar > figure, .pano .pano-formlar > #pano-referanslar, .pano .pano-formlar > #pano-animasyon { grid-column: 1 / -1; }
  .pano .pano-formlar > #pano-web, .pano .pano-formlar > #pano-diger { display: block; }
  .pano #pano-web figcaption b, .pano #pano-diger figcaption b { margin-top: 16px; }
}