:root { color-scheme: dark; }
html { scroll-behavior: smooth; }

/* display düşük özgüllükle (:where) verilir: .hidden / .sm:inline-flex gibi yardımcı sınıflar üstün gelsin */
:where(.btn-primary, .btn-ghost) { display: inline-flex; }
.btn-primary, .btn-ghost {
  align-items: center; justify-content: center; gap: .5rem;
  border-radius: 9999px; padding: .65rem 1.4rem; font-size: .9rem; font-weight: 600;
  transition: transform .2s, background-color .2s, box-shadow .2s;
}
.btn-primary { background: #40c9a2; color: #0c1411; box-shadow: 0 0 30px -8px #40c9a2; }
.btn-primary:hover { background: #57e2ba; transform: translateY(-1px); }
.btn-ghost { border: 1px solid #40c9a2; color: #efedfd; background: rgba(64,201,162,.05); }
.btn-ghost:hover { background: rgba(64,201,162,.15); }

.card {
  border: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.03);
  border-radius: 1.5rem;
}
.glow-text {
  background: linear-gradient(90deg, #a7ffe6, #40c9a2, #a7ffe6); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 3.5s linear infinite;
}
.hero-bg {
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(64,201,162,.18), transparent 70%),
    linear-gradient(180deg, #171e24, #12171c);
}
.grid-lines {
  background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-marquee, .glow-text { animation: none !important; }
}
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .chev { transform: rotate(180deg); }

/* ============================================================
   Animasyonlar (site, giriş/kayıt ve panel ortak). Hepsi prefers-reduced-motion'a saygı duyar.
   ============================================================ */
:root { --ease: cubic-bezier(.22, .8, .24, 1); }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes float { 50% { transform: translateY(-9px); } }
@keyframes drift-a { to { transform: translate(70px, 50px) scale(1.18); } }
@keyframes drift-b { to { transform: translate(-60px, -40px) scale(1.12); } }
@keyframes bar-up { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 30px -8px #40c9a2; } 50% { box-shadow: 0 0 46px -4px rgba(64,201,162,.85); } }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes line-sweep { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.anim-in { animation: rise .7s var(--ease) var(--d, 0ms) both; }
.anim-pop { animation: pop .6s var(--ease) var(--d, 0ms) both; }
.float-slow { animation: float 7s ease-in-out infinite; }
.bar-grow { transform-origin: bottom; animation: bar-up .9s var(--ease) calc(350ms + var(--i, 0) * 55ms) backwards; }
.btn-pulse { animation: glow-pulse 3.2s ease-in-out infinite; }

/* Hero sözcük sözcük giriş */
.word { display: inline-block; animation: rise .8s var(--ease) var(--d, 0ms) both; }

/* Süzülen renkli küreler */
.orb { position: absolute; border-radius: 9999px; filter: blur(70px); opacity: .5; pointer-events: none; will-change: transform; }
.orb-a { width: 22rem; height: 22rem; top: -7rem; left: -5rem; background: radial-gradient(circle, rgba(64,201,162,.6), transparent 70%); animation: drift-a 14s ease-in-out infinite alternate; }
.orb-b { width: 18rem; height: 18rem; bottom: -5rem; right: -4rem; background: radial-gradient(circle, rgba(99,102,241,.45), transparent 70%); animation: drift-b 18s ease-in-out infinite alternate; }

/* Kaydırma ile belirme: yön ve kademe varyantları */
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
.reveal-left { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-scale { transform: scale(.94); }
.reveal-left.is-visible, .reveal-right.is-visible, .reveal-scale.is-visible { transform: none; }

/* Düğmeler: parlama süpürmesi, basma geri bildirimi */
.btn-primary, .btn-ghost { position: relative; overflow: hidden; transition: transform .25s var(--ease), background-color .2s, box-shadow .25s, border-color .2s; }
.btn-primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%); transform: translateX(-130%); transition: transform .8s var(--ease); }
.btn-primary:hover::after { transform: translateX(130%); }
.btn-primary:active, .btn-ghost:active { transform: translateY(0) scale(.97); }
.btn-ghost:hover { transform: translateY(-1px); }

/* Kartlar: yükselme + imleci izleyen ışık */
.card { transition: border-color .3s, background-color .3s, transform .4s var(--ease), box-shadow .4s var(--ease); }
.spot { position: relative; }
.spot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(64,201,162,.13), transparent 62%); }
.spot:hover::before { opacity: 1; }
.lift:hover { transform: translateY(-4px); border-color: rgba(64,201,162,.35); box-shadow: 0 22px 50px -26px rgba(64,201,162,.4); }

/* Sticky site başlığı: kaydırınca bulanık zemin ve küçülme */
.site-header-wrap { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; transition: background-color .35s, border-color .35s, backdrop-filter .35s; }
.site-header-wrap > header.site-header { transition: padding .35s var(--ease); }
body.is-scrolled .site-header-wrap { background: rgba(18,23,28,.8); border-bottom-color: rgba(255,255,255,.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
body.is-scrolled .site-header-wrap > header.site-header { padding-top: .8rem; padding-bottom: .8rem; }

/* Kaydırma ilerleme çubuğu */
#scroll-progress { position: fixed; top: 0; left: 0; z-index: 70; width: 100%; height: 2px; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #40c9a2, #a7ffe6); pointer-events: none; }

/* Sekme paneli geçişi */
[role=tabpanel]:not(.hidden) { animation: panel-in .45s var(--ease); }

/* SSS: açılırken içerik hafifçe kayar */
details[open] > :not(summary) { animation: rise .35s var(--ease); }
.chev { transition: transform .3s var(--ease); }

/* Kayan şerit: üzerine gelince dur */
.animate-marquee:hover { animation-play-state: paused; }

/* 3B eğim */
[data-tilt] { transition: transform .25s var(--ease); transform-style: preserve-3d; will-change: transform; }

/* Sayfa geçişleri (View Transitions): tarayıcı destekliyorsa sayfalar arası yumuşak geçiş */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; animation-timing-function: var(--ease); }
.site-header-wrap { view-transition-name: site-header; }

/* Odak halkası (klavye erişilebilirliği) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #40c9a2; outline-offset: 2px; }

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .orb, .float-slow, .btn-pulse { animation: none !important; }
  @view-transition { navigation: none; }
}

/* ============================================================
   Logo
   ============================================================ */
.logo-link { display: inline-flex; align-items: center; gap: .6rem; }
.logo-word { font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #efedfd; }
.logo-word .ads { background: linear-gradient(90deg, #a7ffe6, #40c9a2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-mark { flex-shrink: 0; filter: drop-shadow(0 6px 16px rgba(64,201,162,.28)); transition: transform .45s var(--ease), filter .45s var(--ease); }
.logo-link:hover .logo-mark { transform: translateY(-1px) rotate(-4deg) scale(1.05); filter: drop-shadow(0 8px 24px rgba(64,201,162,.5)); }
.logo-mark .ls { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease); }
.logo-link:hover .logo-mark .ls { transform: rotate(90deg) scale(1.18); }
/* Açılış animasyonu: M soldan sağa çizilir, parıltı döne döne belirir (fill: backwards → bitince doğal stil, hover çalışır) */
.logo-anim .lm { stroke-dasharray: 100; animation: logo-draw 1s var(--ease) .15s backwards; }
.logo-anim .ls { animation: logo-star .8s var(--ease) 1s backwards; }
@keyframes logo-draw { from { stroke-dashoffset: 100; opacity: 0; } 6% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes logo-star { from { opacity: 0; transform: scale(0) rotate(-120deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .logo-anim .lm, .logo-anim .ls { animation: none !important; } .logo-link:hover .logo-mark, .logo-link:hover .logo-mark .ls { transform: none; } }

/* Logo: konsept başına animasyonlar (B: iki ok sırayla çizilir; C: çubuklar büyür) ve açık zemin varyantı */
.logo-anim .lm { animation-delay: calc(.15s + var(--i, 0) * .28s); }
.logo-mark .lb { transform-box: fill-box; transform-origin: bottom; }
.logo-anim .lb { animation: bar-up .8s var(--ease) calc(.2s + var(--i, 0) * .14s) backwards; }
.logo-link:hover .logo-mark .lb { animation: logo-wave .7s var(--ease) calc(var(--i, 0) * .08s); }
@keyframes logo-wave { 40% { transform: scaleY(1.12); } }
.logo-link:hover .logo-mark circle.ls { transform: scale(1.5); }
.logo-on-light .logo-word { color: #12171c; }
.logo-on-light .logo-word .ads { background: none; color: #1f9e80; -webkit-text-fill-color: #1f9e80; }
@media (prefers-reduced-motion: reduce) { .logo-anim .lb { animation: none !important; } .logo-link:hover .logo-mark .lb { animation: none; } }

/* Geliştirme: logo konsept değiştirici */
.logo-switcher { position: fixed; left: 12px; bottom: 12px; z-index: 90; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 9999px; background: rgba(23,29,35,.92); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 12px; font-weight: 700; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.logo-switcher span { padding: 0 8px 0 10px; font-weight: 600; opacity: .6; }
.logo-switcher a { display: grid; place-items: center; min-width: 28px; height: 28px; border-radius: 9999px; color: #efedfd; transition: background-color .2s, color .2s; }
.logo-switcher a:hover { background: rgba(255,255,255,.1); }
.logo-switcher a[aria-current] { background: #40c9a2; color: #0c1411; }

/* ============================================================
   Sinematik efektler (ana sayfa)
   ============================================================ */

/* Platform şeridi: simgeler sırayla renklenir, etiket genişleyerek açılır */
.fx-platforms { display: flex; align-items: center; gap: .2rem; width: fit-content; max-width: 100%; margin: 0 auto 2.5rem; padding: .4rem; border-radius: 9999px; overflow-x: auto; scrollbar-width: none;
  border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 24px 60px -34px rgba(0,0,0,.7); }
.fx-platforms::-webkit-scrollbar { display: none; }
.fx-plat button { display: flex; align-items: center; gap: .55rem; height: 2.75rem; padding: 0 .85rem; border-radius: 9999px; color: rgba(239,237,253,.4); white-space: nowrap;
  transition: color .45s, background-color .45s, padding .55s var(--ease), box-shadow .45s; }
.fx-plat button:hover { color: rgba(239,237,253,.85); }
.fx-plat-label { max-width: 0; opacity: 0; overflow: hidden; font-size: .9rem; font-weight: 600; color: #efedfd; transition: max-width .6s var(--ease), opacity .4s .08s; }
.fx-plat.is-active button { color: var(--c); background: rgba(255,255,255,.075); padding: 0 1.15rem 0 .95rem; box-shadow: 0 0 28px -8px var(--c); }
.fx-plat.is-active .fx-plat-label { max-width: 8rem; opacity: 1; }
.fx-plat.is-active svg { animation: pop .5s var(--ease); }

/* Düğmeler: periyodik ışık süpürmesi */
.btn-sheen { position: relative; overflow: hidden; }
.btn-sheen::before { content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; transform: translateX(-150%); animation: sheen 5.5s var(--ease) 2.4s infinite;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.6) 50%, transparent 62%); }
.btn-ghost.btn-sheen::before { background: linear-gradient(105deg, transparent 38%, rgba(64,201,162,.4) 50%, transparent 62%); animation-delay: 4.2s; }
@keyframes sheen { 0%, 58% { transform: translateX(-150%); } 100% { transform: translateX(150%); } }
.btn-ghost { border-width: 1.5px; box-shadow: inset 0 0 24px rgba(64,201,162,.07); background-image: linear-gradient(135deg, rgba(64,201,162,.09), rgba(255,255,255,.025)); }

/* Maskot: butonun arkasında saklı karınca (PNG); "Toplantı Planla"ya tıklayınca üstüne çıkar, sonra sayfa açılır */
.fx-mascot-wrap { position: relative; display: inline-flex; }
.fx-mascot { position: absolute; left: 50%; bottom: calc(100% - 6px); width: 7.6rem; margin-left: -3.8rem; z-index: 3; pointer-events: none; perspective: 600px;
  opacity: 0; transform: translateY(80%) scale(.85); transition: transform .65s cubic-bezier(.34,1.56,.64,1), opacity .2s; }
.fx-mascot.is-up { opacity: 1; transform: none; }
.fx-m3d, .fx-m3d-idle { display: block; transform-style: preserve-3d; transform-origin: 50% 100%; }
.fx-m3d { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out; }
.fx-mascot.is-up .fx-m3d-idle { animation: m-idle 6.4s ease-in-out .7s infinite; }
@keyframes m-idle { 0%, 100% { transform: rotateZ(-1.2deg) translateY(0); } 50% { transform: rotateZ(1.2deg) translateY(-2px); } }
.fx-mascot img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); user-select: none; }
.fx-mascot.is-up img { filter: drop-shadow(0 6px 14px rgba(64,201,162,.45)); }
/* Avatar yığını */
.fx-avatars { display: inline-flex; }
.fx-avatars i { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; margin-left: -.75rem; border-radius: 9999px; border: 2px solid #12171c; box-shadow: 0 0 0 2px rgba(255,255,255,.92);
  font-style: normal; font-weight: 700; font-size: .85rem; color: #0c1411; }
.fx-avatars i:first-child { margin-left: 0; }

/* Hero: imleci izleyen ışık, süzülen ışık huzmesi, film greni */
.fx-hero { --hx: 50%; --hy: 28%; }
.fx-spot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s; background: radial-gradient(540px circle at var(--hx) var(--hy), rgba(167,255,230,.11), transparent 62%); }
.fx-hero:hover .fx-spot { opacity: 1; }
.fx-beam { position: absolute; inset: -20% -10%; pointer-events: none; mix-blend-mode: screen; transform: translateX(-32%); animation: beam 13s ease-in-out infinite alternate;
  background: linear-gradient(100deg, transparent 36%, rgba(167,255,230,.06) 44%, rgba(64,201,162,.11) 50%, transparent 58%); }
@keyframes beam { to { transform: translateX(32%); } }
.fx-grain { position: absolute; inset: -10%; pointer-events: none; opacity: .08; mix-blend-mode: overlay; animation: grain 1.2s steps(6) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } }

/* AI adımları: kaydırdıkça sırayla aydınlanır, ilerleme çizgisi dolar */
.fx-steps { position: relative; }
.fx-steps::before, .fx-steps::after { content: ""; position: absolute; left: 2.1rem; top: 1.2rem; width: 2px; border-radius: 2px; }
.fx-steps::before { bottom: 1.2rem; background: rgba(255,255,255,.07); }
.fx-steps::after { height: calc((100% - 2.4rem) * var(--p, 0)); background: linear-gradient(#a7ffe6, #40c9a2); box-shadow: 0 0 14px rgba(64,201,162,.75); }
.fx-steps li { opacity: .5; transition: opacity .6s, border-color .6s, transform .6s var(--ease), box-shadow .6s; }
.fx-steps li > span:first-child { position: relative; z-index: 1; transition: background-color .5s, color .5s, box-shadow .6s; }
.fx-steps li.lit { opacity: 1; border-color: rgba(64,201,162,.35); transform: translateX(4px); box-shadow: 0 14px 44px -22px rgba(64,201,162,.6); }
.fx-steps li.lit > span:first-child { background: #40c9a2; color: #0c1411; box-shadow: 0 0 24px rgba(64,201,162,.65); }

/* Sektör karuseli */
.fx-carousel { outline: none; }
.fx-carousel:focus-visible .fx-stage { outline: 2px solid #40c9a2; outline-offset: 8px; border-radius: 1.5rem; }
.fx-stage { position: relative; height: 26.5rem; padding-block: 1rem; touch-action: pan-y; user-select: none; }
.fx-slide { --x: 0%; --s: .92; --o: 0; position: absolute; top: 1rem; left: 50%; width: min(25rem, 78vw); height: 24.5rem; padding: 1.75rem 1.75rem 1rem; backface-visibility: hidden; transform-origin: 50% 50%; border-radius: 1.75rem; cursor: pointer; will-change: transform, opacity;
  border: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), #131920;
  transform: translateX(calc(-50% + var(--x))) scale(var(--s)); opacity: var(--o);
  transition: transform 1.05s cubic-bezier(.65, 0, .25, 1), opacity 1.05s cubic-bezier(.65, 0, .25, 1), border-color .8s, box-shadow 1s; }
.fx-slide[data-pos="0"] { --x: 0%; --s: 1.03; --o: 1; z-index: 3; cursor: default; border-color: color-mix(in srgb, var(--c) 50%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 16%, transparent), 0 34px 90px -34px var(--c); }
.fx-slide[data-pos="-1"] { --x: -106%; --s: .92; --o: .5; z-index: 2; }
.fx-slide[data-pos="1"] { --x: 106%; --s: .92; --o: .5; z-index: 2; }
.fx-slide[data-pos="-2"] { --x: -212%; --s: .84; --o: 0; pointer-events: none; }
.fx-slide[data-pos="2"] { --x: 212%; --s: .84; --o: 0; pointer-events: none; }
.fx-slide-title { display: flex; align-items: center; gap: .7rem; font-size: 1.4rem; font-weight: 700; color: rgba(239,237,253,.82); transition: color .7s; }
.fx-slide[data-pos="0"] .fx-slide-title { color: var(--c); }
.fx-list { height: 15.5rem; margin-top: 1.2rem; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(transparent, #000 24%, #000 76%, transparent); }
.fx-list ul { transition: transform .9s cubic-bezier(.65, 0, .25, 1); }
.fx-list li { display: flex; align-items: center; gap: .75rem; height: 3rem; font-size: 1.05rem; color: rgba(239,237,253,.3); transition: color .5s; }
.fx-list li svg { color: rgba(239,237,253,.22); transition: color .5s; }
.fx-list li.on { color: #efedfd; }
.fx-list li.on svg { color: var(--c); }
.fx-progress { display: flex; justify-content: center; gap: .4rem; margin-top: 2rem; }
.fx-progress button { position: relative; width: 3.4rem; height: 1.4rem; padding: 0; }
.fx-progress button::before, .fx-progress i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: .28rem; margin-top: -.14rem; border-radius: 9999px; }
.fx-progress button::before { background: rgba(255,255,255,.1); }
.fx-progress i { transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #a7ffe6, #40c9a2); box-shadow: 0 0 12px rgba(64,201,162,.55); }
.fx-progress button.is-done i { transform: scaleX(1); opacity: .55; }
.fx-progress button.is-on i { animation: fx-fill var(--dur, 4.8s) linear forwards; }
.fx-carousel.is-paused .fx-progress .is-on i { animation-play-state: paused; }
@keyframes fx-fill { to { transform: scaleX(1); } }
@media (max-width: 640px) { .fx-stage { height: 26rem; } .fx-slide[data-pos="-1"] { --x: -102%; } .fx-slide[data-pos="1"] { --x: 102%; } }
/* Dar ekranda butonlar alt alta dizilir: maskot yerine temiz görünüm */
@media (max-width: 639px) { .fx-mascot { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .btn-sheen::before, .fx-beam, .fx-grain, .fx-mascot, .fx-m3d-idle { animation: none !important; }
  .fx-slide, .fx-list ul { transition-duration: .01ms !important; }
}

/* Hero vitrini: AI Sihirbaz animasyonu (yalnızca CSS; gerçek veri göstermez) */
.sc { position: relative; margin: 0 auto; max-width: 1040px; min-height: 470px; }
.sc-win { position: relative; z-index: 2; margin: 0 auto; max-width: 560px; border-radius: 28px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(160deg, rgba(20,29,34,.96), rgba(12,17,21,.98)); padding: 14px 18px 22px; text-align: left; box-shadow: 0 0 90px -24px rgba(64,201,162,.45), 0 30px 80px -30px rgba(0,0,0,.8); }
.sc-bar { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; font-size: 12px; opacity: .8; }
.sc-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.sc-bar b { margin-left: 8px; font-weight: 600; color: #e9f5f1; }
.sc-url { display: flex; align-items: center; gap: 10px; border-radius: 16px; border: 1px solid rgba(64,201,162,.35); background: rgba(64,201,162,.06); padding: 12px 14px; font-size: 14px; color: #e9f5f1; }
.sc-url span { overflow: hidden; white-space: nowrap; width: 0; border-right: 2px solid #40c9a2; animation: scType 16s steps(20, end) infinite; }
.sc-steps { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sc-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; opacity: .35; animation: scLit 16s infinite; animation-delay: calc(var(--i) * 2.4s + 1.6s); }
.sc-steps li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(64,201,162,.5); color: #0c1411; font-size: 12px; font-style: normal; animation: scTick 16s infinite; animation-delay: calc(var(--i) * 2.4s + 1.6s); }
.sc-done { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 14px; background: rgba(64,201,162,.12); padding: 10px 14px; font-size: 13px; font-weight: 600; color: #7ff0cb; opacity: .25; animation: scDone 16s infinite; animation-delay: 11.2s; }
.sc-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; border-radius: 16px; border: 1px solid rgba(255,255,255,.1); background: rgba(18,26,31,.92); padding: 10px 14px; font-size: 13px; color: #e9f5f1; box-shadow: 0 18px 50px -22px rgba(0,0,0,.9); animation: float 7s ease-in-out infinite; animation-delay: var(--d, 0s); white-space: nowrap; }
.sc-chip em { font-style: normal; font-size: 11px; opacity: .65; display: block; }
.sc-chip .dot { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #0c1411; background: linear-gradient(135deg, #7ff0cb, #40c9a2); }
.sc-ad { position: absolute; z-index: 1; width: 170px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: #121a1f; padding: 8px; animation: float 8s ease-in-out infinite; animation-delay: var(--d, 0s); box-shadow: 0 24px 60px -28px rgba(0,0,0,.9); }
.sc-ad div { aspect-ratio: 1; border-radius: 12px; background: radial-gradient(circle at 70% 30%, var(--a), transparent 55%), linear-gradient(145deg, var(--b), #0f161b); }
.sc-ad p { margin: 8px 4px 2px; font-size: 11px; opacity: .8; }
@keyframes scType { 0% { width: 0; } 8%, 92% { width: 17ch; } 100% { width: 0; } }
@keyframes scLit { 0%, 3% { opacity: .35; } 8%, 78% { opacity: 1; } 90%, 100% { opacity: .35; } }
@keyframes scTick { 0%, 3% { background: transparent; } 8%, 78% { background: #40c9a2; } 90%, 100% { background: transparent; } }
@keyframes scDone { 0%, 3% { opacity: .25; } 8%, 70% { opacity: 1; } 85%, 100% { opacity: .25; } }
@media (max-width: 1119px) { .sc { min-height: 0; } .sc-chip, .sc-ad { display: none; } }
@media (prefers-reduced-motion: reduce) { .sc-url span { animation: none; width: 17ch; border: 0; } .sc-steps li, .sc-steps li i, .sc-done, .sc-chip, .sc-ad { animation: none !important; opacity: 1; } .sc-steps li i { background: #40c9a2; } }

/* Arayüz vitrinleri (ekran görüntüsü yerine yeniden çizilmiş örnek arayüz; gerçek veri göstermez) */
.um { border-radius: 24px; border: 1px solid rgba(255,255,255,.09); background: linear-gradient(165deg, #131c21, #0c1215); box-shadow: 0 0 80px -28px rgba(64,201,162,.4), 0 30px 70px -34px rgba(0,0,0,.9); overflow: hidden; text-align: left; color: #cfe3dc; }
.um-top { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 12px; }
.um-top i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.um-top b { margin-left: 8px; color: #eaf6f2; font-weight: 600; }
.um-top .live { margin-left: auto; color: #7ff0cb; font-size: 11px; }
.um-body { padding: 20px; display: grid; gap: 14px; }
.um-steps { display: flex; justify-content: space-between; gap: 6px; }
.um-steps div { flex: 1; text-align: center; font-size: 11px; opacity: .55; }
.um-steps div b { display: grid; place-items: center; margin: 0 auto 6px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.18); font-size: 12px; }
.um-steps .on { opacity: 1; } .um-steps .on b { background: #40c9a2; border-color: #40c9a2; color: #0c1411; box-shadow: 0 0 18px rgba(64,201,162,.55); }
.um-field { border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); padding: 10px 14px; font-size: 13px; color: #eaf6f2; }
.um-label { font-size: 11px; opacity: .65; margin-bottom: 6px; display: block; }
.um-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.um-chip { border-radius: 999px; border: 1px solid rgba(255,255,255,.12); padding: 6px 14px; font-size: 12px; }
.um-chip.on { border-color: #40c9a2; background: rgba(64,201,162,.14); color: #8ff3d3; }
.um-btn { justify-self: end; border-radius: 999px; background: #40c9a2; color: #0c1411; font-weight: 700; font-size: 13px; padding: 9px 22px; }
.um-row { display: flex; align-items: center; gap: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); padding: 12px 14px; font-size: 13px; }
.um-row .t { font-weight: 600; color: #eaf6f2; }
.um-row .s { font-size: 11px; opacity: .65; margin-top: 2px; }
.um-row > div:nth-child(2) { flex: 1; min-width: 0; }
.um-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(64,201,162,.13); color: #7ff0cb; font-size: 15px; flex: none; }
.um-sw { width: 38px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.14); position: relative; flex: none; }
.um-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s; }
.um-sw.on { background: #40c9a2; } .um-sw.on::after { transform: translateX(16px); }
.um-amt { border-radius: 10px; border: 1px solid rgba(255,255,255,.12); padding: 5px 12px; font-size: 12px; color: #eaf6f2; flex: none; }
.um-pl { font-size: 10px; border-radius: 6px; padding: 2px 7px; background: rgba(255,255,255,.08); margin-left: 6px; }
.um-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.um-sk { height: 10px; border-radius: 6px; background: rgba(255,255,255,.1); }
.um-tile { border-radius: 14px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); padding: 14px; display: grid; gap: 10px; }
.um-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 12px; border: 1px dashed rgba(64,201,162,.45); padding: 10px 14px; font-size: 12px; color: #8ff3d3; }
@media (max-width: 640px) { .um-grid { grid-template-columns: 1fr; } .um-body { padding: 14px; } }