/* Yazılımlar sayfası (tools/yama/yazilimlar.html; üretim projeler.py yazilim_sayfasi; davranış assets/yazilimlar.js).
Bu sayfada referans yok (müşteri adı, logosu, rengi). Sistem haritası: ahtapot kolları gibi dallanan ağaç; üstte Flovey kontrol paneli,
kollarının ucunda ürünlerimizin panelleri (çizgi simgeli), altlarındaki filizlerde işleri. Geniş ekranda harita sağda yapışık kalır;
okunan bölümün kolu, paneli ve yaprakları yanar (.yanik), öbürleri söner (.yz-sahne.secili).
Her bölüm kendi renginde (--yz bölümde tanımlı) ve HTML/CSS ile çizilmiş temsili bir ekranı (.ye) var; ekran görünürken oynar
(.ye.hazir.canli), görünmezken durur. Ekran dışındaki oynayan parçalar (telefon, güvenlik kutuları) [data-oyna] taşır, aynı kuralla.
Varsayılan kurallar SON HÂLDİR: betik yoksa ya da hareketi azaltta harita bütünüyle yanık, ekranlar son karede. */
.yz-sayfa { --yz: #aaa0ff; --yz-cizgi: #1D2730; --yz-soluk: #8D9AA6; --yz-metin: #A6B2BC; }
.katalog-sayfa.yz-sayfa { width: min(1400px, 94%); padding-top: 140px; }
.yz-sayfa a:focus-visible, .yz-sayfa button:focus-visible, .yz-sayfa input:focus-visible { outline: 2px solid var(--turan); outline-offset: 3px; }
/* ---------- giriş + harita + projeler: geniş ekranda iki sütun, harita sağda yapışık ---------- */
.yz-sahne { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: clamp(40px, 4.4vw, 80px); align-items: start; } /* harita okunur büyüklükte: geniş sütun */
.yz-giris { grid-column: 1; grid-row: 1; padding: clamp(10px, 2.4vw, 48px) 0 clamp(40px, 4.4vw, 64px); scroll-margin-top: 120px; } /* altı kısa: bant ilk ekranın altından göz kırpar */
.yz-baslik { margin: 0; font: 600 clamp(44px, 5.4vw, 92px)/.96 'Archivo', sans-serif; font-stretch: 86%; letter-spacing: -.05em; color: #F5F8FA; text-wrap: balance; }
.yz-baslik span { display: block; color: var(--yz); }
.yz-aciklama { max-width: 42ch; margin: clamp(20px, 2vw, 30px) 0 0; color: var(--yz-metin); font: 400 clamp(16px, 1.25vw, 19px)/1.62 'Archivo', sans-serif; text-wrap: pretty; }
.yz-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: clamp(26px, 2.6vw, 38px) 0 0; }
.yz-eylem a { display: inline-flex; align-items: center; gap: 10px; color: #CFE9F8; font: 500 15px/1.2 'Archivo', sans-serif; text-decoration: none; }
.yz-eylem a:hover { color: #fff; }
.yz-eylem .ok { width: 16px; height: 10px; transition: transform .25s var(--egri); } .yz-eylem a:hover .ok { transform: translateX(3px); }
.yz-eylem a.yz-eylem-ana { padding: 13px 18px; border-radius: 12px; background: var(--yz); color: #0C0A1E; font-weight: 600; transition: background-color .25s; }
.yz-eylem a.yz-eylem-ana:hover { background: #C4BCFF; }
.yz-eylem-ana span { transition: transform .25s var(--egri); } .yz-eylem-ana:hover span { transform: translateY(2px); }
/* Flovey ekosistemi şeridi: giriş sütununda açıklamanın altında, dört parça (çizgi simge + ad + tek cümle) */
.yz-eko { max-width: 46ch; margin: clamp(22px, 2.2vw, 32px) 0 0; padding-top: 20px; border-top: 1px solid var(--yz-cizgi); }
.yz-eko h3 { margin: 0 0 14px; color: #F5F8FA; font: 600 16px/1.2 'Archivo', sans-serif; letter-spacing: -.01em; }
.yz-eko ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; margin: 0; padding: 0; list-style: none; }
.yz-eko li { display: flex; align-items: flex-start; gap: 11px; min-width: 0; }
.yz-eko svg { flex: none; width: 24px; height: 24px; margin-top: 1px; fill: none; stroke: var(--yz); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.yz-eko span { display: block; color: var(--yz-metin); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.yz-eko b { display: block; margin-bottom: 2px; color: #E6EDF2; font-weight: 600; }
@media (max-width: 480px) { .yz-eko ul { grid-template-columns: minmax(0, 1fr); } }
/* ---------- "Yapay zekâ destekli" rozeti (projeler.py → yz_rozet; Emir, 15.10.2026) ----------
Tek öğe, her yerde aynı: bulunduğu bölümün renginde (--c: bölümde --yz, teklif kartında --r, "Ve dahası" kutusunda --v) küçük bir hap; solda ışıltı simgesi (süs), yanında yazı.
Başlığın hemen üstünde durur; "Ve dahası" kutularında sahneyi itmesin diye kutunun sol üst köşesine oturur. Hareketsizdir (sayfayı boğmaz). */
.yz-yz { --c: var(--yz); display: flex; align-items: center; gap: 7px; width: fit-content; max-width: 100%; padding: 6px 12px 6px 9px; border: 1px solid color-mix(in oklch, var(--c) 45%, #1B2630); border-radius: 999px;
background: color-mix(in oklch, var(--c) 12%, #0A1015); color: color-mix(in oklch, var(--c) 42%, #fff); font: 600 12.5px/1 'Archivo', sans-serif; letter-spacing: .01em; white-space: nowrap; }
.yz-yz svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.yz-yz-bolum { margin-bottom: 16px; }
.yzt-yz { --c: var(--r); margin: 18px 8px 0; }
.yz-teklif .yzt-yz + .yzt-ad { margin-top: 12px; }
.yz-ts-yz { margin-bottom: 14px; }
.yd-etiket { min-height: 29px; margin-bottom: 10px; } .yd-yz { --c: var(--v); } /* satır dört kutuda da yer tutar: başlıklar aynı hizada */
/* ---------- bant: "Sektörün devlerine, fabrikalara ve restoranlara hizmet veriyoruz." (projeler.py → destek; Emir, 15.10.2026) ----------
Girişin hemen ardından tam genişlikte (iki sütunlu sahnede ikisini de kaplar); Turan mavisi vurgulu, koyu ve opak: geniş ekranda sağdaki yapışık harita bandın arkasından geçer
(yazilimlar.js bant görünürken haritayı söndürür). Üç sütun: çizgi simge, ad, o kesim için yaptığımız yazılımları anan cümle, sayfadaki bölüme bağlantı. Ekrana girince
(.yzd.hazir → .gorundu) başlık ve sütunlar sırayla yükselir, simgeler çizilir; betiksiz ve hareketi azaltta son hâl. */
.yzd { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; margin: 0 0 clamp(60px, 7vw, 110px); padding: clamp(28px, 3.6vw, 60px); overflow: hidden;
border: 1px solid color-mix(in oklch, var(--turan) 30%, #0E161C); border-radius: clamp(20px, 2vw, 28px);
background: radial-gradient(70% 130% at 0% 0%, color-mix(in oklch, var(--turan) 15%, transparent), transparent 70%), radial-gradient(50% 90% at 100% 100%, color-mix(in oklch, var(--turan) 8%, transparent), transparent 70%), #05090C; }
.yzd::before { content: ''; position: absolute; left: 0; top: 0; width: min(100%, 520px); height: 2px; background: linear-gradient(90deg, var(--turan), transparent); }
.yzd-baslik { max-width: 26ch; margin: 0; font: 600 clamp(32px, 4.3vw, 70px)/1 'Archivo', sans-serif; font-stretch: 86%; letter-spacing: -.05em; color: #F5F8FA; text-wrap: balance; }
.yzd-baslik em { font: italic 400 1.06em 'Instrument Serif', serif; letter-spacing: -.01em; color: var(--turan); }
.yzd-sutunlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3.2vw, 56px); margin: clamp(30px, 3.6vw, 56px) 0 0; padding: 0; list-style: none; }
.yzd-sutun { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-top: 26px; border-top: 1px solid #1A252D; background: linear-gradient(var(--turan), var(--turan)) 0 -1px / 44px 2px no-repeat; }
.yzd-simge { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid color-mix(in oklch, var(--turan) 38%, #1B2A33); border-radius: 15px; background: color-mix(in oklch, var(--turan) 9%, #07101A); }
.yzd-simge svg { width: 30px; height: 30px; fill: none; stroke: var(--turan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.yzd .yzd-ad { margin: 20px 0 0; font: 600 clamp(22px, 2.1vw, 32px)/1.1 'Archivo', sans-serif; letter-spacing: -.035em; color: #F5F8FA; }
.yzd-cumle { flex: 1; max-width: 42ch; margin: 10px 0 0; color: #B8C3CC; font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.62; text-wrap: pretty; }
.yzd-bag { margin-top: 18px; color: #DCE6EE; font: 600 14.5px/1.3 'Archivo', sans-serif; text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--turan) 75%, transparent); text-underline-offset: .22em; transition: color .25s; }
.yzd-bag span { display: inline-block; text-decoration: none; transition: transform .25s var(--egri); }
.yzd-bag:hover { color: #fff; } .yzd-bag:hover span { transform: translateY(2px); }
@media (prefers-reduced-motion: no-preference) {
.yzd.hazir .yzd-baslik, .yzd.hazir .yzd-sutun { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--egri), transform .9s var(--egri); transition-delay: calc(.05s + var(--i, 0) * 140ms); }
.yzd.hazir .yzd-sutun { transition-delay: calc(.3s + var(--i) * 140ms); }
.yzd.hazir .yzd-simge path { stroke-dasharray: 1; stroke-dashoffset: 1.06; transition: stroke-dashoffset 1.2s var(--egri) calc(.55s + var(--i) * 140ms); }
.yzd.hazir.gorundu .yzd-baslik, .yzd.hazir.gorundu .yzd-sutun { opacity: 1; transform: none; }
.yzd.hazir.gorundu .yzd-simge path { stroke-dashoffset: 0; }
}
/* ---------- sistem haritası: ahtapot kolları gibi dallanan ağaç (projeler.py → harita) ----------
Flovey kontrol paneli (logo birebir, hiç oynamaz), ondan ürünlerin panellerine uzanan kollar (kökte kalın, uçta ince, vantuzlu,
ürünün renginde), panellerin filizlerinde o ürünün işleri (yapraklar). İki çizim: geniş (760 × 550; dört panel bir sırada,
yapraklar altlarında) ve dar (360 × 716, telefon; dikey ağaç, panel solda, adı ve yaprakları sağında). Ölçüler kap birimiyle
(cqi: haritanın eninin %1'i), yazılar okunur bir alt sınırla. Varsayılan kurallar SON HÂLDİR: her şey çizili ve yanık. Betik ilk
görünüşte büyütür (.cizilecek kalkınca geçişler gecikmeleriyle oynar), sonra .cizildi; ekrandayken .oynar (ışık kollarda akar,
kollar SMIL ile salınır). Okunan bölüm .yanik'larını yakar, öbürleri söner (.yz-sahne.secili). */
.yh { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: max(88px, calc(50vh - 330px)); margin: 0; transition: opacity .5s var(--egri); }
/* geniş ekranda tam genişlikteki bant (.yzd) haritanın önünden geçer: bant görünürken harita söner (yazilimlar.js → .bantta), bant geçince döner */
.yz-sahne.bantta .yh { opacity: 0; pointer-events: none; }
.yh-alan { --cek: 14.47cqi; --pan: 15.79cqi; position: relative; width: min(100%, max(520px, calc((100svh - 180px) * 760 / 550))); margin: 0 auto;
aspect-ratio: 760 / 550; container-type: inline-size; }
.yh-cizim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.yh-dar { display: none; }
.yh-kol, .yh-filiz, .yh-dal { transition: opacity .7s var(--egri); }
/* kol: eti (renk geçişli, kökten uca incelen), altında ışık halesi, üstünde vantuzlar; büyürken maske ile kökten uca açılır */
.yh-et { stroke: var(--renk); stroke-width: 0; stroke-opacity: .5; opacity: .86; transition: opacity .6s, stroke-width .6s var(--egri); }
.yh-hale { fill: none; stroke: var(--renk); stroke-width: 18; stroke-linecap: round; opacity: 0; transition: opacity .6s; }
.yh-vantuz { fill: none; stroke: color-mix(in oklch, var(--renk) 35%, #fff); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0 8.5; opacity: .34; }
.yh-vantuz-kucuk { stroke-width: 2; stroke-dasharray: 0 6; }
.yh-dar .yh-vantuz { stroke-width: 2.2; stroke-dasharray: 0 6.5; } .yh-dar .yh-vantuz-kucuk { stroke-width: 1.5; stroke-dasharray: 0 5; }
.yh-maske { fill: none; stroke: #fff; stroke-width: 44; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(.45, 0, .2, 1) var(--gecik, 0s); }
.yh-akis { fill: none; stroke: color-mix(in oklch, var(--renk) 45%, #fff); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: .04 2; stroke-dashoffset: .04; opacity: 0; }
.yh-dar .yh-akis { stroke-width: 2.6; }
/* filiz, dallar, tomurcuklar */
.yh-sap, .yh-dal-cizgi { fill: none; stroke: color-mix(in srgb, var(--renk, #5C6B78) 55%, #1E2A33); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0;
transition: stroke-dashoffset .9s var(--egri) var(--gecik, 0s), stroke .6s; }
.yh-dal-cizgi { stroke-width: 1.3; }
.yh-tomurcuk { fill: color-mix(in srgb, var(--renk, #8D9AA6) 75%, #fff); transform-box: fill-box; transform-origin: center; transition: scale .5s var(--egri) calc(var(--gecik, 0s) + .45s), fill .6s; }
/* düğümler ve yapraklar: geniş çizimde --x/--y, dar çizimde --dx/--dy (yüzde) */
.yh-dugum, .yh-merkez, .yh-yaprak { position: absolute; left: var(--x); top: var(--y); }
.yh-yapraklar { position: absolute; inset: 0; pointer-events: none; }
/* yaprak: o sitenin işi (süs; metin karşılığı bölümlerdeki "kullanıldığı siteler") */
.yh-yaprak { translate: 0 -52%; font: italic 400 max(16px, 2.5cqi)/1.15 'Instrument Serif', serif; color: color-mix(in srgb, var(--renk, var(--yz)) 30%, #E2E9EE);
white-space: nowrap; clip-path: inset(-.4em -.4em -.4em -.4em); transition: opacity .6s, color .6s, clip-path .8s var(--egri) var(--gecik, 0s); }
.yh-dugum, .yh-merkez { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: inherit;
transition: opacity .7s var(--egri), filter .7s var(--egri); }
.yh-dugum { translate: -50% calc(var(--pan) * 10 / -32); }
/* merkez: logolu çekirdek ve yanında "Flovey / kontrol paneli"; --x/--y çekirdeğin ortası */
.yh-merkez { flex-direction: row; gap: 2.2cqi; text-align: left; translate: calc(var(--cek) / -2) -50%; }
.yh-etiket { display: flex; flex-direction: column; align-items: flex-start; }
.yh-panel { position: relative; display: grid; place-items: center; width: var(--pan); aspect-ratio: 16 / 10; border: 1px solid #263540; border-radius: calc(var(--pan) * .08); background: #0B1217;
box-shadow: 0 calc(var(--pan) * .1) calc(var(--pan) * .2) calc(var(--pan) * -.1) #000; transition: border-color .6s, box-shadow .6s, transform .6s var(--egri); }
.yh-panel::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--renk); box-shadow: 0 0 calc(var(--pan) * .18) calc(var(--pan) * -.03) var(--renk); opacity: 0; pointer-events: none; }
.yh-tuy { position: absolute; left: calc(var(--pan) * .07); top: calc(var(--pan) * .06); display: flex; gap: calc(var(--pan) * .028); }
.yh-tuy i { width: calc(var(--pan) * .036); height: calc(var(--pan) * .036); min-width: 4px; min-height: 4px; border-radius: 50%; background: #2B3741; }
.yh-urun { width: 34%; height: auto; margin-top: calc(var(--pan) * .06); fill: none; stroke: var(--renk); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
filter: drop-shadow(0 0 calc(var(--pan) * .06) color-mix(in oklch, var(--renk) 55%, transparent)); }
.yh-ad { margin-top: 1.3cqi; font: 600 max(15px, 2.37cqi)/1.2 'Archivo', sans-serif; letter-spacing: -.01em; color: #E6EDF2; white-space: nowrap; }
.yh-alt { font: 400 max(14px, 2.24cqi)/1.3 'Archivo', sans-serif; color: #9AA7B2; white-space: nowrap; }
.yh-dugum:hover .yh-panel, .yh-dugum:focus-visible .yh-panel { border-color: color-mix(in oklch, var(--renk) 60%, #263540); transform: translateY(-2px); }
.yh-cekirdek { display: grid; place-items: center; flex: none; width: var(--cek); aspect-ratio: 1; border: 1px solid #1E3546; border-radius: 50%;
background: radial-gradient(circle at 50% 38%, #10212E, #070B0E 72%); box-shadow: 0 0 0 calc(var(--cek) * .08) #00A3E00a, 0 0 calc(var(--cek) * .7) calc(var(--cek) * -.14) #00A3E066; }
.yh-simge { width: 68%; height: auto; overflow: visible; }
.yh-merkez b { font: 700 max(18px, 3.3cqi)/1 'Archivo', sans-serif; letter-spacing: -.02em; color: #F5F8FA; }
.yh-merkez .yh-alt { margin-top: .7cqi; }
.yh-not { max-width: 56ch; margin: 10px auto 0; color: #7D8B97; font-size: 13px; line-height: 1.6; text-align: center; text-wrap: balance; }
/* dar çizim (telefon): dikey ağaç; panelin adı ve yaprakları panelin sağında */
@media (max-width: 639px) {
.yh-alan { --cek: 23.33cqi; --pan: 35.56cqi; aspect-ratio: 360 / 716; }
.yh-genis { display: none; } .yh-dar { display: block; }
.yh-dugum, .yh-merkez, .yh-yaprak { left: var(--dx); top: var(--dy); }
.yh-merkez { gap: 3.6cqi; }
.yh-merkez b { font-size: max(18px, 5.3cqi); }
.yh-ad { position: absolute; left: calc(100% + 3.9cqi); top: -.15em; margin: 0; font-size: max(16px, 4.44cqi); }
.yh-alt { font-size: max(14px, 3.9cqi); }
.yh-yaprak { font-size: max(16px, 4.44cqi); }
}
/* büyüme (betik, ilk görünüş): kollar kökten uca, sonra filizler, dallar ve yapraklar */
.yh.cizilecek .yh-maske, .yh.cizilecek .yh-sap, .yh.cizilecek .yh-dal-cizgi { stroke-dashoffset: 1.05; transition: none; } /* 1.05: uçtaki yuvarlak başlık nokta bırakmasın */
.yh.cizilecek .yh-tomurcuk { scale: 0; transition: none; }
.yh.cizilecek .yh-yaprak { clip-path: inset(-.4em 100% -.4em -.4em); transition: none; }
.yh.cizildi .yh-govde { mask: none; }
/* yanma: genel hâl (hiçbir bölüm okunmuyor ya da betik yok) bütünüyle yanık; bir bölüm okunurken yalnız onu kullananlar */
.yz-sahne.secili .yh-kol:not(.yanik), .yz-sahne.secili .yh-filiz:not(.yanik) { opacity: .16; }
.yz-sahne.secili .yh-dal:not(.yanik) { opacity: .3; }
.yz-sahne.secili .yh-yaprak:not(.yanik) { opacity: .3; }
.yz-sahne.secili .yh-dugum:not(.yanik), .yz-sahne.secili .yh-merkez:not(.yanik) { opacity: .38; filter: saturate(.3); }
.yh-kol.yanik .yh-et, .yh-kol.ustte .yh-et { opacity: 1; stroke-width: 1.6; }
.yh-kol.yanik .yh-hale, .yh-kol.ustte .yh-hale { opacity: .12; }
.yh-filiz.yanik .yh-sap, .yh-dal.yanik .yh-dal-cizgi, .yh-filiz.ustte .yh-sap { stroke: color-mix(in srgb, var(--renk) 85%, #1E2A33); }
.yh-yaprak.yanik, .yh-yaprak.ustte { color: color-mix(in srgb, var(--renk, var(--yz)) 50%, #fff); }
.yh-dugum.yanik .yh-panel, .yh-dugum.ustte .yh-panel { border-color: color-mix(in oklch, var(--renk) 65%, #263540);
box-shadow: 0 0 0 1px color-mix(in oklch, var(--renk) 25%, transparent), 0 calc(var(--pan) * .12) calc(var(--pan) * .28) calc(var(--pan) * -.1) color-mix(in oklch, var(--renk) 55%, transparent); }
/* ışık: çekirdekten çıkıp kol boyunca panele akar, panele varınca kenarı bir an yanar; yalnız ekrandayken (.oynar) */
@media (prefers-reduced-motion: no-preference) {
.yz-sahne.canli:not(.secili) .yh.oynar .yh-akis, .yz-sahne.canli .yh.oynar .yh-kol.yanik .yh-akis { animation: yh-akis 3.6s cubic-bezier(.35, 0, .25, 1) var(--akis, 0s) infinite; }
.yz-sahne.canli:not(.secili) .yh.oynar .yh-dugum .yh-panel::after,
.yz-sahne.canli .yh.oynar .yh-dugum.yanik .yh-panel::after { animation: yh-var 3.6s ease-out var(--akis, 0s) infinite; }
.yz-sahne.canli .yh.oynar .yh-merkez.yanik .yh-cekirdek { animation: yh-nabiz 3.6s ease-in-out infinite; }
}
@keyframes yh-akis { 0% { stroke-dashoffset: .04; opacity: 0; } 8% { opacity: 1; } 84% { opacity: 1; } 96%, 100% { stroke-dashoffset: -1; opacity: 0; } }
@keyframes yh-var { 0%, 82% { opacity: 0; } 90% { opacity: .9; } 100% { opacity: 0; } }
@keyframes yh-nabiz { 50% { box-shadow: 0 0 0 calc(var(--cek) * .15) #00A3E012, 0 0 calc(var(--cek) * .9) calc(var(--cek) * -.14) #00A3E099; } }
/* ---------- proje bölümleri ---------- */
.yz-projeler { grid-column: 1; grid-row: 3; min-width: 0; }
.yz-bolum { min-height: 72vh; padding: clamp(56px, 7vw, 110px) 0; border-top: 1px solid var(--yz-cizgi); scroll-margin-top: 80px; }
.yz-bolum-bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.yz-ad { margin: 0; font: 600 clamp(28px, 2.9vw, 46px)/1.06 'Archivo', sans-serif; letter-spacing: -.04em; color: #F5F8FA; text-wrap: balance; }
.yz-alt { margin: 0; font: italic 400 clamp(21px, 1.9vw, 29px)/1.1 'Instrument Serif', serif; color: var(--yz); }
.yz-ozet { max-width: 36ch; margin: 16px 0 0; font: italic 400 clamp(21px, 1.8vw, 27px)/1.3 'Instrument Serif', serif; color: #DCE6EE; text-wrap: pretty; }
.yz-ekran { margin: clamp(26px, 3vw, 40px) 0 0; container-type: inline-size; }
.yz-ekran figcaption { margin-top: 10px; color: #6F7E8A; font-size: 12px; }
.yz-olgular { display: grid; gap: 10px; max-width: 66ch; margin: 28px 0 0; padding: 0; list-style: none; }
.yz-olgular li { position: relative; padding-left: 22px; color: #C3CDD5; font-size: 15px; line-height: 1.6; text-wrap: pretty; }
.yz-olgular li::before { content: ''; position: absolute; left: 0; top: .76em; width: 11px; height: 2px; border-radius: 1px; background: var(--yz); }
.yz-bolum { background: linear-gradient(var(--yz), var(--yz)) 0 -1px / 56px 2px no-repeat; } /* bölümün rengi: üst çizgide kısa bir parça */
/* CRM hikâyeleri (Akıllı CRM: görüşme sırasında, ay sonunda): her biri kendi renginde (adı ve soldaki ince çizgi), tek cümle ve ekranı */
.yz-hikayeler { display: grid; gap: clamp(44px, 5vw, 72px); margin-top: clamp(30px, 3.4vw, 46px); }
.yz-hikaye { padding-left: clamp(16px, 1.6vw, 22px); border-left: 2px solid color-mix(in oklch, var(--yz) 70%, transparent); scroll-margin-top: 100px; }
.yz-hikaye-ad { margin: 0; font: 600 clamp(26px, 2.4vw, 36px)/1.05 'Archivo', sans-serif; letter-spacing: -.035em; color: var(--yz); }
.yz-hikaye-cumle { max-width: 50ch; margin: 10px 0 0; color: #C3CDD5; font-size: clamp(15px, 1.15vw, 16.5px); line-height: 1.6; text-wrap: pretty; }
.yz-hikaye .yz-ekran { margin-top: 22px; }
/* Flovey Admin'in güvenlik katmanları (.yg): altı kutu; her birinde işini gösteren küçük bir çizim (.yg-c, süs), adı ve tek cümlesi.
Çizimler ekrandayken (data-oyna → .hazir.canli) kendi döngüsünde oynar, kutular kısa arayla; varsayılan hâl son hâldir
(kod girildi, üçüncü rol kilitli, paketler yolda, yeni kayıt düştü, yedek alındı, telefondaki oturum kapatıldı). */
.yg { margin-top: clamp(30px, 3.4vw, 46px); }
.yg-baslik { margin: 0 0 16px; color: #F5F8FA; font: 600 clamp(19px, 1.6vw, 23px)/1.2 'Archivo', sans-serif; letter-spacing: -.02em; }
.yg-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.yg-oge { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 14px 16px 14px 14px; border: 1px solid #18232B; border-radius: 14px; background: #080D11; }
.yg-simge { flex: none; display: grid; place-items: center; width: 72px; height: 54px; border-radius: 11px; background: color-mix(in oklch, var(--yz) 9%, #0B1217);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--yz) 18%, transparent); font-size: 10px; color: #C9D3DB; }
.yg-metin { min-width: 0; }
.yg-metin b { display: block; color: #EEF3F6; font: 600 15.5px/1.3 'Archivo', sans-serif; letter-spacing: -.01em; }
.yg-metin span { display: block; margin-top: 3px; color: #98A6B2; font-size: 13.5px; line-height: 1.45; text-wrap: pretty; }
.yg-c { position: relative; display: block; }
.yg-c svg { overflow: visible; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
/* iki adımlı giriş: altı hanelik kod dolar, onay işareti belirir */
.yg-c-kod { display: grid; grid-template-columns: repeat(6, .62em); gap: .16em; }
.yg-c-kod i { position: relative; height: 1.15em; border: 1px solid #2A3844; border-radius: .22em; background: #081015; }
.yg-c-kod i::after { content: ''; position: absolute; left: 50%; top: 50%; width: .3em; height: .3em; margin: -.15em 0 0 -.15em; border-radius: 50%; background: #F1F5F8; }
.yg-tik { position: absolute; right: -.75em; top: -1.05em; display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: #1F9D61; color: #fff; }
.yg-tik svg { width: .8em; height: .8em; stroke-width: 2; }
/* rol bazlı yetki: üç kişi, üçüncünün anahtarı kapanır ve kilitlenir */
.yg-c-rol { display: grid; gap: .32em; }
.yg-c-rol > span { display: flex; align-items: center; gap: .4em; }
.yg-c-rol i { width: 2.4em; height: .34em; border-radius: 1em; background: #3A4854; } .yg-c-rol .r2 i { width: 1.9em; } .yg-c-rol .r3 i { width: 2.1em; }
.yg-c-rol b { position: relative; width: 1.45em; height: .8em; border-radius: 1em; background: #26323C; }
.yg-c-rol b::after { content: ''; position: absolute; left: .12em; top: .12em; width: .56em; height: .56em; border-radius: 50%; background: #fff; }
.yg-c-rol b.on { background: var(--yz); } .yg-c-rol b.on::after { transform: translateX(.65em); }
.yg-c-rol svg { width: .8em; height: .95em; margin-left: -.05em; stroke: #FCD34D; stroke-width: 1.4; }
/* şifreli bağlantı: iki uç arasında paketler akar, ortada kilit */
.yg-c-hat { display: flex; align-items: center; gap: .3em; }
.yg-c-hat .u1, .yg-c-hat .u2 { flex: none; width: 1.1em; height: 1.4em; border: 1px solid #3A4854; border-radius: .25em; background: #0B1319; }
.yg-c-hat .u2 { height: 1.7em; box-shadow: inset 0 .35em 0 -.2em #3A4854, inset 0 .75em 0 -.2em #0B1319, inset 0 .9em 0 -.2em #3A4854; }
.yg-yol { position: relative; width: 3.4em; height: 1px; background: color-mix(in oklch, var(--yz) 45%, #2A3641); }
.yg-yol i { position: absolute; top: -.18em; left: var(--x); width: .5em; height: .36em; border-radius: .1em; background: var(--yz); box-shadow: 0 0 .5em var(--yz); }
.yg-yol .p1 { --x: 8%; } .yg-yol .p2 { --x: 42%; } .yg-yol .p3 { --x: 76%; }
.yg-kilit { position: absolute; left: 50%; top: 50%; width: .9em; height: 1.05em; margin: -1.45em 0 0 -.45em; stroke: #8FE3B5; stroke-width: 1.4; }
/* işlem kaydı: satırlar yukarı kayar, yeni kayıt altta vurgulu belirir */
.yg-c-kayit { width: 4.8em; height: 3.25em; overflow: hidden; padding: .35em .45em; border: 1px solid #22303A; border-radius: .35em; background: #081015; }
.yg-satirlar { display: grid; gap: .3em; transform: translateY(-.64em); }
.yg-satirlar i { display: block; width: var(--w); height: .34em; border-radius: 1em; background: #33414D; }
.yg-satirlar .yeni { background: var(--yz); box-shadow: 0 0 .5em color-mix(in oklch, var(--yz) 60%, transparent); }
/* günlük yedek: halka dolar, onay işareti */
.yg-c-yedek svg { width: 3.4em; height: 3.4em; }
.yg-halka-z { stroke: #26323C; stroke-width: 2; }
.yg-halka { stroke: var(--yz); stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: center; }
.yg-halka-tik { stroke: #8FE3B5; stroke-width: 1.8; }
/* cihaz ve oturumlar: bilgisayar açık kalır, telefonun oturumu kapanır */
.yg-c-cihaz { display: flex; align-items: flex-end; gap: .5em; }
.yg-lap, .yg-tel { position: relative; border: 1px solid #3A4854; background: #0B1319; }
.yg-lap { width: 2.6em; height: 1.7em; border-radius: .22em .22em 0 0; box-shadow: 0 .3em 0 -.1em #3A4854; }
.yg-tel { width: 1.05em; height: 1.95em; border-radius: .25em; }
.yg-lap i, .yg-tel i { position: absolute; left: 50%; top: 50%; width: .42em; height: .42em; margin: -.21em 0 0 -.21em; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 .5em #4ADE80; }
.yg-tel i { background: #4A5866; box-shadow: none; }
.yg-tel svg { position: absolute; left: 50%; top: -.75em; width: .8em; height: .8em; margin-left: -.4em; stroke: #F87171; stroke-width: 1.8; }
@media (prefers-reduced-motion: no-preference) {
.yg.hazir.canli .yg-c * , .yg.hazir.canli .yg-c *::after { animation-duration: 7s; animation-iteration-count: infinite; animation-fill-mode: backwards; animation-delay: calc(var(--i) * .45s); }
.yg.hazir.canli .yg-c-kod i::after { animation-name: yg-kod; animation-timing-function: var(--egri); }
.yg.hazir.canli .yg-c-kod i:nth-child(2)::after { animation-delay: calc(var(--i) * .45s + .16s); } .yg.hazir.canli .yg-c-kod i:nth-child(3)::after { animation-delay: calc(var(--i) * .45s + .32s); }
.yg.hazir.canli .yg-c-kod i:nth-child(4)::after { animation-delay: calc(var(--i) * .45s + .48s); } .yg.hazir.canli .yg-c-kod i:nth-child(5)::after { animation-delay: calc(var(--i) * .45s + .64s); }
.yg.hazir.canli .yg-c-kod i:nth-child(6)::after { animation-delay: calc(var(--i) * .45s + .8s); }
.yg.hazir.canli .yg-tik { animation-name: yg-tik; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.yg.hazir.canli .yg-c-rol .r3 b { animation-name: yg-rol-b; }
.yg.hazir.canli .yg-c-rol .r3 b::after { animation-name: yg-rol-top; animation-timing-function: var(--egri); }
.yg.hazir.canli .yg-c-rol svg { animation-name: yg-belir; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.yg.hazir.canli .yg-yol i { animation: yg-paket 2.1s linear infinite backwards; } .yg.hazir.canli .yg-yol .p2 { animation-delay: .7s; } .yg.hazir.canli .yg-yol .p3 { animation-delay: 1.4s; }
.yg.hazir.canli .yg-satirlar { animation-name: yg-kayit; animation-timing-function: var(--egri); }
.yg.hazir.canli .yg-satirlar .yeni { animation-name: yg-yeni; }
.yg.hazir.canli .yg-halka { animation-name: yg-halka; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
.yg.hazir.canli .yg-halka-tik { animation-name: yg-belir; }
.yg.hazir.canli .yg-tel i { animation-name: yg-tel-i; }
.yg.hazir.canli .yg-tel svg { animation-name: yg-belir; animation-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
}
@keyframes yg-kod { 0%, 6% { opacity: 0; transform: scale(.3); } 10%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes yg-tik { 0%, 26% { opacity: 0; transform: scale(.3); } 32%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes yg-rol-b { 0%, 26% { background: var(--yz); } 32%, 92% { background: #26323C; } 100% { background: var(--yz); } }
@keyframes yg-rol-top { 0%, 26% { transform: translateX(.65em); } 32%, 92% { transform: none; } 100% { transform: translateX(.65em); } }
@keyframes yg-belir { 0%, 34% { opacity: 0; transform: scale(.4); } 42%, 90% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes yg-paket { 0% { left: -6%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 94%; opacity: 0; } }
@keyframes yg-kayit { 0%, 28% { transform: none; } 36%, 92% { transform: translateY(-.64em); } 100% { transform: none; } }
@keyframes yg-yeni { 0%, 30% { opacity: 0; } 38% { opacity: 1; filter: brightness(1.6); } 50%, 92% { opacity: 1; filter: none; } 100% { opacity: 0; } }
@keyframes yg-halka { 0%, 4% { stroke-dashoffset: 1; } 34%, 92% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 1; } }
@keyframes yg-tel-i { 0%, 30% { background: #4ADE80; box-shadow: 0 0 .5em #4ADE80; } 36%, 92% { background: #4A5866; box-shadow: none; } 100% { background: #4ADE80; box-shadow: 0 0 .5em #4ADE80; } }
/* ---------- Ve dahası (#kapsam): dört yetenek, her biri kendi işini birkaç saniyede gösteren küçük bir sahne ----------
Geniş ekranda tek sıra dört kutu, 1199 px altında iki sütun, telefonda alt alta (stok ve bayi portalı 14.10.2026'da teklif bölümüne geçti). Sahnelerin çizimi ve
hareketi aşağıda ("Ve dahası sahneleri"); metin karşılığı kutunun adı ve tek cümlesi. */
.yz-kapsam { padding-top: clamp(110px, 13vw, 200px); scroll-margin-top: 90px; }
.yd-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 40px; margin-bottom: clamp(26px, 3vw, 44px); }
.yz-kapsam-baslik { margin: 0; font: 600 clamp(42px, 4.8vw, 80px)/.96 'Archivo', sans-serif; font-stretch: 86%; letter-spacing: -.05em; color: #F5F8FA; }
.yz-kapsam-baslik em { font: italic 400 1.06em 'Instrument Serif', serif; letter-spacing: -.01em; color: var(--yz); }
.yd-bas p { max-width: 38ch; margin: 0; color: var(--yz-metin); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; text-wrap: pretty; }
.yd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(320px, 24vw, 362px); gap: clamp(10px, 1vw, 14px); margin: 0; padding: 0; list-style: none;
grid-template-areas: "randevu siparis odeme mobil"; }
.yd-yer { display: flex; min-width: 0; }
.yd-randevu { grid-area: randevu; } .yd-siparis { grid-area: siparis; } .yd-odeme { grid-area: odeme; } .yd-mobil { grid-area: mobil; }
.yd-kutu { --v: var(--yz); --t: 12s; position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #18222A; border-radius: 20px;
background: radial-gradient(90% 60% at 50% 38%, color-mix(in oklch, var(--v) 7%, transparent), transparent 72%), #070B0E; transition: border-color .4s var(--egri); }
.yd-kutu:hover, .yd-kutu:focus-visible { border-color: color-mix(in oklch, var(--v) 42%, #18222A); }
.yd-kutu:focus-visible { outline: 2px solid var(--turan); outline-offset: 3px; }
.yd-metin { flex: none; padding: 0 clamp(18px, 1.6vw, 24px) clamp(18px, 1.6vw, 22px); }
.yd-ad { margin: 0; font: 600 clamp(18px, 1.35vw, 21px)/1.2 'Archivo', sans-serif; letter-spacing: -.025em; color: #F5F8FA; }
.yd-cumle { margin: 6px 0 0; color: #A6B2BC; font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.yd-ornek { color: #DCE6EE; text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--v) 70%, transparent); text-underline-offset: .2em; white-space: nowrap; transition: color .25s; }
.yd-ornek:hover { color: #fff; }
.yd-son { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: clamp(24px, 2.6vw, 36px) 0 0; color: var(--yz-metin); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; }
.yd-ozel { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid color-mix(in oklch, var(--yz) 50%, #2B3843); border-radius: 12px;
background: color-mix(in oklch, var(--yz) 12%, #0D151B); color: #F5F8FA; font: 600 14.5px/1.2 'Archivo', sans-serif; text-decoration: none; transition: background-color .25s, border-color .25s; }
.yd-ozel .ok { width: 16px; height: 10px; transition: transform .25s var(--egri); }
.yd-ozel:hover, .yd-ozel:focus-visible { background: color-mix(in oklch, var(--yz) 24%, #0D151B); border-color: var(--yz); }
.yd-ozel:hover .ok { transform: translateX(3px); }
.yz-ilkeler { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 24px clamp(30px, 4vw, 70px); margin-top: clamp(70px, 8vw, 120px); padding-top: 28px; border-top: 1px solid var(--yz-cizgi); }
.yz-ilke-baslik { margin: 0; font: 600 clamp(21px, 1.9vw, 28px)/1.2 'Archivo', sans-serif; letter-spacing: -.025em; color: #F5F8FA; }
.yz-ilkeler ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px clamp(20px, 2.6vw, 44px); margin: 0; padding: 0; list-style: none; }
.yz-ilkeler h4 { margin: 0; font: 600 17px/1.3 'Archivo', sans-serif; letter-spacing: -.015em; color: #F5F8FA; }
.yz-ilkeler p { margin: 8px 0 0; color: #98A6B2; font-size: 14px; line-height: 1.7; text-wrap: pretty; }
/* ---------- Yapabildiğimiz otomasyonlar (#otomasyonlar; #kapsam'ın içinde, kutulardan sonra) ----------
Altı grup, her biri kendi renginde (üst kenarda renkli çizgi, çizgi simge); grup adı ve kısa satırlar, paragraf yok. Ekrana girince
gruplar sırayla belirir, çizgileri soldan uzar (.yot.hazir → .gorundu; betik ve hareket varken). Varsayılan hâl: hepsi görünür. */
.yot { margin-top: clamp(70px, 8vw, 120px); scroll-margin-top: 90px; }
.yot-bas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 40px; margin-bottom: clamp(22px, 2.4vw, 34px); }
.yot-bas h3 { margin: 0; font: 600 clamp(30px, 3.2vw, 50px)/1.02 'Archivo', sans-serif; font-stretch: 90%; letter-spacing: -.045em; color: #F5F8FA; }
.yot-bas p { max-width: 40ch; margin: 0; color: var(--yz-metin); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; text-wrap: pretty; }
.yot-gruplar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1vw, 14px); margin: 0; padding: 0; list-style: none; }
.yot-grup { position: relative; overflow: hidden; padding: 22px 22px 16px; border: 1px solid #18222A; border-radius: 18px;
background: linear-gradient(180deg, color-mix(in oklch, var(--r) 8%, #070B0E), #070B0E 55%); }
.yot-grup::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--r), color-mix(in oklch, var(--r) 20%, transparent)); transform-origin: left; }
.yot-grup h4 { display: flex; align-items: center; gap: 11px; margin: 0 0 10px; color: #F5F8FA; font: 600 18px/1.25 'Archivo', sans-serif; letter-spacing: -.02em; }
.yot-grup svg { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--r); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.yot-grup ul { margin: 0; padding: 0; list-style: none; }
.yot-grup li { padding: 9px 0; border-top: 1px solid #ffffff0b; color: #C3CDD5; font-size: 15px; line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
.yot.hazir .yot-grup { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--egri), transform .6s var(--egri); transition-delay: calc(var(--i) * 90ms); }
.yot.hazir .yot-grup::before { transform: scaleX(0); transition: transform 1s var(--egri) calc(var(--i) * 90ms + .2s); }
.yot.hazir .yot-grup li { opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--egri), transform .5s var(--egri); transition-delay: calc(var(--i) * 90ms + .3s); }
.yot.hazir .yot-grup li:nth-child(2) { transition-delay: calc(var(--i) * 90ms + .37s); } .yot.hazir .yot-grup li:nth-child(3) { transition-delay: calc(var(--i) * 90ms + .44s); }
.yot.hazir .yot-grup li:nth-child(4) { transition-delay: calc(var(--i) * 90ms + .51s); } .yot.hazir .yot-grup li:nth-child(5) { transition-delay: calc(var(--i) * 90ms + .58s); }
.yot.hazir.gorundu .yot-grup, .yot.hazir.gorundu .yot-grup li { opacity: 1; transform: none; }
.yot.hazir.gorundu .yot-grup::before { transform: none; }
}
/* ---------- Teklif ile (#paketler): CRM ve özel yazılım; tutar yok ---------- */
.yz-teklif { margin-top: clamp(100px, 12vw, 190px); scroll-margin-top: 90px; }
.yz-teklif-ust { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 26px; }
.yz-teklif-ust h2 { margin: 0; font: 600 clamp(30px, 3.4vw, 54px)/1.05 'Archivo', sans-serif; letter-spacing: -.045em; color: #F5F8FA; }
.yz-teklif-ust p { max-width: 46ch; margin: 0; color: var(--yz-soluk); font-size: 14.5px; line-height: 1.7; }
.yz-teklif-satirlar { border-top: 1px solid var(--yz-cizgi); }
.yz-ts { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 2fr) minmax(220px, 1.1fr); gap: 16px clamp(24px, 3.4vw, 56px); padding: 30px 0; border-bottom: 1px solid var(--yz-cizgi); scroll-margin-top: 110px; }
.yz-ts:target { animation: yz-vurgu 1.8s var(--egri); }
@keyframes yz-vurgu { 25% { background: color-mix(in oklch, var(--yz) 10%, transparent); box-shadow: inset 3px 0 var(--yz); } }
.yz-ts-ad h3 { margin: 0; font: 600 clamp(26px, 2.4vw, 36px)/1.05 'Archivo', sans-serif; letter-spacing: -.04em; color: #F5F8FA; }
.yz-ts-ad p { margin: 6px 0 0; font: italic 400 21px/1.2 'Instrument Serif', serif; color: var(--yz); }
.yz-ts-metin p { margin: 0; color: #C3CDD5; font-size: 15.5px; line-height: 1.6; }
.yz-ts-metin ul { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.yz-ts-metin li { position: relative; padding-left: 20px; color: #A6B2BC; font-size: 14px; line-height: 1.55; }
.yz-ts-metin li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; border-radius: 1px; background: var(--yz); }
.yz-ts-fiyat strong { display: block; font: 600 clamp(24px, 2.2vw, 32px)/1 'Archivo', sans-serif; letter-spacing: -.035em; color: #fff; }
.yz-ts-fiyat p { margin: 8px 0 18px; color: var(--yz-soluk); font-size: 13px; line-height: 1.55; }
.yz-ts-cta { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid color-mix(in oklch, var(--yz) 50%, #2B3843); border-radius: 12px;
background: color-mix(in oklch, var(--yz) 12%, #0D151B); color: #F5F8FA; font: 600 14px/1.2 'Archivo', sans-serif; text-decoration: none; transition: background-color .25s, border-color .25s; }
.yz-ts-cta::before { content: ''; flex: none; width: 28px; height: 28px; margin: -6px 0 -6px -6px; border-radius: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.4a.5.5 0 0 0 0-.4l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.7 11.7 0 0 0 4.5 4c1.7.7 2.4.8 3.2.6a2.8 2.8 0 0 0 1.8-1.3 2.3 2.3 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E") center / 18px no-repeat #25D366; transition: background-color .25s; }
.yz-ts-cta:hover::before, .yz-ts-cta:focus-visible::before { background-color: #1EBE5A; }
.yz-ts-cta .ok { width: 16px; height: 10px; transition: transform .25s var(--egri); }
.yz-ts-cta:hover, .yz-ts-cta:focus-visible { background: color-mix(in oklch, var(--yz) 24%, #0D151B); border-color: var(--yz); }
.yz-ts-cta:hover .ok { transform: translateX(3px); }
/* --- teklif kartları (#paketler; Yusuf 14.10.2026: eski "Diğer aboneliklerimiz"deki CRM, stok ve B2B): her kart kendi renginde (--r) küçük bir çizimle,
ad, tek cümle, tek eylem; tutar yok (bölümün notu: kurulum + abonelik yapay zekâya ve aylık yönetime göre değişir, fiyat teklif sonrası).
Çizimler görününce bir kez oynar (yazilimlar.js → .yzt-canli; üzerine gelince ya da odakta yeniden); varsayılan kurallar SON hâldir
(betiksiz ve hareketi azaltta bitmiş hâl). Altında Özel yazılım satırı (.yz-ts). */
.yzt { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 16px); margin: 0 0 clamp(36px, 4vw, 56px); padding: 0; list-style: none; }
.yzt-yer { display: flex; min-width: 0; }
.yzt-kart { --r: var(--yz); flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 12px 12px 18px; border: 1px solid color-mix(in srgb, var(--r) 18%, var(--yz-cizgi)); border-radius: 22px;
background: radial-gradient(80% 60% at 50% 0%, color-mix(in srgb, var(--r) 9%, transparent), transparent 70%), #070C10; scroll-margin-top: 110px; transition: border-color .3s; }
.yzt-kart:hover { border-color: color-mix(in srgb, var(--r) 40%, var(--yz-cizgi)); }
.yzt-kart:target { animation: yz-vurgu 1.8s var(--egri); }
.yzt-cizim { position: relative; display: grid; place-items: center; height: 176px; overflow: hidden; border: 1px solid #121B22; border-radius: 15px;
background: radial-gradient(70% 90% at 50% 50%, color-mix(in srgb, var(--r) 12%, transparent), transparent 70%), #05090C; }
.yzt-cizim svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.yzt-cizim p { margin: 0; }
.yz-teklif .yzt-ad { margin: 20px 8px 0; font: 600 clamp(21px, 1.7vw, 26px)/1.1 'Archivo', sans-serif; letter-spacing: -.03em; color: #F5F8FA; text-wrap: balance; }
.yzt-cumle { margin: 10px 8px 0; color: #B8C3CC; font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.yzt-ornek { color: #DCE6EE; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--r) 70%, transparent); text-underline-offset: .2em; white-space: nowrap; transition: color .25s; }
.yzt-ornek:hover { color: #fff; }
.yzt-eylem { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin: auto 8px 0; padding: 0 16px;
border: 1px solid color-mix(in srgb, var(--r) 50%, #22303A); border-radius: 12px; background: color-mix(in srgb, var(--r) 11%, #0A1116);
color: #fff; font: 600 14.5px/1.2 'Archivo', sans-serif; text-decoration: none; transition: background-color .25s, color .25s, border-color .25s; }
.yzt-kart > .yzt-cumle { margin-bottom: 22px; }
.yzt-eylem .ok { flex: none; width: 18px; height: 11px; transition: transform .3s var(--egri); }
.yzt-eylem:hover { border-color: var(--r); background: var(--r); color: #04121A; }
.yzt-eylem:hover .ok { transform: translateX(3px); }
.yzt-eylem:focus-visible { outline: 2px solid var(--r); outline-offset: 3px; }
.yzt-eylem::before { content: ''; flex: none; width: 28px; height: 28px; margin: 0 0 0 -9px; border-radius: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2Zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.4a.5.5 0 0 0 0-.4l-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.1 5.1 0 0 0 1.1 2.7 11.7 11.7 0 0 0 4.5 4c1.7.7 2.4.8 3.2.6a2.8 2.8 0 0 0 1.8-1.3 2.3 2.3 0 0 0 .2-1.3c-.1-.1-.3-.2-.5-.3Z'/%3E%3C/svg%3E") center / 18px no-repeat #25D366; transition: background-color .25s; }
.yzt-eylem:hover::before, .yzt-eylem:focus-visible::before { background-color: #1EBE5A; }
.yzt-eylem { justify-content: flex-start; } .yzt-eylem .ok { margin-left: auto; }
/* CRM: müşteri kartı aşamalardan geçer (Yeni → Teklif → Kazanıldı) */
.yzt-crm { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 300px); padding: 0 12px; }
.yzt-crm-sutun { display: flex; flex-direction: column; gap: 10px; }
.yzt-crm-sutun b { color: #8D9AA6; font: 600 12.5px/1 'Archivo', sans-serif; }
.yzt-crm-sutun:last-of-type b { color: var(--r); }
.yzt-crm-sutun u { display: block; height: 52px; border: 1px solid #18222A; border-radius: 12px; background: #0A1116; }
.yzt-crm-kart { --kol: calc((100% - 24px - 16px) / 3); position: absolute; top: 22.5px; left: calc(12px + 2 * (var(--kol) + 8px)); display: flex; flex-direction: column; justify-content: center; gap: 4px;
width: var(--kol); height: 52px; padding: 0 9px; box-sizing: border-box; border: 1px solid var(--r); border-radius: 12px; background: color-mix(in srgb, var(--r) 16%, #0A1116);
box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--r) 80%, transparent); }
.yzt-crm-kart span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--r); color: #04121A; font: 700 11px/1 'Archivo', sans-serif; }
.yzt-crm-kart em { color: #fff; font: 600 12px/1.1 'Archivo', sans-serif; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yzt-crm-kart svg { position: absolute; right: 7px; top: 7px; width: 16px; height: 16px; color: var(--r); stroke-width: 2.2 !important; }
/* Stok: çubuk çizginin altına iner, uyarı gelir */
.yzt-stok { position: relative; width: 236px; height: 140px; }
.yzt-stok-cubuklar { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; align-items: flex-end; justify-content: center; gap: 16px; height: 96px; }
.yzt-stok-cubuklar i { width: 28px; height: var(--h); border-radius: 7px 7px 3px 3px; background: #1F2C36; }
.yzt-stok-cubuklar .yzt-stok-az { background: var(--r); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--r) 70%, transparent); }
.yzt-stok-esik { position: absolute; left: 14px; right: 14px; bottom: 30%; height: 1.5px; border-radius: 1px; background: color-mix(in srgb, var(--r) 70%, transparent); }
.yzt-stok-uyari { position: absolute; left: 50%; top: 0; display: flex; align-items: center; gap: 8px; padding: 8px 12px; white-space: nowrap; transform: translateX(-50%);
border: 1px solid color-mix(in srgb, var(--r) 60%, #22303A); border-radius: 12px; background: color-mix(in srgb, var(--r) 16%, #0B1218); color: #fff; font: 600 13px/1 'Archivo', sans-serif; }
.yzt-stok-uyari svg { width: 16px; height: 16px; color: var(--r); }
/* B2B: bayinin siparişi panele düşer */
.yzt-b2b { position: relative; width: 262px; height: 140px; }
.yzt-b2b-bayi { position: absolute; left: 0; top: 34px; display: grid; place-items: center; gap: 6px; width: 74px; height: 74px; border: 1px solid #22303A; border-radius: 16px; background: #0B1218; }
.yzt-b2b-bayi svg { width: 26px; height: 26px; color: var(--r); }
.yzt-b2b-bayi b { margin-top: -10px; color: #DCE6EE; font: 600 12px/1 'Archivo', sans-serif; }
.yzt-b2b-panel { position: absolute; right: 0; top: 4px; display: flex; flex-direction: column; gap: 7px; width: 150px; padding: 12px; box-sizing: border-box; border: 1px solid #1E2A33; border-radius: 16px; background: #080D11; }
.yzt-b2b-panel > b { color: #A6B2BC; font: 600 12px/1 'Archivo', sans-serif; }
.yzt-b2b-panel p { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 30px; padding: 0 9px; border: 1px solid #18222A; border-radius: 9px; background: #0A1116; overflow: hidden; }
.yzt-b2b-panel p u { height: 6px; width: 70%; border-radius: 3px; background: #1F2C36; }
.yzt-b2b-panel .yzt-b2b-yeni { border-color: var(--r); background: color-mix(in srgb, var(--r) 14%, #0A1116); }
.yzt-b2b-yeni em { color: #fff; font: 600 12px/1 'Archivo', sans-serif; font-style: normal; white-space: nowrap; }
.yzt-b2b-yeni span { color: var(--r); font: 600 11.5px/1 'Archivo', sans-serif; white-space: nowrap; }
.yzt-b2b-paket { position: absolute; left: 60px; top: 50px; width: 18px; height: 18px; border-radius: 5px; background: var(--r); box-shadow: 0 0 14px color-mix(in srgb, var(--r) 80%, transparent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
.yzt-canli .yzt-crm-kart { animation: yzt-crm 4.8s var(--egri) both; }
.yzt-canli .yzt-crm-kart svg { animation: yzt-gel 4.8s ease both; }
.yzt-canli .yzt-stok-az { animation: yzt-stok 4.8s cubic-bezier(.45, 0, .4, 1) both; }
.yzt-canli .yzt-stok-uyari { animation: yzt-uyari 4.8s var(--egri) both; }
.yzt-canli .yzt-b2b-paket { animation: yzt-paket 4.8s cubic-bezier(.45, 0, .25, 1) both; }
.yzt-canli .yzt-b2b-yeni { animation: yzt-b2b-yeni 4.8s var(--egri) both; }
}
@keyframes yzt-gel { 0%, 62% { opacity: 0; transform: translateY(8px); } 72%, 100% { opacity: 1; transform: none; } }
@keyframes yzt-crm {
0%, 16% { left: 12px; border-color: #2A3742; background: #0F171D; box-shadow: none; }
30%, 46% { left: calc(12px + var(--kol) + 8px); border-color: #3A4A57; background: #0F171D; box-shadow: none; }
62%, 100% { left: calc(12px + 2 * (var(--kol) + 8px)); }
}
@keyframes yzt-stok { 0%, 10% { height: 72%; background: #1F2C36; box-shadow: none; } 50% { height: 32%; background: #1F2C36; box-shadow: none; } 58%, 100% { height: 14%; } }
@keyframes yzt-uyari { 0%, 58% { opacity: 0; transform: translate(-50%, -8px) scale(.94); } 68%, 100% { opacity: 1; transform: translateX(-50%); } }
@keyframes yzt-paket { 0%, 12% { opacity: 0; transform: none; } 18% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translate(70px, -12px); } 58%, 100% { opacity: 0; transform: translate(84px, -14px) scale(.6); } }
@keyframes yzt-b2b-yeni {
0%, 52% { opacity: 0; height: 0; margin-top: -7px; border-width: 0; }
62% { opacity: 1; height: 30px; margin-top: 0; border-width: 1px; box-shadow: 0 0 22px -4px var(--r); }
100% { opacity: 1; height: 30px; margin-top: 0; border-width: 1px; }
}
@media (max-width: 1099px) {
.yzt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yzt-yer:last-child { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
.yzt { grid-template-columns: minmax(0, 1fr); }
}
.yz-diger { padding-top: clamp(50px, 6vw, 80px); }
/* =================== temsili ekranlar (.ye; tools/yama/yazilim-ekranlar.html) ===================
Ölçü em'dir: yazı boyu kabın genişliğinden gelir (cqi), ekran bir resim gibi ölçeklenir. Dar kapta (520 px altı) ikincil
bölmeler gizlenir, yükseklik içerikle büyür. Animasyonlar yalnız .ye.hazir.canli iken (betik, ekran görünür, hareketi azalt kapalı). */
.ye { --ye-zemin: #0A1015; --ye-yuzey: #0D151B; --ye-cizgi: #1A252E; --ye-yazi: #C9D3DB; --ye-soluk: #74828E; --ye-vurgu: var(--yz, #aaa0ff); --ye-koyu: #0C0A1E;
position: relative; display: flex; flex-direction: column; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid #1F2B34; border-radius: 14px; background: var(--ye-zemin);
color: var(--ye-yazi); font: 400 clamp(8.5px, 1.72cqi, 12.5px)/1.35 'Archivo', sans-serif; box-shadow: 0 40px 80px -50px #000; }
.ye svg { overflow: visible; }
.ye-ust { flex: none; display: flex; align-items: center; gap: 1em; height: 3.3em; padding: 0 1.2em; border-bottom: 1px solid var(--ye-cizgi); background: var(--ye-yuzey); white-space: nowrap; }
.ye-ust > b { font-size: 1.08em; font-weight: 600; color: #F1F5F8; }
.ye-govde { flex: 1; min-height: 0; display: flex; }
.ye-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .45em .9em; border-radius: .6em; background: var(--ye-vurgu); color: var(--ye-koyu); font-weight: 600; white-space: nowrap; }
.ye-btn svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ye-girdi { display: flex; flex-direction: column; gap: .45em; padding: .65em .8em; border: 1px solid var(--ye-cizgi); border-radius: .5em; background: #0B1319; }
.ye-girdi i { display: block; width: var(--w); height: .42em; border-radius: 1em; background: #2A3640; }
.ye-alan { display: grid; gap: .35em; } .ye-alan small { color: var(--ye-soluk); font-size: .86em; }
/* --- Flovey Admin: tek giriş (passkey + doğrulama kodu) → paneller arasında geçiş → kaydet, yedek --- */
.ye-iz svg { display: block; width: 2em; height: 1em; fill: none; stroke: #F5F8FA; stroke-width: 1.6; }
.ye-siteler { position: relative; display: inline-grid; align-items: center; min-width: 13em; height: 2.2em; padding: 0 2.2em 0 .9em; border: 1px solid var(--ye-cizgi); border-radius: .6em; background: #0B1319; }
.ye-site { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .55em; color: #EEF3F6; opacity: 0; }
.ye-site i { width: .62em; height: .62em; border-radius: 50%; background: var(--r); box-shadow: 0 0 .8em var(--r); }
.ye-site.s1 { opacity: 1; }
.ye-ok-asagi { position: absolute; right: .8em; width: .7em; height: .45em; fill: none; stroke: var(--ye-soluk); stroke-width: 1.5; }
.ye-oturum { display: inline-flex; align-items: center; gap: .5em; margin-left: auto; color: var(--ye-soluk); }
.ye-oturum svg { width: 1.1em; height: 1.1em; fill: none; stroke: #8FE3B5; stroke-width: 1.4; }
.ye-yan { flex: none; display: grid; align-content: start; gap: .1em; width: 13.5em; margin: 0; padding: .9em .6em; list-style: none; border-right: 1px solid var(--ye-cizgi); }
.ye-yan li { position: relative; display: flex; align-items: center; justify-content: space-between; padding: .5em .7em; border-radius: .5em; color: #94A2AE; }
.ye-yan li i { width: .45em; height: .45em; border-radius: 50%; background: var(--ye-vurgu); }
.ye-yan .y1 { background: #ffffff0b; color: #F1F5F8; }
.ye-ana { flex: 1; min-width: 0; display: grid; align-content: start; gap: .9em; padding: 1.1em 1.4em; }
.ye-satir { display: flex; align-items: center; justify-content: space-between; }
.ye-satir b { font-size: 1.2em; font-weight: 600; color: #F1F5F8; }
.ye-kareler { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5em; }
.ye-kareler i { aspect-ratio: 4 / 3; border: 1px solid var(--ye-cizgi); border-radius: .4em; background: linear-gradient(135deg, #1C2832, #10181E); }
.ye-kareler i:nth-child(2) { background: linear-gradient(135deg, #2A2040, #12101E); } .ye-kareler i:nth-child(4) { background: linear-gradient(135deg, #1D2E28, #0F1814); }
.ye-yedek { display: inline-flex; align-items: center; gap: .5em; width: fit-content; padding: .45em .8em; border-radius: .6em; background: #0F2219; color: #8FE3B5; }
.ye-yedek svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ye-yedek span { margin-left: .8em; color: var(--ye-soluk); text-decoration: underline; text-underline-offset: .2em; }
.ye-giris { position: absolute; inset: 3.3em 0 0; display: grid; place-items: center; background: rgba(6, 9, 12, .9); opacity: 0; visibility: hidden; }
.ye-kart { display: grid; gap: .75em; width: 19em; padding: 1.4em; border: 1px solid #26333E; border-radius: 1em; background: #0D151B; box-shadow: 0 2em 4em -2em #000; }
.ye-kart > b { font-size: 1.25em; color: #F1F5F8; }
.ye-kart small { color: var(--ye-soluk); font-size: .86em; }
.ye-kod { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4em; }
.ye-kod i { position: relative; height: 2.2em; border: 1px solid var(--ye-cizgi); border-radius: .45em; background: #0B1319; }
.ye-kod i::after { content: ''; position: absolute; left: 50%; top: 50%; width: .5em; height: .5em; margin: -.25em 0 0 -.25em; border-radius: 50%; background: #F1F5F8; }
@media (prefers-reduced-motion: no-preference) {
.ye-admin.hazir.canli .ye-giris { animation: ye-giris 16s infinite; }
.ye-admin.hazir.canli .ye-passkey { animation: ye-bas 16s infinite; }
.ye-admin.hazir.canli .ye-kod i::after { animation: ye-kod 16s infinite; }
.ye-admin.hazir.canli .ye-kod i:nth-child(2)::after { animation-delay: .22s; } .ye-admin.hazir.canli .ye-kod i:nth-child(3)::after { animation-delay: .44s; }
.ye-admin.hazir.canli .ye-kod i:nth-child(4)::after { animation-delay: .66s; } .ye-admin.hazir.canli .ye-kod i:nth-child(5)::after { animation-delay: .88s; }
.ye-admin.hazir.canli .ye-kod i:nth-child(6)::after { animation-delay: 1.1s; }
.ye-admin.hazir.canli .ye-site.s1 { animation: ye-s1 16s infinite; } .ye-admin.hazir.canli .ye-site.s2 { animation: ye-s2 16s infinite; }
.ye-admin.hazir.canli .ye-site.s3 { animation: ye-s3 16s infinite; } .ye-admin.hazir.canli .ye-site.s4 { animation: ye-s4 16s infinite; }
.ye-admin.hazir.canli .ye-yan .y1 { animation: ye-y1 16s infinite; } .ye-admin.hazir.canli .ye-yan .y6 { animation: ye-y6 16s infinite; }
.ye-admin.hazir.canli .ye-yan .y8 { animation: ye-y8 16s infinite; } .ye-admin.hazir.canli .ye-yan .y3 { animation: ye-y3 16s infinite; }
.ye-admin.hazir.canli .ye-kaydet { animation: ye-kaydet 16s infinite; }
.ye-admin.hazir.canli .ye-yedek { animation: ye-yedek 16s infinite; }
}
@keyframes ye-giris { 0%, 21% { opacity: 1; visibility: visible; } 25%, 100% { opacity: 0; visibility: hidden; } }
@keyframes ye-bas { 0%, 5% { filter: none; transform: none; } 6.5% { filter: brightness(1.25); transform: scale(.97); } 8%, 100% { filter: none; transform: none; } }
@keyframes ye-kod { 0%, 10% { opacity: 0; transform: scale(.3); } 11.5%, 22% { opacity: 1; transform: none; } 24%, 100% { opacity: 0; } }
@keyframes ye-s1 { 0%, 42% { opacity: 1; } 43.5%, 100% { opacity: 0; } }
@keyframes ye-s2 { 0%, 43% { opacity: 0; } 44.5%, 61% { opacity: 1; } 62.5%, 100% { opacity: 0; } }
@keyframes ye-s3 { 0%, 62% { opacity: 0; } 63.5%, 80% { opacity: 1; } 81.5%, 100% { opacity: 0; } }
@keyframes ye-s4 { 0%, 81% { opacity: 0; } 82.5%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ye-y1 { 0%, 42% { background: #ffffff0b; color: #F1F5F8; } 43.5%, 100% { background: transparent; color: #94A2AE; } }
@keyframes ye-y6 { 0%, 43% { background: transparent; color: #94A2AE; } 44.5%, 61% { background: #ffffff0b; color: #F1F5F8; } 62.5%, 100% { background: transparent; color: #94A2AE; } }
@keyframes ye-y8 { 0%, 62% { background: transparent; color: #94A2AE; } 63.5%, 80% { background: #ffffff0b; color: #F1F5F8; } 81.5%, 100% { background: transparent; color: #94A2AE; } }
@keyframes ye-y3 { 0%, 81% { background: transparent; color: #94A2AE; } 82.5%, 99% { background: #ffffff0b; color: #F1F5F8; } 100% { background: transparent; color: #94A2AE; } }
@keyframes ye-kaydet { 0%, 33% { filter: none; transform: none; } 34.5% { filter: brightness(1.3); transform: scale(.95); } 36%, 100% { filter: none; transform: none; } }
@keyframes ye-yedek { 0%, 35% { opacity: .35; } 37%, 100% { opacity: 1; } }
/* --- Teklif: yeni talep düşer → okundu → PDF teklif hazırlanır → WhatsApp taslağı → e-posta bildirimi --- */
.ye-filtre { padding: .3em .7em; border-radius: .5em; color: var(--ye-soluk); } .ye-filtre.on { background: #ffffff0d; color: #F1F5F8; }
.ye-bildirim { display: inline-flex; align-items: center; gap: .5em; margin-left: auto; padding: .35em .8em; border-radius: .6em; background: #10202B; color: #9FD3F0; }
.ye-bildirim svg { width: 1.2em; height: .9em; fill: none; stroke: currentColor; stroke-width: 1.2; }
.ye-teklif .ye-govde { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ye-talepler { display: grid; align-content: start; gap: .35em; margin: 0; padding: .7em; list-style: none; border-right: 1px solid var(--ye-cizgi); }
.ye-talepler li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .8em; padding: .75em .8em; border: 1px solid transparent; border-radius: .6em; }
.ye-talepler .t1 { border-color: var(--ye-cizgi); background: #ffffff07; }
.ye-durum { width: .62em; height: .62em; border: 1.5px solid #4A5866; border-radius: 50%; }
.ye-talep { min-width: 0; } .ye-talep b { display: block; font-weight: 600; color: #EEF3F6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ye-talep small { display: inline-flex; align-items: center; gap: .35em; color: var(--ye-soluk); font-size: .88em; }
.ye-talep small svg { width: .75em; height: .9em; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; }
.ye-talepler em { font-style: normal; color: var(--ye-soluk); font-size: .88em; white-space: nowrap; }
.ye-etiket { display: grid; justify-items: end; } .ye-etiket > span { grid-area: 1 / 1; padding: .22em .6em; border-radius: .4em; font-size: .84em; white-space: nowrap; }
.e-yeni { background: var(--ye-vurgu); color: var(--ye-koyu); font-weight: 600; opacity: 0; } .e-okundu { border: 1px solid var(--ye-cizgi); color: var(--ye-soluk); }
.ye-pdf { position: relative; display: grid; place-items: center; padding: 1em 1.2em 3.6em; }
.ye-belge { position: relative; display: flex; flex-direction: column; gap: .55em; width: min(62%, 13em); aspect-ratio: 1 / 1.32; padding: 1em; border-radius: .3em; background: #F4F6F8; box-shadow: 0 1.2em 2.4em -1.2em #000; }
.ye-belge-ust { display: flex; align-items: center; justify-content: space-between; padding-bottom: .5em; border-bottom: 2px solid var(--ye-vurgu); }
.ye-damga { width: 2.2em; height: .8em; border-radius: .2em; background: #C9D1D8; } .ye-belge-ust b { color: #1A2229; font-size: .95em; }
.ye-c { display: block; width: var(--w); height: .38em; border-radius: 1em; background: #CDD4DA; }
.ye-tablo { display: grid; gap: .35em; margin-top: .3em; } .ye-tablo i { height: 1.1em; border-radius: .2em; background: #E4E8EC; }
.ye-toplam { display: flex; justify-content: flex-end; align-items: center; gap: .5em; margin-top: auto; }
.ye-toplam i { width: 3em; height: .45em; border-radius: 1em; background: #CDD4DA; } .ye-toplam b { width: 3.6em; height: .7em; border-radius: 1em; background: #1A2229; }
.ye-rozet { position: absolute; right: -1em; top: -.7em; padding: .25em .5em; border-radius: .3em; background: #E5484D; color: #fff; font-size: .78em; font-weight: 700; }
.ye-wa { position: absolute; left: 1em; right: 1.4em; bottom: .9em; display: grid; gap: .45em; padding: .7em .9em; border-radius: .9em .9em .9em .25em; background: #005C4B; color: #E6F7EF; box-shadow: 0 1em 2em -1em #000; }
.ye-dosya { display: inline-flex; align-items: center; gap: .4em; width: fit-content; padding: .3em .6em; border-radius: .5em; background: #ffffff1c; }
.ye-dosya svg { width: .8em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.1; }
@media (prefers-reduced-motion: no-preference) {
.ye-teklif.hazir.canli .t1 { animation: ye-t1 12s infinite var(--egri); }
.ye-teklif.hazir.canli .t1 .ye-durum { animation: ye-t1-durum 12s infinite; }
.ye-teklif.hazir.canli .t1 .e-yeni { animation: ye-t1-yeni 12s infinite; }
.ye-teklif.hazir.canli .t1 .e-okundu { animation: ye-t1-okundu 12s infinite; }
.ye-teklif.hazir.canli :is(.t2, .t3) { animation: ye-kay 12s infinite var(--egri); }
.ye-teklif.hazir.canli .ye-belge { animation: ye-belge 12s infinite var(--egri); }
.ye-teklif.hazir.canli .ye-belge > :is(.ye-c, .ye-tablo, .ye-toplam) { animation: ye-satir 12s infinite; }
.ye-teklif.hazir.canli .ye-belge > .c2 { animation-delay: .15s; } .ye-teklif.hazir.canli .ye-belge > .ye-tablo { animation-delay: .3s; }
.ye-teklif.hazir.canli .ye-belge > .ye-toplam { animation-delay: .45s; }
.ye-teklif.hazir.canli .ye-rozet { animation: ye-rozet 12s infinite cubic-bezier(.3, 1.6, .5, 1); }
.ye-teklif.hazir.canli .ye-wa { animation: ye-wa 12s infinite var(--egri); }
.ye-teklif.hazir.canli .ye-bildirim { animation: ye-bildirim 12s infinite var(--egri); }
}
@keyframes ye-t1 { 0%, 4% { opacity: 0; transform: translateY(-110%); } 9%, 94% { opacity: 1; transform: none; background: #ffffff07; border-color: var(--ye-cizgi); }
10% { background: #aaa0ff1c; border-color: #aaa0ff66; } 100% { opacity: 0; } }
@keyframes ye-t1-durum { 0%, 28% { background: var(--ye-vurgu); border-color: var(--ye-vurgu); } 30%, 100% { background: transparent; border-color: #4A5866; } }
@keyframes ye-t1-yeni { 0%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes ye-t1-okundu { 0%, 28% { opacity: 0; } 30%, 100% { opacity: 1; } }
@keyframes ye-kay { 0%, 4% { transform: translateY(-100%); } 9%, 100% { transform: none; } }
@keyframes ye-belge { 0%, 32% { opacity: 0; transform: translateY(1em) scale(.96); } 37%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ye-satir { 0%, 37% { opacity: 0; transform: translateX(-.5em); } 41%, 100% { opacity: 1; transform: none; } }
@keyframes ye-rozet { 0%, 45% { opacity: 0; transform: scale(.2); } 48%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ye-wa { 0%, 55% { opacity: 0; transform: translateY(1.2em); } 59%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ye-bildirim { 0%, 66% { opacity: 0; transform: translateY(-.6em); } 70%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* --- Çok dil: sayfa × dil; hücreler taslaktan çeviriye, çeviriden yayına; yayın anahtarı; sayfaya özel SEO --- */
.ye-durumlar { display: inline-flex; gap: 1em; color: var(--ye-soluk); font-size: .9em; } .ye-durumlar span { display: inline-flex; align-items: center; gap: .4em; }
.ye-cokdil .ye-btn { margin-left: auto; }
.ye-cokdil { aspect-ratio: 16 / 9.4; }
.ye-cokdil .ye-govde { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.ye-izgara { display: grid; grid-template-columns: minmax(6.6em, 1.7fr) repeat(6, minmax(0, 1fr)) minmax(2.8em, .9fr); align-content: start; align-items: center; justify-items: center; row-gap: .15em; padding: .8em 1em; }
.ye-bas { padding-bottom: .5em; color: var(--ye-soluk); font-size: .84em; }
.ye-bas-sayfa, .ye-sayfa-ad { justify-self: start; }
.ye-sayfa-ad { padding: .7em 0; color: #DCE6EE; white-space: nowrap; }
/* çeviri ilerlemesi: hücrelerden (yayında 1, çeviride ½); temsili */
.ye-ilerleme { grid-column: 1 / -1; justify-self: stretch; display: flex; align-items: center; gap: 1em; margin-top: .9em; padding-top: .9em; border-top: 1px solid var(--ye-cizgi); }
.ye-ilerleme small { color: var(--ye-soluk); font-size: .88em; white-space: nowrap; } .ye-ilerleme b { color: #F1F5F8; font-weight: 600; }
.ye-cubuk { flex: 1; height: .45em; border-radius: 1em; background: #26323C; overflow: hidden; } .ye-cubuk i { display: block; width: 89%; height: 100%; border-radius: inherit; background: var(--ye-vurgu); }
.ye-h { position: relative; display: inline-block; width: 1em; height: 1em; border: 1.5px solid #3A4753; border-radius: 50%; }
.ye-h.c { border-color: var(--ye-vurgu); background: conic-gradient(var(--ye-vurgu) 0 50%, transparent 0); }
.ye-h.y { border-color: var(--ye-vurgu); background: var(--ye-vurgu); }
.ye-anahtar { position: relative; width: 2.1em; height: 1.15em; border-radius: 1em; background: #26323C; }
.ye-anahtar::after { content: ''; position: absolute; left: .15em; top: .15em; width: .85em; height: .85em; border-radius: 50%; background: #8D9AA6; }
.ye-anahtar.on { background: #2E9E66; } .ye-anahtar.on::after { left: 1.1em; background: #fff; }
.ye-seo { display: grid; align-content: start; gap: .55em; padding: 1em; border-left: 1px solid var(--ye-cizgi); }
.ye-seo b { color: #F1F5F8; font-weight: 600; } .ye-dil { color: var(--ye-vurgu); font-size: .9em; } .ye-seo small { color: var(--ye-soluk); font-size: .86em; }
@media (prefers-reduced-motion: no-preference) {
.ye-cokdil.hazir.canli .ye-izgara .ye-h.y { animation: ye-yay 14s infinite; animation-delay: calc(var(--i) * .32s); }
.ye-cokdil.hazir.canli .ye-izgara .ye-h.c { animation: ye-cev 14s infinite; animation-delay: calc(var(--i) * .32s); }
.ye-cokdil.hazir.canli .ye-anahtar.on { animation: ye-anahtar 14s infinite; animation-delay: calc(var(--i) * .32s); }
.ye-cokdil.hazir.canli .ye-anahtar.on::after { animation: ye-dugme 14s infinite; animation-delay: calc(var(--i) * .32s); }
}
@keyframes ye-yay { 0%, 4% { background: transparent; border-color: #3A4753; } 8%, 13% { background: conic-gradient(var(--ye-vurgu) 0 50%, transparent 0); border-color: var(--ye-vurgu); }
17%, 86% { background: var(--ye-vurgu); border-color: var(--ye-vurgu); } 92%, 100% { background: transparent; border-color: #3A4753; } }
@keyframes ye-cev { 0%, 4% { background: transparent; border-color: #3A4753; } 8%, 86% { background: conic-gradient(var(--ye-vurgu) 0 50%, transparent 0); border-color: var(--ye-vurgu); }
92%, 100% { background: transparent; border-color: #3A4753; } }
@keyframes ye-anahtar { 0%, 22% { background: #26323C; } 25%, 86% { background: #2E9E66; } 92%, 100% { background: #26323C; } }
@keyframes ye-dugme { 0%, 22% { left: .15em; background: #8D9AA6; } 25%, 86% { left: 1.1em; background: #fff; } 92%, 100% { left: .15em; background: #8D9AA6; } }
/* dokunuş (ekranlarda): hedefinin ortasında durur, anahtar karelerde oraya gelir ve basar */
.ye-dokun { position: absolute; left: 50%; top: 50%; z-index: 3; width: 1.7em; height: 1.7em; margin: -.85em 0 0 -.85em; border: .12em solid #ffffffd9; border-radius: 50%;
background: #ffffff30; box-shadow: 0 .4em 1em -.3em #000; opacity: 0; pointer-events: none; }
.ye svg, .ye-tel svg { overflow: visible; }
/* yeni ekranlar (asistan, sohbet, Akıllı CRM görüşme ve ay sonu, QR sipariş): yükseklik içerikle, yazı biraz daha büyük (sütunda okunur) */
.ye-ai, .ye-sohbet, .ye-gorusme, .ye-aysonu, .ye-qr { aspect-ratio: auto; font-size: clamp(9.5px, 2.1cqi, 13px); }
.ye-ai .ye-govde { min-height: 23em; } .ye-sohbet .ye-govde { min-height: 22em; } .ye-gorusme .ye-govde { min-height: 25em; } .ye-aysonu .ye-govde { min-height: 19em; } .ye-qr .ye-govde { min-height: 23em; }
.ye-ust svg, .ye-asistan-bas svg, .ye-bulundu-bas svg, .ye-not-bas svg, .ye-dinliyor svg, .ye-oto svg { width: 1em; height: 1em; fill: currentColor; }
.ye-ab-tamam svg, .ye-kk svg, .ye-qt-gitti svg, .ye-hesap-odendi svg, .ye-ab-giris svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* --- Flovey Admin + mobil uygulama: telefon ekranın sağ altına biner; ekranda yeni talep bildirimi düşer, sayı artar --- */
.ye-cift { position: relative; padding: 0 8% 6.5% 0; }
.ye-tel { position: absolute; right: 0; bottom: 0; width: 22%; aspect-ratio: 9 / 18.6; padding: .42em; border-radius: 2.3em; background: #141C23;
box-shadow: inset 0 0 0 1px #2A3742, 0 0 0 .3em #05080B, 0 2em 3em -1.2em #000; color: #C9D3DB; font: 400 clamp(7px, 1.6cqi, 11px)/1.3 'Archivo', sans-serif; }
.ye-tel-ekran { position: relative; display: flex; flex-direction: column; gap: .7em; height: 100%; overflow: hidden; padding: 3em .95em 1em; border-radius: 1.9em; background: #070B0E; }
.ye-tel-centik { position: absolute; left: 50%; top: 1.15em; width: 4.4em; height: 1.2em; margin-left: -2.2em; border-radius: 1em; background: #000; }
.ye-tel-ust { position: absolute; left: 1.6em; right: 1.6em; top: 1.2em; display: flex; align-items: center; justify-content: space-between; }
.ye-tel-ust b { color: #F1F5F8; font-size: .95em; } .ye-tel-ust i { width: 1.6em; height: .7em; border: 1px solid #8D9AA6; border-radius: .2em; box-shadow: inset -.6em 0 0 -.1em #0000, inset .9em 0 0 #8D9AA6; }
.ye-tel-bildirim { display: flex; align-items: center; gap: .6em; padding: .7em .7em; border-radius: 1.1em; background: #16212A; box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ye-vurgu) 40%, transparent), 0 .8em 1.4em -.8em #000; }
.ye-tel-simge { flex: none; width: 2em; height: 2em; border-radius: .55em; background: linear-gradient(135deg, var(--ye-vurgu), #0B6F99); }
.ye-tel-bildirim span { display: grid; gap: .1em; min-width: 0; } .ye-tel-bildirim b { color: #F1F5F8; font-size: .98em; } .ye-tel-bildirim small { overflow: hidden; color: #A6B2BC; font-size: .82em; white-space: nowrap; text-overflow: ellipsis; }
.ye-tel-baslik { margin-top: .3em; color: #F1F5F8; font-size: 1.3em; font-weight: 700; }
.ye-tel-kart { display: flex; align-items: center; justify-content: space-between; padding: .8em .9em; border: 1px solid #1A252E; border-radius: .9em; background: #0E161C; }
.ye-tel-kart small { color: #94A2AE; } .ye-tel-kart > b { display: grid; color: #F1F5F8; font-size: 1.25em; } .ye-tel-kart > b em { grid-area: 1 / 1; font-style: normal; text-align: right; }
.ye-tel-kart .a { opacity: 0; } .ye-tel-kart.k1 { border-color: color-mix(in oklch, var(--ye-vurgu) 35%, #1A252E); } .ye-tel-kart.k1 .b { color: var(--ye-vurgu); }
.ye-tel-sekme { display: flex; justify-content: space-around; margin-top: auto; padding-top: .8em; border-top: 1px solid #1A252E; }
.ye-tel-sekme i { width: 1.5em; height: .34em; border-radius: 1em; background: #2A3640; } .ye-tel-sekme .on { background: var(--ye-vurgu); }
@media (prefers-reduced-motion: no-preference) {
.ye-tel.hazir.canli .ye-tel-bildirim { animation: ye-tel-bildirim 12s var(--egri) infinite; }
.ye-tel.hazir.canli { animation: ye-tel-titre 12s linear infinite; }
.ye-tel.hazir.canli .ye-tel-kart .a { animation: ye-tel-a 12s infinite; } .ye-tel.hazir.canli .ye-tel-kart .b { animation: ye-tel-b 12s var(--egri) infinite; }
}
@keyframes ye-tel-bildirim { 0%, 24% { opacity: 0; transform: translateY(-160%); } 30% { opacity: 1; transform: translateY(.15em); } 33%, 93% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(-40%); } }
@keyframes ye-tel-titre { 0%, 29% { rotate: 0deg; } 30% { rotate: -1.6deg; } 31% { rotate: 1.6deg; } 32% { rotate: -1deg; } 33% { rotate: 1deg; } 34%, 100% { rotate: 0deg; } }
@keyframes ye-tel-a { 0%, 34% { opacity: 1; } 35%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ye-tel-b { 0%, 34% { opacity: 0; transform: translateY(.5em); } 37%, 97% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* --- Yapay zekâ asistanı: yazılan istek → asistan değişikliği taslak olarak yapar, onay sorar → Kaydet → menüde yayında --- */
.ye-ai .ye-govde { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
.ye-asistan-rozet, .ye-dinliyor { display: inline-flex; align-items: center; gap: .4em; margin-left: auto; padding: .3em .7em; border-radius: .6em;
background: color-mix(in oklch, var(--ye-vurgu) 16%, #0D151B); color: var(--ye-vurgu); font-weight: 600; }
.ye-menu-tablo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-auto-rows: auto; align-content: start; column-gap: 1em; padding: .9em 1.1em; border-right: 1px solid var(--ye-cizgi); }
.ye-mt-bas { padding-bottom: .6em; border-bottom: 1px solid var(--ye-cizgi); color: var(--ye-soluk); font-size: .88em; }
.ye-mt-urun, .ye-mt-fiyat, .ye-mt-durum { display: flex; align-items: center; min-height: 3.3em; border-bottom: 1px solid #ffffff09; white-space: nowrap; }
.ye-mt-urun { gap: .7em; color: #EEF3F6; font-weight: 500; }
.ye-mt-resim { flex: none; width: 2.1em; height: 2.1em; border-radius: .5em; background: linear-gradient(135deg, #C98A3B, #6E3A1C); }
.ye-mt-resim.r2 { background: linear-gradient(135deg, #E07A4A, #7A2A18); } .ye-mt-resim.r3 { background: linear-gradient(135deg, #B8432F, #4A1A10); } .ye-mt-resim.r4 { background: linear-gradient(135deg, #EEF3F6, #9FB0BD); }
.ye-mt-fiyat { color: #DCE6EE; font-variant-numeric: tabular-nums; }
.ye-mt-fiyat.ye-mt-hedef, .ye-mt-durum.ye-mt-hedef { display: grid; align-items: center; } .ye-mt-hedef > span { grid-area: 1 / 1; }
.ye-mt-fiyat .f0, .ye-mt-fiyat .f1, .ye-mt-durum .d0, .ye-mt-durum .d1 { opacity: 0; }
.ye-mt-fiyat .f1 { color: #FCD34D; font-weight: 600; } .ye-mt-fiyat .f1 s { margin-right: .45em; color: var(--ye-soluk); font-weight: 400; }
.ye-mt-fiyat .f2 { color: #F1F5F8; font-weight: 600; }
.ye-mt-durum > span > span, .ye-mt-durum > span { justify-self: start; }
.ye-mt-durum .d0, .ye-mt-durum .d1, .ye-mt-durum .d2 { padding: .22em .6em; border-radius: .45em; font-size: .86em; font-weight: 500; }
.ye-mt-durum .d0, .ye-mt-durum .d2 { background: #0F2219; color: #8FE3B5; } .ye-mt-durum .d1 { background: #2A2010; color: #FCD34D; }
.ye-asistan { position: relative; display: flex; flex-direction: column; gap: .7em; min-width: 0; padding: .9em 1em; background: #0B1116; }
.ye-asistan-bas { display: flex; align-items: center; gap: .45em; color: #F1F5F8; font-weight: 600; } .ye-asistan-bas svg { color: var(--ye-vurgu); }
.ye-ab { max-width: 94%; padding: .62em .85em; border-radius: .9em; color: #EEF3F6; line-height: 1.4; }
.ye-ab-sen { align-self: flex-end; border-bottom-right-radius: .25em; background: #1C2933; }
.ye-ab-yazi { display: block; }
.ye-ab-o { align-self: flex-start; border-bottom-left-radius: .25em; background: color-mix(in oklch, var(--ye-vurgu) 15%, #0D151B); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ye-vurgu) 35%, transparent); }
.ye-ab-secim { display: flex; gap: .5em; margin-top: .6em; }
.ye-ab-secim b { position: relative; padding: .32em .85em; border-radius: .5em; font-weight: 600; }
.ye-ab-kaydet { background: var(--ye-vurgu); color: var(--ye-koyu); } .ye-ab-vazgec { box-shadow: inset 0 0 0 1px #2A3844; color: #94A2AE; }
.ye-ab-yer { position: relative; display: flex; flex-direction: column; }
.ye-ab-yaziyor { position: absolute; left: 0; top: 0; display: flex; gap: .28em; padding: .65em .8em; border-radius: .9em; background: #1C2933; opacity: 0; }
.ye-ab-yaziyor i { width: .42em; height: .42em; border-radius: 50%; background: #8D9AA6; }
.ye-ab-tamam { display: inline-flex; align-items: center; gap: .45em; color: #8FE3B5; font-weight: 600; }
.ye-ab-giris { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: .6em .8em; border: 1px solid var(--ye-cizgi); border-radius: .7em; color: var(--ye-soluk); }
@media (prefers-reduced-motion: no-preference) {
.ye-ai.hazir.canli .ye-ab-sen { animation: ye-ai-sen 14s var(--egri) infinite; }
.ye-ai.hazir.canli .ye-ab-yazi { animation: ye-ai-yazi 14s steps(26, end) infinite; }
.ye-ai.hazir.canli .ye-ab-yaziyor { animation: ye-ai-yaziyor 14s infinite; }
.ye-ai.hazir.canli .ye-ab-yaziyor i { animation: ye-nokta 1s ease-in-out infinite; } .ye-ai.hazir.canli .ye-ab-yaziyor i:nth-child(2) { animation-delay: .15s; } .ye-ai.hazir.canli .ye-ab-yaziyor i:nth-child(3) { animation-delay: .3s; }
.ye-ai.hazir.canli .ye-ab-o { animation: ye-ai-o 14s var(--egri) infinite; }
.ye-ai.hazir.canli .f0, .ye-ai.hazir.canli .d0 { animation: ye-ai-0 14s infinite; }
.ye-ai.hazir.canli .f1, .ye-ai.hazir.canli .d1 { animation: ye-ai-1 14s infinite; }
.ye-ai.hazir.canli .ye-mt-hedef .f2, .ye-ai.hazir.canli .ye-mt-hedef .d2 { animation: ye-ai-2 14s infinite; }
.ye-ai.hazir.canli .ye-mt-hedef { animation: ye-ai-satir 14s infinite; }
.ye-ai.hazir.canli .ye-ab-kaydet .ye-dokun { animation: ye-ai-dokun 14s var(--egri) infinite; }
.ye-ai.hazir.canli .ye-ab-kaydet { animation: ye-ai-bas 14s infinite; }
.ye-ai.hazir.canli .ye-ab-tamam { animation: ye-ai-tamam 14s var(--egri) infinite; }
}
@keyframes ye-nokta { 0%, 100% { transform: none; opacity: .5; } 50% { transform: translateY(-.22em); opacity: 1; } }
@keyframes ye-ai-sen { 0%, 2% { opacity: 0; transform: translateY(.5em); } 5%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes ye-ai-yazi { 0%, 3% { clip-path: inset(0 100% 0 0); } 17%, 100% { clip-path: inset(0); } }
@keyframes ye-ai-yaziyor { 0%, 19% { opacity: 0; } 21%, 28% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes ye-ai-o { 0%, 29% { opacity: 0; transform: translateY(.5em) scale(.97); } 33%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
@keyframes ye-ai-0 { 0%, 31% { opacity: 1; } 32%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ye-ai-1 { 0%, 31% { opacity: 0; } 32%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ye-ai-2 { 0%, 49% { opacity: 0; } 50%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ye-ai-satir { 0%, 31% { background: transparent; } 33% { background: color-mix(in oklch, #FCD34D 14%, transparent); } 49% { background: color-mix(in oklch, #FCD34D 8%, transparent); }
52% { background: color-mix(in oklch, #4ADE80 14%, transparent); } 62%, 100% { background: transparent; } }
@keyframes ye-ai-dokun { 0%, 39% { opacity: 0; transform: translate(1.6em, 1.4em); } 42% { opacity: 1; } 45% { opacity: 1; transform: none; } 46.5% { transform: scale(.78); }
48% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: translate(.8em, 1.4em); } }
@keyframes ye-ai-bas { 0%, 46% { transform: none; } 47% { transform: scale(.94); } 49%, 100% { transform: none; } }
@keyframes ye-ai-tamam { 0%, 50% { opacity: 0; transform: translateY(.4em); } 54%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } }
/* --- Canlı sohbet: tek gelen kutusu (web, WhatsApp, Instagram); asistan yanıtlar, sorar, randevuyu kaydeder, pazarlığı ekibe devreder --- */
.k-web { --k: #38BDF8; } .k-wa { --k: #4ADE80; } .k-ig { --k: #F472B6; }
.ye-kanal { position: relative; padding: .3em .7em; border-radius: .5em; color: var(--ye-soluk); }
.ye-kanal::after { content: ''; position: absolute; left: .7em; right: .7em; bottom: .02em; height: 2px; border-radius: 2px; background: var(--k); opacity: .75; }
.ye-kanal.on { background: #ffffff0d; color: #F1F5F8; }
.ye-oto { display: inline-flex; align-items: center; gap: .4em; margin-left: auto; color: var(--ye-vurgu); font-weight: 600; }
.ye-sohbet .ye-govde { display: grid; grid-template-columns: 11.5em minmax(0, 1fr) 13.5em; }
.ye-konusmalar { display: grid; align-content: start; gap: .3em; margin: 0; padding: .7em .5em; list-style: none; border-right: 1px solid var(--ye-cizgi); }
.ye-konusmalar li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55em; padding: .55em .55em .55em .6em; border-left: 2px solid var(--k); border-radius: .2em .6em .6em .2em; }
.ye-konusmalar li.on { background: #ffffff0a; }
.ye-konusmalar .ye-av { width: 1.9em; height: 1.9em; border-radius: 50%; background: linear-gradient(135deg, #2A3844, #17222B); }
.ye-konusmalar b { display: block; color: #EEF3F6; font-weight: 600; } .ye-konusmalar small { color: var(--k); font-size: .84em; }
.ye-konusmalar em { align-self: start; color: var(--ye-soluk); font-size: .8em; font-style: normal; }
.ye-sohbet-alan { display: flex; flex-direction: column; gap: .6em; min-width: 0; padding: 1em; }
.ye-sb { max-width: 86%; padding: .6em .85em; border-radius: .9em; color: #EEF3F6; line-height: 1.4; }
.ye-sb.m { align-self: flex-start; border-bottom-left-radius: .25em; background: #1C2933; }
.ye-sb.a { align-self: flex-end; border-bottom-right-radius: .25em; background: color-mix(in oklch, var(--ye-vurgu) 16%, #0D151B); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ye-vurgu) 35%, transparent); }
.ye-sb.a em { display: block; margin-bottom: .2em; color: var(--ye-vurgu); font-size: .84em; font-style: normal; font-weight: 700; }
.ye-kayit { display: grid; align-content: start; gap: .7em; padding: 1em .9em; border-left: 1px solid var(--ye-cizgi); }
.ye-kk { display: grid; gap: .25em; padding: .8em .9em; border: 1px solid var(--ye-cizgi); border-radius: .8em; background: #0E161C; }
.ye-kk small { display: flex; align-items: center; gap: .4em; font-size: .88em; font-weight: 600; } .ye-kk.k1 small { color: #8FE3B5; } .ye-kk.k2 small { color: #F9A8D4; }
.ye-kk b { color: #F1F5F8; font-size: 1.08em; } .ye-kk > span { color: var(--ye-soluk); font-size: .88em; }
.ye-kk.k1 { border-color: color-mix(in oklch, #4ADE80 35%, var(--ye-cizgi)); } .ye-kk.k2 { border-color: color-mix(in oklch, #F472B6 35%, var(--ye-cizgi)); }
.ye-adimlar { flex: none; display: flex; align-items: center; gap: .7em; height: 3.1em; padding: 0 1.2em; border-top: 1px solid var(--ye-cizgi); background: var(--ye-yuzey); }
.ye-adimlar span { color: #EEF3F6; font-weight: 600; white-space: nowrap; } .ye-adimlar i { flex: 1; height: 1px; background: color-mix(in oklch, var(--ye-vurgu) 55%, var(--ye-cizgi)); }
@media (prefers-reduced-motion: no-preference) {
.ye-sohbet.hazir.canli .s1 { animation: yzk-g2 16s var(--egri) infinite; } .ye-sohbet.hazir.canli .s2 { animation: yzk-g13 16s var(--egri) infinite; }
.ye-sohbet.hazir.canli .s3 { animation: yzk-g25 16s var(--egri) infinite; } .ye-sohbet.hazir.canli .s4 { animation: yzk-g34 16s var(--egri) infinite; }
.ye-sohbet.hazir.canli .k1 { animation: yzk-x42 16s var(--egri) infinite; } .ye-sohbet.hazir.canli .k2 { animation: yzk-x54 16s var(--egri) infinite; }
.ye-sohbet.hazir.canli .ye-adimlar .a1 { animation: yzk-a13 16s infinite; } .ye-sohbet.hazir.canli .ye-adimlar .a2 { animation: yzk-a16 16s infinite; }
.ye-sohbet.hazir.canli .ye-adimlar .a3 { animation: yzk-a42 16s infinite; } .ye-sohbet.hazir.canli .ye-adimlar .a4 { animation: yzk-a54 16s infinite; }
.ye-sohbet.hazir.canli .ye-konusmalar .c3 { animation: ye-devir 16s infinite; }
}
@keyframes ye-devir { 0%, 53% { background: transparent; } 56% { background: color-mix(in oklch, #F472B6 16%, transparent); } 72%, 100% { background: transparent; } }
/* --- Akıllı CRM, görüşme sırasında: canlı görüşme yazıya dökülür → talepler çıkar → en uygun ev bulunur --- */
.ye-gorusme .ye-govde { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
.ye-canli { display: inline-flex; align-items: center; gap: .45em; color: #FCA5A5; font-weight: 600; }
.ye-canli i { width: .55em; height: .55em; border-radius: 50%; background: #EF4444; box-shadow: 0 0 .6em #EF4444; }
.ye-sure { color: var(--ye-soluk); font-variant-numeric: tabular-nums; }
.ye-cagri { display: flex; flex-direction: column; gap: .55em; min-width: 0; padding: .9em 1.1em; border-right: 1px solid var(--ye-cizgi); }
.ye-kisi { display: flex; align-items: center; gap: .7em; padding-bottom: .8em; border-bottom: 1px solid var(--ye-cizgi); }
.ye-kisi .ye-av { flex: none; width: 2.3em; height: 2.3em; border-radius: 50%; background: linear-gradient(135deg, #3A4A58, #17222B); }
.ye-kisi b { display: block; color: #EEF3F6; } .ye-kisi small { color: var(--ye-soluk); }
.ye-dalga { display: flex; align-items: center; gap: .2em; height: 2em; margin-left: auto; }
.ye-dalga i { width: .22em; height: calc(var(--d, .5) * 2em); border-radius: 1em; background: var(--ye-vurgu); opacity: .85; }
.ye-dalga i:nth-child(3n) { --d: .9; } .ye-dalga i:nth-child(3n + 1) { --d: .45; } .ye-dalga i:nth-child(4n) { --d: .7; } .ye-dalga i:nth-child(5n) { --d: .3; }
.ye-bas { color: var(--ye-soluk); font-size: .88em; font-weight: 600; }
.ye-dokum { display: block; padding: .5em .7em; border-radius: .6em; background: #0E161C; color: #DCE6EE; line-height: 1.4; }
.ye-dokum em { display: block; color: var(--ye-soluk); font-size: .8em; font-style: normal; }
.ye-dokum.d3 em { color: var(--ye-vurgu); }
.ye-analiz { display: flex; flex-direction: column; gap: .3em; min-width: 0; padding: .9em 1.1em; }
.ye-ist { display: flex; justify-content: space-between; gap: 1em; padding: .4em 0; border-bottom: 1px solid #ffffff0a; color: #EEF3F6; white-space: nowrap; }
.ye-ist small { color: var(--ye-soluk); font-size: 1em; }
.ye-bulundu { display: grid; gap: .6em; margin-top: auto; padding: .8em; border-radius: .9em; background: color-mix(in oklch, var(--ye-vurgu) 12%, #0D151B);
box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ye-vurgu) 45%, transparent), 0 1em 2em -1.2em color-mix(in oklch, var(--ye-vurgu) 60%, transparent); }
.ye-bulundu-bas { display: flex; align-items: center; gap: .45em; color: #F1F5F8; font-weight: 600; } .ye-bulundu-bas svg { flex: none; color: var(--ye-vurgu); }
.ye-ilan { display: grid; grid-template-columns: 4.4em minmax(0, 1fr); align-items: center; gap: .7em; }
.ye-ilan-foto { height: 3.1em; border-radius: .5em; background: linear-gradient(180deg, #7FB6D6 0 34%, transparent 34%), linear-gradient(90deg, #D9CDB8 0 30%, #C2B49C 30% 62%, #E3D8C4 62%), #8A7A66;
box-shadow: inset 0 -.5em 0 #4F5B3E; }
.ye-ilan b { display: block; color: #F1F5F8; } .ye-ilan small { color: #A6B2BC; }
.ye-bulundu .ye-btn { justify-self: start; }
@media (prefers-reduced-motion: no-preference) {
.ye-gorusme.hazir.canli .ye-dalga i { animation: ye-dalga .9s ease-in-out infinite alternate; }
.ye-gorusme.hazir.canli .ye-dalga i:nth-child(2n) { animation-duration: .7s; } .ye-gorusme.hazir.canli .ye-dalga i:nth-child(3n) { animation-duration: 1.1s; }
.ye-gorusme.hazir.canli .d1 { animation: yzk-g3 16s var(--egri) infinite; } .ye-gorusme.hazir.canli .d2 { animation: yzk-g15 16s var(--egri) infinite; }
.ye-gorusme.hazir.canli .d3 { animation: yzk-g28 16s var(--egri) infinite; } .ye-gorusme.hazir.canli .d4 { animation: yzk-g35 16s var(--egri) infinite; }
.ye-gorusme.hazir.canli .t1 { animation: yzk-x8 16s var(--egri) infinite; } .ye-gorusme.hazir.canli .t2 { animation: yzk-x10 16s var(--egri) infinite; }
.ye-gorusme.hazir.canli .t3 { animation: yzk-x21 16s var(--egri) infinite; } .ye-gorusme.hazir.canli .t4 { animation: yzk-x40 16s var(--egri) infinite; }
.ye-gorusme.hazir.canli .ye-bulundu { animation: yzk-b50 16s var(--egri) infinite; }
}
@keyframes ye-dalga { from { transform: scaleY(.35); } to { transform: none; } }
/* --- Akıllı CRM, ay sonunda: Eylül ve Ekim yan yana (satış, maliyet, kâr) → yapay zekâ bildirimi kâra etkisini yazar --- */
.ye-aysonu .ye-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
.ye-kiyas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; gap: 0 1em; padding: 1.1em 1.2em .9em; border-right: 1px solid var(--ye-cizgi); }
.ye-kg { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: .5em; min-height: 0; }
.ye-kg b { color: #EEF3F6; font-weight: 600; }
.ye-kc { display: flex; align-items: flex-end; justify-content: center; gap: .4em; width: 100%; min-height: 8em; border-bottom: 1px solid #2A3641; }
.ye-kc i { width: 1.9em; height: calc(var(--h) * 100%); border-radius: .35em .35em 0 0; transform-origin: bottom; }
.c-once { background: #33414D; } .c-simdi { background: var(--ye-vurgu); } .g-kar .c-simdi { background: #4ADE80; }
.ye-kg em { color: var(--ye-vurgu); font-size: 1.12em; font-style: normal; font-weight: 700; } .g-kar em { color: #8FE3B5; }
.ye-lejant { grid-column: 1 / -1; display: flex; align-items: center; gap: .45em; margin-top: .8em; color: var(--ye-soluk); font-size: .86em; }
.ye-lejant i { width: .8em; height: .8em; border-radius: .2em; } .ye-lejant i + i, .ye-lejant i.c-simdi { margin-left: .8em; }
.ye-aysonu-not { display: flex; flex-direction: column; justify-content: center; gap: .7em; min-width: 0; padding: 1.1em 1.2em; }
.ye-not-bas { display: flex; align-items: center; gap: .45em; color: var(--ye-vurgu); font-weight: 700; }
.ye-not-bas em { margin-left: auto; color: var(--ye-soluk); font-size: .86em; font-style: normal; font-weight: 400; }
.ye-aysonu-not p { margin: 0; padding: .8em .95em; border: 1px solid var(--ye-cizgi); border-radius: .8em; background: #0E161C; color: #DCE6EE; font-size: 1.06em; line-height: 1.45; text-wrap: pretty; }
.ye-aysonu-not .n2 { border-color: color-mix(in oklch, var(--ye-vurgu) 45%, transparent); background: color-mix(in oklch, var(--ye-vurgu) 11%, #0D151B); }
.ye-aysonu-not b { color: #fff; } .ye-aysonu-not .n2 b { color: #8FE3B5; }
@media (prefers-reduced-motion: no-preference) {
.ye-aysonu.hazir.canli .g-satis .c-once { animation: yzk-c2 14s var(--egri) infinite; } .ye-aysonu.hazir.canli .g-maliyet .c-once { animation: yzk-c4 14s var(--egri) infinite; }
.ye-aysonu.hazir.canli .g-kar .c-once { animation: yzk-c6 14s var(--egri) infinite; } .ye-aysonu.hazir.canli .g-satis .c-simdi { animation: yzk-c10 14s var(--egri) infinite; }
.ye-aysonu.hazir.canli .g-maliyet .c-simdi { animation: yzk-c12 14s var(--egri) infinite; } .ye-aysonu.hazir.canli .g-kar .c-simdi { animation: yzk-c14 14s var(--egri) infinite; }
.ye-aysonu.hazir.canli .ye-kg em { animation: yzk-g22 14s var(--egri) infinite; }
.ye-aysonu.hazir.canli .ye-not-bas { animation: yzk-g30 14s var(--egri) infinite; } .ye-aysonu.hazir.canli .n1 { animation: yzk-g34 14s var(--egri) infinite; }
.ye-aysonu.hazir.canli .n2 { animation: yzk-b46 14s var(--egri) infinite; }
}
/* --- QR menü ve sipariş: masada telefondan sipariş → mutfak ekranında fiş (Yeni → Hazırlanıyor → Hazır) → kasada hesap, ödendi --- */
.ye-qr-tanim { position: absolute; }
.ye-qr-acik { margin-left: auto; color: var(--ye-soluk); } .ye-qr-acik b { margin-left: .3em; color: #F1F5F8; }
.ye-qr .ye-govde { display: grid; grid-template-columns: minmax(0, 1.05fr) 2em minmax(0, 1fr) 2em minmax(0, .95fr); padding: 1em 1.1em 1.1em; }
.ye-qa { display: flex; flex-direction: column; gap: .55em; min-width: 0; }
.ye-qa-bas { color: var(--ye-soluk); font-size: .88em; font-weight: 600; }
.ye-qt { flex: 1; display: flex; flex-direction: column; gap: .5em; padding: .8em; border: 1px solid #26333E; border-radius: 1.3em; background: #070B0E; box-shadow: 0 1em 2em -1.2em #000; }
.ye-qt-ust { display: flex; align-items: center; gap: .6em; padding-bottom: .55em; border-bottom: 1px solid var(--ye-cizgi); }
.ye-qt-kod { flex: none; width: 2.3em; height: 2.3em; padding: .2em; border-radius: .3em; background: #F2F5F7; fill: #0B1217; }
.ye-qt-ust b { display: block; color: #F1F5F8; } .ye-qt-ust small { color: var(--ye-soluk); font-size: .86em; }
.ye-qt-urun { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; align-items: center; gap: .55em; }
.ye-qt-urun > i { height: 2em; border-radius: .45em; background: linear-gradient(135deg, #C98A3B, #6E3A1C); }
.ye-qt-urun > i.r2 { background: linear-gradient(135deg, #EEF3F6, #9FB0BD); } .ye-qt-urun > i.r3 { background: linear-gradient(135deg, #F0B44C, #9A5B2E); }
.ye-qt-urun > span { display: grid; min-width: 0; color: #EEF3F6; } .ye-qt-urun small { color: var(--ye-soluk); font-size: .86em; }
.ye-qt-adet { display: grid; place-items: center; width: 1.75em; height: 1.75em; } .ye-qt-adet em { grid-area: 1 / 1; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; font-style: normal; }
.ye-qt-adet .a0 { box-shadow: inset 0 0 0 1px #3A4753; color: #94A2AE; } .ye-qt-adet .a1 { background: var(--ye-vurgu); color: var(--ye-koyu); font-weight: 700; }
.ye-qt-urun .a0 { opacity: 1; } .ye-qt-urun.u1 .a0, .ye-qt-urun.u2 .a0 { opacity: 0; }
.ye-qt-gonder { position: relative; display: grid; place-items: center; height: 2.4em; margin-top: auto; border-radius: .7em; background: var(--ye-vurgu); color: var(--ye-koyu); font-weight: 700; }
.ye-qt-gitti { display: flex; align-items: center; justify-content: center; gap: .4em; color: #8FE3B5; font-size: .88em; font-weight: 600; }
.ye-qa-ok { position: relative; align-self: center; height: 1px; margin: 0 .25em; background: #2A3641; }
.ye-qa-ok::after { content: ''; position: absolute; right: -.1em; top: -.3em; width: .6em; height: .6em; border-top: 1px solid #4A5866; border-right: 1px solid #4A5866; transform: rotate(45deg); }
.ye-qa-ok i { position: absolute; left: 0; top: -.25em; width: .5em; height: .5em; border-radius: 50%; background: var(--ye-vurgu); box-shadow: 0 0 .7em .1em var(--ye-vurgu); opacity: 0; }
.ye-fis { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3em .6em; padding: .65em .75em; border: 1px solid var(--ye-cizgi); border-radius: .7em; background: #0E161C; }
.ye-fis b { grid-row: 1; color: #F1F5F8; } .ye-fis > span { grid-row: 2; grid-column: 1 / -1; overflow: hidden; color: #A6B2BC; font-size: .9em; white-space: nowrap; text-overflow: ellipsis; }
.ye-fis em { grid-row: 1; grid-column: 2; justify-self: end; padding: .2em .55em; border-radius: .45em; font-size: .82em; font-style: normal; font-weight: 600; white-space: nowrap; }
.ye-fis .hz, .ye-fis .e3 { background: #0F2219; color: #8FE3B5; } .ye-fis .e1 { background: color-mix(in oklch, var(--ye-vurgu) 18%, #0D151B); color: var(--ye-vurgu); }
.ye-fis .e2, .ye-fis .e2s { background: #2A2010; color: #FCD34D; }
.ye-fis .e1, .ye-fis .e2 { opacity: 0; }
.ye-fis.f-yeni { border-color: color-mix(in oklch, var(--ye-vurgu) 55%, var(--ye-cizgi)); box-shadow: 0 .8em 1.6em -1em color-mix(in oklch, var(--ye-vurgu) 60%, transparent); }
.ye-hesap { flex: 1; display: flex; flex-direction: column; gap: .5em; padding: .9em .95em; border-radius: .7em; background: #F4EFE6; color: #3A2E26; }
.ye-hesap > b { color: #1E1712; } .ye-hesap > span { display: flex; justify-content: space-between; gap: .5em; font-size: .92em; }
.ye-hesap em { font-style: normal; font-variant-numeric: tabular-nums; }
.ye-hesap .ye-hesap-top { padding-top: .5em; border-top: 1px solid #D9CFC1; color: #1E1712; font-weight: 700; font-size: 1em; }
.ye-hesap .ye-hesap-odendi { align-self: flex-start; display: inline-flex; gap: .4em; align-items: center; margin-top: auto; padding: .3em .75em; border-radius: .45em; background: #1F7A4D; color: #fff; font-weight: 700; rotate: -4deg; }
@media (prefers-reduced-motion: no-preference) {
.ye-qr.hazir.canli .ye-qt-urun.u1 .a1 { animation: yzk-p4 16s cubic-bezier(.3, 1.5, .5, 1) infinite; } .ye-qr.hazir.canli .ye-qt-urun.u2 .a1 { animation: yzk-p8 16s cubic-bezier(.3, 1.5, .5, 1) infinite; }
.ye-qr.hazir.canli .ye-qt-urun.u1 .a0 { animation: yzk-h4 16s infinite; } .ye-qr.hazir.canli .ye-qt-urun.u2 .a0 { animation: yzk-h8 16s infinite; }
.ye-qr.hazir.canli .ye-qt-gonder .ye-dokun { animation: ye-qr-dokun 16s var(--egri) infinite; }
.ye-qr.hazir.canli .ye-qt-gitti { animation: yzk-g20 16s var(--egri) infinite; }
.ye-qr.hazir.canli .o1 i { animation: ye-qr-isik1 16s linear infinite; } .ye-qr.hazir.canli .o2 i { animation: ye-qr-isik2 16s linear infinite; }
.ye-qr.hazir.canli .f-yeni { animation: yzk-x27 16s var(--egri) infinite; }
.ye-qr.hazir.canli .f-yeni .e1 { animation: ye-fis1 16s infinite; } .ye-qr.hazir.canli .f-yeni .e2 { animation: ye-fis2 16s infinite; } .ye-qr.hazir.canli .f-yeni .e3 { animation: ye-fis3 16s infinite; }
.ye-qr.hazir.canli .ye-hesap > :nth-child(1) { animation: yzk-g62 16s var(--egri) infinite; } .ye-qr.hazir.canli .ye-hesap > :nth-child(2) { animation: yzk-g64 16s var(--egri) infinite; }
.ye-qr.hazir.canli .ye-hesap > :nth-child(3) { animation: yzk-g66 16s var(--egri) infinite; } .ye-qr.hazir.canli .ye-hesap > :nth-child(4) { animation: yzk-g68 16s var(--egri) infinite; }
.ye-qr.hazir.canli .ye-hesap .ye-hesap-odendi { animation: yzk-d74 16s cubic-bezier(.3, 1.5, .5, 1) infinite; }
}
@keyframes ye-qr-dokun { 0%, 9% { opacity: 0; transform: translate(1.6em, 1.4em); } 12% { opacity: 1; } 15% { opacity: 1; transform: none; } 16.5% { transform: scale(.78); }
18% { opacity: 1; transform: none; } 21%, 100% { opacity: 0; transform: translate(.8em, 1.4em); } }
@keyframes ye-qr-isik1 { 0%, 21% { left: 0; opacity: 0; } 22% { left: 0; opacity: 1; } 27% { left: calc(100% - .5em); opacity: 1; } 28%, 100% { left: calc(100% - .5em); opacity: 0; } }
@keyframes ye-qr-isik2 { 0%, 56% { left: 0; opacity: 0; } 57% { left: 0; opacity: 1; } 62% { left: calc(100% - .5em); opacity: 1; } 63%, 100% { left: calc(100% - .5em); opacity: 0; } }
@keyframes ye-fis1 { 0%, 27% { opacity: 0; } 28%, 41% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes ye-fis2 { 0%, 41% { opacity: 0; } 42%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes ye-fis3 { 0%, 55% { opacity: 0; } 56%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
/* ortak anahtar kareler: yzk-. Öğe döngünün o yüzdesinde belirir (g aşağıdan, x sağdan, p büyüyerek, b parlayarak, d damga gibi);
c: çubuk o yüzdede büyür; h: yer tutucu o yüzdede kaybolur; a: adım o yüzdede yanar. Hepsi %93'e dek durur, döngü sonunda birlikte başa döner. */
@keyframes yzk-a13 { 0%, 13% { color: #56636E; } 16%, 93% { color: #EEF3F6; } 97%, 100% { color: #56636E; } }
@keyframes yzk-a16 { 0%, 16% { color: #56636E; } 19%, 93% { color: #EEF3F6; } 97%, 100% { color: #56636E; } }
@keyframes yzk-a42 { 0%, 42% { color: #56636E; } 45%, 93% { color: #EEF3F6; } 97%, 100% { color: #56636E; } }
@keyframes yzk-a54 { 0%, 54% { color: #56636E; } 57%, 93% { color: #EEF3F6; } 97%, 100% { color: #56636E; } }
@keyframes yzk-b46 { 0%, 46% { opacity: 0; transform: translateY(1em) scale(.97); filter: none; } 50% { opacity: 1; transform: none; filter: brightness(1.35); } 58%, 93% { opacity: 1; transform: none; filter: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-b50 { 0%, 50% { opacity: 0; transform: translateY(1em) scale(.97); filter: none; } 54% { opacity: 1; transform: none; filter: brightness(1.35); } 62%, 93% { opacity: 1; transform: none; filter: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-c2 { 0%, 2% { transform: scaleY(0); } 9%, 93% { transform: none; } 98%, 100% { transform: scaleY(0); } }
@keyframes yzk-c4 { 0%, 4% { transform: scaleY(0); } 11%, 93% { transform: none; } 98%, 100% { transform: scaleY(0); } }
@keyframes yzk-c6 { 0%, 6% { transform: scaleY(0); } 13%, 93% { transform: none; } 98%, 100% { transform: scaleY(0); } }
@keyframes yzk-c10 { 0%, 10% { transform: scaleY(0); } 17%, 93% { transform: none; } 98%, 100% { transform: scaleY(0); } }
@keyframes yzk-c12 { 0%, 12% { transform: scaleY(0); } 19%, 93% { transform: none; } 98%, 100% { transform: scaleY(0); } }
@keyframes yzk-c14 { 0%, 14% { transform: scaleY(0); } 21%, 93% { transform: none; } 98%, 100% { transform: scaleY(0); } }
@keyframes yzk-d74 { 0%, 74% { opacity: 0; transform: scale(1.8); } 78%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g2 { 0%, 2% { opacity: 0; transform: translateY(.6em); } 5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g3 { 0%, 3% { opacity: 0; transform: translateY(.6em); } 6%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g13 { 0%, 13% { opacity: 0; transform: translateY(.6em); } 16%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g15 { 0%, 15% { opacity: 0; transform: translateY(.6em); } 18%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g20 { 0%, 20% { opacity: 0; transform: translateY(.6em); } 23%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g22 { 0%, 22% { opacity: 0; transform: translateY(.6em); } 25%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g25 { 0%, 25% { opacity: 0; transform: translateY(.6em); } 28%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g28 { 0%, 28% { opacity: 0; transform: translateY(.6em); } 31%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g30 { 0%, 30% { opacity: 0; transform: translateY(.6em); } 33%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g34 { 0%, 34% { opacity: 0; transform: translateY(.6em); } 37%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g35 { 0%, 35% { opacity: 0; transform: translateY(.6em); } 38%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g62 { 0%, 62% { opacity: 0; transform: translateY(.6em); } 65%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g64 { 0%, 64% { opacity: 0; transform: translateY(.6em); } 67%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g66 { 0%, 66% { opacity: 0; transform: translateY(.6em); } 69%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-g68 { 0%, 68% { opacity: 0; transform: translateY(.6em); } 71%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-h4 { 0%, 4% { opacity: 1; } 5%, 96% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes yzk-h8 { 0%, 8% { opacity: 1; } 9%, 96% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes yzk-p4 { 0%, 4% { opacity: 0; transform: scale(.3); } 7%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-p8 { 0%, 8% { opacity: 0; transform: scale(.3); } 11%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-x8 { 0%, 8% { opacity: 0; transform: translateX(1em); } 11%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-x10 { 0%, 10% { opacity: 0; transform: translateX(1em); } 13%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-x21 { 0%, 21% { opacity: 0; transform: translateX(1em); } 24%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-x27 { 0%, 27% { opacity: 0; transform: translateX(1em); } 30%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-x40 { 0%, 40% { opacity: 0; transform: translateX(1em); } 43%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-x42 { 0%, 42% { opacity: 0; transform: translateX(1em); } 45%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yzk-x54 { 0%, 54% { opacity: 0; transform: translateX(1em); } 57%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
/* --- E-ticaret operasyonu: "Kendin tasarla"da motif değişir; sipariş panoda ilerler (koyu panel, bölümün kırmızısı) --- */
.ye-sekme { padding: .3em .7em; border-radius: .5em; color: var(--ye-soluk); } .ye-sekme.on { background: #ffffff0d; color: #F1F5F8; }
.ye-operasyon .ye-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.ye-tasarla { display: grid; place-items: center; align-content: center; gap: 1em; padding: 1em; border-right: 1px solid var(--ye-cizgi); }
.ye-canta { display: block; width: 72%; max-width: 15em; height: auto; }
.ye-sap { fill: none; stroke: #5A6773; stroke-width: 6; stroke-linecap: round; }
.ye-kenar { fill: none; stroke: color-mix(in oklch, var(--ye-vurgu) 55%, #fff); stroke-width: 1.4; } .ye-dikis { fill: none; stroke: #F6F1E8; stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.ye-m-zemin { fill: #4A1F24; }
.ye-canta .g2, .ye-canta .g3 { opacity: 0; }
.ye-secim { display: flex; align-items: center; gap: .8em; } .ye-secim small { color: var(--ye-soluk); }
.ye-motifler { display: flex; gap: .5em; }
.ye-motifler i { width: 1.8em; height: 1.8em; border: 1.5px solid transparent; border-radius: .45em; box-shadow: 0 0 0 1px var(--ye-cizgi); }
.ye-motifler .m1 { background: radial-gradient(circle, #C99A3B 20%, transparent 23%) 0 0 / .9em .9em, #4A1F24; border-color: var(--ye-vurgu); }
.ye-motifler .m2 { background: repeating-linear-gradient(0deg, #4A1F24 0 .3em, #F6F1E8 .3em .38em); }
.ye-motifler .m3 { background: repeating-linear-gradient(45deg, #4A1F24 0 .25em, #B5523B .25em .4em); }
.ye-pano { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: .7em; padding: 1em; }
.ye-sutun { display: grid; align-content: start; gap: .5em; } .ye-sutun > b { height: 1.444em; color: var(--ye-soluk); font-size: .9em; font-weight: 600; } /* kabın em'iyle 1,3 */
/* sipariş kartı: solda ürün küçük resmi, sağda iki satır; yükseklik sabit (ilerleyen kartın yeri buna göre) */
.ye-is { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); grid-template-rows: 1fr 1fr; align-items: center; column-gap: .6em; height: 3.8em; padding: .6em;
border: 1px solid var(--ye-cizgi); border-radius: .6em; background: #0F1920; box-shadow: 0 .3em .8em -.5em #000; }
.ye-is b { grid-row: 1 / span 2; align-self: stretch; border-radius: .4em; background: repeating-linear-gradient(45deg, #4A1F24 0 .25em, #B5523B .25em .4em); }
.ye-is i { height: .42em; border-radius: 1em; background: #2A3640; } .ye-is i:nth-of-type(1) { width: 78%; align-self: end; margin-bottom: .2em; background: #3A4854; } .ye-is i:nth-of-type(2) { width: 50%; align-self: start; margin-top: .2em; }
.ye-is-kisa b { background: radial-gradient(circle, #C99A3B 20%, transparent 23%) 0 0 / .8em .8em, #4A1F24; } .ye-is-kisa i:nth-of-type(1) { width: 60%; }
.ye-sutun:nth-child(2) .ye-is b { background: repeating-linear-gradient(0deg, #4A1F24 0 .3em, #F6F1E8 .3em .38em); }
/* ilerleyen sipariş: Yeni → Hazırlanıyor → Kargoda (son hâli Kargoda); dördüncü sırada durur: üst = 1 + 1,3 + ,5 + 3 × (3,8 + ,5) em */
.ye-gezen { position: absolute; left: 1em; top: 15.7em; width: calc((100% - 3.4em) / 3); border-color: var(--ye-vurgu); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ye-vurgu) 35%, transparent), 0 .6em 1.2em -.6em #000;
transform: translateX(calc(200% + 1.4em)); }
.ye-gezen i:nth-of-type(1) { background: var(--ye-vurgu); }
.ye-serit { grid-column: 1 / -1; align-self: end; display: flex; gap: 1.6em; margin: 0; padding-top: .8em; border-top: 1px solid var(--ye-cizgi); color: var(--ye-soluk); font-size: .9em; }
.ye-serit b { margin-left: .3em; color: #F1F5F8; }
@media (prefers-reduced-motion: no-preference) {
.ye-operasyon.hazir.canli .ye-canta .g1 { animation: ye-g1 12s infinite; } .ye-operasyon.hazir.canli .ye-canta .g2 { animation: ye-g2 12s infinite; }
.ye-operasyon.hazir.canli .ye-canta .g3 { animation: ye-g3 12s infinite; }
.ye-operasyon.hazir.canli .ye-motifler .m1 { animation: ye-m1 12s infinite; } .ye-operasyon.hazir.canli .ye-motifler .m2 { animation: ye-m2 12s infinite; }
.ye-operasyon.hazir.canli .ye-motifler .m3 { animation: ye-m3 12s infinite; }
.ye-operasyon.hazir.canli .ye-gezen { animation: ye-gezen 12s infinite cubic-bezier(.6, 0, .25, 1); }
}
@keyframes ye-g1 { 0%, 31% { opacity: 1; } 34%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ye-g2 { 0%, 31% { opacity: 0; } 34%, 64% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes ye-g3 { 0%, 64% { opacity: 0; } 67%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ye-m1 { 0%, 31% { border-color: var(--ye-vurgu); } 34%, 97% { border-color: transparent; } 100% { border-color: var(--ye-vurgu); } }
@keyframes ye-m2 { 0%, 31% { border-color: transparent; } 34%, 64% { border-color: var(--ye-vurgu); } 67%, 100% { border-color: transparent; } }
@keyframes ye-m3 { 0%, 64% { border-color: transparent; } 67%, 97% { border-color: var(--ye-vurgu); } 100% { border-color: transparent; } }
@keyframes ye-gezen { 0%, 6% { opacity: 0; transform: translateX(0) translateY(-.6em); } 10%, 30% { opacity: 1; transform: translateX(0); }
40%, 62% { transform: translateX(calc(100% + .7em)); } 72%, 94% { opacity: 1; transform: translateX(calc(200% + 1.4em)); } 100% { opacity: 0; transform: translateX(calc(200% + 1.4em)); } }
/* --- Müşteri paneli ve entegrasyonlar: solda müşteri aşamaları (Yeni → Teklif → Sipariş), sağda bağlantılar sırayla "Bağlı" olur ve panele ışık gönderir --- */
.ye-crm { aspect-ratio: 16 / 8.6; font-size: clamp(9px, 1.95cqi, 13.5px); }
.ye-crm .ye-sekme.on { background: #ffffff0d; color: #F1F5F8; }
.ye-crm .ye-govde { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
/* müşteri aşamaları: kart yüksekliği ve aralığı sabit (gezen kartın yeri buna göre): ilk kart = pano dolgusu 1 + başlık 1,5 + ara ,5 = 3 em; sıra aralığı 3,9 em; gezen kart dördüncü sırada: 3 + 3 × 3,9 = 14,7 em */
.ye-mpano { position: relative; display: grid; min-height: 19.4em; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; column-gap: .7em; padding: 1em; border-right: 1px solid var(--ye-cizgi); }
.ye-msutun { display: grid; align-content: start; gap: .5em; } .ye-msutun > b { height: 1.5em; color: var(--ye-soluk); font-size: .9em; font-weight: 600; line-height: 1.5em; }
.ye-mk { display: grid; grid-template-columns: 1.9em minmax(0, 1fr); align-items: center; column-gap: .6em; height: 3.4em; padding: 0 .6em; border: 1px solid var(--ye-cizgi); border-radius: .6em; background: #0F1920; }
.ye-av { width: 1.9em; height: 1.9em; border-radius: 50%; background: linear-gradient(135deg, #2A3844, #17222B); }
.ye-mk-b .ye-av { background: linear-gradient(135deg, #2D2A4A, #181628); }
.ye-mk > span { display: grid; gap: .45em; min-width: 0; }
.ye-mk > span i { display: block; height: .42em; border-radius: 1em; background: #2A3640; } .ye-mk > span i:first-child { width: 78%; background: #3A4854; } .ye-mk > span i:last-child { width: 48%; }
/* ilerleyen kart: dördüncü sırada Yeni'den çıkar, Teklif'e, sonra Sipariş'e geçer (son hâli Sipariş) */
.ye-mgezen { position: absolute; left: 1em; top: 14.7em; width: calc((100% - 3.4em) / 3); border-color: var(--ye-vurgu); background: #14212B; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ye-vurgu) 35%, transparent), 0 .6em 1.2em -.6em #000;
transform: translateX(calc(200% + 1.4em)); }
.ye-mgezen .ye-av { background: var(--ye-vurgu); }
/* entegrasyonlar */
.ye-ent { display: grid; align-content: start; gap: .5em; padding: 1em .9em; }
.ye-ent-bas { height: 1.5em; color: #F1F5F8; font-size: 1.02em; font-weight: 600; line-height: 1.5em; }
.ye-ent-sat { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6em; height: 3.4em; padding: 0 .7em; border: 1px solid var(--ye-cizgi); border-radius: .6em; background: #0D151B; }
.ye-ent-ik { display: grid; place-items: center; width: 2em; height: 2em; border-radius: .5em; background: #131E26; color: #9FB0BD; }
.ye-ent-ik svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.ye-ent-ad { min-width: 0; overflow: hidden; color: #E6EDF2; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.ye-ent-durum { display: grid; justify-items: end; } .ye-ent-durum > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .4em; padding: .22em .6em; border-radius: .4em; font-size: .86em; white-space: nowrap; }
.e-bekle { border: 1px solid var(--ye-cizgi); color: var(--ye-soluk); opacity: 0; }
.e-bagli { background: #0F2219; color: #8FE3B5; }
.e-bagli svg { width: .95em; height: .95em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* bağlanınca satırdan müşteri paneline giden ışık (kısa, sola doğru) */
.ye-nabiz { position: absolute; left: -.25em; top: 50%; width: .5em; height: .5em; margin-top: -.25em; border-radius: 50%; background: var(--ye-vurgu); box-shadow: 0 0 .9em .15em var(--ye-vurgu); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
.ye-crm.hazir.canli .ye-mgezen { animation: ye-mgezen 12s infinite cubic-bezier(.6, 0, .25, 1); }
.ye-crm.hazir.canli .ye-ent-sat { animation: ye-ent-sat 12s calc(var(--i) * .7s) infinite backwards; }
.ye-crm.hazir.canli .e-bekle { animation: ye-e-bekle 12s calc(var(--i) * .7s) infinite backwards; }
.ye-crm.hazir.canli .e-bagli { animation: ye-e-bagli 12s calc(var(--i) * .7s) infinite backwards; }
.ye-crm.hazir.canli .ye-nabiz { animation: ye-nabiz 12s calc(var(--i) * .7s) infinite backwards; }
}
@keyframes ye-mgezen { 0%, 6% { opacity: 0; transform: translateY(-.6em); } 10%, 30% { opacity: 1; transform: none; }
40%, 62% { transform: translateX(calc(100% + .7em)); } 72%, 94% { opacity: 1; transform: translateX(calc(200% + 1.4em)); } 100% { opacity: 0; transform: translateX(calc(200% + 1.4em)); } }
@keyframes ye-e-bekle { 0%, 14% { opacity: 1; } 16%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes ye-e-bagli { 0%, 14% { opacity: 0; transform: scale(.9); } 17% { opacity: 1; transform: scale(1.06); } 20%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(.9); } }
@keyframes ye-ent-sat { 0%, 14% { border-color: var(--ye-cizgi); } 17%, 24% { border-color: color-mix(in srgb, var(--ye-vurgu) 55%, var(--ye-cizgi)); } 32%, 100% { border-color: var(--ye-cizgi); } }
@keyframes ye-nabiz { 0%, 15% { opacity: 0; transform: none; } 17% { opacity: 1; } 26% { opacity: 0; transform: translateX(-4.6em); } 100% { opacity: 0; transform: translateX(-4.6em); } }
/* görünmeyen ekran durur (animasyon kısaltması oynatma durumunu sıfırladığı için en sonda ve kesin) */
.ye.hazir:not(.canli) *, .ye.hazir:not(.canli) *::after, [data-oyna].hazir:not(.canli), [data-oyna].hazir:not(.canli) *, [data-oyna].hazir:not(.canli) *::after { animation-play-state: paused !important; }
/* --- dar kap: ikincil bölmeler gizlenir, yükseklik içerikle büyür --- */
@container (max-width: 520px) {
.ye { aspect-ratio: auto; }
.ye-admin .ye-yan, .ye-oturum, .ye-teklif .ye-filtre, .ye-talepler em, .ye-cokdil .ye-seo, .ye-durumlar { display: none; }
.ye-admin .ye-govde { min-height: 22em; }
.ye-teklif .ye-govde { grid-template-columns: minmax(0, 1fr); }
.ye-talepler { border-right: 0; border-bottom: 1px solid var(--ye-cizgi); }
.ye-pdf { min-height: 20em; }
.ye-cokdil .ye-govde { grid-template-columns: minmax(0, 1fr); }
.ye-operasyon .ye-govde { min-height: 18em; }
.ye-crm .ye-govde { grid-template-columns: minmax(0, 1fr); }
.ye-crm .ye-sekme:not(.on) { display: none; }
.ye-mpano { padding-bottom: 1.5em; border-right: 0; border-bottom: 1px solid var(--ye-cizgi); }
.ye-cift { padding: 0; }
.ye-tel { position: relative; right: auto; bottom: auto; width: 40%; margin: -9em 5% 0 auto; font-size: clamp(7px, 2.5cqi, 10.5px); }
}
/* yeni ekranlar dar kapta (440 px altı, telefon): tek sütun; ikincil parçalar (konuşma listesi, öbür sekmeler) gizlenir */
@container (max-width: 440px) {
.ye-ai .ye-govde, .ye-gorusme .ye-govde, .ye-aysonu .ye-govde { grid-template-columns: minmax(0, 1fr); }
.ye-menu-tablo, .ye-cagri, .ye-kiyas { border-right: 0; border-bottom: 1px solid var(--ye-cizgi); }
.ye-ai .ye-sekme:not(.on), .ye-aysonu .ye-sekme:not(.on), .ye-sure, .ye-qr-acik { display: none; }
.ye-sohbet .ye-ust .ye-kanal:not(.on) { display: none; }
.ye-sohbet .ye-govde { grid-template-columns: minmax(0, 1fr); }
.ye-konusmalar { display: none; }
.ye-kayit { border-left: 0; border-top: 1px solid var(--ye-cizgi); }
.ye-adimlar { gap: .5em; padding: 0 .9em; }
.ye-qr .ye-govde { grid-template-columns: minmax(0, 1fr); gap: .3em; }
.ye-qa-ok { justify-self: center; width: 1px; height: 1.6em; margin: 0; }
.ye-qa-ok::after { right: -.3em; top: auto; bottom: 0; transform: rotate(135deg); }
.ye-qa-ok i { display: none; }
.ye-hesap { min-height: 12em; }
}
/* =================== Ve dahası sahneleri (.yd-tuval; tools/yama/yazilim-ekranlar.html → dahasi-) ===================
Her sahne --sw × --sh em'lik bir sahnede çizilir; yazı boyu kutunun sahne alanından gelir (cqw/cqh), sahne alana sığar.
Varsayılan kurallar SON HÂLDİR (işini bitirmiş sahne). Hareket yalnız .yd-kutu.hazir iken (betik, hareketi azalt kapalı):
bütün parçalar aynı süreyle (--t) döner; anahtar karelerde iş ilk yarıda olur, sonra son hâl bekler, sonda sessizce başa döner.
Kutu görünmezken durur (.hazir:not(.canli)). .yd-sonuc: sahnenin sonucu (testler son hâlde görünür olduğunu denetler). */
.yd-sahne { position: relative; flex: 1; min-height: 0; container: yd / size; }
.yd-tuval { --sw: 24; --sh: 15; position: absolute; inset: 0; height: calc(var(--sh) * 1em); margin: auto 0; color: #C9D3DB;
font: 400 13px/1.3 'Archivo', sans-serif; font-size: min(calc(100cqw / var(--sw)), calc(100cqh / var(--sh))); } /* ilki: kap birimi olmayan tarayıcı */
.yd-ic { position: relative; width: calc(var(--sw) * 1em); height: 100%; margin: 0 auto; }
.yd-ic > div { position: absolute; inset: 0; }
.yd-ic i, .yd-ic em { font-style: normal; }
.yd-ic svg { overflow: visible; }
.yd-isik { position: absolute; left: var(--ix, 50%); top: var(--iy, 50%); width: 14em; height: 14em; margin: -7em 0 0 -7em; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, color-mix(in oklch, var(--v) 30%, transparent), transparent); opacity: .5; }
/* dokunuş: hedefinin ortasında durur, anahtar karelerde oraya gelir ve basar (halkası ::after) */
.yd-dokun { position: absolute; left: 50%; top: 50%; z-index: 3; width: 1.5em; height: 1.5em; margin: -.75em 0 0 -.75em; border: .1em solid #ffffffd9; border-radius: 50%;
background: #ffffff30; box-shadow: 0 .4em 1em -.3em #000; opacity: 0; pointer-events: none; }
.yd-dokun::after { content: ''; position: absolute; inset: -.1em; border: .1em solid #fff; border-radius: 50%; opacity: 0; }
.ym-tel { position: absolute; width: 7.8em; height: 13.8em; padding: .3em; border-radius: 1.45em; background: #141C23; box-shadow: inset 0 0 0 1px #2A3742, 0 1.4em 2.6em -1.2em #000; }
.ym-ekran { position: relative; height: 100%; overflow: hidden; border-radius: 1.18em; background: #05080B; }
.ym-centik { position: absolute; left: 50%; top: .62em; width: 2.2em; height: .52em; margin-left: -1.1em; border-radius: 1em; background: #000; }
/* --- Randevu: boş saate dokunulur, saat dolar, onay gelir --- */
.yd-randevu .yd-kutu { --v: #00A3E0; }
.yr .yd-isik { --ix: 18em; --iy: 10.4em; }
.yr-takvim { position: absolute; left: .9em; top: .9em; width: 14.4em; padding: .7em .8em .8em; border: 1px solid #1E2933; border-radius: .8em; background: #0B1217; box-shadow: 0 1em 2em -1.4em #000; }
.yr-ust { display: flex; align-items: center; justify-content: space-between; height: 1.4em; margin-bottom: .4em; }
.yr-ust b { color: #F1F5F8; font-size: .82em; font-weight: 700; }
.yr-ust svg { width: 1.6em; height: .6em; fill: none; stroke: #74828E; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.yr-izgara { display: grid; grid-template-columns: 2.3em repeat(5, minmax(0, 1fr)); grid-template-rows: 1.2em repeat(4, 1.85em); gap: .3em; }
.yr-gun { align-self: center; justify-self: center; color: #74828E; font-size: .62em; }
.yr-saat { align-self: center; color: #74828E; font-size: .62em; font-variant-numeric: tabular-nums; }
.yr-izgara > i { position: relative; border: 1px solid #1E2933; border-radius: .4em; }
.yr-izgara > i.d { border-color: transparent; background: #17212A; }
.yr-izgara > i.d::after { content: ''; position: absolute; left: .3em; right: .5em; top: .45em; height: .3em; border-radius: 1em; background: #2C3A46; }
.yr-dolu { position: absolute; inset: -1px; border-radius: .4em; background: var(--v); box-shadow: 0 0 1.2em -.1em color-mix(in oklch, var(--v) 75%, transparent); }
.yr-hedef > svg { position: absolute; left: 50%; top: 50%; width: 1em; height: 1em; margin: -.5em 0 0 -.5em; fill: none; stroke: #04131B; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.yr-onay { position: absolute; left: 12.2em; top: 8.9em; width: 11.2em; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .1em .6em; padding: .75em .85em;
border: 1px solid color-mix(in oklch, var(--v) 45%, #22303A); border-radius: .8em; background: #0E1A22; box-shadow: 0 1.2em 2.2em -1em #000, 0 0 2em -.6em color-mix(in oklch, var(--v) 50%, transparent); }
.yr-tik { grid-row: span 2; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--v); }
.yr-tik svg { width: 1em; height: 1em; fill: none; stroke: #04131B; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.yr-onay b { color: #F1F5F8; font-size: .72em; font-weight: 700; line-height: 1.2; }
.yr-onay small { color: #8FD3F0; font-size: .62em; }
/* --- Teklif ve sipariş: teklife onay damgası basılır, sipariş oluşur --- */
.yd-siparis .yd-kutu { --v: #5FD49A; }
.ys .yd-isik { --ix: 18.4em; --iy: 7.4em; }
.ys-belge { position: absolute; left: 1.5em; top: 1.4em; width: 8.6em; height: 12.2em; display: flex; flex-direction: column; gap: .5em; padding: .85em .8em; border-radius: .4em; background: #F2F5F7; box-shadow: 0 1.2em 2.2em -1.2em #000; }
.ys-belge-ust { display: flex; align-items: center; justify-content: space-between; padding-bottom: .45em; border-bottom: .12em solid #1A2229; }
.ys-belge-ust b { color: #1A2229; font-size: .8em; font-weight: 700; } .ys-belge-ust i { width: 1.6em; height: .55em; border-radius: .2em; background: #C9D1D8; }
.ys-c { display: block; width: var(--w); height: .36em; border-radius: 1em; background: #CDD4DA; }
.ys-tablo { display: grid; gap: .3em; margin-top: .2em; } .ys-tablo i { height: .95em; border-radius: .2em; background: #E2E7EB; }
.ys-toplam { display: flex; justify-content: flex-end; align-items: center; gap: .4em; margin-top: auto; }
.ys-toplam i { width: 2.2em; height: .4em; border-radius: 1em; background: #CDD4DA; } .ys-toplam b { width: 2.8em; height: .62em; border-radius: 1em; background: #1A2229; }
.ys-damga { position: absolute; left: 50%; top: 56%; padding: .25em .5em; border: .13em solid #1F9D60; border-radius: .35em; background: #1F9D6014; color: #1C9459; font-size: .92em; font-weight: 800;
letter-spacing: -.01em; white-space: nowrap; transform: translate(-50%, -50%) rotate(-12deg); }
.ys-ok { position: absolute; left: 10.7em; top: 7.1em; width: 2.6em; height: .8em; fill: none; stroke: color-mix(in oklch, var(--v) 75%, #3A4753); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ys-siparis { position: absolute; left: 13.9em; top: 2.4em; width: 9.2em; display: flex; flex-direction: column; gap: .6em; padding: .85em .8em .9em; border: 1px solid color-mix(in oklch, var(--v) 40%, #22303A);
border-radius: .8em; background: #0D161C; box-shadow: 0 1.2em 2.2em -1em #000, 0 0 2em -.8em color-mix(in oklch, var(--v) 60%, transparent); }
.ys-s-ust { display: flex; align-items: baseline; justify-content: space-between; } .ys-s-ust b { color: #F1F5F8; font-size: .8em; font-weight: 700; } .ys-s-ust small { color: #74828E; font-size: .6em; }
.ys-kalem { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); align-items: center; gap: .5em; }
.ys-resim { height: 1.5em; border-radius: .35em; background: linear-gradient(135deg, #2D4152, #16212A); } .ys-resim.r2 { background: linear-gradient(135deg, #3E3458, #1A1626); }
.ys-kalem > span { display: grid; gap: .3em; } .ys-kalem > span i { width: var(--w); height: .34em; border-radius: 1em; background: #2E3B46; }
.ys-adimlar { display: flex; align-items: center; margin-top: .25em; }
.ys-adimlar > i { flex: none; width: .66em; height: .66em; border: .12em solid #3A4753; border-radius: 50%; } .ys-adimlar > i.on { border-color: var(--v); background: var(--v); }
.ys-hat { position: relative; flex: 1; height: .12em; background: #2A3640; } .ys-hat i { position: absolute; inset: 0; background: var(--v); transform-origin: left; }
.ys-durum { color: var(--v); font-size: .7em; font-weight: 600; }
/* --- Online ödeme: kart ödemeye girer, ödenir, işletmeye bildirim düşer --- */
.yd-odeme .yd-kutu { --v: #5FD49A; }
.yo .yd-isik { --ix: 7.2em; --iy: 7.8em; }
.yo-kasa { position: absolute; left: 1.2em; top: .8em; width: 11.4em; height: 13.4em; display: flex; flex-direction: column; gap: .55em; padding: .85em .85em .9em; overflow: hidden;
border: 1px solid #1E2933; border-radius: .9em; background: #0B1217; box-shadow: 0 1.4em 2.6em -1.2em #000; }
.yo-ust { display: flex; align-items: center; justify-content: space-between; } .yo-ust b { color: #F1F5F8; font-size: .8em; font-weight: 700; }
.yo-ust svg { width: .8em; height: .95em; fill: none; stroke: #5FD49A; stroke-width: 1.3; }
.yo-kalem { display: grid; grid-template-columns: 1.4em minmax(0, 1fr) 1.6em; align-items: center; gap: .5em; }
.yo-resim { height: 1.4em; border-radius: .3em; background: linear-gradient(135deg, #E0AE4A, #9A5B2E); } .yo-resim.r2 { background: linear-gradient(135deg, #6C8FD6, #2B3F78); }
.yo-kalem > i + i { width: var(--w); height: .36em; border-radius: 1em; background: #2E3B46; } .yo-kalem b { height: .42em; border-radius: 1em; background: #4A5866; }
.yo-toplam { display: flex; align-items: center; justify-content: space-between; padding-top: .5em; border-top: 1px solid #1A252E; }
.yo-toplam small { color: #94A2AE; font-size: .62em; } .yo-toplam b { width: 2.6em; height: .55em; border-radius: 1em; background: #DCE6EE; }
.yo-alan { position: relative; display: flex; align-items: center; gap: .5em; height: 1.85em; margin-top: auto; padding: 0 .6em; border: 1px solid #22303A; border-radius: .5em; background: #081015; }
.yo-marka { flex: none; width: 1.4em; height: .95em; border-radius: .2em; background: linear-gradient(135deg, #A99FF8, #5B4FD9); }
.yo-bos { position: absolute; left: 2.6em; right: .6em; top: 50%; height: .36em; margin-top: -.18em; opacity: 0; } .yo-bos i { display: block; width: 70%; height: 100%; border-radius: 1em; background: #222D36; }
.yo-no { color: #EEF3F6; font-size: .66em; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yo-ode { position: relative; flex: none; display: grid; place-items: center; height: 1.9em; border-radius: .55em; background: #2E9E66; }
.yo-ode-yazi { color: #fff; font-size: .74em; font-weight: 700; }
.yo-donen { position: absolute; left: 50%; top: 50%; width: .95em; height: .95em; margin: -.475em 0 0 -.475em; border: .14em solid #ffffff55; border-top-color: #fff; border-radius: 50%; opacity: 0; }
.yo-tamam { position: absolute; inset: 2.4em 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; background: radial-gradient(circle at 50% 42%, #10261C, #0B1217 72%); }
.yo-tik { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: #2E9E66; box-shadow: 0 0 0 .5em #2E9E6626, 0 0 2.4em -.2em #5FD49A88; color: #fff; }
.yo-tik svg { width: 1.7em; height: 1.7em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.yo-tamam b { color: #F1F5F8; font-size: 1.05em; font-weight: 700; }
.yo-kart { position: absolute; left: 14.4em; top: 1.5em; width: 8em; height: 5.1em; display: flex; flex-direction: column; justify-content: space-between; padding: .7em .75em; border-radius: .65em;
background: linear-gradient(135deg, #8F84F5, #4B3FC2 60%, #2A2370); box-shadow: 0 1.2em 2em -1em #000, inset 0 0 0 1px #ffffff22; transform: rotate(7deg); opacity: 0; }
.yo-cip { width: 1.2em; height: .9em; border-radius: .2em; background: linear-gradient(135deg, #EADCAA, #B89A55); }
.yo-kart span { color: #F1EEFF; font-size: .62em; font-weight: 600; letter-spacing: .06em; }
.yo-logo { position: absolute; right: .7em; bottom: .6em; width: 1.5em; height: .9em; background: radial-gradient(circle at 32% 50%, #ffffffaa 0 .44em, transparent .46em), radial-gradient(circle at 68% 50%, #ffffff66 0 .44em, transparent .46em); }
.yo-bildirim { position: absolute; left: 13.5em; top: 8.7em; width: 9.8em; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .1em .55em; padding: .7em .8em;
border: 1px solid #22303A; border-radius: .8em; background: #0E161C; box-shadow: 0 1.2em 2.2em -1em #000; }
.yo-zil { grid-row: span 2; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: .45em; background: #2E9E6633; color: #5FD49A; }
.yo-zil svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.yo-bildirim b { color: #F1F5F8; font-size: .72em; font-weight: 700; } .yo-bildirim small { color: #94A2AE; font-size: .58em; white-space: nowrap; }
/* --- Mobil uygulama: telefona bildirim düşer, telefon titrer, uygulamanın simgesinde rozet --- */
.yd-mobil .yd-kutu { --v: #aaa0ff; }
.ym .yd-isik { --ix: 12em; --iy: 4.6em; }
.ym-tel { left: 8.1em; top: .6em; }
.ym-ekran { display: flex; flex-direction: column; padding: .55em .65em .55em; background: radial-gradient(130% 80% at 30% 0%, #2A2160, #0B0F1E 62%, #05070C); }
.ym-durum { display: flex; align-items: center; justify-content: space-between; height: .9em; padding: 0 .35em; } .ym-durum b { color: #F1F5F8; font-size: .5em; font-weight: 700; }
.ym-durum i { width: 1em; height: .42em; border: 1px solid #F1F5F8aa; border-radius: .15em; }
.ym-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55em .5em; margin-top: 3.1em; padding: 0 .1em; }
.ym-izgara i { position: relative; aspect-ratio: 1; border-radius: .38em; background: #ffffff16; } .ym-izgara i:nth-child(3n+2) { background: #ffffff22; } .ym-izgara i:nth-child(4n) { background: #ffffff10; }
.ym-izgara .ym-bizim { background: linear-gradient(135deg, #aaa0ff, #00A3E0); box-shadow: 0 0 1em -.1em #aaa0ff99; }
.ym-rozet { position: absolute; right: -.5em; top: -.5em; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: #E5484D; color: #fff; font-size: .5em; font-weight: 700; }
.ym-dok { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; margin-top: auto; padding: .45em; border-radius: .7em; background: #ffffff12; }
.ym-dok i { aspect-ratio: 1; border-radius: .35em; background: #ffffff24; }
.ym-bildirim { position: absolute; left: 3.8em; top: 2.5em; width: 16.4em; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65em; padding: .7em .8em;
border: 1px solid #ffffff1c; border-radius: 1em; background: #161D29f2; box-shadow: 0 1.4em 2.6em -1em #000, 0 0 2.4em -.8em color-mix(in oklch, var(--v) 60%, transparent); }
.ym-simge { width: 2em; height: 2em; border-radius: .55em; background: linear-gradient(135deg, #aaa0ff, #00A3E0); }
.ym-bildirim span { display: grid; gap: .12em; min-width: 0; } .ym-bildirim b { color: #F1F5F8; font-size: .78em; font-weight: 700; white-space: nowrap; }
.ym-bildirim small { overflow: hidden; color: #A6B2BC; font-size: .64em; white-space: nowrap; text-overflow: ellipsis; }
.ym-bildirim em { align-self: start; color: #74828E; font-size: .56em; }
@media (prefers-reduced-motion: no-preference) {
.yd-kutu.hazir .yd-ic { animation: yd-saat var(--t) linear infinite; }
.yd-kutu.hazir .yd-dokun::after { animation: yd-dalga var(--t) ease-out infinite both; }
/* Randevu */
.yd-kutu.hazir .yr .yd-isik { animation: yr-isik var(--t) ease-in-out infinite; }
.yd-kutu.hazir .yr .yd-dokun { animation: yr-dokun var(--t) var(--egri) infinite; }
.yd-kutu.hazir .yr .yd-dokun::after { animation-delay: calc(var(--t) * .215); }
.yd-kutu.hazir .yr-dolu { animation: yr-dolu var(--t) var(--egri) infinite; }
.yd-kutu.hazir .yr-hedef > svg { animation: yr-tikli var(--t) var(--egri) infinite; }
.yd-kutu.hazir .yr-onay { animation: yr-onay var(--t) var(--egri) infinite; }
/* Teklif ve sipariş */
.yd-kutu.hazir .ys .yd-isik { animation: ys-isik var(--t) ease-in-out infinite; }
.yd-kutu.hazir .ys-damga { animation: ys-damga var(--t) cubic-bezier(.5, 0, .2, 1) infinite; }
.yd-kutu.hazir .ys-belge { animation: ys-belge var(--t) ease-out infinite; }
.yd-kutu.hazir .ys-ok { animation: ys-ok var(--t) var(--egri) infinite; }
.yd-kutu.hazir .ys-siparis { animation: ys-siparis var(--t) var(--egri) infinite; }
.yd-kutu.hazir .ys-hat i { animation: ys-hat var(--t) var(--egri) infinite; }
.yd-kutu.hazir .ys-ikinci { animation: ys-ikinci var(--t) linear infinite; }
.yd-kutu.hazir .ys-durum { animation: ys-durum var(--t) ease-out infinite; }
/* Online ödeme */
.yd-kutu.hazir .yo .yd-isik { animation: yo-isik var(--t) ease-in-out infinite; }
.yd-kutu.hazir .yo-kart { animation: yo-kart var(--t) cubic-bezier(.55, 0, .25, 1) infinite; }
.yd-kutu.hazir .yo-bos { animation: yo-bos var(--t) linear infinite; }
.yd-kutu.hazir .yo-no { animation: yo-no var(--t) linear infinite; }
.yd-kutu.hazir .yo-ode .yd-dokun { animation: yo-dokun var(--t) var(--egri) infinite; }
.yd-kutu.hazir .yo-ode .yd-dokun::after { animation-delay: calc(var(--t) * .285); }
.yd-kutu.hazir .yo-ode { animation: yo-ode var(--t) ease-out infinite; }
.yd-kutu.hazir .yo-ode-yazi { animation: yo-ode-yazi var(--t) linear infinite; }
.yd-kutu.hazir .yo-donen { animation: yo-donen var(--t) linear infinite; }
.yd-kutu.hazir .yo-tamam { animation: yo-tamam var(--t) ease-out infinite; }
.yd-kutu.hazir .yo-tik { animation: yo-tik var(--t) cubic-bezier(.3, 1.5, .5, 1) infinite; }
.yd-kutu.hazir .yo-bildirim { animation: yo-bildirim var(--t) var(--egri) infinite; }
/* Mobil uygulama */
.yd-kutu.hazir .ym .yd-isik { animation: ym-isik var(--t) ease-in-out infinite; }
.yd-kutu.hazir .ym-bildirim { animation: ym-bildirim var(--t) var(--egri) infinite; }
.yd-kutu.hazir .ym-tel { animation: ym-titre var(--t) linear infinite; }
.yd-kutu.hazir .ym-rozet { animation: ym-rozet var(--t) cubic-bezier(.3, 1.5, .5, 1) infinite; }
}
@keyframes yd-saat { from, to { opacity: 1; } }
@keyframes yd-dalga { 0% { opacity: .9; transform: scale(1); } 6%, 100% { opacity: 0; transform: scale(2.6); } }
/* Randevu */
@keyframes yr-isik { 0%, 30% { opacity: .15; } 40% { opacity: .95; } 55%, 92% { opacity: .5; } 100% { opacity: .15; } }
@keyframes yr-dokun { 0%, 8% { opacity: 0; transform: translate(6em, 3.4em); } 11% { opacity: 1; transform: translate(5.2em, 3em); } 20% { opacity: 1; transform: none; }
21.5% { transform: scale(.78); } 23% { opacity: 1; transform: none; } 30%, 100% { opacity: 0; transform: translate(1.6em, 2.4em); } }
@keyframes yr-dolu { 0%, 21% { opacity: 0; transform: scale(.5); } 25%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yr-tikli { 0%, 23% { opacity: 0; transform: scale(.3); } 27%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes yr-onay { 0%, 29% { opacity: 0; transform: translate(.8em, .8em) scale(.94); } 38%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(.4em); } }
/* Teklif ve sipariş */
@keyframes ys-isik { 0%, 26% { opacity: .15; } 36% { opacity: .95; } 52%, 92% { opacity: .5; } 100% { opacity: .15; } }
@keyframes ys-damga { 0%, 11% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(2.1); } 15.5% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(.94); }
17.5%, 92% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg); } 97%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg); } }
@keyframes ys-belge { 0%, 15.2% { transform: none; } 16% { transform: translateY(.18em) scale(.99); } 18.5%, 100% { transform: none; } }
@keyframes ys-ok { 0%, 22% { opacity: 0; transform: translateX(-.8em); } 28%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes ys-siparis { 0%, 25% { opacity: 0; transform: translateX(-1.4em) scale(.95); } 34%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes ys-hat { 0%, 38% { transform: scaleX(0); } 44%, 100% { transform: none; } }
@keyframes ys-ikinci { 0%, 43.5% { border-color: #3A4753; background: transparent; } 45%, 100% { border-color: var(--v); background: var(--v); } }
@keyframes ys-durum { 0%, 44% { opacity: 0; } 48%, 100% { opacity: 1; } }
/* Online ödeme */
@keyframes yo-isik { 0%, 40% { opacity: .15; } 48% { opacity: .95; } 60%, 92% { opacity: .5; } 100% { opacity: .15; } }
@keyframes yo-kart { 0%, 6% { opacity: 1; transform: rotate(7deg); } 19% { opacity: 1; transform: translate(-15em, 5.9em) scale(.3); } 20.5%, 95% { opacity: 0; transform: translate(-15em, 5.9em) scale(.3); }
95.5% { opacity: 0; transform: translate(1.2em, -.4em) rotate(7deg); } 100% { opacity: 1; transform: rotate(7deg); } }
@keyframes yo-bos { 0%, 17.5% { opacity: 1; } 19.5%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes yo-no { 0%, 17.5% { opacity: 0; } 20%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes yo-dokun { 0%, 21% { opacity: 0; transform: translate(1.8em, 1.6em); } 23.5% { opacity: 1; } 27% { opacity: 1; transform: none; } 28.5% { transform: scale(.78); }
30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translate(1em, 1.6em); } }
@keyframes yo-ode { 0%, 28% { transform: none; } 29% { transform: scale(.96); } 31%, 100% { transform: none; } }
@keyframes yo-ode-yazi { 0%, 29.5% { opacity: 1; } 31%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes yo-donen { 0%, 30% { opacity: 0; transform: none; } 31% { opacity: 1; } 42% { opacity: 1; transform: rotate(1080deg); } 43%, 100% { opacity: 0; transform: rotate(1080deg); } }
@keyframes yo-tamam { 0%, 42% { opacity: 0; } 46%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes yo-tik { 0%, 42% { transform: scale(.3); } 48%, 100% { transform: none; } }
@keyframes yo-bildirim { 0%, 50% { opacity: 0; transform: translateX(1.2em); } 57%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
/* Mobil uygulama */
@keyframes ym-isik { 0%, 12% { opacity: .15; } 22% { opacity: .95; } 40%, 92% { opacity: .5; } 100% { opacity: .15; } }
@keyframes ym-bildirim { 0%, 12% { opacity: 0; transform: translateY(-1.8em) scale(.94); } 17% { opacity: 1; transform: translateY(.18em); } 19.5%, 92% { opacity: 1; transform: none; }
97%, 100% { opacity: 0; transform: translateY(-.6em); } }
@keyframes ym-titre { 0%, 18% { transform: none; } 19% { transform: rotate(-2.4deg); } 20% { transform: rotate(2.4deg); } 21% { transform: rotate(-2deg); } 22% { transform: rotate(2deg); }
23% { transform: rotate(-1deg); } 24%, 100% { transform: none; } }
@keyframes ym-rozet { 0%, 25% { opacity: 0; transform: scale(.2); } 29%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
/* görünmeyen kutu durur (en sonda ve kesin; kısaltma oynatma durumunu sıfırlar) */
.yd-kutu.hazir:not(.canli) *, .yd-kutu.hazir:not(.canli) *::before, .yd-kutu.hazir:not(.canli) *::after { animation-play-state: paused !important; }
/* ---------- dar ekranlar ---------- */
@media (max-width: 1199px) {
.yd { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 330px; grid-template-areas: "randevu siparis" "odeme mobil"; }
}
@media (max-width: 620px) {
.yg-liste { grid-template-columns: minmax(0, 1fr); }
.yd { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-auto-rows: auto; }
.yd .yd-yer { grid-area: auto; }
.yd-sahne { flex: none; aspect-ratio: 16 / 10.4; }
.yd-etiket:empty { display: none; }
}
@media (max-width: 1099px) {
.yot-gruplar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yz-sahne { grid-template-columns: minmax(0, 1fr); }
.yz-giris { padding-bottom: 40px; }
.yh { grid-column: 1; grid-row: 3; position: relative; top: auto; width: min(100%, 900px); margin: 0 auto clamp(30px, 6vw, 60px); }
.yz-sahne.bantta .yh { opacity: 1; pointer-events: auto; } /* dar ekranda harita bantla üst üste gelmez */
.yh-alan { width: 100%; }
.yz-projeler { grid-row: 4; }
.yzd { margin-bottom: clamp(36px, 6vw, 60px); }
.yz-bolum { min-height: 0; }
}
@media (max-width: 760px) {
.katalog-sayfa.yz-sayfa { padding-top: 115px; }
.yot-gruplar { grid-template-columns: minmax(0, 1fr); }
.yz-ilkeler { grid-template-columns: minmax(0, 1fr); }
.yz-ilkeler ol { grid-template-columns: minmax(0, 1fr); }
.yz-teklif-ust { display: block; } .yz-teklif-ust p { margin-top: 12px; }
.yz-ts { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 0; }
.yz-eylem { flex-direction: column; align-items: flex-start; }
/* bant: telefonda sütunlar alt alta; simge solda, ad + cümle + bağlantı sağda */
.yzd-sutunlar { grid-template-columns: minmax(0, 1fr); gap: 0; }
.yzd-sutun { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px 0; }
.yzd-sutun:last-child { padding-bottom: 0; }
.yzd-simge { grid-row: 1 / span 3; margin: 0; }
.yzd-ad, .yzd-cumle, .yzd-bag { grid-column: 2; }
.yzd .yzd-ad { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
.yz-sayfa *, .yz-sayfa *::before, .yz-sayfa *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) { .yh-akis, .yh-hale, .yh-vantuz { display: none; } .yh-et { fill: CanvasText; } }